/* ───────────────────────────── Design tokens ────────────────────────── */
:root {
  --kk-bg: #0a0a14;
  --kk-bg-2: #11111f;
  --kk-surface: #1a1a2e;
  --kk-surface-2: #232342;
  --kk-border: rgba(255,255,255,.08);
  --kk-text: #f5f6ff;
  --kk-text-dim: #a0a0b8;
  --kk-accent: #7c3aed;
  --kk-accent-2: #22d3ee;
  --kk-accent-3: #fb7185;
  --kk-success: #34d399;
  --kk-warn: #fbbf24;
  --kk-danger: #f43f5e;

  --kk-font-display: "Clash Display", "Space Grotesk", system-ui, sans-serif;
  --kk-font-body: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --kk-font-mono: ui-monospace, "JetBrains Mono", monospace;

  --kk-radius: 14px;
  --kk-radius-lg: 22px;
  --kk-shadow-glow: 0 10px 40px -10px rgba(124, 58, 237, .35);
}

* { -webkit-tap-highlight-color: transparent; }

html, body {
  background: var(--kk-bg);
  color: var(--kk-text);
  font-family: var(--kk-font-body);
  font-feature-settings: "ss01", "ss02";
  min-height: 100vh;
}

body {
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(124,58,237,.18), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(34,211,238,.10), transparent 60%),
    radial-gradient(800px 800px at 50% 120%, rgba(251,113,133,.10), transparent 60%),
    var(--kk-bg);
  background-attachment: fixed;
}

h1, h2, h3, h4, .display-1, .display-2, .display-3 {
  font-family: var(--kk-font-display);
  letter-spacing: -.02em;
  font-weight: 700;
}

/* ───────────────────────────── Nav ────────────────────────── */
.kk-nav {
  display: flex; align-items: center; gap: 1.2rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--kk-border);
  backdrop-filter: blur(10px);
  background: rgba(10, 10, 20, 0.6);
  position: sticky; top: 0; z-index: 100;
}
.kk-brand {
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--kk-font-display);
  font-size: 1.35rem; font-weight: 700;
  color: var(--kk-text); text-decoration: none;
  letter-spacing: -.03em;
}
.kk-brand-mark { font-size: 1.5rem; }
.kk-brand-dash { color: var(--kk-accent); }
.kk-brand:hover { color: var(--kk-text); }
.kk-nav-spacer { flex: 1; }
.kk-nav-link {
  color: var(--kk-text-dim); text-decoration: none;
  font-size: .95rem; padding: .4rem .25rem;
  transition: color .15s ease;
}
.kk-nav-link:hover { color: var(--kk-text); }

/* ───────────────────────────── Buttons ────────────────────────── */
.kk-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--kk-radius);
  font-family: var(--kk-font-body);
  font-weight: 500;
  font-size: .95rem;
  cursor: pointer;
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
  text-decoration: none;
}
.kk-btn:active { transform: translateY(1px) scale(.99); }
.kk-btn-primary {
  background: linear-gradient(135deg, var(--kk-accent), var(--kk-accent-2));
  color: #fff;
  box-shadow: var(--kk-shadow-glow);
}
.kk-btn-primary:hover { color: #fff; filter: brightness(1.1); }
.kk-btn-ghost {
  background: transparent; color: var(--kk-text-dim);
  border-color: var(--kk-border);
}
.kk-btn-ghost:hover { color: var(--kk-text); background: var(--kk-surface); }
.kk-btn-danger {
  background: var(--kk-danger); color: #fff;
}
.kk-btn-success {
  background: var(--kk-success); color: #0a0a14;
}
.kk-btn-lg { padding: .9rem 1.6rem; font-size: 1.05rem; }
.kk-btn.btn-sm { padding: .35rem .85rem; font-size: .85rem; }

/* ───────────────────────────── Cards / surfaces ────────────────────────── */
.kk-card {
  background: var(--kk-surface);
  border: 1px solid var(--kk-border);
  border-radius: var(--kk-radius-lg);
  padding: 1.5rem;
  transition: transform .15s ease, border-color .15s ease;
}
.kk-card:hover {
  border-color: rgba(124,58,237,.4);
}
.kk-card-interactive { cursor: pointer; }
.kk-card-interactive:hover { transform: translateY(-2px); }

.kk-section-title {
  font-family: var(--kk-font-display);
  font-size: 1.5rem; font-weight: 600;
  margin-bottom: 1.25rem;
  display: flex; align-items: center; gap: .65rem;
}

/* ───────────────────────────── Main / layout ────────────────────────── */
.kk-main { padding: 2rem 1.5rem 4rem; max-width: 1400px; margin: 0 auto; }
.kk-main-narrow { max-width: 720px; }

/* Forms — Bootstrap overrides */
.form-control, .form-select {
  background: var(--kk-surface);
  border: 1px solid var(--kk-border);
  color: var(--kk-text);
  border-radius: var(--kk-radius);
  padding: .65rem .9rem;
}
.form-control:focus, .form-select:focus {
  background: var(--kk-surface-2);
  color: var(--kk-text);
  border-color: var(--kk-accent);
  box-shadow: 0 0 0 .2rem rgba(124, 58, 237, .25);
}
.form-control::placeholder { color: var(--kk-text-dim); }
.form-label { color: var(--kk-text-dim); font-size: .9rem; font-weight: 500; }
.form-control-color { padding: .25rem; min-width: 60px; height: 42px; }

/* ───────────────────────────── Flash ────────────────────────── */
.kk-flash-wrap {
  position: fixed; top: 80px; right: 1.5rem; z-index: 200;
  display: flex; flex-direction: column; gap: .5rem;
}
.kk-flash {
  background: var(--kk-surface);
  border: 1px solid var(--kk-border);
  border-left: 4px solid var(--kk-accent);
  padding: .7rem 1.1rem;
  border-radius: var(--kk-radius);
  animation: kk-slide-in .3s ease-out;
}
.kk-flash-success { border-left-color: var(--kk-success); }
.kk-flash-error, .kk-flash-danger { border-left-color: var(--kk-danger); }
.kk-flash-warning { border-left-color: var(--kk-warn); }
@keyframes kk-slide-in {
  from { transform: translateX(40px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ───────────────────────────── Hero / home ────────────────────────── */
.kk-hero {
  text-align: center;
  padding: 5rem 1rem 4rem;
}
.kk-hero h1 {
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  line-height: .95;
  background: linear-gradient(135deg, #fff 30%, var(--kk-accent-2) 70%, var(--kk-accent-3));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 1.5rem;
}
.kk-hero-sub {
  font-size: 1.2rem; color: var(--kk-text-dim);
  max-width: 640px; margin: 0 auto 2.5rem;
}
.kk-hero-actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

.kk-feature-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem; margin-top: 4rem;
}
.kk-feature-icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(124,58,237,.18), rgba(34,211,238,.18));
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

/* ───────────────────────────── Dashboard ────────────────────────── */
.kk-dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 800px) { .kk-dash-grid { grid-template-columns: 1fr; } }
.kk-action-tile {
  display: block; padding: 2rem 1.5rem;
  border-radius: var(--kk-radius-lg);
  border: 1px solid var(--kk-border);
  color: var(--kk-text); text-decoration: none;
  position: relative; overflow: hidden;
  transition: transform .15s ease;
  min-height: 200px;
}
.kk-action-tile:hover { transform: translateY(-3px); color: var(--kk-text); }
.kk-action-tile.menti {
  background: linear-gradient(135deg, #1a0b2e, #2a1248);
  border-color: rgba(124,58,237,.3);
}
.kk-action-tile.menti::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(400px 200px at 100% 0%, rgba(124,58,237,.25), transparent);
  pointer-events: none;
}
.kk-action-tile.game {
  background: linear-gradient(135deg, #0c2030, #0a3a4a);
  border-color: rgba(34,211,238,.3);
}
.kk-action-tile.game::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(400px 200px at 100% 0%, rgba(34,211,238,.25), transparent);
  pointer-events: none;
}
.kk-action-tile h2 { font-size: 1.75rem; margin: 0 0 .35rem; }
.kk-action-tile p { color: var(--kk-text-dim); margin: 0 0 1.25rem; }
.kk-action-tile .kk-tile-icon { font-size: 2.2rem; margin-bottom: 1rem; display: block; }

.kk-list-item {
  display: flex; align-items: center; gap: 1rem;
  padding: .9rem 1rem;
  border-radius: var(--kk-radius);
  border: 1px solid var(--kk-border);
  background: var(--kk-surface);
  color: var(--kk-text); text-decoration: none;
  margin-bottom: .5rem;
  transition: border-color .15s ease, transform .12s ease;
}
.kk-list-item:hover { border-color: rgba(124,58,237,.5); color: var(--kk-text); transform: translateX(2px); }
.kk-list-item-title { font-weight: 500; }
.kk-list-item-meta { color: var(--kk-text-dim); font-size: .85rem; }

/* ───────────────────────────── Templates picker ────────────────────────── */
.kk-template-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .9rem;
}
.kk-template-tile {
  border-radius: var(--kk-radius);
  border: 2px solid transparent;
  cursor: pointer;
  overflow: hidden;
  transition: transform .12s ease, border-color .15s ease;
  position: relative;
}
.kk-template-tile:hover { transform: translateY(-2px); }
.kk-template-tile.selected { border-color: var(--kk-accent); }
.kk-template-tile.selected::after {
  content: "✓"; position: absolute; top: .4rem; right: .4rem;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--kk-accent); color: #fff;
  display: grid; place-items: center; font-size: .85rem; font-weight: 700;
}
.kk-template-preview {
  height: 110px; padding: 1rem;
  display: flex; flex-direction: column; justify-content: space-between;
  font-family: var(--kk-font-display);
}
.kk-template-name {
  padding: .5rem .75rem;
  background: var(--kk-surface);
  font-size: .85rem;
  border-top: 1px solid var(--kk-border);
}
.kk-template-bars {
  display: flex; gap: 4px; align-items: flex-end; height: 30px;
}
.kk-template-bars span { flex: 1; border-radius: 3px; }

/* ───────────────────────────── Chart picker ────────────────────────── */
.kk-chart-picker {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: .6rem;
}
.kk-chart-option {
  padding: .85rem .6rem;
  border-radius: var(--kk-radius);
  border: 2px solid var(--kk-border);
  background: var(--kk-surface);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, transform .12s ease;
}
.kk-chart-option:hover { transform: translateY(-1px); border-color: rgba(124,58,237,.5); }
.kk-chart-option.selected {
  border-color: var(--kk-accent);
  background: rgba(124, 58, 237, .12);
}
.kk-chart-option i { font-size: 1.5rem; display: block; margin-bottom: .35rem; color: var(--kk-accent-2); }
.kk-chart-option .lbl { font-size: .8rem; color: var(--kk-text-dim); }
.kk-chart-option.selected .lbl { color: var(--kk-text); }

/* ───────────────────────────── Question editor ────────────────────────── */
.kk-q-row {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem 1rem;
  background: var(--kk-surface);
  border: 1px solid var(--kk-border);
  border-radius: var(--kk-radius);
  margin-bottom: .5rem;
  text-decoration: none; color: var(--kk-text);
  transition: border-color .15s ease;
}
.kk-q-row:hover { border-color: rgba(124,58,237,.5); color: var(--kk-text); }
.kk-q-index {
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(124,58,237,.18);
  display: grid; place-items: center;
  font-family: var(--kk-font-mono); font-weight: 700;
  color: var(--kk-accent-2);
  flex-shrink: 0;
}
.kk-q-text { flex: 1; }
.kk-q-pill {
  font-size: .75rem; padding: .15rem .55rem;
  border-radius: 999px;
  background: var(--kk-surface-2);
  color: var(--kk-text-dim);
}

/* ───────────────────────────── Presenter stage ────────────────────────── */
.kk-stage {
  --stage-bg: var(--kk-bg);
  --stage-fg: var(--kk-text);
  --stage-accent: var(--kk-accent);
  --stage-accent-2: var(--kk-accent-2);
  background: var(--stage-bg); color: var(--stage-fg);
  min-height: 100vh;
  display: flex; flex-direction: column;
}
.kk-stage-header {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.kk-stage-code {
  font-family: var(--kk-font-mono);
  font-size: 1.5rem; font-weight: 700;
  letter-spacing: .15em;
  color: var(--stage-accent-2);
}
.kk-stage-body {
  flex: 1; display: grid; grid-template-columns: 1fr 320px;
  gap: 1.5rem; padding: 1.5rem;
}
@media (max-width: 980px) {
  .kk-stage-body { grid-template-columns: 1fr; }
}
.kk-stage-main {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--kk-radius-lg);
  padding: 2rem;
  position: relative;
  min-height: 400px;
}
.kk-stage-side {
  display: flex; flex-direction: column; gap: 1rem;
}
.kk-stage-q {
  font-family: var(--kk-font-display);
  font-size: clamp(1.5rem, 3vw, 2.6rem);
  line-height: 1.15;
  margin-bottom: 1.5rem;
}
.kk-stage-progress {
  font-family: var(--kk-font-mono);
  color: var(--kk-text-dim);
  font-size: .9rem;
}

.kk-chart-wrap {
  position: relative;
  width: 100%; height: clamp(280px, 50vh, 520px);
}
.kk-chart-wrap canvas { max-width: 100%; }
.kk-draw-canvas {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 5;
}
.kk-draw-canvas.active { pointer-events: auto; cursor: crosshair; }

.kk-tools {
  display: flex; gap: .4rem;
  background: var(--kk-surface);
  border: 1px solid var(--kk-border);
  border-radius: 14px;
  padding: .35rem;
}
.kk-tool {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--kk-text-dim);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.kk-tool:hover { background: var(--kk-surface-2); color: var(--kk-text); }
.kk-tool.active { background: rgba(124,58,237,.25); color: var(--kk-text); }

.kk-color-swatch {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
}
.kk-color-swatch.active { border-color: #fff; }

/* Presenter QR panel */
.kk-qr-panel {
  background: #fff; color: #111;
  padding: 1.25rem;
  border-radius: var(--kk-radius);
  text-align: center;
}
.kk-qr-panel img { max-width: 100%; }
.kk-qr-panel .code {
  font-family: var(--kk-font-mono);
  font-size: 1.8rem; font-weight: 700;
  letter-spacing: .25em;
  color: #1a0b2e;
  margin-top: .5rem;
}

/* Participant tally bars (presenter side) */
.kk-tally-row {
  display: flex; align-items: center; gap: .75rem;
  padding: .35rem 0;
  font-family: var(--kk-font-body);
}
.kk-tally-bar {
  flex: 1; height: 26px;
  background: rgba(255,255,255,.05);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.kk-tally-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--kk-accent), var(--kk-accent-2));
  width: 0%;
  transition: width .4s cubic-bezier(.4, 0, .2, 1);
}
.kk-tally-count { font-family: var(--kk-font-mono); width: 32px; text-align: right; color: var(--kk-text-dim); }

/* ───────────────────────────── Participant / play ────────────────────────── */
.kk-play {
  min-height: 100vh;
  display: flex; flex-direction: column;
  padding: 1.25rem;
  --p-bg: var(--kk-bg);
  --p-fg: var(--kk-text);
  --p-accent: var(--kk-accent);
  background: var(--p-bg); color: var(--p-fg);
}
.kk-play-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--kk-radius-lg);
  padding: 1.5rem;
  margin: auto 0;
}
.kk-choice {
  display: block; width: 100%;
  padding: 1.1rem 1.25rem;
  margin-bottom: .65rem;
  background: rgba(255,255,255,.06);
  border: 2px solid transparent;
  border-radius: var(--kk-radius);
  color: var(--p-fg);
  font-size: 1.05rem;
  text-align: left;
  cursor: pointer;
  transition: transform .12s ease, background .15s ease, border-color .15s ease;
}
.kk-choice:hover { transform: translateY(-1px); background: rgba(255,255,255,.10); }
.kk-choice.picked { border-color: var(--p-accent); background: rgba(124,58,237,.18); }
.kk-choice.correct { border-color: var(--kk-success); background: rgba(52,211,153,.15); }
.kk-choice.incorrect { border-color: var(--kk-danger); background: rgba(244,63,94,.15); }

/* Kahoot-style answer tiles */
.kk-tile-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: .75rem;
}
.kk-tile-answer {
  padding: 1.5rem 1rem; min-height: 110px;
  border-radius: var(--kk-radius);
  border: none;
  font-size: 1.1rem; font-weight: 600;
  color: #fff; cursor: pointer;
  transition: transform .12s ease, filter .15s ease;
  display: flex; align-items: center; gap: .8rem;
}
.kk-tile-answer:hover { filter: brightness(1.1); }
.kk-tile-answer:active { transform: scale(.97); }
.kk-tile-answer .shape { font-size: 1.6rem; }
.kk-tile-answer.t0 { background: linear-gradient(135deg, #e11d48, #be123c); }
.kk-tile-answer.t1 { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.kk-tile-answer.t2 { background: linear-gradient(135deg, #f59e0b, #d97706); }
.kk-tile-answer.t3 { background: linear-gradient(135deg, #16a34a, #15803d); }

/* Avatar picker */
.kk-avatar-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: .6rem;
}
.kk-avatar-tile {
  aspect-ratio: 1;
  display: grid; place-items: center;
  font-size: 2rem;
  background: var(--kk-surface);
  border: 2px solid var(--kk-border);
  border-radius: var(--kk-radius);
  cursor: pointer;
  transition: transform .12s ease, border-color .15s ease;
}
.kk-avatar-tile:hover { transform: translateY(-2px); }
.kk-avatar-tile.selected { border-color: var(--kk-accent); background: rgba(124,58,237,.18); }

/* Leaderboard */
.kk-lb-row {
  display: flex; align-items: center; gap: 1rem;
  padding: .85rem 1.1rem;
  background: var(--kk-surface);
  border-radius: var(--kk-radius);
  margin-bottom: .5rem;
  animation: kk-pop .3s ease-out;
}
@keyframes kk-pop {
  from { transform: scale(.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.kk-lb-rank {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(124,58,237,.18);
  display: grid; place-items: center;
  font-family: var(--kk-font-display); font-weight: 700;
  flex-shrink: 0;
}
.kk-lb-rank.gold { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #1a0b2e; }
.kk-lb-rank.silver { background: linear-gradient(135deg, #cbd5e1, #94a3b8); color: #1a0b2e; }
.kk-lb-rank.bronze { background: linear-gradient(135deg, #f59e0b, #b45309); color: #fff; }
.kk-lb-avatar { font-size: 1.8rem; }
.kk-lb-name { flex: 1; font-weight: 500; }
.kk-lb-score { font-family: var(--kk-font-mono); font-weight: 700; color: var(--kk-accent-2); }

/* Lobby */
.kk-lobby-big {
  text-align: center; padding: 3rem 1rem;
}
.kk-lobby-code {
  font-family: var(--kk-font-mono);
  font-size: clamp(3rem, 12vw, 7rem);
  font-weight: 700;
  letter-spacing: .15em;
  background: linear-gradient(135deg, var(--kk-accent), var(--kk-accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 1rem 0;
}
.kk-lobby-participants {
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
  margin-top: 2rem;
}
.kk-lobby-chip {
  padding: .35rem .75rem;
  background: var(--kk-surface);
  border-radius: 999px;
  display: flex; align-items: center; gap: .4rem;
  animation: kk-pop .3s ease-out;
}

/* Fullscreen mode */
.kk-stage.fullscreen .kk-stage-side { display: none; }
.kk-stage.fullscreen .kk-stage-body { grid-template-columns: 1fr; }

/* Group display */
.kk-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 1rem;
}
.kk-group-tile {
  background: var(--kk-surface);
  border-radius: var(--kk-radius);
  padding: 1rem;
}
.kk-group-tile-title {
  font-size: .95rem; color: var(--kk-text-dim);
  margin-bottom: .5rem;
}

/* Empty state */
.kk-empty {
  text-align: center; padding: 4rem 1rem;
  color: var(--kk-text-dim);
}
.kk-empty .em { font-size: 3rem; margin-bottom: 1rem; opacity: .5; }

/* ────────────────────────────────────────────────────────────────────
   APPEND these to your existing static/css/app.css  (do NOT replace).
   They add: drag-handle, sort ghost, modal dark fix, q-row tweaks.
   ──────────────────────────────────────────────────────────────────── */

.kk-drag-handle {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  color: var(--kk-text-dim);
  cursor: grab;
  flex-shrink: 0;
  transition: color .15s ease;
}
.kk-drag-handle:hover { color: var(--kk-text); }
.kk-drag-handle:active { cursor: grabbing; }

.kk-q-ghost {
  opacity: .35;
  background: rgba(124, 58, 237, .15) !important;
  border: 2px dashed var(--kk-accent) !important;
}

/* Bootstrap modal on dark theme — quick fix to make our invite modal readable */
.modal-content .form-control,
.modal-content .form-select {
  background: var(--kk-surface-2);
  color: var(--kk-text);
  border-color: var(--kk-border);
}
.modal-content .form-control::placeholder { color: var(--kk-text-dim); }

/* Tag for sort-success */
.kk-flash-info { border-left-color: var(--kk-accent-2); }

/* ─────────────────────────────────────────────────────────────────
   knock-knock · avatar & winner animations
   Loaded on every page that shows avatars (play, present, edit).
   ───────────────────────────────────────────────────────────────── */

/* ── Generic avatar bubble used on participant screens & leaderboard */
.kk-avatar-bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.35), rgba(255,255,255,.05) 60%, rgba(0,0,0,.25));
  font-size: 32px;
  line-height: 1;
  position: relative;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.18),
    0 8px 18px rgba(0,0,0,.35),
    inset 0 -4px 8px rgba(0,0,0,.25);
  will-change: transform;
}

.kk-avatar-bubble--sm { width: 36px; height: 36px; font-size: 22px; }
.kk-avatar-bubble--xs { width: 28px; height: 28px; font-size: 16px;
                        box-shadow: 0 0 0 2px rgba(255,255,255,.2), 0 4px 8px rgba(0,0,0,.3); }
.kk-avatar-bubble--xl { width: 96px; height: 96px; font-size: 56px; }

/* Top-of-screen avatar (participant header) */
.kk-self-avatar {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .35rem .9rem .35rem .35rem;
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
}
.kk-self-avatar .kk-self-name {
  font-weight: 700;
  font-size: .95rem;
  color: #f8fafc;
  letter-spacing: .01em;
}
.kk-self-avatar .kk-self-score {
  font-family: var(--kk-font-mono, ui-monospace, monospace);
  font-size: .8rem;
  color: #fcd34d;
  margin-left: .4rem;
}

/* ── Idle animations — applied via the `anim` field on the avatar.
      Each animation is short and infinite so the avatar feels alive
      without being distracting. */
@keyframes kk-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-6px) rotate(2deg); }
}
@keyframes kk-bounce {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  40%      { transform: translateY(-9px) scale(1.05, .95); }
  60%      { transform: translateY(-4px) scale(.98, 1.02); }
}
@keyframes kk-swing {
  0%, 100% { transform: rotate(-12deg); }
  50%      { transform: rotate(12deg); }
}
@keyframes kk-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes kk-flutter {
  0%, 100% { transform: translate(0, 0) rotate(-4deg); }
  25%      { transform: translate(3px, -4px) rotate(4deg); }
  50%      { transform: translate(0, -7px) rotate(-2deg); }
  75%      { transform: translate(-3px, -4px) rotate(2deg); }
}
@keyframes kk-zoom {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(6px); }
}
@keyframes kk-blastoff {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50%      { transform: translateY(-7px) rotate(-12deg); }
}
@keyframes kk-stomp {
  0%, 100% { transform: translateY(0) scaleY(1); }
  60%      { transform: translateY(2px) scaleY(.92); }
}
@keyframes kk-dash {
  0%, 100% { transform: translateX(0) skewX(0); }
  35%      { transform: translateX(-2px) skewX(-8deg); }
  65%      { transform: translateX(3px) skewX(6deg); }
}
@keyframes kk-wobble {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(6deg); }
}
@keyframes kk-tilt {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-12deg); }
  75%      { transform: rotate(12deg); }
}

/* Apply the chosen idle animation. Each animation gets its own pace. */
.kk-anim-kk-float    { animation: kk-float    3.2s ease-in-out infinite; }
.kk-anim-kk-bounce   { animation: kk-bounce   1.6s ease-in-out infinite; }
.kk-anim-kk-swing    { animation: kk-swing    2.4s ease-in-out infinite; transform-origin: 50% 0%; }
.kk-anim-kk-spin     { animation: kk-spin     5s   linear      infinite; }
.kk-anim-kk-flutter  { animation: kk-flutter  2s   ease-in-out infinite; }
.kk-anim-kk-zoom     { animation: kk-zoom     1.3s ease-in-out infinite; }
.kk-anim-kk-blastoff { animation: kk-blastoff 1.8s ease-in-out infinite; }
.kk-anim-kk-stomp    { animation: kk-stomp    1.1s ease-in-out infinite; }
.kk-anim-kk-dash     { animation: kk-dash     1.7s ease-in-out infinite; }
.kk-anim-kk-wobble   { animation: kk-wobble   2.6s ease-in-out infinite; }
.kk-anim-kk-tilt     { animation: kk-tilt     2.8s ease-in-out infinite; }

/* Respect users who don't want motion. */
@media (prefers-reduced-motion: reduce) {
  .kk-avatar-bubble,
  [class*="kk-anim-"] { animation: none !important; }
}

/* ── Leaderboard row — crown for #1, glow for top 3 ───────────────── */
.kk-lb-row {
  display: grid;
  grid-template-columns: 48px 56px 1fr auto;
  gap: .9rem;
  align-items: center;
  padding: .55rem .9rem;
  background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  margin-bottom: .5rem;
  transition: transform .2s ease;
}
.kk-lb-row:hover { transform: translateX(2px); }

.kk-lb-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-weight: 800;
  font-family: 'Clash Display', system-ui, sans-serif;
  font-size: 1.2rem;
  color: #1e293b;
  background: rgba(255,255,255,.85);
  position: relative;
}
.kk-lb-rank.gold   { background: linear-gradient(135deg,#fde68a,#f59e0b); color: #422006;
                     box-shadow: 0 0 24px rgba(251,191,36,.45); }
.kk-lb-rank.silver { background: linear-gradient(135deg,#e2e8f0,#94a3b8); color: #1f2937; }
.kk-lb-rank.bronze { background: linear-gradient(135deg,#fed7aa,#c2410c); color: #fff; }

/* Crown sitting on top of rank #1 */
.kk-lb-rank.gold::before {
  content: "👑";
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%) rotate(-8deg);
  font-size: 22px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));
  animation: kk-crown-wobble 1.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes kk-crown-wobble {
  0%, 100% { transform: translateX(-50%) rotate(-8deg) translateY(0); }
  50%      { transform: translateX(-50%) rotate(8deg)  translateY(-3px); }
}

.kk-lb-name { font-weight: 600; color: #f1f5f9; }
.kk-lb-score {
  font-family: 'Clash Display', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: #fbbf24;
}

/* Animated leaderboard avatar — slightly larger pulse for the leader */
.kk-lb-row.is-leader {
  background: linear-gradient(90deg, rgba(251,191,36,.14), rgba(251,191,36,.02));
  border-color: rgba(251,191,36,.35);
  box-shadow: 0 0 30px rgba(251,191,36,.15);
}
.kk-lb-row.is-leader .kk-avatar-bubble {
  box-shadow:
    0 0 0 3px rgba(251,191,36,.6),
    0 0 24px rgba(251,191,36,.4),
    0 8px 18px rgba(0,0,0,.35);
}

/* ── Winner-on-chart overlay ─────────────────────────────────────── */
.kk-chart-wrap {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 0;
  border-radius: 18px;
  overflow: visible;
}
/* The avatar bubble that floats over the winning bar/slice. */
.kk-winner-float {
  position: absolute;
  z-index: 20;
  pointer-events: none;
  transform: translate(-50%, -100%);
  transition: left .6s cubic-bezier(.4,0,.2,1), top .6s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
}
.kk-winner-float .kk-avatar-bubble {
  width: 84px; height: 84px; font-size: 50px;
  box-shadow:
    0 0 0 4px rgba(255,255,255,.9),
    0 0 40px rgba(251,191,36,.8),
    0 12px 30px rgba(0,0,0,.4);
  animation: kk-winner-pop 1.6s ease-in-out infinite;
}
.kk-winner-float .kk-winner-label {
  font-family: 'Clash Display', system-ui, sans-serif;
  font-weight: 800;
  color: #fbbf24;
  text-shadow: 0 2px 6px rgba(0,0,0,.6), 0 0 12px rgba(251,191,36,.4);
  font-size: .9rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
@keyframes kk-winner-pop {
  0%, 100% { transform: scale(1)    rotate(-3deg); }
  50%      { transform: scale(1.08) rotate(3deg); }
}

/* Celebration sparks — absolutely-positioned spans, animated outward. */
.kk-spark {
  position: absolute;
  left: 50%; top: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--spark-color, #fbbf24);
  box-shadow: 0 0 10px var(--spark-color, #fbbf24);
  pointer-events: none;
  opacity: 0;
  animation: kk-spark-burst 1.4s ease-out infinite;
  animation-delay: var(--spark-delay, 0s);
}
@keyframes kk-spark-burst {
  0%   { transform: translate(-50%, -50%) translate(0, 0)              scale(.6); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translate(-50%, -50%) translate(var(--sx), var(--sy)) scale(.2); opacity: 0; }
}

/* Crown that hovers above the winner's avatar on the chart. */
.kk-winner-crown {
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 38px;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.5));
  animation: kk-crown-bob 1.4s ease-in-out infinite;
}
@keyframes kk-crown-bob {
  0%, 100% { transform: translateX(-50%) translateY(0)   rotate(-6deg); }
  50%      { transform: translateX(-50%) translateY(-5px) rotate(6deg); }
}

/* ── Avatar picker tiles (used on the join page) ────────────────── */
.kk-avatar-picker-section { margin-bottom: 1.25rem; }
.kk-avatar-picker-section h4 {
  font-family: 'Clash Display', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .75rem;
  color: #94a3b8;
  margin: .5rem .25rem;
}
.kk-avatar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: .55rem;
}
.kk-avatar-tile {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 64px;
  border-radius: 14px;
  font-size: 32px;
  background: rgba(255,255,255,.05);
  border: 2px solid rgba(255,255,255,.08);
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.kk-avatar-tile:hover { transform: scale(1.05); border-color: rgba(255,255,255,.25); }
.kk-avatar-tile.selected {
  background: linear-gradient(135deg, rgba(251,191,36,.18), rgba(124,58,237,.18));
  border-color: #fbbf24;
  transform: scale(1.05);
  box-shadow: 0 0 16px rgba(251,191,36,.35);
}

/* ─────────────────────────────────────────────────────────────────
   knock-knock · chart background scenery
   Apply a `.kk-bg-<theme>` class to the chart wrapper to switch.
   The chart canvas itself remains transparent and sits on top.
   ───────────────────────────────────────────────────────────────── */

/* The wrapper takes the full chart area; backgrounds use ::before / ::after
   so we can layer two atmospheric elements (e.g. stars + drifting planet). */
.kk-chart-wrap.kk-bg-normal,
.kk-chart-wrap.kk-bg-space,
.kk-chart-wrap.kk-bg-forest,
.kk-chart-wrap.kk-bg-room,
.kk-chart-wrap.kk-bg-binary {
  position: relative;
  isolation: isolate;
}

/* Common pseudo-element scaffolding */
.kk-chart-wrap[class*="kk-bg-"]::before,
.kk-chart-wrap[class*="kk-bg-"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Chart.js canvas & special displays must sit ABOVE the scenery. */
.kk-chart-wrap canvas,
.kk-chart-wrap .kk-special {
  position: relative;
  z-index: 1;
}

/* Winner overlay above everything (set explicitly elsewhere too). */
.kk-chart-wrap .kk-winner-float,
.kk-chart-wrap .kk-spark-layer { z-index: 20; }

/* ── NORMAL — subtle radial vignette, no scenery ─────────────────── */
.kk-chart-wrap.kk-bg-normal {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.04), transparent 60%),
    linear-gradient(180deg, rgba(15,23,42,.4), rgba(15,23,42,.0));
}

/* ── SPACE — twinkling stars + a drifting planet ─────────────────── */
.kk-chart-wrap.kk-bg-space {
  background:
    radial-gradient(ellipse at 20% 10%, rgba(124,58,237,.18), transparent 50%),
    radial-gradient(ellipse at 80% 90%, rgba(34,211,238,.14), transparent 55%),
    linear-gradient(180deg, #0b1026 0%, #1a0c3a 60%, #0b1026 100%);
}
/* Star field — a base64-encoded SVG repeating with white dots. */
.kk-chart-wrap.kk-bg-space::before {
  background-image:
    radial-gradient(2px 2px at 10% 20%, #fff, transparent 50%),
    radial-gradient(1.5px 1.5px at 22% 70%, #fff, transparent 50%),
    radial-gradient(1px 1px at 35% 45%, #cbd5e1, transparent 50%),
    radial-gradient(2.5px 2.5px at 48% 12%, #fff, transparent 50%),
    radial-gradient(1.5px 1.5px at 60% 80%, #fde047, transparent 50%),
    radial-gradient(1px 1px at 73% 30%, #fff, transparent 50%),
    radial-gradient(2px 2px at 86% 55%, #fff, transparent 50%),
    radial-gradient(1.5px 1.5px at 92% 18%, #fbbf24, transparent 50%),
    radial-gradient(1px 1px at 15% 88%, #fff, transparent 50%),
    radial-gradient(2px 2px at 40% 95%, #fff, transparent 50%);
  background-size: 100% 100%;
  animation: kk-twinkle 3s ease-in-out infinite alternate;
}
@keyframes kk-twinkle {
  from { opacity: .55; }
  to   { opacity: 1; }
}
/* Drifting planet on the right side. */
.kk-chart-wrap.kk-bg-space::after {
  width: 120px; height: 120px;
  top: 12%; left: auto; right: -20px; bottom: auto; inset: auto -20px auto auto;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #fde68a, #f59e0b 40%, #b45309 80%, #422006);
  box-shadow:
    inset -12px -12px 30px rgba(0,0,0,.55),
    0 0 60px rgba(245,158,11,.35);
  animation: kk-planet-drift 22s ease-in-out infinite alternate;
}
@keyframes kk-planet-drift {
  from { transform: translate(0, 0); }
  to   { transform: translate(-20px, 30px); }
}

/* ── FOREST — gradient sky, silhouette trees, floating leaves ────── */
.kk-chart-wrap.kk-bg-forest {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(16,185,129,.25), transparent 60%),
    linear-gradient(180deg, #052e16 0%, #064e3b 50%, #022c22 100%);
}
.kk-chart-wrap.kk-bg-forest::before {
  /* Tree silhouettes via SVG */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 220' preserveAspectRatio='none'><g fill='%23022c22'><polygon points='0,220 30,140 50,170 70,120 95,160 115,130 140,170 165,135 190,180 215,150 240,175 270,140 295,170 320,125 345,165 370,140 400,180 430,135 460,170 490,145 520,180 550,150 580,170 610,130 640,165 670,145 700,170 730,135 760,160 800,140 800,220'/></g></svg>");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% 40%;
  opacity: .85;
}
.kk-chart-wrap.kk-bg-forest::after {
  /* Soft drifting fog layer */
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.05), transparent 30%),
    radial-gradient(circle at 70% 50%, rgba(255,255,255,.04), transparent 35%),
    radial-gradient(circle at 40% 70%, rgba(255,255,255,.06), transparent 30%);
  animation: kk-fog-drift 30s linear infinite;
}
@keyframes kk-fog-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-40px); }
}

/* ── ROOM — wood floor, warm wall ─────────────────────────────────── */
.kk-chart-wrap.kk-bg-room {
  background:
    linear-gradient(180deg, #3d2914 0%, #5e3a1d 40%, #4a2e16 70%, #2c1908 100%);
}
.kk-chart-wrap.kk-bg-room::before {
  /* "Wallpaper" — vertical stripes */
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,.02) 0 24px,
    rgba(0,0,0,.05)       24px 48px
  );
  opacity: .8;
}
.kk-chart-wrap.kk-bg-room::after {
  /* Floor plane along the bottom */
  background: linear-gradient(180deg, transparent 0%, transparent 65%,
                              #6b3a14 65%, #4a2509 100%);
  background-image: linear-gradient(180deg, transparent 0%, transparent 65%, #6b3a14 65%, #4a2509 100%),
                    repeating-linear-gradient(0deg, rgba(0,0,0,.15) 0 2px, transparent 2px 28px);
  background-blend-mode: multiply;
}

/* ── BINARY — Matrix-style digital rain ──────────────────────────── */
.kk-chart-wrap.kk-bg-binary {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(16,185,129,.10), transparent 65%),
    linear-gradient(180deg, #001a0b 0%, #001f0d 100%);
}
.kk-chart-wrap.kk-bg-binary::before {
  /* Columns of falling 1s and 0s using a repeating SVG. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 600' preserveAspectRatio='none'><style>.b{font:bold 18px monospace; fill:%2334d399;}</style><g class='b'><text x='10' y='40'>1</text><text x='10' y='90'>0</text><text x='10' y='140'>1</text><text x='10' y='190'>1</text><text x='10' y='240'>0</text><text x='10' y='290'>1</text><text x='10' y='340'>0</text><text x='10' y='390'>0</text><text x='10' y='440'>1</text><text x='10' y='490'>0</text><text x='10' y='540'>1</text><text x='60' y='20'>0</text><text x='60' y='70'>1</text><text x='60' y='120'>1</text><text x='60' y='170'>0</text><text x='60' y='220'>1</text><text x='60' y='270'>0</text><text x='60' y='320'>0</text><text x='60' y='370'>1</text><text x='60' y='420'>1</text><text x='60' y='470'>0</text><text x='60' y='520'>1</text><text x='110' y='50'>1</text><text x='110' y='100'>0</text><text x='110' y='150'>1</text><text x='110' y='200'>1</text><text x='110' y='250'>0</text><text x='110' y='300'>1</text><text x='110' y='350'>1</text><text x='110' y='400'>0</text><text x='110' y='450'>1</text><text x='110' y='500'>0</text><text x='110' y='550'>1</text><text x='160' y='30'>0</text><text x='160' y='80'>1</text><text x='160' y='130'>0</text><text x='160' y='180'>0</text><text x='160' y='230'>1</text><text x='160' y='280'>1</text><text x='160' y='330'>0</text><text x='160' y='380'>1</text><text x='160' y='430'>0</text><text x='160' y='480'>1</text><text x='160' y='530'>1</text></g></svg>");
  background-repeat: repeat;
  background-size: 200px 600px;
  opacity: .35;
  animation: kk-rain 8s linear infinite;
}
@keyframes kk-rain {
  from { background-position: 0 -600px; }
  to   { background-position: 0 0; }
}
.kk-chart-wrap.kk-bg-binary::after {
  /* Subtle scanline overlay for retro CRT feel. */
  background-image: repeating-linear-gradient(
    0deg, rgba(0,0,0,.15) 0 1px, transparent 1px 3px
  );
  mix-blend-mode: overlay;
}

/* Reduced motion: keep static look, no animation. */
@media (prefers-reduced-motion: reduce) {
  .kk-chart-wrap[class*="kk-bg-"]::before,
  .kk-chart-wrap[class*="kk-bg-"]::after { animation: none !important; }
}

/* ─────────────────────────────────────────────
   FIX: Make presenter chart use most screen space
   and stop top content from being clipped
   Put this at the END of app.css
───────────────────────────────────────────── */

.kk-stage {
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
}

.kk-stage-body {
  flex: 1;
  min-height: 0;
  padding: 0.75rem;
  gap: 0.75rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
}

.kk-stage-main {
  min-height: 0;
  height: 100%;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.kk-stage-q {
  margin-bottom: 0.5rem;
  font-size: clamp(1.25rem, 2.2vw, 2.2rem);
  line-height: 1.1;
  flex-shrink: 0;
}

.kk-chart-wrap {
  flex: 1 1 auto;
  width: 100%;
  height: auto !important;
  min-height: 0;
  position: relative;
  overflow: visible !important;
  border-radius: 18px;
}

.kk-chart-wrap canvas {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  display: block;
}

.kk-stage-side {
  min-height: 0;
  overflow-y: auto;
}

.kk-stage.fullscreen .kk-stage-body {
  grid-template-columns: 1fr;
}

.kk-stage.fullscreen .kk-stage-side {
  display: none;
}

.kk-stage.fullscreen .kk-stage-main {
  padding: 0.75rem;
}

.kk-stage.fullscreen .kk-chart-wrap {
  height: calc(100vh - 130px) !important;
}

/* Mobile/tablet presenter layout */
@media (max-width: 980px) {
  .kk-stage {
    height: auto;
    overflow: auto;
  }

  .kk-stage-body {
    grid-template-columns: 1fr;
    height: auto;
  }

  .kk-stage-main {
    min-height: 70vh;
  }

  .kk-chart-wrap {
    min-height: 55vh;
  }
}
/* ─────────────────────────────────────────────
   FIX: keep bottom axis labels visible
───────────────────────────────────────────── */

.kk-stage-main {
  display: flex;
  flex-direction: column;
  overflow: visible;
  min-height: 0;
}

.kk-chart-wrap {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  position: relative;
  overflow: visible !important;
  padding-bottom: 28px; /* reserve space for bottom labels */
}

.kk-chart-wrap canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* ──────────────────────────────────────────────────────────────────────
   Knock-Knock flyer theme refresh
   Apply this section after the existing styles. It gives the app templates
   the same premium neon flyer look used in the Knock-Knock/HANNS posters.
   ────────────────────────────────────────────────────────────────────── */
:root {
  --kk-bg: #070714;
  --kk-bg-2: #0d0b1f;
  --kk-surface: rgba(20, 18, 44, .82);
  --kk-surface-2: rgba(36, 30, 74, .86);
  --kk-border: rgba(255, 255, 255, .12);
  --kk-text: #f8fbff;
  --kk-text-dim: #b9bed8;
  --kk-accent: #8b5cf6;
  --kk-accent-2: #22d3ee;
  --kk-accent-3: #fb3c8f;
  --kk-orange: #ff9f1c;
  --kk-pink: #ff4fd8;
  --kk-blue: #3b82f6;
  --kk-glass: rgba(255, 255, 255, .06);
  --kk-glow-pink: 0 0 40px rgba(251, 60, 143, .32);
  --kk-glow-blue: 0 0 40px rgba(34, 211, 238, .26);
  --kk-shadow-glow: 0 22px 70px -24px rgba(139, 92, 246, .8);
}

html, body { overflow-x: hidden; }
body {
  background:
    radial-gradient(900px 520px at 12% -10%, rgba(251, 60, 143, .24), transparent 62%),
    radial-gradient(780px 500px at 88% 4%, rgba(34, 211, 238, .17), transparent 60%),
    radial-gradient(820px 560px at 55% 110%, rgba(255, 159, 28, .12), transparent 60%),
    linear-gradient(135deg, #060612 0%, #0b0820 46%, #140a2d 100%);
  background-attachment: fixed;
}
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}
body::before {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.13) 1px, transparent 0),
    linear-gradient(115deg, transparent 0 58%, rgba(255,255,255,.045) 58% 59%, transparent 59% 100%);
  background-size: 34px 34px, 100% 100%;
  mask-image: radial-gradient(circle at 82% 8%, #000 0 22%, transparent 48%), radial-gradient(circle at 8% 92%, #000 0 22%, transparent 46%);
}
body::after {
  background:
    conic-gradient(from 210deg at 85% 20%, transparent, rgba(251,60,143,.12), transparent 28%),
    conic-gradient(from 30deg at 8% 80%, transparent, rgba(34,211,238,.10), transparent 30%);
  filter: blur(1px);
}

/* Brand and navigation */
.kk-nav {
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(90deg, rgba(7,7,20,.82), rgba(20,10,45,.72));
  box-shadow: 0 12px 40px rgba(0,0,0,.24);
}
.kk-brand { gap: .7rem; }
.kk-brand-mark {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 0 34px rgba(251,60,143,.20), inset 0 0 0 1px rgba(255,255,255,.05);
  flex: 0 0 auto;
  font-size: 0;
}
.kk-logo-svg { width: 31px; height: 31px; display: block; filter: drop-shadow(0 0 10px rgba(251,60,143,.45)); }
.kk-brand-text {
  text-transform: lowercase;
  letter-spacing: -.04em;
  font-size: clamp(1.08rem, 2vw, 1.45rem);
}
.kk-brand-dash {
  color: transparent;
  background: linear-gradient(135deg, var(--kk-accent-2), var(--kk-pink), var(--kk-orange));
  -webkit-background-clip: text;
  background-clip: text;
}
.kk-nav-link {
  border-radius: 999px;
  padding: .42rem .75rem;
}
.kk-nav-link:hover {
  background: rgba(255,255,255,.06);
  color: #fff;
}

/* Buttons and surfaces */
.kk-btn-primary {
  background: linear-gradient(135deg, #ff7a18 0%, #fb3c8f 45%, #7c3aed 74%, #22d3ee 100%);
  color: #fff;
  border: 0;
  box-shadow: 0 16px 42px -16px rgba(251, 60, 143, .85), 0 0 0 1px rgba(255,255,255,.10) inset;
}
.kk-btn-primary:hover { color: #fff; filter: saturate(1.12) brightness(1.08); transform: translateY(-1px); }
.kk-btn-ghost {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.14);
  color: #e8ecff;
}
.kk-btn-ghost:hover { background: rgba(255,255,255,.09); }
.kk-card {
  background: linear-gradient(145deg, rgba(28, 23, 62, .86), rgba(11, 10, 29, .78));
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: 0 24px 80px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(18px);
}
.form-control,
.form-select {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.form-control:focus,
.form-select:focus {
  border-color: rgba(34,211,238,.72);
  box-shadow: 0 0 0 .2rem rgba(34, 211, 238, .14), 0 0 30px rgba(124,58,237,.18);
}
.form-label {
  color: #dce3ff;
  letter-spacing: .01em;
}
.kk-text-dim { color: var(--kk-text-dim); }
.text-secondary { color: var(--kk-text-dim) !important; }
.text-light { color: #fff !important; }

/* Shared flyer-style auth pages */
.kk-page-auth .kk-main,
.kk-page-profile .kk-main { max-width: 1240px; }
.kk-auth-shell {
  width: min(1180px, 100%);
  margin: clamp(1rem, 3vw, 2rem) auto;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(360px, .78fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: stretch;
}
.kk-auth-showcase,
.kk-profile-hero {
  position: relative;
  overflow: hidden;
  min-height: 640px;
  border-radius: 34px;
  padding: clamp(1.35rem, 3vw, 2.4rem);
  border: 1px solid rgba(255,255,255,.13);
  background:
    radial-gradient(500px 330px at 72% 14%, rgba(34,211,238,.18), transparent 66%),
    radial-gradient(460px 360px at 8% 20%, rgba(251,60,143,.23), transparent 62%),
    linear-gradient(145deg, rgba(26,17,57,.9), rgba(7,7,20,.72));
  box-shadow: 0 26px 90px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08);
}
.kk-auth-showcase::before,
.kk-profile-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, transparent 0 38%, rgba(255,255,255,.06) 38.4% 39.1%, transparent 39.5% 100%),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.16) 1px, transparent 0);
  background-size: 100% 100%, 28px 28px;
  mask-image: radial-gradient(circle at 92% 8%, #000 0 30%, transparent 60%);
  opacity: .72;
}
.kk-auth-showcase > *,
.kk-profile-hero > * { position: relative; z-index: 1; }
.kk-auth-kicker {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: #fff;
  padding: .48rem .8rem;
  border-radius: 999px;
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.12);
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  font-size: .72rem;
}
.kk-auth-title {
  font-size: clamp(2.8rem, 6.5vw, 5.7rem);
  line-height: .92;
  margin: 1.3rem 0 1rem;
}
.kk-gradient-text {
  color: transparent;
  background: linear-gradient(100deg, #fff 0 16%, #ff9f1c 30%, #fb3c8f 58%, #8b5cf6 76%, #22d3ee 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 0 42px rgba(251,60,143,.18);
}
.kk-auth-copy {
  color: #dbe4ff;
  font-size: clamp(1rem, 1.5vw, 1.22rem);
  max-width: 680px;
  line-height: 1.55;
}
.kk-auth-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 1.35rem 0 1.8rem;
}
.kk-auth-badge,
.kk-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .48rem .78rem;
  border-radius: 999px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.07);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.kk-pill--accent,
.kk-auth-badge--hot {
  background: linear-gradient(135deg, #ff7a18, #fb3c8f 52%, #7c3aed);
  border-color: transparent;
  box-shadow: 0 12px 34px rgba(251, 60, 143, .24);
}
.kk-auth-ui-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem;
  margin-top: 1.5rem;
}
.kk-auth-mini-card,
.kk-auth-stat-card,
.kk-auth-panel {
  background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 22px;
  padding: 1rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 44px rgba(0,0,0,.22);
}
.kk-auth-mini-card h3,
.kk-auth-stat-card h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; color: #cbd5ff; margin-bottom: .75rem; }
.kk-auth-poll-row {
  display: grid;
  grid-template-columns: 28px 1fr 44px;
  gap: .55rem;
  align-items: center;
  margin: .55rem 0;
  font-size: .86rem;
}
.kk-auth-poll-bar {
  height: 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.09);
  overflow: hidden;
}
.kk-auth-poll-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff9f1c, #fb3c8f, #8b5cf6, #22d3ee); }
.kk-auth-wordcloud {
  min-height: 134px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: .55rem .8rem;
}
.kk-auth-wordcloud span { font-weight: 900; line-height: 1; }
.kk-auth-wordcloud .xl { font-size: 1.7rem; color: #fb3c8f; }
.kk-auth-wordcloud .lg { font-size: 1.35rem; color: #ff9f1c; }
.kk-auth-wordcloud .md { font-size: 1.05rem; color: #22d3ee; }
.kk-auth-wordcloud .sm { font-size: .86rem; color: #a78bfa; }
.kk-auth-feature-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin-top: 1.2rem;
}
.kk-auth-feature {
  display: flex;
  gap: .7rem;
  align-items: center;
  padding: .8rem;
  border-radius: 18px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.09);
  color: #edf2ff;
  font-weight: 700;
}
.kk-auth-feature i {
  color: #22d3ee;
  font-size: 1.18rem;
  filter: drop-shadow(0 0 10px rgba(34,211,238,.35));
}
.kk-auth-panel {
  align-self: center;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: 30px;
}
.kk-auth-panel-head { text-align: center; margin-bottom: 1.3rem; }
.kk-auth-panel-title { font-size: clamp(2rem, 3vw, 2.8rem); margin-bottom: .35rem; }
.kk-auth-panel-sub { color: var(--kk-text-dim); margin-bottom: 0; }
.kk-auth-form-card { padding: 0; background: transparent; border: 0; box-shadow: none; }
.kk-auth-form-card .kk-card { padding: 0; }
.kk-auth-panel form.kk-card { background: transparent; border: 0; box-shadow: none; padding: 0; backdrop-filter: none; }
.kk-auth-foot-note { text-align: center; margin-top: 1rem; color: var(--kk-text-dim); }
.kk-auth-cta-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
  margin-top: 1rem;
}
.kk-auth-cta-strip span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-height: 44px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
  color: #e9edff;
  font-size: .82rem;
  font-weight: 700;
}

/* Signup stepper */
.kk-step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  margin: 1.25rem 0 .55rem;
}
.kk-step {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--kk-text-dim);
  font-weight: 900;
}
.kk-step--active { background: linear-gradient(135deg, #ff7a18, #fb3c8f, #7c3aed); color: #fff; box-shadow: 0 0 24px rgba(251,60,143,.25); }
.kk-step-line { width: min(64px, 14vw); height: 2px; background: linear-gradient(90deg, rgba(255,255,255,.24), rgba(255,255,255,.07)); }
.kk-step-labels {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  font-size: .76rem;
  color: var(--kk-text-dim);
  flex-wrap: wrap;
}
.kk-step-label--active { color: #fff; font-weight: 800; }

/* Profile page refresh */
.kk-profile-shell {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(360px, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
  width: min(1120px, 100%);
  margin: clamp(1rem, 3vw, 2rem) auto;
}
.kk-profile-hero { min-height: 560px; }
.kk-profile-card { padding: clamp(1.25rem, 3vw, 2rem) !important; border-radius: 30px; }
.kk-profile-logo-preview {
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  margin: 0 auto 1rem;
  border-radius: 28px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
  overflow: hidden;
}
.kk-profile-logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.kk-profile-metric-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem;
  margin-top: 1.4rem;
}
.kk-profile-metric {
  padding: 1rem;
  border-radius: 22px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
}
.kk-profile-metric strong { display: block; font-size: 1.5rem; color: #fff; }
.kk-profile-metric span { color: var(--kk-text-dim); font-size: .84rem; }

/* Compact pages */
@media (max-width: 980px) {
  .kk-auth-shell,
  .kk-profile-shell { grid-template-columns: 1fr; }
  .kk-auth-showcase,
  .kk-profile-hero { min-height: auto; }
  .kk-auth-title { font-size: clamp(2.65rem, 12vw, 4.5rem); }
}
@media (max-width: 640px) {
  .kk-main { padding: 1rem .85rem 2.5rem; }
  .kk-auth-showcase,
  .kk-auth-panel,
  .kk-profile-hero,
  .kk-profile-card { border-radius: 24px; }
  .kk-auth-ui-board,
  .kk-auth-feature-list,
  .kk-profile-metric-grid { grid-template-columns: 1fr; }
  .kk-auth-cta-strip { grid-template-columns: 1fr; }
  .kk-auth-panel { padding: 1rem; }
}


/* ════════════════════════════════════════════════════════════════════
   Knock-Knock flyer standard layer
   Shared by auth, Boardly, Hanns and game pages.
   ════════════════════════════════════════════════════════════════════ */
:root {
  --kk-flyer-ink: #060718;
  --kk-flyer-ink-2: #0c1028;
  --kk-flyer-card: rgba(16, 18, 46, .76);
  --kk-flyer-card-2: rgba(27, 25, 74, .72);
  --kk-flyer-line: rgba(255,255,255,.12);
  --kk-flyer-glow: 0 26px 90px rgba(0,0,0,.48), 0 0 44px rgba(124,58,237,.20);
  --kk-flyer-orange: #ff8a1f;
  --kk-flyer-pink: #ff3f98;
  --kk-flyer-violet: #8b5cf6;
  --kk-flyer-cyan: #22d3ee;
  --kk-flyer-green: #3ee6a8;
  --kk-flyer-yellow: #ffd166;
}

.kk-flyer-bg,
.kk-standard-page {
  min-height: 100vh;
  background:
    radial-gradient(900px 560px at 86% -8%, rgba(255, 112, 67, .26), transparent 62%),
    radial-gradient(760px 520px at 10% 0%, rgba(124, 58, 237, .34), transparent 58%),
    radial-gradient(620px 420px at 58% 102%, rgba(34, 211, 238, .16), transparent 60%),
    linear-gradient(135deg, #050616 0%, #090b23 45%, #160a2c 100%);
  position: relative;
  overflow-x: hidden;
}
.kk-flyer-bg::before,
.kk-standard-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .52;
  background:
    linear-gradient(115deg, transparent 0 42%, rgba(255,255,255,.06) 43%, transparent 46%),
    radial-gradient(circle at 12% 80%, rgba(255,255,255,.10) 0 1px, transparent 1.8px),
    radial-gradient(circle at 88% 32%, rgba(255,255,255,.12) 0 1px, transparent 1.8px);
  background-size: auto, 34px 34px, 42px 42px;
  mask-image: linear-gradient(to bottom, #000, rgba(0,0,0,.1));
}

.kk-flyer-shell {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 2rem) 0 clamp(2rem, 5vw, 4rem);
  position: relative;
  z-index: 1;
}

.kk-flyer-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .85rem;
  margin-bottom: clamp(1.2rem, 3vw, 2.2rem);
  padding: .72rem .85rem;
  border: 1px solid var(--kk-flyer-line);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255,255,255,.11), rgba(255,255,255,.035));
  box-shadow: var(--kk-flyer-glow);
  backdrop-filter: blur(18px);
}

.kk-logo-mark,
.kk-brand-mark--flyer {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border-radius: 14px;
  font-size: 0;
  background:
    linear-gradient(135deg, #3b82f6 0 20%, #8b5cf6 20% 42%, #ff3f98 42% 66%, #ff8a1f 66% 100%);
  box-shadow: 0 0 24px rgba(255,63,152,.32), inset 0 1px 0 rgba(255,255,255,.24);
  position: relative;
  transform: rotate(-4deg);
}
.kk-logo-mark::before,
.kk-brand-mark--flyer::before {
  content: "K";
  font-size: 1.3rem;
  line-height: 1;
  font-family: var(--kk-font-display, system-ui, sans-serif);
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
  transform: rotate(4deg);
}

.kk-flyer-brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  color: #fff;
  text-decoration: none;
  min-width: 0;
}
.kk-flyer-brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.kk-flyer-brand-name {
  font-family: var(--kk-font-display, system-ui, sans-serif);
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: 1;
}
.kk-flyer-brand-name .dot { color: var(--kk-flyer-pink); }
.kk-flyer-brand-sub {
  margin-top: .16rem;
  color: rgba(236, 242, 255, .68);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 800;
}

.kk-return-chip,
.kk-dashboard-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 40px;
  padding: .56rem .9rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: .9rem;
  background: linear-gradient(135deg, rgba(255,138,31,.18), rgba(255,63,152,.18), rgba(34,211,238,.12));
  box-shadow: 0 12px 34px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.12);
  transition: transform .15s ease, border-color .15s ease, filter .15s ease;
  white-space: nowrap;
}
.kk-return-chip:hover,
.kk-dashboard-chip:hover {
  color: #fff;
  transform: translateY(-1px);
  border-color: rgba(34,211,238,.45);
  filter: brightness(1.08);
}
.kk-return-chip--mini { min-height: 34px; padding: .4rem .7rem; font-size: .78rem; }

.kk-flyer-hero {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(300px, .72fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: stretch;
  margin-bottom: 1.25rem;
}
.kk-flyer-card {
  border-radius: 30px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.045)),
    var(--kk-flyer-card);
  border: 1px solid var(--kk-flyer-line);
  box-shadow: var(--kk-flyer-glow);
  backdrop-filter: blur(18px);
  position: relative;
  overflow: hidden;
}
.kk-flyer-card::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  right: -120px;
  top: -120px;
  background: radial-gradient(circle, rgba(255,63,152,.28), transparent 66%);
  pointer-events: none;
}
.kk-flyer-hero-main { padding: clamp(1.4rem, 4vw, 2.6rem); }
.kk-flyer-kicker {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  color: #eaf6ff;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.kk-flyer-title {
  margin: .8rem 0 .65rem;
  font-family: var(--kk-font-display, system-ui, sans-serif);
  font-size: clamp(2.35rem, 7vw, 5.8rem);
  line-height: .9;
  letter-spacing: -.07em;
  font-weight: 900;
}
.kk-flyer-gradient,
.kk-gradient-text {
  background: linear-gradient(110deg, #fff 8%, var(--kk-flyer-orange) 32%, var(--kk-flyer-pink) 58%, var(--kk-flyer-cyan) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kk-flyer-sub {
  color: rgba(237, 243, 255, .74);
  font-size: clamp(1rem, 2vw, 1.14rem);
  line-height: 1.55;
  max-width: 60ch;
}
.kk-flyer-badges { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1rem; }
.kk-flyer-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .48rem .7rem;
  border-radius: 999px;
  color: #fff;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  font-weight: 750;
  font-size: .82rem;
}
.kk-flyer-grid-card { padding: 1rem; display: grid; gap: .75rem; }
.kk-flyer-mini-panel {
  padding: .9rem;
  border-radius: 20px;
  background: rgba(0,0,0,.24);
  border: 1px solid rgba(255,255,255,.09);
}
.kk-flyer-mini-panel strong { color: #fff; display: block; margin-bottom: .35rem; }
.kk-flyer-mini-panel span { color: rgba(235,241,255,.68); font-size: .9rem; }

.kk-card,
.kk-list-item,
.form-control,
.form-select {
  box-shadow: 0 18px 52px rgba(0,0,0,.22);
}
.kk-card {
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.035));
  border-color: rgba(255,255,255,.12);
  backdrop-filter: blur(16px);
}
.form-control,
.form-select {
  background: rgba(9, 11, 35, .74);
  border-color: rgba(255,255,255,.12);
}
.form-text { color: rgba(220,228,255,.56) !important; }

@media (max-width: 860px) {
  .kk-flyer-hero { grid-template-columns: 1fr; }
  .kk-flyer-nav { border-radius: 20px; }
  .kk-flyer-title { font-size: clamp(2.4rem, 14vw, 4.4rem); }
}
@media (max-width: 520px) {
  .kk-flyer-shell { width: min(100% - 1rem, 1180px); }
  .kk-flyer-brand-sub { display: none; }
  .kk-return-chip span:not(.keep) { display: none; }
}

.kk-list-item-main{display:flex;align-items:center;gap:1rem;flex:1;color:inherit;text-decoration:none;min-width:0}.kk-list-item-row{display:flex;align-items:center;gap:.4rem}.kk-row-delete{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:12px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.06);color:#fb7185}.kk-row-delete:hover{background:#f43f5e;color:#fff}.kk-status-mini{font-weight:800;color:#22d3ee}.kk-text-dim{color:var(--kk-text-dim)!important;}


/* ──────────────────────────────────────────────────────────────
   Plotly + Folium rich chart/map picker support
   ────────────────────────────────────────────────────────────── */
.kk-rich-chart-note {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .75rem;
  border-radius: 12px;
  border: 1px solid rgba(34, 211, 238, .20);
  background: linear-gradient(135deg, rgba(34,211,238,.08), rgba(124,58,237,.08));
  color: var(--kk-text-dim);
  font-size: .82rem;
}
.kk-rich-chart-note b { color: var(--kk-text); }
.kk-chart-tile[data-chart-id^="plotly_"] .kk-chart-icon,
.kk-chart-tile[data-chart-id="folium_map"] .kk-chart-icon {
  filter: drop-shadow(0 0 10px rgba(34,211,238,.55));
}
.kk-chart-tile[data-chart-id^="plotly_"]::after,
.kk-chart-tile[data-chart-id="folium_map"]::after {
  content: "RICH";
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(34,211,238,.16);
  border: 1px solid rgba(34,211,238,.35);
  color: #67e8f9;
  font-size: .56rem;
  font-weight: 900;
  letter-spacing: .08em;
}
.kk-chart-tile { position: relative; }