:root{
--bg1: #0f172a;    /* deep indigo */
--bg2: #0f4c81;    /* blue */
--accent: #00d4ff; /* neon cyan */
--glass: rgba(255,255,255,0.06);
--card: rgba(255,255,255,0.04);
--radius: 16px;
--maxw: 960px;
font-family: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
color-scheme: dark;
}

* {box-sizing: border-box}
html,body{height:100%}
body{
margin:0;
background: radial-gradient(1200px 600px at 10% 10%, rgba(0,212,255,0.06), transparent),
linear-gradient(135deg, var(--bg1) 0%, var(--bg2) 60%);
color:#e6f0ff;
-webkit-font-smoothing:antialiased;
display:flex;
align-items:center;
justify-content:center;
padding:40px 20px;
font-size:16px;
line-height:1.45;
}

.panel{
width:100%;
max-width:var(--maxw);
background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
border-radius: calc(var(--radius) + 4px);
box-shadow: 0 10px 30px rgba(2,6,23,0.6);
overflow:hidden;
display:grid;
grid-template-columns: 1fr 420px;
gap:0;
align-items:stretch;
}

@media (max-width:880px){
.panel{grid-template-columns:1fr; max-width:720px}
}

.left{
padding:48px;
background:
linear-gradient(180deg, rgba(255,255,255,0.02), transparent),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="400"><rect width="100%" height="100%" fill="none"/></svg>');
}

.brand{
display:flex;
gap:14px;
align-items:center;
margin-bottom:12px;
}
.logo{
width:56px;
height:56px;
border-radius:12px;
background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
display:grid;
place-items:center;
font-weight:700;
font-size:20px;
color:var(--accent);
box-shadow: 0 6px 18px rgba(0,0,0,0.4), inset 0 -6px 18px rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.03);
}

h1{
margin:6px 0 10px 0;
font-size:28px;
letter-spacing:-0.5px;
}
p.lead{
margin:0 0 20px 0;
color:rgba(230,240,255,0.88);
opacity:0.95;
}

.features{
display:flex;
gap:12px;
flex-wrap:wrap;
margin:20px 0 28px 0;
}
.chip{
background:var(--glass);
border-radius:999px;
padding:8px 12px;
font-size:14px;
border:1px solid rgba(255,255,255,0.03);
display:inline-flex;
gap:8px;
align-items:center;
}

.cta{
display:flex;
gap:12px;
align-items:center;
margin-top:10px;
}
.btn{
background:linear-gradient(90deg, var(--accent), #7afcff 60%);
color:#04202c;
font-weight:700;
border: none;
padding:12px 18px;
border-radius:12px;
cursor:pointer;
box-shadow: 0 8px 20px rgba(0,212,255,0.08);
transform: translateY(0);
transition: transform .18s ease, box-shadow .18s ease;
}
.btn:active{ transform: translateY(1px) }
.btn.secondary{
background:transparent;
color:rgba(230,240,255,0.92);
border:1px solid rgba(255,255,255,0.06);
padding:10px 14px;
font-weight:600;
}

.right{
padding:28px;
background:
linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.02) 60%),
radial-gradient(400px 120px at 20% 0%, rgba(0,212,255,0.04), transparent);
display:flex;
flex-direction:column;
gap:16px;
align-items:center;
justify-content:center;
min-height:250px;
}

.card{
width:100%;
background:var(--card);
border-radius:12px;
padding:18px;
border:1px solid rgba(255,255,255,0.02);
box-shadow: 0 6px 18px rgba(2,6,23,0.5);
}

.wave{
width:100%;
height:60px;
margin-top:14px;
display:block;
}

.highlight{
display:inline-block;
background:linear-gradient(90deg, rgba(0,212,255,0.12), rgba(122,252,255,0.06));
padding:6px 10px;
border-radius:999px;
color:var(--accent);
font-weight:700;
margin-left:6px;
}

footer.small{
font-size:13px;
color:rgba(230,240,255,0.65);
margin-top:8px;
}

@keyframes pulse {
0% { box-shadow: 0 6px 18px rgba(0,212,255,0.06) }
50% { box-shadow: 0 14px 30px rgba(0,212,255,0.10) }
100% { box-shadow: 0 6px 18px rgba(0,212,255,0.06) }
}
.logo{ animation: pulse 4s ease-in-out infinite }

@media (prefers-reduced-motion: reduce){
.logo { animation: none }
}

.muted{ color:rgba(230,240,255,0.66); font-size:14px }
.divider{ height:1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.02), transparent); margin:14px 0; border-radius:2px }

.title .subtitle {
	font-size:13px; 
	color:rgba(230,240,255,0.7)
}

#welcome-title span {
white-space:nowrap;
}

.right ul {
margin:0 0 10px 18px; 
padding:0
}

.right #summary-title {
margin:0 0 8px 0;
}

.modal-content {
background: radial-gradient(1200px 600px at 10% 10%, rgba(0,212,255,0.06), transparent),
    linear-gradient(135deg, #0f172a 0%, #0f4c81 60%);
color: #e6f0ff;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}

.modal-header, .modal-footer {
	border-color: rgba(255,255,255,0.08);
}

.btn-close {
	filter: invert(1);
}

.modal-backdrop.show {
	opacity: 0 !important;
}

.custom-input {
background: transparent !important;
border: none !important;
border-bottom: 2px solid #ccc !important;
border-radius: 0 !important;
box-shadow: none !important;
padding-left: 0 !important;
transition: border-color 0.3s ease;
color: #fff;
color: #fff !important;
caret-color: #fff;
}

.custom-input:focus {
border-bottom: 2px solid #007bff !important;
outline: none !important;
box-shadow: none !important;
color: #fff !important;
}

.form-label {
font-size: 1.1rem;
color: #aaa;
}

.custom-input::placeholder {
color: #fff !important;
opacity: 0.7;
}

.custom-input:-ms-input-placeholder { color: #fff !important; }
.custom-input::-ms-input-placeholder { color: #fff !important; }

/* Fonte mais elegante e clean */
body, input, button, label {
font-family: "Segoe UI", "Poppins", sans-serif;
letter-spacing: 0.5px;
}

/* Labels */
label {
font-size: 14px;
font-weight: 500;
color: #ffffffcc; /* branco suave */
margin-bottom: 6px;
display: inline-block;
}

/* Inputs */
input {
background: transparent;
border: none;
border-bottom: 2px solid #4dd0e1;
outline: none;
width: 100%;
padding: 8px 4px;
font-size: 15px;
color: #fff;
transition: all 0.3s ease-in-out;
}

/* Placeholder estilizado */
input::placeholder {
color: #ffffff88;
font-style: italic;
font-size: 0.8rem;
}

/* Efeito quando selecionado */
input:focus {
border-bottom: 2px solid #00e5ff;
color: #fff;
font-weight: 500;
letter-spacing: 0.7px;
}

/* Botão */
button {
background: linear-gradient(135deg, #00e5ff, #2979ff);
border: none;
border-radius: 10px;
padding: 10px 20px;
font-size: 16px;
font-weight: 600;
color: #fff;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.3s ease;
}

button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 229, 255, 0.4);
}

/* Labels */
label {
font-family: "Segoe UI", "Poppins", sans-serif;
font-size: 14px;
font-weight: 600;
color: #ffffffcc; /* branco suave */
margin-bottom: 6px;
display: block;
letter-spacing: 0.6px;
transition: color 0.3s ease;
}

/* Labels mudam de cor quando o input correspondente é focado */
input:focus + label,
input:not(:placeholder-shown) + label {
color: #00e5ff;
letter-spacing: 0.8px;
}

.form-label {
font-size: 0.8rem;
color: #bbb;
font-family: 'Segoe UI', sans-serif;
font-weight: 900;
margin-bottom: 5px;
display: block;
text-transform: uppercase;
font-style: italic;
}

.btn-criar {
font-size: 1.3rem;
padding: 12px 30px;
border-radius: 8px;
display: block;
margin: 20px auto;
background: linear-gradient(90deg, #00c6ff, #0072ff); /* opcional: estilo mais moderno */
color: #fff;
font-weight: bold;
border: none;
cursor: pointer;
transition: 0.3s ease;
width: 98%;
}

.btn-criar:hover {
transform: scale(1.02); /* efeito hover */
opacity: 0.9;
}

.invalid-feedback {
color: #ffffffcc !important; /* branco suave */
}

.text-white {
color: #ffffffcc !important;
}

#summary-title.text-white {
color: #ffffffcc !important;
}