/* =====================================================================
   Mochi Quit — kawaii design system
   Mobile-first, soft pastel, pillowy rounded everything.
   ===================================================================== */

:root {
  /* Palette — soft pastel pinks + sweet accents */
  --pink-50:  #fff5f8;
  --pink-100: #ffebf0;
  --pink-150: #ffe0ea;
  --pink-200: #ffd0de;
  --pink-300: #ffb7c5;
  --pink-400: #ff9ab0;
  --pink-500: #ff7e9d;

  --cream:    #fffaf3;
  --milk:     #ffffff;
  --lavender: #e7defc;
  --mint:     #cdeede;
  --sky:      #d6ecff;
  --butter:   #fff3cf;

  --ink:        #6b4a57;   /* deep pink-brown, never pure black */
  --ink-soft:   #9c7d89;
  --ink-faint:  #c2a7b1;

  --good: #57c79a;
  --warn: #ffae6b;
  --bad:  #ff8398;

  --grad-pink: linear-gradient(135deg, #ffd0de 0%, #ffb7c5 55%, #ff9ab0 100%);
  --grad-soft: linear-gradient(135deg, #fff5f8 0%, #ffe0ea 100%);
  --grad-mint: linear-gradient(135deg, #d8f6e8 0%, #b5ead7 100%);

  /* Soft pastel shadows for the floating feel */
  --shadow-sm: 0 4px 14px rgba(255, 160, 185, 0.18);
  --shadow:    0 10px 30px rgba(255, 150, 180, 0.22);
  --shadow-lg: 0 18px 48px rgba(255, 140, 175, 0.28);
  --shadow-in: inset 0 2px 6px rgba(255, 170, 195, 0.30);

  /* Semantic surfaces (overridden by dark theme) */
  --card-edge: #ffffff;   /* subtle light edge on cards/tiles */
  --raise:     #ffffff;   /* raised bits: active segment, selected chip, inset boxes */
  --chrome-bg: rgba(255, 245, 248, 0.86); /* sticky top bar + bottom nav */
  --ins-good-bg: #eefaf3; --ins-good-bd: #cfeede;
  --ins-warn-bg: #fff4ea; --ins-warn-bd: #ffe1c6;
  --ins-info-bg: #eef4ff; --ins-info-bd: #d6e4ff;

  /* Pillowy radii */
  --r-sm: 14px;
  --r:    22px;
  --r-lg: 32px;
  --r-xl: 42px;
  --r-pill: 999px;

  /* Rounded, friendly fonts with FULL Slovak (Latin Extended) coverage so
     diacritics like č ľ ť ž š ý í render in the same font as everything else. */
  --font-head: 'Baloo 2', 'Nunito', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, -apple-system, sans-serif;

  --maxw: 720px;
}

/* ===== Dark theme — soft plum night, still cute & pastel ============ */
[data-theme="dark"] {
  --pink-50:  #211a28;   /* page base */
  --pink-100: #38304a;   /* chip / bar track */
  --pink-150: #473a5a;   /* borders / dashes */
  --pink-200: #57496b;
  --pink-300: #ffb1c4;
  --pink-400: #ff9bb4;
  --pink-500: #ffa9c1;   /* brighter accent for dark bg */

  --cream:    #2b2336;   /* inputs */
  --milk:     #2f2740;   /* cards / sheets / toast */
  --lavender: #393159;
  --mint:     #2c4a3f;
  --sky:      #2a3b52;
  --butter:   #4a4226;

  --ink:        #f3e7ef;
  --ink-soft:   #c5b2c5;
  --ink-faint:  #95849a;

  --good: #6fd6aa;
  --warn: #ffc08a;
  --bad:  #ff90a6;

  --grad-pink: linear-gradient(135deg, #ff9ab0 0%, #f47f9f 55%, #e06a8e 100%);
  --grad-soft: linear-gradient(135deg, #2f2740 0%, #3a2f4d 100%);
  --grad-mint: linear-gradient(135deg, #2f6f59 0%, #3f9072 100%);

  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.35);
  --shadow:    0 10px 30px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.5);
  --shadow-in: inset 0 2px 6px rgba(0, 0, 0, 0.35);

  --card-edge: #3e3450;
  --raise:     #463a58;
  --chrome-bg: rgba(26, 21, 33, 0.9);
  --ins-good-bg: #1e3a30; --ins-good-bd: #2c5a48;
  --ins-warn-bg: #3a2e22; --ins-warn-bd: #5a4630;
  --ins-info-bg: #21304a; --ins-info-bd: #34465f;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
/* Stop the rubber-band overscroll bounce that can lift fixed elements. */
html, body { overscroll-behavior-y: none; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--ink);
  background:
    radial-gradient(1200px 500px at 50% -10%, var(--pink-150), transparent 60%),
    radial-gradient(900px 400px at 100% 100%, var(--lavender), transparent 55%),
    var(--pink-50);
  background-attachment: fixed;
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 96px; /* room for bottom nav on mobile */
}

h1, h2, h3 { font-family: var(--font-head); font-weight: 600; color: var(--ink); margin: 0 0 .4em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .8em; }
a { color: var(--pink-500); text-decoration: none; }

/* ---- Layout shell ------------------------------------------------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 14px 16px 24px; }

/* Consistent vertical rhythm between every top-level block so nothing
   sits flush against the thing above it (mascot bubble, bare grids, etc.). */
.wrap > * { margin-bottom: 16px; }
.wrap > *:last-child { margin-bottom: 0; }
.wrap > script,
.wrap > .sheet-backdrop,
.wrap > .sheet { margin-bottom: 0; }

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: var(--chrome-bg);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--pink-150);
}
.topbar .brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-head); font-size: 1.1rem; }
.topbar .brand small { font-family: var(--font-body); font-weight: 600; color: var(--ink-soft); font-size: .7rem; }
.topbar .spacer { flex: 1; }
.topbar .pill-link {
  background: var(--milk); border: 2px solid var(--pink-150);
  padding: 6px 12px; border-radius: var(--r-pill);
  font-size: .82rem; font-weight: 700; color: var(--ink-soft);
  box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s;
}
.topbar .pill-link:active { transform: scale(.94); }
/* Free up room for the language + settings pills on narrow phones. */
@media (max-width: 560px) {
  .topbar .brand small { display: none; }
  .topbar .pill-link { padding: 6px 10px; font-size: .78rem; }
}

/* ---- Cards -------------------------------------------------------- */
.card {
  background: var(--milk);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 18px;
  margin-bottom: 16px;
  border: 2px solid var(--card-edge);
  position: relative;
  overflow: hidden;
}
.card.tint-pink { background: var(--grad-soft); }
.card .card-title {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-size: 1rem; margin-bottom: 12px;
}
.card .card-title .emo { font-size: 1.15rem; }
.muted { color: var(--ink-soft); }
.tiny { font-size: .76rem; }
.center { text-align: center; }

/* Grids */
.grid { display: grid; gap: 12px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 420px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }

/* ---- Stat tiles --------------------------------------------------- */
.stat {
  background: var(--grad-soft);
  border-radius: var(--r);
  padding: 14px;
  text-align: center;
  border: 2px solid var(--card-edge);
  box-shadow: var(--shadow-sm);
}
.stat .num { font-family: var(--font-head); font-size: 1.5rem; color: var(--pink-500); line-height: 1.1; }
.stat .lbl { font-size: .72rem; color: var(--ink-soft); font-weight: 700; letter-spacing: .02em; }
.stat .sub { font-size: .68rem; color: var(--ink-faint); }

/* ---- Buttons ------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 800; font-size: .95rem;
  color: var(--ink); cursor: pointer; user-select: none;
  border: none; border-radius: var(--r-pill);
  padding: 13px 20px;
  background: var(--milk);
  box-shadow: var(--shadow-sm);
  transition: transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .15s, filter .15s;
}
.btn:active { transform: scale(.93); }
.btn:focus-visible { outline: 3px solid var(--lavender); outline-offset: 2px; }
.btn-primary { background: var(--grad-pink); color: #fff; box-shadow: var(--shadow); text-shadow: 0 1px 2px rgba(214,90,120,.35); }
.btn-mint  { background: var(--grad-mint); }
.btn-ghost { background: var(--pink-100); color: var(--ink-soft); }
.btn-block { display: flex; width: 100%; }
.btn-lg { padding: 18px 22px; font-size: 1.05rem; }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* The big juicy log button */
.log-fab {
  width: 100%;
  background: var(--grad-pink);
  color: #fff;
  border: none;
  border-radius: var(--r-xl);
  padding: 22px;
  font-family: var(--font-head);
  font-size: 1.25rem;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  position: relative;
  transition: transform .14s cubic-bezier(.34,1.56,.64,1);
  text-shadow: 0 2px 4px rgba(214,90,120,.4);
}
.log-fab:active { transform: scale(.95); }
.log-fab .hint { display: block; font-family: var(--font-body); font-size: .8rem; font-weight: 700; opacity: .92; margin-top: 4px; }

/* ---- Chips / tags ------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: var(--r-pill);
  background: var(--pink-100); border: 2px solid transparent;
  font-weight: 700; font-size: .85rem; color: var(--ink);
  cursor: pointer; transition: transform .12s, border-color .15s, box-shadow .15s;
}
.chip:active { transform: scale(.92); }
.chip.selected { border-color: var(--pink-400); background: var(--raise); box-shadow: var(--shadow-sm); }
.chip .dot { width: 10px; height: 10px; border-radius: 50%; }

/* segmented control */
.segment { display: flex; background: var(--pink-100); border-radius: var(--r-pill); padding: 4px; gap: 4px; }
.segment button {
  flex: 1; border: none; background: transparent; cursor: pointer;
  padding: 10px; border-radius: var(--r-pill); font-weight: 800; color: var(--ink-soft);
  font-family: var(--font-body); transition: background .18s, color .18s, box-shadow .18s;
}
.segment button.active { background: var(--raise); color: var(--pink-500); box-shadow: var(--shadow-sm); }

/* ---- Progress bars ------------------------------------------------ */
.bar { height: 16px; background: var(--pink-100); border-radius: var(--r-pill); overflow: hidden; box-shadow: var(--shadow-in); }
.bar > span { display: block; height: 100%; border-radius: var(--r-pill); background: var(--grad-pink); transition: width .8s cubic-bezier(.22,1,.36,1); }
.bar.mint > span { background: var(--grad-mint); }
.bar.over > span { background: linear-gradient(135deg,#ffb38a,#ff8398); }

/* limit meter */
.limit-meter { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.limit-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--pink-100); box-shadow: var(--shadow-in); transition: transform .2s, background .2s; }
.limit-dot.filled { background: var(--grad-pink); transform: scale(1.05); }
.limit-dot.over { background: linear-gradient(135deg,#ffb38a,#ff8398); }

/* ---- Live timer --------------------------------------------------- */
.timer {
  font-family: var(--font-head);
  font-size: 2.4rem;
  letter-spacing: .02em;
  color: var(--pink-500);
  text-align: center;
  line-height: 1.1;
}
.timer .u { font-size: .9rem; color: var(--ink-faint); }
.timer-wrap { text-align: center; padding: 8px 0; }

/* ---- Health milestones ------------------------------------------- */
.milestone { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--pink-150); }
.milestone:last-child { border-bottom: none; }
.milestone .ic { font-size: 1.5rem; width: 38px; text-align: center; flex: none; }
.milestone .body { flex: 1; min-width: 0; }
.milestone .body .t { font-weight: 800; font-size: .9rem; display:flex; justify-content: space-between; gap: 8px;}
.milestone .body .d { font-size: .74rem; color: var(--ink-soft); }
.milestone.done { opacity: .98; }
.milestone .ms-when { flex: none; color: var(--ink-faint); font-weight: 800; white-space: nowrap; }
.milestone.done .ms-when { color: var(--good); }

/* ---- Insights ----------------------------------------------------- */
.insight { display: flex; gap: 10px; padding: 11px 13px; border-radius: var(--r); margin-bottom: 8px; background: var(--cream); border: 2px solid var(--pink-100); }
.insight .ie { font-size: 1.2rem; flex: none; }
.insight.good { background: var(--ins-good-bg); border-color: var(--ins-good-bd); }
.insight.warn { background: var(--ins-warn-bg); border-color: var(--ins-warn-bd); }
.insight.info { background: var(--ins-info-bg); border-color: var(--ins-info-bd); }
.insight p { margin: 0; font-size: .86rem; }

/* ---- Achievements ------------------------------------------------- */
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px,1fr)); gap: 10px; }
.badge { text-align: center; padding: 12px 6px; border-radius: var(--r); background: var(--grad-soft); border: 2px solid var(--card-edge); box-shadow: var(--shadow-sm); }
.badge.locked { filter: grayscale(1); opacity: .42; }
.badge .bi { font-size: 1.8rem; }
.badge .bt { font-size: .68rem; font-weight: 800; margin-top: 4px; }

/* ---- Mascot ------------------------------------------------------- */
.mq-mascot { display: block; }
.mascot-bubble {
  display: flex; align-items: center; gap: 12px;
  background: var(--grad-soft); border: 2px solid var(--card-edge);
  border-radius: var(--r-lg); padding: 14px; box-shadow: var(--shadow);
}
.mascot-bubble .speech { flex: 1; }
.mascot-bubble .speech .name { font-family: var(--font-head); color: var(--pink-500); font-size: .85rem; }
.mascot-bubble .speech p { margin: 2px 0 0; font-size: .9rem; }
.float { animation: float 4s ease-in-out infinite; }
@keyframes float { 0%,100%{ transform: translateY(0)} 50%{ transform: translateY(-7px)} }
.squish { animation: squish .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes squish { 0%{transform:scale(1)} 40%{transform:scale(1.12,.88)} 70%{transform:scale(.94,1.06)} 100%{transform:scale(1)} }

/* ---- Bottom navigation (mobile-first) ----------------------------- */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; justify-content: space-around;
  background: var(--chrome-bg);
  backdrop-filter: blur(12px);
  border-top: 2px solid var(--pink-150);
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 30px rgba(255,150,180,.18);
}
.bottom-nav a {
  flex: 1; min-width: 0; text-align: center; color: var(--ink-faint);
  font-size: .6rem; font-weight: 800; padding: 4px 0; border-radius: var(--r);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .15s, transform .15s;
}
.bottom-nav a .ni { display: block; font-size: 1.3rem; margin-bottom: 1px; transition: transform .2s; }
@media (max-width: 360px) { .bottom-nav a { font-size: .54rem; } .bottom-nav a .ni { font-size: 1.2rem; } }
.bottom-nav a.active { color: var(--pink-500); }
.bottom-nav a.active .ni { transform: translateY(-2px) scale(1.12); }
.bottom-nav a:active { transform: scale(.9); }

/* ---- Forms -------------------------------------------------------- */
label.field { display: block; margin-bottom: 14px; }
label.field > span { display: block; font-weight: 800; font-size: .82rem; margin-bottom: 6px; color: var(--ink-soft); }
input, select, textarea {
  width: 100%; min-width: 0; max-width: 100%; font-family: var(--font-body); font-weight: 600; font-size: 1rem;
  color: var(--ink); background: var(--cream);
  border: 2px solid var(--pink-150); border-radius: var(--r);
  padding: 13px 15px; transition: border-color .15s, box-shadow .15s;
}
/* Native date/time fields: keep them tidy and inside their box on mobile
   (keep the native picker — just stop them overflowing their container). */
input[type="date"], input[type="time"] {
  border-radius: var(--r-sm);
  min-height: 48px;
  overflow: hidden;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--pink-400); box-shadow: var(--shadow-sm); }
textarea { resize: vertical; min-height: 70px; }
.row { display: flex; gap: 10px; }
.row > * { flex: 1; min-width: 0; }   /* min-width:0 lets date/time inputs shrink instead of overflowing */

/* ---- Auth pages --------------------------------------------------- */
.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.auth-card { width: 100%; max-width: 400px; }
.auth-logo { text-align: center; margin-bottom: 8px; }
.auth-logo .title { font-family: var(--font-head); font-size: 1.7rem; color: var(--pink-500); }

/* ---- Toast / sparkle --------------------------------------------- */
.toast {
  position: fixed; left: 50%; bottom: 110px; transform: translateX(-50%) translateY(20px);
  background: var(--milk); border: 2px solid var(--pink-200);
  color: var(--ink); font-weight: 800; padding: 12px 20px; border-radius: var(--r-pill);
  box-shadow: var(--shadow-lg); z-index: 60; opacity: 0; pointer-events: none;
  transition: opacity .3s, transform .3s; max-width: 90vw; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.sparkle { position: fixed; pointer-events: none; font-size: 1.4rem; z-index: 70; animation: pop 1s ease-out forwards; }
@keyframes pop {
  0% { transform: translate(0,0) scale(.4); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1.3); opacity: 0; }
}

/* ---- Modal sheet -------------------------------------------------- */
.sheet-backdrop {
  position: fixed; inset: 0; background: rgba(107,74,87,.35);
  backdrop-filter: blur(3px); z-index: 80; opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.sheet-backdrop.open { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--milk); border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--shadow-lg); padding: 20px 18px calc(24px + env(safe-area-inset-bottom));
  transform: translateY(110%); transition: transform .32s cubic-bezier(.22,1,.36,1);
  max-width: var(--maxw); margin: 0 auto; max-height: 88vh; overflow-y: auto;
}
.sheet.open { transform: translateY(0); }
.sheet .grab { width: 44px; height: 5px; border-radius: 99px; background: var(--pink-200); margin: 0 auto 14px; }

/* ---- Misc --------------------------------------------------------- */
.divider { height: 2px; background: var(--pink-100); border-radius: 99px; margin: 14px 0; }
.flex { display: flex; align-items: center; gap: 8px; }
.between { justify-content: space-between; }
.wrap-gap { gap: 10px; flex-wrap: wrap; }
.list-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--pink-150); }
.list-row:last-child { border-bottom: none; }
.entry-row { cursor: pointer; border-radius: var(--r-sm); transition: background .15s, transform .12s; }
.entry-row:hover { background: var(--pink-50); }
.entry-row:active { transform: scale(.99); }
.tag-pill { font-size: .72rem; font-weight: 800; padding: 3px 10px; border-radius: 99px; background: var(--pink-100); color: var(--ink-soft); }
.fade-in { animation: fadeIn .5s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.stagger > * { animation: fadeIn .5s ease both; }
.stagger > *:nth-child(2){animation-delay:.05s}
.stagger > *:nth-child(3){animation-delay:.1s}
.stagger > *:nth-child(4){animation-delay:.15s}
.stagger > *:nth-child(5){animation-delay:.2s}
.stagger > *:nth-child(6){animation-delay:.25s}

canvas { max-width: 100%; }

/* Chart containers MUST have a fixed height + relative position, otherwise
   Chart.js (responsive + maintainAspectRatio:false) enters a resize feedback
   loop and the page grows downward forever. Let Chart.js size the canvas
   itself — just give it a bounded box to fill. */
.chart-box { position: relative; width: 100%; height: 260px; }
.chart-box.tall { height: 300px; }
.chart-box.short { height: 210px; }
.chart-box canvas { display: block; }

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

/* The bottom nav is pinned to the *visual* viewport by JS (app.js) so the
   mobile URL bar showing/hiding can't make it drift. Keep it solid + flat on
   phones (translucent blur repaints caused jitter). */
@media (max-width: 759px) {
  .bottom-nav { background: var(--milk); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ===== Sudden Stop (cold-turkey) skin — a fresh "freedom" palette that
   reskins the WHOLE app while the mode is active (overrides light & dark). */
body[data-mode="ss"] {
  --pink-50:  #eef9f4; --pink-100: #d7f0e6; --pink-150: #c2e8d8; --pink-200: #a9dec8;
  --pink-300: #7fd1b0; --pink-400: #4fbf97; --pink-500: #1fa97c;
  --cream: #f3fbf7; --milk: #ffffff; --lavender: #d9eefc; --mint: #cdeede; --sky: #d6ecff;
  --ink: #1f3b32; --ink-soft: #52786b; --ink-faint: #8fb0a4;
  --good: #1fa97c; --warn: #ef9a4d; --bad: #e8657f;
  --grad-pink: linear-gradient(135deg, #5fd1ac 0%, #2fb98c 55%, #1fa97c 100%);
  --grad-soft: linear-gradient(135deg, #f3fbf7 0%, #dcf3ea 100%);
  --grad-mint: linear-gradient(135deg, #bdeed9 0%, #7fd1b0 100%);
  --card-edge: #ffffff; --raise: #ffffff; --chrome-bg: rgba(238, 249, 244, 0.9);
  --shadow-sm: 0 4px 14px rgba(31, 169, 124, .16);
  --shadow: 0 10px 30px rgba(31, 169, 124, .2);
  --ins-good-bg: #e2f6ee; --ins-good-bd: #b6e6d3;
  --ins-warn-bg: #fdf0e2; --ins-warn-bd: #f6d8b6;
  --ins-info-bg: #e6f1fb; --ins-info-bd: #c8e0f3;
}

/* Sudden Stop in dark mode — deep forest-teal night. */
[data-theme="dark"] body[data-mode="ss"] {
  --pink-50:  #0f1f1a; --pink-100: #16352c; --pink-150: #1f4a3d; --pink-200: #2a5e4d;
  --pink-300: #5fd1ac; --pink-400: #3fbf97; --pink-500: #54e0b4;
  --cream: #15302a; --milk: #163029; --lavender: #1c3a4a; --mint: #1f4a3f; --sky: #1c3a4a;
  --ink: #e6f6ef; --ink-soft: #9fc6b8; --ink-faint: #6f998b;
  --good: #54e0b4; --warn: #efb36b; --bad: #ff8aa0;
  --grad-pink: linear-gradient(135deg, #2fb98c 0%, #1fa97c 100%);
  --grad-soft: linear-gradient(135deg, #163029 0%, #1f4a3d 100%);
  --grad-mint: linear-gradient(135deg, #1f4a3f 0%, #3fbf97 100%);
  --card-edge: #1f4a3d; --raise: #1f4a3d; --chrome-bg: rgba(15, 31, 26, 0.92);
  --ins-good-bg: #16352c; --ins-good-bd: #2a5e4d;
  --ins-warn-bg: #3a2e22; --ins-warn-bd: #5a4630;
  --ins-info-bg: #1c3a4a; --ins-info-bd: #2c5067;
}

/* Sudden-Stop components */
.ss-hero { background: var(--grad-pink); color: #fff; border: none; }
.ss-since { font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: .8rem; opacity: .92; }
.ss-timer { font-family: var(--font-head); font-size: 2.7rem; line-height: 1.12; margin: 6px 0; text-shadow: 0 2px 6px rgba(0,0,0,.18); }
.ss-status { font-size: .72rem; font-weight: 800; color: var(--ink-soft); white-space: nowrap; }
.ss-int { display: inline-block; font-size: .64rem; font-weight: 800; padding: 1px 7px; border-radius: 99px; vertical-align: middle; margin-left: 2px; }
.ss-int-high { background: #ffd9df; color: #b03050; }
.ss-int-mod  { background: #ffe7c9; color: #a85e1f; }
.ss-int-mild { background: #d7f0e6; color: #1f7d5c; }
/* Redesigned symptom card with a build→peak→fade→free timeline */
.sym2 { padding: 14px 0; border-bottom: 1px solid var(--pink-150); }
.sym2:last-child { border-bottom: none; }
.sym2.sym2-free { opacity: .6; }           /* eased stays in place, just faded */
.sym2-head { display: flex; gap: 12px; align-items: flex-start; }
.sym2-ic { font-size: 1.5rem; width: 42px; height: 42px; line-height: 42px; text-align: center;
  border-radius: 50%; background: var(--pink-50); flex: none; box-shadow: var(--shadow-in); }
.sym2-title { flex: 1; min-width: 0; }
.sym2-name { font-weight: 800; font-size: .95rem; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sym2-desc { margin-top: 2px; }
.sym2-phase { flex: none; font-size: .62rem; font-weight: 800; padding: 3px 9px; border-radius: 99px;
  text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; background: var(--pink-100); color: var(--ink-soft); }
.sym2-soon  .sym2-phase { background: var(--pink-100); color: var(--ink-faint); }
.sym2-build .sym2-phase { background: #fff0d6; color: #a85e1f; }
.sym2-peak  .sym2-phase { background: #ffd9df; color: #b03050; }
.sym2-fade  .sym2-phase { background: #ffe7c9; color: #a85e1f; }
.sym2-free  .sym2-phase { background: #d7f0e6; color: #1f7d5c; }
/* the timeline track: 4 fixed zones + a position marker */
.sym2-track { position: relative; height: 12px; margin: 12px 0 9px; display: flex; }
.sym2-zone { height: 100%; }
.z-build { width: 25%; background: var(--pink-150); border-radius: 99px 0 0 99px; }
.z-peak  { width: 20%; background: #ff8a9c; }
.z-fade  { width: 40%; background: linear-gradient(90deg, #ffc78a, #9fe0c2); }
.z-free  { width: 15%; background: #5fd1ac; border-radius: 0 99px 99px 0; }
.sym2-marker { position: absolute; top: -4px; width: 5px; height: 20px; border-radius: 4px;
  background: var(--ink); box-shadow: 0 0 0 2px var(--milk), var(--shadow-sm); transform: translateX(-2.5px); }
/* three key-moment stats */
.sym2-legend { display: flex; gap: 8px; }
.sym2-leg { flex: 1; text-align: center; background: var(--cream); border-radius: var(--r-sm); padding: 6px 4px; }
.sym2-leg span { display: block; font-size: .6rem; font-weight: 800; color: var(--ink-faint); }
.sym2-leg b { font-size: .78rem; }
.sym2-leg.hot  b { color: #c2435f; }
.sym2-leg.fade b { color: #a85e1f; }
.sym2-leg.free b { color: #1f9d72; }
.ss-path { position: relative; padding-left: 4px; }
.ss-stage { display: flex; gap: 12px; padding: 10px 0; position: relative; }
.ss-stage::before { content: ''; position: absolute; left: 21px; top: 0; bottom: 0; width: 3px; background: var(--pink-150); border-radius: 3px; z-index: 0; }
.ss-stage:first-child::before { top: 50%; }
.ss-stage:last-child::before { bottom: 50%; }
.ss-stage.done::before { background: var(--pink-300); }
.ss-stage-ic { font-size: 1.25rem; width: 38px; height: 38px; line-height: 38px; text-align: center; flex: none;
  position: relative; z-index: 1; border-radius: 50%; background: var(--milk); box-shadow: var(--shadow-sm);
  filter: grayscale(.6); opacity: .6; transition: all .2s; }
.ss-stage.done .ss-stage-ic { filter: none; opacity: 1; }
.ss-stage.now { background: var(--pink-50); border-radius: var(--r); }
.ss-stage.now .ss-stage-ic { filter: none; opacity: 1; transform: scale(1.12); }

/* Mountain journey (gamified climb) */
.ss-mtn { width: 100%; height: auto; display: block; border-radius: var(--r-lg); box-shadow: var(--shadow-in); }
.ss-sky-a { stop-color: var(--sky); }
.ss-sky-b { stop-color: var(--pink-50); }
.ss-mtn-far  { fill: var(--pink-150); opacity: .6; }
.ss-mtn-main { fill: var(--pink-200); }
.ss-mtn-snow { fill: #fff; opacity: .9; }
.ss-trail      { fill: none; stroke: var(--pink-300); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 9; opacity: .7; }
.ss-trail-fill { fill: none; stroke: var(--pink-500); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; transition: all .6s ease; }
.ss-node { fill: var(--milk); stroke: var(--pink-200); stroke-width: 2; }
.ss-node.done { stroke: var(--pink-400); }
.ss-node.now  { stroke: var(--pink-500); stroke-width: 3; }
.ss-node-em { font-size: 13px; text-anchor: middle; dominant-baseline: central; }
.ss-node-em.future { opacity: .5; filter: grayscale(.5); }
.ss-you-dot  { fill: var(--pink-500); stroke: #fff; stroke-width: 2.5; }
.ss-you-ring { fill: var(--pink-500); opacity: .3; transform-box: fill-box; transform-origin: center; animation: ssPulse 1.8s ease-out infinite; }
#ssYou { transition: transform .6s ease; }
@keyframes ssPulse { 0% { transform: scale(.5); opacity: .5; } 70% { transform: scale(1.7); opacity: 0; } 100% { opacity: 0; } }

/* ===== Tips & tricks ============================================== */
.tip-hero { background: var(--grad-pink); color: #fff; border: none; }
.tip-hero-row { display: flex; align-items: center; gap: 12px; }
.tip-hero-label { font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: .72rem; opacity: .92; }
.tip-hero-text { font-family: var(--font-head); font-size: 1.12rem; line-height: 1.35; margin: 5px 0 0; text-shadow: 0 1px 2px rgba(214,90,120,.32); }
.tipcat-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tipcat-ic { font-size: 1.4rem; width: 42px; height: 42px; line-height: 42px; text-align: center;
  border-radius: 50%; background: var(--grad-soft); border: 2px solid var(--card-edge); flex: none; }
.tipcat-head h2 { margin: 0; font-size: 1.05rem; }
.tip-row { display: flex; gap: 10px; align-items: flex-start; padding: 9px 2px; border-bottom: 1px dashed var(--pink-150); }
.tip-row:last-child { border-bottom: none; }
.tip-dot { flex: none; font-size: 1rem; }
.tip-row p { margin: 0; font-size: .9rem; }

/* Free-preview banner for logged-out visitors */
.preview-bar { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  background: var(--grad-pink); color: #fff; font-weight: 800; font-size: .82rem; padding: 8px 14px;
  text-shadow: 0 1px 2px rgba(214,90,120,.4); }
.preview-bar a { color: #fff; background: rgba(255,255,255,.25); padding: 3px 12px; border-radius: var(--r-pill); }

/* Quiz / onboarding steps */
.quiz-step { display: none; }
.quiz-step.active { display: block; animation: fadeIn .35s ease both; }
.quiz-step h2 { font-size: 1.05rem; margin-bottom: 14px; }

/* Selected state for full-width choice buttons (quiz mode/pace) */
.btn.selected { color: var(--pink-500); background: var(--grad-soft); box-shadow: inset 0 0 0 2px var(--pink-400), var(--shadow-sm); }

/* Desktop niceties */
@media (min-width: 760px) {
  body { padding-bottom: 24px; }
  .bottom-nav {
    position: sticky; bottom: 16px; max-width: var(--maxw); margin: 16px auto 0;
    border-radius: var(--r-pill); border: 2px solid var(--pink-150);
  }
  .desktop-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
}