/* ═══════════════════════════════════════════════
   STYLE.CSS — RunnerPlan
   by Mas Abdur • #GrowthEveryday
   ═══════════════════════════════════════════════ */

/* ── Reset & Base ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

/* ── CSS Variables ── */
:root{
  --bg:#FAFAF8;
  --bg2:#F4F2EE;
  --bg3:#EDEAE4;
  --border:rgba(0,0,0,0.08);
  --border2:rgba(0,0,0,0.14);
  --text:#1A1A18;
  --text2:#5A5A54;
  --text3:#9A9A90;
  --accent:#E84B00;
  --accent2:#FF6B35;
  --accent-bg:rgba(232,75,0,0.07);
  --accent-bg2:rgba(232,75,0,0.12);
  --green:#2D6A2D;
  --green-bg:#EBF4EB;
  --green-text:#1A4A1A;
  --blue:#1A4A8A;
  --blue-bg:#EBF0FA;
  --blue-text:#0A2A5A;
  --gold:#8A6A00;
  --gold-bg:#FBF5E0;
  --gold-text:#5A4400;
  --red-bg:#FDE8E8;
  --red-text:#8A1A1A;
  --radius:12px;
  --radius-lg:18px;
  --radius-sm:8px;
  --shadow:0 2px 16px rgba(0,0,0,0.06);
  --shadow-lg:0 8px 40px rgba(0,0,0,0.1);
  --nav-height:58px;
}

[data-theme="dark"]{
  --bg:#111110;
  --bg2:#1A1A18;
  --bg3:#242422;
  --border:rgba(255,255,255,0.08);
  --border2:rgba(255,255,255,0.14);
  --text:#F0EFEA;
  --text2:#A0A098;
  --text3:#606058;
  --accent:#FF6B35;
  --accent2:#E84B00;
  --accent-bg:rgba(255,107,53,0.1);
  --accent-bg2:rgba(255,107,53,0.18);
  --green:#4A9A4A;
  --green-bg:rgba(74,154,74,0.12);
  --green-text:#8ACA8A;
  --blue:#4A7ACA;
  --blue-bg:rgba(74,122,202,0.12);
  --blue-text:#8AAAEA;
  --gold:#CAA040;
  --gold-bg:rgba(202,160,64,0.12);
  --gold-text:#EACA80;
  --red-bg:rgba(202,64,64,0.12);
  --red-text:#EAAAAA;
  --shadow:0 2px 16px rgba(0,0,0,0.3);
  --shadow-lg:0 8px 40px rgba(0,0,0,0.5);
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:14px;
  line-height:1.6;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  max-width:100vw;
}

/* ══════════════════════════════
   SCREENS — show/hide
   ══════════════════════════════ */
.screen{display:none}
.screen.active{display:block}

/* ══════════════════════════════
   INTRO / LOGIN SCREEN
   ══════════════════════════════ */
.intro-screen{
  height:100vh;
  background:var(--accent);
  display:flex;flex-direction:column;
  padding:28px 20px 20px;
  max-width:480px;margin:0 auto;
  overflow-y:auto;
}
.intro-logo{
  display:flex;align-items:center;gap:12px;
  margin-bottom:20px;flex-shrink:0;
}
.intro-icon-img{
  width:44px;height:44px;
  flex-shrink:0;
  object-fit:contain;
  background:#fff;
  border-radius:11px;
  padding:6px;
}
.intro-wordmark{
  font-size:32px;font-weight:800;
  color:#fff;
  letter-spacing:-1px;
  display:inline-block;
}
.intro-hero{flex-shrink:0}
.intro-eyebrow{
  font-size:10px;color:rgba(255,255,255,0.7);
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px;
}
.intro-title{
  font-size:28px;font-weight:700;color:#fff;
  line-height:1.15;margin-bottom:8px;
}
.intro-sub{
  font-size:12px;color:rgba(255,255,255,0.82);
  line-height:1.6;margin-bottom:16px;
}
.intro-features{display:flex;flex-direction:column;gap:7px;margin-bottom:0}
.intro-feat{
  display:flex;align-items:center;gap:10px;
  font-size:12px;color:rgba(255,255,255,0.9);
}
.intro-feat-icon{
  width:18px;height:18px;border-radius:50%;
  background:rgba(255,255,255,0.2);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;flex-shrink:0;color:#fff;font-weight:700;
}
.intro-spacer{flex:1;min-height:16px;max-height:72px}
.btn-google{
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:#fff;border:none;border-radius:12px;
  padding:14px;font-size:14px;font-weight:600;
  color:#1A1A18;cursor:pointer;width:100%;
  transition:opacity .15s;flex-shrink:0;
}
.btn-google:hover{opacity:.92}
.btn-google svg{width:20px;height:20px;flex-shrink:0}
.intro-terms{
  font-size:10px;color:rgba(255,255,255,0.55);
  text-align:center;margin-top:10px;line-height:1.5;flex-shrink:0;
}

/* ══════════════════════════════
   WELCOME SCREEN
   ══════════════════════════════ */
.welcome-screen{
  min-height:100vh;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:32px 20px;text-align:center;
  max-width:480px;margin:0 auto;
}
.welcome-avatar{
  width:80px;height:80px;border-radius:50%;
  background:var(--accent-bg2);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 12px;overflow:hidden;
}
.welcome-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.welcome-check{
  font-size:11px;color:var(--green);font-weight:600;
  display:flex;align-items:center;justify-content:center;
  gap:5px;margin-bottom:10px;
}
.welcome-name{font-size:22px;font-weight:700;margin-bottom:4px}
.welcome-email{font-size:12px;color:var(--text3);margin-bottom:20px}
.welcome-desc{
  font-size:13px;color:var(--text2);line-height:1.65;
  margin-bottom:32px;max-width:280px;
}
.welcome-restore{
  font-size:12px;color:var(--text3);margin-top:12px;cursor:pointer;
}
.welcome-restore span{color:var(--accent);text-decoration:underline}

/* ══════════════════════════════
   WIZARD
   ══════════════════════════════ */
.wizard-screen{
  min-height:100vh;padding-bottom:80px;
  max-width:480px;margin:0 auto;
}
.wizard-header{padding:16px 16px 0}
.progress-track{
  height:3px;background:var(--bg3);
  border-radius:2px;overflow:hidden;margin-bottom:16px;
}
.progress-fill{
  height:100%;background:var(--accent);
  border-radius:2px;transition:width .4s ease;
}
.step-label{
  font-size:10px;color:var(--text3);
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px;
}
.step-title{
  font-size:18px;font-weight:700;color:var(--text);
  line-height:1.3;margin-bottom:4px;
}
.step-sub{font-size:12px;color:var(--text3);line-height:1.5;margin-bottom:4px}
.wizard-body{padding:14px 16px 20px}
.wiz-section-label{
  font-size:11px;font-weight:600;color:var(--text2);
  letter-spacing:.03em;margin-bottom:8px;margin-top:14px;
}
.wiz-section-label:first-child{margin-top:0}

/* Opt cards */
.opt-grid{display:flex;gap:7px;margin-bottom:14px}
.opt-card{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:5px;padding:11px 8px;
  border-radius:var(--radius);
  border:0.5px solid var(--border2);
  background:var(--bg);cursor:pointer;
  transition:all .15s;text-align:center;
}
.opt-card.sel{border:1.5px solid var(--accent);background:var(--accent-bg)}
.opt-card-icon{font-size:20px}
.opt-card-name{font-size:11px;font-weight:600;color:var(--text2)}
.opt-card.sel .opt-card-name{color:var(--accent)}
.opt-card-hint{font-size:10px;color:var(--text3);line-height:1.3}

/* Opt list */
.opt-list{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.opt-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:var(--radius);
  border:0.5px solid var(--border2);background:var(--bg);
  cursor:pointer;transition:all .15s;
}
.opt-item.sel{border:1.5px solid var(--accent);background:var(--accent-bg)}
.opt-radio{
  width:16px;height:16px;border-radius:50%;
  border:1.5px solid var(--border2);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.opt-item.sel .opt-radio{background:var(--accent);border-color:var(--accent)}
.opt-item.sel .opt-radio::after{
  content:'';width:6px;height:6px;
  border-radius:50%;background:#fff;
}
.opt-item-text{flex:1}
.opt-item-name{font-size:13px;color:var(--text)}
.opt-item.sel .opt-item-name{color:var(--accent);font-weight:600}
.opt-item-hint{font-size:10px;color:var(--text3);margin-top:1px}

/* Chips */
.chip-group{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.chip{
  padding:7px 13px;border-radius:100px;
  border:0.5px solid var(--border2);background:var(--bg);
  font-size:11px;cursor:pointer;color:var(--text2);
  transition:all .15s;font-family:inherit;
}
.chip.active{background:var(--accent);border-color:var(--accent);color:#fff}

/* Time input */
.time-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-bottom:6px}
.time-wrap{display:flex;flex-direction:column;gap:3px}
.time-input{
  width:100%;padding:10px 8px;
  border-radius:var(--radius-sm);
  border:0.5px solid var(--border2);
  background:var(--bg);font-size:15px;font-weight:600;
  color:var(--text);text-align:center;
  font-family:inherit;transition:border-color .15s;
}
.time-input:focus{border-color:var(--accent);outline:none}
.time-label{font-size:10px;color:var(--text3);text-align:center}
.pace-display{
  background:var(--bg2);border-radius:var(--radius-sm);
  padding:9px 12px;
  display:flex;align-items:center;justify-content:space-between;
  margin-top:6px;
}
.pace-display-label{font-size:11px;color:var(--text3)}
.pace-display-val{font-size:14px;font-weight:700;color:var(--accent);font-family:monospace}

/* Default box */
.default-box{
  background:var(--accent-bg);border-radius:var(--radius-sm);
  padding:11px 12px;display:flex;gap:9px;align-items:flex-start;
  margin-top:6px;
}
.default-box-icon{font-size:14px;color:var(--accent);flex-shrink:0;margin-top:1px}
.default-box-text{font-size:11px;color:var(--accent2);line-height:1.6}
.default-box-text strong{color:var(--accent)}
.toggle-link{
  font-size:11px;color:var(--accent);cursor:pointer;
  text-align:center;padding:6px 0;display:block;
  border-bottom:1px dashed rgba(232,75,0,0.3);
}

/* Recommendation card */
.rec-card{
  border:1.5px solid var(--accent);border-radius:var(--radius);
  padding:13px;margin-bottom:10px;background:var(--accent-bg);
}
.rec-badge{
  font-size:10px;background:var(--accent);color:#fff;
  padding:2px 8px;border-radius:100px;
  display:inline-block;margin-bottom:8px;
}
.rec-name{font-size:18px;font-weight:700;color:var(--accent);margin-bottom:5px}
.rec-reason{font-size:11px;color:var(--accent2);line-height:1.6;margin-bottom:8px}
.rec-tags{display:flex;gap:6px;flex-wrap:wrap}
.rec-tag{
  font-size:10px;background:var(--accent-bg2);
  color:var(--accent);padding:2px 8px;border-radius:100px;
}

/* Alt coaches */
.alt-coach{
  display:flex;align-items:center;gap:10px;
  padding:9px 11px;border-radius:var(--radius-sm);
  border:0.5px solid var(--border2);background:var(--bg);
  cursor:pointer;transition:border-color .15s;margin-bottom:7px;
}
.alt-coach.sel{border:1.5px solid var(--accent);background:var(--accent-bg)}
.alt-coach-icon{
  width:30px;height:30px;border-radius:var(--radius-sm);
  background:var(--bg2);display:flex;align-items:center;
  justify-content:center;flex-shrink:0;font-size:16px;
}
.alt-coach-name{font-size:12px;font-weight:600;flex:1}
.alt-coach-badge{font-size:10px;color:var(--text3)}

/* ══════════════════════════════
   READY SCREEN
   ══════════════════════════════ */
.ready-screen{
  min-height:100vh;background:var(--accent);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:28px 20px;text-align:center;
  max-width:480px;margin:0 auto;
}
.ready-icon{
  width:72px;height:72px;background:rgba(255,255,255,0.2);
  border-radius:50%;display:flex;align-items:center;
  justify-content:center;margin:0 auto 18px;font-size:36px;
}
.ready-title{font-size:24px;font-weight:700;color:#fff;margin-bottom:8px}
.ready-sub{font-size:13px;color:rgba(255,255,255,0.82);line-height:1.6;margin-bottom:24px}
.ready-card{
  background:rgba(255,255,255,0.15);border-radius:var(--radius);
  padding:13px 16px;width:100%;margin-bottom:24px;text-align:left;
}
.ready-row{
  display:flex;justify-content:space-between;align-items:center;
  font-size:12px;color:rgba(255,255,255,0.9);padding:4px 0;
  border-bottom:0.5px solid rgba(255,255,255,0.15);
}
.ready-row:last-child{border-bottom:none}
.ready-row span:first-child{color:rgba(255,255,255,0.65)}
.btn-ready{
  background:#fff;color:var(--accent);border:none;
  border-radius:12px;padding:13px;font-size:14px;
  font-weight:700;cursor:pointer;width:100%;
  font-family:inherit;transition:opacity .15s;
}
.btn-ready:hover{opacity:.92}

/* ══════════════════════════════
   MAIN APP — Bottom Nav
   ══════════════════════════════ */
.app-screen{
  min-height:100vh;
  padding-bottom:calc(var(--nav-height) + 16px);
  max-width:480px;margin:0 auto;
}
.bottom-nav{
  position:fixed;bottom:0;left:50%;
  transform:translateX(-50%);
  width:100%;max-width:480px;
  background:var(--bg);
  border-top:0.5px solid var(--border2);
  display:flex;height:var(--nav-height);
  z-index:100;
}
.nav-item{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;
  cursor:pointer;border:none;background:transparent;
  color:var(--text3);font-size:10px;font-family:inherit;
  transition:color .15s;
}
.nav-item.active{color:var(--accent)}
.nav-item .ico{width:22px;height:22px;display:block}

/* SVG Icon System */
.ico{width:18px;height:18px;display:inline-block;vertical-align:middle;flex-shrink:0}
.ico-sm{width:13px;height:13px;display:inline-block;vertical-align:-2px;flex-shrink:0}

/* ══════════════════════════════
   TODAY SCREEN
   ══════════════════════════════ */
.today-greeting{
  padding:16px 16px 4px;
  font-size:16px;font-weight:700;color:var(--text);
}
.today-date{
  padding:0 16px 14px;
  font-size:12px;color:var(--text3);
}
.today-hero{
  margin:0 16px 12px;
  background:var(--accent);border-radius:var(--radius-lg);
  padding:16px;color:#fff;
}
.today-hero-label{
  font-size:10px;opacity:.75;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:4px;
}
.today-hero-title{font-size:22px;font-weight:700;margin-bottom:4px}
.today-hero-meta{font-size:11px;opacity:.85;margin-bottom:6px}
.today-hero-hint{font-size:11px;opacity:.75;font-style:italic;margin-bottom:14px;line-height:1.5}
.today-btn-row{display:flex;gap:8px}
.btn-done{
  flex:1;background:#fff;color:var(--accent);
  border:none;border-radius:9px;padding:11px;
  font-size:13px;font-weight:700;cursor:pointer;
  font-family:inherit;transition:opacity .15s;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.btn-done:hover{opacity:.9}
.btn-skip{
  background:rgba(255,255,255,0.2);color:#fff;
  border:1px solid rgba(255,255,255,0.35);
  border-radius:9px;padding:11px 14px;
  font-size:12px;cursor:pointer;font-family:inherit;
}
.today-hero.success{background:var(--green)}

/* Stats row */
.stat-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 16px 12px}
.stat-card{
  background:var(--bg2);border-radius:var(--radius);
  padding:11px 13px;
}
.stat-val{font-size:22px;font-weight:700;color:var(--text);line-height:1}
.stat-val.accent{color:var(--accent)}
.stat-lbl{font-size:10px;color:var(--text3);margin-top:3px;text-transform:uppercase;letter-spacing:.05em}

/* Week strip */
.week-strip-card{margin:0 16px 12px;background:var(--bg2);border-radius:var(--radius);padding:12px}
.week-strip{display:flex;gap:4px;margin-bottom:8px}
.day-dot-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
.day-dot{
  width:30px;height:30px;border-radius:50%;
  border:0.5px solid var(--border2);background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;color:var(--text3);
}
.day-dot.done{background:var(--accent);border-color:var(--accent);color:#fff}
.day-dot.today{border:2px solid var(--accent);color:var(--accent)}
.day-dot.rest{background:var(--bg3);border-color:var(--bg3)}
.day-dot.future{background:var(--bg2);border-color:var(--border2);color:var(--text3);opacity:0.6}
.day-dot-label{font-size:9px;color:var(--text3)}
.week-strip-summary{font-size:11px;color:var(--text3);text-align:center}

/* Next session */
.next-session-card{
  margin:0 16px 12px;
  background:var(--bg);border:0.5px solid var(--border2);
  border-radius:var(--radius);padding:12px;
  display:flex;align-items:center;gap:10px;
}
.next-session-icon{
  width:36px;height:36px;border-radius:var(--radius-sm);
  background:var(--blue-bg);display:flex;align-items:center;
  justify-content:center;flex-shrink:0;font-size:18px;
}
.next-session-name{font-size:13px;font-weight:600}
.next-session-date{font-size:11px;color:var(--text3)}

/* Notif banner */
.notif-banner{
  margin:0 16px 12px;
  display:flex;align-items:flex-start;gap:10px;
  padding:11px 13px;border-radius:var(--radius);
  border:0.5px solid var(--border2);background:var(--bg2);
}
.notif-banner.amber{background:var(--gold-bg);border-color:rgba(138,106,0,0.2)}
.notif-banner.green{background:var(--green-bg);border-color:rgba(45,106,45,0.2)}
.notif-icon{
  width:32px;height:32px;border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:16px;
}
.notif-title{font-size:12px;font-weight:600;margin-bottom:2px}
.notif-sub{font-size:11px;color:var(--text2);line-height:1.5}
.notif-action{font-size:11px;font-weight:600;color:var(--accent);margin-top:4px;cursor:pointer}

/* Offline bar */
.offline-bar{
  margin:0 16px 10px;
  background:var(--gold-bg);border:0.5px solid rgba(138,106,0,0.25);
  border-radius:var(--radius-sm);padding:8px 12px;
  display:flex;align-items:center;gap:8px;
  font-size:11px;color:var(--gold-text);
}

/* ══════════════════════════════
   PROGRAM SCREEN
   ══════════════════════════════ */
.program-screen-header{padding:16px 16px 0}
.program-screen-title{font-size:16px;font-weight:700;margin-bottom:2px}
.program-screen-sub{font-size:12px;color:var(--text3);margin-bottom:14px}

.overall-progress{margin:0 16px 14px}
.overall-progress-bar{
  height:6px;background:var(--bg3);border-radius:3px;
  overflow:hidden;margin-bottom:6px;
}
.overall-progress-fill{height:100%;background:var(--accent);border-radius:3px;transition:width .3s}
.overall-progress-label{font-size:11px;color:var(--text3)}

.week-card{
  margin:0 16px 8px;
  background:var(--bg);border:0.5px solid var(--border2);
  border-radius:var(--radius);overflow:hidden;
}
.week-card-header{
  padding:11px 14px;display:flex;
  align-items:center;justify-content:space-between;
  cursor:pointer;
}
.week-card-title{font-size:13px;font-weight:600}
.week-badge{
  font-size:10px;padding:2px 8px;border-radius:100px;
  background:var(--accent-bg2);color:var(--accent);
}
.week-badge.current{background:var(--accent);color:#fff}
.week-badge.done{background:var(--green-bg);color:var(--green)}
.week-badge.deload{background:var(--gold-bg);color:var(--gold)}

.session-row{
  padding:8px 14px;display:flex;align-items:center;gap:10px;
  border-top:0.5px solid var(--border);
}
.sess-day{font-size:11px;color:var(--text3);width:26px;flex-shrink:0}
.sess-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.sess-dot.easy{background:var(--green)}
.sess-dot.long{background:var(--accent)}
.sess-dot.tempo{background:var(--blue)}
.sess-dot.interval{background:var(--gold)}
.sess-dot.rest{background:var(--border2)}
.sess-info{flex:1}
.sess-name{font-size:12px;font-weight:600}
.sess-sub{font-size:10px;color:var(--text3)}
.sess-today-badge{
  font-size:9px;background:var(--accent-bg2);
  color:var(--accent);padding:1px 6px;border-radius:100px;
}
.sess-done-check{color:var(--green);font-size:15px}

/* ══════════════════════════════
   HISTORY SCREEN
   ══════════════════════════════ */
.history-screen-header{padding:16px 16px 14px}
.history-screen-title{font-size:16px;font-weight:700;margin-bottom:2px}
.history-screen-sub{font-size:12px;color:var(--text3)}

.history-empty{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:48px 24px;text-align:center;
  gap:10px;
}
.history-empty-icon{
  width:56px;height:56px;border-radius:50%;
  background:var(--bg2);display:flex;align-items:center;
  justify-content:center;font-size:28px;margin-bottom:4px;
}
.history-empty-title{font-size:15px;font-weight:600}
.history-empty-sub{font-size:12px;color:var(--text3);line-height:1.6;max-width:220px}

.history-item{
  display:flex;align-items:center;gap:10px;
  padding:11px 16px;border-bottom:0.5px solid var(--border);
}
.history-item:last-child{border-bottom:none}
.history-item-icon{
  width:38px;height:38px;border-radius:var(--radius-sm);
  background:var(--accent-bg);display:flex;align-items:center;
  justify-content:center;font-size:19px;flex-shrink:0;
}
.history-item-icon.skip{background:var(--bg2)}
.history-item-name{font-size:13px;font-weight:600}
.history-item-sub{font-size:11px;color:var(--text3)}
.history-item-val{font-size:13px;font-weight:600}
.history-first-badge{
  margin:0 16px 12px;
  background:var(--green-bg);border:0.5px solid rgba(45,106,45,0.2);
  border-radius:var(--radius-sm);padding:10px 13px;
  display:flex;align-items:center;gap:10px;
  font-size:12px;color:var(--green-text);
}

/* ══════════════════════════════
   PROFILE SCREEN
   ══════════════════════════════ */
.profile-header{padding:24px 16px 16px;text-align:center}
.profile-avatar{
  width:68px;height:68px;border-radius:50%;
  background:var(--accent-bg2);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 10px;overflow:hidden;
}
.profile-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.profile-name{font-size:17px;font-weight:700;margin-bottom:2px}
.profile-email{font-size:12px;color:var(--text3);margin-bottom:16px}

.profile-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:0 16px 16px}
.pstat{
  background:var(--bg2);border-radius:var(--radius-sm);
  padding:10px 6px;text-align:center;
}
.pstat-val{font-size:20px;font-weight:700;color:var(--text)}
.pstat-lbl{font-size:10px;color:var(--text3);margin-top:2px}

.profile-section{margin:0 16px 16px}
.profile-section-label{
  font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text3);margin-bottom:8px;
}
.profile-card{
  background:var(--bg);border:0.5px solid var(--border2);
  border-radius:var(--radius);overflow:hidden;
}
.profile-menu-item{
  display:flex;align-items:center;gap:10px;
  padding:13px 14px;border-bottom:0.5px solid var(--border);
  cursor:pointer;transition:background .1s;
}
.profile-menu-item:last-child{border-bottom:none}
.profile-menu-item:hover{background:var(--bg2)}
.profile-menu-icon{
  width:32px;height:32px;border-radius:var(--radius-sm);
  background:var(--bg2);display:flex;align-items:center;
  justify-content:center;font-size:16px;flex-shrink:0;
}
.profile-menu-icon.red{background:var(--red-bg)}
.profile-menu-text{flex:1;font-size:13px}
.profile-menu-text.red{color:var(--red-text)}
.profile-menu-arrow{font-size:12px;color:var(--text3)}

/* Active program card */
.active-program-card{
  margin:0 16px 16px;
  background:var(--bg);border:0.5px solid var(--border2);
  border-radius:var(--radius);padding:13px;
}
.active-program-label{
  font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text3);margin-bottom:8px;
}
.active-program-name{font-size:14px;font-weight:700;margin-bottom:6px}
.active-program-meta{font-size:11px;color:var(--text3);margin-bottom:10px}
.active-program-bar{
  height:4px;background:var(--bg3);border-radius:2px;
  overflow:hidden;margin-bottom:6px;
}
.active-program-fill{height:100%;background:var(--accent);border-radius:2px}
.active-program-pct{font-size:11px;color:var(--text3)}

/* ══════════════════════════════
   MISSED SESSION MODAL
   ══════════════════════════════ */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.5);
  display:flex;align-items:flex-end;justify-content:center;
  z-index:200;padding-bottom:0;
}
.modal-overlay.hidden{display:none}
.modal-sheet{
  background:var(--bg);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  width:100%;max-width:480px;padding:16px;
  max-height:90vh;overflow-y:auto;
}
.modal-handle{
  width:36px;height:4px;background:var(--border2);
  border-radius:2px;margin:0 auto 16px;
}
.modal-title{font-size:16px;font-weight:700;margin-bottom:4px}
.modal-sub{font-size:12px;color:var(--text3);line-height:1.5;margin-bottom:14px}
.modal-pills{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.modal-pill{
  display:flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:100px;
  background:var(--bg2);border:0.5px solid var(--border2);
  font-size:11px;color:var(--text2);
}
.choice-item{
  display:flex;align-items:center;gap:10px;
  padding:11px 12px;border-radius:var(--radius);
  border:0.5px solid var(--border2);background:var(--bg);
  cursor:pointer;margin-bottom:7px;transition:border-color .15s;
}
.choice-item.primary{border:1.5px solid var(--accent);background:var(--accent-bg)}
.choice-icon{
  width:34px;height:34px;border-radius:var(--radius-sm);
  background:var(--bg2);display:flex;align-items:center;
  justify-content:center;font-size:16px;flex-shrink:0;
}
.choice-icon.orange{background:var(--accent-bg)}
.choice-name{font-size:13px;font-weight:600}
.choice-item.primary .choice-name{color:var(--accent)}
.choice-hint{font-size:10px;color:var(--text3);line-height:1.4;margin-top:1px}

/* ══════════════════════════════
   PAUSE MODAL
   ══════════════════════════════ */
.pause-dur-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.pause-note{
  background:var(--bg2);border-radius:var(--radius-sm);
  padding:10px 12px;display:flex;gap:8px;
  align-items:flex-start;margin-bottom:14px;
  font-size:11px;color:var(--text2);line-height:1.5;
}
.pause-note-icon{font-size:14px;color:var(--text3);flex-shrink:0;margin-top:1px}

/* Resume banner */
.resume-banner{
  margin:0 16px 12px;
  background:var(--green-bg);border:0.5px solid rgba(45,106,45,0.2);
  border-radius:var(--radius);padding:12px 14px;
  display:flex;align-items:center;gap:10px;
}
.resume-banner-icon{
  width:38px;height:38px;border-radius:var(--radius-sm);
  background:rgba(45,106,45,0.15);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;flex-shrink:0;
}
.resume-banner-title{font-size:13px;font-weight:600;margin-bottom:2px}
.resume-banner-sub{font-size:11px;color:var(--text3)}
.btn-resume{
  padding:6px 12px;border-radius:100px;
  border:1.5px solid var(--green);background:transparent;
  color:var(--green-text);font-size:11px;font-weight:600;
  cursor:pointer;font-family:inherit;white-space:nowrap;
}

/* ══════════════════════════════
   FIRST SESSION TUTORIAL
   ══════════════════════════════ */
.tutorial-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.55);
  z-index:150;display:flex;align-items:flex-end;
  padding-bottom:80px;justify-content:center;
}
.tutorial-overlay.hidden{display:none}
.tutorial-tooltip{
  background:var(--bg);border-radius:var(--radius);
  border:1.5px solid var(--accent);
  padding:14px 16px;width:calc(100% - 32px);
  max-width:448px;
}
.tutorial-step{
  font-size:10px;font-weight:700;color:var(--accent);
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px;
}
.tutorial-title{font-size:14px;font-weight:700;margin-bottom:4px}
.tutorial-sub{font-size:12px;color:var(--text2);line-height:1.5;margin-bottom:10px}
.tutorial-footer{display:flex;align-items:center;justify-content:space-between}
.tutorial-dots{display:flex;gap:4px}
.tutorial-dot{width:18px;height:3px;border-radius:2px;background:var(--border2)}
.tutorial-dot.active{background:var(--accent);width:24px}
.tutorial-next{
  font-size:12px;font-weight:600;color:var(--accent);
  cursor:pointer;background:none;border:none;
  font-family:inherit;
}

/* ══════════════════════════════
   NOTIF SETUP MODAL
   ══════════════════════════════ */
.notif-setup-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 0;border-bottom:0.5px solid var(--border);
}
.notif-setup-row:last-child{border-bottom:none}
.notif-setup-label{font-size:13px;font-weight:600;margin-bottom:2px}
.notif-setup-hint{font-size:10px;color:var(--text3)}
.toggle-switch{
  width:38px;height:22px;border-radius:100px;
  background:var(--border2);position:relative;
  cursor:pointer;transition:background .2s;flex-shrink:0;
}
.toggle-switch.on{background:var(--accent)}
.toggle-switch::after{
  content:'';position:absolute;
  top:3px;left:3px;width:16px;height:16px;
  border-radius:50%;background:#fff;
  transition:left .2s;
}
.toggle-switch.on::after{left:19px}

/* ══════════════════════════════
   BUTTONS — Global
   ══════════════════════════════ */
.btn-primary{
  width:100%;background:var(--accent);color:#fff;
  border:none;border-radius:12px;padding:13px;
  font-size:14px;font-weight:700;cursor:pointer;
  font-family:inherit;transition:opacity .15s;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.btn-primary:hover{opacity:.9}
.btn-primary:disabled{opacity:.4;cursor:not-allowed}
.btn-secondary{
  width:100%;background:transparent;
  border:0.5px solid var(--border2);border-radius:12px;
  padding:12px;font-size:13px;cursor:pointer;
  color:var(--text2);font-family:inherit;transition:background .15s;
}
.btn-secondary:hover{background:var(--bg2)}
.btn-back{
  background:none;border:none;color:var(--text3);
  font-size:12px;cursor:pointer;padding:8px 0;
  text-align:center;width:100%;font-family:inherit;
}
.btn-danger{
  width:100%;background:transparent;
  border:0.5px solid var(--border2);border-radius:12px;
  padding:12px;font-size:13px;cursor:pointer;
  color:var(--red-text);font-family:inherit;
}

/* ══════════════════════════════
   EDIT PROFILE
   ══════════════════════════════ */
.edit-screen{max-width:480px;margin:0 auto;padding-bottom:80px}
.edit-header{
  padding:16px;display:flex;align-items:center;gap:10px;
  border-bottom:0.5px solid var(--border);
}
.edit-back{
  width:34px;height:34px;border-radius:50%;
  border:0.5px solid var(--border2);background:var(--bg2);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:18px;flex-shrink:0;
}
.edit-title{font-size:16px;font-weight:700}
.edit-body{padding:14px 16px}
.edit-card{
  background:var(--bg);border:0.5px solid var(--border2);
  border-radius:var(--radius);padding:13px;margin-bottom:12px;
}
.edit-card-label{
  font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text3);margin-bottom:10px;
}
.current-pill{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--bg2);border-radius:100px;
  padding:4px 10px;font-size:11px;color:var(--text2);margin-bottom:10px;
}
.current-pill strong{color:var(--text)}
.field-input{
  width:100%;padding:9px 11px;
  border-radius:var(--radius-sm);
  border:0.5px solid var(--border2);
  background:var(--bg);font-size:13px;
  color:var(--text);font-family:inherit;
  transition:border-color .15s;
}
.field-input:focus{border-color:var(--accent);outline:none}
.field-row-2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.field-hint{font-size:10px;color:var(--text3);margin-top:3px}

/* ══════════════════════════════
   CONFIRM SAVE SCREEN
   ══════════════════════════════ */
.confirm-screen{
  min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:32px 20px;text-align:center;
  max-width:480px;margin:0 auto;gap:12px;
}
.confirm-icon{
  width:60px;height:60px;border-radius:50%;
  background:var(--green-bg);display:flex;align-items:center;
  justify-content:center;font-size:30px;
}
.confirm-title{font-size:18px;font-weight:700}
.confirm-sub{font-size:12px;color:var(--text3);line-height:1.6;max-width:240px}
.confirm-card{
  background:var(--bg2);border-radius:var(--radius);
  padding:12px 14px;width:100%;text-align:left;
}
.confirm-row{
  display:flex;justify-content:space-between;
  font-size:12px;padding:4px 0;
  border-bottom:0.5px solid var(--border);
}
.confirm-row:last-child{border-bottom:none}
.confirm-row span:first-child{color:var(--text3)}
.confirm-row span:last-child{font-weight:600}
.confirm-row span.green{color:var(--green)}

/* ══════════════════════════════
   FINISH SCREEN
   ══════════════════════════════ */
.finish-screen{
  min-height:100vh;background:var(--accent);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:28px 20px;text-align:center;
  max-width:480px;margin:0 auto;
}
.finish-icon{
  width:80px;height:80px;background:rgba(255,255,255,0.2);
  border-radius:50%;display:flex;align-items:center;
  justify-content:center;margin:0 auto 18px;font-size:40px;
}
.finish-title{font-size:26px;font-weight:700;color:#fff;margin-bottom:8px}
.finish-sub{font-size:13px;color:rgba(255,255,255,0.82);line-height:1.6;margin-bottom:24px}
.finish-card{
  background:rgba(255,255,255,0.15);border-radius:var(--radius);
  padding:13px 16px;width:100%;margin-bottom:24px;text-align:left;
}
.finish-row{
  display:flex;justify-content:space-between;
  font-size:12px;color:rgba(255,255,255,0.9);
  padding:4px 0;border-bottom:0.5px solid rgba(255,255,255,0.15);
}
.finish-row:last-child{border-bottom:none}
.finish-row span:first-child{color:rgba(255,255,255,0.65)}

/* ══════════════════════════════
   UTILITY
   ══════════════════════════════ */
.hidden{display:none!important}
.section-pad{padding:14px 16px 0}
.card-pad{padding:12px 16px}
.divider{height:0.5px;background:var(--border);margin:4px 0}
.brand-bar{
  padding:14px 16px 18px;
  text-align:center;
  border-top:0.5px solid var(--border2);
  margin-top:8px;
}
.brand-bar-name{
  font-size:11px;font-weight:600;
  color:var(--accent);
  margin-bottom:6px;
  letter-spacing:.03em;
}
.brand-bar-links{
  display:flex;align-items:center;
  justify-content:center;gap:16px;
}
.brand-bar-link{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11px;color:var(--text3);
  text-decoration:none;
  transition:color .15s;
}
.brand-bar-link:hover{color:var(--accent)}
.brand-bar-link .ico-sm{width:13px;height:13px}

/* WA Share Card */
.wa-share-card{
  margin:8px 16px 4px;
  background:var(--bg2);
  border-radius:var(--radius);
  border:0.5px solid var(--border2);
  padding:13px 14px;
  display:flex;align-items:center;gap:10px;
}
.wa-share-card-text{flex:1}
.wa-share-card-title{font-size:12px;font-weight:600;color:var(--text);margin-bottom:2px}
.wa-share-card-sub{font-size:11px;color:var(--text3)}
.wa-share-btn{
  background:#25D366;color:#fff;
  border:none;border-radius:8px;
  padding:8px 13px;font-size:12px;font-weight:600;
  cursor:pointer;white-space:nowrap;
  font-family:inherit;display:flex;align-items:center;gap:5px;
  flex-shrink:0;
}
.wa-share-btn .ico{width:15px;height:15px}

/* Scrollbar */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ══════════════════════════════
   WIZARD DAY PICKER
   ══════════════════════════════ */
.wiz-day-btn{
  flex:1;padding:10px 4px;border-radius:var(--radius-sm);
  border:0.5px solid var(--border2);background:var(--bg);
  font-size:11px;font-weight:600;color:var(--text3);
  cursor:pointer;text-align:center;transition:all .15s;
  user-select:none;
}
.wiz-day-btn.active{
  background:var(--accent);border-color:var(--accent);color:#fff;
}
.wiz-day-btn.longrun{
  background:var(--green);border-color:var(--green);color:#fff;
}
.wiz-longrun-chip{
  padding:7px 13px;border-radius:100px;
  border:0.5px solid var(--border2);background:var(--bg);
  font-size:12px;cursor:pointer;color:var(--text2);
  transition:all .15s;
}
.wiz-longrun-chip.active{
  background:var(--green);border-color:var(--green);color:#fff;
}
/* ═══════════════════════════════════════
   FEEDBACK FORM
   ═══════════════════════════════════════ */
.fb-step-label{font-size:10px;font-weight:600;color:var(--text3);letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}
.fb-q{font-size:14px;font-weight:600;color:var(--text);margin-bottom:12px;line-height:1.4}
.fb-stars{display:flex;gap:6px;margin-bottom:4px}
.fb-star{background:none;border:none;font-size:36px;color:var(--border2);cursor:pointer;padding:0;line-height:1;transition:color .1s;font-family:inherit}
.fb-star.active{color:#f5a623}
.fb-aspects{display:flex;flex-wrap:wrap;gap:8px}
.fb-aspect-chip{
  padding:8px 14px;border-radius:100px;
  border:1.5px solid var(--border2);
  font-size:12px;color:var(--text2);
  cursor:pointer;background:var(--bg);
  transition:all .15s;
}
.fb-aspect-chip.active{
  background:#FFF0EB;border-color:var(--accent);
  color:var(--accent);font-weight:600;
}

/* ═══════════════════════════════════════
   FEEL PULSE
   ═══════════════════════════════════════ */
.feel-pulse-card{
  background:var(--bg);
  border-radius:var(--radius) var(--radius) 0 0;
  padding:24px 20px 32px;
  max-width:480px;width:100%;
  margin:auto 0 0;
  animation:slideUp .25s ease;
}
.feel-pulse-title{font-size:15px;font-weight:700;color:var(--text);margin-bottom:4px;text-align:center}
.feel-pulse-q{font-size:13px;color:var(--text2);text-align:center;margin-bottom:20px}
.feel-pulse-opts{display:flex;gap:6px;justify-content:center;margin-bottom:16px}
.feel-opt{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  background:var(--bg2);border:1.5px solid var(--border2);
  border-radius:12px;padding:12px 8px;
  cursor:pointer;flex:1;min-width:0;
  font-size:22px;font-family:inherit;
  transition:all .15s;
}
.feel-opt span{font-size:10px;color:var(--text2);font-weight:500;text-align:center;line-height:1.3}
.feel-opt:active,.feel-opt:hover{border-color:var(--accent);background:#FFF0EB}
.feel-opt.selected{border-color:var(--accent);background:#FFF0EB}
.feel-skip{
  display:block;width:100%;background:none;border:none;
  font-size:12px;color:var(--text3);cursor:pointer;
  text-align:center;padding:4px;font-family:inherit;
}

/* ═══════════════════════════════════════
   QUOTE OF THE DAY
   ═══════════════════════════════════════ */
.qotd-card{
  margin:8px 16px 4px;
  padding:14px 16px;
  border-left:3px solid var(--accent);
  background:var(--bg2);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.qotd-text{
  font-size:13px;font-style:italic;
  color:var(--text2);line-height:1.6;
  margin-bottom:6px;
}
.qotd-author{
  font-size:11px;font-weight:600;
  color:var(--text3);letter-spacing:.02em;
}

/* ═══════════════════════════════════════
   VERSION FOOTER + CHANGELOG
   ═══════════════════════════════════════ */
.version-footer{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 16px;cursor:pointer;
  transition:opacity .15s;
}
.version-footer:active{opacity:.7}
.version-tag{
  font-size:12px;font-weight:500;color:var(--text3);
  letter-spacing:.02em;
}
.version-badge{
  font-size:10px;font-weight:700;
  background:var(--accent);color:#fff;
  padding:2px 7px;border-radius:100px;
  letter-spacing:.04em;
}

.cl-version-block{margin-bottom:20px}
.cl-version-header{
  display:flex;align-items:center;gap:8px;
  margin-bottom:10px;
}
.cl-version-num{
  font-size:13px;font-weight:700;color:var(--text);
}
.cl-version-date{
  font-size:11px;color:var(--text3);
}
.cl-version-tag{
  font-size:10px;font-weight:600;
  background:#FFF0EB;color:var(--accent);
  padding:2px 8px;border-radius:100px;
  margin-left:auto;
}
.cl-item{
  display:flex;align-items:flex-start;gap:8px;
  font-size:12px;color:var(--text2);
  line-height:1.5;margin-bottom:6px;
}
.cl-item-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);flex-shrink:0;margin-top:5px;
}
.cl-divider{
  height:1px;background:var(--border2);
  margin:16px 0;
}

/* ═══════════════════════════════════════
   OVERLAY SYSTEM (backdrop + bottom sheet)
   ═══════════════════════════════════════ */
.overlay-backdrop{
  position:fixed;inset:0;z-index:800;
  background:rgba(0,0,0,0.45);
  display:flex;flex-direction:column;
  justify-content:flex-end;
  align-items:center;
}
.overlay-backdrop.hidden{display:none}
.overlay-sheet{
  background:var(--bg);
  border-radius:var(--radius) var(--radius) 0 0;
  width:100%;max-width:480px;
  max-height:85vh;
  display:flex;flex-direction:column;
  animation:slideUp .25s ease;
}
.overlay-handle{
  width:36px;height:4px;
  background:var(--border2);border-radius:2px;
  margin:12px auto 0;flex-shrink:0;
}
.overlay-header{
  display:flex;align-items:center;
  padding:14px 16px 10px;flex-shrink:0;
  border-bottom:0.5px solid var(--border2);
}
.overlay-title{
  font-size:15px;font-weight:700;color:var(--text);flex:1;
}
.overlay-close{
  background:none;border:none;
  font-size:18px;color:var(--text3);
  cursor:pointer;padding:4px;font-family:inherit;
}
.overlay-body{
  padding:16px;overflow-y:auto;flex:1;
}