:root {
  /* Base palette — deeper, richer bg so the ambient blobs read well. */
  --bg: #060714;
  --bg-2: #0a0d1c;
  /* Legacy opaque surface tokens kept for a handful of non-glass elements
     (rank tooltips, some borders, native fallbacks). Everything visual now
     goes through the glass tokens below. */
  --surface: rgba(22, 26, 40, 0.55);
  --surface-2: rgba(30, 34, 50, 0.5);
  --surface-3: rgba(255, 255, 255, 0.06);
  --line: rgba(255, 255, 255, 0.09);
  --line-soft: rgba(255, 255, 255, 0.05);
  --text: #f3f5f9;
  --muted: #a2acc0;
  --muted-2: #6c7690;
  --accent: #7aa2ff;
  --accent-strong: #a4bdff;
  --accent-soft: rgba(122, 162, 255, 0.16);
  --danger: #ff5c7a;
  --ok: #38d39f;
  --radius: 16px;
  --radius-lg: 22px;

  /* ---------- Glassmorphism system ---------- */
  /* Translucent surfaces (used as `background` on cards).            */
  --glass-bg:        rgba(22, 26, 40, 0.42);   /* default card       */
  --glass-bg-strong: rgba(22, 26, 40, 0.62);   /* nested / on top of glass */
  --glass-bg-soft:   rgba(255, 255, 255, 0.04); /* subtle chips      */
  --glass-bg-hover:  rgba(255, 255, 255, 0.06);
  /* Glass edges. First value is the visible outline, second is the
     inset top shine that reads as light bouncing off the top edge. */
  --glass-border:        1px solid rgba(255, 255, 255, 0.10);
  --glass-border-strong: 1px solid rgba(255, 255, 255, 0.16);
  --glass-highlight:     inset 0 1px 0 rgba(255, 255, 255, 0.09);
  /* Blur radii. Elevated cards get the stronger blur, floating menus
     get an even stronger one. Fallback for browsers without support:
     the translucent bg still renders (a bit murkier). */
  --glass-blur:      blur(18px) saturate(140%);
  --glass-blur-soft: blur(10px) saturate(120%);
  --glass-blur-lg:   blur(28px) saturate(150%);
  /* Composite shadows that read as depth under a floating card. */
  --glass-shadow:    0 20px 50px -22px rgba(0, 0, 0, 0.75);
  --glass-shadow-lg: 0 30px 70px -20px rgba(0, 0, 0, 0.85);
  /* Legacy shadow token (still referenced in a few places). */
  --shadow: var(--glass-shadow);
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Ambient background: several colored radial blobs that give the
   backdrop filter something rich to blur against. Fixed to the
   viewport so it never scrolls with content, z-index -1 so all
   glass cards stay above it. */
.bg-glow {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38vw 30vw at 12% 8%,   rgba(122, 162, 255, 0.30), transparent 65%),
    radial-gradient(42vw 34vw at 88% 18%,  rgba(191, 122, 255, 0.28), transparent 65%),
    radial-gradient(46vw 40vw at 72% 92%,  rgba(72, 210, 255, 0.22), transparent 65%),
    radial-gradient(40vw 32vw at 8% 82%,   rgba(255, 122, 176, 0.22), transparent 65%),
    radial-gradient(60vw 60vw at 50% 50%,  rgba(20, 24, 44, 0.35), transparent 70%),
    var(--bg);
  background-attachment: fixed;
  animation: bgDrift 40s ease-in-out infinite alternate;
}
@keyframes bgDrift {
  0%   { background-position: 0% 0%, 100% 0%, 100% 100%, 0% 100%, 50% 50%, 0 0; }
  100% { background-position: 6% 4%, 94% 6%, 96% 96%, 4% 94%, 50% 50%, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bg-glow { animation: none; }
}
/* ---------- Glassmorphism ----------
   Tokens above already made every `--surface` and `--line` translucent,
   so the existing rules automatically pick up the glass look. What's
   added below is what makes it truly *glass*: the backdrop-filter blur
   (so content behind is optically distorted) and the inset top
   highlight (so the edge catches "light" as if it were a real pane).
   All main surfaces share the same mixin so the DA stays uniform. */
.glass,
.panel,
.overview,
.groups,
.unmatched-list,
.tier-cell,
.steps li,
.formula,
.table-wrap,
.select-btn,
.dropzone,
.field input,
.field select,
.btn-ghost,
.locale-notice,
.panel-note,
.grow-detail-panel .capped-note,
.grow-detail-panel .reco {
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
}
/* Floating layers (dropdowns, toast, custom rank tooltip) — stronger
   blur so what shows through clearly reads as "behind glass". */
.select-list,
.toast,
.rs-item::before {
  -webkit-backdrop-filter: var(--glass-blur-lg);
  backdrop-filter: var(--glass-blur-lg);
  box-shadow: var(--glass-highlight), var(--glass-shadow-lg);
}
/* Form controls: their base rules still reference the opaque `--bg-2`.
   Override to a soft glass tint so they blend into the parent panel. */
.select-btn,
.field input,
.field select,
.checkbox input[type="checkbox"] {
  background: var(--glass-bg-soft);
}
/* Dropdown listbox floats on top of a glass panel — use the stronger
   tint so its own contents are readable over whatever's behind. */
.select-list {
  background: var(--glass-bg-strong);
}
/* Accordion detail nested inside a `.groups` glass card: a lighter
   tint is enough (no need for its own backdrop-filter, which would
   stack blur and look muddy). */
.grow-detail-panel {
  background: var(--glass-bg-soft) !important;
}
/* Row hover / open states — replace the opaque `--surface-2` with
   a translucent white so it reads as "highlight on glass". */
.grow-row:hover,
.grow-row[aria-expanded="true"] {
  background: var(--glass-bg-hover) !important;
}

/* Progressive-enhancement fallback: browsers without backdrop-filter
   (older Firefox, some in-app WebViews) fall back to a near-opaque
   surface so text remains readable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass,
  .panel,
  .overview,
  .groups,
  .unmatched-list,
  .tier-cell,
  .steps li,
  .formula,
  .table-wrap,
  .select-list,
  .select-btn,
  .dropzone,
  .field input,
  .field select,
  .btn-ghost,
  .toast,
  .locale-notice,
  .panel-note {
    background: rgba(18, 22, 34, 0.92);
  }
}

/* Full-viewport overlay for the results-reveal confetti burst.
   pointer-events:none so it never blocks UI interactions. */
.confetti-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  pointer-events: none;
  display: none;
}
.confetti-canvas.on {
  display: block;
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  color: var(--accent-strong);
}

/* ---------- Native control overrides ---------- */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--surface-3) transparent;
}
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--surface-3);
  border-radius: 999px;
  border: 3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover {
  background: #2b313d;
}
::-webkit-scrollbar-corner {
  background: transparent;
}
::selection {
  background: rgba(108, 140, 255, 0.32);
  color: #fff;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
input::placeholder {
  color: var(--muted-2);
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Native <select> is hidden and replaced by a custom listbox (below). */
.select-native {
  display: none;
}
.select {
  position: relative;
}
.select-btn {
  width: 100%;
  font: inherit;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 13px 14px;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.select-btn:hover {
  border-color: #2f3542;
}
.select.open .select-btn {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.select-arrow {
  color: var(--muted);
  flex: 0 0 auto;
  transition: transform 0.2s ease;
}
.select.open .select-arrow {
  transform: rotate(180deg);
}
.select-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}
.select.open .select-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text);
  font-size: 14px;
}
.select-option:hover {
  background: var(--surface-3);
}
.select-option[aria-selected="true"] {
  color: var(--accent-strong);
}
.select-option[aria-selected="true"]::after {
  content: "✓";
  color: var(--accent);
  font-size: 13px;
}
.checkbox input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.checkbox input[type="checkbox"]::after {
  content: "";
  width: 5px;
  height: 9px;
  border: solid #0a0b0d;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-0.5px, -1px);
  opacity: 0;
  transition: opacity 0.12s ease;
}
.checkbox input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.checkbox input[type="checkbox"]:checked::after {
  opacity: 1;
}
.checkbox input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.accent {
  color: var(--accent);
}
.hidden {
  display: none !important;
}

/* ---------- Header ---------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px clamp(16px, 5vw, 48px);
  max-width: 1160px;
  margin: 0 auto;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.02em;
  cursor: pointer;
  background: none;
  border: none;
  color: var(--text);
}
/* Header brand mark — inline SVG shield emblem sitting inside a
   subtle glass chip so the logo picks up the same frosted language as
   the rest of the UI (thin luminous border, top highlight, gentle
   backdrop blur behind the SVG). Padding acts as the glass pane
   around the icon. */
.brand-mark {
  width: 34px;
  height: 34px;
  display: block;
  padding: 5px;
  box-sizing: content-box;
  border-radius: 12px;
  background: var(--glass-bg-soft);
  border: var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  backdrop-filter: var(--glass-blur-soft);
  box-shadow:
    var(--glass-highlight),
    0 6px 16px -8px rgba(122, 162, 255, 0.45);
  filter: drop-shadow(0 3px 8px rgba(122, 162, 255, 0.35));
}
.header-links {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 14px;
}
.navlink {
  background: none;
  border: none;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 9px;
  transition: color 0.15s ease, background 0.15s ease;
}
.navlink:hover {
  color: var(--text);
  background: var(--surface-2);
}
.badge-oss {
  border: 1px solid var(--line);
  padding: 5px 11px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  margin-left: 4px;
}

/* ---------- Views ---------- */
.view {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 clamp(16px, 5vw, 48px) 70px;
}

/* ---------- Hero ---------- */
.hero {
  text-align: center;
  padding: clamp(28px, 7vw, 80px) 0 30px;
  max-width: 840px;
  margin: 0 auto;
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12px;
  color: var(--muted-2);
  margin: 0 0 18px;
}
.hero h1 {
  font-size: clamp(36px, 6.4vw, 64px);
  line-height: 1.03;
  letter-spacing: -0.035em;
  margin: 0 0 20px;
  font-weight: 800;
}
.subtitle {
  color: var(--muted);
  font-size: clamp(15px, 2.2vw, 19px);
  max-width: 620px;
  margin: 0 auto 30px;
}
.subtitle strong {
  color: var(--text);
  font-weight: 600;
}
.rank-strip {
  display: flex;
  justify-content: center;
  gap: clamp(3px, 1.4vw, 12px);
  flex-wrap: wrap;
  margin: 6px auto 36px;
}
.rs-item {
  position: relative;
  display: inline-flex;
  isolation: isolate;
}
.rank-strip img {
  width: clamp(44px, 8vw, 72px);
  height: clamp(44px, 8vw, 72px);
  border-radius: 50%;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.6));
  transition: transform 0.2s ease, filter 0.2s ease;
}
.rs-item:hover img {
  transform: translateY(-6px) scale(1.08);
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.75))
    drop-shadow(0 0 12px var(--tip-color, var(--accent)));
}
/* Custom tooltip (replaces the native browser one) */
.rs-item::before,
.rs-item::after {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  transform: translate(-50%, 4px);
  z-index: 5;
}
.rs-item::before {
  content: attr(data-tip);
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--tip-color, rgba(255, 255, 255, 0.14));
  color: var(--tip-color, var(--text));
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
}
.rs-item::after {
  content: "";
  bottom: calc(100% + 4px);
  width: 8px;
  height: 8px;
  background: var(--glass-bg-strong);
  border-right: 1px solid var(--tip-color, rgba(255, 255, 255, 0.14));
  border-bottom: 1px solid var(--tip-color, rgba(255, 255, 255, 0.14));
  transform: translate(-50%, 4px) rotate(45deg);
  -webkit-backdrop-filter: var(--glass-blur-lg);
  backdrop-filter: var(--glass-blur-lg);
}
.rs-item:hover::before,
.rs-item:focus-visible::before {
  opacity: 1;
  transform: translate(-50%, 0);
}
.rs-item:hover::after,
.rs-item:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0) rotate(45deg);
}
.cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.resume-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
}
.resume-hint {
  color: var(--muted);
  font-size: 13px;
}
.hint {
  color: var(--muted);
  font-size: 14px;
  margin-top: 16px;
}
.hint button {
  background: none;
  border: none;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
  padding: 0;
}

/* ---------- Buttons ---------- */
.btn {
  font: inherit;
  font-weight: 600;
  border: none;
  border-radius: 12px;
  padding: 13px 22px;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.2s ease, background 0.2s ease,
    border 0.2s ease;
}
.btn:active {
  transform: translateY(1px);
}
.btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, #b088ff 100%);
  color: #0a0b0d;
  font-weight: 700;
  box-shadow:
    0 12px 28px -14px rgba(122, 162, 255, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn-primary:hover {
  filter: brightness(1.08);
  box-shadow:
    0 18px 36px -14px rgba(122, 162, 255, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.btn-ghost {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--line);
}
.btn-ghost:hover {
  background: var(--surface-3);
}
.btn.full {
  width: 100%;
  margin-top: 8px;
}

/* ---------- Panels / forms ---------- */
.panel {
  max-width: 560px;
  margin: 40px auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 38px);
  box-shadow: var(--shadow);
}
.panel h2 {
  margin: 6px 0 8px;
  font-size: 26px;
  letter-spacing: -0.02em;
}
.panel-sub {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 24px;
}
/* Proactive tip on the CSV import panel (non-English users). */
.panel-note {
  display: block;
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 10px;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  color: var(--text);
  font-size: 13px;
  line-height: 1.55;
}
.panel-note + .panel-note {
  margin-top: 0;
}
.panel-note:last-of-type {
  margin-bottom: 24px;
}
.panel-note strong {
  color: var(--text);
}
/* Softer variant for secondary tips (e.g. "API mode is more precise"). */
.panel-note--soft {
  border-left-color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
}
/* Inline button styled as a link — used inside .panel-note and
   .locale-notice to jump between views without a full <a href>. */
.inline-link {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.inline-link:hover {
  color: var(--text);
}
/* Contextual notice shown on the results page when many exercises
   were routed via the FR/EN keyword fallback. */
.locale-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  margin: 0 0 22px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(108, 140, 255, 0.06);
  color: var(--text);
  font-size: 13px;
  line-height: 1.55;
}
.locale-notice.hidden {
  display: none;
}
.locale-notice .ln-icon {
  color: var(--accent);
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}
.locale-notice .ln-body {
  color: var(--muted);
}
.locale-notice .ln-body strong {
  color: var(--text);
}
.back {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  padding: 0;
  margin-bottom: 8px;
}
.back:hover {
  color: var(--text);
}
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}
.field > span {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}
.field em {
  font-style: normal;
  opacity: 0.7;
}
.field input,
.field select {
  font: inherit;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 13px 14px;
  color: var(--text);
  outline: none;
  transition: border 0.2s ease, box-shadow 0.2s ease;
}
.field input:focus,
.field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 14px;
  margin: 4px 0 20px;
  cursor: pointer;
}
.cors-note {
  color: var(--muted);
  font-size: 12.5px;
  margin: 14px 0 0;
  text-align: center;
}
.dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 34px;
  border: 2px dashed var(--line);
  border-radius: 14px;
  cursor: pointer;
  text-align: center;
  color: var(--muted);
  transition: border 0.2s ease, background 0.2s ease;
  margin-bottom: 22px;
}
/* iOS-safe file input: covers the whole dropzone, fully transparent.
   Clicks land directly on the input (no <label> wrapper, no clip-path)
   so the native picker opens and the `change` event fires reliably. */
.dz-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  font-size: 16px; /* iOS: prevents zoom-on-focus on some setups */
}
.dropzone:hover,
.dropzone.drag {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.dz-icon {
  font-size: 26px;
}
.dropzone.loaded {
  border-color: var(--ok);
  color: var(--text);
}

/* ---------- Loader ---------- */
.loader {
  display: grid;
  place-items: center;
  gap: 22px;
  padding: 90px 0;
  color: var(--muted);
}

/* 9 rank emblems, one glowing at a time (climb-the-ladder animation). */
.rank-parade {
  --count: 9;
  --step: 0.28s; /* delay between two adjacent emblems */
  --cycle: calc(var(--count) * var(--step) + 0.8s);
  display: flex;
  gap: clamp(4px, 1.2vw, 10px);
  flex-wrap: wrap;
  justify-content: center;
  max-width: 560px;
}
.rank-parade img {
  width: clamp(38px, 6.5vw, 56px);
  height: clamp(38px, 6.5vw, 56px);
  border-radius: 50%;
  opacity: 0.28;
  filter: grayscale(0.7) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
  transform: translateY(0) scale(0.92);
  animation: parade var(--cycle) ease-in-out infinite;
  animation-delay: calc(var(--i) * var(--step));
  will-change: transform, opacity, filter;
}
@keyframes parade {
  0%,
  60%,
  100% {
    opacity: 0.28;
    transform: translateY(0) scale(0.92);
    filter: grayscale(0.7) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
  }
  15%,
  30% {
    opacity: 1;
    transform: translateY(-10px) scale(1.12);
    filter: grayscale(0) drop-shadow(0 10px 22px rgba(0, 0, 0, 0.7))
      drop-shadow(0 0 14px var(--tint, var(--accent)));
  }
}

.loading-text {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  min-height: 1.4em;
  text-align: center;
}
.loading-bar {
  width: min(320px, 70vw);
  height: 4px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
  position: relative;
}
.loading-bar span {
  position: absolute;
  inset: 0;
  width: 40%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    transparent,
    var(--accent),
    var(--accent-2, var(--accent)),
    transparent
  );
  animation: loading-slide 1.6s ease-in-out infinite;
}
@keyframes loading-slide {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(320%);
  }
}
.loading-hint {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .rank-parade img,
  .loading-bar span {
    animation: none;
  }
  .rank-parade img {
    opacity: 0.85;
    filter: none;
    transform: none;
  }
}

/* ---------- Results head ---------- */
.results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0 18px;
  flex-wrap: wrap;
  gap: 10px;
}
.results-meta {
  color: var(--muted);
  font-size: 14px;
}
.results-meta strong {
  color: var(--text);
}

/* ---------- Overview (radar + best) ---------- */
.overview {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(16px, 3vw, 30px);
  box-shadow: var(--shadow);
  align-items: center;
}
.radar-wrap {
  width: 100%;
  display: grid;
  place-items: center;
}
.radar {
  width: 100%;
  max-width: 420px;
  height: auto;
}
.radar .grid-line {
  fill: none;
  stroke: var(--line);
  stroke-width: 1;
}
.radar .axis {
  stroke: var(--line);
  stroke-width: 1;
}
.radar .area {
  fill: rgba(108, 140, 255, 0.18);
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linejoin: round;
}
.radar .dot {
  fill: var(--accent);
}
.radar .lbl {
  fill: var(--muted);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
}
.radar .lbl-sub {
  fill: var(--muted-2);
  font-size: 10px;
  font-family: inherit;
}

.best {
  text-align: center;
  padding: 10px clamp(6px, 2vw, 24px);
}
.best-label {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  color: var(--muted-2);
}
.best img {
  width: clamp(96px, 16vw, 132px);
  height: clamp(96px, 16vw, 132px);
  border-radius: 50%;
  filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.7));
  margin: 12px 0 8px;
}
.best-tier {
  font-size: clamp(26px, 4.5vw, 38px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
.best-sub {
  color: var(--muted);
  font-size: 13px;
  margin-top: 8px;
  max-width: 340px;
  margin-inline: auto;
}

/* ---------- Group rows + tier track ---------- */
.section-title {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted-2);
  margin: 34px 0 12px;
}
.groups {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.grow {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 18px clamp(16px, 2.4vw, 26px);
  transition: background 0.15s ease;
}
.grow + .grow {
  border-top: 1px solid var(--line-soft);
}
.grow:hover {
  background: var(--surface-2);
}
.grow.empty {
  opacity: 0.5;
}
.grow-emblem {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55));
}
.grow-main {
  min-width: 0;
}
.grow-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.grow-name {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.grow-next {
  font-size: 12px;
  color: var(--muted-2);
  white-space: nowrap;
}
.gtrack {
  display: flex;
  gap: 4px;
  margin: 9px 0 8px;
}
.gtrack i {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--line);
  transition: background 0.3s ease;
}
.gtrack i.on {
  background: var(--accent);
}
.gtrack i.cur {
  background: var(--accent-strong);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.grow-detail {
  font-size: 12.5px;
  color: var(--muted);
}
.grow-detail strong {
  color: var(--text);
  font-weight: 600;
}
.grow-right {
  text-align: right;
  min-width: 96px;
}
.grow-tier {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.grow-ratio {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

/* Cliquable header (accordion trigger) */
.grow-row {
  display: grid;
  grid-template-columns: 54px 1fr auto 22px;
  gap: 18px;
  align-items: center;
  padding: 18px clamp(16px, 2.4vw, 26px);
  transition: background 0.15s ease;
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  width: 100%;
  text-align: left;
}
.grow-row:hover {
  background: var(--surface-2);
}
.grow-row[aria-expanded="true"] {
  background: var(--surface-2);
}
.grow-row .chevron {
  color: var(--muted-2);
  transition: transform 0.2s ease;
}
.grow-row[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
  color: var(--muted);
}
.grow-item {
  border-top: 1px solid var(--line-soft);
}
.grow-item:first-child {
  border-top: none;
}
.grow-item.empty .grow-row {
  cursor: default;
  opacity: 0.55;
}
.grow-item.empty .grow-row:hover {
  background: transparent;
}
.grow-item.empty .chevron {
  visibility: hidden;
}

.grow-detail-panel {
  padding: 4px clamp(16px, 2.4vw, 26px) 22px;
  background: var(--surface-2);
  border-top: 1px solid var(--line-soft);
  display: none;
}
.grow-item.open .grow-detail-panel {
  display: block;
}
.grow-detail-panel h4 {
  margin: 14px 0 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted-2);
  font-weight: 700;
}
.grow-detail-panel h4:first-child {
  margin-top: 6px;
}
.grow-detail-panel .composite-info {
  margin: 6px 0 4px;
  color: var(--muted);
  font-size: 13px;
}
.grow-detail-panel .composite-info strong {
  color: var(--text);
}
.grow-detail-panel .capped-note {
  background: rgba(255, 92, 122, 0.08);
  border: 1px solid rgba(255, 92, 122, 0.35);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--text);
  font-size: 13px;
  margin: 8px 0 6px;
}

/* "How to reach the next tier" panel — appears inside the group's
   accordion detail, between the composite info and the lifts table. */
.grow-detail-panel .reco {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 10px 0 4px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(108, 140, 255, 0.35);
  background: rgba(108, 140, 255, 0.08);
  color: var(--text);
  font-size: 13px;
  line-height: 1.55;
}
.grow-detail-panel .reco strong {
  color: var(--text);
}
.grow-detail-panel .reco-icon {
  font-size: 18px;
  line-height: 1.2;
  flex-shrink: 0;
}
.grow-detail-panel .reco-body {
  color: var(--muted);
}
.grow-detail-panel .reco-nums {
  display: block;
  margin-top: 4px;
  color: var(--muted-2, var(--muted));
  font-variant-numeric: tabular-nums;
}
.grow-detail-panel .reco-caveat {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-style: italic;
}
/* Max-rank variant: green-ish celebratory tone. */
.grow-detail-panel .reco--max {
  border-color: rgba(94, 200, 138, 0.4);
  background: rgba(94, 200, 138, 0.08);
}

/* Compact inline chip on the collapsed group row ("↑ +14 kg on Bench Press").
   Sits right after the "Next: XYZ · +0.15× BW" text. */
.reco-chip {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(108, 140, 255, 0.12);
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  vertical-align: middle;
  white-space: nowrap;
}
@media (max-width: 640px) {
  /* On small screens the row is already dense — chip goes below. */
  .reco-chip {
    display: block;
    margin: 4px 0 0;
    width: fit-content;
  }
}

.lifts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.lifts-table th,
.lifts-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
}
.lifts-table th {
  color: var(--muted-2);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.lifts-table td.num,
.lifts-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.lifts-table tbody tr:last-child td {
  border-bottom: none;
}
.lifts-table .lift-title {
  color: var(--text);
  font-weight: 500;
}
.lifts-table .lift-ratio {
  color: var(--text);
  font-weight: 600;
}
.reason-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--surface-3);
  color: var(--muted);
  border: 1px solid var(--line);
}
.reason-tag.isolation {
  color: #ffb670;
  border-color: rgba(255, 182, 112, 0.35);
  background: rgba(255, 182, 112, 0.08);
}
.reason-tag.few_sessions {
  color: #7ec7ff;
  border-color: rgba(126, 199, 255, 0.35);
  background: rgba(126, 199, 255, 0.08);
}
.reason-tag.unknown {
  color: var(--muted);
}
.reason-tag.no_load {
  color: var(--muted);
}

/* Section "exercises not counted" en bas du dashboard */
.unmatched-section {
  margin-top: 10px;
}
.unmatched-lead {
  color: var(--muted);
  font-size: 13.5px;
  margin: 0 0 10px;
}
.unmatched-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.unmatched-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px clamp(14px, 2vw, 20px);
  border-top: 1px solid var(--line-soft);
  font-size: 13.5px;
}
.unmatched-list li:first-child {
  border-top: none;
}
.unmatched-list .um-title {
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.unmatched-list .um-meta {
  color: var(--muted);
  font-size: 12px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex: 0 0 auto;
}

.disclaimer {
  color: var(--muted-2);
  font-size: 13px;
  margin-top: 26px;
  text-align: center;
}
.results-foot {
  text-align: center;
  margin-top: 22px;
}

/* ---------- How it works page ---------- */
.doc {
  max-width: 900px;
  margin: 0 auto;
}
.doc-head {
  text-align: center;
  padding: 10px 0 8px;
}
.doc-head h1 {
  font-size: clamp(30px, 5vw, 46px);
  letter-spacing: -0.03em;
  margin: 12px 0 12px;
}
.doc-head p {
  color: var(--muted);
  max-width: 620px;
  margin: 0 auto;
}
.tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  margin: 30px 0 10px;
}
.tier-cell {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 14px;
  text-align: center;
}
.tier-cell img {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.6));
}
.tier-cell .tc-name {
  font-weight: 800;
  margin-top: 10px;
  font-size: 16px;
}
.tier-cell .tc-idx {
  font-size: 11px;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.tier-cell .tc-desc {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 6px;
}

.doc h2 {
  font-size: 24px;
  letter-spacing: -0.02em;
  margin: 44px 0 6px;
}
.doc h2 + p {
  color: var(--muted);
  margin-top: 0;
}
.steps {
  display: grid;
  gap: 12px;
  margin: 20px 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.steps li::before {
  counter-increment: step;
  content: counter(step);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 800;
  font-size: 14px;
}
.steps b {
  color: var(--text);
}
.steps span {
  color: var(--muted);
  font-size: 14px;
}
.formula {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 18px 0;
  font-size: 15px;
}
.formula code {
  color: var(--accent-strong);
  font-size: 15px;
}
.formula .fnote {
  color: var(--muted);
  font-size: 13px;
  margin-top: 6px;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 18px 0;
}
table.thresholds {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 640px;
}
table.thresholds th,
table.thresholds td {
  padding: 11px 12px;
  text-align: center;
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}
table.thresholds thead th {
  background: var(--glass-bg-soft);
  color: var(--muted);
  font-weight: 600;
  font-size: 12px;
}
table.thresholds tbody th {
  text-align: left;
  background: transparent;
}
table.thresholds .grp {
  font-weight: 700;
  color: var(--text);
}
table.thresholds .ref {
  display: block;
  font-weight: 400;
  font-size: 11px;
  color: var(--muted-2);
}
table.thresholds tbody tr:last-child td {
  border-bottom: none;
}
.notes {
  color: var(--muted);
  font-size: 14px;
  padding-left: 20px;
}
.notes li {
  margin-bottom: 8px;
}
.notes b {
  color: var(--text);
}
.doc-cta {
  text-align: center;
  margin: 40px 0 0;
}

/* ---------- Privacy page ---------- */
/* Trust badges displayed as a row of pills right below the intro,
   summarising the privacy stance at a glance. */
.privacy-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 26px 0 8px;
}
.pv-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}
/* Footer button styled to blend with the surrounding <a> links so the
   "Your data" entry sits naturally alongside "Changelog" / "GitHub".
   `<button>` needs a full UA reset (font + line-height + vertical-
   alignment + no letter-spacing quirk) to actually match the anchors. */
.footer-link {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  vertical-align: baseline;
  color: var(--muted);
  cursor: pointer;
  text-decoration: none;
}
.footer-link:hover {
  color: var(--text);
}
.footer-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Share / PNG export modal ----------
   Full-viewport overlay with a centered card. The preview <canvas>
   sits in a flexible frame that reshapes to whichever format the user
   picks (its intrinsic width/height set the aspect ratio in CSS-land).
*/
.no-scroll { overflow: hidden; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal.hidden { display: none; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 12, 0.55);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
}
.modal-card {
  position: relative;
  z-index: 1;
  max-width: 960px;
  width: 100%;
  max-height: min(92vh, 900px);
  overflow: auto;
  background: var(--glass-bg);
  border: var(--glass-border-strong);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 3vw, 32px);
  -webkit-backdrop-filter: var(--glass-blur-lg);
  backdrop-filter: var(--glass-blur-lg);
  box-shadow: var(--glass-highlight), var(--glass-shadow-lg);
}
.modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.modal-close:hover {
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--line);
}
.modal-card h2 {
  margin: 0 0 4px;
  font-size: 22px;
  letter-spacing: -0.02em;
}
.modal-sub {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 14px;
}

/* Two-column layout: preview on the left, options + actions on the
   right. Collapses to a single column on narrow screens. */
.share-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(16px, 3vw, 28px);
  align-items: start;
}
@media (max-width: 720px) {
  .share-grid { grid-template-columns: 1fr; }
}

.share-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.share-preview-frame {
  width: 100%;
  max-width: 420px;
  padding: 8px;
  background: var(--glass-bg-soft);
  border: var(--glass-border);
  border-radius: 14px;
  -webkit-backdrop-filter: var(--glass-blur-soft);
  backdrop-filter: var(--glass-blur-soft);
  box-shadow: var(--glass-highlight);
  display: flex;
  align-items: center;
  justify-content: center;
}
.share-preview-frame canvas {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  /* Show a placeholder look before the first paint completes. */
  min-height: 200px;
  background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
}
.share-preview-hint {
  color: var(--muted-2);
  font-size: 12px;
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.share-options {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.share-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.share-field-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted-2);
  font-weight: 700;
}
/* Segmented toggle: option pills with the current one highlighted.
   Same visual language as .reason-tag so it feels native. */
.share-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.share-opt {
  padding: 8px 12px;
  border-radius: 10px;
  border: var(--glass-border);
  background: var(--glass-bg-soft);
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  -webkit-backdrop-filter: var(--glass-blur-soft);
  backdrop-filter: var(--glass-blur-soft);
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.share-opt:hover {
  color: var(--text);
  background: var(--glass-bg-hover);
  border-color: rgba(255, 255, 255, 0.18);
}
.share-opt[aria-checked="true"] {
  color: var(--text);
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(122, 162, 255, 0.25);
}
.share-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  margin-top: 2px;
}
.share-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}
.share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
.share-actions .btn { flex: 1 1 auto; min-width: 0; }
.share-status {
  color: var(--muted-2);
  font-size: 12.5px;
  margin: 2px 0 0;
  min-height: 1.2em;
}

/* "Share as image" CTA — deliberately louder than surrounding controls
   so users notice the feature. Sits on its own centered row between the
   results head and the dashboard, with a warm gradient distinct from
   the accent-blue primary buttons. */
.results-head { position: relative; }
.share-cta-row {
  display: flex;
  justify-content: center;
  padding: 4px 0 18px;
}
.btn-share {
  --share-a: #ff8a3d;
  --share-b: #ff4d8f;
  /* UA reset — no .btn base class here, so we normalise ourselves
     to avoid the native grey button chrome on Safari/iOS. */
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #fff;
  background: linear-gradient(135deg, var(--share-a), var(--share-b));
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  cursor: pointer;
  box-shadow:
    0 10px 24px -8px rgba(255, 77, 143, 0.55),
    0 2px 0 rgba(255, 255, 255, 0.15) inset;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.btn-share:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow:
    0 14px 30px -8px rgba(255, 77, 143, 0.65),
    0 2px 0 rgba(255, 255, 255, 0.18) inset;
}
.btn-share:active { transform: translateY(0); filter: brightness(0.97); }
.btn-share:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.btn-share span[aria-hidden] { font-size: 18px; line-height: 1; }
@media (max-width: 640px) {
  .btn-share { width: 100%; justify-content: center; }
  .share-cta-row { padding: 2px 0 14px; }
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-2);
  border: 1px solid var(--danger);
  color: var(--text);
  padding: 14px 20px;
  border-radius: 12px;
  box-shadow: var(--shadow);
  max-width: 90vw;
  z-index: 50;
  font-size: 14px;
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line-soft);
  padding: 26px clamp(16px, 5vw, 48px);
  max-width: 1160px;
  margin: 40px auto 0;
  color: var(--muted-2);
  font-size: 13px;
  text-align: center;
}
.site-footer p {
  margin: 4px 0;
}
.site-footer-meta {
  color: var(--muted-2);
  font-size: 12.5px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.site-footer-meta .app-version {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.site-footer-meta .dot {
  color: var(--muted-2);
  opacity: 0.6;
}
.site-footer-meta a {
  color: var(--muted);
}
.site-footer-meta a:hover {
  color: var(--text);
}

@media (max-width: 760px) {
  .overview {
    grid-template-columns: 1fr;
  }
  .best {
    order: -1;
    padding-bottom: 0;
  }
}
@media (max-width: 560px) {
  .field-row {
    grid-template-columns: 1fr;
  }
  .cta-row {
    flex-direction: column;
  }
  .cta-row .btn {
    width: 100%;
  }
  .grow,
  .grow-row {
    grid-template-columns: 44px 1fr 22px;
    gap: 12px;
  }
  .grow-emblem {
    width: 44px;
    height: 44px;
  }
  .grow-right {
    grid-column: 1 / -1;
    text-align: left;
    margin-top: 4px;
  }
}