/* KRIS · Cosmic v2 design system
 * Tokens match STEVE admin (scraper-bot/admin/src/index.css) and the platform
 * portfolio (platform-portfolio/site/assets/css/main.css). Served publicly at
 * /kris/static/css/kris.css and inlined into generated reports by kris_theme.py,
 * so it must stay self-contained: no relative url()s.
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --cosmic-950: #05071a;
  --cosmic-900: #0A0E27;
  --cosmic-800: #1a1f4d;
  --cosmic-700: #2d1b69;
  --hero: #6366f1;
  --hero-dark: #4f46e5;
  --hero-light: #818cf8;
  --purple: #8b5cf6;
  --lavender: #c084fc;
  --pink: #ec4899;
  --amber: #f59e0b;
  --cyan: #06b6d4;
  --emerald: #10b981;
  --teal: #14b8a6;
  --rose: #f43f5e;
  --t1: #f8fafc;
  --t2: #cbd5e1;
  --t3: #94a3b8;
  --glass: rgba(26, 31, 77, .5);
  --glass-strong: rgba(26, 31, 77, .7);
  --glass-deep: rgba(10, 14, 39, .55);
  --hair: rgba(99, 102, 241, .14);
  --hair-strong: rgba(99, 102, 241, .28);
  --hairw: rgba(255, 255, 255, .08);
  --font-heading: 'Space Grotesk', 'Inter', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --grad-hero: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #c084fc 100%);
  --grad-text: linear-gradient(100deg, #818cf8 0%, #c084fc 44%, #06b6d4 100%);
  --shadow-glass: 0 8px 32px rgba(0, 0, 0, .3);
  --shadow-glow: 0 0 30px rgba(99, 102, 241, .3);
  --radius: 16px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; background: #0A0E27; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--t1);
  background-color: var(--cosmic-950);
  background-image: linear-gradient(180deg, #0A0E27 0%, #12173a 38%, #1a1f4d 68%, #2d1b69 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- backdrop: aurora + stars, CSS only (works in static reports) ---------- */
body::before,
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
body::before {
  background:
    radial-gradient(ellipse 55vw 45vw at 8% 4%, rgba(99, 102, 241, .32), transparent 62%),
    radial-gradient(ellipse 45vw 40vw at 92% 42%, rgba(139, 92, 246, .26), transparent 60%),
    radial-gradient(ellipse 40vw 30vw at 50% 108%, rgba(6, 182, 212, .18), transparent 65%);
  animation: kris-drift 34s ease-in-out infinite alternate;
}
body::after {
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(203, 213, 225, .8), transparent 100%),
    radial-gradient(1px 1px at 27% 72%, rgba(203, 213, 225, .6), transparent 100%),
    radial-gradient(1.4px 1.4px at 41% 33%, rgba(203, 213, 225, .7), transparent 100%),
    radial-gradient(1px 1px at 58% 84%, rgba(203, 213, 225, .55), transparent 100%),
    radial-gradient(1.2px 1.2px at 66% 12%, rgba(203, 213, 225, .75), transparent 100%),
    radial-gradient(1px 1px at 79% 58%, rgba(203, 213, 225, .6), transparent 100%),
    radial-gradient(1.5px 1.5px at 88% 26%, rgba(192, 132, 252, .7), transparent 100%),
    radial-gradient(1px 1px at 94% 88%, rgba(203, 213, 225, .5), transparent 100%),
    radial-gradient(1.3px 1.3px at 5% 61%, rgba(129, 140, 248, .7), transparent 100%),
    radial-gradient(1px 1px at 35% 95%, rgba(203, 213, 225, .5), transparent 100%);
  background-size: 640px 640px;
  animation: kris-twinkle 5s ease-in-out infinite;
}
@keyframes kris-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(2%, 3%, 0) scale(1.06); }
}
@keyframes kris-twinkle {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}
@keyframes kris-spin { to { transform: rotate(360deg); } }
@keyframes kris-pulse {
  0%, 100% { opacity: .35; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  body::before, body::after, .kris-spinner, .pill-live::before { animation: none !important; }
  * { transition: none !important; }
}

body > * { position: relative; z-index: 1; }

/* ---------- typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  letter-spacing: -.02em;
  color: var(--t1);
  line-height: 1.2;
  margin: 0 0 .6em;
}
h1 { font-size: clamp(26px, 3.2vw, 38px); font-weight: 700; }
h2 { font-size: 20px; font-weight: 600; }
h3 { font-size: 16px; font-weight: 600; }
h4 { font-size: 14px; font-weight: 600; }
p { margin: 0 0 .8em; color: var(--t2); }
small, .muted { color: var(--t3); }
a { color: var(--hero-light); text-decoration: none; }
a:hover { color: var(--lavender); }
code, pre, kbd, .mono { font-family: var(--font-mono); font-size: .88em; }
code {
  background: rgba(10, 14, 39, .6);
  border: 1px solid var(--hairw);
  border-radius: 6px;
  padding: 1px 6px;
  color: var(--t2);
}
.grad {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-glow { text-shadow: 0 0 20px rgba(99, 102, 241, .5); }
.kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hero-light);
}
.kicker::after {
  content: '';
  flex: 0 0 42px;
  height: 1px;
  background: linear-gradient(90deg, var(--hero-light), transparent);
}
.kicker--center { justify-content: center; }
.kicker--center::before {
  content: '';
  flex: 0 0 42px;
  height: 1px;
  background: linear-gradient(270deg, var(--hero-light), transparent);
}

/* ---------- shell ---------- */
.kris-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px clamp(16px, 4vw, 40px);
  background: rgba(10, 14, 39, .55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hair);
}
.kris-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--t1);
  text-decoration: none;
  min-width: 0;
}
.kris-brand:hover { color: var(--t1); }
.kris-brand img {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(99, 102, 241, .5);
  flex: none;
}
.kris-brand b {
  display: block;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.2;
}
.kris-brand span {
  display: block;
  font-size: 11px;
  color: var(--t3);
  letter-spacing: .03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kris-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.kris-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 44px) clamp(16px, 4vw, 40px) 64px;
}
.kris-main--narrow { max-width: 820px; }

.kris-hero { text-align: center; padding: clamp(12px, 3vw, 28px) 0 clamp(24px, 4vw, 40px); }
.kris-logo {
  display: block;
  width: min(380px, 82vw);
  height: auto;
  margin: 0 auto 14px;
  filter: drop-shadow(0 0 26px rgba(139, 92, 246, .35));
}
.kris-hero p { font-size: clamp(15px, 1.4vw, 17px); color: var(--t2); margin: 0 auto; max-width: 60ch; }

.kris-footer {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px clamp(16px, 4vw, 40px) 40px;
  border-top: 1px solid var(--hair);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--t3);
}

/* ---------- surfaces ---------- */
.glass, .card, .section {
  background: var(--glass);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-glass);
}
.card, .section { padding: clamp(18px, 2.4vw, 26px); margin-bottom: 20px; }
.card > :last-child, .section > :last-child { margin-bottom: 0; }
.glass-elevated {
  background: var(--glass-strong);
  border: 1px solid rgba(99, 102, 241, .2);
  border-radius: 20px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: var(--shadow-glass), var(--shadow-glow);
}
.inset {
  background: var(--glass-deep);
  border: 1px solid var(--hairw);
  border-radius: 12px;
  padding: 16px;
}
.accent-top { position: relative; overflow: hidden; }
.accent-top::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--accent, var(--grad-text));
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .card, .section, .glass-elevated, .kris-topbar { background: rgba(26, 31, 77, .95); }
}

.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid-2 { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.stack { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.spacer { flex: 1; }
.center { text-align: center; }
.hidden { display: none !important; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  background: var(--grad-hero);
  box-shadow: 0 6px 22px rgba(99, 102, 241, .35);
  cursor: pointer;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.btn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(99, 102, 241, .5); }
.btn:focus-visible, .form-control:focus-visible, a:focus-visible, button:focus-visible {
  outline: 2px solid var(--hero-light);
  outline-offset: 2px;
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-ghost, .btn-secondary {
  background: rgba(255, 255, 255, .04);
  border-color: var(--hairw);
  color: var(--t2);
  box-shadow: none;
}
.btn-ghost:hover, .btn-secondary:hover { color: var(--t1); border-color: var(--hair-strong); background: rgba(99, 102, 241, .12); box-shadow: none; }
.btn-success { background: linear-gradient(135deg, #059669, #10b981); box-shadow: 0 6px 22px rgba(16, 185, 129, .3); }
.btn-success:hover { box-shadow: 0 10px 30px rgba(16, 185, 129, .45); }
.btn-warning { background: linear-gradient(135deg, #d97706, #f59e0b); box-shadow: 0 6px 22px rgba(245, 158, 11, .28); }
.btn-warning:hover { box-shadow: 0 10px 30px rgba(245, 158, 11, .42); }
.btn-danger { background: linear-gradient(135deg, #e11d48, #f43f5e); box-shadow: 0 6px 22px rgba(244, 63, 94, .28); }
.btn-danger:hover { box-shadow: 0 10px 30px rgba(244, 63, 94, .42); }
.btn-primary { /* alias of the default hero button */ }
.btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 8px; }
.btn-lg { padding: 15px 36px; font-size: 16px; border-radius: 9999px; }
.btn-block { width: 100%; }

/* ---------- pills & badges ---------- */
.pill, .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 9999px;
  border: 1px solid var(--hairw);
  background: rgba(255, 255, 255, .03);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--t2);
  white-space: nowrap;
}
.pill-live::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 10px var(--emerald);
  animation: kris-pulse 2.4s ease-in-out infinite;
}
.badge.success, .badge--good { color: #6ee7b7; border-color: rgba(16, 185, 129, .4); background: rgba(16, 185, 129, .12); }
.badge.warning, .badge--warn { color: #fcd34d; border-color: rgba(245, 158, 11, .4); background: rgba(245, 158, 11, .12); }
.badge.error, .badge.failed, .badge--bad { color: #fda4af; border-color: rgba(244, 63, 94, .4); background: rgba(244, 63, 94, .12); }
.badge.info, .badge--info { color: #a5b4fc; border-color: rgba(99, 102, 241, .4); background: rgba(99, 102, 241, .12); }

/* ---------- alerts ---------- */
.alert {
  padding: 13px 16px;
  margin-bottom: 16px;
  border-radius: 12px;
  border: 1px solid var(--hair);
  border-left: 3px solid var(--hero);
  background: rgba(99, 102, 241, .1);
  color: var(--t1);
  font-size: 14px;
}
.alert-success { border-color: rgba(16, 185, 129, .35); border-left-color: var(--emerald); background: rgba(16, 185, 129, .1); }
.alert-warning, .alert-info-warn { border-color: rgba(245, 158, 11, .35); border-left-color: var(--amber); background: rgba(245, 158, 11, .1); }
.alert-error, .alert-danger { border-color: rgba(244, 63, 94, .35); border-left-color: var(--rose); background: rgba(244, 63, 94, .1); }
.text-good { color: #6ee7b7; }
.text-warn { color: #fcd34d; }
.text-bad { color: #fda4af; }

/* ---------- forms ---------- */
label { color: var(--t2); font-size: 14px; }
.form-group { margin-bottom: 16px; }
.form-group > label { display: block; margin-bottom: 6px; font-weight: 500; }
.form-control, select, input[type="text"], input[type="password"], input[type="date"], input[type="email"], textarea {
  width: 100%;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid rgba(99, 102, 241, .22);
  background: rgba(10, 14, 39, .55);
  color: var(--t1);
  font-family: var(--font-body);
  font-size: 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.form-control:focus, select:focus, input:focus, textarea:focus {
  outline: none;
  border-color: var(--hero);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .18);
}
.form-control:disabled, input:disabled { opacity: .45; }
::placeholder { color: var(--t3); }
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.75) sepia(.3) hue-rotate(200deg); cursor: pointer; }
select option { background: var(--cosmic-900); color: var(--t1); }
input[type="radio"], input[type="checkbox"] { accent-color: var(--hero); width: 16px; height: 16px; }
.help-text { font-size: 12.5px; color: var(--t3); margin-top: 6px; }

/* choice tiles (radio cards) */
.choice-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.choice-grid--5 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 176px), 1fr)); }
.choice {
  position: relative;
  display: block;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--hairw);
  background: rgba(10, 14, 39, .4);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.choice:hover { border-color: var(--hair-strong); background: rgba(99, 102, 241, .08); }
.choice.active, .choice:has(input:checked) {
  border-color: rgba(129, 140, 248, .7);
  background: rgba(99, 102, 241, .16);
  box-shadow: 0 0 0 1px rgba(129, 140, 248, .35), 0 8px 26px rgba(99, 102, 241, .22);
}
.choice > label, .choice-head { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; color: var(--t1); }
.choice-head input { margin-top: 3px; flex: none; }
.choice strong { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 14.5px; color: var(--t1); }
.choice small { display: block; color: var(--t3); font-size: 12.5px; margin-top: 2px; }
.choice .form-control { margin-top: 10px; }
.choice-icon { font-size: 18px; line-height: 1; margin-top: 1px; }

/* ---------- collapsible ---------- */
.collapsible-header {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}
.collapsible-header h2 { margin: 0; }
.collapsible-header small { display: block; margin-top: 2px; }
.collapsible-header .chev { margin-left: auto; color: var(--t3); transition: transform .25s ease; }
.collapsible-content { margin-top: 18px; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--hair); }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
  background: rgba(26, 31, 77, .8);
  color: var(--t2);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--hair);
}
td { padding: 10px 14px; border-bottom: 1px solid rgba(99, 102, 241, .07); color: var(--t2); }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: rgba(99, 102, 241, .06); }

/* ---------- status rows (admin) ---------- */
.status-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(99, 102, 241, .08);
  color: var(--t2);
  font-size: 14px;
}
.status-item:last-child { border-bottom: 0; }
.status-item > :last-child { text-align: right; color: var(--t1); font-family: var(--font-mono); font-size: 12.5px; }

/* ---------- spinner ---------- */
.kris-spinner, .spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(129, 140, 248, .2);
  border-top-color: var(--hero-light);
  border-right-color: var(--lavender);
  animation: kris-spin .8s linear infinite;
  vertical-align: middle;
}
.kris-spinner--lg { width: 44px; height: 44px; border-width: 3px; }

/* ---------- logs ---------- */
.log-console {
  background: rgba(5, 7, 26, .7);
  border: 1px solid var(--hairw);
  border-radius: 12px;
  padding: 14px;
  max-height: 320px;
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--t2);
}

/* ---------- scrollbars ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--cosmic-900); }
::-webkit-scrollbar-thumb { background: var(--cosmic-700); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--hero); }

/* =====================================================================
 * Generated reports (dashboard_builder / analyzers). Class names are the
 * ones the Python generators emit; keep them stable.
 * ===================================================================== */
.kris-report { max-width: 1400px; margin: 0 auto; padding: clamp(16px, 3vw, 32px) clamp(12px, 3vw, 28px) 48px; }
body.kris-report-body { padding: clamp(12px, 2vw, 24px); }
body.kris-report-body > h1 { text-align: center; margin: 8px 0 18px; }
body.kris-report-body > h1 small { display: block; margin-top: 6px; font-family: var(--font-body); font-weight: 500; font-size: .45em !important; letter-spacing: 0; color: var(--t3) !important; }
body.kris-report-body h2 { color: var(--t1); }
body.kris-report-body h3 { color: var(--hero-light); }
.kris-report-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 4px 0 6px;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--hero-light);
}
.kris-report-brand img { width: 26px; height: 26px; border-radius: 7px; box-shadow: 0 4px 14px rgba(99, 102, 241, .5); }

.date-range, .production-badge, .ticket-badge, .chat-badge, .combined-badge, .bot-badge, .human-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  margin: 4px 2px;
  border-radius: 9999px;
  border: 1px solid var(--hair-strong);
  background: rgba(99, 102, 241, .14);
  color: #c7d2fe;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
  vertical-align: middle;
}
.ticket-badge { border-color: rgba(129, 140, 248, .45); background: rgba(99, 102, 241, .16); color: #c7d2fe; }
.chat-badge { border-color: rgba(6, 182, 212, .45); background: rgba(6, 182, 212, .14); color: #a5f3fc; }
.combined-badge { border-color: rgba(192, 132, 252, .45); background: rgba(168, 85, 247, .14); color: #e9d5ff; }
.production-badge { border-color: rgba(16, 185, 129, .45); background: rgba(16, 185, 129, .12); color: #a7f3d0; }
.bot-badge { border-color: rgba(168, 85, 247, .45); background: rgba(168, 85, 247, .14); color: #e9d5ff; }
.human-badge { border-color: rgba(6, 182, 212, .45); background: rgba(6, 182, 212, .14); color: #a5f3fc; }

/* metric cards: one glass shape, accent hue per family */
.metric-card, .ticket-card, .chat-card, .weekend-card, .bot-wynn-card, .bot-support-card,
.transfer-card, .satisfaction-card, .success-card, .response-card-prominent,
.chat-card-ultra, .transfer-card-ultra, .satisfaction-card-ultra {
  --accent: var(--hero-light);
  position: relative;
  overflow: hidden;
  padding: 16px 14px 14px;
  border-radius: 14px;
  text-align: center;
  color: var(--t1);
  background: var(--glass);
  border: 1px solid var(--hair);
  box-shadow: var(--shadow-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.metric-card::before, .ticket-card::before, .chat-card::before, .weekend-card::before, .bot-wynn-card::before,
.bot-support-card::before, .transfer-card::before, .satisfaction-card::before, .success-card::before,
.response-card-prominent::before, .chat-card-ultra::before, .transfer-card-ultra::before, .satisfaction-card-ultra::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--accent);
  box-shadow: 0 0 16px var(--accent);
}
.metric-card:hover, .ticket-card:hover, .chat-card:hover, .weekend-card:hover, .bot-wynn-card:hover,
.bot-support-card:hover, .transfer-card:hover, .satisfaction-card:hover, .success-card:hover,
.response-card-prominent:hover, .chat-card-ultra:hover, .transfer-card-ultra:hover, .satisfaction-card-ultra:hover {
  transform: translateY(-3px);
  border-color: var(--hair-strong);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .4), 0 0 26px rgba(99, 102, 241, .16);
}
.ticket-card { --accent: #818cf8; }
.chat-card, .chat-card-ultra { --accent: #06b6d4; }
.weekend-card { --accent: #f59e0b; }
.bot-wynn-card, .satisfaction-card, .satisfaction-card-ultra { --accent: #c084fc; }
.bot-support-card, .transfer-card, .transfer-card-ultra { --accent: #ec4899; }
.success-card, .response-card-prominent { --accent: #10b981; }
.chat-card-ultra, .transfer-card-ultra, .satisfaction-card-ultra, .response-card-prominent,
.chat-card, .transfer-card, .satisfaction-card { padding: 20px 16px 16px; border-color: var(--hair-strong); }
.metric-goal { font-size: 11.5px; color: var(--t3) !important; opacity: 1; font-style: normal; margin-top: 6px; }
.metric-value {
  margin: 2px 0;
  font-family: var(--font-heading);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--t1);
  background: linear-gradient(120deg, #fff, #cbd5e1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.metric-label { color: var(--t3); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; margin-top: 4px; }
.response-card-prominent .metric-value, .chat-card-ultra .metric-value, .transfer-card-ultra .metric-value,
.satisfaction-card-ultra .metric-value { font-size: clamp(28px, 3vw, 40px); }
.metrics-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); margin-bottom: 24px; }

.chart-container, .comparison-card, .insights, .trend-section {
  background: var(--glass);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  padding: clamp(14px, 2vw, 24px);
  margin-bottom: 20px;
  box-shadow: var(--shadow-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.insight {
  padding: 10px 14px;
  margin: 6px 0;
  border-radius: 10px;
  border-left: 3px solid var(--hero);
  background: rgba(99, 102, 241, .1);
  color: var(--t2);
}
.week-toggle-btn, [class^="week-toggle-btn-"], [class*=" week-toggle-btn-"] {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; padding: 5px 12px; margin: 2px;
  border-radius: 9999px; cursor: pointer; color: var(--t2);
  background: rgba(255, 255, 255, .04); border: 1px solid var(--hairw); transition: all .2s ease;
}
.week-toggle-btn:hover, [class^="week-toggle-btn-"]:hover { color: var(--t1); border-color: var(--hair-strong); background: rgba(99, 102, 241, .14); }
.week-toggle-btn.active, [class^="week-toggle-btn-"].active {
  color: #fff; border-color: transparent; background: var(--grad-hero); box-shadow: 0 4px 16px rgba(99, 102, 241, .45);
}
.calc-control { display: inline-flex; align-items: center; gap: 6px; margin-right: 15px; color: var(--t2); font-size: 13px; }
.js-plotly-plot .plotly .modebar { background: transparent !important; }
.js-plotly-plot .plotly .modebar-btn path { fill: var(--t3) !important; }
.js-plotly-plot .plotly .modebar-btn:hover path { fill: var(--hero-light) !important; }

/* ---------- small screens ---------- */
@media (max-width: 720px) {
  body { font-size: 14px; }
  .kris-brand span { display: none; }
  .kris-nav .btn { padding: 8px 11px; font-size: 12.5px; }
  .kris-nav .btn .lbl { display: none; }
  .btn-lg { width: 100%; }
}