/* =========================================================
   KACHING — Path A signature web patterns
   Ported from prototypes/from-claude-design-web/.../web/styles.css
   Editorial restraint: white body, dark cosmic accents only
   on hero & detail focal moments. Emerald glow used SPARINGLY
   (hero CTA + sticky claim CTA, one per viewport).
   ========================================================= */

:root {
  /* ─── Light surfaces (web body) ─── */
  --bg: #ffffff;
  --bg-tint: #fafafa;
  --bg-section: #f5f6f8;

  /* ─── Ink scale (light bg text) ─── */
  --ink-1: #0a0f1f;
  --ink-2: #1f2937;
  --ink-3: #4b5563;
  --ink-4: #6b7280;
  --ink-5: #9ca3af;

  /* ─── On-dark text scale (cosmic hero) ─── */
  --on-dark-1: #f5f5f7;
  --on-dark-2: #a8b0c2;
  --on-dark-3: #6b7280;

  /* ─── Cosmic surfaces ─── */
  --cosmic-deep: var(--kch-surface-deep);
  --cosmic-elevated: var(--kch-surface-elevated);
  --cosmic-section: var(--kch-surface-section);

  /* ─── Lines (light) ─── */
  --line: #e5e7eb;
  --line-soft: #eef0f4;
  --line-strong: #d1d5db;

  /* ─── Tints ─── */
  --emerald-tint: var(--kch-primary-50);
  --gold-tint: #fef7e0;

  /* ─── Gold scale (web-only labels) ─── */
  --gold-700: #8a6a1a;

  /* ─── Layout ─── */
  --container: 1200px;
  --container-narrow: 920px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* ─── Mono font (Path A — metrics/eyebrows) ─── */
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
}

/* ============================================
   Page chrome reset for web pages
   ============================================ */
body[data-web-shell='1'] {
  background: var(--bg);
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.005em;
  font-feature-settings: 'cv11', 'ss01';
}

/* Web shell does not use mini-app fixed tabbar — disable its padding hack. */
body[data-web-shell='1'] main {
  padding: 0;
  padding-bottom: 0;
}

/* ============================================
   Container & section
   ============================================ */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 32px;
}

@media (max-width: 720px) {
  .container,
  .container-narrow {
    padding: 0 20px;
  }
}

.section { padding: 96px 0; }
.section-sm { padding: 64px 0; }
.section-lg { padding: 120px 0; }

@media (max-width: 720px) {
  .section { padding: 64px 0; }
  .section-lg { padding: 80px 0; }
}

.section.bg-tint { background: var(--bg-tint); }

/* ============================================
   Type — Path A display + eyebrow + lede
   ============================================ */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kch-primary-600);
  margin: 0 0 16px;
}

.eyebrow-gold { color: var(--gold-700); }
.eyebrow-on-dark { color: var(--gold-300); }

.web-h1,
.web-h2,
.web-h3,
.web-h4 {
  font-family: var(--font-display);
  color: var(--ink-1);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.1;
  text-wrap: balance;
}

.web-h1 {
  font-size: clamp(40px, 6.5vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.025em;
}

.web-h2 {
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.1;
}

.web-h3 {
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.2;
}

.web-h4 {
  font-size: 18px;
  line-height: 1.3;
}

.lede {
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 640px;
  text-wrap: pretty;
}

.t-mono {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum';
}

.t-display {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

.t-sm { font-size: 14px; }
.t-xs { font-size: 12px; }

.web-muted { color: var(--ink-4); }
.web-hint { color: var(--ink-5); }

/* ============================================
   Sticky top nav (web only)
   ============================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line-soft);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 68px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
}

.brand-logo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 30%,
    var(--kch-primary-400),
    var(--kch-primary-600) 60%,
    var(--kch-primary-900)
  );
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  box-shadow:
    inset 0 0 0 1.5px var(--gold-500),
    0 1px 0 rgba(0, 0, 0, 0.04);
}

.brand-logo::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(
    135deg,
    var(--gold-300),
    var(--gold-500) 55%,
    var(--gold-700)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--ink-1);
  letter-spacing: -0.01em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  font-size: 14.5px;
}

.nav-link {
  padding: 8px 14px;
  border-radius: 8px;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition:
    background 150ms ease,
    color 150ms ease;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}

.nav-link:hover {
  background: var(--bg-section);
  color: var(--ink-1);
}

.nav-link.is-active {
  background: var(--bg-section);
  color: var(--ink-1);
}

.nav-link .caret {
  font-size: 9px;
  opacity: 0.55;
  margin-left: 2px;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--ink-3);
  font-family: var(--font-mono);
  cursor: pointer;
  transition: background 150ms ease;
  text-decoration: none;
}

.lang-switch:hover { background: var(--bg-section); }

@media (max-width: 920px) {
  .nav-links { display: none; }
}

/* ============================================
   Buttons (web variants — extend mini-app .btn)
   ============================================ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(180deg, var(--kch-primary-400), var(--kch-primary-500));
  color: #04231a;
  height: 52px;
  padding: 0 24px;
  border-radius: 12px;
  font-family: var(--kch-font-family);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
  border: 0;
  cursor: pointer;
  letter-spacing: -0.01em;
  transition:
    transform 150ms ease,
    box-shadow 150ms ease,
    background 150ms ease;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 0 0 1px rgba(240, 201, 95, 0.55),
    0 1px 2px rgba(0, 0, 0, 0.05),
    0 10px 24px rgba(16, 185, 129, 0.28),
    0 0 32px var(--emerald-glow);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 0 0 1px rgba(240, 201, 95, 0.7),
    0 1px 2px rgba(0, 0, 0, 0.05),
    0 14px 32px rgba(16, 185, 129, 0.36),
    0 0 44px var(--emerald-glow);
}

.btn-primary:active { transform: scale(0.985); }

/* Solid emerald (no glow) for body usage */
.btn-emerald {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--kch-primary-600);
  color: #fff;
  height: 48px;
  padding: 0 22px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
  border: 0;
  cursor: pointer;
  letter-spacing: -0.01em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transition:
    background 150ms ease,
    transform 150ms ease;
}

.btn-emerald:hover { background: var(--kch-primary-700); }
.btn-emerald:active { transform: scale(0.985); }

/* Outline secondary */
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #fff;
  color: var(--ink-1);
  height: 52px;
  padding: 0 22px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
  border: 0;
  cursor: pointer;
  letter-spacing: -0.01em;
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  transition:
    box-shadow 150ms ease,
    transform 150ms ease;
}

.btn-outline:hover { box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.btn-outline:active { transform: scale(0.985); }

.btn-outline-emerald {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: var(--kch-primary-600);
  height: 48px;
  padding: 0 20px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
  border: 0;
  cursor: pointer;
  box-shadow: inset 0 0 0 1.5px var(--kch-primary-600);
  transition: background 150ms ease;
}

.btn-outline-emerald:hover { background: var(--emerald-tint); }

/* On dark surfaces */
.btn-outline-on-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: var(--on-dark-1);
  height: 52px;
  padding: 0 22px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
  border: 0;
  cursor: pointer;
  box-shadow: inset 0 0 0 1.5px rgba(245, 245, 247, 0.25);
  transition: box-shadow 150ms ease;
}

.btn-outline-on-dark:hover {
  box-shadow: inset 0 0 0 1.5px rgba(245, 245, 247, 0.5);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: var(--ink-2);
  height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
}
.btn-ghost:hover { background: var(--bg-section); }

.btn-block { width: 100%; }
.btn-sm {
  height: 36px;
  font-size: 13.5px;
  padding: 0 14px;
  border-radius: 8px;
}
.btn-lg {
  height: 56px;
  font-size: 16px;
  padding: 0 28px;
}

/* ============================================
   Pills / chips / verdict badges
   ============================================ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.pill-green {
  background: var(--emerald-tint);
  color: var(--kch-primary-700);
  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.25);
}

.pill-amber {
  background: #fef3c7;
  color: #92400e;
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.3);
}

.pill-red {
  background: #fee2e2;
  color: #991b1b;
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.3);
}

.pill-gold {
  background: var(--gold-tint);
  color: var(--gold-700);
  box-shadow: inset 0 0 0 1px rgba(212, 167, 58, 0.4);
}

.pill-ghost {
  background: var(--bg-section);
  color: var(--ink-3);
  box-shadow: inset 0 0 0 1px var(--line);
}

.pill-purple {
  background: #ede9fe;
  color: #5b21b6;
  box-shadow: inset 0 0 0 1px rgba(109, 74, 255, 0.25);
}

/* Chip (filterable) */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
  background: #fff;
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer;
  transition: all 150ms ease;
  font-family: var(--kch-font-family);
  user-select: none;
  text-decoration: none;
}

.chip:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }

.chip.is-active {
  background: var(--ink-1);
  color: #fff;
  box-shadow: inset 0 0 0 1px var(--ink-1);
}

.chip-count {
  font-family: var(--font-mono);
  font-size: 11px;
  opacity: 0.7;
  margin-left: 2px;
}

/* Range chip (slider-like) */
.range-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 16px;
  border-radius: 9999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 13.5px;
  cursor: pointer;
  color: var(--ink-2);
}
.range-chip .v {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--kch-primary-700);
}

/* ============================================
   Cosmic dark hero panel
   ============================================ */
.cosmic-hero {
  position: relative;
  background: var(--cosmic-deep);
  color: var(--on-dark-1);
  overflow: hidden;
  isolation: isolate;
}

.cosmic-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(109, 74, 255, 0.22), transparent 60%),
    radial-gradient(900px 600px at 90% 30%, rgba(6, 182, 212, 0.12), transparent 60%),
    radial-gradient(700px 600px at 10% 80%, rgba(16, 185, 129, 0.14), transparent 60%);
  pointer-events: none;
}

.cosmic-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(2px 2px at 12% 18%, rgba(255, 255, 255, 0.65), transparent),
    radial-gradient(1.5px 1.5px at 28% 64%, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(1px 1px at 44% 28%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1.5px 1.5px at 62% 78%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 76% 14%, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(1.5px 1.5px at 90% 52%, rgba(240, 201, 95, 0.55), transparent),
    radial-gradient(1px 1px at 18% 84%, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(1.5px 1.5px at 52% 8%, rgba(110, 231, 183, 0.4), transparent);
  pointer-events: none;
}

/* Radar grid backdrop */
.radar-svg {
  position: absolute;
  pointer-events: none;
  opacity: 0.55;
}

/* EKG line container */
.ekg-line {
  stroke-dasharray: 220 800;
  animation: ekg var(--kch-radar-sweep-duration, 4s) linear infinite;
}

@keyframes ekg {
  0% { stroke-dashoffset: 700; opacity: 0.5; }
  20% { opacity: 1; }
  100% { stroke-dashoffset: -700; opacity: 0.5; }
}

@keyframes sweep {
  to { transform: rotate(360deg); }
}
.radar-sweep {
  transform-origin: center;
  animation: sweep 5s linear infinite;
}

/* ============================================
   Section header
   ============================================ */
.section-head {
  margin-bottom: 56px;
  max-width: 720px;
}

.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-head .lede { margin-top: 18px; }
.section-head.center .lede {
  margin-left: auto;
  margin-right: auto;
}

/* ============================================
   Operator logo disc (gold-rimmed)
   ============================================ */
.op-disc {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
  position: relative;
  color: #fff;
  background: linear-gradient(135deg, var(--cosmic-elevated), var(--cosmic-section));
}

.op-disc::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: 50%;
  padding: 1.5px;
  background: linear-gradient(
    135deg,
    var(--gold-300),
    var(--gold-500) 50%,
    var(--gold-700)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.op-disc-lg {
  width: 64px;
  height: 64px;
  font-size: 22px;
}
.op-disc-xl {
  width: 80px;
  height: 80px;
  font-size: 26px;
}

/* ============================================
   Bonus card (web grid + verdict-banded)
   ============================================ */
.bonus-card-v2 {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--verdict-green);
  border-radius: var(--radius-lg);
  padding: 22px;
  transition:
    transform 200ms ease,
    box-shadow 200ms ease,
    border-color 200ms ease;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  isolation: isolate;
}

.bonus-card-v2.v-amber { border-left-color: var(--verdict-amber); }
.bonus-card-v2.v-red { border-left-color: var(--verdict-red); }

.bonus-card-v2:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 12px 28px rgba(16, 185, 129, 0.12),
    0 0 0 1px rgba(16, 185, 129, 0.18);
  border-color: var(--line);
}

.bonus-card-v2.v-amber:hover {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 12px 28px rgba(245, 158, 11, 0.12),
    0 0 0 1px rgba(245, 158, 11, 0.18);
}

.bonus-card-v2.v-red:hover {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 12px 28px rgba(239, 68, 68, 0.1),
    0 0 0 1px rgba(239, 68, 68, 0.18);
}

.bonus-card-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}

.bonus-card-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-1);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.bonus-card-op {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-4);
  margin-top: 4px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.bonus-card-mid {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 12px;
}

.ev-score {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.ev-score .num {
  font-size: 36px;
  line-height: 1;
  color: var(--kch-primary-700);
}
.ev-score .out {
  font-size: 14px;
  color: var(--ink-4);
  font-family: var(--font-mono);
  font-weight: 500;
}
.ev-score .lbl {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--ink-4);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-left: 6px;
  align-self: center;
}

.bonus-card-v2.v-amber .ev-score .num { color: #b45309; }
.bonus-card-v2.v-red .ev-score .num { color: #b91c1c; }

.bonus-card-bar {
  height: 4px;
  background: var(--bg-section);
  border-radius: 9999px;
  overflow: hidden;
  margin-bottom: 16px;
}

.bonus-card-bar-fill {
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(
    90deg,
    var(--kch-primary-500),
    var(--kch-primary-400) 70%,
    var(--gold-500)
  );
}

.bonus-card-v2.v-amber .bonus-card-bar-fill {
  background: linear-gradient(90deg, var(--verdict-amber), #fcd34d);
}
.bonus-card-v2.v-red .bonus-card-bar-fill {
  background: linear-gradient(90deg, var(--verdict-red), #f87171);
}

.bonus-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-4);
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  gap: 12px;
  flex-wrap: wrap;
}

.bonus-card-foot .stat strong {
  color: var(--ink-2);
  font-weight: 600;
  margin-left: 2px;
}

/* ============================================
   Detail page specific
   ============================================ */
.detail-hero {
  position: relative;
  background: var(--cosmic-deep);
  color: var(--on-dark-1);
  padding: 80px 0 64px;
  overflow: hidden;
  isolation: isolate;
}

.detail-hero-inner {
  position: relative;
  z-index: 2;
}

.ev-big {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(96px, 12vw, 140px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, #f0c95f 0%, #d4a73a 70%, #8a6a1a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ev-big.red {
  background: linear-gradient(180deg, #fca5a5, #dc2626 70%, #7f1d1d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.math-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  font-family: var(--font-mono);
  gap: 12px;
}

.math-row:last-child {
  border-bottom: none;
  font-weight: 700;
  color: var(--ink-1);
  font-size: 18px;
}

.math-row .lbl { color: var(--ink-4); }
.math-row .val.pos { color: var(--kch-primary-700); }
.math-row .val.neg { color: var(--verdict-red); }
.math-row .val.gold { color: var(--gold-700); }

/* Sticky claim CTA bar */
.sticky-claim {
  position: sticky;
  bottom: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--line);
  padding: 16px 0;
}

.sticky-claim-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

.sticky-claim .left {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sticky-claim .left .name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--ink-1);
}
.sticky-claim .left .meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-4);
  margin-top: 2px;
}

@media (max-width: 720px) {
  .sticky-claim-inner { padding: 0 16px; }
  .sticky-claim .left .meta { display: none; }
}

/* ============================================
   T&C accordion
   ============================================ */
.acc { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-head {
  padding: 18px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  color: var(--ink-1);
  background: none;
  border: 0;
  width: 100%;
  text-align: left;
  font-family: var(--kch-font-family);
}
.acc-body {
  padding: 0 4px 20px;
  color: var(--ink-3);
  font-size: 15px;
  line-height: 1.7;
  max-width: 720px;
}

/* ============================================
   Listing-page filter bar
   ============================================ */
.filter-bar {
  position: sticky;
  top: 68px;
  z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line-soft);
  padding: 16px 0;
}

.filter-bar-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  flex-wrap: wrap;
}

.filter-spacer { flex: 1; }

.sort-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: 9999px;
  background: #fff;
  color: var(--ink-1);
  font-size: 14px;
  font-weight: 500;
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer;
  font-family: var(--kch-font-family);
  text-decoration: none;
}

.sort-select:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }

/* Bonus listing grid */
.bonus-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 1024px) {
  .bonus-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .bonus-grid { grid-template-columns: 1fr; }
}

/* Page header (listing) */
.page-head {
  padding: 56px 0 32px;
  border-bottom: 1px solid var(--line-soft);
}

.crumbs {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-4);
  margin-bottom: 14px;
  letter-spacing: 0.04em;
}

.crumbs .sep {
  margin: 0 8px;
  opacity: 0.5;
}

/* ============================================
   Utility (flex + grid helpers — scoped)
   ============================================ */
.aic { align-items: center; }
.jcb { justify-content: space-between; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.gap-24 { gap: 24px; }

.text-center { text-align: center; }

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .grid-3,
  .grid-4 { grid-template-columns: 1fr; }
}

/* ============================================
   Operator color palettes (gradient discs)
   ============================================ */
.op-stake { background: linear-gradient(135deg, #1e3a8a, #1d4ed8); }
.op-bitstarz { background: linear-gradient(135deg, #3a1e8a, #6d28d9); }
.op-roobet { background: linear-gradient(135deg, #7c2d12, #dc2626); }
.op-bcgame { background: linear-gradient(135deg, #065f46, #059669); }
.op-cloudbet { background: linear-gradient(135deg, #1e293b, #475569); }
.op-wild { background: linear-gradient(135deg, #7c2d12, #ea580c); }
.op-rolling { background: linear-gradient(135deg, #064e3b, #0d9488); }
.op-default { background: linear-gradient(135deg, var(--cosmic-elevated), var(--cosmic-section)); }

/* ============================================
   prefers-reduced-motion safe guard
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .radar-sweep,
  .ekg-line {
    animation: none;
  }
}