:root{
  --navy:#0f2233; --navy2:#14293b; --navy3:#16243a; --line:#23425a; --line2:#3a4f6b;
  --gold:#D4AF37; --gold-dim:#b9912b; --cream:#faf7f0; --soft:#cfe0ec; --mut:#9fb6c7;
  --good:#5dcaa5;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; }
body{
  font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  background:var(--navy); color:var(--cream);
  padding:env(safe-area-inset-top) 0 calc(env(safe-area-inset-bottom) + 88px);
  min-height:100vh; -webkit-font-smoothing:antialiased;
}
#app{ max-width:480px; margin:0 auto; padding:0 16px; }

.topbar{ display:flex; justify-content:space-between; align-items:center; padding:22px 4px 16px; }
.greeting{ font-size:13px; color:var(--mut); }
.subtitle{ font-size:17px; color:#fff; font-weight:500; font-family:Georgia,serif; }
.streak{ display:flex; align-items:center; gap:6px; background:var(--navy2);
  border:1px solid #3a2e12; border-radius:22px; padding:7px 12px; color:var(--gold);
  font-size:13px; font-weight:500; cursor:pointer; }
.flame{ font-size:13px; display:inline-block; transform-origin:center bottom; transition:transform .4s ease; }
.streak.hot .flame{ transform:scale(1.35); }

.card{ background:var(--navy2); border:1px solid var(--line); border-radius:16px; padding:16px; margin:12px 0; }

.goalhead{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:11px; }
.goallabel{ color:var(--soft); font-size:14px; }
.goalcount{ color:#fff; font-size:14px; }
.goalcount b{ font-size:22px; font-weight:600; }
.track{ height:16px; background:#0a1925; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.fill{ width:0%; height:100%; background:var(--gold); border-radius:8px 0 0 8px;
  transition:width .55s cubic-bezier(.2,.8,.2,1); }
.fill.full{ border-radius:8px; }
.goalmsg{ margin-top:10px; color:var(--gold); font-size:13px; min-height:18px; }
.addbtn{ width:100%; margin-top:14px; background:var(--gold); color:var(--navy);
  border:none; border-radius:12px; padding:15px; font-size:16px; font-weight:600;
  cursor:pointer; transition:transform .12s ease, background .2s; }
.addbtn:active{ transform:scale(.97); background:var(--gold-dim); }
.addbtn .plus{ font-size:19px; font-weight:700; margin-right:4px; }

.coach{ background:var(--navy3); border-color:var(--line2); }
.coachhead{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.coachhead .pin{ color:var(--gold); font-size:14px; }
.coachhead span:nth-child(2){ color:#fff; font-size:14px; font-weight:500; flex:1; }
.coachx{ background:none; border:none; color:var(--mut); font-size:22px; line-height:1; cursor:pointer; padding:0 2px; }
.coachsub{ color:#aebfce; font-size:12px; margin-bottom:10px; }
.task{ display:flex; align-items:center; gap:10px; width:100%; background:none;
  border:none; border-top:1px solid var(--line); padding:11px 0; cursor:pointer; text-align:left; }
.task .ticon{ color:var(--gold); font-size:14px; width:18px; }
.task .tlabel{ flex:1; color:#e6eef4; font-size:13px; }
.task .check{ width:20px; height:20px; border:1.5px solid var(--mut); border-radius:6px; display:inline-block; position:relative; }
.task.done .check{ background:var(--good); border-color:var(--good); }
.task.done .check::after{ content:'\2713'; position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center; color:var(--navy); font-size:13px; font-weight:800; }
.task.done .tlabel{ color:var(--mut); text-decoration:line-through; }
.why{ margin-top:10px; background:var(--navy); border-left:3px solid var(--gold);
  padding:9px 11px; color:var(--soft); font-size:12px; line-height:1.5; }

.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0; }
.stat{ background:var(--navy2); border:1px solid var(--line); border-radius:14px; padding:14px; text-align:center; }
.statnum{ font-size:26px; font-weight:600; color:var(--gold); }
.statlabel{ font-size:12px; color:var(--mut); margin-top:3px; }

.sectiontitle{ font-size:13px; color:var(--mut); margin-bottom:10px; }
.history{ display:flex; flex-direction:column; gap:8px; }
.hrow{ display:flex; align-items:center; gap:10px; font-size:13px; }
.hrow .hweek{ color:var(--soft); width:96px; }
.hrow .htrack{ flex:1; height:8px; background:#0a1925; border-radius:5px; overflow:hidden; }
.hrow .hfill{ height:100%; background:var(--line2); }
.hrow .hfill.hit{ background:var(--gold); }
.hrow .hnum{ color:var(--mut); width:54px; text-align:right; }

.modes{ position:fixed; left:0; right:0; bottom:0; display:flex; gap:8px; justify-content:center;
  align-items:center; padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(15,34,51,0),var(--navy) 38%); }
.mode{ background:var(--navy2); border:1px solid var(--line2); color:var(--mut);
  border-radius:22px; padding:9px 18px; font-size:13px; cursor:pointer; }
.mode.is-on{ background:var(--gold); color:var(--navy); border-color:var(--gold); font-weight:600; }
.gear{ background:var(--navy2); border:1px solid var(--line2); color:var(--mut);
  width:40px; height:40px; border-radius:50%; font-size:18px; cursor:pointer; }

.sheet{ position:fixed; inset:0; background:rgba(5,12,20,.6); display:flex; align-items:flex-end;
  z-index:20; }
.sheetcard{ width:100%; max-width:480px; margin:0 auto; background:var(--navy2);
  border-top:2px solid var(--gold); border-radius:20px 20px 0 0; padding:18px 18px calc(24px + env(safe-area-inset-bottom));
  max-height:86vh; overflow:auto; }
.sheethead{ display:flex; justify-content:space-between; align-items:center; font-size:17px;
  font-family:Georgia,serif; color:#fff; margin-bottom:6px; }
.row{ display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:14px 0; border-top:1px solid var(--line); color:var(--soft); font-size:14px; }
.row.stacked{ flex-direction:column; align-items:stretch; gap:8px; }
.row input[type=number]{ width:84px; background:var(--navy); border:1px solid var(--line2);
  color:#fff; border-radius:9px; padding:9px; font-size:15px; text-align:center; }
.ghostbtn{ background:var(--navy); border:1px solid var(--line2); color:var(--cream);
  border-radius:11px; padding:12px; font-size:14px; cursor:pointer; }
.ghostbtn:active{ background:var(--navy3); }
.ghostbtn.danger{ color:#f0997b; border-color:#5a2e22; margin-top:14px; width:100%; }
.hint{ font-size:12px; color:var(--mut); }
.switch{ width:46px; height:28px; border-radius:16px; background:#0a1925; border:1px solid var(--line2);
  position:relative; cursor:pointer; padding:0; }
.switch .knob{ position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%;
  background:var(--mut); transition:left .18s ease, background .18s; }
.switch[aria-checked=true]{ background:#3a2e12; border-color:var(--gold); }
.switch[aria-checked=true] .knob{ left:21px; background:var(--gold); }
.mantra{ text-align:center; color:var(--gold); font-size:11px; letter-spacing:.03em; margin-top:18px; }

.toast{ position:fixed; left:50%; bottom:96px; transform:translateX(-50%);
  background:#1a3145; border:1px solid var(--gold); color:var(--cream); font-size:13px;
  padding:10px 16px; border-radius:22px; z-index:30; box-shadow:0 6px 20px rgba(0,0,0,.4);
  opacity:0; transition:opacity .25s, transform .25s; pointer-events:none; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(-4px); }

@keyframes pop{ 0%{transform:scale(1)} 40%{transform:scale(1.06)} 100%{transform:scale(1)} }
.goalcard.celebrate{ animation:pop .5s ease; }
@media (min-width:481px){ .sheet{ align-items:center; } .sheetcard{ border-radius:20px; } }