/* Tally — Grit replica layer. Measurements from grit/FEATURES.md, in CSS px
   (= iOS points). Light theme with the custom gradient background by
   default; dark theme via [data-theme=dark]. */
:root {
  --accent: #ef4a5e;
  --bg-start: #a2cbf8; --bg-mid: #d4d4e2; --bg-end: #efcdae;
  --sys-bg: #f0eff6; --card: #ffffff; --card-2: #e9e9ec; --glass: rgba(255,255,255,.55); --glass-2: rgba(255,255,255,.72);
  --ink: #000; --ink-2: #3c3c43; --ink-3: rgba(60,60,67,.6); --ink-4: rgba(60,60,67,.3); --sep: rgba(60,60,67,.18);
  --green: #34c759; --orange: #ff9500; --red: #ff3b30; --blue: #007aff; --purple: #5e5ce6; --pink: #ff2d55;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", system-ui, sans-serif;
  --card-r: 22px; --card-w: calc(100% - 32px);
}
:root[data-theme="dark"] {
  --sys-bg: #000; --card: #1c1c1e; --card-2: #2c2c2e; --glass: rgba(28,28,30,.72); --glass-2: rgba(44,44,46,.8);
  --ink: #fff; --ink-2: #ebebf5; --ink-3: rgba(235,235,245,.6); --ink-4: rgba(235,235,245,.3); --sep: rgba(84,84,88,.6);
}
* { box-sizing: border-box; }
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; overscroll-behavior: none; }
html, body { margin: 0; overscroll-behavior: none; }
html { background: var(--sys-bg); }
html.custom-bg { background: linear-gradient(180deg, var(--bg-start) 0%, var(--bg-mid) 50%, var(--bg-end) 100%) fixed; }
body { min-height: 100dvh; background: var(--sys-bg); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
body.custom-bg { background: linear-gradient(180deg, var(--bg-start) 0%, var(--bg-mid) 50%, var(--bg-end) 100%) fixed; }
button, [role="button"], .tab, .day, .card, .chip, .grab, .seg, .wk-cell { touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; transition: transform 120ms var(--ease-out), opacity 120ms var(--ease-out); }
button:active { opacity: .75; }
.circ:active, .btn:active, .pillbtn:active { opacity: 1; transform: scale(.96); }
input, select, textarea { font: inherit; color: inherit; }
input, textarea, select { font-size: 16px; }
.ic { display: inline-block; vertical-align: middle; flex: none; }
.emoji { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; line-height: 1; }
[hidden] { display: none !important; }

/* ---- glass ---- */
.glass { background: var(--glass); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.55), 0 1px 3px rgba(0,0,0,.06); }
:root[data-theme="dark"] .glass { box-shadow: inset 0 0 0 .5px rgba(255,255,255,.08), 0 1px 3px rgba(0,0,0,.3); }
.circ { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); }
.circ.tint { background: var(--accent); color: #fff; box-shadow: none; }

/* ---- app shell ---- */
/* screens are layers; each scrolls on its own so the document never bounces.
   push: the new layer slides in from the right over the old one, which
   drifts left; pop is the reverse. Tab switches crossfade. */
.app { position: fixed; inset: 0; overflow: hidden; }
.layer { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: calc(110px + var(--sab)); background: transparent; transition: transform 380ms var(--ease-drawer), opacity 380ms var(--ease-drawer); will-change: transform; }
.layer.top { z-index: 2; }
.layer.from-right { transform: translateX(100%); box-shadow: -8px 0 24px rgba(0,0,0,.12); }
.layer.to-left { transform: translateX(-28%); }
.layer.from-bottom, .layer.to-bottom { transform: translateY(100%); }
.sheet.paned { overflow: hidden; height: calc(100dvh - var(--sat) - 8px); padding-bottom: 0; }
.spanes { position: absolute; inset: 0; }
.spane { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(var(--sab) + 12px); transition: transform 380ms var(--ease-drawer); background: inherit; }
.spane + .spane { background: var(--sys-bg); }
.spane.from-right { transform: translateX(100%); box-shadow: -8px 0 24px rgba(0,0,0,.12); }
.spane.under { transform: translateX(-28%); }
.spane.under::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.12); pointer-events: none; z-index: 60; }
.spane .page-t { background: var(--glass-2); }
.spane > .pg { padding-bottom: 20px; }
.layer.fade-in, .layer.fade-out { transition: opacity 160ms ease; }
.layer.fade-in { opacity: 0; } .layer.fade-out { opacity: 0; }
.layer:not(.today) { background: var(--sys-bg); }
.layer.under { transform: translateX(-28%); }
.layer.under::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 400vh; background: rgba(0,0,0,.12); z-index: 60; pointer-events: none; }
.topblock { position: sticky; top: 0; z-index: 5; }
.hdr { position: absolute; top: 0; left: 0; right: 0; z-index: 40; padding: var(--sat) 20px 0; height: calc(var(--sat) + 44px); display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.hdr > * { pointer-events: auto; }
.hdr__t { position: absolute; left: 0; right: 0; text-align: center; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; pointer-events: none; transition: opacity 120ms ease; }
.hdr__t.swap { opacity: 0; }
.hdr__flame { display: inline-flex; align-items: center; gap: 2px; color: var(--orange); font-size: 15px; vertical-align: 1px; }
.hdr__pill { display: flex; height: 44px; border-radius: 22px; padding: 0 6px; }
.hdr__pill button { width: 44px; height: 44px; display: grid; place-items: center; color: var(--ink); }
.hdr__r { display: flex; gap: 10px; }
.page-t { position: sticky; top: 0; z-index: 40; height: calc(var(--sat) + 44px); padding-top: var(--sat); display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 600; pointer-events: none; background: color-mix(in srgb, var(--sys-bg) 78%, transparent); }
.layer.today .page-t { background: var(--glass); }
.page-t .l, .page-t .r { position: absolute; top: calc(var(--sat) + 4px); pointer-events: auto; width: 36px; height: 36px; }
.page-t .l { left: 26px; } .page-t .r { right: 26px; }
.page-t .l.circ, .page-t .r.circ { background: var(--card); box-shadow: 0 1px 3px rgba(0,0,0,.08), inset 0 0 0 .5px rgba(0,0,0,.04); }
:root[data-theme="dark"] .page-t .l.circ, :root[data-theme="dark"] .page-t .r.circ { background: #2c2c2e; }
.page-t .r.txt { top: calc(var(--sat) + 12px); font-size: 17px; font-weight: 600; color: var(--accent); }
.page-t .range { top: calc(var(--sat) + 5px); width: auto; height: 34px; white-space: nowrap; }

/* ---- week strip ---- at rest the names sit under the header and the
   selected day is a tall capsule; scrolling lifts the strip by 43px so the
   names tuck under the glass header (see collapseStrip in app.js) */
.week { display: flex; padding: calc(var(--sat) + 56px) 0 0; height: calc(var(--sat) + 136px); }
.day { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 76px; }
.day::before { content: ''; position: absolute; left: 50%; top: 0; width: 58px; height: 76px; margin-left: -29px; border-radius: 29px; background: var(--accent); opacity: 0; transform: scale(.92); transition: opacity 250ms ease, transform 250ms var(--ease-out); }
.day.is-sel::before { opacity: 1; transform: none; }
.day__n { position: relative; font-size: 15px; color: var(--ink-3); transition: color 200ms ease; }
.day__r { position: relative; width: 44px; height: 44px; display: grid; place-items: center; font-size: 17px; font-weight: 400; color: var(--ink-2); border-radius: 50%; transition: color 200ms ease; }
.day__r i { position: absolute; inset: 0; border-radius: 50%; background: var(--accent); opacity: 0; transform: scale(.4); transition: transform 250ms var(--ease-out), opacity 250ms ease; }
.day__r span { position: relative; }
.day.has-p .day__r i { opacity: .28; transform: scale(calc(.55 + .45 * var(--p, 0))); }
.day.is-today .day__r { font-weight: 700; }
.day.is-sel .day__n, .day.is-sel .day__r { color: #fff; font-weight: 700; }
.day.is-sel .day__r i { opacity: 0; }
.day.is-sel .day__r svg { position: absolute; inset: 1px; width: 42px; height: 42px; }
.day.is-sel .day__r svg .t { stroke: rgba(255,255,255,.3); } .day.is-sel .day__r svg .p { stroke: #fff; stroke-linecap: round; transition: stroke-dashoffset 400ms var(--ease-out); }
.day.is-future .day__r, .day.is-future .day__n { color: var(--ink-4); }
.day.is-sel.is-future .day__r, .day.is-sel.is-future .day__n { color: #fff; }
.week-wrap { position: relative; z-index: 39; height: calc(var(--sat) + 136px); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; display: flex; will-change: transform; -webkit-mask-image: linear-gradient(#000 calc(100% - 3px), transparent); mask-image: linear-gradient(#000 calc(100% - 3px), transparent); background: color-mix(in srgb, var(--strip-bg, var(--bg-start)) 70%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.week-wrap::-webkit-scrollbar { display: none; }
.week-wrap .week { flex: 0 0 100%; scroll-snap-align: start; }
.topblock { height: calc(var(--sat) + 136px); }

/* ---- habit cards ---- */
.list { padding: 10px 16px 0; display: flex; flex-direction: column; gap: 10px; }
.card { position: relative; width: 100%; border-radius: var(--card-r); overflow: hidden; color: var(--ink); --c: #34c759; transition: background-color 250ms ease, color 250ms ease, box-shadow 250ms ease; background: color-mix(in srgb, var(--c) 34%, var(--glass)); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.4); }
.card.is-done { background: var(--c); color: #fff; box-shadow: none; }
.card.is-timer:not(.is-done)::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); z-index: 2; }
.card__fill { position: absolute; inset: 0; background: var(--c); transform-origin: left center; transform: scaleX(0); transition: transform 380ms var(--ease-out); z-index: 0; }
.card__head, .card__body, .card__badge { z-index: 1; } .card__head, .card__body { position: relative; }
.card.on-fill { color: #fff; }
.card.is-partial .card__act { color: var(--c); } .card.on-fill .card__act { color: #fff; }
.card.is-partial .heat__g i { background: rgba(255,255,255,.35); } .card.is-partial .heat__g i.d { background: #fff; }
.card.is-run { background: color-mix(in srgb, var(--c) 34%, var(--glass)); }
:root[data-theme="dark"] .card { background: color-mix(in srgb, var(--c) 14%, #1c1c1e); box-shadow: none; }
:root[data-theme="dark"] .card.is-done { background: var(--c); }
.card__badge { position: absolute; top: 9px; left: 12px; display: flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; }
.card__badge.neg { color: #ff3b30; }
.ic.fill { fill: currentColor; }
.namefield { width: 100%; border: 0; background: transparent; padding: 0; margin: 0; font: inherit; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: inherit; outline: none; }
.namefield::placeholder { color: inherit; opacity: .45; }
.card__pen { color: inherit; opacity: .8; margin-right: 4px; }
.card.is-done .card__badge.neg { color: #fff; }
.card__head { display: flex; align-items: center; height: 66px; padding: 6px 16px 0 20px; gap: 12px; }
.card__ico { width: 30px; height: 30px; display: grid; place-items: center; font-size: 24px; flex: none; }
.card__ico .ic { width: 28px; height: 28px; }
.card__txt { flex: 1; min-width: 0; }
.card__name { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card__sub { font-size: 13px; line-height: 1.2; margin-top: 1px; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card__act { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; position: relative; flex: none; color: var(--ink); transition: background-color 250ms ease, color 250ms ease; }
.card__act.pop > .ic { animation: pop 260ms var(--ease-out) both; }
@keyframes pop { from { transform: scale(.5); opacity: 0; } }
.card.flip { transition: transform 320ms var(--ease-in-out), background-color 250ms ease, color 250ms ease; }
.card.appear { animation: fadeUp 300ms var(--ease-out) both; }
.card__badge { animation: fadeUp 250ms var(--ease-out) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } }
.list.enter .card { animation: fadeUp 300ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); }
.card__act::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2.5px solid color-mix(in srgb, var(--c) 45%, #fff); }
.card.is-done .card__act { background: #fff; color: var(--c); } .card.is-done .card__act::before { display: none; }
.card__act > svg.ring { position: absolute; inset: -2px; width: 48px; height: 48px; } .card__act .ring .t { stroke: transparent; } .card__act .ring .p { stroke: #fff; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.card.is-run .card__act::before { border-color: rgba(255,255,255,.35); }
.card__body { display: block; width: 100%; }
/* heat grid: one column per week, seven rows */
.heat { position: relative; margin: 0 14px; height: 92px; }
.heat__g { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 7.6px); grid-auto-columns: 7.6px; gap: 1.6px; }
.heat__g i { border-radius: 1.6px; background: color-mix(in srgb, var(--c) 42%, transparent); transition: background-color 250ms ease; }
.card.is-done .heat__g i { background: rgba(255,255,255,.16); }
.card .heat__g i.d, .card.is-done .heat__g i.d { background: #fff; }
.heat__g i.n { background: transparent; }
.heat__m { position: absolute; top: 70px; font-size: 12px; opacity: .95; }
/* bars view: last 8 days */
.bars { display: flex; gap: 6px; margin: 0 14px; height: 92px; padding-top: 4px; }
.bars > div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bars b { width: 100%; flex: 1; border-radius: 4px; background: color-mix(in srgb, var(--c) 30%, transparent); position: relative; overflow: hidden; }
.bars b i { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--p) * 1%); background: #fff; }
.card:not(.is-done) .bars b i { background: color-mix(in srgb, var(--c) 85%, #000); }
.bars span { font-size: 12px; }
/* line view */
.line { margin: 0 14px; height: 92px; position: relative; }
.line svg { width: 100%; height: 66px; display: block; overflow: visible; }
.line .lbl { display: flex; justify-content: space-between; font-size: 12px; padding: 4px 8px 0; }
.card.pv-off { height: 64px; } .card.pv-off .card__head { height: 64px; padding-top: 0; }
.pvwrap { margin-top: 18px; }
.card.grow { transition: height 380ms var(--ease-in-out); }
.heat__g.reveal i { animation: cellin 260ms var(--ease-out) both; animation-delay: calc(var(--c, 0) * 9ms); }
@keyframes cellin { from { opacity: 0; transform: scale(.4); } }
.bars.reveal > div b i { animation: barin 380ms var(--ease-out) both; transform-origin: bottom; } @keyframes barin { from { transform: scaleY(0); } }
.line.reveal svg path, .line.reveal svg circle { animation: fade 400ms ease both; }
.hdr__pill button .ic { width: 22px; height: 22px; }
.caption { text-align: center; font-size: 12px; color: var(--ink-4); padding: 14px 0 0; }
.empty { text-align: center; padding: 0 30px; color: var(--ink-3); font-size: 17px; line-height: 1.4; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100dvh - var(--sat) - 136px - 150px); }
.layer:not(.today) .empty { min-height: calc(100dvh - var(--sat) - 44px - 120px); font-size: 15px; }
.layer:not(.today) .empty b { font-size: 20px; }
.layer:not(.today) .empty .pillbtn { height: 44px; font-size: 17px; padding: 0 22px; }
.empty b { display: block; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin: 18px 0 6px; }
.empty .ico { color: var(--accent); }
.empty .ico .ic { width: 64px; height: 64px; stroke-width: 1.75; }
.empty .pillbtn { margin-top: 26px; height: 50px; padding: 0 26px; font-size: 20px; }
.tpl .row { min-height: 38px; padding: 4px 12px 4px 12px; font-size: 15px; } .tpl .row + .row::before { left: 44px; }
.tpl .grp { border-radius: 14px; }
.tpl h3 { margin: 16px 0 8px 6px; font-size: 13px; }
.tpl .seg { margin-bottom: 14px; }

/* ---- tab bar ---- */
.tabbar { position: fixed; left: 20px; bottom: max(24px, calc(var(--sab) - 10px)); z-index: 45; height: 56px; border-radius: 28px; display: flex; padding: 4px; overflow: hidden; }
.tab { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-radius: 24px; font-size: 12px; font-weight: 600; color: var(--ink); z-index: 1; }
.tab .ic { width: 24px; height: 24px; stroke-width: 2.4; }
.tab.on, .tabbar.lifted .tab.near { color: var(--accent); }
.tabbar.lifted .tab:not(.near) { color: var(--ink); }
.tab .ic, .tab span { transition: transform 200ms var(--ease-out), color 150ms ease; }
.tabbar.lifted .tab.on .ic, .tabbar.lifted .tab.near .ic { transform: scale(1.1); }
/* the lens: flat tinted pill at rest; a raised glass blob while touched */
.tabbar__glass { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 4); border-radius: 24px; background: color-mix(in srgb, var(--accent) 16%, transparent); transition: transform 380ms var(--ease-drawer), background-color 200ms ease, box-shadow 220ms var(--ease-out), scale 260ms cubic-bezier(0.34, 1.56, 0.64, 1); scale: 1; }
.tabbar__glass.lift { scale: 1.12 1.24; background: color-mix(in srgb, var(--accent) 6%, rgba(255,255,255,.42)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.75), inset 0 -6px 12px rgba(255,255,255,.35), inset 0 6px 10px rgba(0,0,0,.05), 0 8px 22px rgba(0,0,0,.14), 0 1px 2px rgba(0,0,0,.08); -webkit-backdrop-filter: blur(6px) saturate(180%); backdrop-filter: blur(6px) saturate(180%); }
:root[data-theme="dark"] .tabbar__glass.lift { background: color-mix(in srgb, var(--accent) 10%, rgba(255,255,255,.14)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), 0 8px 22px rgba(0,0,0,.4); }
.tabbar.dragging .tabbar__glass { transition: background-color 200ms ease, box-shadow 220ms var(--ease-out), scale 260ms cubic-bezier(0.34, 1.56, 0.64, 1); }

/* ---- now bar (running timers) ---- */
.nowbar { position: fixed; left: 16px; right: 16px; bottom: calc(max(24px, calc(var(--sab) - 10px)) + 64px); z-index: 44; border-radius: 18px; padding: 8px 10px 8px 14px; display: flex; flex-direction: column; gap: 6px; }
.now { display: flex; align-items: center; gap: 10px; }
.now .card__ico { width: 26px; height: 26px; font-size: 20px; }
.now__b { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.now__t { font-size: 15px; font-weight: 600; } .now__m { font-size: 12px; color: var(--ink-3); }
.now__time { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; }
.now__stop { width: 30px; height: 30px; border-radius: 50%; background: var(--c, var(--green)); color: #fff; display: grid; place-items: center; }

/* ---- sheets ---- */
.scrim { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.28); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.scrim.open { opacity: 1; pointer-events: auto; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; max-height: calc(100dvh - var(--sat) - 8px); overflow: auto; overscroll-behavior: contain; border-radius: 40px 40px 0 0; background: var(--glass-2); -webkit-backdrop-filter: blur(30px) saturate(160%); backdrop-filter: blur(30px) saturate(160%); color: var(--ink); padding: 0 0 calc(var(--sab) + 12px); transform: translateY(100%); transition: transform 500ms var(--ease-drawer); box-shadow: 0 -1px 0 rgba(255,255,255,.4); will-change: transform; }
.sheet.open { transform: translateY(0); }
.sheet.closing { transition-duration: 280ms; }
.sheet.dragging { transition: none; }
.scrim { transition: opacity 250ms ease; }
.sheet.tint { background: color-mix(in srgb, var(--c) 28%, var(--glass-2)); }
.sheet__hdr { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 0; height: 76px; }
.sheet__hdr .r { display: flex; gap: 8px; }
.sheet__title { text-align: center; font-size: 17px; font-weight: 600; flex: 1; }
/* habit detail */
.det { padding: 0 20px; text-align: center; }
.det__name { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; display: flex; justify-content: center; align-items: center; gap: 10px; }
.det__sub { font-size: 15px; color: var(--ink-3); margin-top: 4px; }
.det__ringrow { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 22px 0 18px; position: relative; }
.det__ring { position: relative; width: 200px; height: 200px; }
.det__ring svg { position: absolute; inset: 0; } .det__ring .t { stroke: rgba(255,255,255,.55); } .det__ring .p { stroke: var(--c); stroke-linecap: round; transition: stroke-dashoffset .4s var(--ease-out); }
.det__ring .knob { position: absolute; width: 22px; height: 22px; border-radius: 50%; background: var(--c); left: 50%; top: 5px; margin-left: -11px; transform-origin: 11px 95px; transition: transform .4s var(--ease-out); }
.det__val { position: absolute; inset: 0; display: grid; place-items: center; font-size: 96px; font-weight: 400; letter-spacing: -0.04em; }
.det__val.small { font-size: 56px; }
.det__pm { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; }
.det__pm.plus { background: color-mix(in srgb, var(--c) 45%, var(--glass)); color: var(--c); }
.det__pm.minus { background: var(--glass); color: var(--ink-3); }
.det__streak { position: absolute; right: 8px; top: 0; font-size: 26px; font-weight: 600; color: #ff3b30; display: flex; align-items: center; gap: 4px; }
.det__foot { display: flex; align-items: center; gap: 16px; padding: 10px 24px 8px; }
.det__foot .ghost { width: 44px; height: 44px; display: grid; place-items: center; color: var(--c); }
.btn { flex: 1; height: 50px; border-radius: 25px; background: var(--c, var(--accent)); color: #fff; font-size: 17px; font-weight: 600; text-align: center; }
.btn.accent { --c: var(--accent); }
.btn.ghost { background: var(--glass); color: var(--ink); }

/* ---- menus (popover) ---- */
.menu { position: fixed; z-index: 80; min-width: 180px; max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; border-radius: 14px; padding: 4px 0; font-size: 17px; transform-origin: top left; animation: menupop 220ms var(--ease-out); box-shadow: 0 10px 30px rgba(0,0,0,.14), 0 1px 2px rgba(0,0,0,.06); }
@keyframes menupop { from { opacity: 0; transform: scale(.8); } }
.menu .mi { display: flex; align-items: center; gap: 8px; width: 100%; padding: 0 14px 0 8px; height: 44px; font-size: 17px; color: var(--ink); }
.menu .mi + .mi { box-shadow: inset 0 .5px 0 var(--sep); }
.menu .mi .chk { width: 22px; color: var(--ink); display: grid; place-items: center; }
.menu .mi .ic:not(.chk .ic) { color: var(--ink); }
.dots { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; padding: 12px; }
.dotb { width: 26px; height: 26px; border-radius: 50%; background: var(--v); position: relative; }
.dotb.on::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--ink); }
.popv { position: fixed; z-index: 80; border-radius: 14px; animation: menupop 220ms var(--ease-out); box-shadow: 0 10px 30px rgba(0,0,0,.14); padding: 8px 10px; }
.wheels { position: relative; display: flex; gap: 2px; height: 160px; }
.wsel { position: absolute; left: 0; right: 0; top: 64px; height: 32px; border-radius: 8px; background: rgba(120,120,128,.14); }
.wcol { position: relative; height: 160px; overflow-y: auto; scroll-snap-type: y mandatory; scroll-padding-top: 64px; scrollbar-width: none; -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); }
.wcol::-webkit-scrollbar { display: none; }
.wcol i, .wcol b { display: block; height: 32px; }
.wcol b { scroll-snap-align: start; line-height: 32px; text-align: center; font-size: 19px; font-weight: 400; color: var(--ink-3); }
.wcol b.on { color: var(--ink); }
.menu button:not(.mi):not(.dotb), .menu .mrow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 16px; min-height: 44px; }
.menu .ic { color: var(--ink-2); }
.menu .mt { flex: 1; } .menu small { display: block; font-size: 12px; color: var(--ink-3); }
.menu hr { border: 0; border-top: 1px solid var(--sep); margin: 4px 0; }
.menu .danger { color: var(--red); }
.menu .chk { color: var(--ink); width: 20px; text-align: center; }

/* ---- grouped list pages (settings / add habit) ---- */
.pg { padding: 0 20px 0; }
.pg > .grp:first-child, .pg > .iconrow:first-child, .pg > .sortpg:first-child { margin-top: 28px; }
.sortpg > .grp:first-child { margin-top: 28px; }
.pg h3 { font-size: 15px; font-weight: 400; color: var(--ink-3); margin: 25px 0 13px 21px; display: flex; align-items: center; gap: 6px; }
.pg h3:first-child { margin-top: 25px; }
.pg h3 .crown { color: var(--orange); }
.pg h3.h3row { justify-content: space-between; margin-right: 8px; }
.link { color: var(--accent); font-size: 13px; }
.link.right { display: block; width: 100%; text-align: right; padding: 14px 8px; font-size: 12px; color: var(--red); }
.grp { background: var(--card); border-radius: 16px; overflow: hidden; }
.grp + .grp { margin-top: 24px; }
.grp__btn { padding: 14px 16px 16px; }
.sortpg .note { margin-bottom: 24px; }
.sortpg .grp { margin-top: 0; }
.grp--glass { background: var(--glass-2); }
.row { position: relative; display: flex; align-items: center; gap: 9px; width: 100%; min-height: 54px; padding: 8px 23px 8px 21px; font-size: 17px; color: var(--ink); }
.row + .row::before { content: ''; position: absolute; left: 51px; right: 0; top: 0; height: .5px; background: var(--sep); }
.gly { width: 21px; height: 21px; display: grid; place-items: center; flex: none; }
.gly .ic { width: 21px; height: 21px; stroke-width: 2.2; }
.gly.sq { width: 21px; height: 21px; border-radius: 5px; background: var(--red); color: #fff; font-size: 14px; font-weight: 700; }
.fill-ico { fill: currentColor; stroke: none; }
.row .chk { color: var(--accent); margin-left: auto; }
.row__ico { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; color: #fff; flex: none; font-size: 15px; }
.row__t { flex: 1; min-width: 0; } .row__t small { display: block; font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.row__t .warn { display: block; color: var(--orange); font-size: 13px; margin-top: 2px; line-height: 1.3; } .row__t .warn b { font-weight: 400; }
.row__v { color: var(--ink-3); font-size: 17px; display: flex; align-items: center; gap: 5px; }
.row .chev { color: var(--ink-4); margin-left: -2px; }
.vbtn { margin: -8px -6px -8px 0; padding: 8px 6px; }
.chipv { background: var(--card-2); border-radius: 8px; padding: 6px 10px; font-size: 17px; color: var(--ink); border: 0; font-family: inherit; }
.tswatch { width: 24px; height: 22px; border-radius: 4px; display: inline-block; }
.micon { width: 22px; height: 22px; border-radius: 6px; display: inline-block; background: #d9b83e; position: relative; }
.micon::after { content: ''; position: absolute; left: 22%; right: 22%; top: 24%; bottom: 24%; background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 5px); color: #3a4238; }
.micon.light { background: #f2f2f7; } .micon.light::after { color: #1f2420; }
.micon.dark { background: #1c1c1e; } .micon.dark::after { color: #d9b83e; }
.row.danger { color: var(--red); }
.row .dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.note { font-size: 13px; color: var(--ink-3); margin: 9px 21px 0; line-height: 1.35; }
.foot { font-size: 12px; color: var(--ink-3); margin: 14px 21px 0; line-height: 1.5; } .foot .copy { color: var(--ink-3); vertical-align: middle; margin-left: 4px; }
.switch { position: relative; width: 51px; height: 31px; flex: none; }
.switch input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; }
.switch i { position: absolute; inset: 0; border-radius: 16px; background: rgba(120,120,128,.32); transition: background .2s; }
.switch i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.15), 0 1px 1px rgba(0,0,0,.06); transition: transform .25s var(--ease-spring); }
.switch input:checked + i { background: var(--accent); } .switch input:checked + i::after { transform: translateX(20px); }
.stepv { display: flex; align-items: center; gap: 2px; font-size: 17px; color: var(--ink-3); }
.field { width: 100%; border: 0; background: transparent; padding: 12px 16px; font-size: 17px; outline: none; color: var(--ink); }
.field.num { text-align: right; width: 80px; background: var(--card-2); border-radius: 8px; padding: 6px 10px; font-weight: 600; }
textarea.field { min-height: 120px; resize: none; }
.chips { display: flex; gap: 8px; padding: 6px 14px 12px; }
.chip { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600; background: var(--card-2); color: var(--ink-3); }
.chip.on { background: var(--green); color: #fff; }
.opt { display: flex; align-items: center; gap: 12px; padding: 12px 16px; min-height: 52px; font-size: 17px; }
.opt + .opt { box-shadow: inset 0 .5px 0 var(--sep); }
.opt .ic { color: var(--accent); } .opt .chk { margin-left: auto; color: var(--accent); }
.opt small { display: block; font-size: 13px; color: var(--ink-3); }
.preview { margin: 18px 0 0; }
.cgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; padding: 16px; }
.cgrid button { aspect-ratio: 1; border-radius: 50%; background: var(--v); position: relative; }
.cgrid button.on::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2.5px solid var(--ink); }
.egrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; padding: 12px; }
.egrid button { aspect-ratio: 1; border-radius: 12px; display: grid; place-items: center; font-size: 28px; }
.egrid button.on { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.pillbtn { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 20px; border-radius: 22px; background: var(--accent); color: #fff; font-size: 17px; font-weight: 600; }
.pillbtn.soft { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.swrow { justify-content: space-between; gap: 0; padding-left: 21px; padding-right: 21px; }
.sw { width: 15px; height: 15px; border-radius: 4px; display: grid; place-items: center; color: #fff; flex: none; }
.phone { width: 193px; height: 409px; border-radius: 36px; margin: 14px auto 20px; background: linear-gradient(180deg, var(--bg-start), var(--bg-mid) 50%, var(--bg-end)); }
.iconrow { display: flex; gap: 12px; padding: 18px 16px 0; }
.appicon { position: relative; width: 60px; height: 60px; border-radius: 14px; background: #f2f2f7; display: grid; place-items: center; }
.appicon .micon { width: 60px; height: 60px; border-radius: 14px; }
.appicon .chkb { position: absolute; top: -5px; right: -5px; width: 16px; height: 16px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; border: 1.5px solid var(--sys-bg); }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 4px; padding: 8px 8px 12px; }
.cal__h { font-size: 11px; font-weight: 600; color: var(--ink-3); text-align: center; padding: 6px 0; }
.cal__d { height: 40px; display: grid; place-items: center; font-size: 15px; position: relative; }
.cal__d.out { color: var(--ink-4); }
.cal__d span { position: relative; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; }
.cal__d.on span { background: var(--accent); color: #fff; font-weight: 600; }
.cal__d.p span { background: color-mix(in srgb, var(--accent) calc(var(--p) * 60%), transparent); }
.cal__d.today span { background: var(--accent); color: #fff; font-weight: 600; }
.cal__t { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 4px; font-size: 17px; font-weight: 600; }
.cal__t .nav { display: flex; gap: 14px; color: var(--accent); }

/* ---- statistics ---- */
.stats { padding: 8px 16px 0; }
.stats h3 { font-size: 15px; font-weight: 600; color: var(--ink-3); margin: 18px 0 8px 4px; display: flex; justify-content: space-between; }
.stats h3 a { color: var(--accent); font-weight: 600; font-size: 13px; }
.hchips { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 4px 16px 6px; }
.hchips::-webkit-scrollbar { display: none; }
.hchip { flex: 0 0 76px; height: 76px; border-radius: 14px; background: var(--card); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; font-size: 11px; font-weight: 500; text-align: center; padding: 0 4px; line-height: 1.15; color: var(--ink); transition: box-shadow 200ms ease, background-color 200ms ease; }
.hchip__ico { width: 30px; height: 30px; border-radius: 8px; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); display: grid; place-items: center; font-size: 18px; }
.hchip.on { box-shadow: inset 0 0 0 2px var(--c); background: color-mix(in srgb, var(--c) 10%, var(--card)); }
.sblocks.enter .sblk, .sblocks.enter h3 { animation: fadeUp 260ms var(--ease-out) both; }
.sblocks.enter > :nth-child(n+5) { animation-delay: 40ms; } .sblocks.enter > :nth-child(n+9) { animation-delay: 80ms; } .sblocks.enter > :nth-child(n+13) { animation-delay: 120ms; }
.sblk { background: var(--card); border-radius: 18px; padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; }
.sblk .row__ico { width: 34px; height: 34px; border-radius: 9px; background: var(--card-2); color: var(--accent); }
.sblk b { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; display: block; }
.sblk small { font-size: 13px; color: var(--ink-3); display: block; margin-top: 3px; }
.sbar { height: 8px; border-radius: 4px; background: var(--card-2); overflow: hidden; display: flex; margin-top: 10px; }
.sbar i { height: 100%; }
.legend { display: flex; gap: 12px; font-size: 12px; color: var(--ink-3); margin-top: 8px; flex-wrap: wrap; }
.legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px; }
.hist { display: flex; align-items: flex-end; gap: 2px; height: 90px; padding: 8px 0 0; border-bottom: 1px solid var(--sep); }
.hist i { flex: 1; background: #5e5ce6; border-radius: 3px 3px 0 0; min-height: 0; }
.axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); padding-top: 6px; }
.gap { display: flex; align-items: center; gap: 12px; font-size: 13px; padding: 6px 0; }
.gap i { flex: 1; height: 3px; border-radius: 2px; background: var(--orange); }
.wk { display: grid; grid-template-columns: 1fr repeat(7, 26px); gap: 6px 4px; align-items: center; padding: 4px 0; }
.wk .h { font-size: 11px; font-weight: 600; color: var(--ink-3); text-align: center; }
.wk .h.today { color: var(--accent); }
.wk .n { font-size: 14px; display: flex; align-items: center; gap: 8px; overflow: hidden; white-space: nowrap; }
.wk-cell { width: 22px; height: 22px; border-radius: 50%; background: var(--card-2); display: grid; place-items: center; margin: 0 auto; color: #fff; }
.wk-cell.p { background: color-mix(in srgb, var(--c) calc(var(--p) * 100%), var(--card-2)); }
.wk-cell.d { background: var(--c); }
.year { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 4px); grid-auto-columns: 4px; gap: 1.5px; padding: 6px 0; }
.year i { background: var(--card-2); border-radius: 1px; } .year i.d { background: var(--accent); }
.year i.n { background: transparent; }
.year i.t { background: var(--accent); border-radius: 50%; }
.chart { width: 100%; height: 190px; display: block; }
.chart text { font-size: 10px; fill: var(--ink-3); }
.perf { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 15px; }
.perf .pill { margin-left: auto; font-size: 12px; font-weight: 700; padding: 4px 8px; border-radius: 10px; color: #fff; background: var(--green); }
.perf .pill.bad { background: var(--red); }
.range { position: fixed; right: 16px; top: calc(var(--sat) + 10px); z-index: 41; height: 34px; padding: 0 12px; border-radius: 17px; display: inline-flex; align-items: center; font-size: 15px; font-weight: 500; }
/* minimised tab bar: a 52px round button at the left showing the active tab */
.tabbar { transition: width 320ms var(--ease-drawer), height 320ms var(--ease-drawer), border-radius 320ms var(--ease-drawer); width: calc(100% - 40px); }
.tabbar.mini { width: 52px; height: 52px; border-radius: 26px; padding: 0; }
.tabbar.mini .tabbar__glass { opacity: 0; transition: opacity 120ms ease; }
.tabbar.mini .tab { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 120ms ease; }
.tabbar.mini .tab.on { opacity: 1; pointer-events: auto; color: var(--ink); }
.tabbar.mini .tab.on span { display: none; }
.tabbar.mini .tab.on .ic { transform: none; }
.tab span { transition: opacity 120ms ease; }

/* ---- templates ---- */
.tpl { padding: 0 16px; }
.seg { display: flex; background: var(--card-2); border-radius: 9px; padding: 2px; margin: 0 0 12px; }
.seg button { flex: 1; height: 30px; border-radius: 7px; font-size: 13px; font-weight: 500; text-align: center; color: var(--ink); }
.seg button.on { background: var(--card); box-shadow: 0 1px 3px rgba(0,0,0,.08); font-weight: 600; }
.search { position: sticky; bottom: 0; margin: 12px -16px 0; padding: 8px 16px 0; background: linear-gradient(transparent, var(--sys-bg) 40%); }
.search div { display: flex; align-items: center; gap: 8px; height: 40px; border-radius: 12px; background: var(--card-2); padding: 0 12px; color: var(--ink-3); }
.search input { flex: 1; border: 0; background: transparent; outline: none; color: var(--ink); min-width: 0; }
.tpl .row .card__ico { width: 24px; height: 24px; font-size: 18px; }
.tpl .row .badge { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }

/* ---- achievements ---- */
.ach { padding: 0 20px 20px; }
.ach h4 { text-align: center; font-size: 17px; font-weight: 600; margin: 18px 0 16px; }
.ach__g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 0; justify-items: center; }
.ach__b { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-3); width: 106px; }
.hex { position: relative; width: 106px; height: 100px; display: grid; place-items: center; color: #fff; }
.hex svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; fill: #8e8e93; }
.hex.on svg:first-child { fill: var(--v); }
.hex .ic { position: relative; }
/* ---- reorder ---- */
.ro { padding: 8px 16px 0; }
.ro .row { touch-action: none; } .ro .row.drag { opacity: .6; }
.ro .minus { width: 22px; height: 22px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; }

/* ---- confetti ---- */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }
.confetti i { position: absolute; width: 10px; height: 10px; background: currentColor; animation: burst 2.6s cubic-bezier(0.15, 0.6, 0.4, 1) forwards; will-change: transform, opacity; }
.confetti i.tri { width: 0; height: 0; background: none; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 11px solid currentColor; }
.confetti i.circ { border-radius: 50%; width: 9px; height: 9px; }
.confetti i.dot { border-radius: 50%; width: 5px; height: 5px; box-shadow: 6px 3px 0 currentColor, -1px 7px 0 currentColor; }
.confetti i.pill { width: 4px; height: 14px; border-radius: 2px; }
@keyframes burst { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 45% { transform: translate(var(--dx), calc(var(--dy) * 0.8)) rotate(calc(var(--r) * .5)); opacity: 1; } 100% { transform: translate(calc(var(--dx) * 1.15), calc(var(--dy) * 0.4 + 520px)) rotate(var(--r)); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .sheet { transition: opacity .2s ease; transform: none !important; opacity: 0; pointer-events: none; }
  .sheet.open { opacity: 1; pointer-events: auto; }
  .menu { animation: none; } .confetti { display: none; }
  .layer { transition: opacity 160ms ease; transform: none !important; }
  .card.flip, .card.appear, .list.enter .card, .card__act.pop > .ic, .card__badge { animation: none; transition: none; }
  .day__r i { transition: opacity 200ms ease; }
}

/* ---- long press: the card dips, the screen dims, a glass menu pops from under the card ---- */
.card { transition: background-color 250ms ease, color 250ms ease, box-shadow 250ms ease, transform 200ms var(--ease-out); }
.card.pressed { transform: scale(.965); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7), 0 10px 30px rgba(0,0,0,.14); position: relative; z-index: 85; }
.ctx { position: fixed; inset: 0; z-index: 84; }
.ctx__scrim { position: absolute; inset: 0; background: rgba(0,0,0,.22); animation: fade 200ms ease both; }
.ctx__panel { position: absolute; border-radius: 22px; padding: 10px 8px 6px; transform-origin: top center; animation: ctxpop 220ms var(--ease-out) both; }
.ctx.out .ctx__panel { animation: ctxout 160ms var(--ease-out) both; } .ctx.out .ctx__scrim { animation: fadeout 160ms ease both; }
@keyframes ctxpop { from { opacity: 0; transform: scale(.85); } }
@keyframes ctxout { to { opacity: 0; transform: scale(.9); } }
@keyframes fade { from { opacity: 0; } } @keyframes fadeout { to { opacity: 0; } }
.ctx__cap { font-size: 12px; color: var(--ink-3); padding: 2px 8px 8px; }
.ctx__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 2px; padding-bottom: 6px; border-bottom: .5px solid var(--sep); }
.ctx__grid.one { grid-template-columns: 1fr; justify-items: center; padding-top: 4px; }
.ci { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 2px; border-radius: 12px; font-size: 11px; color: var(--ink); text-align: center; line-height: 1.15; }
.ci .ic { color: var(--c); } .ci.danger, .ci.danger .ic { color: var(--red); }
.ci:active { background: rgba(0,0,0,.06); }
.ctx__row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 10px; font-size: 15px; color: var(--ink); border-radius: 12px; }
.ctx__row .ic:first-child { color: var(--c); } .ctx__row span { flex: 1; } .ctx__row + .ctx__row { box-shadow: inset 0 .5px 0 var(--sep); }
@media (prefers-reduced-motion: reduce) { .menu, .popv { animation: none; } .sblocks.enter .sblk, .sblocks.enter h3 { animation: none; } .heat__g.reveal i, .bars.reveal > div b i, .card.grow { animation: none; transition: none; } .ctx__panel, .ctx.out .ctx__panel { animation: fade 160ms ease both; } .tabbar__glass, .tabbar__glass.lift { scale: 1; } }