/* =========================================================
   STILLHUMAN — STABLE MASTER VERSION
========================================================= */

:root{
    --bg:#0b0f18;
    --overlay:rgba(0,0,0,0.65);
    --accent:#6C5CE7;
    --accent-hover:#5746d6;
    --text:#ffffff;
    --muted:#cbd5e1;
}

/* =========================================================
   RESET
========================================================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html,body{
height:100%;
}

body{
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
background:var(--bg);
color:var(--text);
line-height:1.7;
overflow-x:hidden;
}

/* =========================================================
   PARTICLES CANVAS
========================================================= */

#particles{
position:absolute;
inset:0;
pointer-events:none;
z-index:2;
}

/* =========================================================
   CONTAINER
========================================================= */

.container{
width:100%;
max-width:760px;
margin:0 auto;
padding:0 40px;
position:relative;
z-index:4;
}

/* =========================================================
   HERO
========================================================= */

.hero{
position:relative;
width:100%;
min-height:100svh;

display:flex;
align-items:center;

background-image:url("hero-desktop.webp");
background-repeat:no-repeat;
background-position:right center;
background-size:cover;

overflow:hidden;
}

/* Overlay */

.hero::before{
content:"";
position:absolute;
inset:0;

background:linear-gradient(
to right,
rgba(11,15,24,0.90) 0%,
rgba(11,15,24,0.65) 45%,
rgba(11,15,24,0.30) 70%,
rgba(11,15,24,0.0) 100%
);

z-index:3;
}

/* =========================================================
   HERO MANIFESTO
========================================================= */

.hero-manifesto{
align-items:flex-start;
padding-top:120px;
padding-bottom:160px;
}

/* =========================================================
   TYPOGRAPHY
========================================================= */

h1{
font-size:3rem;
margin-bottom:40px;
}

p{
font-size:1.15rem;
color:var(--muted);
margin-bottom:18px;
}

.strong{
font-weight:600;
color:white;
}

/* =========================================================
   BUTTON
========================================================= */

.btn{
display:inline-block;
margin-top:50px;
padding:18px 42px;

background:linear-gradient(135deg,var(--accent),#8b7bff);

color:white;
border-radius:14px;
text-decoration:none;

transition:all .25s ease;

position:relative;
z-index:5;
}

.btn:hover{
background:linear-gradient(135deg,var(--accent-hover),#7668f5);
transform:translateY(-2px);
}

/* =========================================================
   AUTH
========================================================= */

.auth-wrapper{
min-height:100svh;

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

background:url("hero-desktop.webp") center/cover no-repeat;

position:relative;
padding:40px;
}

.auth-wrapper::before{
content:"";
position:absolute;
inset:0;
background:var(--overlay);
}

.auth-card{

position:relative;
z-index:5;

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

padding:40px 28px;

background:rgba(18,24,38,0.95);

border-radius:22px;

}

/* =========================================================
   FORM
========================================================= */

input,
textarea{
width:100%;
padding:14px 16px;
margin-bottom:15px;

border-radius:10px;
border:none;

background:#1f2937;
color:white;

font-size:0.95rem;
}

input:focus,
textarea:focus{
outline:none;
box-shadow:0 0 0 2px var(--accent);
}

button{
width:100%;

padding:16px;

border-radius:12px;
border:none;

background:linear-gradient(135deg,var(--accent),#8b7bff);

color:white;

cursor:pointer;
font-size:1rem;
}

button:hover{
background:linear-gradient(135deg,var(--accent-hover),#7668f5);
}

/* =========================================================
   DASHBOARD
========================================================= */

.dashboard-wrapper{
width:100%;
max-width:760px;

margin:0 auto;
padding:120px 20px;

position:relative;
z-index:4;
}

/* =========================================================
   PROGRESS BAR
========================================================= */

.progress-bar{
width:100%;
height:8px;
background:#1a2235;
border-radius:10px;
margin:30px 0 40px 0;
overflow:hidden;
}

.progress-fill{
height:100%;
background:linear-gradient(90deg,#6C5CE7,#8b7bff);
border-radius:10px;
transition:width .6s ease;
}

/* =========================================================
   REFLECTION
========================================================= */

.reflection-card{

margin-top:50px;
padding:35px;

background:rgba(18,24,38,0.85);

border-radius:18px;
}

.reflection-header h3{
margin-bottom:12px;
}

.reflection-intro{
color:var(--muted);
margin-bottom:25px;
}

/* =========================================================
   REACTION BUTTONS
========================================================= */

.reaction-group{
display:flex;
gap:16px;
margin-bottom:20px;
flex-wrap:wrap;
}

.reaction-pill{

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

padding:12px 20px;

background:#1f2937;

border-radius:30px;

cursor:pointer;

transition:all .2s ease;

font-size:.9rem;
}

.reaction-pill:hover{
background:#2b3548;
}

.reaction-pill input{
display:none;
}

/* estado selecionado */

.reaction-pill input:checked + span{
color:white;
}

.reaction-pill:has(input:checked){
background:linear-gradient(135deg,#6C5CE7,#8b7bff);
}

/* =========================================================
   TEXTAREA
========================================================= */

.reflection-form textarea{

width:100%;

padding:16px 18px;

border-radius:12px;

border:none;

background:#1f2937;

color:white;

margin-bottom:20px;

resize:none;
}

.reflection-btn{
width:100%;
}

/* =========================================================
   PREVIOUS DAYS
========================================================= */

.previous-days-section{
margin-top:40px;
}

.previous-title{
margin-bottom:15px;
}

.previous-day-card{

display:block;

padding:14px 18px;

margin-bottom:10px;

border-radius:12px;

background:#1a2235;

color:white;

text-decoration:none;

transition:.2s;
}

.previous-day-card:hover{
background:#24304a;
}

.active-day{
background:linear-gradient(135deg,#6C5CE7,#8b7bff);
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width:768px){

.container{
padding:0 25px;
max-width:520px;
}

h1{
font-size:2.2rem;
}

/* HERO */

.hero{
align-items:center;
text-align:center;

min-height:100svh;
width:100%;

background-image:url("hero-desktop.webp");
background-repeat:no-repeat;

background-position:65% center;

background-size:cover;
}

/* HERO CONTENT */

.hero-manifesto{
padding-top:80px;
padding-bottom:80px;
}

/* overlay */

.hero::before{

background:linear-gradient(
to right,
rgba(11,15,24,0.92) 0%,
rgba(11,15,24,0.80) 40%,
rgba(11,15,24,0.40) 70%,
rgba(11,15,24,0.10) 100%
);

}

}

/* =========================================================
   REFLECTION IMPROVEMENT
========================================================= */

.reflection-title{

font-size:1.4rem;
margin-bottom:10px;

}

.reflection-card{

margin-top:50px;
padding:35px;

background:linear-gradient(
180deg,
rgba(18,24,38,0.92),
rgba(18,24,38,0.75)
);

border-radius:20px;

box-shadow:0 20px 40px rgba(0,0,0,0.35);

}

.reflection-intro{

color:var(--muted);
margin-bottom:30px;

line-height:1.6;

}

.reflection-intro strong{
color:white;
}

/* textarea melhor */

.reflection-form textarea{

width:100%;

padding:18px 20px;

border-radius:14px;

border:none;

background:#1f2937;

color:white;

margin-bottom:25px;

resize:none;

font-size:.95rem;

transition:all .2s ease;

}

.reflection-form textarea:focus{

box-shadow:0 0 0 2px var(--accent);

background:#222c3f;

}

.reaction-pill{

display:flex;
align-items:center;
gap:8px;

padding:12px 20px;

background:#1f2937;

border-radius:30px;

cursor:pointer;

transition:all .2s ease;

font-size:.9rem;

}

.reaction-pill:hover{

transform:translateY(-1px);

}
/* =========================================================
   CONTINUE PAGE
========================================================= */

.continue-wrapper{

min-height:100svh;

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

padding:40px;

}

.continue-card{

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

background:rgba(18,24,38,0.92);

padding:50px;

border-radius:22px;

box-shadow:0 20px 60px rgba(0,0,0,0.45);

}

.continue-card h1{

margin-bottom:30px;

}

.lead{

font-size:1.25rem;
margin-bottom:25px;

}


/* botão principal */

.continue-btn{

display:inline-block;

padding:18px 40px;

background:linear-gradient(135deg,#6C5CE7,#8b7bff);

color:white;

border:none;

border-radius:14px;

font-size:1rem;

cursor:pointer;

margin-top:20px;

}

.continue-btn:hover{

background:linear-gradient(135deg,#5746d6,#7668f5);

transform:translateY(-2px);

}

/* link voltar */

.ghost-back{

display:block;

margin-top:25px;

color:#cbd5e1;

text-decoration:none;

font-size:0.95rem;

}

.ghost-back:hover{

text-decoration:underline;

}

/* botão sair */

.ghost-btn{

margin-top:15px;

background:transparent;

border:1px solid #374151;

color:#cbd5e1;

padding:12px;

border-radius:10px;

cursor:pointer;

width:100%;

}

.ghost-btn:hover{

background:#1f2937;

}
/* =========================================================
   CONTINUE PAGE MOBILE FIX
========================================================= */

@media (max-width:768px){
    
.continue-btn{

width:100%;

text-align:center;

padding:18px;

}

.continue-wrapper{
padding:20px;
}

.continue-card{
padding:30px 24px;
max-width:100%;
margin:auto;
}

.continue-card h1{
font-size:2rem;
}

.continue-card p{
font-size:1rem;
line-height:1.6;
}

.price{
font-size:1.1rem;
}

}
/* =========================================================
   CONTINUE MOBILE READING FIX
========================================================= */

@media (max-width:768px){

.continue-card{
padding:28px 22px;
max-width:100%;
}

.continue-card p{
max-width:none;
font-size:1rem;
line-height:1.65;
}

.continue-card br{
display:none;
}

}
.beta-note{
margin-top:10px;
font-size:0.95rem;
color:#9ca3af;
}

.continue-btn{
white-space:nowrap;
}

.price{
margin-top:30px;
margin-bottom:30px;
font-size:1.2rem;
font-weight:600;
color:white;
line-height:1.4;
}

.price-value{
display:block;
font-size:1.4rem;
margin-top:6px;
}

.price-value{
display:block;
font-size:1.6rem;
margin-top:6px;
color:#a78bfa;
}
.price{
margin-top:30px;
margin-bottom:30px;

font-size:1.2rem;
font-weight:600;

color:white;

text-align:center;
}


.next-day-hint{

margin:28px 0 40px 0;

font-size:1rem;

color:#9ca3af;

text-align:center;

line-height:1.6;

}
.logout-link{
font-size:0.9rem;
opacity:0.7;
}

/* =========================================================
SOCIAL LOGIN
========================================================= */

.social-login{
width:100%;
margin-top:28px;
margin-bottom:28px;
}

.social-login a{
display:block;
width:100%;
text-decoration:none;
}

/* GOOGLE BUTTON */

.google-btn{

position:relative;

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

width:100%;

padding:14px 18px;
padding-left:100px;   /* espaço para o ícone */

background:#ffffff;
color:#111827;

border-radius:12px;

font-size:15px;
font-weight:500;

cursor:pointer;

box-shadow:0 2px 4px rgba(0,0,0,0.1);

transition:background .2s ease;

}

.google-btn:hover{
background:#f3f4f6;
}

/* GOOGLE ICON */

.google-btn img{

position:absolute;
left:16px;

width:18px;
height:18px;

}

/* GOOGLE ICON */

.google-btn img{

width:18px;
height:18px;

flex-shrink:0;

}

/* DIVIDER */

.divider{

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

width:100%;
margin:30px 0;

color:#9ca3af;
font-size:0.9rem;

}

.divider::before,
.divider::after{

content:"";
flex:1;
height:1px;

background:#2b3548;

margin:0 12px;

}

/* MOBILE */

@media (max-width:480px){

.auth-card{
padding:35px 24px;
}

.google-btn{
padding-left:50px;
white-space:nowrap;
font-size:14px;
}

}
/* =========================================================
   MIRROR PARTICLES FIX (ANDROID)
========================================================= */

#particles-head{
position:relative;
width:200px;
height:200px;
border-radius:50%;
overflow:hidden;
}

#particles-head canvas{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
z-index:3;
}

/* força render no Android */
transform:translateZ(0);
will-change:transform;
}

.top-actions{
display:flex;
gap:18px;
align-items:center;
margin-top:8px;
}

.logout-link{
color:#8b5cf6;
text-decoration:none;
font-size:14px;
}

.logout-link:hover{
text-decoration:underline;
}



body{
    margin:0;
    font-family: system-ui, -apple-system, sans-serif;
    background: radial-gradient(circle at top, #0f172a, #020617);
    color:white;
}

.summary-wrapper{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    padding:40px 20px;
}

.summary-card{
    max-width:520px;
    width:100%;
    background:rgba(15,23,42,0.75);
    backdrop-filter:blur(12px);
    border-radius:22px;
    padding:42px;
    text-align:center;
    box-shadow:0 25px 60px rgba(0,0,0,0.5);
}

.summary-card h1{
    font-size:32px;
    margin-bottom:20px;
}

.summary-lead{
    font-size:17px;
    opacity:0.9;
    margin-bottom:30px;
    line-height:1.6;
}

.summary-stats{
    margin:30px 0;
    text-align:left;
}

.summary-stats li{
    margin-bottom:12px;
    font-size:15px;
}

.summary-quotes{
    margin:35px 0;
}

.summary-quotes blockquote{
    background:rgba(255,255,255,0.05);
    border-left:3px solid #6C5CE7;
    padding:14px 16px;
    margin-bottom:14px;
    border-radius:8px;
    font-size:14px;
}

.summary-reflection-note{
    margin:20px 0;
    font-size:15px;
    opacity:0.85;
    line-height:1.6;
}

.summary-btn{
    margin-top:30px;
    width:100%;
    padding:16px;
    border-radius:12px;
    border:none;
    font-size:16px;
    background:linear-gradient(135deg,#6C5CE7,#7F6EF2);
    color:white;
    cursor:pointer;
}

.summary-btn:hover{
    opacity:0.9;
}