/* ============================================================
   ASCENT — personal daily growth companion
   Design: sunrise over a night sky. Indigo base, amber→coral
   sunrise accent (the signature), mint for completion.
   ============================================================ */

:root {
  --bg: #11122B;
  --bg-top: #191B3D;
  --surface: #1C1F40;
  --surface-2: #23274C;
  --surface-hi: #2C3162;
  --border: #343A6E;
  --border-soft: #2A2F58;
  --text: #F2F3FF;
  --muted: #A6A9D6;
  --faint: #6F74A8;
  --sun-1: #FFC861;
  --sun-2: #FF7E6B;
  --mint: #46E0A8;
  --mint-soft: rgba(70, 224, 168, .14);
  --violet: #9486FF;
  --gold: #FFD27A;
  --danger: #FF6F8E;
  --train: linear-gradient(135deg, var(--sun-1), var(--sun-2));
  --shadow: 0 18px 40px -18px rgba(0, 0, 0, .65);
  --ring-track: #2A2F58;
  --radius: 18px;
  --radius-sm: 12px;
  --tap: rgba(255, 255, 255, .04);
}

[data-theme="light"] {
  --bg: #F1EFFB;
  --bg-top: #FBFAFF;
  --surface: #FFFFFF;
  --surface-2: #F5F3FD;
  --surface-hi: #ECE9F9;
  --border: #E3DEF4;
  --border-soft: #ECE8F8;
  --text: #1A1A33;
  --muted: #5C5C7E;
  --faint: #9A9AB8;
  --sun-1: #FFB23E;
  --sun-2: #F86048;
  --mint: #14B981;
  --mint-soft: rgba(20, 185, 129, .12);
  --violet: #6E5AE6;
  --gold: #D99A1E;
  --danger: #E6486A;
  --shadow: 0 18px 40px -22px rgba(40, 30, 90, .28);
  --ring-track: #E7E2F6;
  --tap: rgba(0, 0, 0, .03);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(900px 520px at 50% -8%, var(--bg-top), transparent 70%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  line-height: 1.45;
  min-height: 100dvh;
  overscroll-behavior-y: none;
}

h1, h2, h3, .display { font-family: "Sora", system-ui, sans-serif; letter-spacing: -.02em; }
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-feature-settings: "tnum"; }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select { font-family: inherit; }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; border-radius: 6px; }

/* ---------- App shell ---------- */
.app { max-width: 560px; margin: 0 auto; padding: 0 16px 120px; min-height: 100dvh; }

.tab { display: none; animation: rise .32s cubic-bezier(.2, .7, .2, 1); }
.tab.active { display: block; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Top header ---------- */
.topbar { display: flex; align-items: flex-end; justify-content: space-between; padding: 22px 2px 8px; gap: 12px; }
.greet-eyebrow { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.greet { font-size: 25px; font-weight: 700; line-height: 1.1; margin-top: 3px; }
.greet .name { background: var(--train); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.daytheme { font-size: 13px; color: var(--muted); margin-top: 5px; }
.daytheme b { color: var(--text); font-weight: 600; }
.streak-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); font-weight: 700; font-size: 14px; white-space: nowrap;
}
.streak-chip .flame { font-size: 15px; filter: saturate(1.2); }
.streak-chip.hot { border-color: transparent; background: linear-gradient(135deg, rgba(255, 200, 97, .22), rgba(255, 126, 107, .2)); }

/* ---------- Banner ---------- */
.banner {
  display: none; align-items: center; gap: 11px; padding: 13px 14px; border-radius: var(--radius-sm);
  margin: 12px 0 4px; font-size: 13.5px; font-weight: 600; border: 1px solid transparent;
}
.banner.show { display: flex; }
.banner.risk { background: rgba(255, 111, 142, .12); border-color: rgba(255, 111, 142, .4); color: var(--text); }
.banner.done { background: var(--mint-soft); border-color: rgba(70, 224, 168, .4); }
.banner .bicon { font-size: 18px; }

/* ---------- Sunrise ring (signature) ---------- */
.hero { display: flex; flex-direction: column; align-items: center; padding: 14px 0 6px; }
.ringwrap { position: relative; width: 230px; height: 230px; }
.ringwrap svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--ring-track); stroke-width: 14; }
.ring-prog { fill: none; stroke: url(#sun); stroke-width: 14; stroke-linecap: round; transition: stroke-dashoffset 1s cubic-bezier(.2, .8, .2, 1); }
.ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ring-sun {
  width: 60px; height: 60px; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #FFE6A8, var(--sun-1) 42%, var(--sun-2));
  box-shadow: 0 0 36px -2px rgba(255, 150, 90, .6); margin-bottom: 6px;
  transition: transform .9s cubic-bezier(.2, .8, .2, 1), opacity .6s, filter .6s;
}
.ring-pct { font-family: "Sora", sans-serif; font-size: 30px; font-weight: 800; line-height: 1; }
.ring-sub { font-size: 12.5px; color: var(--muted); margin-top: 4px; font-weight: 600; }
.ringwrap.complete .ring-sun { transform: translateY(-4px) scale(1.06); filter: saturate(1.15); }
.ringwrap.complete::after {
  content: ""; position: absolute; inset: -10px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 180, 90, .22), transparent 62%);
  animation: pulseGlow 2.6s ease-in-out infinite;
}
@keyframes pulseGlow { 0%, 100% { opacity: .5; transform: scale(.98); } 50% { opacity: 1; transform: scale(1.04); } }

/* ---------- Section heads ---------- */
.sec-head { display: flex; align-items: baseline; justify-content: space-between; margin: 26px 2px 12px; }
.sec-head h2 { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
.sec-head .meta { font-size: 13px; color: var(--muted); font-weight: 600; }

/* ---------- Quest cards ---------- */
.quests { display: flex; flex-direction: column; gap: 10px; }
.quest {
  display: flex; align-items: flex-start; gap: 13px; padding: 15px 15px 15px 14px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border-soft); position: relative; overflow: hidden;
  transition: transform .14s ease, border-color .2s, background .2s; text-align: left; width: 100%;
}
.quest::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--cat, var(--violet)); opacity: .9; }
.quest:active { transform: scale(.985); }
.quest .qicon { font-size: 22px; width: 30px; text-align: center; flex: none; margin-top: 1px; }
.quest .qbody { flex: 1; min-width: 0; }
.quest .qtitle { font-weight: 700; font-size: 15.5px; }
.quest .qdetail { font-size: 13px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.quest .qcat { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); font-weight: 700; margin-top: 7px; }
.check {
  flex: none; width: 28px; height: 28px; border-radius: 9px; border: 2px solid var(--border); margin-top: 2px;
  display: grid; place-items: center; transition: all .2s; background: var(--surface-2);
}
.check svg { width: 16px; height: 16px; opacity: 0; transform: scale(.4); transition: all .25s cubic-bezier(.2, 1.4, .5, 1); stroke: #0c1226; }
.quest.done { background: var(--surface-2); }
.quest.done .qtitle { color: var(--muted); }
.quest.done .qtitle .strike { text-decoration: line-through; text-decoration-color: var(--faint); }
.quest.done .check { background: var(--mint); border-color: var(--mint); }
.quest.done .check svg { opacity: 1; transform: scale(1); }

/* ---------- Habits ---------- */
.habits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.habit { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 13px; position: relative; }
.habit.full { border-color: rgba(70, 224, 168, .45); background: linear-gradient(180deg, var(--mint-soft), transparent); }
.habit .hhead { display: flex; align-items: center; gap: 8px; }
.habit .hicon { font-size: 17px; }
.habit .hlabel { font-weight: 700; font-size: 13.5px; }
.habit .hdetail { font-size: 11.5px; color: var(--faint); margin-top: 4px; line-height: 1.35; min-height: 16px; }
.habit .hval { font-family: "JetBrains Mono", monospace; font-size: 20px; font-weight: 700; margin-top: 8px; }
.habit .hval .unit { font-size: 12px; color: var(--muted); font-weight: 600; }
.habit .htarget { font-size: 11.5px; color: var(--faint); }
.hbar { height: 6px; border-radius: 999px; background: var(--surface-hi); margin-top: 9px; overflow: hidden; }
.hbar > span { display: block; height: 100%; border-radius: 999px; background: var(--train); transition: width .4s ease; }
.habit.full .hbar > span { background: var(--mint); }
.counter { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.counter button { width: 34px; height: 34px; border-radius: 10px; background: var(--surface-hi); border: 1px solid var(--border); font-size: 19px; font-weight: 700; display: grid; place-items: center; line-height: 1; }
.counter button:active { transform: scale(.92); }
.counter .cval { flex: 1; text-align: center; font-family: "JetBrains Mono", monospace; font-weight: 700; }
.stepin { width: 100%; margin-top: 9px; background: var(--surface-hi); border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; color: var(--text); font-family: "JetBrains Mono", monospace; font-size: 15px; font-weight: 700; }
.habit .hcheck { position: absolute; top: 12px; right: 12px; width: 24px; height: 24px; border-radius: 8px; border: 2px solid var(--border); display: grid; place-items: center; background: var(--surface-2); }
.habit.full .hcheck { background: var(--mint); border-color: var(--mint); }
.habit .hcheck svg { width: 13px; height: 13px; stroke: #0c1226; opacity: 0; transition: opacity .2s; }
.habit.full .hcheck svg { opacity: 1; }
.habit.checkable { cursor: pointer; }

/* ---------- Quote ---------- */
.quote { margin: 24px 2px 4px; padding: 16px 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border-soft); border-left: 4px solid var(--violet); }
.quote p { font-size: 15px; font-style: italic; line-height: 1.5; }
.quote span { display: block; font-size: 12px; color: var(--faint); margin-top: 6px; font-weight: 600; letter-spacing: .04em; }

/* ---------- Calendar ---------- */
.cal-nav { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 14px; }
.cal-nav h2 { font-size: 20px; font-weight: 700; }
.cal-nav button { width: 42px; height: 42px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); font-size: 20px; display: grid; place-items: center; }
.cal-nav button:disabled { opacity: .3; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dow { text-align: center; font-size: 11px; font-weight: 700; color: var(--faint); padding: 4px 0; }
.cal-cell { aspect-ratio: 1; border-radius: 12px; background: var(--surface); border: 1px solid var(--border-soft); display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; font-size: 14px; font-weight: 700; color: var(--muted); transition: transform .12s; }
.cal-cell:active { transform: scale(.94); }
.cal-cell.out { background: transparent; border-color: transparent; color: transparent; pointer-events: none; }
.cal-cell.off { opacity: .32; }
.cal-cell.future { color: var(--faint); }
.cal-cell.today { border-color: var(--sun-1); box-shadow: 0 0 0 1px var(--sun-1); }
.cal-cell .dot { width: 6px; height: 6px; border-radius: 50%; margin-top: 4px; background: transparent; }
.cal-cell.p-low { background: rgba(255, 200, 97, .12); }
.cal-cell.p-mid { background: rgba(255, 200, 97, .26); color: var(--text); }
.cal-cell.p-full { background: linear-gradient(135deg, rgba(255, 200, 97, .9), rgba(255, 126, 107, .9)); color: #2a1500; border-color: transparent; }
.cal-cell.p-full .num { color: #2a1500; }
.cal-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 16px; font-size: 12px; color: var(--muted); }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend i { width: 13px; height: 13px; border-radius: 4px; display: inline-block; }

/* day detail */
.daydetail { margin-top: 18px; padding: 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border-soft); }
.daydetail h3 { font-size: 16px; margin-bottom: 4px; }
.daydetail .dd-sub { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.dd-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border-soft); font-size: 14px; }
.dd-item:first-of-type { border-top: none; }
.dd-item .ddmark { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; flex: none; font-size: 12px; }
.dd-item .ddmark.y { background: var(--mint); color: #08251a; }
.dd-item .ddmark.n { background: var(--surface-hi); color: var(--faint); }
.dd-item .ddtxt { flex: 1; }
.dd-item.miss .ddtxt { color: var(--muted); }

/* ---------- Badges ---------- */
.badge-summary { display: flex; align-items: center; gap: 14px; margin: 16px 0 6px; padding: 16px 18px; border-radius: var(--radius); background: linear-gradient(135deg, rgba(148, 134, 255, .16), rgba(255, 126, 107, .12)); border: 1px solid var(--border); }
.badge-summary .bignum { font-family: "Sora", sans-serif; font-size: 38px; font-weight: 800; line-height: 1; }
.badge-summary .bs-txt { font-size: 13px; color: var(--muted); }
.badge-summary .bs-txt b { color: var(--text); display: block; font-size: 15px; font-family: "Sora", sans-serif; margin-bottom: 2px; }
.badge-group-title { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); font-weight: 700; margin: 24px 2px 12px; }
.badge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.badge { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 14px 8px; text-align: center; position: relative; transition: transform .12s; }
.badge:active { transform: scale(.95); }
.badge .bemoji { font-size: 30px; line-height: 1; filter: grayscale(1) brightness(.65); opacity: .5; transition: all .3s; }
.badge.un .bemoji { filter: none; opacity: 1; }
.badge .bname { font-size: 11.5px; font-weight: 700; margin-top: 8px; line-height: 1.25; }
.badge.locked .bname { color: var(--faint); }
.badge .bprog { font-size: 10px; color: var(--faint); margin-top: 4px; font-family: "JetBrains Mono", monospace; }
.badge.un { border-color: rgba(255, 210, 122, .4); background: linear-gradient(180deg, rgba(255, 210, 122, .1), var(--surface)); }
.badge.un::after { content: "✓"; position: absolute; top: 7px; right: 8px; font-size: 10px; color: var(--gold); font-weight: 800; }

/* ---------- Journey / stats ---------- */
.j-progress { margin: 16px 0; padding: 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border-soft); }
.j-progress .jp-top { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin-bottom: 10px; font-weight: 600; }
.j-track { height: 12px; border-radius: 999px; background: var(--surface-hi); position: relative; overflow: hidden; }
.j-track .elapsed { position: absolute; inset: 0; width: 0; background: linear-gradient(90deg, rgba(148, 134, 255, .35), rgba(148, 134, 255, .15)); }
.j-track .filled { position: absolute; inset: 0; width: 0; background: var(--train); border-radius: 999px; transition: width .8s ease; }
.j-progress .jp-bottom { display: flex; justify-content: space-between; font-size: 11px; color: var(--faint); margin-top: 8px; font-family: "JetBrains Mono", monospace; }
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 4px; }
.stat { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 15px; }
.stat .snum { font-family: "Sora", sans-serif; font-size: 27px; font-weight: 800; line-height: 1; }
.stat .slabel { font-size: 12px; color: var(--muted); margin-top: 5px; font-weight: 600; }
.stat .sicon { font-size: 15px; margin-bottom: 8px; opacity: .85; }
.totals-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.tcard { display: flex; align-items: center; gap: 11px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 12px 13px; }
.tcard .te { font-size: 20px; }
.tcard .tn { font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 17px; }
.tcard .tl { font-size: 11.5px; color: var(--muted); }
.weekbars { display: flex; align-items: flex-end; gap: 6px; height: 90px; margin-top: 6px; padding: 0 2px; }
.weekbars .wb { flex: 1; background: var(--surface-hi); border-radius: 6px 6px 3px 3px; position: relative; min-height: 4px; transition: height .5s; }
.weekbars .wb > span { position: absolute; inset: 0; top: auto; background: var(--train); border-radius: 6px 6px 3px 3px; transition: height .6s ease; }
.weekbars .wb.now { outline: 2px solid var(--sun-1); outline-offset: 1px; }
.weekbars-x { display: flex; gap: 6px; margin-top: 6px; }
.weekbars-x span { flex: 1; text-align: center; font-size: 9px; color: var(--faint); font-family: "JetBrains Mono", monospace; }
.plan-table { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 13px; }
.plan-table th { text-align: left; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); padding: 8px 6px; font-weight: 700; }
.plan-table td { padding: 9px 6px; border-top: 1px solid var(--border-soft); color: var(--muted); }
.plan-table td.wk { color: var(--text); font-weight: 700; font-family: "JetBrains Mono", monospace; }
.plan-table tr.now td { color: var(--text); }
.plan-table tr.now td.wk { color: var(--sun-1); }
.bookcard { margin-top: 4px; padding: 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border-soft); }
.bookcard .bt { font-weight: 700; font-size: 15px; }
.bookcard .bmeta { font-size: 12.5px; color: var(--muted); margin: 4px 0 10px; }

/* ---------- Settings ---------- */
.field { margin-bottom: 18px; }
.field > label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 7px; }
.field .hint { font-size: 12px; color: var(--faint); margin-top: 6px; line-height: 1.4; }
.field input[type=text], .field input[type=number], .field input[type=time], .field select {
  width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 13px; color: var(--text); font-size: 15px;
}
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.settings-card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 18px; margin-bottom: 14px; }
.settings-card > h3 { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 16px; font-weight: 700; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-top: 1px solid var(--border-soft); }
.toggle-row:first-of-type { border-top: none; }
.toggle-row .tl-name { font-size: 14px; font-weight: 600; }
.toggle-row .tl-sub { font-size: 11.5px; color: var(--faint); }
.switch { width: 46px; height: 28px; border-radius: 999px; background: var(--surface-hi); border: 1px solid var(--border); position: relative; flex: none; transition: background .2s; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--faint); transition: all .2s; }
.switch.on { background: var(--mint); border-color: var(--mint); }
.switch.on::after { left: 20px; background: #fff; }
.theme-seg { display: flex; gap: 6px; background: var(--surface-hi); border-radius: 12px; padding: 4px; }
.theme-seg button { flex: 1; padding: 9px; border-radius: 9px; font-size: 13px; font-weight: 700; color: var(--muted); }
.theme-seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }

.btn { display: block; width: 100%; padding: 14px; border-radius: var(--radius-sm); font-size: 15px; font-weight: 700; text-align: center; transition: transform .1s, opacity .2s; }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--train); color: #2a1500; }
.btn-ghost { background: var(--surface); border: 1px solid var(--border); }
.btn-danger { background: rgba(255, 111, 142, .14); border: 1px solid rgba(255, 111, 142, .4); color: var(--danger); }
.btn-row { display: flex; gap: 10px; }
.btn-row .btn { flex: 1; }
.perm-state { font-size: 12px; color: var(--muted); margin-top: 8px; }
.about { font-size: 12px; color: var(--faint); line-height: 1.6; text-align: center; padding: 18px 8px 0; }

/* ---------- Bottom nav ---------- */
.nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  display: flex; justify-content: center; gap: 4px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--border-soft);
}
.nav-inner { display: flex; width: 100%; max-width: 560px; justify-content: space-between; }
.nav button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; color: var(--faint); font-size: 10px; font-weight: 700; border-radius: 12px; }
.nav button .ni { font-size: 21px; transition: transform .2s; }
.nav button.on { color: var(--text); }
.nav button.on .ni { transform: translateY(-1px) scale(1.08); }
.nav button.on .ni svg { stroke: url(#navgrad); }

/* ---------- Modal / onboarding ---------- */
.overlay { position: fixed; inset: 0; z-index: 60; background: rgba(8, 8, 22, .72); backdrop-filter: blur(6px); display: none; align-items: flex-end; justify-content: center; }
.overlay.show { display: flex; animation: fade .2s; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.sheet { width: 100%; max-width: 560px; max-height: 92dvh; overflow-y: auto; background: var(--bg); border-radius: 24px 24px 0 0; border: 1px solid var(--border); border-bottom: none; padding: 8px 20px calc(28px + env(safe-area-inset-bottom)); animation: slideup .34s cubic-bezier(.2, .8, .2, 1); }
@keyframes slideup { from { transform: translateY(100%); } to { transform: none; } }
.grab { width: 40px; height: 4px; border-radius: 999px; background: var(--border); margin: 8px auto 16px; }
.sheet h2 { font-size: 24px; margin-bottom: 6px; }
.sheet .sub { color: var(--muted); font-size: 14px; margin-bottom: 22px; line-height: 1.5; }
.sheet .logo-mark { font-size: 40px; text-align: center; margin: 6px 0 14px; }

/* ---------- Toast / celebration ---------- */
.toast-wrap { position: fixed; left: 0; right: 0; bottom: 92px; z-index: 70; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding: 0 16px; }
.toast {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 16px;
  box-shadow: var(--shadow); display: flex; align-items: center; gap: 11px; max-width: 420px; width: 100%;
  animation: toastin .4s cubic-bezier(.2, 1.3, .4, 1), toastout .4s ease 3.4s forwards;
}
.toast.badge-toast { border-color: rgba(255, 210, 122, .5); background: linear-gradient(135deg, rgba(255, 210, 122, .16), var(--surface)); }
.toast .te { font-size: 26px; }
.toast .tt { font-size: 14px; font-weight: 700; }
.toast .ts { font-size: 12px; color: var(--muted); }
@keyframes toastin { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toastout { to { transform: translateY(20px); opacity: 0; } }

/* confetti */
.confetti { position: fixed; inset: 0; z-index: 65; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); opacity: .9; } }

/* ---------- end screen ---------- */
.endscreen { text-align: center; padding: 40px 10px; }
.endscreen .big { font-size: 64px; }
.endscreen h2 { font-size: 26px; margin: 10px 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media (min-width: 600px) {
  .greet { font-size: 28px; }
  .habits { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   BODY TAB — biometrics, energy balance, food log
   ============================================================ */

/* nav now holds 6 items — tighten a touch so labels stay clean */
.nav button { font-size: 9.5px; padding: 6px 1px; }
.nav button .ni { font-size: 19px; }

/* buttons */
.btn-sun { background: var(--train); color: #2a1500; }
.btn-block { width: 100%; margin-top: 4px; }
.food-actions .btn, .wc-input .btn { display: inline-flex; align-items: center; justify-content: center; width: auto; padding: 11px 16px; font-size: 14px; }

/* password + textarea share the field look */
.field input[type=password] { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 13px; color: var(--text); font-size: 15px; }

/* unit toggle in topbar */
.unit-seg { display: flex; gap: 4px; background: var(--surface-hi); border-radius: 11px; padding: 3px; }
.unit-seg button { padding: 7px 12px; border-radius: 8px; font-size: 13px; font-weight: 700; color: var(--muted); }
.unit-seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }

/* weight card */
.weight-card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 18px; margin-bottom: 14px; box-shadow: var(--shadow); }
.wc-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.wc-label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); font-weight: 700; margin-bottom: 4px; }
.wc-val { display: flex; align-items: baseline; gap: 6px; }
.wc-val .mono { font-size: 38px; font-weight: 700; line-height: 1; }
.wc-unit { font-size: 16px; color: var(--muted); font-weight: 600; }
.wc-input { display: flex; gap: 8px; align-items: center; }
.wc-input input { width: 96px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 12px; color: var(--text); font-size: 16px; text-align: center; font-family: "JetBrains Mono", ui-monospace, monospace; }
.wc-deltas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.wc-deltas > div { display: flex; flex-direction: column; gap: 3px; }
.wd-l { font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.wc-deltas .mono { font-size: 15px; font-weight: 700; }
.wdelta { font-size: 15px; font-weight: 700; font-family: "JetBrains Mono", ui-monospace, monospace; color: var(--muted); }
.wdelta.down { color: var(--mint); }
.wdelta.up { color: var(--sun-2); }

/* weight sparkline */
.spark { margin-top: 16px; position: relative; }
.spark svg { width: 100%; height: 70px; display: block; overflow: visible; }
.spark-line { fill: none; stroke: url(#sun); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.spark-area { fill: rgba(255, 160, 90, .12); stroke: none; }
.spark-dot { fill: var(--sun-2); stroke: var(--bg); stroke-width: 2; }
.spark-ax { display: flex; justify-content: space-between; flex-direction: column; position: absolute; right: 0; top: 0; height: 70px; font-size: 10px; color: var(--faint); font-family: "JetBrains Mono", ui-monospace, monospace; pointer-events: none; }
.spark-empty, .food-empty, .bal-note { font-size: 12.5px; color: var(--faint); line-height: 1.5; }
.spark-empty { margin-top: 14px; }

/* energy balance */
.balance { border-radius: var(--radius); padding: 18px; margin-bottom: 14px; border: 1px solid var(--border-soft); background: var(--surface); box-shadow: var(--shadow); }
.balance.deficit { border-color: color-mix(in srgb, var(--mint) 45%, var(--border-soft)); }
.balance.surplus { border-color: color-mix(in srgb, var(--sun-2) 45%, var(--border-soft)); }
.bal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.bal-eyebrow { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); font-weight: 700; margin-bottom: 5px; }
.bal-big { font-size: 22px; font-weight: 700; }
.bal-big b { font-family: "JetBrains Mono", ui-monospace, monospace; }
.balance.deficit .bal-big b { color: var(--mint); }
.balance.surplus .bal-big b { color: var(--sun-2); }
.bal-emoji { font-size: 24px; }
.bal-track { position: relative; height: 12px; border-radius: 999px; background: var(--surface-hi); margin: 16px 0 10px; overflow: hidden; }
.bal-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, var(--mint), color-mix(in srgb, var(--mint) 60%, var(--sun-1))); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.bal-fill.over { background: linear-gradient(90deg, var(--sun-1), var(--sun-2)); }
.bal-target { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text); opacity: .55; z-index: 2; }
.bal-legend { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.bal-legend b { color: var(--text); }
.bal-note { margin-top: 8px; }

/* bio setup prompt */
.bio-setup { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; }
.bs-emoji { font-size: 28px; }
.bs-txt { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.bs-txt b { font-size: 15px; }
.bs-txt span { font-size: 12.5px; color: var(--faint); line-height: 1.4; }
.bio-setup .btn { width: auto; padding: 10px 16px; font-size: 14px; }

/* food log */
.food-card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; box-shadow: var(--shadow); }
.food-text { width: 100%; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 13px; color: var(--text); font-size: 15px; font-family: inherit; line-height: 1.5; resize: vertical; }
.food-text::placeholder { color: var(--faint); }
.food-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.food-hint { font-size: 12px; color: var(--faint); margin-top: 10px; line-height: 1.4; }
.food-items { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.fitem { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 10px 12px; }
.fitem.unknown { border-color: color-mix(in srgb, var(--gold) 55%, var(--border-soft)); }
.fi-main { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.fi-name { font-size: 14px; font-weight: 600; }
.fi-qty { font-size: 12px; color: var(--faint); font-family: "JetBrains Mono", ui-monospace, monospace; }
.fi-q { font-size: 11px; font-weight: 800; color: var(--gold); border: 1px solid var(--gold); border-radius: 6px; padding: 0 5px; }
.fi-edit { display: flex; align-items: center; gap: 6px; flex: none; }
.fi-field { display: flex; flex-direction: column; align-items: center; }
.fi-field input { width: 56px; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 7px 4px; color: var(--text); font-size: 14px; text-align: center; font-family: "JetBrains Mono", ui-monospace, monospace; }
.fi-field span { font-size: 9px; color: var(--faint); margin-top: 2px; text-transform: uppercase; letter-spacing: .04em; }
.fi-del { width: 28px; height: 28px; border-radius: 8px; background: var(--surface-hi); color: var(--faint); font-size: 12px; font-weight: 700; flex: none; }
.fi-del:active { background: var(--danger); color: #fff; }
.food-total { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.food-total > div { display: flex; flex-direction: column; gap: 3px; }
.ft-l { font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.ft-v { font-size: 19px; font-weight: 700; }
.ft-src { font-size: 13px; color: var(--muted); font-weight: 600; }
.food-empty { margin-top: 14px; }

/* sheet extras (bio + paste) */
.sheet-close { position: absolute; top: 14px; right: 16px; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-hi); color: var(--muted); font-size: 13px; font-weight: 700; }
.sheet { position: relative; }
.sheet-title { font-size: 22px; margin-bottom: 6px; }
.sheet-sub { color: var(--muted); font-size: 13.5px; margin-bottom: 18px; line-height: 1.5; }
.seg2, .seg3 { display: flex; gap: 6px; background: var(--surface-hi); border-radius: 12px; padding: 4px; margin-bottom: 16px; }
.seg2 button, .seg3 button { flex: 1; padding: 10px 8px; border-radius: 9px; font-size: 13px; font-weight: 700; color: var(--muted); }
.seg2 button.on, .seg3 button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.sel { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 13px; color: var(--text); font-size: 15px; }