*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

:root{
  --black:#0a0a0a;
  --surface:#131313;
  --surface2:#1c1c1c;
  --surface3:#242424;
  --border:#252525;
  --border2:#303030;
  --text:#e8e8e8;
  --muted:#666;
  --muted2:#3a3a3a;
  --accent:#a855f7;
  --accent-dark:#7c3aed;
  --blue:#4ac8f0;
  --purple:#c84af0;
  --coral:#f07a4a;
  --amber:#f0a44a;
  --red:#f04a4a;
  --teal:#4af0c8;
  --green:#4af070;
  --font-display:'Space Grotesk',sans-serif;
  --font-body:'Inter',sans-serif;
  --r:14px;
  --r-sm:10px;
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

html{height:100%;background:var(--black)}
body{
  font-family:var(--font-body);
  background:var(--black);
  color:var(--text);
  min-height:100%;
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

.grain{
  position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size:200px;
}

.app{position:relative;z-index:1;max-width:480px;margin:0 auto;padding-bottom:calc(24px + var(--safe-bottom))}

/* HEADER */
.header{padding:20px 20px 0;margin-bottom:20px}
.header-inner{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px}
.logo{font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:.25em;color:var(--muted);text-transform:uppercase}
.date-line{font-size:11px;color:var(--muted);margin-top:2px;font-weight:300}
.streak-pill{
  font-family:var(--font-display);font-size:11px;font-weight:700;
  background:var(--accent);color:#fff;
  padding:5px 12px;border-radius:20px;letter-spacing:.03em;
  white-space:nowrap;transition:all .3s;
}
.streak-pill.glowing{box-shadow:0 0 20px rgba(200,240,74,.4)}
.greeting{font-family:var(--font-display);font-size:28px;font-weight:800;color:var(--text);line-height:1.1}
.greeting span{color:var(--accent)}

/* NAV */
.nav{
  display:flex;gap:6px;padding:0 20px 16px;
  overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.nav::-webkit-scrollbar{display:none}
.nav-btn{
  background:transparent;border:1px solid var(--border2);border-radius:20px;
  padding:8px 18px;font-size:12px;font-family:var(--font-body);font-weight:500;
  color:var(--muted);cursor:pointer;white-space:nowrap;flex-shrink:0;
  transition:all .2s;
}
.nav-btn:active{transform:scale(.97)}
.nav-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}

/* PANELS */
.panels{padding:0 16px}
.panel{display:none}.panel.active{display:block}
.section-label{
  font-family:var(--font-display);font-size:10px;font-weight:700;
  color:var(--muted);text-transform:uppercase;letter-spacing:.15em;margin-bottom:14px;
}

/* SCHEDULE */
.schedule-list{margin-bottom:12px}
.sblock{
  display:flex;align-items:flex-start;gap:12px;
  padding:12px 14px;border-radius:var(--r-sm);margin-bottom:6px;
  border:1px solid transparent;position:relative;overflow:hidden;
}
.stime{font-family:var(--font-display);font-size:11px;font-weight:700;color:var(--muted);width:38px;flex-shrink:0;padding-top:2px}
.sinfo{flex:1}
.sname{font-size:13px;font-weight:500;color:var(--text);margin-bottom:2px}
.sdesc{font-size:11px;color:var(--muted);line-height:1.5}
.sblock-tag{font-family:var(--font-display);font-size:9px;font-weight:700;letter-spacing:.1em;padding:2px 7px;border-radius:10px;background:var(--accent);color:#fff;position:absolute;top:12px;right:12px}
.sblock.green{background:#0d1a08;border-color:#1e3810}
.sblock.green .sname{color:var(--accent)}
.sblock.blue{background:#080f1a;border-color:#10203a}
.sblock.blue .sname{color:var(--blue)}
.sblock.purple{background:#100814;border-color:#201030}
.sblock.purple .sname{color:var(--purple)}
.sblock.amber{background:#140e06;border-color:#2a1e0a}
.sblock.amber .sname{color:var(--amber)}
.sblock.gray{background:var(--surface);border-color:var(--border)}

.rules-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px}
.rules-title{font-family:var(--font-display);font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px}
.rule-item{font-size:12px;color:var(--muted);line-height:1;padding:6px 0;border-bottom:1px solid var(--muted2)}
.rule-item:last-child{border-bottom:none}
.rule-item::before{content:"→ ";color:var(--accent)}

/* DRILL */
.drill-progress-wrap{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.drill-progress-track{flex:1;height:2px;background:var(--border2);border-radius:1px}
.drill-progress-fill{height:2px;background:var(--accent);border-radius:1px;width:0%;transition:width .4s}
.drill-progress-txt{font-size:11px;color:var(--muted);white-space:nowrap;font-family:var(--font-display);font-weight:700}

.drill-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:16px;margin-bottom:10px;transition:border-color .2s;
}
.drill-card.completed{border-color:var(--accent);opacity:.6}
.drill-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.drill-name{font-size:14px;font-weight:500;color:var(--text)}
.drill-meta{font-family:var(--font-display);font-size:9px;font-weight:700;color:var(--muted);letter-spacing:.1em}
.drill-prompt{font-size:12px;color:var(--muted);line-height:1.6;background:var(--surface2);border-radius:8px;padding:10px 12px;margin-bottom:10px}
.drill-hint{font-size:11px;color:var(--muted);margin-bottom:10px;line-height:1.5}
.star-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px}
.stag{font-size:10px;padding:3px 8px;border-radius:6px;background:#0a1a10;color:var(--teal);font-weight:500}
.drill-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dbtn{
  background:transparent;border:1px solid var(--border2);border-radius:8px;
  padding:7px 12px;font-size:12px;font-family:var(--font-body);color:var(--text);
  cursor:pointer;transition:all .15s;
}
.dbtn:active{transform:scale(.97);background:var(--surface2)}
.timer-out{font-size:12px;color:var(--muted);min-width:32px;font-family:var(--font-display);font-weight:700}
.timer-out.done{color:var(--accent)}
.done-btn{
  margin-left:auto;background:transparent;border:1px solid var(--border2);border-radius:8px;
  padding:7px 14px;font-size:12px;font-family:var(--font-body);color:var(--muted);cursor:pointer;transition:all .2s;
}
.done-btn.checked{border-color:var(--teal);color:var(--teal)}
.done-btn:active{transform:scale(.97)}

/* STORIES */
.story-tabs{display:flex;gap:4px;margin-bottom:16px}
.stab{
  background:transparent;border:1px solid var(--border2);border-radius:16px;
  padding:6px 14px;font-size:12px;font-family:var(--font-body);font-weight:500;
  color:var(--muted);cursor:pointer;transition:all .2s;
}
.stab.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
.stab-panel{display:none}.stab-panel.active{display:block}

.story-card{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;margin-bottom:10px;cursor:pointer;transition:border-color .2s}
.story-card.open{border-color:var(--border2)}
.story-head{padding:14px 16px}
.story-tag{font-family:var(--font-display);font-size:9px;font-weight:700;letter-spacing:.1em;padding:2px 8px;border-radius:10px;display:inline-block;margin-bottom:6px}
.story-tag.red{background:#1a0808;color:var(--red)}
.story-tag.teal{background:#081a10;color:var(--teal)}
.story-tag.purple{background:#100814;color:var(--purple)}
.story-tag.amber{background:#140e06;color:var(--amber)}
.story-title{font-size:14px;font-weight:500;color:var(--text);margin-bottom:2px}
.story-hint{font-size:11px;color:var(--muted)}
.story-body{display:none;padding:14px 16px;border-top:1px solid var(--border);background:var(--surface)}
.story-card.open .story-body{display:block}
.star-r{display:grid;grid-template-columns:72px 1fr;gap:6px;margin-bottom:10px}
.sl{font-family:var(--font-display);font-size:9px;font-weight:700;color:var(--muted);letter-spacing:.1em;padding-top:2px}
.sv{font-size:12px;color:var(--text);line-height:1.6}
.story-link{display:inline-block;margin-top:8px;font-size:12px;color:var(--accent);text-decoration:none;font-weight:500}

.framework-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px}
.fw-step{display:flex;gap:12px;margin-bottom:18px}
.fw-step:last-child{margin-bottom:0}
.fw-n{width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--font-display);margin-top:1px}
.fw-t{font-size:13px;font-weight:500;color:var(--text);margin-bottom:3px}
.fw-d{font-size:12px;color:var(--muted);line-height:1.5;margin-bottom:4px}
.fw-ex{font-size:11px;color:var(--muted2);font-style:italic;padding-left:8px;border-left:2px solid var(--border2);line-height:1.5}

.mine-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px}
.mine-cat{font-family:var(--font-display);font-size:9px;font-weight:700;color:var(--accent);letter-spacing:.15em;margin:14px 0 8px}
.mine-cat:first-child{margin-top:0}
.mine-q{font-size:13px;color:var(--text);line-height:1.6;padding:10px 12px;background:var(--surface2);border-radius:8px;margin-bottom:6px}
.mine-hint{font-size:11px;color:var(--muted);margin-top:14px;font-style:italic;text-align:center}

/* ROADMAP */
.target-hero{
  background:linear-gradient(135deg,#0d1a08 0%,#0a1408 100%);
  border:1px solid #1e3810;border-radius:var(--r);padding:20px;margin-bottom:12px;
}
.target-label{font-family:var(--font-display);font-size:9px;font-weight:700;color:var(--accent);letter-spacing:.2em;margin-bottom:6px}
.target-number{font-family:var(--font-display);font-size:40px;font-weight:800;color:var(--accent);line-height:1}
.target-sub{font-size:12px;color:var(--green);margin-top:4px;font-weight:300}

.track-card{border-radius:var(--r);padding:16px;margin-bottom:10px;border:1px solid transparent}
.track-card.blue-track{background:#080f1a;border-color:#10203a}
.track-card.coral-track{background:#140a06;border-color:#2a1410}
.track-label{font-family:var(--font-display);font-size:9px;font-weight:700;letter-spacing:.15em;margin-bottom:6px}
.blue-track .track-label{color:var(--blue)}
.coral-track .track-label{color:var(--coral)}
.track-amount{font-family:var(--font-display);font-size:22px;font-weight:800;margin-bottom:4px}
.blue-track .track-amount{color:var(--blue)}
.coral-track .track-amount{color:var(--coral)}
.track-timeline{font-size:11px;margin-bottom:12px;font-weight:300}
.blue-track .track-timeline{color:var(--blue);opacity:.7}
.coral-track .track-timeline{color:var(--coral);opacity:.7}
.track-reqs{font-size:12px;line-height:2}
.blue-track .track-reqs{color:var(--blue)}
.coral-track .track-reqs{color:var(--coral)}
.track-req::before{content:"→ ";opacity:.5}

.tracker-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px}
.tracker-title{font-family:var(--font-display);font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
.tracker-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--muted2)}
.tracker-row:last-child{border-bottom:none}
.tracker-label{font-size:13px;color:var(--text)}
.tracker-ctrl{display:flex;align-items:center;gap:10px}
.ctr-btn{width:30px;height:30px;border-radius:50%;border:1px solid var(--border2);background:transparent;color:var(--text);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;line-height:1}
.ctr-btn:active{border-color:var(--accent);color:var(--accent);transform:scale(.95)}
.ctr-val{font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--accent);min-width:28px;text-align:center}
.ctr-goal{font-size:11px;color:var(--muted)}

/* WEEK */
.week-label{font-size:12px;color:var(--muted);margin-bottom:16px;font-weight:300}
.int-form{margin-bottom:12px}
.int-input{
  width:100%;background:var(--surface);border:1px solid var(--border2);border-radius:var(--r-sm);
  padding:12px 14px;font-size:13px;font-family:var(--font-body);color:var(--text);
  resize:none;outline:none;transition:border-color .2s;margin-bottom:8px;display:block;
}
.int-input:focus{border-color:var(--accent)}
.int-input::placeholder{color:var(--muted2)}
.lock-btn{
  width:100%;background:var(--accent);border:none;border-radius:var(--r-sm);
  padding:14px;font-size:13px;font-family:var(--font-display);font-weight:700;
  color:var(--black);cursor:pointer;letter-spacing:.05em;transition:opacity .15s;
}
.lock-btn:active{opacity:.85}

.int-saved{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:14px;margin-bottom:8px}
.int-saved-label{font-family:var(--font-display);font-size:9px;font-weight:700;color:var(--accent);letter-spacing:.15em;margin-bottom:6px}
.int-saved-text{font-size:13px;color:var(--text);line-height:1.5}
.int-saved-text.done-txt{text-decoration:line-through;opacity:.35}
.int-check{background:transparent;border:1px solid var(--border2);border-radius:6px;padding:5px 12px;font-size:11px;cursor:pointer;color:var(--muted);margin-top:10px;font-family:var(--font-body);transition:all .2s}
.int-check.checked{border-color:var(--teal);color:var(--teal)}
.int-check:active{transform:scale(.97)}
.reset-week{width:100%;background:transparent;border:1px solid var(--border2);border-radius:var(--r-sm);padding:12px;font-size:12px;color:var(--muted);cursor:pointer;margin-top:4px;font-family:var(--font-body);transition:all .2s}
.reset-week:active{background:var(--surface2)}

.streak-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px;margin-bottom:10px}
.streak-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.streak-big{font-family:var(--font-display);font-size:52px;font-weight:800;color:var(--accent);line-height:1}
.streak-lbl{font-size:12px;color:var(--muted);margin-top:2px}
.mark-btn{
  background:var(--accent);border:none;border-radius:var(--r-sm);
  padding:12px 16px;font-size:12px;font-family:var(--font-display);font-weight:700;
  color:var(--black);cursor:pointer;text-align:center;line-height:1.3;transition:opacity .15s;max-width:120px;
}
.mark-btn:active{opacity:.85}
.streak-dots{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.streak-dot{width:30px;height:30px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--black);font-weight:700;font-family:var(--font-display)}
.streak-hint{font-size:11px;color:var(--muted);line-height:1.5}

.identity-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px}
.identity-title{font-family:var(--font-display);font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
.identity-line{font-size:13px;color:var(--muted);line-height:1;padding:8px 0;border-bottom:1px solid var(--muted2)}
.identity-line:last-child{border-bottom:none}
.identity-line::before{content:"· "}
.accent-line{color:var(--accent) !important;font-weight:500}

/* ANIMATIONS */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.panel.active{animation:fadeUp .25s ease}