/* TANADI web app styles.
   Layout: "The Daily Form". Dark charcoal is home; content stacks in even bars like the symbol;
   lime marks only "today" (the one next action). Always dark (approved 2026-11-05): one look for web and app. Lime Deep #71900F is only for light print/materials. */
:root {
  --bg: #171B1F;          /* Deep Charcoal */
  --surface: #2B3239;     /* Slate */
  --surface-2: #222830;
  --line: #3A424B;
  --fg: #F3F4F1;          /* Bone */
  --muted: #9AA3AC;
  --accent: #C5F03C;      /* Lime: on dark only */
  --accent-soft: rgba(197, 240, 60, .10);
  --btn-bg: #C5F03C;
  --btn-fg: #171B1F;
  --logo-body: #F3F4F1;
  --chip-on-bg: #F3F4F1;
  --chip-on-fg: #171B1F;
  --panel-bg: #2B3239;
  --panel-fg: #F3F4F1;
  --panel-accent: #C5F03C;
  --head: "Sora", "Noto Sans Georgian", system-ui, sans-serif;
  --body: "Inter", "Noto Sans Georgian", system-ui, sans-serif;
  --mono: "JetBrains Mono", "Noto Sans Georgian", ui-monospace, monospace;
  --serif: "Noto Serif Georgian", Georgia, serif;
  --glass: rgba(43, 50, 57, .55);
  --glass-line: rgba(243, 244, 241, .07);
  --glow: rgba(197, 240, 60, .10);
  --r: 14px;
  color-scheme: dark;
}
* { box-sizing: border-box }
[hidden] { display: none !important }  /* sections toggled with the hidden attribute must stay hidden even when they set display */
html { -webkit-text-size-adjust: 100% }
body {
  margin: 0; background: var(--bg); color: var(--fg); font-family: var(--body); font-size: 15px; line-height: 1.6;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 0 56px;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--bg) }
.wrap { max-width: 920px; margin: 0 auto }
h1, h2, h3 { font-family: var(--head); text-wrap: balance; margin: 0; line-height: 1.12; letter-spacing: -.01em }
h1 { font-size: clamp(34px, 6vw, 56px); font-weight: 700 }
h2 { font-size: clamp(24px, 3.6vw, 32px); font-weight: 600 }
h3 { font-size: 18px; font-weight: 600 }
.eyebrow { font-family: var(--body); font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--muted) }
.num { font-variant-numeric: tabular-nums }
button, input { font: inherit; color: inherit }
button { cursor: pointer }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.small { font-size: 13px; color: var(--muted) }

/* Header */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--bg); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 14px; border-bottom: 1px solid var(--line); margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); padding-inline: max(16px, env(safe-area-inset-left, 0px)) }
.top .wrapin { max-width: 920px; width: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px }
.logo { display: block; height: 28px; width: auto }
.logo .body { fill: var(--logo-body) }
.logo .head { fill: var(--accent) }
.top-cta { font-size: 14px; font-weight: 600; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; text-decoration: none; color: var(--fg) }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--btn-bg); color: var(--btn-fg); border: 0; border-radius: 12px; padding: 14px 22px; font-weight: 600; font-size: 16px; text-decoration: none; min-height: 50px }
.btn:hover { filter: brightness(1.06) }
.btn:disabled { opacity: .45; cursor: not-allowed }
.btn.block { width: 100% }
.ghost { background: transparent; border: 1px solid var(--line); border-radius: 12px; padding: 12px 18px; font-weight: 600; min-height: 46px }
.ghost:disabled { opacity: .4; cursor: not-allowed }

/* Hero */
.hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 36px; align-items: center; padding-block: 40px 44px }
.hero p.lead { color: var(--muted); max-width: 48ch; margin: 16px 0 22px; font-size: 17px }
.hero h1 .hl { color: var(--accent) }
.pills-label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 10px }
.features { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; max-width: 560px }
.features li { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 12px; position: relative }
.features li::before { content: ""; position: absolute; top: 0; left: 0; width: 22px; height: 4px; border-radius: 1px; background: var(--accent) }
.features b { font-weight: 600; font-size: 15px }
.features span { font-size: 13px; color: var(--muted); line-height: 1.45 }
@media (max-width: 359px) { .features { grid-template-columns: 1fr } }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px }
.pill { font-size: 13px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line) }
.pill.on { background: var(--accent-soft); border-color: transparent; color: var(--accent); font-weight: 600 }
.stack { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 20px; background: var(--surface); border-radius: 20px; min-width: 0 }
.stack .bar { height: 46px; border-radius: 4px; background: var(--surface-2); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; font-size: 14px; animation: grow .6s cubic-bezier(.2, .7, .2, 1) both }
.stack .bar span:first-child { color: var(--muted) }
.stack .bar b { font-variant-numeric: tabular-nums; font-weight: 600 }
.stack .bar.step { justify-content: flex-start; gap: 12px; height: auto; min-height: 46px; padding-block: 8px; line-height: 1.3 }
.stack .bar.step span { font-family: var(--head); font-weight: 600; color: var(--accent); min-width: 1ch }
.stack .bar.step b { font-weight: 500 }
.stack .bar.today { width: auto; max-width: 100%; height: auto; min-height: 46px; padding: 8px 18px; text-align: center; line-height: 1.3; background: var(--accent); color: var(--btn-fg); justify-content: center; font-weight: 600 }
.stack .bar:nth-child(2) { width: 100%; animation-delay: .05s }
.stack .bar:nth-child(3) { width: 88%; animation-delay: .1s }
.stack .bar:nth-child(4) { width: 78%; animation-delay: .15s }
.stack .bar:nth-child(5) { width: 70%; animation-delay: .2s }
.stack .cap { font-size: 12px; color: var(--muted); margin-top: 6px; text-align: center }
.stack .cap.strong { font-size: 14px; color: var(--fg); font-weight: 500; margin-top: 10px; max-width: 34ch }
.stack .bar.step.result { justify-content: center; text-align: center }
.stack .bar.step.result b { color: var(--accent); font-weight: 600 }
.stack .bar.goal { border: 1.5px solid transparent; color: var(--fg); font: inherit; cursor: pointer; justify-content: space-between; text-align: left; min-height: 52px }
.stack .bar.goal b { font-weight: 600; font-size: 15px }
.stack .bar.goal .go { color: var(--muted); transition: transform .15s, color .15s }
.stack .bar.goal:hover { border-color: var(--line) }
.stack .bar.goal:hover .go { color: var(--accent); transform: translateX(3px) }
.stack .bar.goal[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft) }
.stack .bar.goal[aria-pressed="true"] .go { color: var(--accent) }
@keyframes grow { from { transform: scaleX(.7) } to { transform: scaleX(1) } }

/* Quiz */
.quiz { background: var(--surface); border-radius: 20px; padding: 26px clamp(18px, 4vw, 36px); margin-block: 8px 44px; scroll-margin-top: 80px }
.segs { display: flex; gap: 4px; margin-bottom: 22px }
.segs i { flex: 1; height: 6px; border-radius: 2px; background: var(--line) }
.segs i.done { background: var(--fg); opacity: .55 }
.segs i.now { background: var(--accent); opacity: 1 }
.quiz h2 { margin: 6px 0 6px }
.quiz .sub { color: var(--muted); margin: 0 0 18px; min-height: 1.6em }
.opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px }
.opt { text-align: left; background: var(--surface-2); border: 1.5px solid transparent; border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; min-width: 0; min-height: 56px }
.opt b { font-size: 16px; font-weight: 600 }
.opt small { color: var(--muted); font-size: 13px; line-height: 1.4 }
.opt:hover { border-color: var(--line) }
.opt[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft) }
.numin { display: flex; align-items: center; gap: 10px; max-width: 280px }
.numin input { flex: 1; min-width: 0; font-family: var(--head); font-size: 30px; padding: 10px 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface-2); font-variant-numeric: tabular-nums }
.numin input:focus { border-color: var(--accent); outline: none }
.numin span { color: var(--muted); font-size: 18px }
.err { color: #FF8A7A; font-size: 14px; min-height: 22px; margin-top: 8px }
.qnav { display: flex; justify-content: space-between; gap: 10px; margin-top: 20px; flex-wrap: wrap }
.check { display: flex; gap: 12px; align-items: flex-start; background: var(--surface-2); border-radius: 12px; padding: 14px 16px; max-width: 62ch }
.check input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--accent); flex: none }

/* Plan */
.plan { display: flex; flex-direction: column; gap: 44px; scroll-margin-top: 80px }
.plan-head { display: flex; flex-direction: column; gap: 12px }
.chips { display: flex; flex-wrap: wrap; gap: 6px }
.chip { font-size: 12.5px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted) }
.chip.focus { background: var(--accent-soft); border-color: transparent; color: var(--accent); font-weight: 600 }
.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); border-radius: var(--r); overflow: hidden }
.stat { padding: 14px 16px; background: var(--surface); min-width: 0 }
.stat .v { font-family: var(--head); font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2 }
.stat .v small { font-family: var(--body); font-size: 13px; color: var(--muted); font-weight: 500 }
.stat .l { font-size: 13px; color: var(--muted) }
.stat.today .v { color: var(--accent) }
.note { color: var(--muted); font-size: 14px; max-width: 72ch; margin: 0 }
.callout { background: var(--accent-soft); border-radius: 12px; padding: 12px 16px; font-size: 14px }
.callout b { color: var(--accent) }

.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-block: 14px 18px }
.wd { text-align: center; padding: 8px 2px; border-radius: 8px; background: var(--surface); font-size: 13px }
.wd.on { background: var(--chip-on-bg); color: var(--chip-on-fg); font-weight: 600 }
.wd small { display: block; font-size: 11px; opacity: .75; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
@media (max-width: 480px) { .wd small { display: none } .wd { padding-block: 10px } }

.days { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 14px }
.day { background: var(--surface); border-radius: var(--r); overflow: hidden; min-width: 0 }
.day header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--line) }
.day header .eyebrow { white-space: nowrap }
.ex { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line) }
.ex:last-child { border-bottom: 0 }
.vid { width: 56px; aspect-ratio: 1; max-width: 100%; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; color: var(--muted); border: 0; padding: 0; text-decoration: none }
.vid svg { width: 20px; height: 20px }
.vid.has { color: var(--accent) }
.ex .nm { font-weight: 600; line-height: 1.3; min-width: 0 }
.ex .nm small { display: block; color: var(--muted); font-weight: 400; font-size: 12.5px }
.ex .nm small b { color: var(--accent); font-weight: 600 }
.ex .rx { text-align: right; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600 }
.ex .rx small { display: block; color: var(--muted); font-size: 11.5px; font-weight: 400 }
.finisher { padding: 10px 16px; font-size: 13.5px; background: var(--accent-soft) }

.phases { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px }
.phase { background: var(--surface); border-radius: 12px; padding: 14px }
.phase .eyebrow { display: block; margin-bottom: 4px }
.phase p { margin: 6px 0 0; font-size: 13.5px; color: var(--muted) }

.meals { display: flex; flex-direction: column; gap: 14px }
.mealday { background: var(--surface); border-radius: var(--r); overflow: hidden }
.mealday > header { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; padding: 14px 16px; border-bottom: 1px solid var(--line) }
.meal { display: grid; grid-template-columns: 110px 1fr auto; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); align-items: start }
.meal:last-child { border-bottom: 0 }
.meal .mt { font-weight: 600; font-size: 14px }
.meal ul { list-style: none; margin: 0; padding: 0; font-size: 14px; min-width: 0 }
.meal li { display: flex; justify-content: space-between; gap: 10px }
.meal li span:last-child { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap }
.meal .kc { font-size: 13px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600 }
.meal .kc small { display: block; color: var(--muted); font-weight: 400 }

.lockwrap { position: relative }
.lockwrap.locked .lockbody { filter: blur(6px); pointer-events: none; user-select: none; max-height: 420px; overflow: hidden }
.lockwrap .lockcover { display: none }
.lockwrap.locked .lockcover { display: flex; position: absolute; inset: 0; align-items: center; justify-content: center; flex-direction: column; gap: 12px; text-align: center; padding: 16px; background: linear-gradient(to bottom, transparent, var(--bg) 70%) }
.lockcover p { margin: 0; font-weight: 600; font-size: 16px }

.shop { columns: 2; column-gap: 28px; background: var(--surface); border-radius: var(--r); padding: 16px 18px; font-size: 14px }
.shop div { display: flex; justify-content: space-between; gap: 10px; break-inside: avoid; padding-block: 4px; border-bottom: 1px solid var(--line) }
.shop span:last-child { color: var(--muted); font-variant-numeric: tabular-nums }

/* Offer panel: always charcoal, so bright lime is allowed here */
.buy { background: var(--panel-bg); color: var(--panel-fg); border-radius: 20px; padding: 28px clamp(18px, 4vw, 34px); display: grid; grid-template-columns: 1fr 1fr; gap: 26px; scroll-margin-top: 80px }
.buy .eyebrow { color: var(--panel-fg); opacity: .7 }
.buy h2 { margin-top: 6px }
.buy .price { font-family: var(--head); font-weight: 700; font-size: 60px; line-height: 1; margin-block: 12px; color: var(--panel-accent); font-variant-numeric: tabular-nums }
.buy ul { padding-left: 18px; margin: 10px 0 0; font-size: 14.5px }
.buy .pane { background: var(--surface); color: var(--fg); border-radius: 14px; padding: 18px; min-width: 0 }
.tabs { display: flex; gap: 6px; margin-bottom: 14px }
.tabs button { flex: 1; border: 1.5px solid var(--line); background: var(--surface-2); border-radius: 10px; padding: 9px; font-weight: 600; font-size: 14px }
.tabs button[aria-selected="true"] { border-color: var(--accent); background: var(--accent-soft) }
.iban { font-size: 14px; background: var(--surface-2); border-radius: 10px; padding: 10px 12px; display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-block: 6px; word-break: break-all; font-variant-numeric: tabular-nums }
.iban button { border: 0; background: transparent; color: var(--accent); font-weight: 700; font-size: 13px; flex: none }
.field { display: flex; flex-direction: column; gap: 4px; margin-block: 10px; font-size: 13.5px; color: var(--muted) }
.field input { padding: 11px 12px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface-2); color: var(--fg) }
.ok { background: var(--accent-soft); border-radius: 10px; padding: 12px; font-size: 14px; margin-top: 10px }
.demo { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--muted); margin-top: 14px }
.demo input { accent-color: var(--accent) }

/* Purchased plan */
.owned { background: var(--surface); border-radius: 20px; padding: 22px clamp(18px, 4vw, 30px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; scroll-margin-top: 80px }
.owned > div:first-child { min-width: 0; flex: 1 1 320px }
.owned h3 { margin: 4px 0 6px }
.owned .eyebrow { color: var(--accent) }
.owned .small { margin: 0 }
.confirm { flex: 1 1 100%; background: var(--surface-2); border-radius: 12px; padding: 14px 16px }
.confirm p { margin: 0 0 12px; font-size: 14px }
.confirm .row { display: flex; flex-wrap: wrap; gap: 10px }
.demo-link { flex: 1 1 100%; background: none; border: 0; padding: 0; margin-top: 10px; text-align: left; font-size: 12.5px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px }
.qleft { display: flex; gap: 10px; flex-wrap: wrap }
.stack .bar.step .k { color: var(--muted); font-size: 13px; min-width: 64px }
.stack a.bar.open { text-decoration: none }
footer { margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 10px }
footer .logo { height: 22px }

@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; padding-block: 28px 32px }
  .stats { grid-template-columns: repeat(2, 1fr) }
  .stat:last-child { grid-column: 1 / -1 }
  .buy { grid-template-columns: 1fr }
  .days { grid-template-columns: 1fr }
  .meal { grid-template-columns: 1fr auto }
  .meal .mt { grid-column: 1 / -1 }
  .shop { columns: 1 }
  .week { gap: 4px }
  .wd { font-size: 12px }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important } }

/* ===== Motion layer: ambient light, glass, live dashboard ===== */
.aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden }
.aurora i { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .8; will-change: transform }
.aurora i:nth-child(1) { width: 46vmax; height: 46vmax; right: -14vmax; top: 4vh; background: radial-gradient(circle, rgba(197,240,60,.22), transparent 65%); animation: drift1 26s ease-in-out infinite alternate }
.aurora i:nth-child(2) { width: 38vmax; height: 38vmax; left: -16vmax; top: 55vh; background: radial-gradient(circle, rgba(113,144,15,.30), transparent 65%); animation: drift2 32s ease-in-out infinite alternate }
.aurora i:nth-child(3) { width: 30vmax; height: 30vmax; right: 10vmax; top: 120vh; background: radial-gradient(circle, rgba(197,240,60,.12), transparent 65%); animation: drift1 38s ease-in-out infinite alternate-reverse }
@keyframes drift1 { to { transform: translate(-12vmax, 10vh) scale(1.15) rotate(25deg) } }
@keyframes drift2 { to { transform: translate(14vmax, -12vh) scale(.9) rotate(-20deg) } }
.top, main, footer { position: relative; z-index: 1 }
.top { z-index: 5; background: rgba(23, 27, 31, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--glass-line) }

.glass, .stack, .quiz, .day, .mealday, .phase, .stats, .shop, .owned, .buy .pane {
  background: var(--glass); border: 1px solid var(--glass-line);
  backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%);
}
.glass { position: relative; border-radius: 20px; overflow: hidden }
.glass::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), var(--glow), transparent 45%) }
.glass:hover::before { opacity: 1 }
.glass:hover { border-color: rgba(197, 240, 60, .18) }

/* Showcase */
.showcase { padding-block: 16px 48px }
.sc-head { margin-bottom: 18px }
.sc-head .tag { margin-bottom: 10px }
.sc-head p { margin: 0; color: var(--muted); font-size: 15px; max-width: 40ch }
.tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; color: var(--muted); padding: 5px 12px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-line); margin-bottom: 14px }
.tag i, .chip-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent) }
.showcase h2 { font-size: clamp(26px, 3.8vw, 36px); font-weight: 600 }
.showcase h2 em { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--accent) }
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px }
.bento .glass { padding: 18px; min-width: 0; display: flex; flex-direction: column; gap: 14px }
.lbl { font-family: var(--mono); font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap }
.lbl span { color: var(--fg); opacity: .8 }
.foot { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: auto }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px }
.cal .col { display: flex; flex-direction: column; gap: 6px; min-width: 0 }
.cal b { font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--muted); display: flex; align-items: center; gap: 5px; margin-bottom: 2px }
.cal .today b { color: var(--fg) }
.cal .today b em { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 1.8s ease-in-out infinite }
.cal .blk { display: block; height: 30px; border-radius: 6px; background: rgba(243,244,241,.10) }
.cal .blk.now { background: var(--accent); box-shadow: 0 0 24px rgba(197,240,60,.35) }
.cal .sk { display: block; height: 10px; border-radius: 3px; background: linear-gradient(90deg, rgba(243,244,241,.05), rgba(243,244,241,.12), rgba(243,244,241,.05)); background-size: 200% 100%; animation: shimmer 2.6s linear infinite }
.cal .sk.s { width: 60% }
.chip-live { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; padding: 6px 12px; border-radius: 8px; border: 1px solid rgba(197,240,60,.35); color: var(--fg) }
.chip-live i { animation: pulse 1.8s ease-in-out infinite }
@keyframes pulse { 50% { opacity: .35; transform: scale(.8) } }
@keyframes shimmer { to { background-position: -200% 0 } }

.card-ring { align-items: center; text-align: center }
.card-ring .lbl { align-self: stretch }
.ring { width: 116px; height: 116px; transform: rotate(-90deg); max-width: 100% }
.ring circle { fill: none; stroke-width: 9; stroke-linecap: round }
.ring .track { stroke: rgba(243,244,241,.08) }
.ring .fill { stroke: var(--accent); stroke-dasharray: 314.16; stroke-dashoffset: 103.7; filter: drop-shadow(0 0 6px rgba(197,240,60,.45)); transition: stroke-dashoffset 1.2s cubic-bezier(.2,.7,.2,1) }
.ring-num { margin-top: -86px; margin-bottom: 44px; font-family: var(--head); font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums }
.ring-num b { font-weight: 600 }

.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px }
.ticks li { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 10px; font-size: 14px }
.ticks li span { font-family: var(--mono); font-size: 12px; color: var(--muted) }
.ticks li i { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--line); position: relative; transition: background .3s, border-color .3s }
.ticks li.done i { background: var(--accent); border-color: var(--accent) }
.ticks li.done i::after { content: ""; position: absolute; left: 5px; top: 1.5px; width: 5px; height: 9px; border: solid #171B1F; border-width: 0 2px 2px 0; transform: rotate(45deg) }
.ticks li.done { color: var(--muted) }

.mac { display: grid; grid-template-columns: 92px 1fr 48px; align-items: center; gap: 10px; font-size: 13px }
.mac em { font-style: normal; font-family: var(--mono); font-size: 12px; text-align: right; color: var(--muted) }
.mac .bar { height: 6px; border-radius: 3px; background: rgba(243,244,241,.08); overflow: hidden }
.mac .bar i { display: block; height: 100%; width: calc(var(--v) * 100%); border-radius: 3px; background: var(--accent); transition: width 1.1s cubic-bezier(.2,.7,.2,1) }
.mac:nth-of-type(n+3) .bar i { background: rgba(243,244,241,.55) }
.mono { font-family: var(--mono) }

.streak { display: flex; align-items: baseline; gap: 10px }
.streak b { font-family: var(--head); font-size: 44px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums }
.streak span { color: var(--muted); font-size: 14px }
.layers { display: flex; flex-direction: column; align-items: center; gap: 5px }
.layers i { height: 7px; border-radius: 2px; background: rgba(243,244,241,.85) }
.layers i.h { width: 26%; background: var(--accent) }
.layers i:nth-child(2) { width: 100% } .layers i:nth-child(3) { width: 81% } .layers i:nth-child(4) { width: 67% } .layers i:nth-child(5) { width: 57% }
.sc-note { margin: 14px 0 0; font-family: var(--mono); font-size: 11.5px; color: var(--muted) }

/* play-on-view: the start state is only set by JS (.arm), so the page is complete without it */
.arm .ring .fill { stroke-dashoffset: 314.16 }
.arm .mac .bar i { width: 0 }
.arm .ticks li.done i { background: transparent; border-color: var(--line) }
.arm .ticks li.done i::after { opacity: 0 }
.play .ticks li.done i { transition-delay: calc(var(--d, 0) * 1s) }
.play .ticks li:nth-child(1) { --d: .3 } .play .ticks li:nth-child(2) { --d: .6 } .play .ticks li:nth-child(3) { --d: .9 }
.ticks li.done i::after { transition: opacity .2s; transition-delay: inherit }
.bento .glass { transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .3s }
.bento .glass:hover { transform: translateY(-3px) }

@media (max-width: 760px) {
  /* phones: a swipeable strip instead of a tall stack */
  .bento { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 6px; scrollbar-width: none;
    margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); padding-inline: max(16px, env(safe-area-inset-left, 0px)) }
  .bento::-webkit-scrollbar { display: none }
  .bento .glass { flex: 0 0 78%; scroll-snap-align: center }
}
@media (prefers-reduced-motion: reduce) { .aurora i { animation: none } }

/* ===== App view (after the plan exists) ===== */
.app { padding-block: 24px 8px; display: flex; flex-direction: column; gap: 22px }
.seg { display: inline-flex; align-self: flex-start; gap: 4px; padding: 4px; border-radius: 12px; background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px) }
.seg button { border: 0; background: transparent; padding: 9px 18px; border-radius: 9px; font-weight: 600; font-size: 14px; color: var(--muted) }
.seg button[aria-selected="true"] { background: var(--fg); color: var(--bg) }
.today { display: flex; flex-direction: column; gap: 18px }
.promo { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(197,240,60,.35); background: var(--accent-soft); font-size: 14px }
.promo b { color: var(--accent) }
.t-head { display: flex; justify-content: space-between; align-items: center; gap: 16px }
.t-head h2 { margin-top: 4px }
.mini-ring { position: relative; width: 64px; height: 64px; flex: none }
.mini-ring svg { width: 100%; height: 100%; transform: rotate(-90deg) }
.mini-ring circle { fill: none; stroke-width: 6; stroke-linecap: round }
.mini-ring .track { stroke: rgba(243,244,241,.10) }
.mini-ring .fill { stroke: var(--accent); stroke-dasharray: 163.4; transition: stroke-dashoffset .6s cubic-bezier(.2,.7,.2,1); filter: drop-shadow(0 0 4px rgba(197,240,60,.4)) }
.mini-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--mono); font-size: 13px; font-weight: 500 }
.week-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px }
.wk { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 2px; border-radius: 12px; background: var(--glass); border: 1px solid var(--glass-line) }
.wk span { font-size: 11.5px; color: var(--muted) }
.wk b { font-family: var(--head); font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums }
.wk i { width: 6px; height: 6px; border-radius: 50% }
.wk.plan i { background: var(--muted) }
.wk.done i { background: var(--accent); box-shadow: 0 0 8px var(--accent) }
.wk.now { border-color: var(--accent); background: var(--accent-soft) }
.wk.past:not(.done) { opacity: .55 }
.t-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; align-items: start }
.tcard { padding: 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0 }
.tcard h3 { font-size: 20px; margin-top: 4px }
.tcard p { margin: 0 }
.t-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px }
.chk { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column }
.chk li { display: grid; grid-template-columns: 30px 44px 1fr auto; gap: 10px; align-items: center; padding-block: 8px; border-top: 1px solid var(--glass-line) }
.meals-chk li { grid-template-columns: 30px 1fr auto }
.chk .vid { width: 44px }
.chk .nm { min-width: 0; font-size: 14px; font-weight: 500; line-height: 1.3 }
.chk .nm em { font-style: normal; font-size: 11.5px; color: var(--accent); font-weight: 600 }
.chk .nm b { font-weight: 600 }
.chk .nm small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; margin-top: 2px }
.chk .rx { font-family: var(--mono); font-size: 12.5px; color: var(--muted); white-space: nowrap }
.tick { width: 30px; height: 30px; border-radius: 9px; border: 1.5px solid var(--line); background: transparent; display: grid; place-items: center; padding: 0; transition: background .2s, border-color .2s, transform .15s }
.tick:active { transform: scale(.9) }
.tick i { width: 7px; height: 12px; border: solid transparent; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-1px, -1px) }
.tick.on { background: var(--accent); border-color: var(--accent) }
.tick.on i { border-color: #171B1F }
.chk li:has(.tick.on) .nm { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(154,163,172,.5) }
.done-chip { align-self: flex-start; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 8px; background: var(--accent); color: #171B1F }
.mbar { height: 8px; border-radius: 4px; background: rgba(243,244,241,.08); overflow: hidden }
.mbar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; transition: width .5s cubic-bezier(.2,.7,.2,1) }
.lockcard { border-color: rgba(197,240,60,.3) }
.lockcard .btn { align-self: flex-start }
@media (max-width: 760px) {
  .t-grid { grid-template-columns: 1fr }
  .t-head h2 { font-size: 22px }
  .wk { padding: 8px 0 } .wk b { font-size: 15px }
  .seg { align-self: stretch } .seg button { flex: 1 }
}