/* ============ 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)}
.hint-inline{font-weight:500;font-size:.68rem;color:var(--ink-dim);font-style:italic}
.queuerow{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.queuerow:last-of-type{border-bottom:none}
.queuerow .qtag{flex-shrink:0;font-size:.62rem;font-weight:800;letter-spacing:.04em;padding:4px 8px;border-radius:7px;align-self:flex-start;margin-top:2px}
.queuerow .qtag.qa{background:var(--sky-soft);color:#1463C7}
.queuerow .qtag.varc{background:var(--mint-soft);color:#0A7A56}
.queuerow .qtag.dilr{background:var(--coral-soft);color:#C23B3B}
.queuerow .qbody{flex:1;min-width:0}
.queuerow .qlabel{font-size:.8rem;line-height:1.3;color:var(--ink);font-weight:600}
.queuerow .qmeta{font-size:.66rem;color:var(--ink-dim);margin-top:2px}
.queuerow .qdone{font-size:.78rem;color:var(--mint);font-weight:700}
.markbtn{flex-shrink:0;background:var(--violet);color:#fff;border:none;border-radius:11px;
  padding:9px 12px;font-size:.68rem;font-weight:800;cursor:pointer;white-space:nowrap;font-family:'Space Grotesk',sans-serif}
.markbtn:active{transform:scale(.94)}
.markbtn.empty{background:var(--mint)}
.daytype-note{margin-top:10px;font-size:.76rem;color:var(--ink-dim);font-style:italic;padding-top:8px;border-top:1px dashed var(--line)}
.daytype-note.mockday{color:#C23B3B;font-weight:700;font-style:normal}

.pace-card{background:linear-gradient(135deg,#FBFAFF,#F4F0FF)}
.pacegrid{display:flex;flex-direction:column;gap:8px}
.pacerow{display:flex;align-items:center;justify-content:space-between;background:#fff;
  border:2px solid var(--line);border-radius:12px;padding:9px 13px}
.pacerow .pname{font-size:.78rem;font-weight:700;color:var(--ink)}
.pacerow .pval{font-size:.74rem;font-weight:800;padding:3px 10px;border-radius:8px}
.pacerow .pval.ahead{background:var(--mint-soft);color:#0A7A56}
.pacerow .pval.behind{background:var(--coral-soft);color:#C23B3B}
.pacerow .pval.onpace{background:var(--violet-soft);color:var(--violet)}

.proof-note{background:var(--sun-soft);border:none}
.proof-note-inner{font-size:.78rem;color:#8A5300;text-align:center;line-height:1.4}

/* photo modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(35,27,59,.55);z-index:40;
  display:flex;align-items:center;justify-content:center;padding:20px}
.modal-box{background:#fff;border-radius:20px;padding:14px;max-width:340px;width:100%;text-align:center;box-shadow:var(--shadow)}
.modal-box img{width:100%;border-radius:12px;display:block;margin-bottom:10px}
.modal-caption{font-size:.76rem;color:var(--ink-dim);margin-bottom:10px}

/* thumbnails in timeline */
.tlphotos{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.tlphotos img{width:40px;height:40px;object-fit:cover;border-radius:8px;cursor:pointer;border:2px solid var(--line)}

.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;position:relative}
.quest::after{content:"📷";position:absolute;top:5px;right:7px;font-size:.62rem;opacity:.45}
.quest.done::after{opacity:0}
.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}
.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}
}