/* ── Reset & root ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --navy:#3B4DA0;--violet:#6B3FA6;--mid:#8B5CC8;--purple:#9B44C0;
  --night:#1A1A2E;--white:#FFFFFF;--lav:#F4F3FC;--slate:#F0F0F5;
  --peri:#5C6BC0;--amber:#E8A020;--green:#1DB88A;--coral:#FF6B6B;
  --text:#1A1A2E;--text2:#4a4a6a;--text3:#8888aa;
  --border:rgba(59,77,160,0.12);--border2:rgba(59,77,160,0.2);
  --card:#FFFFFF;--bg:#F7F7FB;
  --fh:'Montserrat',sans-serif;--fb:'Inter',sans-serif;--fa:'Playfair Display',serif;
  --r:12px;--r-sm:8px;--r-pill:99px;
  --nav-h:64px;--bottom-h:68px;
}
html,body{height:100%;overflow-x:hidden;}
body{font-family:var(--fb);background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;font-size:15px;}
@media(prefers-color-scheme:dark){
  :root{--bg:#0f0f1a;--card:#1a1a2e;--text:#e8e8f0;--text2:#9090b0;--text3:#5a5a7a;--border:rgba(139,92,200,0.15);--slate:#1e1e30;--lav:#1a1a30;}
}

/* ── Views ── */
.view{display:none;min-height:100vh;padding-bottom:calc(var(--bottom-h) + 16px);}
.view.active{display:block;}

/* ── Top bar ── */
.top-bar{position:sticky;top:0;z-index:50;background:var(--card);border-bottom:1px solid var(--border);padding:0 20px;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;}
.top-bar-logo{display:flex;align-items:center;gap:10px;}
.logo-mark svg{width:28px;height:28px;}
.logo-text{font-family:var(--fh);font-size:14px;font-weight:800;color:var(--navy);letter-spacing:0.04em;}
.logo-text span{color:var(--violet);}
.top-bar-actions{display:flex;align-items:center;gap:8px;}
.icon-btn{width:36px;height:36px;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--r-sm);color:var(--text3);font-size:18px;transition:background 0.15s;}
.icon-btn:hover{background:var(--slate);}
.fac-lock-btn{background:transparent;border:none;cursor:pointer;font-size:18px;padding:4px 6px;border-radius:var(--r-sm);transition:background 0.15s;line-height:1;}
.fac-lock-btn:hover{background:var(--slate);}

/* ── Bottom nav ── */
#bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:50;background:var(--card);border-top:1px solid var(--border);height:var(--bottom-h);display:none;align-items:center;justify-content:space-around;padding-bottom:env(safe-area-inset-bottom);}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 20px;border:none;background:transparent;cursor:pointer;color:var(--text3);font-family:var(--fb);font-size:11px;font-weight:500;transition:color 0.15s;-webkit-tap-highlight-color:transparent;}
.nav-item .nav-icon{font-size:22px;line-height:1;}
.nav-item.active{color:var(--navy);}
.nav-item.active .nav-icon{transform:scale(1.1);}

/* ── Install banner ── */
#install-banner{display:none;position:fixed;bottom:calc(var(--bottom-h) + 8px);left:12px;right:12px;z-index:60;background:var(--navy);color:var(--white);border-radius:var(--r);padding:14px 16px;align-items:center;gap:12px;box-shadow:0 4px 20px rgba(59,77,160,0.3);}
#install-banner p{flex:1;font-size:13px;line-height:1.4;}
#install-btn{font-family:var(--fh);font-size:12px;font-weight:700;padding:8px 14px;background:var(--amber);color:var(--night);border:none;border-radius:var(--r-sm);cursor:pointer;white-space:nowrap;}
#install-dismiss{background:transparent;border:none;color:rgba(255,255,255,0.5);font-size:20px;cursor:pointer;line-height:1;padding:0 4px;}

/* ── Onboard / auth screens ── */
.auth-screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 24px;background:var(--white);}
.auth-rings{margin-bottom:32px;}
.auth-rings svg{width:80px;height:80px;}
.auth-card{background:var(--card);border-radius:var(--r);padding:32px 28px;width:100%;max-width:400px;box-shadow:0 8px 40px rgba(0,0,0,0.2);}
.auth-card h1{font-family:var(--fh);font-size:22px;font-weight:800;color:var(--navy);margin-bottom:6px;}
.auth-card p{font-size:14px;color:var(--text2);line-height:1.7;margin-bottom:24px;}
.auth-card a{color:var(--peri);}
.form-field{margin-bottom:14px;}
.form-field label{display:block;font-size:12px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:0.07em;margin-bottom:5px;}
.form-field input{width:100%;font-size:15px;padding:12px 14px;border:1.5px solid var(--border2);border-radius:var(--r-sm);background:var(--bg);color:var(--text);font-family:var(--fb);transition:border-color 0.2s;}
.form-field input::placeholder{color:var(--text3);}
.form-field input:focus{outline:none;border-color:var(--navy);}
.form-submit{width:100%;font-family:var(--fh);font-size:15px;font-weight:700;padding:14px;background:var(--navy);color:var(--white);border:none;border-radius:var(--r-sm);cursor:pointer;margin-top:8px;transition:background 0.2s;}
.form-submit:hover{background:var(--violet);}
.form-error{font-size:13px;color:var(--coral);background:rgba(255,107,107,0.08);border:1px solid rgba(255,107,107,0.2);border-radius:var(--r-sm);padding:10px 12px;margin-bottom:14px;display:none;}
.form-note{font-size:12px;color:var(--text3);margin-top:10px;line-height:1.5;text-align:center;}

/* ── Home view ── */
.home-content{padding:20px;}
.home-greeting{margin-bottom:24px;}
.home-greeting h2{font-family:var(--fh);font-size:22px;font-weight:800;color:var(--text);line-height:1.3;}
.home-greeting p{font-size:14px;color:var(--text2);margin-top:4px;}
.expiry-warning{background:rgba(232,160,32,0.1);border:1px solid rgba(232,160,32,0.3);border-radius:var(--r-sm);padding:12px 14px;font-size:13px;color:#7a4800;margin-bottom:20px;display:none;line-height:1.5;}
@media(prefers-color-scheme:dark){.expiry-warning{color:var(--amber);}}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px;}
.stat-card{background:var(--card);border-radius:var(--r);padding:16px 12px;text-align:center;border:1px solid var(--border);}
.stat-num{font-family:var(--fh);font-size:26px;font-weight:800;color:var(--navy);}
.stat-label{font-size:11px;color:var(--text3);margin-top:2px;line-height:1.3;}
.home-safe-section{display:none;}
.home-safe-section h3{font-family:var(--fh);font-size:14px;font-weight:700;color:var(--text);margin-bottom:14px;}
.home-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.hb-letter{font-family:var(--fh);font-size:13px;font-weight:800;width:16px;flex-shrink:0;}
.hb-letter.s{color:var(--green);}.hb-letter.a{color:var(--mid);}.hb-letter.f{color:var(--amber);}.hb-letter.e{color:var(--peri);}
.hb-name{font-size:13px;color:var(--text2);width:140px;flex-shrink:0;}
.hb-track{flex:1;height:6px;border-radius:99px;background:var(--slate);overflow:hidden;}
.hb-fill{height:6px;border-radius:99px;transition:width 0.7s ease;}
#home-bar-S{background:var(--green);}#home-bar-A{background:var(--mid);}#home-bar-F{background:var(--amber);}#home-bar-E{background:var(--peri);}
.home-cta{margin-top:28px;}
.cta-card{background:var(--navy);border-radius:var(--r);padding:24px 20px;color:var(--white);}
.cta-card h3{font-family:var(--fh);font-size:16px;font-weight:700;margin-bottom:8px;}
.cta-card p{font-size:14px;color:rgba(255,255,255,0.7);margin-bottom:18px;line-height:1.6;}
.cta-btn{font-family:var(--fh);font-size:14px;font-weight:700;padding:12px 24px;background:var(--amber);color:var(--night);border:none;border-radius:var(--r-sm);cursor:pointer;transition:opacity 0.2s;}
.cta-btn:hover{opacity:0.88;}

/* ── Activity view ── */
.activity-content{padding:20px;}
.activity-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.activity-header h2{font-family:var(--fh);font-size:18px;font-weight:800;color:var(--text);}
.fac-wrap{display:flex;align-items:center;gap:6px;}
.fac-label{font-size:12px;color:var(--text3);}
.tog{position:relative;width:38px;height:20px;cursor:pointer;flex-shrink:0;}
.tog input{opacity:0;width:0;height:0;}
.slid{position:absolute;inset:0;background:var(--slate);border-radius:99px;transition:0.2s;}
.slid::before{content:'';position:absolute;height:14px;width:14px;left:3px;bottom:3px;background:white;border-radius:50%;transition:0.2s;box-shadow:0 1px 3px rgba(0,0,0,0.2);}
input:checked+.slid{background:var(--violet);}
input:checked+.slid::before{transform:translateX(18px);}
.lens-row{display:flex;gap:8px;margin-bottom:16px;}
.lens-btn{flex:1;font-size:12px;font-weight:600;padding:9px 6px;border:1.5px solid var(--border2);border-radius:var(--r-sm);background:var(--card);color:var(--text2);cursor:pointer;font-family:var(--fb);transition:all 0.15s;text-align:center;}
.lens-btn.active-tm{background:rgba(29,184,138,0.08);border-color:var(--green);color:#085041;}
.lens-btn.active-ld{background:rgba(139,92,200,0.08);border-color:var(--mid);color:var(--violet);}
.lens-btn.active-both{background:rgba(59,77,160,0.08);border-color:var(--navy);color:var(--navy);}
.tab-row{display:flex;border:1.5px solid var(--border2);border-radius:var(--r-sm);overflow:hidden;margin-bottom:16px;}
.tab-btn{flex:1;font-size:13px;font-weight:600;padding:10px;border:none;background:var(--card);color:var(--text2);cursor:pointer;font-family:var(--fb);transition:all 0.15s;}
.tab-btn:not(:last-child){border-right:1px solid var(--border);}
.tab-btn.active{background:var(--navy);color:var(--white);}
.panel{display:none;}
.panel.show{display:block;}
.scen-nav{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;}
.scen-pill{font-size:11px;font-weight:600;padding:5px 11px;border:1px solid var(--border2);border-radius:var(--r-pill);background:var(--card);color:var(--text2);cursor:pointer;font-family:var(--fb);transition:all 0.15s;}
.scen-pill:hover{background:var(--lav);}
.scen-pill.active{background:var(--night);border-color:var(--night);color:var(--white);}
.scen-pill.used{opacity:0.4;}
.scen-pill.shuffle{color:var(--peri);border-color:var(--border);margin-left:auto;}
#scen-note{font-size:11px;color:var(--text3);margin-bottom:12px;min-height:16px;}
.scen-card{background:var(--card);border-radius:var(--r);padding:20px;margin-bottom:16px;border:1px solid var(--border);}
.scen-eyebrow{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.eyebrow-label{font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--text3);}
.lens-badge{font-size:10px;font-weight:700;padding:2px 9px;border-radius:var(--r-pill);}
.badge-tm{background:rgba(29,184,138,0.1);color:#085041;}
.badge-ld{background:rgba(139,92,200,0.1);color:var(--violet);}
.scen-title{font-family:var(--fh);font-size:17px;font-weight:800;color:var(--text);margin-bottom:10px;line-height:1.3;}
.scen-body{font-size:14px;color:var(--text2);line-height:1.75;margin-bottom:14px;}
.safe-tags{display:flex;flex-wrap:wrap;gap:5px;}
.safe-tag{font-size:10px;font-weight:700;padding:3px 9px;border-radius:var(--r-pill);}
.tag-s{background:rgba(29,184,138,0.1);color:#085041;}
.tag-a{background:rgba(139,92,200,0.1);color:var(--violet);}
.tag-f{background:rgba(232,160,32,0.1);color:#7a4800;}
.tag-e{background:rgba(92,107,192,0.1);color:var(--navy);}
.q-label{font-size:15px;font-weight:700;color:var(--text);margin-bottom:6px;}
.q-sub{font-size:13px;color:var(--text3);margin-bottom:12px;line-height:1.5;}
textarea{width:100%;min-height:100px;font-size:14px;padding:12px;border:1.5px solid var(--border2);border-radius:var(--r-sm);background:var(--card);color:var(--text);font-family:var(--fb);resize:vertical;line-height:1.6;transition:border-color 0.2s;}
textarea:focus{outline:none;border-color:var(--navy);}
textarea::placeholder{color:var(--text3);}
.submit-row{display:flex;align-items:center;gap:12px;margin-top:10px;}
.go-btn{font-family:var(--fh);font-size:14px;font-weight:700;padding:11px 24px;background:var(--navy);color:var(--white);border:none;border-radius:var(--r-sm);cursor:pointer;transition:background 0.2s;}
.go-btn:hover{background:var(--violet);}
.go-btn:disabled{opacity:0.35;cursor:not-allowed;}
.char-ct{font-size:12px;color:var(--text3);}
#loading-indicator{display:none;align-items:center;gap:10px;padding:16px 0;font-size:13px;color:var(--text2);}
.dots span{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--violet);animation:bop 1.1s infinite;margin:0 2px;}
.dots span:nth-child(2){animation-delay:0.18s;}
.dots span:nth-child(3){animation-delay:0.36s;}
@keyframes bop{0%,80%,100%{transform:scale(0.65);opacity:0.4}40%{transform:scale(1);opacity:1}}
#error-output{display:none;font-size:13px;color:var(--coral);background:rgba(255,107,107,0.08);border:1px solid rgba(255,107,107,0.2);border-radius:var(--r-sm);padding:12px 14px;margin-top:12px;}
#feedback-output{display:none;margin-top:16px;}
.feedback-card{background:var(--card);border-radius:var(--r);padding:20px;border:1px solid var(--border);}
.fb-header{display:flex;align-items:center;gap:10px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--border);}
.fb-icon{width:36px;height:36px;border-radius:50%;background:rgba(139,92,200,0.1);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.fb-title{font-size:15px;font-weight:600;color:var(--text);}
.fb-body{font-size:14px;color:var(--text2);line-height:1.8;}
.fb-body p{margin-bottom:1rem;}
.fb-body p:last-child{margin-bottom:0;}
.fb-body strong { font-weight: 600; color: var(--navy); }
.fb-body em { font-style: italic; color: var(--text2); }
.sr-insight strong { font-weight: 600; }

.safe-results{margin-top:20px;padding-top:18px;border-top:1px solid var(--border);}
.results-label{font-size:10px;font-weight:700;letter-spacing:0.09em;text-transform:uppercase;color:var(--text3);margin-bottom:12px;}
.safe-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.sr-card{border-radius:var(--r-sm);padding:12px;}
.sr-card.s{background:rgba(29,184,138,0.07);}
.sr-card.a{background:rgba(139,92,200,0.07);}
.sr-card.f{background:rgba(232,160,32,0.07);}
.sr-card.e{background:rgba(92,107,192,0.07);}
.sr-letter{font-family:var(--fh);font-size:22px;font-weight:800;line-height:1;margin-bottom:2px;}
.sr-card.s .sr-letter{color:var(--green);}
.sr-card.a .sr-letter{color:var(--mid);}
.sr-card.f .sr-letter{color:var(--amber);}
.sr-card.e .sr-letter{color:var(--peri);}
.sr-name{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;margin-bottom:6px;}
.sr-card.s .sr-name{color:var(--green);}
.sr-card.a .sr-name{color:var(--mid);}
.sr-card.f .sr-name{color:var(--amber);}
.sr-card.e .sr-name{color:var(--peri);}
.sr-insight{font-size:11px;line-height:1.5;margin-bottom:8px;}
.sr-card.s .sr-insight{color:#085041;}
.sr-card.a .sr-insight{color:var(--violet);}
.sr-card.f .sr-insight{color:#7a4800;}
.sr-card.e .sr-insight{color:var(--navy);}
.sr-bar-wrap{height:3px;border-radius:99px;}
.sr-card.s .sr-bar-wrap{background:rgba(29,184,138,0.2);}
.sr-card.a .sr-bar-wrap{background:rgba(139,92,200,0.2);}
.sr-card.f .sr-bar-wrap{background:rgba(232,160,32,0.2);}
.sr-card.e .sr-bar-wrap{background:rgba(92,107,192,0.2);}
.sr-bar{height:3px;border-radius:99px;transition:width 0.7s ease;}
.sr-card.s .sr-bar{background:var(--green);}
.sr-card.a .sr-bar{background:var(--mid);}
.sr-card.f .sr-bar{background:var(--amber);}
.sr-card.e .sr-bar{background:var(--peri);}
.reset-btn{margin-top:14px;font-size:13px;padding:9px 18px;border:1px solid var(--border2);border-radius:var(--r-sm);background:transparent;color:var(--text2);cursor:pointer;font-family:var(--fb);transition:background 0.15s;}
.reset-btn:hover{background:var(--lav);}

/* Custom scenario */
.custom-label{font-size:15px;font-weight:700;color:var(--text);margin-bottom:6px;}
.custom-sub{font-size:13px;color:var(--text3);margin-bottom:12px;line-height:1.5;}
#guided-toggle{font-size:13px;color:var(--peri);background:none;border:none;cursor:pointer;font-family:var(--fb);padding:0;margin-bottom:12px;display:flex;align-items:center;gap:6px;}
.guided-fields{display:none;background:var(--lav);border-radius:var(--r-sm);padding:14px;margin-bottom:12px;border:1px solid var(--border);}
.guided-fields.show{display:block;}
.gf{margin-bottom:10px;}
.gf label{display:block;font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:0.07em;margin-bottom:4px;}
.gf input,.gf select{width:100%;font-size:14px;padding:10px 12px;border:1.5px solid var(--border2);border-radius:var(--r-sm);background:var(--card);color:var(--text);font-family:var(--fb);}
.gf input:focus,.gf select:focus{outline:none;border-color:var(--navy);}
.use-guided{font-size:12px;font-weight:600;padding:8px 16px;border:1px solid var(--navy);border-radius:var(--r-sm);background:transparent;color:var(--navy);cursor:pointer;margin-top:8px;font-family:var(--fb);}
.custom-gap{margin-top:16px;}

/* Progress view */
.progress-content{padding:20px;}
.progress-content h2{font-family:var(--fh);font-size:18px;font-weight:800;color:var(--text);margin-bottom:20px;}
.empty-state{font-size:14px;color:var(--text3);text-align:center;padding:40px 20px;line-height:1.6;}
.progress-sessions{font-size:13px;color:var(--text3);margin-bottom:20px;}
.avg-label{font-size:10px;font-weight:700;letter-spacing:0.09em;text-transform:uppercase;color:var(--text3);margin-bottom:14px;}
.avg-bars{display:flex;flex-direction:column;gap:12px;margin-bottom:28px;}
.avg-row{display:flex;align-items:center;gap:10px;}
.avg-letter{font-family:var(--fh);font-size:14px;font-weight:800;width:18px;flex-shrink:0;}
.avg-letter.s{color:var(--green);}.avg-letter.a{color:var(--mid);}.avg-letter.f{color:var(--amber);}.avg-letter.e{color:var(--peri);}
.avg-name{font-size:13px;color:var(--text2);width:140px;flex-shrink:0;}
.avg-track{flex:1;height:7px;border-radius:99px;background:var(--slate);overflow:hidden;}
.avg-fill{height:7px;border-radius:99px;transition:width 0.7s ease;}
.avg-s{background:var(--green);}.avg-a{background:var(--mid);}.avg-f{background:var(--amber);}.avg-e{background:var(--peri);}
.avg-score{font-size:13px;font-weight:600;color:var(--text2);width:28px;text-align:right;}
.history-label{font-size:10px;font-weight:700;letter-spacing:0.09em;text-transform:uppercase;color:var(--text3);margin-bottom:12px;}
.history-list{background:var(--card);border-radius:var(--r);border:1px solid var(--border);overflow:hidden;}
.history-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);}
.history-item:last-child{border-bottom:none;}
.history-date{font-size:12px;color:var(--text3);width:52px;flex-shrink:0;}
.history-pills{display:flex;gap:5px;flex-wrap:wrap;}
.h-pill{font-size:10px;font-weight:700;padding:2px 8px;border-radius:var(--r-pill);}
.h-pill.s{background:rgba(29,184,138,0.1);color:#085041;}
.h-pill.a{background:rgba(139,92,200,0.1);color:var(--violet);}
.h-pill.f{background:rgba(232,160,32,0.1);color:#7a4800;}
.h-pill.e{background:rgba(92,107,192,0.1);color:var(--navy);}

/* Expired view */
.expired-screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 24px;background:var(--white);text-align:center;}
.expired-screen h2{font-family:var(--fh);font-size:22px;font-weight:800;color:var(--navy);margin-bottom:12px;}
.expired-screen p{font-size:15px;color:var(--text2);max-width:320px;line-height:1.7;margin-bottom:28px;}
.price-options{display:flex;flex-direction:column;gap:12px;width:100%;max-width:320px;margin-bottom:24px;}
.price-opt{display:block;font-family:var(--fh);font-size:15px;font-weight:700;padding:14px 24px;border-radius:var(--r-sm);text-align:center;text-decoration:none;transition:opacity 0.2s;}
.price-opt:hover{opacity:0.88;}
.opt-month{background:var(--amber);color:var(--night);}
.opt-year{background:var(--navy);color:var(--white);}
.expired-note{font-size:13px;color:var(--text3);}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
}

/* Feedback view */
.feedback-view-content{display:flex;flex-direction:column;height:calc(100vh - var(--nav-h) - var(--bottom-h));}
.feedback-view-intro{padding:20px 20px 12px;flex-shrink:0;}
.feedback-view-intro h2{font-family:var(--fh);font-size:18px;font-weight:800;color:var(--text);margin-bottom:6px;}
.feedback-view-intro p{font-size:13px;color:var(--text2);line-height:1.6;}
.tally-frame-wrap{flex:1;padding:0 12px 12px;min-height:500px;}
.tally-frame-wrap iframe{width:100%;height:100%;min-height:500px;border:none;border-radius:var(--r);background:var(--card);}