/* ═══════════════════════════════════════════════════════════════
   ANCHOR — stylesheet
   Structure:
     1. Tokens        2. Reset       3. Ambient layers
     4. Layout        5. Hero/rings  6. Panels & components
     7. Overlays      8. Motion      9. Responsive
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ───────────────────────────────────────────────── */
:root {
  /* Colour: curated Apple dark liquid glass palette */
  --bg:          #07080f;
  --bg-2:        #0d0f1c;
  --ink:         #f8fafc;
  --ink-dim:     #94a3b8;
  --ink-faint:   #64748b;

  --violet:      #6366f1;
  --violet-soft: #818cf8;
  --cyan:        #06b6d4;
  --cyan-soft:   #22d3ee;
  --rose:        #f43f5e;
  --amber:       #f59e0b;
  --emerald:     #10b981;
  --emerald-soft: #34d399;

  /* Glass surfaces — specular liquid glass layers */
  --glass:       rgba(255 255 255 / 0.045);
  --glass-hi:    rgba(255 255 255 / 0.085);
  --stroke:      rgba(255 255 255 / 0.11);
  --stroke-hi:   rgba(255 255 255 / 0.22);
  --specular:    inset 0 1px 1.5px rgba(255 255 255 / 0.18);

  /* Fluid type scale */
  --step--1: clamp(0.78rem, 0.74rem + 0.20vw, 0.88rem);
  --step-0:  clamp(0.94rem, 0.88rem + 0.28vw, 1.06rem);
  --step-1:  clamp(1.15rem, 1.02rem + 0.62vw, 1.50rem);
  --step-2:  clamp(1.45rem, 1.18rem + 1.30vw, 2.30rem);
  --step-3:  clamp(2.00rem, 1.40rem + 3.00vw, 4.00rem);

  /* Fluid spacing */
  --space-xs: clamp(0.4rem, 0.3rem + 0.4vw, 0.7rem);
  --space-s:  clamp(0.7rem, 0.5rem + 0.8vw, 1.1rem);
  --space-m:  clamp(1.1rem, 0.8rem + 1.4vw, 1.9rem);
  --space-l:  clamp(1.8rem, 1.2rem + 2.6vw, 3.4rem);
  --space-xl: clamp(2.8rem, 1.8rem + 4.4vw, 6.0rem);

  --radius:    18px;
  --radius-lg: 28px;

  --ease:      cubic-bezier(0.16, 1, 0.3, 1);   /* Apple spring cubic-bezier */
  --ease-io:   cubic-bezier(0.65, 0, 0.35, 1);

  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display",
          "Segoe UI", "Inter", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
}

/* Light Mode High Contrast Theme System Override */
[data-theme="light"] {
  --bg:          #f8fafc;
  --bg-2:        #ffffff;
  --ink:         #0f172a;
  --ink-dim:     #334155;
  --ink-faint:   #64748b;

  --violet:      #4f46e5;
  --violet-soft: #6366f1;
  --cyan:        #0284c7;
  --cyan-soft:   #0369a1;
  --rose:        #e11d48;
  --amber:       #d97706;
  --emerald:     #059669;
  --emerald-soft: #10b981;

  --glass:       rgba(255 255 255 / 0.85);
  --glass-hi:    #ffffff;
  --stroke:      rgba(15 23 42 / 0.12);
  --stroke-hi:   rgba(15 23 42 / 0.22);
  --specular:    inset 0 1px 1px rgba(255 255 255 / 1), 0 12px 35px -10px rgba(15 23 42 / 0.08);
}
[data-theme="light"] body {
  color: #0f172a;
  background: #f1f5f9;
}
[data-theme="light"] .aurora { opacity: 0.22; }
[data-theme="light"] .grain { opacity: 0.01; }

[data-theme="light"] .topbar { background: transparent; }
[data-theme="light"] .pill {
  background: #ffffff;
  color: #0f172a;
  border-color: rgba(15, 23, 42, 0.15);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .pill--accent {
  background: #f0f9ff;
  border-color: #0284c7;
  color: #0369a1;
}
[data-theme="light"] .pill--accent #visitStreak {
  color: #0284c7;
}

[data-theme="light"] .ring-card {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: 0 16px 40px -10px rgba(15, 23, 42, 0.08);
}
[data-theme="light"] .ring-card__title {
  color: #0f172a;
  font-weight: 700;
}
[data-theme="light"] .ring-card__count {
  color: #0f172a;
  font-weight: 800;
}
[data-theme="light"] .ring-card__unit {
  color: #475569;
}
[data-theme="light"] .ring-card__sub {
  color: #64748b;
}

[data-theme="light"] .panel,
[data-theme="light"] .wisdom-panel,
[data-theme="light"] .onboarding__card,
[data-theme="light"] .modal__card,
[data-theme="light"] .settings-card {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: 0 20px 50px -15px rgba(15, 23, 42, 0.1);
  color: #0f172a;
}

[data-theme="light"] .panel__title,
[data-theme="light"] .wisdom__quote,
[data-theme="light"] .onboarding__title,
[data-theme="light"] .onboarding-option__label {
  color: #0f172a;
}
[data-theme="light"] .panel__desc,
[data-theme="light"] .wisdom__author,
[data-theme="light"] .onboarding__desc,
[data-theme="light"] .onboarding-option__sub {
  color: #475569;
}

[data-theme="light"] .onboarding-option {
  background: #f8fafc;
  border-color: rgba(15, 23, 42, 0.12);
}
[data-theme="light"] .onboarding-option.is-selected {
  background: #f0f9ff;
  border-color: #0284c7;
}

[data-theme="light"] .input-field {
  background: #ffffff;
  color: #0f172a;
  border-color: rgba(15, 23, 42, 0.2);
}
[data-theme="light"] .input-field::placeholder {
  color: #94a3b8;
}

[data-theme="light"] .btn--ghost {
  color: #334155;
  border-color: rgba(15, 23, 42, 0.15);
}
[data-theme="light"] .btn--ghost:hover {
  background: rgba(15, 23, 42, 0.05);
  color: #0f172a;
}

/* Light theme media fallback */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f8fafc; --bg-2: #ffffff;
    --ink: #0f172a; --ink-dim: #475569; --ink-faint: #64748b;
    --glass: rgba(255 255 255 / 0.7); --glass-hi: rgba(255 255 255 / 0.92);
    --stroke: rgba(15 23 42 / 0.08); --stroke-hi: rgba(15 23 42 / 0.16);
  }
}

/* ── 2. Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100svh;
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,p,ul,ol { margin: 0; }
ul,ol { list-style: none; padding: 0; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
:focus-visible { outline: 2px solid var(--cyan-soft); outline-offset: 3px; border-radius: 6px; }

/* ── 3. Ambient layers ───────────────────────────────────────── */
#field {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
  opacity: 0.55;
}

.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  will-change: transform;
}
.blob--a {
  width: 60vmax; height: 60vmax; top: -22vmax; left: -14vmax;
  background: radial-gradient(circle, var(--violet) 0%, transparent 68%);
  animation: drift-a 26s var(--ease-io) infinite alternate;
}
.blob--b {
  width: 52vmax; height: 52vmax; bottom: -20vmax; right: -14vmax;
  background: radial-gradient(circle, var(--cyan) 0%, transparent 68%);
  animation: drift-b 32s var(--ease-io) infinite alternate;
}
.blob--c {
  width: 40vmax; height: 40vmax; top: 42%; left: 46%;
  background: radial-gradient(circle, #3b82f6 0%, transparent 70%);
  opacity: 0.32;
  animation: drift-c 38s var(--ease-io) infinite alternate;
}
@keyframes drift-a { to { transform: translate3d(14vw, 10vh, 0) scale(1.18); } }
@keyframes drift-b { to { transform: translate3d(-16vw, -12vh, 0) scale(1.12); } }
@keyframes drift-c { to { transform: translate3d(-20vw, 14vh, 0) scale(0.85); } }

/* Fine grain — kills gradient banding and adds a filmic texture. */
.grain {
  position: fixed; inset: -50%;
  z-index: 1; pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 700ms steps(3) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0); }
  33%     { transform: translate(-2%, 1%); }
  66%     { transform: translate(1%, -2%); }
}

/* ── 4. Layout ───────────────────────────────────────────────── */
.shell {
  position: relative; z-index: 2;
  width: min(1180px, 100% - 2 * var(--space-m));
  margin-inline: auto;
  padding-block: var(--space-m) var(--space-xl);
}

.topbar {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding-block: var(--space-s);
}
.topbar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  width: 100%;
}
.topbar__row--greeting {
  justify-content: center;
}
.brand { display: flex; align-items: center; gap: 0.6rem; }
.brand__mark {
  width: 14px; height: 14px; border-radius: 4px;
  background: linear-gradient(140deg, var(--violet-soft), var(--cyan));
  box-shadow: 0 0 18px rgb(99 102 241 / 0.8);
  animation: pulse 3.2s ease-in-out infinite;
  cursor: pointer;
}
@keyframes pulse { 50% { transform: scale(0.82); opacity: 0.75; } }
.brand__name {
  font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  font-size: var(--step--1);
}
.topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 0.4em 1em;
  font-size: var(--step--1);
  color: var(--ink-dim);
  background: var(--glass-hi);
  border: 1px solid var(--stroke-hi);
  box-shadow: var(--specular);
  border-radius: 999px;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  white-space: nowrap;
  transition: all 0.35s var(--ease);
}
.pill:hover {
  background: rgba(255 255 255 / 0.12);
  border-color: rgba(255 255 255 / 0.3);
}
.pill--accent { color: var(--ink); border-color: rgb(34 211 238 / 0.45); }
.pill--accent #visitStreak { color: var(--cyan-soft); font-weight: 700; }

/* ── 5. Hero & rings ─────────────────────────────────────────── */
.hero {
  padding-block: var(--space-xl) var(--space-l);
  text-align: center;
}
.hero__eyebrow {
  font-size: var(--step--1); letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: var(--space-m);
}

.rings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--space-l);
  justify-items: center;
}
.ring-card {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  padding: var(--space-m);
  border-radius: var(--radius-lg);
  background: var(--glass-hi);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow: var(--specular), 0 24px 60px -20px rgba(0 0 0 / 0.85);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.ring-card:hover { transform: translateY(-4px) scale(1.015); }
.ring-card[data-track="porn"] {
  border: 1px solid rgb(99 102 241 / 0.35);
  box-shadow: var(--specular), 0 16px 48px -15px rgb(99 102 241 / 0.25);
}
.ring-card[data-track="nofap"] {
  border: 1px solid rgb(6 182 212 / 0.35);
  box-shadow: var(--specular), 0 16px 48px -15px rgb(6 182 212 / 0.25);
}
.ring-card[data-track="paidsex"] {
  border: 1px solid rgb(16 185 129 / 0.35);
  box-shadow: var(--specular), 0 16px 48px -15px rgb(16 185 129 / 0.25);
}

.ring-wrap {
  position: relative;
  width: clamp(200px, 30vw, 300px);
  aspect-ratio: 1;
  display: grid; place-items: center;
}
.ring { position: absolute; inset: 0; transform: rotate(-90deg); overflow: visible; }
.ring__track {
  fill: none; stroke: var(--stroke); stroke-width: 6;
}
.ring__fill {
  fill: none; stroke-width: 6; stroke-linecap: round;
  stroke-dasharray: 553;             /* 2πr, r = 88 */
  stroke-dashoffset: 553;            /* JS animates this down */
  transition: stroke-dashoffset 1.4s var(--ease);
}
.ring__fill--violet { stroke: var(--violet-soft); filter: drop-shadow(0 0 10px rgb(167 139 250 / 0.75)); }
.ring__fill--cyan   { stroke: var(--cyan-soft);   filter: drop-shadow(0 0 10px rgb(103 232 249 / 0.75)); }
.ring__fill--emerald { stroke: var(--emerald-soft); filter: drop-shadow(0 0 10px rgb(52 211 153 / 0.75)); }

.ring-face { display: grid; justify-items: center; line-height: 1; }
.ring-face__num {
  font-size: var(--step-3); font-weight: 200;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--ink), var(--ink-dim));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.ring-face__unit {
  font-size: var(--step--1); letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--ink-faint);
  margin-top: 0.5rem;
}
.ring-card__title { font-size: var(--step-1); font-weight: 500; }
.ring-card__sub   { font-size: var(--step--1); color: var(--ink-faint); }

.hero__line {
  max-width: 42ch; margin: var(--space-l) auto var(--space-m);
  color: var(--ink-dim); font-size: var(--step-1); font-weight: 300;
  text-wrap: balance;
}
.hero__actions {
  display: flex; gap: var(--space-s); flex-wrap: wrap; justify-content: center;
}

/* ── 6. Buttons ──────────────────────────────────────────────── */
.btn {
  position: relative; overflow: hidden;
  padding: 0.78em 1.7em;
  border-radius: 999px;
  font-size: var(--step-0); font-weight: 500;
  border: 1px solid var(--stroke-hi);
  background: var(--glass);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: transform 0.28s var(--ease), background 0.28s, border-color 0.28s, box-shadow 0.28s;
}
/* Only the translucent variants swap to the lighter glass on hover —
   scoping this to :not() keeps the solid variants' own backgrounds,
   which a bare `.btn:hover` would out-specify and erase. */
.btn:not(.btn--primary):not(.btn--danger):hover { background: var(--glass-hi); }
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.98); }

.btn--primary {
  border-color: transparent; color: #08101c; font-weight: 650;
  background: linear-gradient(120deg, var(--cyan-soft), var(--violet-soft));
  box-shadow: 0 8px 30px -8px rgb(103 232 249 / 0.55);
  backdrop-filter: none; -webkit-backdrop-filter: none;   /* opaque already */
}
.btn--primary:hover {
  background: linear-gradient(120deg, #7dd3fc, #c4b5fd);
  box-shadow: 0 14px 40px -10px rgb(139 92 246 / 0.7);
}
/* Sweeping sheen on the primary action */
.btn__glow {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 0.55) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: sheen 4.5s var(--ease-io) infinite;
  pointer-events: none;
}
@keyframes sheen { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

.btn--ghost { color: var(--ink-dim); }
.btn--ghost:hover { color: var(--ink); }
.btn--danger { background: var(--rose); border-color: transparent; color: #fff;
  backdrop-filter: none; -webkit-backdrop-filter: none; }
.btn--danger:hover { background: #fb556c; }
.btn--danger-ghost {
  font-size: var(--step--1); padding: 0.55em 1.1em;
  color: rgb(244 63 94 / 0.85); border-color: rgb(244 63 94 / 0.3);
}
.btn--danger-ghost:hover { color: #fff; background: rgb(244 63 94 / 0.18); }
.btn.is-done { pointer-events: none; opacity: 0.55; }

.linkbtn {
  font-size: var(--step--1); color: var(--ink-faint);
  text-decoration: underline; text-underline-offset: 3px;
  transition: color 0.2s;
}
.linkbtn:hover { color: var(--ink); }
.linkbtn--danger:hover { color: var(--rose); }
.panel__tools { display: flex; gap: var(--space-s); flex-wrap: wrap; }

/* The check-in button is disabled until the day is actually over. */
.btn.is-waiting {
  pointer-events: none; opacity: 0.4;
  background: var(--glass); color: var(--ink-dim);
  box-shadow: none;
}
.btn.is-waiting .btn__glow { display: none; }

/* ── Panels ──────────────────────────────────────────────────── */
.panel {
  margin-top: var(--space-l);
  padding: var(--space-m);
  background: var(--glass);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 24px 60px -30px rgb(0 0 0 / 0.9),
              inset 0 1px 0 rgb(255 255 255 / 0.06);
}
.panel__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-s); flex-wrap: wrap;
  margin-bottom: var(--space-m);
}
.panel__head h3 {
  font-size: var(--step-1); font-weight: 500; letter-spacing: -0.01em;
}
.panel__note { font-size: var(--step--1); color: var(--ink-faint); }

/* ── Check-in toggles ────────────────────────────────────────── */
.today-grid {
  display: grid; gap: var(--space-s);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.check {
  display: flex; align-items: flex-start; gap: 0.9rem;
  padding: var(--space-s);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s, transform 0.3s var(--ease);
}
.check:hover { border-color: var(--stroke-hi); transform: translateY(-2px); }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box {
  flex: 0 0 auto;
  width: 26px; height: 26px; margin-top: 2px;
  border: 1.5px solid var(--stroke-hi);
  border-radius: 9px;
  display: grid; place-items: center;
  transition: background 0.3s var(--ease), border-color 0.3s, transform 0.3s var(--ease);
}
.check__box::after {
  content: ""; width: 11px; height: 6px;
  border-left: 2.5px solid #08101c; border-bottom: 2.5px solid #08101c;
  transform: rotate(-45deg) scale(0); opacity: 0;
  transition: transform 0.35s var(--ease), opacity 0.2s;
}
.check input:checked + .check__box {
  background: linear-gradient(140deg, var(--cyan-soft), var(--violet-soft));
  border-color: transparent;
}
.check input:checked + .check__box::after { transform: rotate(-45deg) scale(1); opacity: 1; }
.check input:checked ~ .check__text strong { color: var(--cyan-soft); }
.check input:focus-visible + .check__box { outline: 2px solid var(--cyan-soft); outline-offset: 3px; }
.check__text { display: grid; gap: 0.15rem; }
.check__text strong { font-weight: 550; transition: color 0.3s; }
.check__text small  { color: var(--ink-faint); font-size: var(--step--1); }

.reset-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-s); flex-wrap: wrap;
  margin-top: var(--space-m); padding-top: var(--space-m);
  border-top: 1px solid var(--stroke);
}
.reset-row__label { font-size: var(--step--1); color: var(--ink-faint); }
.reset-row__btns { display: flex; gap: var(--space-xs); flex-wrap: wrap; }

/* ── Heatmap ─────────────────────────────────────────────────── */
.legend { display: flex; gap: var(--space-s); flex-wrap: wrap; }
.legend__item {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: var(--step--1); color: var(--ink-faint);
}
.sw { width: 11px; height: 11px; border-radius: 3.5px; display: inline-block; }
.sw--empty     { background: var(--glass-hi); border: 1px solid var(--stroke); }
.sw--clean     { background: rgb(139 92 246 / 0.42); }
.sw--confirmed { background: linear-gradient(140deg, var(--cyan-soft), var(--violet-soft)); }
.sw--relapse   { background: rgb(244 63 94 / 0.75); }

.heatmap-scroll { overflow-x: auto; padding-bottom: 0.5rem; }
.heatmap {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 1fr);
  gap: 5px;
  min-width: max-content;
}
.cell {
  width: clamp(11px, 1.5vw, 16px); aspect-ratio: 1;
  border-radius: 4px;
  background: var(--glass-hi);
  border: 1px solid var(--stroke);
  transition: transform 0.2s var(--ease), box-shadow 0.2s;
}
.cell:hover { transform: scale(1.45); box-shadow: 0 0 0 1px var(--stroke-hi); z-index: 3; }
.cell--clean     { background: rgb(139 92 246 / 0.42); border-color: transparent; }
.cell--confirmed {
  background: linear-gradient(140deg, var(--cyan-soft), var(--violet-soft));
  border-color: transparent;
  box-shadow: 0 0 10px rgb(103 232 249 / 0.45);
}
.cell--relapse { background: rgb(244 63 94 / 0.75); border-color: transparent; }
.cell--today   { outline: 1.5px solid var(--ink); outline-offset: 2px; }
.cell--future  { opacity: 0.25; }

/* ── Stats ───────────────────────────────────────────────────── */
.stats {
  display: grid; gap: var(--space-s);
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
}
.stat {
  display: grid; gap: 0.2rem;
  padding: var(--space-s);
  border-radius: var(--radius);
  background: rgb(255 255 255 / 0.025);
  border: 1px solid var(--stroke);
  transition: transform 0.3s var(--ease), border-color 0.3s;
}
.stat:hover { transform: translateY(-3px); border-color: var(--stroke-hi); }
.stat__num {
  font-size: var(--step-2); font-weight: 250;
  font-variant-numeric: tabular-nums; letter-spacing: -0.03em;
}
.stat__lbl { font-size: var(--step--1); color: var(--ink-faint); }

/* ── Hour-of-day chart ───────────────────────────────────────
   One series (urges) as bars, plus a reserved status mark for
   resets. Bar colour is validated against both surfaces — see
   README. Text never wears the series colour.               */
:root { --chart-bar: #8b5cf6; --chart-slip: #f43f5e; }

.chart__lead {
  font-size: var(--step-0); color: var(--ink-dim);
  max-width: 52ch; margin-bottom: var(--space-s);
}
.chart__lead b { color: var(--ink); font-weight: 600; }

.chart-legend { display: flex; gap: var(--space-s); flex-wrap: wrap; margin-bottom: var(--space-s); }
.sw--urge { background: var(--chart-bar); }
.sw--slip { background: var(--chart-slip); border-radius: 50%; }

.chart {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 2px;                       /* 2px surface gap between adjacent bars */
  align-items: end;
  height: clamp(110px, 18vw, 170px);
  border-bottom: 1px solid var(--stroke);
  padding-bottom: 1px;
}
.col { position: relative; display: flex; align-items: flex-end; height: 100%; }
.col__bar {
  width: 100%;
  background: var(--chart-bar);
  border-radius: 4px 4px 0 0;     /* rounded data-end, anchored to baseline */
  min-height: 2px;
  transition: height 0.7s var(--ease), opacity 0.2s;
}
.col--empty .col__bar { background: var(--stroke); min-height: 2px; }
.col:hover .col__bar { opacity: 0.75; }
/* Reset marker sits below the baseline so it never reads as magnitude. */
.col__slip {
  position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--chart-slip);
}
.col__peak {
  position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  font-size: var(--step--1); color: var(--ink); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Native tooltip on each column — hover layer without extra JS. */
.chart-axis {
  display: grid; grid-template-columns: repeat(24, 1fr);
  gap: 2px; margin-top: 12px;
}
.chart-axis span {
  font-size: 0.62rem; color: var(--ink-faint); text-align: center;
  font-variant-numeric: tabular-nums;
}

.chart-table {
  width: 100%; margin-top: var(--space-m);
  border-collapse: collapse; font-size: var(--step--1);
}
.chart-table caption { text-align: left; color: var(--ink-faint); padding-bottom: 0.5rem; }
.chart-table th, .chart-table td {
  text-align: left; padding: 0.35rem 0.6rem;
  border-bottom: 1px solid var(--stroke); color: var(--ink-dim);
}
.chart-table th { color: var(--ink-faint); font-weight: 500; }

/* ── Modal note field ────────────────────────────────────────── */
.modal__field { display: grid; gap: 0.4rem; }
.modal__field > span { font-size: var(--step--1); color: var(--ink-dim); }
.modal__field small { font-size: 0.72rem; color: var(--ink-faint); }
.modal__field textarea {
  width: 100%; resize: vertical;
  padding: 0.6rem 0.7rem;
  font: inherit; font-size: var(--step--1); color: var(--ink);
  background: rgb(255 255 255 / 0.04);
  border: 1px solid var(--stroke-hi);
  border-radius: 12px;
}
.modal__field textarea::placeholder { color: var(--ink-faint); }

/* ── Log notes ───────────────────────────────────────────────── */
.log__note {
  display: block; color: var(--ink-faint); font-style: italic;
  margin-top: 0.2rem;
}

/* ── Milestones ──────────────────────────────────────────────── */
.milestones { display: grid; gap: 0.55rem; }
.ms {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center; gap: 0.9rem;
  padding: 0.7rem var(--space-s);
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  transition: background 0.3s, border-color 0.3s;
}
.ms__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--stroke-hi);
  transition: background 0.4s, box-shadow 0.4s;
}
.ms__name { font-size: var(--step-0); color: var(--ink-dim); }
.ms__days { font-size: var(--step--1); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.ms.is-hit {
  background: rgb(139 92 246 / 0.1);
  border-color: rgb(167 139 250 / 0.35);
}
.ms.is-hit .ms__dot  { background: var(--violet-soft); box-shadow: 0 0 12px var(--violet-soft); }
.ms.is-hit .ms__name { color: var(--ink); }
.ms.is-next { border-color: rgb(34 211 238 / 0.45); }
.ms.is-next .ms__dot { background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: pulse 2s infinite; }

/* ── Log ─────────────────────────────────────────────────────── */
.log { display: grid; gap: 0.4rem; max-height: 320px; overflow-y: auto; }
.log li {
  display: flex; gap: 0.8rem; align-items: baseline;
  padding: 0.55rem var(--space-xs);
  border-bottom: 1px solid var(--stroke);
  font-size: var(--step--1);
}
.log li:last-child { border-bottom: 0; }
.log__time { color: var(--ink-faint); font-family: var(--mono); flex: 0 0 auto; }
.log__msg  { color: var(--ink-dim); }
.log__empty { color: var(--ink-faint); justify-content: center; }

/* ── 7. Overlays ─────────────────────────────────────────────── */
.foot {
  margin-top: var(--space-xl); text-align: center;
  font-size: var(--step--1); color: var(--ink-faint);
}
.foot__dim { opacity: 0.55; margin-top: 0.3rem; }

.urge {
  position: fixed; inset: 0; z-index: 50;
  display: block;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-m);
  background: rgb(4 5 12 / 0.88);
  backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px);
  animation: fade-in 0.5s var(--ease);
}
.urge[hidden] { display: none; }
.urge__inner {
  display: grid;
  justify-items: center;
  gap: var(--space-m);
  text-align: center;
  width: min(520px, 100%);
  margin: 0 auto;
  padding-block: var(--space-m);
  min-height: calc(100vh - 2 * var(--space-m));
  align-content: center;
}

.breather { position: relative; display: grid; place-items: center;
  width: clamp(200px, 42vmin, 320px); aspect-ratio: 1; }
.breather__ring, .breather__core {
  position: absolute; border-radius: 50%;
  transition: transform 4s var(--ease-io), opacity 4s var(--ease-io);
}
.breather__ring {
  inset: 0;
  border: 1px solid rgb(103 232 249 / 0.4);
  transform: scale(0.42);
}
.breather__core {
  inset: 12%;
  background: radial-gradient(circle at 35% 30%, var(--cyan-soft), var(--violet) 75%);
  filter: blur(2px);
  opacity: 0.45; transform: scale(0.42);
}
.breather.is-in  .breather__ring,
.breather.is-in  .breather__core { transform: scale(1); opacity: 0.85; }
.breather.is-hold .breather__ring,
.breather.is-hold .breather__core { transform: scale(1); opacity: 0.85; }
.breather__word {
  position: relative; z-index: 2;
  font-size: var(--step-1); font-weight: 300; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink);
}
.urge__count  { font-size: var(--step--1); color: var(--ink-faint); letter-spacing: 0.1em; }
.urge__prompt {
  max-width: 34ch; font-size: var(--step-1); font-weight: 300;
  color: var(--ink-dim); text-wrap: balance; min-height: 3.2em;
}
.urge__actions { display: flex; gap: var(--space-s); flex-wrap: wrap; justify-content: center; }

.modal {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center; padding: var(--space-m);
  background: rgb(4 5 12 / 0.7); backdrop-filter: blur(8px);
  animation: fade-in 0.25s var(--ease);
  overflow-y: auto;
}
#resetDataModal, #dialogModal {
  z-index: 120;
}
.modal[hidden] { display: none; }
.modal__card {
  width: min(420px, 100%);
  max-height: min(90vh, 720px);
  overflow-y: auto;
  display: grid; gap: 0.7rem;
  padding: var(--space-m);
  background: var(--bg-2);
  border: 1px solid var(--stroke-hi);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.9);
  animation: pop 0.35s var(--ease);
}
.modal__card h4 { font-size: var(--step-1); font-weight: 500; }
.modal__card p  { color: var(--ink-dim); font-size: var(--step--1); }
.modal__actions { display: flex; gap: var(--space-xs); justify-content: flex-end; margin-top: 0.4rem; }

.toast {
  position: fixed; left: 50%; bottom: var(--space-m); z-index: 150;
  transform: translate(-50%, 140%);
  padding: 0.7em 1.4em;
  font-size: var(--step--1);
  background: var(--bg-2);
  border: 1px solid var(--stroke-hi);
  border-radius: 999px;
  box-shadow: 0 18px 50px -16px rgb(0 0 0 / 0.9);
  transition: transform 0.55s var(--ease), opacity 0.4s;
  opacity: 0; pointer-events: none;
  max-width: calc(100% - 2rem); text-align: center;
}
.toast.is-up { transform: translate(-50%, 0); opacity: 1; }

/* ── 8. Motion ───────────────────────────────────────────────── */
@keyframes fade-in { from { opacity: 0; } }
@keyframes pop { from { transform: scale(0.94) translateY(10px); opacity: 0; } }

/* Scroll-reveal: set by IntersectionObserver in app.js */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Celebration burst on a successful check-in */
.spark {
  position: fixed; z-index: 45; pointer-events: none;
  width: 7px; height: 7px; border-radius: 50%;
  animation: spark 1.1s var(--ease) forwards;
}
@keyframes spark {
  to { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  #field { display: none; }
}

/* ── 9. Responsive tweaks ────────────────────────────────────── */
@media (max-width: 640px) {
  .hero { padding-block: var(--space-l) var(--space-m); }
  .reset-row { flex-direction: column; align-items: stretch; }
  .reset-row__btns .btn { flex: 1; }
  .topbar { justify-content: center; }
}

/* ── 10. Behavioral Safety & Emergency Urge Upgrades ──────────── */
.chaser-banner {
  margin-bottom: var(--space-m);
  padding: 0.9rem var(--space-m);
  background: linear-gradient(135deg, rgb(244 63 94 / 0.16), rgb(251 191 36 / 0.16));
  border: 1px solid rgb(244 63 94 / 0.45);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--ink);
  font-size: var(--step--1);
  box-shadow: 0 10px 30px -10px rgb(244 63 94 / 0.25);
  animation: fade-in 0.4s var(--ease);
}
.chaser-banner[hidden] { display: none; }
.chaser-banner__icon { font-size: 1.4rem; flex: 0 0 auto; }
.chaser-banner__text strong { color: #f87171; display: block; font-size: var(--step-0); margin-bottom: 0.15rem; }
.chaser-banner__text span { color: var(--ink-dim); }

.urge__reality {
  background: rgb(251 191 36 / 0.12);
  border: 1px solid rgb(251 191 36 / 0.35);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  max-width: 440px;
  text-align: center;
  margin-block: 0.2rem;
}
.urge__reality p {
  color: var(--amber);
  font-size: var(--step--1);
  font-weight: 500;
  line-height: 1.45;
}

.circuit-checklist {
  width: min(440px, 100%);
  display: grid;
  gap: 0.5rem;
  text-align: left;
  background: var(--bg-2);
  border: 1px solid var(--stroke-hi);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
.circuit-checklist__title {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--violet);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.25rem;
}
.circuit-check {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  cursor: pointer;
  font-size: var(--step--1);
  color: var(--ink) !important;
  font-weight: 500;
  user-select: none;
  transition: color 0.2s, opacity 0.2s;
}
.circuit-check input {
  accent-color: var(--cyan);
  width: 17px; height: 17px;
  margin-top: 2px;
  cursor: pointer;
  flex: 0 0 auto;
}
.circuit-check.is-checked {
  color: var(--ink) !important;
  text-decoration: none;
  opacity: 1;
}

/* Soft Cascade Drop-Down Entry Animation */
@keyframes softCascadeDrop {
  0% {
    opacity: 0;
    transform: translateY(-32px) scale(0.96);
    filter: blur(4px);
  }
  65% {
    opacity: 0.92;
    transform: translateY(4px) scale(1.005);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px);
  }
}

.cascade-flow {
  animation: softCascadeDrop 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: transform, opacity, filter;
}

.cascade-delay-1 { animation-delay: 0.05s; opacity: 0; }
.cascade-delay-2 { animation-delay: 0.15s; opacity: 0; }
.cascade-delay-3 { animation-delay: 0.25s; opacity: 0; }
.cascade-delay-4 { animation-delay: 0.35s; opacity: 0; }
.cascade-delay-5 { animation-delay: 0.45s; opacity: 0; }
.cascade-delay-6 { animation-delay: 0.55s; opacity: 0; }

.urge__note-field {
  width: min(440px, 100%);
  display: grid;
  gap: 0.35rem;
  text-align: left;
}
.urge__note-field label {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.urge__note-field textarea {
  width: 100%;
  resize: vertical;
  padding: 0.6rem 0.8rem;
  font: inherit;
  font-size: var(--step--1);
  color: var(--ink);
  background: rgb(255 255 255 / 0.05);
  border: 1px solid var(--stroke-hi);
  border-radius: 12px;
}
.urge__note-field textarea::placeholder {
  color: var(--ink-faint);
}

/* ── 11. UI/UX Refinements (Timer, Tabs, Tooltip, Float Bar) ───── */
.chaser-timer {
  font-family: var(--mono);
  font-size: 0.78rem;
  padding: 0.25em 0.7em;
  background: rgb(244 63 94 / 0.22);
  border: 1px solid rgb(244 63 94 / 0.45);
  border-radius: 999px;
  color: #fca5a5;
  margin-left: auto;
  white-space: nowrap;
}

.urge-tabs {
  display: flex;
  gap: 0.35rem;
  background: rgb(255 255 255 / 0.05);
  padding: 0.3rem;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  width: min(460px, 100%);
  margin-bottom: 0.4rem;
}
.urge-tab {
  flex: 1;
  padding: 0.45rem 0.6rem;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--ink-faint);
  border-radius: 999px;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.urge-tab.is-active {
  background: var(--glass-hi);
  color: var(--ink);
  border: 1px solid var(--stroke-hi);
}

.urge-step-panel {
  width: min(460px, 100%);
  display: grid;
  justify-items: center;
  gap: var(--space-m);
  animation: fade-in 0.3s var(--ease);
}
.urge-step-panel[hidden] { display: none; }

.float-bar {
  position: fixed;
  bottom: var(--space-s);
  left: 50%;
  transform: translate(-50%, 140%);
  z-index: 40;
  transition: transform 0.4s var(--ease);
}
.float-bar.is-visible {
  transform: translate(-50%, 0);
}
.float-bar .btn {
  box-shadow: 0 12px 36px -8px rgb(0 0 0 / 0.85), 0 0 24px rgb(139 92 246 / 0.45);
}

.cell-tooltip {
  position: fixed;
  z-index: 80;
  pointer-events: none;
  background: var(--bg-2);
  border: 1px solid var(--stroke-hi);
  border-radius: 12px;
  padding: 0.6rem 0.85rem;
  font-size: var(--step--1);
  color: var(--ink);
  box-shadow: 0 16px 44px -10px rgb(0 0 0 / 0.95);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  max-width: 280px;
}
.cell-tooltip.is-show {
  opacity: 1;
  transform: translateY(0);
}
.cell-tooltip__date { font-weight: 600; color: var(--ink); margin-bottom: 0.2rem; display: block; }
.cell-tooltip__status { color: var(--ink-dim); font-size: 0.76rem; }
.cell-tooltip__note { color: var(--amber); font-style: italic; margin-top: 0.3rem; display: block; font-size: 0.74rem; line-height: 1.35; }

/* ── 12. Daily Wisdom Panel ──────────────────────────────────── */
.wisdom-panel {
  margin-top: var(--space-l);
  padding: var(--space-m);
  background: linear-gradient(135deg, rgb(139 92 246 / 0.08), rgb(34 211 238 / 0.08));
  border: 1px solid var(--stroke-hi);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  display: grid;
  gap: 0.7rem;
  box-shadow: 0 20px 50px -25px rgb(0 0 0 / 0.8);
}
.wisdom__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
}
.wisdom__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--cyan-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.wisdom__quote {
  font-size: var(--step-0);
  font-weight: 300;
  color: var(--ink);
  line-height: 1.65;
}
.wisdom__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  margin-top: 0.2rem;
}
.wisdom__cat {
  font-size: var(--step--1);
  color: var(--ink-faint);
  font-family: var(--mono);
}

/* ── 13. Gender Themes & Milestone Unlocks ───────────────────── */
html[data-user-gender="her"],
:root[data-user-gender="her"] {
  --violet:      #e879f9;
  --violet-soft: #f0abfc;
  --cyan:        #fb7185;
  --cyan-soft:   #fda4af;
  --emerald:     #34d399;
  --emerald-soft: #6ee7b7;
  --bg:          #16081e;
  --bg-2:        #230d30;
  --glass:       rgba(232 121 249 / 0.07);
  --glass-hi:    rgba(232 121 249 / 0.14);
  --stroke:      rgba(232 121 249 / 0.18);
  --stroke-hi:   rgba(232 121 249 / 0.35);
}

html[data-user-gender="her"] body {
  background-color: var(--bg);
}

/* Light Mode Ambiance Overrides */
html[data-theme="light"][data-user-gender="her"],
:root[data-theme="light"][data-user-gender="her"] {
  --bg:          #fdf0f5;
  --bg-2:        #ffffff;
  --ink:         #2d063b;
  --ink-dim:     #581c6d;
  --ink-faint:   #86289b;
  --violet:      #d946ef;
  --violet-soft: #e879f9;
  --cyan:        #f43f5e;
  --cyan-soft:   #fb7185;
  --glass:       rgba(255 255 255 / 0.9);
  --glass-hi:    #ffffff;
  --stroke:      rgba(217 70 239 / 0.18);
  --stroke-hi:   rgba(217 70 239 / 0.35);
}

html[data-theme="light"][data-user-gender="her"] body {
  background: linear-gradient(135deg, #fdf0f5 0%, #fbf0f7 50%, #f8e8f2 100%) !important;
  color: #2d063b !important;
}

html[data-theme="light"]:not([data-user-gender="her"]) body {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
  color: #0f172a !important;
}

html[data-theme-style="gold"],
:root[data-theme-style="gold"] {
  --violet:      #f59e0b;
  --violet-soft: #fbbf24;
  --cyan:        #d97706;
  --cyan-soft:   #fcd34d;
  --bg:          #0f0d07;
  --bg-2:        #1f1a0e;
}

/* ── 14. Topbar Greeting & Header ────────────────────────────── */
.topbar__user {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}
.user-greeting {
  font-size: var(--step--1);
  color: var(--ink-dim);
  font-weight: 400;
}
.icon-btn {
  background: var(--glass);
  border: 1px solid var(--stroke);
  color: var(--ink);
  padding: 0.4rem 0.65rem;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.2s var(--ease);
}
.icon-btn:hover {
  background: var(--glass-hi);
  border-color: var(--stroke-hi);
}

/* ── 15. Onboarding Overlay Wizard ───────────────────────────── */
.onboarding {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg);
  display: grid;
  place-items: center;
  padding: var(--space-m);
}
.onboarding[hidden] { display: none !important; }
.onboarding__card {
  max-width: 580px;
  max-height: min(90vh, 640px);
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--stroke-hi);
  border-radius: var(--radius-lg);
  padding: var(--space-l);
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.95);
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  position: relative;
  overflow-y: auto;
}

@media (min-width: 768px) {
  .onboarding__card {
    max-width: 680px;
    padding: var(--space-l) var(--space-xl);
  }
  .onboarding-options {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  .onboarding-option {
    padding: 0.85rem 1rem;
  }
  .onboarding-option__label {
    font-size: var(--step-0);
  }
}
.onboarding__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.2rem;
}
.onboarding__brand .brand__mark {
  width: 16px;
  height: 16px;
}
.onboarding__brand .brand__name {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--ink);
}
.onboarding__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
}
.onboarding__close {
  background: transparent;
  border: none;
  color: var(--ink-faint);
  font-size: 1.4rem;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius);
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
  line-height: 1;
}
.onboarding__close:hover {
  color: var(--ink);
  background: var(--glass);
}
@keyframes fadeInStep {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.onboarding-step {
  animation: fadeInStep 0.35s var(--ease);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.onboarding-step[hidden] { display: none !important; }
.onboarding__progress {
  height: 4px;
  background: var(--stroke);
  border-radius: 4px;
  overflow: hidden;
}
.onboarding__progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--violet), var(--cyan));
  transition: width 0.3s var(--ease);
}
.onboarding__title {
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.3rem;
}
.onboarding__desc {
  font-size: var(--step-0);
  color: var(--ink-dim);
  line-height: 1.4;
  margin-bottom: 0.4rem;
}
.onboarding-options {
  display: grid;
  gap: var(--space-s);
}
.onboarding-option {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding: 0.85rem 1rem;
  background: var(--glass);
  border: 1.5px solid var(--stroke);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s var(--ease);
  text-align: left;
}
.onboarding-option:hover,
.onboarding-option.is-selected {
  background: var(--glass-hi);
  border-color: var(--cyan);
  box-shadow: 0 0 20px rgb(34 211 238 / 0.2);
}
.onboarding-option__icon { font-size: 1.6rem; }
.onboarding-option__label { font-weight: 600; color: var(--ink); display: block; }
.onboarding-option__sub { font-size: var(--step--1); color: var(--ink-faint); margin-top: 0.15rem; display: block; }

.input-field {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--glass);
  border: 1px solid var(--stroke-hi);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: var(--step-0);
  font-family: var(--font);
}
.input-field:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgb(34 211 238 / 0.2);
}

/* ── 16. Subscription Lock Modal ─────────────────────────────── */
.sub-lock-card {
  text-align: center;
  display: grid;
  gap: var(--space-m);
}
.lock-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  background: rgb(244 63 94 / 0.15);
  border: 1px solid rgb(244 63 94 / 0.4);
  border-radius: 999px;
  color: var(--rose);
  font-size: var(--step--1);
  font-weight: 600;
  margin: 0 auto;
}
.price-pill {
  font-size: var(--step-2);
  font-weight: 700;
  color: var(--cyan-soft);
  margin: 0.3rem 0;
}
.price-sub { font-size: var(--step--1); color: var(--ink-faint); }

#btnSubUnlock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 1.4rem;
  line-height: 1;
  white-space: nowrap;
}

/* ── 17. Secret Admin Dashboard ──────────────────────────────── */
.admin-card {
  max-width: 720px;
  max-height: min(90vh, 720px);
  overflow-y: auto;
  width: 100%;
  display: grid;
  gap: var(--space-m);
}
.admin-table-wrap {
  overflow-x: auto;
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
  text-align: left;
}
.admin-table th, .admin-table td {
  padding: 0.75rem var(--space-s);
  border-bottom: 1px solid var(--stroke);
}
.admin-table th {
  color: var(--ink-faint);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}
.admin-table td { color: var(--ink); }
.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-s);
}
.admin-stat-card {
  background: var(--glass);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: var(--space-s);
  text-align: center;
}
.admin-stat-card__val { font-size: var(--step-1); font-weight: 700; color: var(--cyan-soft); }
.admin-stat-card__lbl { font-size: 0.75rem; color: var(--ink-faint); text-transform: uppercase; margin-top: 0.2rem; }

/* ── Mobile Layout & Responsiveness (< 640px) ──────────────── */
@media (max-width: 640px) {
  .topbar {
    padding-block: var(--space-s);
  }
  .topbar__actions {
    gap: 0.4rem;
  }
  .topbar__actions #pillDate {
    display: none; /* Hide date on small mobile screens to keep header clean */
  }
  .pill--greeting {
    width: 100%;
    justify-content: center;
    text-align: center;
    font-size: var(--step--1);
  }
  .hero {
    padding-block: var(--space-l) var(--space-m);
  }
  .rings {
    gap: var(--space-m);
  }
  .ring-card {
    padding: var(--space-m) var(--space-s);
    width: 100%;
    max-width: 320px;
  }
  .ring-wrap {
    width: clamp(160px, 45vw, 210px);
  }
  .chaser-banner {
    flex-direction: column;
    text-align: center;
    gap: 0.6rem;
  }
}