*,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;font-size:135%;transition:font-size .3s} /* ── PRESENTATION MODE (máy chiếu) ── toggle class on ── */ html.pres-mode{font-size:185%} html.pres-mode .topbar{padding:1rem 1.8rem;border-radius:32px} html.pres-mode .tb-brand img{height:44px} html.pres-mode .tb-brand{font-size:1.3rem} html.pres-mode .tb-link{font-size:1rem;padding:8px 18px} html.pres-mode .lang-b{font-size:.9rem;padding:6px 14px} html.pres-mode .tb-theme,html.pres-mode .sound-toggle{width:48px;height:48px;font-size:1.3rem} html.pres-mode .pres-btn{background:rgba(249,115,22,.18);border-color:var(--accent);color:var(--accent)} html.pres-mode .flow-wrap{max-width:min(99vw,1860px);padding:2rem 2.5rem 3rem} html.pres-mode .input-area{min-height:280px;font-size:1.1rem;line-height:2} html.pres-mode .mood-wrap{max-width:820px} html.pres-mode .step-card{padding:1.4rem 1.6rem} html.pres-mode .step-text{font-size:1.05rem;line-height:1.85} html.pres-mode .chip{font-size:.9rem;padding:8px 16px} html.pres-mode .section-title{font-size:clamp(1.3rem,2vw,1.7rem)} /* Pres button in topbar */ .pres-btn{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--border2);background:var(--glass2);display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:all .3s;cursor:pointer;flex-shrink:0} body{font-family:var(--fs);font-weight:400;line-height:1.75;min-height:100vh;position:relative;overflow-x:hidden;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:1.05rem;overflow-wrap:break-word;word-break:break-word;hyphens:auto} button,input,textarea,select{font-family:inherit;font-size:1.05rem;line-height:1.5;overflow-wrap:break-word;word-break:break-word} body::before{content:'';position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 20% 15%,rgba(249,115,22,.14),transparent 18%),radial-gradient(circle at 85% 20%,rgba(96,165,250,.1),transparent 16%),radial-gradient(circle at 50% 92%,rgba(52,211,153,.08),transparent 16%);mix-blend-mode:soft-light;z-index:-2;opacity:.95} a{text-decoration:none;transition:.3s}img{max-width:100%;display:block}button{font-family:inherit;cursor:pointer;border:none;background:none} :root{--fd:'Be Vietnam Pro','Segoe UI',system-ui,-apple-system,sans-serif;--r:20px;--rs:12px;--ease:cubic-bezier(.4,0,.2,1);--spring:cubic-bezier(.34,1.56,.64,1);--pointer-x:0px;--pointer-y:0px} [data-theme="dark"]{--bg:#020510;--text:#f2efe8;--t2:#bbc8d8;--t3:#8896a8;--accent:#f97316;--accent2:#fb923c;--accent-glow:rgba(249,115,22,.14);--blue:#60a5fa;--green:#34d399;--coral:#fb7185;--violet:#a78bfa;--glass:rgba(255,255,255,.05);--glass2:rgba(255,255,255,.08);--glass3:rgba(255,255,255,.13);--border:rgba(255,255,255,.10);--border2:rgba(255,255,255,.16);--border-accent:rgba(249,115,22,.25);--shadow:0 12px 48px rgba(0,0,0,.5);--nav-bg:rgba(2,5,16,.72);--safe-bg:rgba(249,115,22,.07);--safe-border:rgba(249,115,22,.22);--ev-bg:rgba(52,211,153,.07);--ev-border:rgba(52,211,153,.22);--card-hover:rgba(255,255,255,.04);--skel:linear-gradient(90deg,var(--glass) 25%,var(--glass2) 50%,var(--glass) 75%)} [data-theme="light"]{--bg:#f5f3ef;--text:#18150f;--t2:#4a4440;--t3:#7a7068;--accent:#ea580c;--accent2:#f97316;--accent-glow:rgba(234,88,12,.10);--blue:#2563eb;--green:#059669;--coral:#dc2626;--violet:#7c3aed;--glass:rgba(255,255,255,.65);--glass2:rgba(255,255,255,.85);--glass3:rgba(255,255,255,.97);--border:rgba(0,0,0,.08);--border2:rgba(0,0,0,.14);--border-accent:rgba(234,88,12,.18);--shadow:0 12px 48px rgba(0,0,0,.07);--nav-bg:rgba(245,243,239,.82);--safe-bg:rgba(249,115,22,.05);--safe-border:rgba(249,115,22,.15);--ev-bg:rgba(52,211,153,.06);--ev-border:rgba(52,211,153,.15);--card-hover:rgba(255,255,255,.55);--skel:linear-gradient(90deg,var(--glass) 25%,var(--glass2) 50%,var(--glass) 75%)} body{background:var(--bg);color:var(--text);transition:background .6s,color .5s;min-height:100vh;position:relative} body::after{content:'';position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 16% 20%,rgba(255,255,255,.08),transparent 16%),radial-gradient(circle at 84% 18%,rgba(96,165,250,.05),transparent 14%);mix-blend-mode:screen;opacity:.92;z-index:-1} #cosmos{position:fixed;inset:0;z-index:-2;pointer-events:none} .bg-mesh{position:fixed;inset:0;z-index:-1;pointer-events:none;transition:opacity 1s} [data-theme="dark"] .bg-mesh{background:radial-gradient(ellipse 50% 40% at 20% 15%,rgba(249,115,22,.04),transparent 55%),radial-gradient(ellipse 40% 50% at 80% 30%,rgba(96,165,250,.03),transparent 50%),radial-gradient(ellipse 60% 35% at 50% 85%,rgba(52,211,153,.02),transparent 50%)} [data-theme="light"] .bg-mesh{background:radial-gradient(ellipse 50% 40% at 20% 15%,rgba(249,115,22,.03),transparent 55%),radial-gradient(ellipse 40% 50% at 80% 30%,rgba(96,165,250,.02),transparent 50%)} @keyframes pageIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}} @keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}} @keyframes fadeIn{from{opacity:0}to{opacity:1}} @keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 var(--accent-glow)}50%{box-shadow:0 0 32px 8px var(--accent-glow)}} @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} @keyframes gradShift{0%{background-position:0% center}50%{background-position:100% center}100%{background-position:0% center}} @keyframes dotPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.5)}} @keyframes breathe{0%,100%{opacity:.6}50%{opacity:1}} @keyframes scrollDrop{0%{top:-100%}100%{top:200%}} @keyframes countPulse{0%{transform:scale(1)}50%{transform:scale(1.15)}100%{transform:scale(1)}} @keyframes confettiDrop{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(200px) rotate(720deg);opacity:0}} @keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}} @keyframes voicePulse{0%,100%{box-shadow:0 0 0 0 rgba(249,115,22,.3)}50%{box-shadow:0 0 0 12px rgba(249,115,22,0)}} /* NAV */ .topbar{position:fixed;top:12px;left:50%;transform:translateX(-50%) translateY(0);z-index:100;display:flex;align-items:center;justify-content:space-between;width:min(97vw,1100px);padding:.85rem 1.4rem;background:var(--nav-bg);backdrop-filter:blur(30px) saturate(1.2);border:1px solid var(--border);border-radius:28px;transition:all .4s;gap:.6rem;opacity:1;pointer-events:all} .topbar.hidden{transform:translateX(-50%) translateY(-100px);opacity:0;pointer-events:none} .topbar.scrolled{box-shadow:0 18px 48px rgba(0,0,0,.18);border-color:var(--border2)} .tb-brand{display:flex;align-items:center;gap:.6rem;color:var(--text);font-weight:700;font-size:1.1rem;flex-shrink:0} .tb-brand img{height:36px;border-radius:8px;transition:transform .6s var(--spring)} .tb-brand:hover img{transform:rotate(360deg) scale(1.08)} .tb-brand span{color:var(--accent)} .tb-nav{position:relative;display:flex;gap:2px;background:var(--glass);border:1px solid var(--border);border-radius:99px;padding:3px;flex:1;overflow-x:auto;overflow-y:hidden;min-width:0;max-width:580px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none} .tb-nav::-webkit-scrollbar{display:none} .tb-link{color:var(--t2);font-size:clamp(.82rem,.42vw+.4rem,.92rem);font-weight:600;padding:7px 14px;border-radius:99px;transition:.25s;white-space:nowrap;flex-shrink:1} .tb-link:hover{color:var(--text);background:var(--glass2)} .tb-link.active{color:var(--accent);background:var(--safe-bg);font-weight:700} .tb-right{display:flex;align-items:center;gap:.5rem;flex-shrink:0} .lang-pill{display:flex;background:var(--glass);border:1.5px solid var(--border);border-radius:99px;padding:3px} .lang-b{padding:5px 12px;border-radius:99px;color:var(--t2);font-size:.78rem;font-weight:700;transition:.2s;letter-spacing:.04em} .lang-b.active{background:var(--accent);color:#fff;letter-spacing:.06em} .tb-theme,.sound-toggle{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--border2);background:var(--glass2);display:flex;align-items:center;justify-content:center;font-size:1.15rem;transition:all .5s var(--spring);cursor:pointer} .tb-theme:hover{transform:rotate(180deg);border-color:var(--accent);background:var(--accent-glow)} .sound-toggle.on{border-color:var(--accent);background:var(--accent-glow)} /* Auth nav dropdown — fix wrapping */ #authNav{position:relative} #authNav .auth-dropdown{position:absolute;top:calc(100% + 8px);right:0;min-width:160px;background:var(--glass3);border:1px solid var(--border2);border-radius:14px;padding:6px;backdrop-filter:blur(20px);box-shadow:var(--shadow);z-index:200;display:none} #authNav .auth-dropdown.open{display:block} #authNav .auth-drop-btn{display:block;width:100%;padding:8px 14px;border-radius:10px;font-size:.82rem;font-weight:600;text-align:left;color:var(--text);white-space:nowrap;transition:.2s;cursor:pointer} #authNav .auth-drop-btn:hover{background:var(--glass2);color:var(--accent)} #authNav .auth-avatar{width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;font-size:.75rem;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;border:2px solid transparent;transition:.2s} #authNav .auth-avatar:hover{border-color:var(--accent)} @media(max-width:700px){ .topbar{width:97vw;top:8px;padding:.7rem 1rem;flex-wrap:wrap;justify-content:flex-start;gap:.55rem} .tb-nav{display:flex;max-width:100%;width:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;gap:.5rem;padding:6px;flex-wrap:nowrap;scrollbar-width:none;position:relative} .tb-nav::-webkit-scrollbar{display:none} .tb-nav.scrollable::before,.tb-nav.scrollable::after{opacity:1} .tb-nav::before,.tb-nav::after{content:'';position:absolute;top:0;bottom:0;width:48px;pointer-events:none;opacity:0;transition:opacity .25s} .tb-nav::before{left:0;background:linear-gradient(to right,rgba(255,255,255,.85),transparent)} .tb-nav::after{right:0;background:linear-gradient(to left,rgba(255,255,255,.85),transparent)} .tb-link{flex:0 0 auto;scroll-snap-align:start;padding:8px 12px;font-size:.88rem} .tb-more-btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:999px;border:1px solid var(--border);background:var(--glass2);color:var(--text);font-size:.82rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:.25s;margin-left:auto;flex-shrink:0} .tb-more-btn:hover{background:var(--glass);border-color:var(--accent)} .tb-right{gap:.4rem;flex-wrap:wrap;width:100%;justify-content:flex-end} .input-wrap{max-width:100vw;margin:0 calc(50vw - 50%);border-radius:24px;padding:1.25rem} .input-area{min-height:280px} } /* LANDING */ .landing{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr);gap:2rem;align-items:start;justify-items:center;text-align:center;padding:8rem 1.5rem 4rem;animation:pageIn .8s var(--ease) both;position:relative;transform:translate3d(var(--pointer-x),var(--pointer-y),0);transition:transform .15s ease-out;max-width:1120px;margin:0 auto} .landing::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 18% 14%,rgba(249,115,22,.16),transparent 16%),radial-gradient(circle at 82% 20%,rgba(96,165,250,.1),transparent 15%),radial-gradient(circle at 52% 92%,rgba(52,211,153,.08),transparent 14%);mix-blend-mode:screen;opacity:.8} .landing-logo{width:clamp(100px,15vw,160px);margin-bottom:1.5rem;filter:drop-shadow(0 4px 32px rgba(249,115,22,.15));animation:bob 5s ease-in-out infinite;will-change:transform} .landing h1{font-family:var(--fd);font-size:clamp(2rem,4.5vw+.5rem,3.8rem);font-weight:400;line-height:1.1;max-width:840px;margin:0 auto .6rem;transform:translate3d(calc(var(--pointer-x)/4),calc(var(--pointer-y)/4),0);text-shadow:0 18px 40px rgba(0,0,0,.12)} .landing h1 em{font-family:'Be Vietnam Pro',sans-serif;font-style:italic;font-weight:800;background:linear-gradient(135deg,var(--accent),var(--blue),var(--green));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;background-size:200% auto;animation:gradShift 6s ease infinite;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} .landing-slogan{color:var(--accent);font-weight:700;font-size:clamp(1.05rem,1.25vw+.4rem,1.25rem);margin-bottom:1.4rem;letter-spacing:.02em} .landing-sub{color:var(--t2);font-size:clamp(1rem,1vw+.44rem,1.12rem);max-width:min(94vw,820px);margin:0 auto 1.75rem;font-weight:400;line-height:1.95} /* WINS */ .wins{display:none;margin-bottom:2rem;padding:1.25rem 1.5rem;background:var(--glass2);border:1px solid var(--border);border-radius:var(--r);animation:fadeUp .5s .2s both;max-width:min(98vw,760px);width:100%} .wins.show{display:block} .wins-top{display:flex;gap:1.5rem;align-items:center;justify-content:center;flex-wrap:wrap;margin-bottom:.5rem} .win-stat{text-align:center}.win-num{font-size:clamp(1.4rem,2vw,1.8rem);font-weight:800;color:var(--accent)}.win-label{font-size:clamp(.6rem,.4vw+.25rem,.7rem);color:var(--t3);text-transform:uppercase;letter-spacing:.08em} .win-streak{display:flex;align-items:center;gap:.3rem;padding:.3rem .7rem;background:var(--accent-glow);border-radius:99px;font-size:clamp(.65rem,.4vw+.25rem,.72rem);color:var(--accent);font-weight:600} .win-divider{width:100%;height:1px;background:var(--border);margin:.75rem 0} .win-chart-title{font-size:clamp(.6rem,.38vw+.24rem,.66rem);color:var(--t3);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.5rem;font-weight:600} .win-bar-row{display:flex;align-items:center;gap:.4rem;margin-bottom:.35rem} .win-bar-label{font-size:clamp(.62rem,.38vw+.25rem,.7rem);color:var(--t3);width:85px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0} .win-bar-track{flex:1;height:5px;background:var(--glass);border-radius:99px;overflow:hidden} .win-bar-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width 1.2s var(--ease);will-change:width} .win-bar-pct{font-size:clamp(.6rem,.35vw+.22rem,.66rem);color:var(--accent);font-weight:700;min-width:36px;text-align:right;flex-shrink:0;white-space:nowrap} .prediction-card{width:100%;margin-top:.75rem;padding:.65rem 1rem;background:rgba(167,139,250,.06);border:1px solid rgba(167,139,250,.15);border-radius:var(--rs);display:flex;align-items:flex-start;gap:.6rem} .prediction-icon{font-size:1rem;flex-shrink:0;margin-top:.05rem} .prediction-text{font-size:clamp(.68rem,.4vw+.28rem,.74rem);color:var(--t2);line-height:1.6} .prediction-text strong{color:var(--violet);font-weight:600} /* Emergency Modal */ .emergency-modal{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-46%) scale(.98);opacity:0;z-index:200;background:var(--glass3);border:1px solid var(--border2);border-radius:var(--r);padding:2rem;max-width:400px;width:92%;backdrop-filter:blur(24px);box-shadow:var(--shadow);transition:transform .35s var(--ease),opacity .35s var(--ease);will-change:transform,opacity} .emergency-modal.show{display:block;transform:translate(-50%,-50%) scale(1);opacity:1} .emergency-q{font-family:var(--fd);font-size:1.05rem;margin-bottom:1rem;line-height:1.4;color:var(--text)} .emergency-step-hint{font-size:clamp(.62rem,.38vw+.24rem,.68rem);color:var(--t3);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.6rem} .emergency-options{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:1.25rem} .em-opt{padding:8px 16px;border-radius:99px;font-size:clamp(.72rem,.4vw+.3rem,.8rem);border:1px solid var(--border2);color:var(--t2);background:var(--glass);transition:.25s;cursor:pointer;font-family:inherit} .em-opt:hover,.em-opt.selected{border-color:var(--accent);color:var(--accent);background:var(--safe-bg)} .emergency-close{position:absolute;top:.75rem;right:.75rem;width:28px;height:28px;border-radius:50%;background:var(--glass);border:1px solid var(--border);color:var(--t3);font-size:.8rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s;font-family:inherit;line-height:1} .emergency-close:hover{color:var(--text);border-color:var(--border2)} .em-progress{display:flex;gap:4px;margin-bottom:1.25rem} .em-dot{flex:1;height:3px;border-radius:99px;background:var(--border);transition:.4s} .em-dot.done{background:var(--accent)} /* ONBOARDING */ .onboard{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-46%) scale(.98);opacity:0;z-index:200;background:var(--glass3);border:1px solid var(--border2);border-radius:var(--r);padding:2rem;max-width:380px;width:90%;text-align:center;backdrop-filter:blur(24px);box-shadow:var(--shadow);animation:fadeUp .4s;transition:transform .35s var(--ease),opacity .35s var(--ease);will-change:transform,opacity} .onboard.show{display:block;transform:translate(-50%,-50%) scale(1);opacity:1} .onboard-overlay{display:none;position:fixed;inset:0;z-index:199;background:rgba(0,0,0,.5);opacity:0;transition:opacity .35s var(--ease);visibility:hidden} .onboard-overlay.show{display:block;opacity:1;visibility:visible} .onboard h3{font-family:var(--fd);font-size:1.3rem;margin-bottom:.75rem} .onboard p{font-size:.88rem;color:var(--t2);margin-bottom:1.25rem;line-height:1.7} .onboard-btn{padding:10px 24px;border-radius:99px;background:var(--accent);color:#fff;font-weight:600;font-size:.88rem;transition:.3s} /* MOOD */ .mood-wrap{max-width:700px;width:100%;margin-bottom:1.5rem;display:flex;align-items:center;gap:.75rem;justify-content:center;animation:fadeIn .5s .3s both} .mood-wrap span{font-size:1.3rem}.mood-label{font-size:clamp(.68rem,.4vw+.3rem,.75rem);color:var(--t3)} .mood-slider{-webkit-appearance:none;width:200px;height:6px;border-radius:99px;background:linear-gradient(90deg,var(--coral),var(--accent),var(--green));outline:none;cursor:pointer} .mood-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--accent);cursor:pointer} /* VOICE */ .voice-row{display:flex;gap:.5rem;align-items:center;margin-bottom:1rem;justify-content:center} .voice-btn{padding:10px 20px;border-radius:99px;border:1px solid var(--border);background:var(--glass);color:var(--t2);font-size:clamp(.75rem,.5vw+.3rem,.85rem);transition:.3s;display:flex;align-items:center;gap:.4rem;will-change:transform,box-shadow} .voice-btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);box-shadow:0 10px 28px rgba(249,115,22,.12)} .voice-btn.recording{border-color:var(--coral);color:var(--coral);background:rgba(251,113,133,.08);animation:voicePulse 1.5s infinite} .emergency-btn{margin-bottom:1rem;padding:8px 20px;border-radius:99px;border:1px solid var(--border);background:var(--glass);color:var(--t2);font-size:clamp(.72rem,.4vw+.3rem,.8rem);transition:.3s;will-change:transform,box-shadow} .emergency-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-glow);transform:translateY(-2px);box-shadow:0 10px 28px rgba(249,115,22,.12)} /* INPUT */ .input-wrap{max-width:100%;width:100%;margin:0 auto;animation:fadeUp .6s .2s both;padding:2rem;background:var(--glass);border:1px solid var(--border);border-radius:32px;box-shadow:0 26px 68px rgba(0,0,0,.12);display:grid;gap:1.2rem} .input-tabs{display:flex;gap:4px;margin-bottom:1rem;background:var(--glass);border:1px solid var(--border);border-radius:99px;padding:4px;overflow:hidden} .input-tab{flex:1;padding:9px;border-radius:99px;font-size:clamp(.7rem,.5vw+.3rem,.8rem);font-weight:500;color:var(--t3);text-align:center;transition:.3s} .input-tab.active{background:var(--accent);color:#fff;box-shadow:0 2px 12px var(--accent-glow)} .input-area{width:100%;min-height:240px;padding:1.5rem;background:var(--glass);border:1.5px solid var(--border);border-radius:var(--r);color:var(--text);font-family:inherit;font-size:clamp(1rem,.8vw+.4rem,1.15rem);resize:vertical;transition:border-color .3s,box-shadow .3s;line-height:1.8} .input-area:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-glow)} .input-area::placeholder{color:var(--t3)} .pdf-zone{width:100%;min-height:130px;border:2px dashed var(--border2);border-radius:var(--r);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;color:var(--t3);font-size:clamp(.8rem,.5vw+.35rem,.9rem);transition:.3s;cursor:pointer;position:relative;will-change:transform,box-shadow} .pdf-zone:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-glow);transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.08)} .pdf-zone input{position:absolute;inset:0;opacity:0;cursor:pointer}.pdf-icon{font-size:2rem;opacity:.4}.pdf-name{font-size:clamp(.72rem,.4vw+.3rem,.8rem);color:var(--accent);font-weight:500} .chip-label{font-size:clamp(.7rem,.4vw+.3rem,.78rem);color:var(--t3);margin:.75rem 0 .5rem} .barrier-chips{display:flex;flex-wrap:wrap;gap:6px} .barrier-chip{padding:7px 15px;border-radius:99px;font-size:clamp(.7rem,.4vw+.3rem,.78rem);font-weight:500;border:1px solid var(--border);color:var(--t2);background:var(--glass);transition:.3s;will-change:transform,box-shadow} .barrier-chip:hover{border-color:var(--border2);transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.08)}.barrier-chip.selected{border-color:var(--accent);color:var(--accent);background:var(--safe-bg);box-shadow:0 0 0 3px var(--accent-glow)} .examples{margin:1.2rem 0}.examples-label{font-size:clamp(.68rem,.4vw+.3rem,.75rem);color:var(--t3);margin-bottom:.5rem} .example-btn{display:block;width:100%;text-align:left;padding:10px 14px;margin-bottom:5px;border-radius:var(--rs);font-size:clamp(.74rem,.5vw+.3rem,.84rem);color:var(--t2);background:var(--glass);border:1px solid var(--border);transition:.3s;line-height:1.5;will-change:transform} .example-btn:hover{border-color:var(--accent);color:var(--text);transform:translateX(4px);box-shadow:0 12px 28px rgba(0,0,0,.08)} .submit-btn{width:100%;padding:15px;border-radius:99px;font-size:clamp(.92rem,.6vw+.4rem,1.08rem);font-weight:700;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));background-size:240% 240%;animation:gradShift 8s ease infinite;transition:.35s;box-shadow:0 4px 28px var(--accent-glow);margin-top:1.2rem;position:relative;overflow:hidden} .submit-btn::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent,rgba(255,255,255,.1));opacity:0;transition:.3s} .submit-btn:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 12px 46px rgba(249,115,22,.32)}.submit-btn:hover::after{opacity:1} .submit-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none} .error-msg{color:var(--coral);font-size:clamp(.75rem,.5vw+.3rem,.85rem);margin-top:.6rem} /* DOMAIN COLORS */ .domain-stem{--d-color:var(--blue);--d-bg:rgba(96,165,250,.06);--d-border:rgba(96,165,250,.15)} .domain-reading{--d-color:var(--green);--d-bg:rgba(52,211,153,.06);--d-border:rgba(52,211,153,.15)} .domain-skill{--d-color:var(--accent);--d-bg:rgba(249,115,22,.06);--d-border:rgba(249,115,22,.15)} .domain-humanities{--d-color:var(--violet);--d-bg:rgba(167,139,250,.06);--d-border:rgba(167,139,250,.15)} .domain-general{--d-color:var(--t2);--d-bg:var(--glass);--d-border:var(--border)} .domain-badge{display:inline-flex;align-items:center;gap:.4rem;padding:4px 12px;border-radius:99px;font-size:clamp(.65rem,.4vw+.25rem,.72rem);font-weight:600;color:var(--d-color);background:var(--d-bg);border:1px solid var(--d-border);margin-bottom:.75rem} /* SKELETON */ .skeleton{border-radius:var(--r);background:var(--skel);background-size:200% 100%;animation:shimmer 1.5s infinite;min-height:160px} /* FLOW */ .flow-wrap{max-width:min(98vw,1600px);width:min(98vw,1600px);margin:5.5rem auto 3rem;padding:2rem 2.5rem 3rem;animation:pageIn .6s var(--ease) both;background:var(--glass);border:1px solid var(--border);border-radius:32px;box-shadow:0 30px 80px rgba(0,0,0,.12)} .flow-progress{display:flex;gap:8px;margin-bottom:2rem} .flow-dot{flex:1;height:5px;border-radius:999px;background:var(--border);transition:.5s var(--ease)} .flow-dot.done{background:var(--green)}.flow-dot.active{background:var(--accent);animation:breathe 1.5s infinite} .flow-card{background:var(--glass);border:1px solid var(--border);border-radius:var(--r);padding:clamp(1.5rem,2.5vw,2.2rem);backdrop-filter:blur(16px);animation:fadeUp .5s var(--ease) both;transition:transform .4s,border-color .4s,box-shadow .4s;will-change:transform,box-shadow} .flow-card:hover{transform:translateY(-4px);box-shadow:0 18px 42px rgba(0,0,0,.14)} .flow-label{font-size:clamp(.74rem,.4vw+.36rem,.82rem);font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--accent);margin-bottom:1rem;display:flex;align-items:center;gap:.5rem} .flow-label::before{content:'';width:16px;height:2px;background:var(--accent);border-radius:2px} .flow-title{font-family:var(--fd);font-size:clamp(1.6rem,2.2vw+.5rem,2.2rem);font-weight:400;line-height:1.3;margin-bottom:.75rem} .flow-text{font-size:clamp(1rem,.75vw+.45rem,1.15rem);color:var(--t2);line-height:1.9;margin-bottom:1rem} .micro-copy{font-size:clamp(.86rem,.5vw+.36rem,.96rem);color:var(--accent);font-style:italic;margin-bottom:1rem;padding:.5rem .75rem;background:var(--accent-glow);border-radius:var(--rs)} .safe-card{border-color:var(--safe-border);background:var(--safe-bg);animation:fadeUp .5s var(--ease) both,pulseGlow 3s ease-in-out 1s 2} .safe-action{font-size:clamp(1.3rem,1.8vw+.5rem,1.85rem);font-weight:600;color:var(--text);line-height:1.5;margin-bottom:1rem} .safe-time{display:inline-flex;align-items:center;gap:.4rem;padding:5px 14px;background:var(--glass2);border:1px solid var(--border);border-radius:99px;font-size:clamp(.76rem,.4vw+.36rem,.84rem);color:var(--accent);font-weight:600;margin-bottom:.75rem} .safe-target{font-size:clamp(.88rem,.5vw+.4rem,.98rem);color:var(--t2);margin-bottom:.5rem;padding:.55rem .8rem;background:var(--glass);border-radius:var(--rs);border-left:3px solid var(--accent)} .safe-why{font-size:clamp(.82rem,.4vw+.36rem,.92rem);color:var(--t2);margin-bottom:.5rem} .safe-compare{font-size:clamp(.78rem,.4vw+.34rem,.86rem);color:var(--green);margin-top:.5rem;padding:.4rem .6rem;background:var(--ev-bg);border-radius:var(--rs)} .evidence-card{border-color:var(--ev-border);background:var(--ev-bg)} .evidence-msg{font-size:clamp(1.1rem,1.2vw+.45rem,1.38rem);font-weight:500;color:var(--green);line-height:1.55;margin-bottom:.5rem} .evidence-ref{font-size:clamp(.86rem,.5vw+.36rem,.96rem);color:var(--t2)} .evidence-count{font-size:clamp(.78rem,.4vw+.34rem,.86rem);color:var(--accent);margin-top:.5rem;font-weight:600} .before-after{margin:.75rem 0;padding:.75rem;background:var(--glass);border:1px solid var(--border);border-radius:var(--rs)} .ba-label{font-size:clamp(.6rem,.3vw+.25rem,.65rem);font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--t3);margin-bottom:.2rem} .ba-before{color:var(--coral);font-size:clamp(.78rem,.5vw+.3rem,.88rem);margin-bottom:.5rem} .ba-after{color:var(--green);font-size:clamp(.78rem,.5vw+.3rem,.88rem)} .pause-card{text-align:center;border-color:var(--border-accent)} .pause-timer-wrap{position:relative;width:100px;height:100px;margin:1.25rem auto;display:flex;align-items:center;justify-content:center} .timer-ring{position:absolute;inset:0;transform:rotate(-90deg)} .timer-ring-bg{fill:none;stroke:var(--border);stroke-width:4} .timer-ring-fill{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;transition:stroke-dashoffset .9s linear,stroke .4s} .pause-timer{font-size:clamp(2rem,3.5vw,2.8rem);font-weight:800;color:var(--accent);position:relative;z-index:1;transition:color .4s} .pause-msg{font-size:clamp(.88rem,.6vw+.4rem,1rem);color:var(--t2);line-height:1.8} .btn-row{display:flex;gap:.6rem;margin-top:1.5rem} .btn-primary2{flex:1;padding:13px;border-radius:99px;font-weight:600;font-size:clamp(.82rem,.5vw+.35rem,.92rem);color:#fff;background:linear-gradient(135deg,var(--accent),#c2410c);transition:.35s;box-shadow:0 2px 12px var(--accent-glow)} .btn-primary2:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(249,115,22,.3)} .btn-secondary2{flex:1;padding:13px;border-radius:99px;font-weight:500;font-size:clamp(.82rem,.5vw+.35rem,.92rem);color:var(--t2);background:var(--glass);border:1px solid var(--border);transition:.3s} .btn-secondary2:hover{border-color:var(--border2);color:var(--text)} .share-btn{padding:6px 14px;border-radius:99px;font-size:clamp(.65rem,.4vw+.25rem,.72rem);color:var(--t3);border:1px solid var(--border);background:var(--glass);transition:.3s;margin-top:.5rem} .share-btn:hover{border-color:var(--accent);color:var(--accent)} .feedback-row{display:flex;gap:.5rem;margin-top:1.25rem} .fb-btn{padding:9px 18px;border-radius:99px;font-size:clamp(.74rem,.4vw+.3rem,.82rem);font-weight:500;border:1px solid var(--border);color:var(--t2);background:var(--glass);transition:.3s} .fb-btn:hover,.fb-btn.selected{border-color:var(--accent);color:var(--accent);background:var(--safe-bg)} .done-card{text-align:center}.done-icon{font-size:3rem;margin-bottom:1rem;animation:bob 3s ease-in-out infinite} .done-title{font-family:var(--fd);font-size:clamp(1.4rem,1.8vw+.4rem,2rem);margin-bottom:.5rem} .done-sub{color:var(--t2);font-size:clamp(.88rem,.6vw+.4rem,1rem);margin-bottom:2rem} .similar-prompt{margin-top:1.5rem;padding:1rem;background:var(--accent-glow);border:1px solid var(--border-accent);border-radius:var(--r);text-align:center} .similar-prompt p{font-size:clamp(.82rem,.5vw+.35rem,.92rem);color:var(--accent);margin-bottom:.75rem} .insight-input{width:100%;padding:12px;background:var(--glass);border:1.5px solid var(--border);border-radius:var(--r);color:var(--text);font-family:inherit;font-size:clamp(.85rem,.5vw+.4rem,.95rem);resize:none;transition:.3s} .insight-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-glow)} .return-card{background:var(--glass);border:1px solid var(--border);border-radius:var(--r);padding:1.5rem;margin-top:1.5rem;text-align:left} .return-label{font-size:clamp(.65rem,.4vw+.3rem,.72rem);font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--t3);margin-bottom:.3rem} .return-value{font-size:clamp(.85rem,.6vw+.4rem,.95rem);color:var(--text);margin-bottom:1rem} .return-msg{font-size:clamp(.88rem,.6vw+.4rem,.98rem);color:var(--blue);font-style:italic;padding-top:.75rem;border-top:1px solid var(--border)} .replay{margin-top:1.5rem;padding:1rem;background:var(--glass);border:1px solid var(--border);border-radius:var(--r)} .replay-title{font-size:clamp(.7rem,.4vw+.3rem,.78rem);font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.75rem} .replay-steps{display:flex;gap:4px;align-items:center;flex-wrap:wrap} .replay-step{flex:1;min-width:60px;padding:6px;border-radius:var(--rs);text-align:center;font-size:clamp(.55rem,.3vw+.22rem,.62rem)}.replay-step.done{background:var(--ev-bg);color:var(--green);border:1px solid var(--ev-border)}.replay-arrow{color:var(--t3);font-size:.6rem} .replay-detail{margin-top:.6rem;padding:.5rem .75rem;border-radius:var(--rs);font-size:clamp(.74rem,.45vw+.32rem,.82rem);color:var(--t2);background:var(--glass);line-height:1.6;border:1px solid var(--border)} .replay-detail-label{font-weight:700;color:var(--t3);font-size:clamp(.6rem,.32vw+.24rem,.66rem);text-transform:uppercase;letter-spacing:.08em;margin-right:.4rem} .replay-detail.replay-ev{background:var(--ev-bg);border-color:var(--ev-border);color:var(--green)} .predict-hint{margin-top:.75rem;padding:.5rem .75rem;background:rgba(167,139,250,.06);border:1px solid rgba(167,139,250,.12);border-radius:var(--rs);font-size:clamp(.7rem,.4vw+.3rem,.78rem);color:var(--violet)} .confetti-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:300;overflow:hidden} .confetti{position:absolute;width:8px;height:8px;border-radius:2px;animation:confettiDrop 2s forwards} .loading{display:flex;flex-direction:column;align-items:center;gap:1.2rem;padding:3.5rem 0;animation:fadeIn .4s} .loading-dots{display:flex;gap:7px}.loading-dots span{width:9px;height:9px;border-radius:50%;background:var(--accent);animation:dotPulse .8s infinite alternate} .loading-dots span:nth-child(2){animation-delay:.15s}.loading-dots span:nth-child(3){animation-delay:.3s} .loading-text{font-size:clamp(.88rem,.5vw+.38rem,.96rem);color:var(--t2);font-weight:400} .kb-hint{font-size:clamp(.66rem,.3vw+.28rem,.72rem);color:var(--t3);margin-top:.5rem;opacity:.6} /* PAGES */ .page-wrap{max-width:min(98vw,1200px);width:min(98vw,1200px);margin:6.5rem auto 3rem;padding:2rem;animation:pageIn .6s var(--ease) both;background:var(--glass);border:1px solid var(--border);border-radius:32px;box-shadow:0 30px 80px rgba(0,0,0,.08);display:grid;gap:1.5rem} .page-title{font-family:var(--fd);font-size:clamp(1.9rem,2.4vw+.4rem,2.4rem);margin-bottom:0.5rem;letter-spacing:.01em} .session-list{display:grid;gap:1rem} .session-item{display:flex;align-items:center;gap:1rem;padding:1.2rem 1.4rem;background:var(--glass);border:1px solid var(--border);border-radius:28px;transition:transform .35s,border-color .35s,box-shadow .35s;color:var(--text);overflow:hidden} .session-item:hover{border-color:var(--border2);box-shadow:0 18px 42px rgba(0,0,0,.12);transform:translateY(-3px)} .session-preview{flex:1;font-size:clamp(.88rem,.5vw+.35rem,.95rem);color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .session-preview{flex:1;font-size:clamp(.82rem,.5vw+.35rem,.92rem);color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .session-badge{padding:4px 10px;border-radius:8px;font-size:.6rem;font-weight:700;text-transform:uppercase} .badge-stem{background:rgba(96,165,250,.1);color:var(--blue)}.badge-reading{background:rgba(52,211,153,.1);color:var(--green)}.badge-skill{background:rgba(249,115,22,.1);color:var(--accent)}.badge-general{background:var(--glass2);color:var(--t3)} .barrier-chart{margin-top:2rem;padding:1.5rem;background:var(--glass);border:1px solid var(--border);border-radius:28px;box-shadow:0 14px 34px rgba(0,0,0,.08)} .barrier-chart h3{font-size:clamp(.82rem,.5vw+.3rem,.92rem);font-weight:700;margin-bottom:1rem;letter-spacing:.04em} .bar-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem} .bar-label{width:80px;font-size:clamp(.65rem,.4vw+.25rem,.72rem);color:var(--t2);text-align:right} .bar-track{flex:1;height:8px;background:var(--glass);border-radius:99px;overflow:hidden} .bar-fill{height:100%;border-radius:99px;background:var(--accent);transition:width 1s var(--ease)} .bar-pct{font-size:clamp(.6rem,.3vw+.25rem,.65rem);color:var(--t3);width:30px} .insights-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.1rem} .insight-card{background:var(--glass);border:1px solid var(--border);border-radius:28px;padding:1.4rem;transition:transform .3s,border-color .3s,box-shadow .3s} .insight-card:hover{border-color:var(--border2);box-shadow:0 18px 42px rgba(0,0,0,.12);transform:translateY(-2px)} .insight-text{font-size:clamp(.85rem,.6vw+.4rem,.95rem);line-height:1.75;margin-bottom:.75rem} .insight-meta{display:flex;justify-content:space-between}.insight-tag{padding:3px 8px;border-radius:6px;font-size:.6rem;font-weight:600;background:var(--glass2);color:var(--t3)}.insight-date{font-size:.6rem;color:var(--t3)} .empty{text-align:center;padding:4rem 1rem;color:var(--t3)}.empty-icon{font-size:2.5rem;margin-bottom:1rem;opacity:.25} .app-footer{padding:2.5rem 1.5rem;text-align:center;border-top:1px solid var(--border);margin-top:3rem} .app-footer p{font-size:clamp(.7rem,.4vw+.3rem,.78rem);color:var(--t3);letter-spacing:.02em} .app-footer a{color:var(--accent);font-weight:600} .scroll-hint{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.3rem;opacity:.35} .scroll-hint span{font-size:.55rem;text-transform:uppercase;letter-spacing:.2em;color:var(--t3)} .scroll-bar{width:1px;height:30px;position:relative;overflow:hidden}.scroll-bar::after{content:'';position:absolute;top:-100%;width:100%;height:50%;background:linear-gradient(to bottom,transparent,var(--accent));animation:scrollDrop 2s infinite} @media(max-width:640px){ .topbar{width:96vw;top:6px;padding:.45rem .7rem} .btn-row{flex-direction:column} .wins{max-width:100%} .flow-wrap{padding:1rem 1rem 2rem;margin-top:5.5rem} .flow-card{padding:1.25rem} .input-wrap{padding:1.25rem;border-radius:24px} .landing{padding:6.5rem 1rem 3rem;gap:1.25rem} .mood-wrap{flex-wrap:wrap} .mood-slider{width:160px} .barrier-chips{gap:5px} .barrier-chip{padding:6px 12px;font-size:.72rem} .input-tabs{padding:3px} .input-tab{padding:7px 4px;font-size:.68rem} .safe-action{font-size:1.1rem} .pause-timer-wrap{width:80px;height:80px} .pause-timer{font-size:1.8rem} .btn-primary2,.btn-secondary2{padding:12px 20px;font-size:.88rem} .page-wrap{padding:6rem 1rem 2rem} .voice-row{flex-wrap:wrap;justify-content:center} .emergency-btn{font-size:.72rem;padding:7px 14px} .wins-top{gap:.75rem} .win-bar-label{width:70px} } /* SIDEBAR */ .sidebar{position:fixed;left:0;top:0;bottom:0;width:240px;background:var(--glass);border-right:1px solid var(--border);backdrop-filter:blur(20px);transform:translateX(-100%);transition:transform .3s var(--ease);z-index:50;padding:1rem 0;will-change:transform} .sidebar.show{transform:translateX(0)} .sidebar-header{padding:1rem;text-align:center;border-bottom:1px solid var(--border);margin-bottom:1rem} .sidebar-header img{height:32px;margin-bottom:.5rem} .sidebar-nav{display:flex;flex-direction:column;gap:.25rem;padding:0 1rem} .sidebar-link{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-radius:12px;color:var(--t2);text-decoration:none;transition:.2s;font-size:.9rem} .sidebar-link:hover{background:var(--glass2);color:var(--text)} .sidebar-link.active{background:var(--accent);color:#fff} .sidebar-toggle{position:fixed;left:1rem;top:1rem;width:40px;height:40px;border-radius:50%;background:var(--glass);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:60;backdrop-filter:blur(20px);transition:.3s} .sidebar-toggle:hover{transform:scale(1.05)} .sidebar-overlay{display:none;position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.1);backdrop-filter:blur(2px)} .sidebar-overlay.show{display:block} /* REVEAL ANIMATION */ .reveal{opacity:0;transform:translateY(30px);transition:opacity .6s var(--ease),transform .6s var(--ease);will-change:transform,opacity} .reveal.show{opacity:1;transform:translateY(0)} .reveal.delay-1{transition-delay:.1s} .reveal.delay-2{transition-delay:.2s} .reveal.delay-3{transition-delay:.3s} /* RESPONSIVE */ @media(max-width:768px){.sidebar{width:200px}.sidebar-toggle{left:.5rem;top:.5rem}} /* GOAL INPUT */ .goal-wrap{margin:.75rem 0 .5rem;display:flex;flex-direction:column;gap:.35rem} .goal-label{font-size:.74rem;color:var(--t2);font-weight:500;letter-spacing:.01em} .goal-input{width:100%;padding:10px 14px;border-radius:12px;border:1.5px solid var(--border);background:var(--glass2);color:var(--text);font-family:inherit;font-size:.84rem;transition:border-color .2s,box-shadow .2s;outline:none;box-sizing:border-box} .goal-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(99,102,241,.12)} .goal-input::placeholder{color:var(--t3)} /* RETURN POINTER */ .return-action{margin-top:.75rem;padding:.65rem 1rem;background:var(--glass2);border-left:3px solid var(--accent);border-radius:0 10px 10px 0;font-size:.86rem;color:var(--text)} /* NOTES ADD BUTTON */ .notes-add-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:10px 20px;border-radius:12px;background:var(--accent);color:#fff;border:none;cursor:pointer;font-size:.88rem;font-weight:600;transition:.2s;margin-bottom:1rem} .notes-add-btn:hover{opacity:.88;transform:translateY(-1px)} /* AUTH NAV */ #authNav{display:flex;align-items:center;gap:.35rem;flex-shrink:0} .auth-nav-btn{padding:7px 14px;border-radius:10px;font-size:.8rem;font-weight:600;border:1.5px solid var(--border);background:transparent;color:var(--t2);cursor:pointer;transition:.2s;text-decoration:none;display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap} .auth-nav-btn:hover{border-color:var(--accent);color:var(--text)} .auth-nav-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff} .auth-nav-btn.primary:hover{opacity:.85} .auth-user-chip{font-size:.76rem;color:var(--t2);padding:5px 12px;border-radius:99px;background:var(--glass2);border:1px solid var(--border);cursor:pointer;transition:.2s;white-space:nowrap;display:inline-flex;align-items:center;gap:.3rem} .auth-user-chip:hover{border-color:var(--accent)} /* ── FOCUS STYLES (KEYBOARD NAVIGATION) ────────────────────────────────────── */ .skip-to-content { position: absolute; top: -40px; left: 0; z-index: 99999; padding: 8px 16px; background: var(--accent); color: #fff; border-radius: 0 0 8px 0; font-weight: 600; text-decoration: none; font-size: .8rem; transition: top .3s; } .skip-to-content:focus { top: 0; } :focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 4px; } button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; } /* ── TABLET + IMPROVED MOBILE ──────────────────────────────────────────────── */ /* Tablet (portrait: 641-900px) */ @media(min-width:641px) and (max-width:900px){ .landing{padding:7rem 1.5rem 3rem;gap:1.5rem} .input-wrap{padding:1.5rem;width:100vw;max-width:100vw;margin:0 calc(50% - 50vw);border-radius:0;box-shadow:none;border-left:none;border-right:none} .mood-slider{width:180px} .flow-wrap{padding:1.5rem 1.5rem 3rem;margin-top:6rem} .flow-card{padding:1.5rem} .page-wrap{padding:7rem 1.5rem 2rem} .barrier-chips{gap:6px} .btn-row{flex-wrap:wrap} .btn-primary2,.btn-secondary2{padding:11px 22px} } /* Small mobile (<480px) */ @media(max-width:480px){ .landing{padding:5.5rem 0 2.5rem;gap:1rem} .input-wrap{padding:1rem;border-radius:0;width:100vw;max-width:100vw;margin:0 calc(50% - 50vw);box-shadow:none;border-left:none;border-right:none} .mood-slider{width:140px;min-width:80px} .mood-wrap{gap:.4rem} .barrier-chip{padding:5px 10px;font-size:.68rem} .input-tab{padding:6px 4px;font-size:.64rem} .btn-row{gap:.5rem} .btn-primary2,.btn-secondary2{padding:11px 16px;font-size:.84rem} .flow-card{padding:1rem} .safe-action{font-size:1rem} .evidence-msg{font-size:.92rem} .done-title{font-size:1.3rem} .page-wrap{padding:5.5rem .85rem 2rem} .wins-top{flex-wrap:wrap;gap:.5rem} .win-stat{min-width:80px} .win-num{font-size:1.5rem} /* Fingerprint page */ .fp-hero h1{font-size:1.5rem} .fp-chip{padding:.8rem 1rem} .fp-panel{padding:1rem} } /* Mood slider: always visible and usable */ .mood-slider{-webkit-appearance:none;appearance:none;height:6px;border-radius:99px;background:var(--border2);outline:none;cursor:pointer;transition:opacity .2s} .mood-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--glass2);box-shadow:0 2px 8px rgba(99,102,241,.3);transition:.2s} .mood-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--glass2);box-shadow:0 2px 8px rgba(99,102,241,.3)} .mood-slider:focus{opacity:1} /* ===== "DID YOU START?" TOAST ===== */ .dys-toast{ position:fixed;bottom:0;left:50%;transform:translateX(-50%) translateY(100%); width:min(420px,96vw);z-index:9999;transition:transform .35s cubic-bezier(.34,1.56,.64,1);pointer-events:none } .dys-toast.visible{transform:translateX(-50%) translateY(0);pointer-events:all} .dys-inner{ background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); border:1px solid var(--border2);border-radius:20px 20px 0 0; padding:1.25rem 1.25rem 1.5rem;box-shadow:0 -8px 40px rgba(0,0,0,.18); position:relative } .dys-q{font-size:.8rem;font-weight:600;color:var(--accent);letter-spacing:.04em;margin-bottom:.45rem;text-transform:uppercase} .dys-action{font-size:.97rem;font-weight:600;color:var(--text1);line-height:1.45;margin-bottom:1rem; padding:.65rem .9rem;background:var(--surface2);border-radius:10px;border-left:3px solid var(--accent) } .dys-btns{display:flex;gap:.65rem;flex-wrap:wrap} .dys-yes{ flex:1;padding:.7rem 1rem;border:none;border-radius:10px;cursor:pointer;font-size:.88rem;font-weight:600; background:var(--accent);color:#fff;transition:.2s } .dys-yes:hover{opacity:.88;transform:scale(1.02)} .dys-no{ flex:1;padding:.7rem 1rem;border:1px solid var(--border2);border-radius:10px;cursor:pointer; font-size:.88rem;font-weight:600;background:transparent;color:var(--text2);transition:.2s } .dys-no:hover{background:var(--surface2)} .dys-close{ position:absolute;top:.75rem;right:.75rem;background:none;border:none;cursor:pointer; color:var(--t3);font-size:.85rem;padding:.25rem .4rem;border-radius:6px;line-height:1 } .dys-close:hover{background:var(--surface2);color:var(--text1)} @media(max-width:480px){ .dys-toast{width:100%} .dys-inner{border-radius:16px 16px 0 0;padding:1rem 1rem 1.25rem} .dys-btns{flex-direction:column} }