/* VAL Theme Pack — 14 themes + extras */

[data-theme="val-neon"] {
  --surface-base: #050508; --surface-1: #0a0a12; --surface-2: #12121f; --surface-3: #1a1a2e;
  --accent: #00f5d4; --accent-hover: #72f8e5; --accent-muted: rgba(0,245,212,.12); --accent-glow: rgba(0,245,212,.3);
  --mesh-1: rgba(0,245,212,.12); --mesh-2: rgba(255,0,110,.08); --mesh-3: rgba(131,56,236,.08);
}
[data-theme="val-sunset"] {
  --surface-base: #0c0604; --surface-1: #150a06; --surface-2: #1f1008; --surface-3: #2a160c;
  --accent: #f97316; --accent-hover: #fb923c; --accent-muted: rgba(249,115,22,.12); --accent-glow: rgba(249,115,22,.25);
  --mesh-1: rgba(249,115,22,.12); --mesh-2: rgba(236,72,153,.08); --mesh-3: rgba(251,191,36,.06);
}
[data-theme="val-ocean"] {
  --surface-base: #020617; --surface-1: #0f172a; --surface-2: #1e293b; --surface-3: #334155;
  --accent: #06b6d4; --accent-hover: #22d3ee; --accent-muted: rgba(6,182,212,.12); --accent-glow: rgba(6,182,212,.25);
  --mesh-1: rgba(6,182,212,.1); --mesh-2: rgba(59,130,246,.08); --mesh-3: rgba(20,184,166,.06);
}
[data-theme="val-gold"] {
  --surface-base: #0a0804; --surface-1: #12100a; --surface-2: #1c1810; --surface-3: #262018;
  --accent: #eab308; --accent-hover: #facc15; --accent-muted: rgba(234,179,8,.12); --accent-glow: rgba(234,179,8,.25);
  --text: #faf8f0; --mesh-1: rgba(234,179,8,.1); --mesh-2: rgba(180,140,40,.06); --mesh-3: rgba(120,90,20,.04);
}
[data-theme="val-lavender"] {
  --surface-base: #0a0810; --surface-1: #110e18; --surface-2: #1a1524; --surface-3: #241e30;
  --accent: #c084fc; --accent-hover: #d8b4fe; --accent-muted: rgba(192,132,252,.12); --accent-glow: rgba(192,132,252,.25);
  --mesh-1: rgba(192,132,252,.1); --mesh-2: rgba(167,139,250,.08); --mesh-3: rgba(139,92,246,.06);
}
[data-theme="val-mono"] {
  --surface-base: #0a0a0a; --surface-1: #111; --surface-2: #1a1a1a; --surface-3: #242424;
  --accent: #e5e5e5; --accent-hover: #fff; --accent-muted: rgba(255,255,255,.08); --accent-glow: rgba(255,255,255,.15);
  --mesh-1: rgba(255,255,255,.04); --mesh-2: rgba(255,255,255,.03); --mesh-3: rgba(255,255,255,.02);
}
[data-theme="val-nord"] {
  --surface-base: #2e3440; --surface-1: #3b4252; --surface-2: #434c5e; --surface-3: #4c566a;
  --accent: #88c0d0; --accent-hover: #8fbcbb; --accent-muted: rgba(136,192,208,.15); --accent-glow: rgba(136,192,208,.25);
  --text: #eceff4; --text-secondary: #d8dee9; --text-tertiary: #81a1c1;
}
[data-theme="val-tokyo"] {
  --surface-base: #1a1b26; --surface-1: #1f2335; --surface-2: #24283b; --surface-3: #292e42;
  --accent: #7aa2f7; --accent-hover: #89b4fa; --accent-muted: rgba(122,162,247,.12); --accent-glow: rgba(122,162,247,.25);
  --text: #c0caf5; --text-secondary: #9aa5ce;
}
[data-theme="val-solar"] {
  --surface-base: #002b36; --surface-1: #073642; --surface-2: #0e4452; --surface-3: #155a6a;
  --accent: #2aa198; --accent-hover: #3fc1b8; --accent-muted: rgba(42,161,152,.15); --accent-glow: rgba(42,161,152,.25);
  --text: #fdf6e3; --text-secondary: #93a1a1;
}
[data-theme="val-candy"] {
  --surface-base: #120818; --surface-1: #1a0c24; --surface-2: #241030; --surface-3: #2e143c;
  --accent: #ff6bcb; --accent-hover: #ff8fd8; --accent-muted: rgba(255,107,203,.12); --accent-glow: rgba(255,107,203,.3);
}
[data-theme="val-matrix"] {
  --surface-base: #000800; --surface-1: #001200; --surface-2: #001a00; --surface-3: #002400;
  --accent: #00ff41; --accent-hover: #39ff6a; --accent-muted: rgba(0,255,65,.1); --accent-glow: rgba(0,255,65,.25);
  --text: #d4ffd4; --text-secondary: #5cb85c;
}

body.aurora-on .mesh-orb { filter: blur(100px); animation-duration: 10s; opacity: .35 !important; }
body[data-accent] { --accent: var(--custom-accent); --accent-muted: color-mix(in srgb, var(--custom-accent) 14%, transparent); }

.sw-neon { background: linear-gradient(135deg, #00f5d4, #050508); }
.sw-sunset { background: linear-gradient(135deg, #f97316, #ec4899); }
.sw-ocean { background: linear-gradient(135deg, #06b6d4, #020617); }
.sw-gold { background: linear-gradient(135deg, #eab308, #0a0804); }
.sw-lavender { background: linear-gradient(135deg, #c084fc, #0a0810); }
.sw-mono { background: linear-gradient(135deg, #fff, #111); }
.sw-nord { background: linear-gradient(135deg, #88c0d0, #2e3440); }
.sw-tokyo { background: linear-gradient(135deg, #7aa2f7, #1a1b26); }
.sw-solar { background: linear-gradient(135deg, #2aa198, #002b36); }
.sw-candy { background: linear-gradient(135deg, #ff6bcb, #120818); }
.sw-matrix { background: linear-gradient(135deg, #00ff41, #000800); }

.theme-grid.expanded { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.theme-popover.wide { width: 320px; }

.health-ring-wrap { display: flex; align-items: center; gap: 20px; }
.health-ring {
  width: 84px; height: 84px; border-radius: 50%; flex-shrink: 0;
  background: conic-gradient(var(--accent) calc(var(--score) * 1%), var(--surface-3) 0);
  display: grid; place-items: center; position: relative;
}
.health-ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--surface-1); }
.health-ring span { position: relative; font-size: 20px; font-weight: 700; }
.health-meta h4 { margin: 0 0 4px; font-size: 17px; font-weight: 600; }
.health-meta p { margin: 0; font-size: 12px; color: var(--text-secondary); }

.fab {
  position: fixed; bottom: 24px; right: 24px; z-index: 60;
  width: 50px; height: 50px; border-radius: 14px; border: none;
  background: var(--accent); color: #fff; cursor: pointer;
  box-shadow: 0 8px 28px var(--accent-glow);
  font-size: 20px; transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.fab:hover { transform: scale(1.1) translateY(-3px); }

.modal-overlay { position: fixed; inset: 0; z-index: 250; background: rgba(0,0,0,.65); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 24px; }
.modal { width: min(500px,100%); background: var(--surface-1); border: 1px solid var(--border-hover); border-radius: var(--radius-lg); box-shadow: 0 32px 80px rgba(0,0,0,.5); }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.modal-head h3 { margin: 0; font-size: 15px; }
.modal-body { padding: 16px 20px 20px; max-height: 380px; overflow-y: auto; }
.shortcut-row { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.shortcut-row kbd { padding: 2px 8px; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--border); font-size: 11px; }

.history-list { display: flex; flex-direction: column; gap: 6px; }
.history-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 14px; background: var(--surface-2); border-radius: 8px; border: 1px solid var(--border); font-size: 13px; }
.history-item code { font-family: var(--mono); font-size: 12px; color: var(--text-secondary); }
.result-tag { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; }
.result-tag.hit { background: var(--success-muted); color: var(--success); }
.result-tag.miss { background: var(--danger-muted); color: var(--danger); }
.result-tag.ok { background: var(--accent-muted); color: var(--accent); }

.filter-bar { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
.filter-bar input { flex: 1; min-width: 160px; }
.filter-pill { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); font: inherit; font-size: 12px; cursor: pointer; color: var(--text-secondary); }
.filter-pill.active { background: var(--accent-muted); border-color: var(--accent); color: var(--accent); }

.accent-picker { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.accent-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform .15s; }
.accent-swatch.active { border-color: var(--text); transform: scale(1.1); }

.quick-bar { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 14px; padding-bottom: 2px; }
.quick-chip { flex-shrink: 0; padding: 7px 14px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: 12px; cursor: pointer; color: var(--text-secondary); transition: all .15s; }
.quick-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-muted); }

.luhn-result { padding: 16px; border-radius: 8px; margin-top: 12px; font-size: 14px; }
.luhn-result.valid { background: var(--success-muted); border: 1px solid color-mix(in srgb, var(--success) 30%, transparent); color: var(--success); }
.luhn-result.invalid { background: var(--danger-muted); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); color: var(--danger); }