/* ============================================================
   ASC SHARED DESIGN SYSTEM — asc-shared.css
   A Stronger Climber · 2026
   
   Deploy to: /shared/asc-shared.css
   Used by:   dashboard/, tools/finger-timer/, tools/finger-tests/,
              tools/strength-tests/
   
   NEVER override tokens in per-page CSS — extend instead.
   ============================================================ */


/* ── 1. RESET ─────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


/* ── 2. DESIGN TOKENS ─────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:        #08090d;   /* page background — match community */
  --surface:   #0d0f14;   /* shell / primary card */
  --surface2:  #13161d;   /* inner card / input bg */
  --surface3:  #1a1e27;   /* hover, active row */

  /* Borders */
  --border:    rgba(255,255,255,0.07);
  --border2:   rgba(255,255,255,0.04);
  --hover-bg:  rgba(255,255,255,0.03);

  /* Text */
  --t1:  #d6d9e0;                    /* primary text */
  --t2:  rgba(214,217,224,0.65);     /* secondary text */
  --t3:  rgba(214,217,224,0.38);     /* muted / labels */

  /* Accent */
  --accent:    #fbbf24;              /* yellow — primary CTA, highlights */
  --accent-2:  #f59e0b;              /* darker yellow — gradient end */
  --accent-bg: rgba(251,191,36,0.08);
  --accent-border: rgba(251,191,36,0.28);

  /* Semantic */
  --success:  #4ade80;
  --info:     #60a5fa;
  --warning:  #fb923c;
  --danger:   #f87171;
  --purple:   #a78bfa;

  /* Zone colours (CSI / FSI data only — not for UI) */
  --z1: #4ade80;
  --z2: #60a5fa;
  --z3: #fbbf24;  /* = accent */
  --z4: #fb923c;
  --z5: #a78bfa;

  /* Typography */
  --font: 'Figtree', system-ui, -apple-system, Segoe UI, sans-serif;
  --mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Radius */
  --r:    18px;   /* large card, shell */
  --r-md: 12px;   /* most components */
  --r-sm: 8px;    /* chips, badges, small buttons */
  --r-xs: 6px;    /* tight inline elements */

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur:  0.15s;
}


/* ── 3. BASE ──────────────────────────────────────────────── */
html, body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--t1);
  font-family: var(--font);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

button, input, select, textarea {
  font-family: var(--font);
  font-size: 14px;
  color: var(--t1);
}


/* ── 4. TYPOGRAPHY SCALE ──────────────────────────────────── */
.asc-h1   { font-size: 22px; font-weight: 700; letter-spacing: -0.3px; color: var(--t1); }
.asc-h2   { font-size: 18px; font-weight: 700; color: var(--t1); }
.asc-h3   { font-size: 15px; font-weight: 700; color: var(--t1); }
.asc-body { font-size: 14px; font-weight: 400; color: var(--t2); line-height: 1.65; }
.asc-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--t3);
}
.asc-micro { font-size: 11px; color: var(--t3); }


/* ── 5. LAYOUT SHELLS ─────────────────────────────────────── */
.asc-wrap {
  max-width: 1300px;
  margin: 0 auto;
  padding: 20px 16px 48px;
}

.asc-shell {
  border-radius: 24px;
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
}

/* Tool layout (narrower, single column) */
.asc-tool-wrap {
  max-width: 520px;
  margin: 0 auto;
  padding: 16px;
}


/* ── 6. CARDS ─────────────────────────────────────────────── */
.asc-card {
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--r);
  overflow: hidden;
  position: relative;
}

.asc-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border2);
}

.asc-card-body {
  padding: 16px 20px;
}

/* Raised variant — used when cards sit on surface (not surface2) */
.asc-card-raised {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
}


/* ── 7. BUTTONS ───────────────────────────────────────────── */

/* Primary — yellow fill, dark text */
.asc-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  padding: 0 20px;
  border-radius: var(--r-md);
  border: none;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color: #08090d;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: filter var(--dur) var(--ease);
  white-space: nowrap;
}
.asc-btn-primary:hover  { filter: brightness(1.08); }
.asc-btn-primary:active { filter: brightness(0.95); }

/* Secondary — dark surface, yellow border */
.asc-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  padding: 0 20px;
  border-radius: var(--r-md);
  border: 1px solid var(--accent-border);
  background: var(--accent-bg);
  color: var(--accent);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
}
.asc-btn-secondary:hover  { background: rgba(251,191,36,0.13); border-color: rgba(251,191,36,0.42); }

/* Ghost — text only, subtle border */
.asc-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--t2);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
}
.asc-btn-ghost:hover { color: var(--t1); background: var(--surface3); border-color: rgba(255,255,255,0.12); }

/* Danger ghost — for destructive actions */
.asc-btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(251,146,60,0.28);
  background: transparent;
  color: rgba(251,146,60,0.75);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
}
.asc-btn-danger:hover { color: var(--warning); border-color: rgba(251,146,60,0.5); background: rgba(251,146,60,0.06); }

/* Back / community button */
.asc-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--t2);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--dur) var(--ease);
  margin-bottom: 8px;
}
.asc-back-btn:hover { color: var(--t1); background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14); text-decoration: none; }

/* Tool pill (opens external tool) */
.asc-tool-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--t2);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  text-decoration: none;
}
.asc-tool-pill:hover { color: var(--t1); background: var(--surface3); border-color: rgba(255,255,255,0.12); }

/* Tools row container */
.asc-tools-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 16px 0;
}


/* ── 8. BADGES & CHIPS ────────────────────────────────────── */
.asc-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--t2);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.asc-badge.accent  { color: var(--accent);  border-color: var(--accent-border); background: var(--accent-bg); font-weight: 700; }
.asc-badge.live    { color: var(--success);  border-color: rgba(74,222,128,0.25); }
.asc-badge.live::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--success); animation: asc-pulse 2.4s ease-in-out infinite; }
.asc-badge.zone-1  { color: var(--z1); border-color: rgba(74,222,128,0.28);  background: rgba(74,222,128,0.07); }
.asc-badge.zone-2  { color: var(--z2); border-color: rgba(96,165,250,0.28);  background: rgba(96,165,250,0.07); }
.asc-badge.zone-3  { color: var(--z3); border-color: rgba(251,191,36,0.28);  background: rgba(251,191,36,0.07); }
.asc-badge.zone-4  { color: var(--z4); border-color: rgba(251,146,60,0.28);  background: rgba(251,146,60,0.07); }
.asc-badge.zone-5  { color: var(--z5); border-color: rgba(167,139,250,0.28); background: rgba(167,139,250,0.07); }

@keyframes asc-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }


/* ── 9. INPUTS ────────────────────────────────────────────── */
.asc-input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--t1);
  font-family: var(--font);
  font-size: 13px;
  outline: none;
  transition: border-color var(--dur) var(--ease);
}
.asc-input:focus { border-color: var(--accent-border); }

.asc-select {
  width: 100%;
  height: 40px;
  padding: 0 30px 0 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--t1);
  font-family: var(--font);
  font-size: 13px;
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath fill='%23888' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color var(--dur) var(--ease);
}
.asc-select:focus { border-color: var(--accent-border); }

.asc-textarea {
  width: 100%;
  min-height: 80px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--t1);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.55;
  resize: vertical;
  outline: none;
  transition: border-color var(--dur) var(--ease);
}
.asc-textarea:focus { border-color: var(--accent-border); }

.asc-field { display: flex; flex-direction: column; gap: 6px; }
.asc-field-label { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; color: var(--t3); text-transform: uppercase; }


/* ── 10. TABS ─────────────────────────────────────────────── */
.asc-tab-nav {
  display: flex;
  border-bottom: 1px solid var(--border2);
  overflow-x: auto;
  scrollbar-width: none;
}
.asc-tab-nav::-webkit-scrollbar { display: none; }

.asc-tab-btn {
  padding: 12px 18px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--t3);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  margin-bottom: -1px;
}
.asc-tab-btn:hover  { color: var(--t2); }
.asc-tab-btn.active { color: var(--t1); border-bottom-color: var(--accent); }

/* Tab count badge */
.asc-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--surface3);
  color: var(--t3);
  font-size: 10px;
  font-weight: 700;
  margin-left: 5px;
}
.asc-tab-btn.active .asc-tab-count { background: var(--accent-bg); color: var(--accent); }


/* ── 11. TABLES ───────────────────────────────────────────── */
.asc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.asc-table thead th {
  padding: 8px 12px;
  text-align: left;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--t3);
  border-bottom: 1px solid var(--border2);
}
.asc-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border2);
  color: var(--t2);
  vertical-align: middle;
}
.asc-table tbody tr:last-child td { border-bottom: none; }
.asc-table tbody tr[data-row-click],
.asc-table tbody tr[data-eid] {
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.asc-table tbody tr[data-row-click]:hover,
.asc-table tbody tr[data-eid]:hover { background: var(--hover-bg); }

/* Zone accent on first cell */
.asc-table td.zone-accent {
  border-left: 2.5px solid currentColor;
  padding-left: 10px;
}

/* Note indicator dot */
.asc-note-dot { color: var(--accent); margin-left: 4px; font-size: 9px; }


/* ── 12. MODALS ───────────────────────────────────────────── */
.asc-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(6px);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.asc-modal-overlay.open { display: flex; }

.asc-modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  width: 100%;
  max-width: 480px;
  overflow: hidden;
  animation: asc-modal-in 0.18s var(--ease);
}
@keyframes asc-modal-in { from{opacity:0;transform:scale(.95)translateY(8px)} to{opacity:1;transform:none} }

.asc-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border2);
}

.asc-modal-date {
  font-size: 14px;
  font-weight: 700;
  color: var(--t1);
  letter-spacing: -0.2px;
}

/* Zone/context badge inside modal header */
.asc-modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 600;
  margin-top: 6px;
}
.asc-modal-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.asc-modal-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--t2);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--dur) var(--ease);
  flex-shrink: 0;
}
.asc-modal-close:hover { color: var(--t1); background: var(--surface2); }

/* Stats grid inside modal */
.asc-modal-stats {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  border-bottom: 1px solid var(--border2);
}
.asc-mstat {
  padding: 14px 12px;
  text-align: center;
  border-right: 1px solid var(--border2);
}
.asc-mstat:nth-child(3n) { border-right: none; }
.asc-mstat:nth-child(n+4) { border-top: 1px solid var(--border2); }
/* Full-width stat (spans all columns) */
.asc-mstat.full { grid-column: 1 / -1; border-right: none; text-align: left; }
.asc-mstat-v { font-size: 15px; font-weight: 700; color: var(--t1); margin-bottom: 3px; }
.asc-mstat-k { font-size: 9px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--t3); }

/* AI / text sections */
.asc-modal-section { padding: 14px 20px; border-bottom: 1px solid var(--border2); }
.asc-modal-section:last-of-type { border-bottom: none; padding-bottom: 18px; }
.asc-modal-section-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: 5px;
}
.asc-modal-section-text {
  font-size: 13px;
  font-weight: 400;
  color: var(--t2);
  line-height: 1.65;
}

/* Modal body scrollable area */
.asc-modal-body {
  overflow-y: auto;
  max-height: 55vh;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.10) transparent;
}

/* Inline note actions */
.asc-modal-note-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-xs);
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--t3);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.asc-modal-note-btn:hover { color: var(--t2); border-color: var(--border); background: var(--hover-bg); }

.asc-modal-delete-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-xs);
  border: 1px solid rgba(251,146,60,0.22);
  background: transparent;
  color: rgba(251,146,60,0.65);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.asc-modal-delete-btn:hover { color: var(--warning); border-color: rgba(251,146,60,0.45); background: rgba(251,146,60,0.06); }

/* Save / cancel inline */
.asc-save-btn {
  height: 32px;
  padding: 0 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--accent-border);
  background: var(--accent-bg);
  color: var(--accent);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.asc-save-btn:hover { background: rgba(251,191,36,0.15); border-color: rgba(251,191,36,0.45); }

.asc-cancel-btn {
  height: 32px;
  padding: 0 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--t3);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.asc-cancel-btn:hover { color: var(--t2); border-color: var(--border2); }


/* ── 13. PAGE CONTROLS (filter bar) ──────────────────────── */
.asc-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border2);
  align-items: flex-end;
}
.asc-controls .asc-field { min-width: 100px; flex: 1; }

.asc-btn-refresh {
  height: 38px;
  min-width: 80px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--t1);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.asc-btn-refresh:hover { background: var(--surface3); border-color: rgba(255,255,255,0.12); }


/* ── 14. HERO / STAT BLOCKS ───────────────────────────────── */
.asc-hero-value {
  font-size: clamp(36px, 8vw, 64px);
  font-weight: 800;
  letter-spacing: -2px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.asc-hero-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--t3);
  margin-top: 4px;
}

/* Stat strip cell */
.asc-stat-cell {
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--r-md);
  padding: 12px 14px;
  text-align: center;
}
.asc-stat-val {
  font-size: 18px;
  font-weight: 800;
  color: var(--t1);
  font-family: var(--mono);
}
.asc-stat-key {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--t3);
  margin-top: 3px;
}


/* ── 15. STATUS BAR ───────────────────────────────────────── */
.asc-status-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 20px;
  border-bottom: 1px solid var(--border2);
  align-items: center;
}
.asc-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border2);
  font-size: 11px;
  font-weight: 600;
  color: var(--t2);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.asc-status-pill:hover { border-color: var(--border); }
.asc-status-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }


/* ── 16. PAGINATION ───────────────────────────────────────── */
.asc-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 0;
}
.asc-page-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--t3);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.asc-page-btn:hover:not(:disabled) { color: var(--t1); background: var(--surface2); border-color: var(--border); }
.asc-page-btn:disabled { opacity: 0.35; cursor: default; }
.asc-page-btn.active { background: var(--surface2); color: var(--t1); border-color: var(--border); }


/* ── 17. EMPTY STATES ─────────────────────────────────────── */
.asc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 24px;
  color: var(--t3);
  font-size: 13px;
  text-align: center;
  line-height: 1.5;
}


/* ── 18. LOADING ──────────────────────────────────────────── */
.asc-loading-blur { filter: blur(4px); opacity: 0.5; pointer-events: none; transition: filter 0.3s; }
@keyframes asc-skeleton { 0%,100%{opacity:.4} 50%{opacity:.7} }
.asc-skeleton {
  background: var(--surface2);
  border-radius: var(--r-sm);
  animation: asc-skeleton 1.6s ease-in-out infinite;
}

/* ── 19. ERROR BOX ────────────────────────────────────────── */
.asc-error {
  display: none;
  margin: 16px 24px 0;
  padding: 12px 16px;
  border-radius: var(--r-sm);
  background: rgba(251,146,60,0.08);
  border: 1px solid rgba(251,146,60,0.22);
  color: var(--t1);
  font-size: 13px;
  font-weight: 500;
}


/* ── 20. SCROLLBAR ────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); }


/* ── 21. MOBILE ───────────────────────────────────────────── */
@media (max-width: 600px) {
  .asc-modal-stats { grid-template-columns: repeat(2,1fr); }
  .asc-modal-box   { border-radius: 16px; }
  .asc-controls    { gap: 8px; }
  .asc-hero-value  { font-size: clamp(28px, 10vw, 48px); }
}