@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root{

--bg-main:#1F1F1F;
--bg-card:#292929;
--line-soft:#2c2c2c;

--text-main:#ffffff;
--text-muted:#aaaaaa;

--contact-text:#73CE9D;
--contact-bg:#364E41;

--div-text:#FBAFAF;
--div-bg:#614442;

--settings-text:#B076C8;
--settings-bg:#46354D;

--btn-form-bg:#6d542f;
--btn-form-text:#ffd67a;

--btn-update-bg:#404a60;
--btn-update-text:#c8d4ff;

--radius:20px;

}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Poppins, sans-serif;
-webkit-tap-highlight-color:transparent;
}

html{
overscroll-behavior:none;
}

body{
background:var(--bg-main);
color:var(--text-main);
padding-top:70px;
overscroll-behavior:none;
}

button{
outline:none;
border:none;
-webkit-tap-highlight-color:transparent;
cursor:pointer;
position:relative;
overflow:hidden;
}

.logo-text{
font-size:22px;
font-weight:700;
letter-spacing:-0.5px;
color:#fff;
}


/* HEADER */

.header{

position:fixed;
top:0;
left:0;

width:100%;
height:50px;

background:rgba(31,31,31,.9);
backdrop-filter:blur(10px);

display:flex;
align-items:center;
justify-content:center;

z-index:999;

border-bottom:0.5px solid var(--line-soft);

transition:.25s ease;

}

.header-back{

position:absolute;
left:10px;
top:50%;
transform:translateY(-50%);

width:44px;
height:44px;

display:flex;
align-items:center;
justify-content:center;

color:var(--text-main);
text-decoration:none;

}

.header-back svg{
width:26px;
height:26px;
stroke-width:2.5;
}

.header-back:active{
opacity:.6;
}

.header.scrolled{
box-shadow:0 4px 10px rgba(0,0,0,.25);
}

.logo-img{
height:22px;
}


/* CONTAINER */

.container{
max-width:450px;
margin:auto;
padding:20px 10px;

animation:fadeUp .7s ease;
}


/* ANIMAÇÃO */

@keyframes fadeUp{

from{
opacity:0;
transform:translateY(20px);
}

to{
opacity:1;
transform:translateY(0);
}

}


/* HERO */

.hero{

border-radius:25px;
height:215px;

position:relative;

margin-bottom:25px;

overflow:hidden;

display:flex;
flex-direction:column;

background:#1a3a2a;

}

.wave-video{

position:absolute;
top:0;
left:0;

width:100%;
height:100%;

object-fit:cover;

opacity:.6;

}

.hero-text{
padding:36px 20px 10px;
position:relative;
z-index:2;
flex:1;
}

#line1{
font-size:26px;
font-weight:700;
line-height:1.2;
color:#fff;
}

#line2{
margin-top:8px;
font-size:15px;
font-weight:400;
color:rgba(255,255,255,.9);
line-height:1.4;
transition:opacity .3s ease;
}


/* CURSOR */

.cursor{
display:inline-block;
width:2px;
height:.9em;
background:#fff;
margin-left:2px;
vertical-align:middle;
border-radius:1px;
animation:blink .7s step-end infinite;
position:relative;
top:-1px;
}

.cursor.hidden{
display:none;
}

@keyframes blink{
0%,100%{opacity:1;}
50%{opacity:0;}
}


/* BOTÃO CADASTRAR */

.btn-cadastrar{

position:absolute;
right:16px;
bottom:16px;
z-index:3;

background:#000;
color:#00ffb3;

padding:0 22px;
height:36px;

border-radius:18px;

font-family:Poppins, sans-serif;
font-size:13px;
font-weight:700;
letter-spacing:.04em;

text-decoration:none;
display:flex;
align-items:center;
justify-content:center;

transition:.2s;

}

.btn-cadastrar:hover{
transform:translateY(-2px);
}

.btn-cadastrar:active{
transform:scale(.95);
}


/* BOTÕES DE AÇÃO */

.actions{
display:flex;
gap:15px;
margin-bottom:25px;
}

.action-btn{

flex:1;

padding:18px 14px;

border-radius:20px;

font-family:Poppins, sans-serif;
font-weight:600;
font-size:15px;

display:flex;
align-items:center;
justify-content:center;

gap:9px;

text-decoration:none;
color:inherit;

transition:.2s;

}

.action-btn:hover{
transform:translateY(-2px);
filter:brightness(1.08);
}

.action-btn:active{
transform:scale(.97);
}

.formulario{
background:var(--btn-form-bg);
color:var(--btn-form-text);
}

.atualizar{
background:var(--btn-update-bg);
color:var(--btn-update-text);
}

.action-btn svg{
flex-shrink:0;
}


/* SEÇÃO */

.section-title{
font-size:17px;
font-weight:600;
color:var(--text-muted);
margin-bottom:14px;
}


/* CARDS */

.card{

background:var(--bg-card);

border-radius:var(--radius);

padding:18px 20px;

display:flex;
align-items:center;

gap:18px;

margin-bottom:12px;

transition:.25s ease;

border:1px solid transparent;

cursor:pointer;

position:relative;
overflow:hidden;

text-decoration:none;
color:inherit;

}

.card:hover{

transform:translateY(-4px);

border:1px solid #3a3a3a;

box-shadow:0 6px 16px rgba(0,0,0,.25);

}

.card:active{
transform:scale(.98);
}


/* ÍCONE */

.icon{

width:62px;
height:62px;

border-radius:16px;

display:flex;
align-items:center;
justify-content:center;

flex-shrink:0;

}


/* CORES */

.icon.green{
background:var(--contact-bg);
color:var(--contact-text);
}

.icon.red{
background:var(--div-bg);
color:var(--div-text);
}

.icon.purple{
background:var(--settings-bg);
color:var(--settings-text);
}

.green-text{color:var(--contact-text);}
.red-text{color:var(--div-text);}
.purple-text{color:var(--settings-text);}

.card-content h3{
font-size:16px;
font-weight:700;
margin-bottom:5px;
}

.card-content p{
font-size:13px;
color:var(--text-muted);
line-height:1.5;
}


/* FOOTER */

.footer{

text-align:center;

padding:20px;

margin-top:10px;

font-size:13px;

color:var(--text-muted);

}

.footer strong{
font-weight:600;
}


/* ── MODAL BACKDROP ── */

.modal-backdrop{

position:fixed;
inset:0;
z-index:200;

background:rgba(0,0,0,.78);

display:flex;
align-items:flex-end;
justify-content:center;

opacity:0;
pointer-events:none;

transition:opacity .25s ease;

}

.modal-backdrop.open{
opacity:1;
pointer-events:all;
}


/* MODAL SHEET */

.modal-sheet{

width:100%;
max-width:450px;

background:#232323;

border-radius:24px 24px 0 0;
border-top:0.5px solid var(--line-soft);

padding-bottom:max(24px,env(safe-area-inset-bottom));

transform:translateY(100%);
transition:transform .38s cubic-bezier(.34,1.56,.64,1);

max-height:88svh;
overflow-y:auto;

}

.modal-backdrop.open .modal-sheet{
transform:translateY(0);
}

.modal-handle{

position:relative;

width:36px;
height:4px;

background:rgba(255,255,255,.15);
border-radius:4px;

margin:12px auto 0;

touch-action:none;
cursor:grab;

}

.modal-handle::before{

content:'';
position:absolute;

top:-16px;
bottom:-16px;
left:-50px;
right:-50px;

}

.modal-handle:active{
cursor:grabbing;
}

.modal-header{

display:flex;
align-items:center;
justify-content:space-between;

padding:18px 20px 0;
margin-bottom:20px;

}

.modal-title{
font-size:18px;
font-weight:700;
}

.modal-close{

width:32px;
height:32px;

border-radius:50%;
background:rgba(255,255,255,.08);

display:flex;
align-items:center;
justify-content:center;

color:var(--text-muted);

transition:.15s ease;

}

.modal-close:active{
background:rgba(255,255,255,.15);
}

.modal-body{

padding:0 20px 8px;

display:flex;
flex-direction:column;

gap:14px;

}


/* INPUTS */

.input-group{
display:flex;
flex-direction:column;
gap:7px;
}

.input-label{

font-size:11px;
font-weight:600;

color:var(--text-muted);

letter-spacing:.07em;
text-transform:uppercase;

}

.input-field{

width:100%;

background:#2a2a2a;
border:0.5px solid #3a3a3a;
border-radius:12px;

padding:13px 15px;

font-family:Poppins, sans-serif;
font-size:15px;

color:#fff;

outline:none;

transition:.18s ease;

-webkit-appearance:none;

}

.input-field::placeholder{
color:#444;
}

.input-field:focus{
border-color:#555;
box-shadow:0 0 0 3px rgba(74,254,130,.08);
}

.input-error{
border-color:#c85c5c !important;
box-shadow:0 0 0 3px rgba(200,92,92,.12) !important;
}

.input-hint{
font-size:11px;
color:#c85c5c;
min-height:14px;
}


/* SUBMIT */

.submit-btn{

display:flex;
align-items:center;
justify-content:center;

gap:8px;

width:100%;

background:#00ffb3;
color:#000;

border-radius:12px;

padding:14px 20px;

font-family:Poppins, sans-serif;
font-size:15px;
font-weight:700;

transition:.18s ease;

margin-top:4px;

}

.submit-btn:hover{opacity:.9;}
.submit-btn:active{transform:scale(.97);}

.submit-btn:disabled{
background:#3a3a3a;
color:#777;
cursor:default;
}

.submit-btn:disabled:hover{opacity:1;}
.submit-btn:disabled:active{transform:none;}

.modal-note{

font-size:12px;
color:#555;

text-align:center;
line-height:1.5;

}


/* CONTACTS LIST */

.contacts-search{
margin-bottom:12px;
}

.contacts-toolbar{

display:flex;
align-items:center;
justify-content:space-between;

margin-bottom:12px;

}

.toolbar-actions{
display:flex;
align-items:center;
gap:8px;
}

.sort-select{

background:#2a2a2a;
border:0.5px solid #3a3a3a;
border-radius:20px;

padding:7px 10px;

font-family:Poppins, sans-serif;
font-size:12px;
font-weight:500;

color:#fff;

outline:none;

}

.contacts-count{
font-size:13px;
font-weight:500;
color:var(--text-muted);
}

.export-btn{

display:flex;
align-items:center;

gap:6px;

background:#2a2a2a;
border:0.5px solid #3a3a3a;
border-radius:20px;

padding:7px 14px;

font-family:Poppins, sans-serif;
font-size:12px;
font-weight:500;

color:#fff;

transition:.15s ease;

}

.export-btn:active{opacity:.7;}

.export-btn:disabled{
opacity:.35;
cursor:default;
}

.contacts-list{

display:flex;
flex-direction:column;

gap:10px;

max-height:56svh;
overflow-y:auto;

padding:2px 2px 8px;

}

.contact-item{

display:flex;
align-items:center;

gap:14px;

background:var(--bg-card);
border-radius:16px;
border:1px solid transparent;

padding:14px 16px;

transition:.2s ease;

}

.contact-item:hover{
transform:translateY(-2px);
border-color:#3a3a3a;
box-shadow:0 6px 16px rgba(0,0,0,.22);
}

.contact-avatar{

width:42px;
height:42px;

border-radius:50%;

background:var(--contact-bg);
border:none;

display:flex;
align-items:center;
justify-content:center;

font-size:14px;
font-weight:700;

color:var(--contact-text);

flex-shrink:0;

}

.contact-info{flex:1;min-width:0;}

.contact-name{

font-size:14px;
font-weight:600;

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

}

.contact-phone{

font-size:12px;
color:var(--text-muted);

margin-top:1px;
font-family:monospace;

}

.contact-joined{
font-size:11px;
color:#666;
margin-top:2px;
}

textarea.input-field{
resize:vertical;
font-family:Poppins, sans-serif;
}

.report-reasons{
display:flex;
flex-direction:column;
gap:8px;
}

.report-reason-option{

display:flex;
align-items:center;

gap:10px;

background:#2a2a2a;
border:0.5px solid #3a3a3a;
border-radius:12px;

padding:12px 14px;

font-size:14px;

cursor:pointer;

}

.report-reason-option input{
accent-color:#00ffb3;
width:16px;
height:16px;
flex-shrink:0;
}

.contact-actions{
display:flex;
align-items:center;
gap:8px;
flex-shrink:0;
}

.contact-wa{

width:32px;
height:32px;

border-radius:50%;

background:rgba(37,211,102,.1);

display:flex;
align-items:center;
justify-content:center;
color:#25D366;

flex-shrink:0;

text-decoration:none;

transition:.15s ease;

}

.contact-wa:active{background:rgba(37,211,102,.22);}

.contact-delete{

width:32px;
height:32px;

border-radius:50%;

background:rgba(200,92,92,.1);
color:#c85c5c;

display:flex;
align-items:center;
justify-content:center;

flex-shrink:0;

transition:.15s ease;

}

.contact-delete:active{background:rgba(200,92,92,.22);}

.contact-report{

width:32px;
height:32px;

border-radius:50%;

background:rgba(255,255,255,.06);
color:var(--text-muted);

display:flex;
align-items:center;
justify-content:center;

flex-shrink:0;

transition:.15s ease;

}

.contact-report:active{background:rgba(255,255,255,.14);}

.contacts-empty{

text-align:center;

padding:40px 20px;

color:var(--text-muted);

font-size:14px;
line-height:1.7;

}

.contacts-empty strong{
display:block;
font-size:28px;
margin-bottom:8px;
}

.empty-icon-search{
display:flex;
align-items:center;
justify-content:center;
margin-bottom:8px;
color:var(--text-muted);
}


/* RIPPLE */

.ripple{
position:absolute;
border-radius:50%;
background:rgba(255,255,255,.35);
transform:scale(0);
animation:rippleAnim .6s ease;
pointer-events:none;
}

@keyframes rippleAnim{
to{transform:scale(2.6);opacity:0;}
}


/* TOAST */

.toast{

position:fixed;
bottom:32px;
left:50%;

transform:translateX(-50%) translateY(20px);

background:#2a2a2a;
border:0.5px solid #3a3a3a;
border-radius:50px;

padding:10px 20px;

font-family:Poppins, sans-serif;
font-size:13px;
font-weight:500;

color:#fff;

z-index:999;

opacity:0;
pointer-events:none;

transition:opacity .2s ease,transform .2s ease;

white-space:nowrap;

box-shadow:0 8px 24px rgba(0,0,0,.4);

}

.toast.show{
opacity:1;
transform:translateX(-50%) translateY(0);
}


/* SCROLLBAR */

::-webkit-scrollbar{width:0;}


/* PHONE INPUT (campo de telefone com prefixo +55, tela de Formulário) */

.phone-input-wrap{
display:flex;
align-items:center;

background:#2a2a2a;
border:0.5px solid #3a3a3a;
border-radius:12px;

padding:0 15px;

transition:.18s ease;
}

.phone-input-wrap:focus-within{
border-color:#555;
box-shadow:0 0 0 3px rgba(255,255,255,.06);
}

.phone-input-wrap.input-error{
border-color:#c85c5c !important;
box-shadow:0 0 0 3px rgba(200,92,92,.12) !important;
}

.phone-prefix{
font-size:15px;
font-weight:700;
color:var(--text-main);
padding:13px 0;
}

.phone-divider{
width:1px;
height:22px;
background:#3a3a3a;
margin:0 12px;
flex-shrink:0;
}

.phone-input{
flex:1;
min-width:0;

border:none;
background:transparent;
outline:none;

font-family:Poppins, sans-serif;
font-size:15px;
color:#fff;

padding:13px 0;

-webkit-appearance:none;
}

.phone-input::placeholder{color:#444;}


/* LINK INLINE (ex: dentro do texto de Política de Privacidade) */

.inline-link{
color:var(--text-main);
text-decoration:underline;
font-weight:600;
}

.inline-link:active{opacity:.7;}


/* ÍCONE DE BLOQUEIO (telas de "acesso restrito", ex: Ajustes sem cadastro) */

.locked-icon{
width:62px;
height:62px;
border-radius:16px;

background:var(--settings-bg);
color:var(--settings-text);

display:flex;
align-items:center;
justify-content:center;

margin:0 auto 4px;
}


/* TEXTO LEGAL (página de Política de Privacidade e Termos) */

.legal-text h2{
font-size:15px;
font-weight:700;
margin:14px 0 6px;
}

.legal-text h2:first-child{margin-top:0;}

.legal-text p{
font-size:13px;
color:var(--text-muted);
line-height:1.7;
margin-bottom:4px;
}


/* ── PAGE CARD (formulário e ajustes como página própria) ── */

.page-card{

background:var(--bg-card);
border-radius:var(--radius);

padding:22px 20px;

display:flex;
flex-direction:column;

gap:14px;

animation:fadeUp .4s ease;

}

.page-title{
font-size:20px;
font-weight:700;
margin-bottom:4px;
}

.page-subtitle{
font-size:13px;
color:var(--text-muted);
margin-top:-10px;
margin-bottom:4px;
line-height:1.5;
}