/* ==========================================================================
   Zebbly — self-contained showcase demo for Karbon Consulting
   --------------------------------------------------------------------------
   A trimmed, backend-free port of the real Zebbly learning product. This
   stylesheet mirrors the current Zebbly design system so the demo looks like
   the shipping app: an indigo-cool neutral surface palette, a golden-yellow
   brand, layered hairline shadows, consistent radii/spacing tokens, "aurora
   jewel-panel" subject tiles with coin-medallion line-glyphs, and a real
   analytics-style grown-ups dashboard. Dark mode follows the visitor's OS,
   exactly like the product (whose default theme is "System").

   The kid/parent role switch + the demo note are the only chrome unique to
   this standalone showcase; everything else tracks the product 1:1.

   No build step, no dependencies. Everything persists to localStorage so the
   parental monitoring is genuinely live within the browser.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ----- Brand (golden yellow — the Zebbly mascot) -----
     The mascot art is golden yellow + near-black, so the brand pairs a warm
     yellow with dark "ink" text (primary buttons use dark text, not white).
     The deeper --brand-700 is a dark amber that stays readable on white. */
  --brand-50:  #fff6e0;
  --brand-100: #ffe9b3;
  --brand-400: #f7cf4d;
  --brand-500: #fbc82b;  /* the mascot yellow */
  --brand-600: #f0b400;
  --brand-700: #9a6600;  /* dark amber — readable as accent text on white */
  --brand:      var(--brand-600);
  --brand-soft: var(--brand-50);
  --brand-ink:  #3a2b00;  /* dark text to sit on the yellow brand surfaces */
  /* Signature gradient — one warm golden sweep used on every "hero" surface. */
  --g-brand:     linear-gradient(145deg, #ffd64a 0%, #fbc82b 44%, #f3ad00 100%);
  --accent:      #ef9e00;
  /* Crisp two-stop focus ring: a tight high-contrast edge inside a soft halo. */
  --ring: 0 0 0 1px rgba(240, 180, 0, 0.65), 0 0 0 4px rgba(251, 200, 43, 0.34);

  /* ----- Surfaces & neutrals ----- */
  --bg:            #f4f5fa;
  --bg-soft:       #e9ebf5;
  --surface:       #ffffff;
  --surface-2:     #f6f7fc;
  --border:        #e2e5f0;
  --border-strong: #cdd2e3;
  --card: var(--surface);            /* legacy alias used across older rules */

  /* ----- Text ----- */
  --ink:      #0f1629;   /* primary   */
  --ink-soft: #5a6378;   /* secondary */
  --ink-3:    #99a1b5;   /* tertiary / placeholder */

  /* ----- Semantic ----- */
  --good: #15a34a; --good-2: #22c55e; --good-soft: #dcfce7;
  --bad:  #dc2626; --bad-soft: #fee2e2;
  --warn: #d97706; --warn-soft: #fef3c7;
  --amber: #f59e0b;

  /* ----- Shadows (soft, layered) -----
     A crisp hairline contact edge + a tight near shadow + a wide soft ambient
     one — reads sharper and more defined than a single blur, while staying
     low-opacity so cards feel like they float on light, not smudged. */
  --shadow-sm: 0 0 0 1px rgba(15, 23, 42, 0.02), 0 1px 2px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 0 0 1px rgba(15, 23, 42, 0.02), 0 2px 4px -1px rgba(15, 23, 42, 0.07), 0 12px 26px -8px rgba(15, 23, 42, 0.14);
  --shadow-lg: 0 0 0 1px rgba(15, 23, 42, 0.02), 0 4px 8px -2px rgba(15, 23, 42, 0.08), 0 28px 56px -14px rgba(15, 23, 42, 0.22);
  --shadow-xl: 0 0 0 1px rgba(15, 23, 42, 0.03), 0 8px 16px -4px rgba(15, 23, 42, 0.10), 0 48px 92px -18px rgba(15, 23, 42, 0.30);
  /* Colored brand glow for hero CTAs/marks. */
  --glow-brand: 0 4px 10px -4px rgba(239, 168, 0, 0.40), 0 12px 30px -8px rgba(239, 168, 0, 0.52);

  /* ----- Radii ----- */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px;
  --radius: var(--r-xl);             /* legacy alias */

  /* ----- Rhythm (scales gently with the screen) ----- */
  --pad: clamp(16px, 2.6vmin, 30px);
  --gap: clamp(12px, 1.9vmin, 20px);

  --font-ui: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   Dark theme — follows the OS preference (the product's "System" default).
   The whole UI is variable-driven, so dark mode is mostly redefining tokens,
   with a few targeted fixes for components that hard-code light tints.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --brand-soft: rgba(251, 200, 43, 0.16);
    --ring: 0 0 0 3px rgba(251, 200, 43, 0.45);

    --bg:            #0e1220;
    --bg-soft:       #161b2b;
    --surface:       #191f30;
    --surface-2:     #212a40;
    --border:        #2b3349;
    --border-strong: #3a4259;

    --ink:      #e8ebf6;
    --ink-soft: #a7b0c6;
    --ink-3:    #717a93;

    --good: #34d399; --good-2: #34d399; --good-soft: rgba(52, 211, 153, 0.16);
    --bad:  #f87171; --bad-soft:  rgba(248, 113, 113, 0.16);
    --warn: #fbbf24; --warn-soft: rgba(251, 191, 36, 0.16);
    --amber: #fbbf24;

    --shadow-sm: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.40);
    --shadow-md: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 4px 10px rgba(0, 0, 0, 0.45), 0 12px 30px -6px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 0 0 1px rgba(0, 0, 0, 0.40), 0 8px 20px -4px rgba(0, 0, 0, 0.50), 0 24px 56px -12px rgba(0, 0, 0, 0.62);
    --shadow-xl: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 14px 34px -6px rgba(0, 0, 0, 0.55), 0 40px 84px -16px rgba(0, 0, 0, 0.72);
  }

  /* Accent text that hard-codes a lighter brand tone (brand-700 is too dark). */
  .gp-nav button.active, .range-tabs button.active, .demo-badge { color: #fbcf5b; }

  /* Warm pills (kid stars header, streak / stars) → translucent amber */
  .stars, .streak-pill, .stars-pill {
    background: rgba(251, 191, 36, 0.16); color: #fcd34d; border-color: rgba(251, 191, 36, 0.30);
  }

  /* Report-card grade letters (lighter so they pop on dark cards) */
  .grade.g-a .g-letter { color: #4ade80; }
  .grade.g-b .g-letter { color: #a3e635; }
  .grade.g-c .g-letter { color: #fbbf24; }
  .grade.g-d .g-letter { color: #fb923c; }

  /* The frosted celebration veil reads dark, not as a light wash on dark. */
  .celebrate { background: rgba(8, 11, 22, 0.74); }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; margin: 0; overscroll-behavior: none; }

body {
  font-family: var(--font-ui);
  /* Inter's stylistic sets: single-storey a, rounded numerals, tabular slashes. */
  font-feature-settings: 'cv05' 1, 'cv11' 1, 'ss01' 1;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  touch-action: manipulation;
}

/* Decorative gradient backdrop on a fixed, GPU-composited layer (no scroll
   re-rasterization) — the same warm gold + faint teal glow as the product. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1200px 680px at 100% -10%, rgba(251, 200, 43, 0.22), transparent 58%),
    radial-gradient(1000px 640px at -12% 2%, rgba(240, 180, 0, 0.13), transparent 56%),
    radial-gradient(900px 700px at 50% 120%, rgba(20, 184, 166, 0.06), transparent 60%);
}

/* Quiet, modern scrollbars for the dashboard areas */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }

:focus-visible { outline: none; box-shadow: var(--ring); }

/* ----------  App shell  ---------- */
.app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: max(var(--pad), env(safe-area-inset-top))
           max(var(--pad), env(safe-area-inset-right))
           max(var(--pad), env(safe-area-inset-bottom))
           max(var(--pad), env(safe-area-inset-left));
}

/* ----------  Demo top bar + role switch  ---------- */
.demobar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(8px, 2vmin, 16px);
  flex-wrap: wrap;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: clamp(17px, 3vmin, 24px);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.brand .brand-mark {
  width: 1.7em; height: 1.7em; flex: 0 0 auto;
  border-radius: 13px; overflow: hidden; display: inline-grid; place-items: center;
  background: var(--g-brand);
  box-shadow: var(--glow-brand), inset 0 1px 0 rgba(255, 255, 255, 0.30), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.brand .brand-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.demo-badge {
  font-size: clamp(10px, 1.8vmin, 12px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand-700);
  background: var(--brand-soft);
  border: 1px solid var(--brand-100);
  border-radius: 999px;
  padding: 3px 10px;
}
.role-switch {
  margin-left: auto;
  display: inline-flex;
  gap: 3px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  padding: 4px;
  border-radius: 999px;
}
.role-switch button {
  border: none;
  font-family: inherit;
  font-weight: 600;
  font-size: clamp(13px, 2.2vmin, 16px);
  padding: 8px 16px;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.role-switch button:hover { color: var(--ink); }
.role-switch button.active { background: var(--g-brand); color: var(--brand-ink); box-shadow: var(--glow-brand); }

.role-note {
  flex: 0 0 auto;
  margin: -4px 0 0;
  font-size: clamp(12px, 2vmin, 14px);
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 14px;
  line-height: 1.45;
  box-shadow: var(--shadow-sm);
}
.role-note b { color: var(--brand-700); }

/* ----------  Screen root  ---------- */
.screen-root {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ----------  Kid sub-header (greeting / back)  ---------- */
.kidbar { flex: 0 0 auto; display: flex; align-items: center; gap: clamp(8px, 1.6vmin, 14px); }
.kidbar .greeting { flex: 1 1 auto; min-width: 0; }
.kidbar .greeting h1 { margin: 0; font-size: clamp(20px, 4vmin, 32px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.kidbar .greeting .date { margin: 3px 0 0; font-size: clamp(12px, 2.1vmin, 16px); color: var(--ink-soft); font-weight: 500; }
.kidbar .screen-title { flex: 1 1 auto; min-width: 0; font-size: clamp(18px, 3.4vmin, 28px); font-weight: 700; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; }
.kidbar .screen-title .st-emoji { font-size: 1.1em; }

.iconbtn {
  flex: 0 0 auto; border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  width: clamp(40px, 6.6vmin, 48px); height: clamp(40px, 6.6vmin, 48px);
  border-radius: 13px; font-size: clamp(17px, 2.8vmin, 21px); font-family: inherit;
  cursor: pointer; display: grid; place-items: center;
  box-shadow: var(--shadow-sm); transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
@media (hover: hover) { .iconbtn:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); } }
.iconbtn:active { transform: scale(0.94); }

.stars {
  flex: 0 0 auto; display: flex; align-items: center; gap: 7px;
  background: linear-gradient(150deg, #fffaf0, #fff3da);
  border: 1px solid #fde9c2;
  color: #b45309;
  border-radius: 999px;
  padding: clamp(8px, 1.5vmin, 11px) clamp(13px, 2.2vmin, 18px);
  box-shadow: var(--shadow-sm);
  font-size: clamp(15px, 2.6vmin, 20px); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.stars .star-icon { font-size: 1.05em; line-height: 1; }
.stars.bump { animation: bump 0.4s ease; }
@keyframes bump { 0%,100%{transform:scale(1);} 40%{transform:scale(1.18);} }

.kidscreen { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/* ----------  Dashboard tile grid (kid home)  ---------- */
.grid {
  flex: 1 1 auto; min-height: 0; display: grid; gap: var(--gap);
  grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr;
}
@media (min-width: 720px) { .grid { grid-template-columns: repeat(3, 1fr); } }

/* Aurora jewel panel — a colored glow off the top edge over a body that sinks
   from the subject hue into a near-navy core, finished with a warm gold
   top-edge highlight. (--c3 falls back to a darkened --c2.) */
.tile {
  position: relative; border: none; border-radius: var(--r-xl);
  padding: clamp(12px, 2.4vmin, 24px); color: #fff; font-family: inherit; cursor: pointer;
  overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(8px, 1.4vmin, 14px);
  background:
    radial-gradient(94% 66% at 50% -16%, color-mix(in srgb, var(--c1) 50%, transparent), transparent 60%),
    radial-gradient(150% 130% at 88% 120%, rgba(2, 6, 23, 0.42), transparent 52%),
    linear-gradient(176deg, var(--c2), var(--c3, color-mix(in srgb, var(--c2) 44%, #0b1020)) 122%);
  box-shadow:
    0 14px 30px -10px var(--shadow, rgba(2, 6, 23, 0.30)),
    0 3px 10px -4px rgba(2, 6, 23, 0.30),
    inset 0 1px 0 rgba(255, 221, 138, 0.34),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
  opacity: 0; transform: translateY(14px) scale(0.97);
  animation: pop 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: var(--delay, 0s);
}
/* soft top sheen for a premium, app-icon feel */
.tile::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 42%);
}
.tile:active { transform: scale(0.96); filter: brightness(1.04); }
@media (hover: hover) {
  .tile:not(.locked):hover { transform: translateY(-4px); box-shadow: 0 3px 6px -1px var(--shadow, rgba(2, 6, 23, 0.18)), 0 20px 40px -8px var(--shadow, rgba(2, 6, 23, 0.28)), inset 0 1px 0 rgba(255, 255, 255, 0.30), inset 0 0 0 1px rgba(255, 255, 255, 0.10); }
}

/* Coin medallion — light rim → hue → deep core, bright top, dark underside,
   colored halo — holding the white line-glyph. */
.tile .icon {
  width: clamp(48px, 11vmin, 88px); height: clamp(48px, 11vmin, 88px);
  display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--c1), var(--c2) 55%, var(--c3, color-mix(in srgb, var(--c2) 52%, #0b1020)) 114%);
  box-shadow:
    0 0 0 1.4px rgba(255, 255, 255, 0.24),
    inset 0 2px 6px rgba(255, 255, 255, 0.36),
    inset 0 -6px 12px rgba(2, 6, 23, 0.32),
    0 10px 22px -8px rgba(2, 6, 23, 0.45),
    0 0 24px -6px color-mix(in srgb, var(--c1) 55%, transparent);
}
.tile .icon .tile-glyph { width: 52%; height: 52%; color: #fff; filter: drop-shadow(0 1.5px 2px rgba(2, 6, 23, 0.30)); }
.tile .label { font-size: clamp(15px, 2.7vmin, 25px); font-weight: 600; letter-spacing: 0.1px; text-align: center; }
.tile .set-status { font-size: clamp(11px, 1.9vmin, 15px); }

/* Locked (not today's) subjects read as "powered off" — dark, nearly grey. */
.tile.locked { filter: saturate(0.22) brightness(0.55); opacity: 0.42; box-shadow: var(--shadow-sm); cursor: pointer; }
.tile.locked .icon { box-shadow: inset 0 1px 4px rgba(255, 255, 255, 0.12), 0 4px 10px -6px rgba(2, 6, 23, 0.4); }
.tile.locked .lock { position: absolute; top: 12px; right: 14px; font-size: clamp(13px, 2.2vmin, 18px); opacity: 0.95; }

/* Today's pick is "switched on": brighter, with its own pulsing colored halo
   plus a gold ring, so against the dimmed tiles it's unmistakably live. */
.tile.active-glow { filter: saturate(1.18) brightness(1.14); animation: pop 0.5s cubic-bezier(0.22,1,0.36,1) forwards, glow 2.2s ease-in-out infinite; }
.tile.active-glow .icon {
  box-shadow:
    0 0 0 1.5px rgba(255, 255, 255, 0.35),
    inset 0 2px 6px rgba(255, 255, 255, 0.45),
    inset 0 -6px 12px rgba(2, 6, 23, 0.30),
    0 0 34px -2px color-mix(in srgb, var(--c1) 80%, transparent);
  animation: bulb 2.2s ease-in-out infinite;
}
@keyframes bulb { 0%,100% { filter: brightness(1.04); } 50% { filter: brightness(1.22); } }
.tile .today-badge,
.tile .bonus-ribbon {
  position: absolute; top: 12px; background: rgba(255, 255, 255, 0.96); color: var(--c2);
  font-weight: 700; font-size: clamp(11px, 1.8vmin, 14px); padding: 4px 11px; border-radius: 999px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}
.tile .today-badge { left: 12px; }
.tile .bonus-ribbon { right: 12px; }
@keyframes glow {
  0%,100% { box-shadow: 0 16px 34px -8px var(--shadow), 0 0 22px -2px color-mix(in srgb, var(--c1) 45%, transparent), 0 0 0 0 rgba(255,205,91,0), inset 0 1px 0 rgba(255,221,138,.45); }
  50%     { box-shadow: 0 22px 46px -8px var(--shadow), 0 0 40px 2px color-mix(in srgb, var(--c1) 62%, transparent), 0 0 0 6px rgba(255,205,91,.6), inset 0 1px 0 rgba(255,221,138,.45); }
}
@keyframes pop { to { opacity: 1; transform: translateY(0) scale(1); } }

/* ----------  Subject screen: set cards  ----------
   Set cards share the subject-tile language: aurora jewel panel with a per-set
   coin medallion, so the whole game reads as one design system. */
.sets { flex: 1 1 auto; min-height: 0; display: grid; gap: var(--gap); grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; }
.set-card {
  position: relative; border: none; border-radius: var(--r-xl); color: #fff; font-family: inherit; cursor: pointer;
  overflow: hidden; padding: clamp(16px, 2.8vmin, 28px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(7px, 1.4vmin, 12px);
  background:
    radial-gradient(94% 66% at 50% -16%, color-mix(in srgb, var(--c1) 50%, transparent), transparent 60%),
    radial-gradient(150% 130% at 88% 120%, rgba(2, 6, 23, 0.42), transparent 52%),
    linear-gradient(176deg, var(--c2), var(--c3, color-mix(in srgb, var(--c2) 44%, #0b1020)) 122%);
  box-shadow:
    0 14px 30px -10px var(--shadow, rgba(2, 6, 23, 0.30)),
    0 3px 10px -4px rgba(2, 6, 23, 0.30),
    inset 0 1px 0 rgba(255, 221, 138, 0.34),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  opacity: 0; transform: translateY(14px) scale(0.97);
  animation: pop 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: var(--delay, 0s);
  transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease;
}
@media (hover: hover) { .set-card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -12px var(--shadow, rgba(2, 6, 23, 0.42)), 0 4px 12px -4px rgba(2, 6, 23, 0.35), inset 0 1px 0 rgba(255, 221, 138, 0.42), inset 0 0 0 1px rgba(255, 255, 255, 0.08); } }
.set-card:active { transform: scale(0.98); }
.set-card .set-icon {
  width: clamp(54px, 9vmin, 76px); height: clamp(54px, 9vmin, 76px);
  display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--c1), var(--c2) 55%, var(--c3, color-mix(in srgb, var(--c2) 52%, #0b1020)) 114%);
  box-shadow:
    0 0 0 1.4px rgba(255, 255, 255, 0.24),
    inset 0 2px 6px rgba(255, 255, 255, 0.36),
    inset 0 -6px 12px rgba(2, 6, 23, 0.32),
    0 10px 22px -8px rgba(2, 6, 23, 0.45),
    0 0 24px -6px color-mix(in srgb, var(--c1) 55%, transparent);
}
.set-card .set-icon .tile-glyph { width: 50%; height: 50%; color: #fff; filter: drop-shadow(0 1.5px 2px rgba(2, 6, 23, 0.30)); }
.set-card .set-name { font-size: clamp(16px, 2.7vmin, 24px); font-weight: 700; letter-spacing: -0.01em; text-align: center; }
.set-card .set-desc { font-size: clamp(12px, 2vmin, 16px); color: rgba(255, 255, 255, 0.82); text-align: center; }
.set-card .set-status { margin-top: 2px; font-size: clamp(12px, 2vmin, 15px); font-weight: 700; color: rgba(255, 255, 255, 0.9); }
/* Finished for the day → gold ring (matching the 🏆 + the rest of the game). */
.set-card.done { box-shadow: 0 14px 30px -10px var(--shadow), 0 3px 10px -4px rgba(2, 6, 23, 0.30), inset 0 0 0 2.5px rgba(255, 205, 91, 0.85), inset 0 1px 0 rgba(255, 221, 138, 0.5); }
.set-card.done .set-status { color: #fff; }
.set-card .done-check { position: absolute; top: 12px; right: 14px; font-size: clamp(15px, 2.4vmin, 20px); }

/* ----------  Quiz  ---------- */
.quiz { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--gap); }
.progress { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; }
.progress .bar { flex: 1 1 auto; height: clamp(10px, 1.6vmin, 14px); background: var(--bg-soft); border-radius: 999px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06); }
.progress .bar > i {
  display: block; height: 100%; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, #ffd64a, var(--brand-500) 45%, var(--accent));
  box-shadow: 0 0 14px -1px rgba(239, 158, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.progress .count { flex: 0 0 auto; font-weight: 700; color: var(--ink-soft); font-size: clamp(14px, 2.4vmin, 19px); font-variant-numeric: tabular-nums; }

.qcard {
  flex: 1 1 auto; min-height: 0; position: relative;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl);
  box-shadow: var(--shadow-md); padding: clamp(16px, 3vmin, 32px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(14px, 2.4vmin, 24px); overflow-y: auto;
}
.prompt { text-align: center; font-weight: 600; line-height: 1.25; color: var(--ink); }
.prompt.equation { font-size: clamp(34px, 8vmin, 74px); font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.prompt.words { font-size: clamp(19px, 3.6vmin, 30px); max-width: 24ch; }
.prompt .blank { display: inline-block; min-width: 1.4em; border-bottom: 4px solid var(--brand-500); color: var(--brand-600); }

.answer-display {
  font-size: clamp(28px, 6.6vmin, 56px); font-weight: 800; min-width: 2.6em; min-height: 1.3em;
  padding: 6px 24px; text-align: center; border-radius: var(--r-lg);
  background: radial-gradient(120% 140% at 50% 0%, var(--brand-soft), transparent 70%), var(--surface-2);
  color: var(--brand-700); border: 1px solid var(--brand-100);
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.06);
}
.answer-display.empty { color: var(--ink-3); border-color: var(--border-strong); background: var(--surface-2); }

.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 1.6vmin, 14px); width: min(380px, 88%); }
.key {
  border: 1px solid var(--border); border-radius: var(--r-md); font-family: inherit;
  font-size: clamp(22px, 4.4vmin, 32px); font-weight: 700; padding: clamp(11px, 2.2vmin, 18px) 0;
  background: linear-gradient(180deg, var(--surface), var(--surface-2)); color: var(--ink); cursor: pointer;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: transform 0.1s ease, background 0.1s ease, box-shadow 0.1s ease, border-color 0.1s ease;
}
@media (hover: hover) { .key:hover { box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.6); border-color: var(--border-strong); transform: translateY(-1px); } }
.key:active { transform: scale(0.94); background: var(--bg-soft); box-shadow: inset 0 2px 5px rgba(15, 23, 42, 0.10); }
.key.enter { background: linear-gradient(150deg, var(--good-2), var(--good)); color: #fff; border: none; box-shadow: 0 8px 18px -4px rgba(22, 163, 74, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.key.del { background: var(--surface); color: var(--bad); }

.boxwrap { display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 2vmin, 18px); width: 100%; }
.boxgrid { display: grid; gap: clamp(5px, 1vmin, 8px); justify-content: center; }
.box { width: clamp(20px, 4.4vmin, 40px); height: clamp(20px, 4.4vmin, 40px); border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border-strong); cursor: pointer; transition: transform 0.08s ease, background 0.08s ease, border-color 0.08s ease; }
.box:active { transform: scale(0.9); }
.box.filled { background: var(--g-brand); border-color: var(--brand-700); }
.box.filled.frac { background: linear-gradient(150deg, #fbbf24, #f97316); border-color: #f97316; }
.boxcount { font-size: clamp(15px, 2.6vmin, 22px); font-weight: 700; color: var(--ink-soft); }
.boxbtns { display: flex; gap: clamp(8px, 1.6vmin, 14px); flex-wrap: wrap; justify-content: center; }

/* ----------  Buttons  ---------- */
.btn {
  border: 1px solid transparent; border-radius: var(--r-md); font-family: inherit;
  font-size: clamp(15px, 2.6vmin, 18px); font-weight: 600;
  padding: clamp(11px, 1.9vmin, 15px) clamp(18px, 3vmin, 26px); cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.12s ease, background 0.12s ease, border-color 0.12s ease, filter 0.12s ease;
}
.btn:active { transform: scale(0.97); }
.btn.primary { background: var(--g-brand); color: var(--brand-ink); box-shadow: var(--glow-brand), inset 0 1px 0 rgba(255, 255, 255, 0.30); }
@media (hover: hover) { .btn.primary:hover { filter: brightness(1.04) saturate(1.05); box-shadow: 0 14px 32px -6px rgba(239, 168, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.30); transform: translateY(-1px); } }
.btn.secondary { background: var(--surface); color: var(--ink); border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
@media (hover: hover) { .btn.secondary:hover { border-color: #c7cce0; box-shadow: var(--shadow-md); } }
.btn.ghost { background: transparent; color: var(--ink-soft); }
@media (hover: hover) { .btn.ghost:hover { background: var(--bg-soft); color: var(--ink); } }
.btn.danger { color: var(--bad); }
.btn.tiny { font-size: clamp(12px, 1.9vmin, 14px); padding: 8px 13px; border-radius: var(--r-sm); box-shadow: none; }
.btn.tiny.secondary { box-shadow: var(--shadow-sm); }

.feedback { flex: 0 0 auto; min-height: 1.2em; text-align: center; font-size: clamp(18px, 3.4vmin, 27px); font-weight: 700; }
.feedback.good { color: var(--good); }
.feedback.bad { color: var(--bad); }
.shake { animation: shake 0.4s ease; }
@keyframes shake { 0%,100%{transform:translateX(0);} 20%{transform:translateX(-8px);} 40%{transform:translateX(8px);} 60%{transform:translateX(-6px);} 80%{transform:translateX(6px);} }

.celebrate { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(244, 245, 250, 0.78); backdrop-filter: blur(6px); z-index: 20; }
.celebrate .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: clamp(24px, 4vmin, 44px); text-align: center; box-shadow: var(--shadow-xl); display: flex; flex-direction: column; gap: clamp(10px, 2vmin, 18px); align-items: center; max-width: min(420px, 90vw); }
.celebrate .big { font-size: clamp(40px, 9vmin, 80px); }
.celebrate .score { font-size: clamp(26px, 5vmin, 44px); font-weight: 800; letter-spacing: -0.02em; }
.celebrate .sub { color: var(--ink-soft); font-size: clamp(15px, 2.6vmin, 19px); }
.celebrate .actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.confetti { position: absolute; top: -10px; font-size: 22px; animation: fall 1.6s linear forwards; }
@keyframes fall { to { transform: translateY(120vh) rotate(540deg); opacity: 0; } }

.timer { flex: 0 0 auto; font-size: clamp(22px, 4.4vmin, 36px); font-weight: 800; color: var(--brand-700); text-align: center; font-variant-numeric: tabular-nums; }
.timer.low { color: var(--bad); }

/* ----------  Toast  ---------- */
.toast {
  position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(30px);
  background: #111827; color: #fff; padding: 13px 22px; border-radius: 14px; font-weight: 600; font-size: clamp(14px, 2.4vmin, 17px);
  box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 60; max-width: 86vw; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ==========================================================================
   Grown-ups (parent) dashboard — reads like a real analytics console.
   ========================================================================== */
.gp { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--gap); }
.gp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.gp-who { font-size: clamp(17px, 3vmin, 23px); font-weight: 700; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; }
.gp-who .child-name { color: var(--brand-700); }
.gp-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Primary navigation as clean underline tabs */
.gp-nav { display: flex; gap: 4px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.gp-nav button {
  border: none; background: transparent; font-family: inherit; font-weight: 600;
  font-size: clamp(14px, 2.3vmin, 16px); padding: 11px 14px; border-radius: 0;
  color: var(--ink-soft); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 0.14s ease, border-color 0.14s ease;
}
.gp-nav button:hover { color: var(--ink); }
.gp-nav button.active { color: var(--brand-700); border-bottom-color: var(--brand); }

.gp-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--gap); padding-right: 2px; }

.report-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.rh-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.streak-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--warn-soft); color: #b45309; font-weight: 600; padding: 7px 14px; border-radius: 999px; font-size: clamp(13px, 2.2vmin, 16px); border: 1px solid #fde9c2; }
.stars-pill { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(150deg, #fffaf0, #fff3da); color: #b45309; font-weight: 700; padding: 7px 14px; border-radius: 999px; font-size: clamp(14px, 2.4vmin, 17px); border: 1px solid #fde9c2; font-variant-numeric: tabular-nums; }

/* Segmented range tabs (report time range) */
.range-tabs { display: inline-flex; gap: 3px; margin: 4px 0 4px; background: var(--bg-soft); border: 1px solid var(--border); padding: 4px; border-radius: 999px; flex-wrap: wrap; }
.range-tabs button { border: none; font-family: inherit; font-weight: 600; font-size: clamp(13px, 2.1vmin, 15px); padding: 8px 16px; border-radius: 999px; background: transparent; color: var(--ink-soft); cursor: pointer; transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease; }
.range-tabs button:hover { color: var(--ink); }
.range-tabs button.active { background: var(--surface); color: var(--brand-700); box-shadow: var(--shadow-sm); }

/* Stat / KPI cards — analytics metric cards with a colored accent rail. */
.stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stat-cards .sc { position: relative; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 15px 16px 14px 18px; overflow: hidden; transition: transform 0.14s ease, box-shadow 0.14s ease; }
.stat-cards .sc::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3.5px; background: linear-gradient(var(--brand-500), var(--accent)); box-shadow: 1px 0 6px -1px rgba(239, 158, 0, 0.45); }
.stat-cards .sc.good::before { background: var(--good); }
.stat-cards .sc.bad::before  { background: var(--bad); }
@media (hover: hover) { .stat-cards .sc:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } }
.stat-cards .sc .n { font-size: clamp(23px, 4.2vmin, 32px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.stat-cards .sc .l { font-size: clamp(10.5px, 1.8vmin, 12px); color: var(--ink-soft); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 7px; }
.stat-cards .sc.good .n { color: var(--good); }
.stat-cards .sc.bad .n { color: var(--bad); }
@media (max-width: 460px) { .stat-cards { grid-template-columns: repeat(2, 1fr); } }

.section-title { margin: 12px 0 4px; font-size: clamp(10.5px, 1.7vmin, 12px); font-weight: 700; color: var(--ink-soft); letter-spacing: 0.06em; text-transform: uppercase; }

/* Report-card grade tiles with a colored top accent */
.grades { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
@media (max-width: 620px) { .grades { grid-template-columns: repeat(3, 1fr); } }
.grade { background: var(--surface-2); border: 1px solid var(--border); border-top: 3px solid var(--border-strong); border-radius: var(--r-md); padding: 14px 10px; text-align: center; transition: transform 0.14s ease, box-shadow 0.14s ease; }
@media (hover: hover) { .grade:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } }
.grade .g-top { display: flex; align-items: center; justify-content: center; gap: 6px; }
.grade .g-emoji { font-size: clamp(17px, 2.8vmin, 22px); }
.grade .g-letter { font-size: clamp(22px, 4.4vmin, 32px); font-weight: 800; letter-spacing: -0.02em; }
.grade .g-label { font-size: clamp(12px, 2vmin, 14px); font-weight: 600; margin-top: 5px; }
.grade .g-meta { font-size: clamp(10px, 1.8vmin, 12px); color: var(--ink-soft); margin-top: 2px; }
.grade.g-a { border-top-color: #22c55e; } .grade.g-a .g-letter { color: #15a34a; }
.grade.g-b { border-top-color: #84cc16; } .grade.g-b .g-letter { color: #65a30d; }
.grade.g-c { border-top-color: #f59e0b; } .grade.g-c .g-letter { color: #d97706; }
.grade.g-d { border-top-color: #fb923c; } .grade.g-d .g-letter { color: #ea580c; }
.grade.g-e { border-top-color: #f43f5e; } .grade.g-e .g-letter { color: var(--bad); }
.grade.g-none { opacity: 0.75; } .grade.g-none .g-letter { color: var(--ink-3); }

/* Breakdown table */
table.breakdown { width: 100%; border-collapse: collapse; font-size: clamp(13px, 2.1vmin, 15px); }
table.breakdown th, table.breakdown td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--border); }
table.breakdown thead th { color: var(--ink-soft); font-weight: 600; font-size: clamp(11px, 1.8vmin, 12px); text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border-strong); }
table.breakdown tbody tr { transition: background 0.12s ease; }
@media (hover: hover) { table.breakdown tbody tr:hover { background: var(--surface-2); } }
table.breakdown tbody tr:last-child td { border-bottom: none; }
table.breakdown td.num, table.breakdown th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.breakdown .subj { font-weight: 600; display: flex; align-items: center; gap: 9px; }

/* Settings rows + toggle */
.controls { display: flex; flex-direction: column; gap: 12px; }
.control-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 16px; box-shadow: var(--shadow-sm); }
.control-row .ct { font-weight: 600; }
.control-row .cd { color: var(--ink-soft); font-size: clamp(12px, 2vmin, 14px); margin-top: 2px; }
.control-row .ctl-right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.switch { position: relative; width: 50px; height: 30px; flex: 0 0 auto; cursor: pointer; }
.switch input { display: none; }
.switch .track { position: absolute; inset: 0; background: var(--border-strong); border-radius: 999px; transition: background 0.2s; }
.switch .thumb { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; background: #fff; border-radius: 50%; transition: left 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
.switch input:checked + .track { background: var(--good-2); }
.switch input:checked + .track + .thumb { left: 23px; }

.goal-input { font-family: inherit; font-weight: 700; font-size: clamp(15px, 2.6vmin, 19px); width: 72px; text-align: center; padding: 8px 6px; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink); }
.goal-input:focus { outline: none; border-color: var(--brand-500); box-shadow: var(--ring); }
.goal-meter { margin-top: 10px; height: 12px; border-radius: 999px; background: var(--bg-soft); overflow: hidden; box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06); }
.goal-meter > i { display: block; height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, #fbbf24, #f97316); transition: width 0.4s ease; }

/* Activity log */
.act-day { margin-bottom: 8px; }
.act-day-head { position: sticky; top: 0; z-index: 1; font-weight: 700; color: var(--ink-soft); font-size: clamp(12px, 2vmin, 14px); text-transform: uppercase; letter-spacing: 0.04em; padding: 8px 2px; margin-bottom: 4px; background: var(--bg); }
.act-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.act-item { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px 14px; box-shadow: var(--shadow-sm); transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease; }
@media (hover: hover) { .act-item:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); border-color: var(--border-strong); } }
.act-icon { flex: 0 0 auto; font-size: clamp(15px, 2.6vmin, 18px); width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); border: 1px solid var(--border); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.act-main { min-width: 0; flex: 1 1 auto; }
.act-line { font-size: clamp(13px, 2.2vmin, 15px); line-height: 1.5; }
.act-verb { font-weight: 600; }
.act-detail { color: var(--ink-soft); }
.act-detail::before { content: "· "; }
.act-time { color: var(--ink-3); font-size: clamp(11px, 1.9vmin, 13px); margin-top: 3px; }

.chip { display: inline-block; font-size: clamp(11px, 1.8vmin, 12px); font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--bg-soft); color: var(--ink-soft); border: 1px solid var(--border); margin-right: 4px; }

.empty-note { color: var(--ink-soft); background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--r-lg); padding: 26px; text-align: center; font-size: clamp(14px, 2.4vmin, 17px); }
.muted { color: var(--ink-soft); font-size: clamp(13px, 2.2vmin, 16px); }

@media (prefers-reduced-motion: reduce) {
  .tile, .set-card, .confetti { animation: none !important; opacity: 1; transform: none; }
}

/* ==========================================================================
   Printable report (parent "Export / Save as PDF" — native print dialog).
   Intentionally light — it's meant for white paper.
   ========================================================================== */
.print-area { display: none; }
@media print {
  body > .app, body > .toast { display: none !important; }
  .print-area { display: block !important; }
  html, body { background: #fff !important; }
  @page { margin: 14mm; }
}
.print-area, .pr-sheet { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.pr-sheet { font-family: var(--font-ui); color: #0f1629; max-width: 720px; margin: 0 auto; padding: 8px 4px; }
.pr-head { text-align: center; border-bottom: 3px solid #f0b400; padding-bottom: 12px; margin-bottom: 14px; }
.pr-brand { font-size: 14px; letter-spacing: 1px; color: #9a6600; font-weight: 700; }
.pr-title { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; margin: 2px 0; }
.pr-sub { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; color: #5a6378; font-size: 13px; }
.pr-sub .pr-name { color: #0f1629; font-weight: 700; }
.pr-pills { display: flex; justify-content: center; gap: 10px; margin: 0 0 14px; }
.pr-pill { font-weight: 700; font-size: 13px; padding: 5px 14px; border-radius: 999px; background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.pr-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.pr-stat { background: #f7f8fc; border-radius: 14px; padding: 12px; text-align: center; border: 1px solid #eceefa; }
.pr-stat .n { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; } .pr-stat .l { font-size: 11px; color: #5a6378; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.pr-stat.good .n { color: #15a34a; } .pr-stat.bad .n { color: #dc2626; }
.pr-section { font-size: 15px; color: #0f1629; font-weight: 700; margin: 16px 0 8px; }
.pr-grades { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.pr-grade { border: 1px solid #e5e7eb; border-top: 3px solid #e5e7eb; border-radius: 14px; padding: 10px 6px; text-align: center; }
.pr-g-top { display: flex; align-items: center; justify-content: center; gap: 5px; }
.pr-g-letter { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.pr-g-label { font-size: 12px; font-weight: 600; margin-top: 3px; } .pr-g-meta { font-size: 10px; color: #5a6378; margin-top: 2px; }
.pr-grade.g-a { border-top-color: #22c55e; } .pr-grade.g-a .pr-g-letter { color: #15a34a; }
.pr-grade.g-b { border-top-color: #84cc16; } .pr-grade.g-b .pr-g-letter { color: #65a30d; }
.pr-grade.g-c { border-top-color: #f59e0b; } .pr-grade.g-c .pr-g-letter { color: #d97706; }
.pr-grade.g-d { border-top-color: #fb923c; } .pr-grade.g-d .pr-g-letter { color: #ea580c; }
.pr-grade.g-e { border-top-color: #f43f5e; } .pr-grade.g-e .pr-g-letter { color: #dc2626; }
.pr-grade.g-none .pr-g-letter { color: #5a6378; }
.pr-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 4px; }
.pr-table th, .pr-table td { padding: 9px 10px; text-align: left; border-bottom: 1px solid #eee; }
.pr-table th { color: #5a6378; font-weight: 600; background: #f7f8fc; text-transform: uppercase; font-size: 11px; letter-spacing: 0.04em; }
.pr-table td.num, .pr-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.pr-table tbody tr:nth-child(even) { background: #fbfaff; }
.pr-foot { margin-top: 18px; padding-top: 10px; border-top: 1px solid #eee; text-align: center; color: #99a1b5; font-size: 12px; }