/* ============ TOKENS ============ */
:root{
  --bg:#FAF8FF;
  --card:#FFFFFF;
  --ink:#231B3B;
  --ink-dim:#7A7195;
  --line:#EEE9FB;

  --violet:#7C3AED;
  --violet-soft:#EDE4FF;
  --coral:#FF6B6B;
  --coral-soft:#FFE7E7;
  --sun:#FFB020;
  --sun-soft:#FFF3D6;
  --mint:#12B886;
  --mint-soft:#DFF7EE;
  --sky:#3B9EFF;
  --sky-soft:#E3F0FF;

  --shadow: 0 8px 30px rgba(124,58,237,.08), 0 2px 8px rgba(35,27,59,.05);
  --radius: 22px;
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Plus Jakarta Sans',sans-serif;
  overflow-x:hidden; overscroll-behavior:none; touch-action:manipulation;
  position:relative;
}
h1,h2,.brand-name,.hero-num,.section-title{font-family:'Space Grotesk',sans-serif}

/* ============ AMBIENT BACKGROUND BLOBS ============ */
.blobs{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(50px);opacity:.55;will-change:transform}
.b1{width:260px;height:260px;background:var(--coral-soft);top:-60px;left:-60px;animation:float1 22s ease-in-out infinite}
.b2{width:300px;height:300px;background:var(--sky-soft);bottom:-80px;right:-80px;animation:float2 26s ease-in-out infinite}
.b3{width:220px;height:220px;background:var(--sun-soft);top:40%;left:60%;animation:float3 19s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,60px)}}
@keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(-50px,-40px)}}
@keyframes float3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-30px,40px) scale(1.15)}}

/* ============ LAYOUT ============ */
.app{position:relative;z-index:1;max-width:520px;margin:0 auto;
  padding:calc(14px + var(--sat)) 14px calc(90px + var(--sab));min-height:100vh}

.topbar{display:flex;align-items:center;justify-content:space-between;padding:6px 2px 16px}
.brand{display:flex;align-items:center;gap:8px}
.brand-mark{font-size:1.3rem;color:var(--violet);animation:spin 6s linear infinite}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.brand-name{font-weight:800;font-size:.92rem;letter-spacing:.03em;color:var(--ink)}
.streakpill{display:flex;align-items:center;gap:5px;background:var(--sun-soft);color:#8A5300;
  border-radius:99px;padding:6px 12px;font-weight:800;font-size:.9rem;box-shadow:var(--shadow)}
.flame{display:inline-block;animation:flick 1.6s ease-in-out infinite}
@keyframes flick{0%,100%{transform:scale(1) rotate(-3deg)}50%{transform:scale(1.15) rotate(3deg)}}

/* ============ CARDS ============ */
.card{background:var(--card);border-radius:var(--radius);padding:18px;margin-bottom:14px;
  box-shadow:var(--shadow);border:1px solid var(--line);
  animation:riseIn .5s cubic-bezier(.2,.8,.2,1) both}
.card:nth-of-type(1){animation-delay:.02s}
.card:nth-of-type(2){animation-delay:.07s}
.card:nth-of-type(3){animation-delay:.12s}
.card:nth-of-type(4){animation-delay:.17s}
.card:nth-of-type(5){animation-delay:.22s}
@keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

.hero{background:linear-gradient(135deg,var(--violet) 0%,#9D5CFF 55%,#B98CFF 100%);color:#fff;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 15%,rgba(255,255,255,.25),transparent 55%)}
.hero-row{display:flex;align-items:center;gap:14px;position:relative;z-index:1}
.hero-stat{flex:1;text-align:center}
.hero-label{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;opacity:.85;margin-bottom:4px}
.hero-num{font-size:2.2rem;font-weight:800;line-height:1}
.hero-num.small{font-size:1.15rem}
.hero-divider{width:1px;height:44px;background:rgba(255,255,255,.35)}
.phasebar{height:8px;background:rgba(255,255,255,.25);border-radius:99px;margin-top:16px;overflow:hidden;position:relative;z-index:1}
.phasebar-fill{height:100%;background:#fff;border-radius:99px;width:0%;transition:width 1s ease}
.phase-label{margin-top:8px;font-size:.78rem;font-weight:700;opacity:.95;position:relative;z-index:1}

.topic-card{border-left:5px solid var(--violet)}
.topic-head{font-weight:800;font-size:.85rem;margin-bottom:10px;color:var(--ink)}
.topic-row{display:flex;align-items:center;gap:8px;font-size:.84rem;margin-bottom:10px;line-height:1.35;flex-wrap:wrap}
.topic-tag{flex-shrink:0;font-size:.62rem;font-weight:800;letter-spacing:.04em;padding:3px 8px;border-radius:7px}
.topic-tag.qa{background:var(--sky-soft);color:#1463C7}
.topic-tag.varc{background:var(--mint-soft);color:#0A7A56}
.topic-tag.dilr{background:var(--coral-soft);color:#C23B3B}
.topic-text{flex:1;min-width:140px;color:var(--ink)}
.topic-details{font-size:.76rem;color:var(--ink-dim);margin-top:2px;font-style:italic}
.covbtn{flex-shrink:0;background:var(--violet-soft);color:var(--violet);border:none;border-radius:10px;
  padding:6px 11px;font-size:.66rem;font-weight:800;cursor:pointer;font-family:'Space Grotesk',sans-serif;white-space:nowrap}
.covbtn:active{transform:scale(.94)}
.covbtn.done{background:var(--mint);color:#fff}

.section-title{font-weight:800;font-size:.9rem;margin-bottom:12px;color:var(--ink)}

/* ============ QUESTS ============ */
.quests{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.quest{display:flex;align-items:center;gap:10px;background:#FBFAFF;border:2px solid var(--line);
  border-radius:16px;padding:12px;cursor:pointer;transition:.15s;user-select:none}
.quest:active{transform:scale(.96)}
.quest .box{width:26px;height:26px;border-radius:8px;border:2px solid #D9D0F5;display:flex;align-items:center;
  justify-content:center;font-size:1rem;flex-shrink:0;transition:.15s;background:#fff}
.quest .lbl{font-size:.76rem;font-weight:700;color:var(--ink)}
.quest.done{background:var(--mint-soft);border-color:var(--mint)}
.quest.done .box{background:var(--mint);border-color:var(--mint);color:#fff}
.perfectbanner{margin-top:12px;text-align:center;background:linear-gradient(90deg,var(--sun-soft),var(--coral-soft));
  border-radius:14px;padding:10px;font-weight:800;font-size:.85rem;color:#8A5300;animation:pop .4s ease}
@keyframes pop{0%{transform:scale(.8);opacity:0}70%{transform:scale(1.05)}100%{transform:scale(1);opacity:1}}
.hidden{display:none!important}

/* ============ FORMS ============ */
textarea,input[type=text],input[type=number]{
  width:100%;border:2px solid var(--line);border-radius:14px;padding:11px 13px;font-family:inherit;
  font-size:.85rem;color:var(--ink);background:#FBFAFF;resize:vertical;transition:.15s
}
textarea:focus,input:focus{outline:none;border-color:var(--violet);background:#fff}
.btn{width:100%;border:none;border-radius:14px;padding:13px;font-weight:800;font-size:.85rem;
  cursor:pointer;margin-top:10px;transition:.12s;font-family:'Space Grotesk',sans-serif;letter-spacing:.02em}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--violet);color:#fff;box-shadow:0 6px 18px rgba(124,58,237,.35)}
.btn.secondary{background:var(--coral);color:#fff;box-shadow:0 6px 18px rgba(255,107,107,.32)}
.savedhint{text-align:center;font-size:.72rem;color:var(--mint);margin-top:8px;min-height:1rem;font-weight:700}
.mockgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}

/* ============ TIMELINE (LOGS) ============ */
.timeline{display:flex;flex-direction:column;gap:10px}
.tlitem{border:2px solid var(--line);border-radius:16px;padding:12px 14px;background:#FBFAFF;animation:riseIn .4s both}
.tlitem .tldate{font-weight:800;font-size:.78rem;color:var(--violet);margin-bottom:4px}
.tlitem .tltasks{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0}
.tltag{font-size:.62rem;font-weight:700;padding:3px 8px;border-radius:8px;background:var(--mint-soft);color:#0A7A56}
.tltag.miss{background:var(--coral-soft);color:#C23B3B}
.tlnote{font-size:.78rem;color:var(--ink-dim);margin-top:4px;font-style:italic}
.tltopic{font-size:.74rem;color:var(--ink-dim);margin-top:3px}
.tltopic b{color:var(--ink)}
.tltopic.covered{color:#0A7A56}
.tltopic.covered b{color:#0A7A56}
.tlmock{margin-top:6px;font-size:.76rem;font-weight:700;color:var(--sun);background:var(--sun-soft);
  display:inline-block;padding:3px 9px;border-radius:8px}
.empty{text-align:center;color:var(--ink-dim);font-size:.85rem;padding:26px 0}

/* ============ STATS ============ */
.statrow{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.statbox{background:#FBFAFF;border:2px solid var(--line);border-radius:16px;padding:12px 6px;text-align:center}
.statnum{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:1.4rem;color:var(--violet)}
.statlabel{font-size:.64rem;color:var(--ink-dim);font-weight:700;text-transform:uppercase;letter-spacing:.03em;margin-top:2px}
.heatwrap,.chartwrap{width:100%;overflow-x:auto}
.legend-row{display:flex;gap:14px;justify-content:center;margin-top:10px;font-size:.7rem;color:var(--ink-dim)}
.dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:middle}
.d0{background:#EFEBFA}.d2{background:#D9C4FF}.d5{background:#A566FF}.d6{background:#7C3AED}

/* ============ REMINDERS ============ */
.hint{font-size:.78rem;color:var(--ink-dim);margin-bottom:10px;line-height:1.4}
.timeslist{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.timeslist .trow{display:flex;justify-content:space-between;font-size:.78rem;background:#FBFAFF;
  border-radius:10px;padding:8px 12px;border:1px solid var(--line)}
.steps{margin:8px 0 12px 18px;font-size:.8rem;line-height:1.7;color:var(--ink)}
.steps code{background:var(--violet-soft);color:var(--violet);padding:2px 7px;border-radius:6px;font-size:.78rem}
.minibtn{border:none;background:var(--violet);color:#fff;border-radius:7px;padding:3px 9px;font-size:.68rem;
  font-weight:700;cursor:pointer;margin-left:4px}
#editTimes{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.timerow{display:flex;align-items:center;gap:10px;font-size:.8rem}
.timerow label{flex:1;font-weight:700;color:var(--ink)}
.timerow input[type=time]{width:120px;border:2px solid var(--line);border-radius:10px;padding:7px 8px;font-size:.8rem}

/* ============ NAV ============ */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:5;background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px);border-top:1px solid var(--line);
  display:flex;padding:8px 8px calc(8px + var(--sab));box-shadow:0 -6px 24px rgba(35,27,59,.06)}
.tabbtn{flex:1;background:none;border:none;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:6px 0;font-size:.62rem;font-weight:700;color:var(--ink-dim);cursor:pointer;border-radius:12px;transition:.15s}
.tabbtn span{font-size:1.2rem}
.tabbtn.active{color:var(--violet);background:var(--violet-soft)}
.tabbtn:active{transform:scale(.94)}

/* ============ VIEWS ============ */
.view{display:none}
.view.active{display:block;animation:fadeSlide .32s ease both}
@keyframes fadeSlide{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ============ TOAST ============ */
.toast{position:fixed;left:50%;bottom:calc(78px + var(--sab));transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:#fff;padding:11px 20px;border-radius:14px;font-size:.8rem;font-weight:700;
  opacity:0;pointer-events:none;transition:.25s;z-index:20;box-shadow:0 10px 30px rgba(0,0,0,.25);white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ============ CONFETTI ============ */
#confettiCanvas{position:fixed;inset:0;z-index:30;pointer-events:none}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .blob{display:none}
}

/* ============ MARKETING / AUTH / QUESTIONNAIRE ADDITIONS ============ */
.wide{max-width:720px}
.navbar{display:flex;justify-content:space-between;align-items:center;padding:16px 4px}
.navbar .brand-name{font-size:1.05rem}
.navlink{color:var(--ink-dim);font-weight:700;font-size:.82rem;text-decoration:none}

.hero-marketing{text-align:center;padding:36px 20px 30px}
.hero-marketing h1{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:clamp(1.7rem,6vw,2.6rem);
  color:var(--ink);line-height:1.15;margin-bottom:12px}
.hero-marketing h1 span{background:linear-gradient(90deg,var(--violet),var(--coral));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-marketing p{color:var(--ink-dim);font-size:.95rem;max-width:520px;margin:0 auto 22px;line-height:1.5}
.cta-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.btn-lg{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:.95rem;padding:15px 28px;
  border-radius:16px;border:none;cursor:pointer;text-decoration:none;display:inline-block}
.btn-lg.primary{background:var(--violet);color:#fff;box-shadow:0 10px 26px rgba(124,58,237,.35)}
.btn-lg.ghost{background:#fff;color:var(--violet);border:2px solid var(--violet-soft)}

.usp-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:26px 0}
.usp-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--shadow)}
.usp-card .emoji{font-size:1.5rem;margin-bottom:8px;display:block}
.usp-card b{display:block;font-size:.85rem;margin-bottom:4px;color:var(--ink)}
.usp-card span{font-size:.76rem;color:var(--ink-dim);line-height:1.4}

.pricing-card{background:linear-gradient(135deg,var(--violet),#9D5CFF);color:#fff;border-radius:22px;
  padding:28px;text-align:center;margin:26px 0;box-shadow:var(--shadow)}
.pricing-card .price{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:3rem}
.pricing-card .priceline{font-size:.8rem;opacity:.9;margin-bottom:16px}
.pricing-card ul{list-style:none;text-align:left;max-width:280px;margin:0 auto 18px;font-size:.84rem}
.pricing-card li{padding:5px 0}
.pricing-card li::before{content:"✓ ";font-weight:800}

.stepbar{display:flex;gap:6px;margin-bottom:20px}
.stepbar .seg{flex:1;height:6px;border-radius:99px;background:var(--line)}
.stepbar .seg.on{background:var(--violet)}
.qstep{display:none}
.qstep.active{display:block;animation:fadeSlide .3s ease both}
.qlabel{font-weight:800;font-size:.9rem;margin-bottom:14px;color:var(--ink)}
.optiongrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px}
.optbtn{background:#FBFAFF;border:2px solid var(--line);border-radius:14px;padding:14px 10px;
  font-size:.82rem;font-weight:700;color:var(--ink);cursor:pointer;text-align:center}
.optbtn.sel{border-color:var(--violet);background:var(--violet-soft);color:var(--violet)}
.sectiongrid{display:flex;flex-direction:column;gap:10px}
.sectionrow{display:flex;align-items:center;justify-content:space-between;background:#FBFAFF;
  border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.sectionrow .slabel{font-size:.82rem;font-weight:700}
.triopt{display:flex;gap:5px}
.triopt button{border:2px solid var(--line);background:#fff;border-radius:9px;padding:5px 9px;font-size:.68rem;font-weight:700;cursor:pointer}
.triopt button.sel{border-color:var(--violet);background:var(--violet);color:#fff}
.navrow{display:flex;gap:10px;margin-top:18px}
.navrow .btn{margin-top:0}

.authcard{max-width:400px;margin:40px auto}
.errbox{background:var(--coral-soft);color:#C23B3B;border-radius:12px;padding:10px 14px;font-size:.82rem;margin-bottom:12px;font-weight:700}
.authswitch{text-align:center;margin-top:14px;font-size:.82rem;color:var(--ink-dim)}
.authswitch a{color:var(--violet);font-weight:700;text-decoration:none}

.summarybox{background:var(--violet-soft);border-radius:16px;padding:16px;margin-bottom:16px}
.summarybox .verdict{font-weight:700;font-size:.88rem;color:var(--ink);margin-bottom:10px;line-height:1.4}
.summarybox .metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.summarybox .mbox{background:#fff;border-radius:10px;padding:8px;text-align:center}
.summarybox .mbox .n{font-weight:800;color:var(--violet);font-size:1rem}
.summarybox .mbox .l{font-size:.6rem;color:var(--ink-dim)}
footer.foot{text-align:center;color:var(--ink-dim);font-size:.74rem;padding:26px 0 10px}