/* Direction: FitQuest 30 — electric purple, coral, sunny yellow, mint and sky on soft lavender; rounded, playful display type */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #f6f3ff;
  --surface: #fbfaff;
  --surface-2: #ebe7f4;
  --border: #ddd3f7;
  --border-strong: #b1adbc;
  --ink: #14183a;
  --muted: #565b7d;
  --accent: #7c3aed;
  --accent-hover: #6931c9;
  --accent-ink: #ffffff;
  --accent-text: #6d28d9;
  --accent-strong: #7235da;
  --accent-soft: #e5d9fc;
  --accent-border: #bfa0f7;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #dbe5e8;
  --success-strong: #116d34;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #eee0e1;
  --warning-strong: #994607;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #efd9e4;
  --danger-strong: #b91c1c;
  --chart-1: #7c3aed;
  --chart-2: #ee2096;
  --chart-3: #894201;
  --chart-4: #858b1d;
  --chart-5: #0b6451;
  --chart-6: #0a92c6;

  --font-display: "Fredoka", "Nunito", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, sans-serif;
  --display-weight: 700;
  --radius-card: 22px;
  --radius-btn: 16px;
  --radius-input: 14px;
  --x-purple: #7c3aed;
  --x-coral: #ff5c8a;
  --x-sun: #ffc83d;
  --x-mint: #2fd4a0;
  --x-sky: #38b6ff;
  --x-on-bright: #14183a;
  --x-on-photo: #ffffff;
  --gradient-hero: linear-gradient(135deg, #6d28d9 0%, #a21caf 55%, #db2777 100%);
  --gradient-sun: linear-gradient(135deg, #ffc83d, #ff5c8a);
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Nunito", system-ui, sans-serif;
  --display-tracking: -0.02em;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #0a0514;
  --surface: #231e2c;
  --surface-2: #161220;
  --border: #2c2835;
  --border-strong: #54505b;
  --ink: #f6f3ff;
  --muted: #9894a1;
  --accent: #7c3aed;
  --accent-hover: #9058f0;
  --accent-ink: #ffffff;
  --accent-text: #a171f1;
  --accent-strong: #a171f1;
  --accent-soft: #231144;
  --accent-border: #3d1d76;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #0c201d;
  --success-strong: #499c68;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #2f1612;
  --warning-strong: #c57a40;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #310a16;
  --danger-strong: #d16969;
  --chart-1: #8242f4;
  --chart-2: #f62c9c;
  --chart-3: #c36208;
  --chart-4: #8b920f;
  --chart-5: #20957a;
  --chart-6: #1c98cd;
}

/* FitQuest 30 — the game-like bits no primitive covers. Tokens only. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); }

/* colour families */
.t-purple { background: color-mix(in srgb, var(--x-purple) 20%, transparent); }
.t-coral  { background: color-mix(in srgb, var(--x-coral) 22%, transparent); }
.t-sun    { background: color-mix(in srgb, var(--x-sun) 28%, transparent); }
.t-mint   { background: color-mix(in srgb, var(--x-mint) 24%, transparent); }
.t-sky    { background: color-mix(in srgb, var(--x-sky) 24%, transparent); }
.s-purple { background: var(--x-purple); color: var(--x-on-photo); }
.s-coral  { background: var(--x-coral); color: var(--x-on-bright); }
.s-sun    { background: var(--x-sun); color: var(--x-on-bright); }
.s-mint   { background: var(--x-mint); color: var(--x-on-bright); }
.s-sky    { background: var(--x-sky); color: var(--x-on-bright); }

/* brand */
.logo-tile { position: relative; display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 0.8rem; background: var(--gradient-hero); color: var(--x-on-photo); flex: none; }
.logo-db { width: 1.35rem; height: 1.35rem; transform: rotate(-35deg); }
.logo-bolt { position: absolute; right: -0.35rem; bottom: -0.35rem; display: grid; place-items: center; width: 1.2rem; height: 1.2rem; border-radius: 999px; background: var(--x-sun); color: var(--x-on-bright); }
.logo-bolt .icon { width: 0.7rem; height: 0.7rem; }
.logo-30 { display: inline-block; margin-left: 0.15rem; padding: 0.1rem 0.45rem; border-radius: 0.55rem; background: var(--x-sun); color: var(--x-on-bright); }
.avatar { display: inline-grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; }
.avatar-sm { width: 1.75rem; height: 1.75rem; font-size: 0.65rem; }
.avatar-lg { width: 4rem; height: 4rem; font-size: 1.3rem; }
.avatar-xl { width: 6rem; height: 6rem; font-size: 2rem; }

/* navigation */
.side { position: fixed; inset: 0 auto 0 0; z-index: 30; width: 16rem; flex-direction: column; background: var(--surface); border-right: 1px solid var(--border); }
.navlink { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem; border-radius: 0.9rem; font-weight: 800; color: var(--ink); cursor: pointer; transition: background 0.15s, transform 0.15s; }
.navlink:hover { background: var(--accent-soft); }
.navlink:active { transform: scale(0.98); }
.navlink:focus-visible, .bn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.navlink.is-active { background: var(--accent); color: var(--accent-ink); }
.navlink .icon { width: 1.25rem; height: 1.25rem; }
.nav-count { margin-left: auto; min-width: 1.4rem; padding: 0 0.4rem; border-radius: 999px; background: var(--x-coral); color: var(--x-on-bright); font-size: 0.75rem; font-weight: 800; text-align: center; }
@media (max-width: 1023px) {
  .topbar { display: flex; position: sticky; top: 0; z-index: 20; align-items: center; justify-content: space-between; padding: 0.6rem 1rem; background: var(--surface); border-bottom: 1px solid var(--border); }
  .bottomnav { display: flex; position: fixed; inset: auto 0 0 0; z-index: 30; justify-content: space-around; padding: 0.25rem 0.25rem calc(0.25rem + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); }
}
.bn { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; min-width: 4rem; padding: 0.45rem 0.5rem; border-radius: 0.8rem; font-size: 0.72rem; font-weight: 800; color: var(--muted); background: none; border: 0; cursor: pointer; }
.bn .icon { width: 1.35rem; height: 1.35rem; }
.bn.is-active { color: var(--accent-text); background: var(--accent-soft); }

/* flashes, celebration */
.flash { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.75rem 1rem; margin-bottom: 1rem; border: 1.5px solid var(--border); border-radius: 1rem; font-weight: 700; }
.flash .icon { flex: none; margin-top: 0.15rem; }
.flash-ok { background: color-mix(in srgb, var(--x-mint) 22%, transparent); border-color: var(--x-mint); }
.flash-err { background: color-mix(in srgb, var(--x-coral) 22%, transparent); border-color: var(--x-coral); }
.flash-info { background: color-mix(in srgb, var(--x-sky) 22%, transparent); border-color: var(--x-sky); }
.celebrate { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; margin-bottom: 1rem; border-radius: 1.25rem; background: var(--gradient-sun); color: var(--x-on-bright); animation: pop 0.6s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes pop { from { transform: translateY(-14px) scale(0.96); } }
.confetti-piece { position: fixed; top: -16px; z-index: 100; width: 10px; height: 14px; border-radius: 2px; pointer-events: none; animation: confetti-fall 2.8s ease-in forwards; }
.cf0 { background: var(--x-purple); } .cf1 { background: var(--x-coral); } .cf2 { background: var(--x-sun); } .cf3 { background: var(--x-mint); } .cf4 { background: var(--x-sky); }
@keyframes confetti-fall { to { transform: translate3d(var(--dx), 108vh, 0) rotate(720deg); } }

/* auth */
.auth-art { position: relative; overflow: hidden; min-height: 100vh; background: var(--gradient-hero); }
.auth-art img { position: absolute; inset: 0; z-index: 0; }
.auth-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(160deg, color-mix(in srgb, var(--x-purple) 88%, transparent), color-mix(in srgb, var(--x-coral) 62%, transparent)); }
.auth-art > div { position: relative; z-index: 10; }
.pill-on { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.8rem; border-radius: 999px; background: color-mix(in srgb, var(--x-on-photo) 22%, transparent); font-weight: 800; }
.demo-note { padding: 0.75rem 1rem; border-radius: 1rem; border: 1.5px dashed var(--x-sun); background: color-mix(in srgb, var(--x-sun) 22%, transparent); font-size: 0.875rem; }

/* hero & stats */
.hero-card { position: relative; overflow: hidden; padding: 1.5rem; border-radius: 1.75rem; background: var(--gradient-hero); color: var(--x-on-photo); box-shadow: var(--shadow-card); }
.hero-card::after { content: ""; position: absolute; right: -3rem; top: -3rem; width: 14rem; height: 14rem; border-radius: 999px; background: color-mix(in srgb, var(--x-sun) 35%, transparent); pointer-events: none; }
.hero-card > * { position: relative; z-index: 1; }
.hero-card .ring-track { stroke: color-mix(in srgb, var(--x-on-photo) 30%, transparent); }
.hero-card .ring-label { color: var(--x-on-photo); }
@media (min-width: 768px) { .hero-card { padding: 2rem; } }
.stat { display: flex; flex-direction: column; gap: 0.35rem; }
.stat-num { font-family: var(--font-display); font-size: 2rem; font-weight: 700; line-height: 1; }
.stat-num small { font-size: 0.85rem; font-weight: 700; color: var(--muted); }
.stat-label { font-size: 0.8rem; font-weight: 800; color: var(--muted); }
.stat-note { font-size: 0.75rem; color: var(--muted); }
.tile { display: inline-grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 0.8rem; }
.tile-lg { width: 3.5rem; height: 3.5rem; font-size: 1.9rem; border-radius: 1.1rem; }
.stat-mini { padding: 1rem; border-radius: 1.1rem; text-align: center; font-weight: 700; }
.stat-mini b { display: block; font-family: var(--font-display); font-size: 1.7rem; }
.act { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.75rem; border-radius: 0.9rem; background: var(--surface-2); }

/* rings & bars */
.ring-wrap { position: relative; display: inline-flex; flex: none; }
.ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 10; stroke-linecap: round; }
.ring-track { stroke: var(--border); }
.ring-fill { stroke-dasharray: 276.5; animation: ring-in 1s ease-out; }
@keyframes ring-in { from { stroke-dashoffset: 276.5; } }
.ring-label { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; }
.bar { height: 0.8rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 999px; transform-origin: left; animation: bar-in 0.9s ease-out; }
@keyframes bar-in { from { transform: scaleX(0.05); } }

/* status chips & calendars */
.stchip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.55rem; border-radius: 999px; border: 1.5px solid var(--border); font-size: 0.75rem; font-weight: 800; color: var(--ink); }
.stchip .icon { width: 0.85rem; height: 0.85rem; }
.stchip.st-done { background: color-mix(in srgb, var(--x-mint) 28%, transparent); border-color: var(--x-mint); }
.stchip.st-today { background: color-mix(in srgb, var(--x-coral) 26%, transparent); border-color: var(--x-coral); }
.stchip.st-upcoming { background: var(--surface-2); }
.stchip.st-missed { background: color-mix(in srgb, var(--x-sun) 30%, transparent); border-color: var(--x-sun); border-style: dashed; }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; list-style: none; padding: 0; font-size: 0.8rem; font-weight: 700; }
.key { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 0.25rem; margin-right: 0.35rem; }
.key-planned, .wk-bar.planned { background: color-mix(in srgb, var(--x-purple) 32%, transparent); }
.key-did, .wk-bar.did { background: var(--x-mint); }
.mini { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.05rem; aspect-ratio: 1; border-radius: 0.8rem; border: 1.5px solid var(--border); font-size: 0.8rem; font-weight: 800; color: var(--ink); transition: transform 0.15s; }
.mini:hover { transform: translateY(-2px); }
.mini:focus-visible, .daycard:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.icon-xs { width: 0.7rem; height: 0.7rem; }
.mini.st-done { background: color-mix(in srgb, var(--x-mint) 30%, transparent); border-color: var(--x-mint); }
.mini.st-today { background: color-mix(in srgb, var(--x-coral) 30%, transparent); border-color: var(--x-coral); }
.mini.st-upcoming { background: var(--surface-2); color: var(--muted); }
.mini.st-missed { background: color-mix(in srgb, var(--x-sun) 30%, transparent); border: 1.5px dashed var(--x-sun); }
.mini.is-cur, .daycard.is-cur { box-shadow: 0 0 0 3px var(--x-coral); }
.daycard { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; padding: 0.8rem; border-radius: 1.2rem; border: 2px solid var(--border); background: var(--surface); text-align: left; cursor: pointer; color: var(--ink); transition: transform 0.15s, box-shadow 0.15s; }
.daycard:hover { transform: translateY(-3px); }
.daycard:active { transform: scale(0.98); }
.daycard.st-done { background: color-mix(in srgb, var(--x-mint) 20%, var(--surface)); border-color: var(--x-mint); }
.daycard.st-today { background: color-mix(in srgb, var(--x-coral) 18%, var(--surface)); border-color: var(--x-coral); }
.daycard.st-upcoming { background: var(--surface-2); }
.daycard.st-missed { background: color-mix(in srgb, var(--x-sun) 16%, var(--surface)); border: 2px dashed var(--x-sun); }
.daynum { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; line-height: 1; }
.dayname { font-weight: 800; line-height: 1.2; }
.daymeta { font-size: 0.75rem; color: var(--muted); font-weight: 700; }
.modal-lg { width: min(42rem, calc(100% - 1.5rem)); max-width: 42rem; }

/* weekly chart */
.wk-chart { display: flex; align-items: flex-end; gap: 0.75rem; height: 11.5rem; }
.wk-col { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 0.3rem; height: 100%; justify-content: flex-end; }
.wk-bars { display: flex; align-items: flex-end; gap: 0.25rem; width: 100%; height: 7.5rem; border-bottom: 2px solid var(--border); }
.wk-bar { flex: 1; min-height: 3px; border-radius: 0.5rem 0.5rem 0 0; transform-origin: bottom; animation: bar-up 0.8s ease-out; }
@keyframes bar-up { from { transform: scaleY(0.1); } }
.wk-nums { font-size: 0.8rem; font-weight: 800; }
.wk-label { font-size: 0.75rem; font-weight: 700; color: var(--muted); }
.wk-col.is-cur .wk-label { color: var(--accent-text); font-weight: 800; }

/* habits */
.habit { display: flex; align-items: center; gap: 0.75rem; min-height: 3rem; padding: 0.6rem 0.8rem; border-radius: 1rem; border: 1.5px solid var(--border); background: var(--surface); font-weight: 700; cursor: pointer; transition: background 0.15s; }
.habit:hover { background: var(--surface-2); }
.habit.is-on { background: color-mix(in srgb, var(--x-mint) 24%, transparent); border-color: var(--x-mint); }
.habit-box { width: 1.3rem; height: 1.3rem; accent-color: var(--accent); }
.hgrid { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.hgrid th, .hgrid td { padding: 0.4rem 0.3rem; text-align: center; }
.hgrid tbody tr { border-top: 1px solid var(--border); }
.cell-on, .cell-off { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 999px; font-weight: 800; }
.cell-on { background: var(--x-mint); color: var(--x-on-bright); }
.cell-off { background: var(--surface-2); color: var(--muted); }

/* streaks & badges */
.flame { font-size: 3.5rem; line-height: 1; animation: flicker 1.8s ease-in-out infinite; transform-origin: bottom center; }
.flame-lg { font-size: 6rem; }
@keyframes flicker { 0%, 100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.1) rotate(3deg); } }
.mini-badge { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0.8rem 0.5rem; border-radius: 1.1rem; text-align: center; }
.badge-card { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 1.1rem 0.8rem; border-radius: 1.3rem; border: 2px solid var(--border); text-align: center; list-style: none; transition: transform 0.2s; }
.badge-card:not(.is-locked):hover { transform: translateY(-3px) rotate(-1deg); }
.badge-emoji { font-size: 3rem; line-height: 1.1; }
.badge-card.is-locked { background: var(--surface-2); border-style: dashed; }
.badge-card.is-locked .badge-emoji { filter: grayscale(1); opacity: 0.6; }

/* workouts */
.wcard { overflow: hidden; display: flex; flex-direction: column; }
.wcover { position: relative; aspect-ratio: 5 / 3; overflow: hidden; }
.wemoji { position: absolute; left: 0.75rem; top: 0.75rem; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 999px; background: var(--surface); font-size: 1.3rem; box-shadow: var(--shadow-card); }
.wdone { position: absolute; right: 0.75rem; top: 0.75rem; display: inline-flex; gap: 0.25rem; align-items: center; padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--x-mint); color: var(--x-on-bright); font-size: 0.75rem; font-weight: 800; }
.wdone .icon { width: 0.8rem; height: 0.8rem; }
.timer { padding: 1rem 1.25rem; border-radius: 1.3rem; background: var(--surface-2); }
.timer-display { font-family: var(--font-display); font-size: 3.5rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.timer.is-running .timer-display { color: var(--accent-text); }

/* water */
.bottle { display: flex; flex-direction: column; align-items: center; flex: none; }
.bottle-cap { width: 2.2rem; height: 1rem; border-radius: 0.4rem 0.4rem 0 0; background: var(--x-purple); }
.bottle-body { position: relative; width: 7.5rem; height: 12rem; overflow: hidden; border: 4px solid var(--border); border-radius: 1.8rem 1.8rem 1.4rem 1.4rem; background: var(--surface-2); }
.bottle-fill { position: absolute; inset: auto 0 0 0; background: linear-gradient(180deg, var(--x-sky), var(--x-purple)); transition: height 0.8s ease; animation: fill-up 1s ease-out; }
@keyframes fill-up { from { transform: translateY(30%); } }
.bottle-pct { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 1.8rem; font-weight: 700; color: var(--x-on-bright); text-shadow: 0 0 6px var(--surface); }

/* community, leaderboard */
.feat { border: 2px solid var(--accent); }
.lb { display: flex; align-items: center; gap: 0.75rem; padding: 0.8rem 1rem; border-radius: 1.3rem; border: 1.5px solid var(--border); background: var(--surface); list-style: none; }
.lb-top { box-shadow: var(--shadow-card); }
.lb-me { border: 3px solid var(--accent); background: var(--accent-soft); }
.lb-rank { width: 2.6rem; flex: none; text-align: center; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; }

/* journal & notifications */
.mood { position: relative; cursor: pointer; }
.mood input { position: absolute; opacity: 0; inset: 0; }
.mood span { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 999px; border: 2px solid var(--border); font-size: 1.5rem; transition: transform 0.15s; }
.mood:hover span { transform: scale(1.1); }
.mood input:checked + span { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent); }
.mood input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 3px; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.35rem; text-align: center; }
.cal > span:not(.cal-day) { font-size: 0.75rem; font-weight: 800; color: var(--muted); }
.cal-day { display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 0.8rem; background: var(--surface-2); font-size: 1.1rem; color: var(--ink); }
.cal-day small { font-size: 0.65rem; font-weight: 800; color: var(--muted); line-height: 1; }
.cal-day.has { background: color-mix(in srgb, var(--x-mint) 28%, transparent); border: 1.5px solid var(--x-mint); }
.notif { display: flex; align-items: flex-start; gap: 0.8rem; padding: 1rem; border-radius: 1.2rem; border: 1.5px solid var(--border); background: var(--surface); list-style: none; }
.notif.unread { border-left: 6px solid var(--accent); background: var(--accent-soft); }
.tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tabs .tab { padding: 0.5rem 1rem; border-radius: 999px; border: 1.5px solid var(--border); background: var(--surface); font-weight: 800; color: var(--ink); }
.tabs .tab.is-active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* access */
.big-text { zoom: 1.12; }
.reduce-motion *, html.reduced-motion * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }