/* ========================================================== */
/* GoalComm — Premium Dark Dashboard                          */
/* ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ========================================================== */
/* Themes                                                     */
/* ========================================================== */
:root,
:root[data-theme="dark"] {
  /* ----- surfaces ----- */
  --bg:           #0a0b0e;
  --bg-soft:      #0d0f13;
  --surface-1:    #12141a;
  --surface-2:    #181b22;
  --surface-3:    #1f232c;
  --surface-hover:#22272f;

  /* ----- lines ----- */
  --border:       rgba(255, 255, 255, 0.06);
  --border-mid:   rgba(255, 255, 255, 0.09);
  --border-strong:rgba(255, 255, 255, 0.13);

  /* ----- text ----- */
  --text:         #f0f3f8;
  --text-dim:     #b8c0cc;
  --text-muted:   #7c8493;
  --text-faint:   #4a525e;

  /* ----- accent (emerald — "live data") ----- */
  --accent:        #10b981;
  --accent-bright: #34d399;
  --accent-dim:    rgba(16, 185, 129, 0.12);
  --accent-glow:   rgba(16, 185, 129, 0.22);

  /* ----- status ----- */
  --ok:    #22c55e;
  --warn:  #f59e0b;
  --err:   #ef4444;
  --info:  #3b82f6;

  /* ----- provider colors ----- */
  --p-goal:       #34d399;
  --p-espn:       #fb7185;
  --p-sportmonks: #60a5fa;
  --p-sportradar: #a78bfa;
  --p-audiosrt:   #fb923c;
  --p-merged:     #fbbf24;

  /* ----- background fx ----- */
  --bg-radial-1: rgba(16,185,129,0.05);
  --bg-radial-2: rgba(96,165,250,0.03);

  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg:           #f7f8fb;
  --bg-soft:      #ffffff;
  --surface-1:    #ffffff;
  --surface-2:    #f1f3f7;
  --surface-3:    #e7eaef;
  --surface-hover:#dde1e8;

  --border:       rgba(15, 23, 42, 0.08);
  --border-mid:   rgba(15, 23, 42, 0.12);
  --border-strong:rgba(15, 23, 42, 0.18);

  --text:         #0f172a;
  --text-dim:     #334155;
  --text-muted:   #64748b;
  --text-faint:   #94a3b8;

  --accent:        #059669;
  --accent-bright: #10b981;
  --accent-dim:    rgba(5, 150, 105, 0.10);
  --accent-glow:   rgba(5, 150, 105, 0.18);

  --ok:    #16a34a;
  --warn:  #d97706;
  --err:   #dc2626;
  --info:  #2563eb;

  --p-goal:       #059669;
  --p-espn:       #e11d48;
  --p-sportmonks: #2563eb;
  --p-sportradar: #7c3aed;
  --p-audiosrt:   #ea580c;
  --p-merged:     #d97706;

  --bg-radial-1: rgba(5,150,105,0.06);
  --bg-radial-2: rgba(37,99,235,0.03);

  color-scheme: light;
}

:root {

  /* ----- spacing scale (4px base) ----- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  48px;
  --s-9:  64px;

  /* ----- radius ----- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-full: 999px;

  /* ----- elevation ----- */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.25), 0 1px 3px rgba(0,0,0,0.4);
  --shadow-3: 0 12px 32px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.4);
  --shadow-accent: 0 4px 24px rgba(16,185,129,0.18);
  --shadow-modal: 0 24px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);

  /* ----- motion ----- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:  cubic-bezier(0.6, 0.04, 0.98, 0.34);
  --t-fast: 120ms;
  --t-mid:  200ms;
  --t-slow: 320ms;
}

/* ----- reset ----- */
* { box-sizing: border-box; }
*:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; border-radius: var(--r-sm); }
html, body {
  margin: 0; padding: 0; background: var(--bg); color: var(--text);
  font-family: 'Inter', -apple-system, system-ui, sans-serif; font-size: 14px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss03';
  transition: background-color var(--t-mid) var(--ease-out), color var(--t-mid) var(--ease-out);
}
body::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(1200px 800px at 10% -200px, var(--bg-radial-1), transparent 60%),
    radial-gradient(900px 600px at 90% 10%, var(--bg-radial-2), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
body > * { position: relative; z-index: 1; }
a { color: var(--accent-bright); text-decoration: none; }
a:hover { text-decoration: underline; }
.hidden { display: none !important; }
.mono, code { font-family: 'JetBrains Mono', ui-monospace, monospace; font-feature-settings: 'tnum', 'zero'; font-size: 0.92em; }
code { background: var(--surface-2); padding: 1px 6px; border-radius: var(--r-sm); border: 1px solid var(--border); }
::selection { background: var(--accent-glow); color: var(--text); }

/* ========================================================== */
/* Top bar                                                    */
/* ========================================================== */
.topbar {
  display: flex; align-items: center; gap: var(--s-6);
  padding: var(--s-3) var(--s-6);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  position: sticky; top: 0; z-index: 50;
}
.theme-toggle { background: var(--surface-2); }
.theme-toggle .ico-moon, .theme-toggle .ico-sun { display: none; }
:root[data-theme="dark"]  .theme-toggle .ico-sun  { display: block; }
:root[data-theme="light"] .theme-toggle .ico-moon { display: block; }
.brand { display: flex; align-items: center; gap: var(--s-2); }
.brand .logo {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 15px; letter-spacing: -0.01em; color: var(--text);
}
.brand .logo svg { width: 22px; height: 22px; color: var(--accent-bright); }
.brand .logo > *, .nav-link > * { pointer-events: none; } /* clicks always bubble to the <a> for HTMX */
.brand .subtitle {
  display: inline-flex; align-items: center;
  color: var(--text-muted); font-size: 12px; padding-left: var(--s-3); border-left: 1px solid var(--border);
}
.nav { display: flex; gap: var(--s-2); flex: 1; margin-left: var(--s-4); }
.nav-link {
  color: var(--text-muted); font-size: 13.5px; font-weight: 500;
  padding: 8px 12px; border-radius: var(--r-md);
  transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
  text-decoration: none;
}
.nav-link:hover { color: var(--text); background: var(--surface-2); }
.nav-link.active { color: var(--text); background: var(--surface-2); }

.status-pills { display: flex; gap: var(--s-2); }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-full); background: var(--surface-2);
  font-size: 11.5px; color: var(--text-muted); border: 1px solid var(--border); font-weight: 500;
}
.pill .dot {
  width: 6px; height: 6px; border-radius: var(--r-full); background: var(--text-muted);
  box-shadow: 0 0 0 0 currentColor;
}
.pill.ok .dot   { background: var(--ok);   animation: pulse 2s var(--ease-out) infinite; }
.pill.warn .dot { background: var(--warn); }
.pill.err .dot  { background: var(--err); }
.pill.ok   { color: var(--ok);   border-color: rgba(34,197,94,0.25); background: rgba(34,197,94,0.06); }
.pill.warn { color: var(--warn); border-color: rgba(245,158,11,0.25); background: rgba(245,158,11,0.06); }
.pill.err  { color: var(--err);  border-color: rgba(239,68,68,0.25);  background: rgba(239,68,68,0.06); }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  50%      { box-shadow: 0 0 0 4px transparent; opacity: 0.7; }
}

/* ========================================================== */
/* Main layout                                                */
/* ========================================================== */
main,
main#app {
  display: block;
  padding: var(--s-6) var(--s-5);
  max-width: 1080px !important;
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}
html, body { overflow-x: hidden; }
.view { display: flex; flex-direction: column; gap: var(--s-6); animation: fade-in 300ms var(--ease-out); }
@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.page-head {
  display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-2);
}
.page-head h1 {
  margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; flex: 1; line-height: 1.2;
}
.page-head-actions { display: flex; gap: var(--s-2); }

/* Export dropdown (native <details>) */
.export-menu { position: relative; }
.export-menu > summary {
  list-style: none; user-select: none; cursor: pointer;
}
.export-menu > summary::-webkit-details-marker { display: none; }
.export-menu-list {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 40;
  display: flex; flex-direction: column; min-width: 170px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.export-menu-list a {
  padding: 8px 10px; border-radius: var(--r-sm, 6px);
  color: var(--text); text-decoration: none; font-size: 13px; white-space: nowrap;
}
.export-menu-list a:hover { background: var(--surface); }
.row { display: flex; gap: var(--s-2); align-items: center; }
.row.right { justify-content: flex-end; }

/* ========================================================== */
/* Buttons                                                    */
/* ========================================================== */
.btn-primary, .btn-ghost, .btn-warn, .btn-danger, .btn-icon, .btn-sm {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 14px; border-radius: var(--r-md); border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); cursor: pointer; font-size: 13px; font-weight: 500;
  font-family: inherit; line-height: 1;
  transition: all var(--t-fast) var(--ease-out);
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(180deg, var(--accent-bright) 0%, var(--accent) 100%);
  color: #04231a; border-color: rgba(0,0,0,0.15); font-weight: 600;
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 1px 2px rgba(0,0,0,0.3);
}
.btn-primary:hover {
  filter: brightness(1.05);
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, var(--shadow-accent);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); filter: brightness(0.98); }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--border-strong); }
.btn-warn { background: var(--warn); color: #1a1407; border-color: rgba(0,0,0,0.15); font-weight: 600; }
.btn-warn:hover { filter: brightness(1.05); }
.btn-danger { background: transparent; color: var(--err); border-color: rgba(239,68,68,0.3); }
.btn-danger:hover { background: rgba(239,68,68,0.08); border-color: var(--err); }
.btn-icon { padding: 7px 9px; }
.btn-sm { padding: 6px 10px; font-size: 12px; }

/* ========================================================== */
/* Inputs                                                     */
/* ========================================================== */
input, select, textarea {
  background: var(--surface-1); color: var(--text);
  border: 1px solid var(--border-mid); padding: 10px 12px; border-radius: var(--r-md);
  font-size: 13.5px; width: 100%; font-family: inherit;
  transition: border var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }
input:hover, select:hover, textarea:hover { border-color: var(--border-strong); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); background: var(--bg-soft);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
select { appearance: none; -webkit-appearance: none; padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237c8493' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}

/* ========================================================== */
/* Cards / sections                                           */
/* ========================================================== */
.card, .section {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.card h3, .section h3 {
  margin: 0 0 4px 0; font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted); font-weight: 600;
}
.field { display: flex; flex-direction: column; gap: 5px; }
.field label {
  font-size: 11.5px; color: var(--text-dim); font-weight: 500;
  letter-spacing: 0.02em; display: flex; align-items: center; gap: 6px;
}
.hint { color: var(--text-muted); font-size: 11.5px; }

.key-status {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: var(--r-full); margin-left: 6px;
  font-family: 'JetBrains Mono', monospace; text-transform: none;
}
.key-status.set {
  background: rgba(34,197,94,0.10); color: var(--ok);
  border: 1px solid rgba(34,197,94,0.3);
}
.key-status.set .tick { font-weight: 700; }
.key-status.unset {
  background: var(--surface-2); color: var(--text-muted);
  border: 1px solid var(--border);
}

/* ========================================================== */
/* Empty states                                               */
/* ========================================================== */
.empty {
  color: var(--text-muted); padding: var(--s-9) var(--s-5);
  text-align: center; font-size: 14px;
}
.empty code { background: var(--surface-2); }
.empty-mini { color: var(--text-muted); padding: var(--s-5); text-align: center; font-size: 12.5px; }
.empty-state {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
  padding: var(--s-9) var(--s-5); text-align: center;
}
.empty-state-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--surface-2); display: flex; align-items: center; justify-content: center;
  font-size: 32px; color: var(--text-faint);
  border: 1px solid var(--border);
}
.empty-state h2 { margin: 0; font-size: 18px; font-weight: 600; }
.empty-state p { margin: 0 0 var(--s-3); color: var(--text-muted); max-width: 360px; }

/* ========================================================== */
/* Match list (bento grid)                                    */
/* ========================================================== */
.matches-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: center;
}
.matches-grid .match-card,
.matches-grid .empty-state {
  flex: 0 0 340px;
  max-width: 100%;
}
.match-card {
  position: relative; background: var(--surface-1);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--s-5); cursor: pointer; display: flex; flex-direction: column; gap: var(--s-3);
  transition: all var(--t-mid) var(--ease-out);
  overflow: hidden;
}
.match-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 0%, var(--accent-dim) 100%);
  opacity: 0; transition: opacity var(--t-mid) var(--ease-out); pointer-events: none;
}
.match-card:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-2); }
.match-card:hover::before { opacity: 0.6; }
.match-card > * { position: relative; }
.match-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-3); }
.match-card .name { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; flex: 1; }
.match-card .sources { display: flex; gap: 6px; flex-wrap: wrap; }
.match-card-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: var(--s-3); border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace;
}
.match-card .meta { font-size: 11.5px; color: var(--text-muted); }

.src-chip {
  font-size: 10px; padding: 3px 8px; border-radius: var(--r-full);
  background: var(--surface-2); color: var(--text-muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em; border: 1px solid var(--border);
  font-family: 'JetBrains Mono', monospace;
}
.src-chip.goal       { color: var(--p-goal);       border-color: rgba(52,211,153,0.25); background: rgba(52,211,153,0.06); }
.src-chip.espn       { color: var(--p-espn);       border-color: rgba(251,113,133,0.25); background: rgba(251,113,133,0.06); }
.src-chip.sportmonks { color: var(--p-sportmonks); border-color: rgba(96,165,250,0.25);  background: rgba(96,165,250,0.06); }
.src-chip.sportradar { color: var(--p-sportradar); border-color: rgba(167,139,250,0.25); background: rgba(167,139,250,0.06); }
.src-chip.audiosrt   { color: var(--p-audiosrt);   border-color: rgba(251,146,60,0.30);  background: rgba(251,146,60,0.08); }

.tracking-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; padding: 4px 10px; border-radius: var(--r-full);
  background: rgba(34,197,94,0.08); color: var(--ok);
  border: 1px solid rgba(34,197,94,0.25); font-weight: 600;
}
.tracking-pill .dot {
  width: 6px; height: 6px; border-radius: var(--r-full); background: currentColor;
  animation: pulse-dot 1.6s var(--ease-out) infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; }
  50%      { box-shadow: 0 0 0 4px transparent; }
}
.idle-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; padding: 4px 10px; border-radius: var(--r-full);
  background: var(--surface-2); color: var(--text-muted);
  border: 1px solid var(--border); font-weight: 500;
}
.idle-pill .dot { width: 6px; height: 6px; border-radius: var(--r-full); background: currentColor; }

/* ========================================================== */
/* Modal (glassmorphism backdrop)                             */
/* ========================================================== */
.modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; padding: var(--s-4); animation: fade-in 200ms var(--ease-out);
}
.modal-content {
  background: var(--surface-1); border: 1px solid var(--border-mid);
  border-radius: var(--r-xl); width: 560px; max-width: 95vw; max-height: 90vh; overflow: auto;
  box-shadow: var(--shadow-modal);
  animation: pop-in 260ms var(--ease-out);
}
@keyframes pop-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--s-5) var(--s-6); border-bottom: 1px solid var(--border);
}
.modal-head h2 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.modal-body { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); }
.modal-foot { padding: var(--s-4) var(--s-6); border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: var(--s-2); background: var(--bg-soft); border-radius: 0 0 var(--r-xl) var(--r-xl); }

/* ========================================================== */
/* Provider lookup (search fixtures/events by date)            */
/* ========================================================== */
.input-with-action { display: flex; gap: var(--s-2); align-items: stretch; }
.input-with-action input { flex: 1; }
.input-with-action .btn-sm { flex-shrink: 0; }

.lookup-panel {
  margin-top: var(--s-2);
  padding: var(--s-3);
  background: var(--bg-soft);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-md);
}
.lookup-form { display: flex; gap: var(--s-2); margin-bottom: var(--s-3); }
.lookup-form input[type="date"] { max-width: 180px; }

.lookup-step {
  font-size: 11.5px; color: var(--text-muted); padding: 6px 4px;
  border-bottom: 1px solid var(--border); margin-bottom: var(--s-2);
  display: flex; align-items: center; gap: var(--s-3);
}
.lookup-step code {
  font-size: 10.5px; padding: 1px 5px;
  background: var(--surface-3); color: var(--accent-bright);
}
.link-back {
  background: none; border: 0; color: var(--accent-bright);
  cursor: pointer; padding: 2px 8px; font-size: 11.5px;
  font-family: inherit; border-radius: var(--r-sm);
}
.link-back:hover { background: var(--surface-3); }
.lookup-results {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 320px; overflow-y: auto;
}
.lookup-row {
  display: grid; grid-template-columns: minmax(80px, auto) 1fr; gap: var(--s-3);
  padding: 8px 12px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); cursor: pointer; text-align: left;
  font-size: 12.5px; font-family: inherit; color: var(--text);
  transition: all var(--t-fast) var(--ease-out);
}
.lookup-row:hover { border-color: var(--accent-bright); background: var(--surface-3); }
.lookup-row .lookup-id {
  font-family: 'JetBrains Mono', monospace; color: var(--accent-bright);
  font-weight: 600; font-size: 11.5px;
  align-self: start;
}
.lookup-row .lookup-teams { font-weight: 600; }
.lookup-row .lookup-meta {
  grid-column: 2; color: var(--text-muted); font-size: 11px; margin-top: 2px;
}

/* ========================================================== */
/* Match detail — scoreboard                                  */
/* ========================================================== */
.md-scoreboard {
  background:
    linear-gradient(180deg, var(--surface-2) 0%, var(--surface-1) 100%);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--s-6) var(--s-7);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-5);
  position: relative; overflow: hidden;
}
.md-scoreboard::after {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 60%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-glow), transparent);
}
.md-scoreboard .team { display: flex; align-items: center; gap: var(--s-3); }
.md-scoreboard .team.right { justify-content: flex-end; }
.md-scoreboard .team .name { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.md-scoreboard .team img { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }
.md-scoreboard .team-blank { width: 44px; height: 44px; border-radius: 50%; background: var(--surface-3); }
.md-scoreboard .vs { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.md-scoreboard .vs .nums {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: 40px; font-weight: 700; letter-spacing: -0.03em; line-height: 1;
  font-family: 'JetBrains Mono', monospace;
}
.md-scoreboard .vs .nums .dash { color: var(--text-faint); font-weight: 300; }
.md-scoreboard .vs .status {
  font-size: 10.5px; color: var(--accent-bright); text-transform: uppercase;
  letter-spacing: 0.12em; font-weight: 700; padding: 3px 10px;
  background: var(--accent-dim); border: 1px solid rgba(52,211,153,0.25); border-radius: var(--r-full);
}
.source-statuses {
  grid-column: 1 / -1; display: flex; gap: var(--s-2);
  padding-top: var(--s-5); border-top: 1px solid var(--border); flex-wrap: wrap;
}
.source-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--text-dim);
  padding: 5px 12px; border-radius: var(--r-full);
  background: var(--surface-2); border: 1px solid var(--border); font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
}
.source-status .dot { width: 6px; height: 6px; border-radius: var(--r-full); background: var(--text-muted); }
.source-status.live { color: var(--accent-bright); border-color: rgba(52,211,153,0.25); background: rgba(52,211,153,0.06); }
.source-status.live .dot { background: var(--accent-bright); animation: pulse-dot 2s var(--ease-out) infinite; }
.source-status.err  { color: var(--err);  border-color: rgba(239,68,68,0.25);  background: rgba(239,68,68,0.06); }

/* ========================================================== */
/* Tabs                                                       */
/* ========================================================== */
.tabs {
  display: flex; gap: 2px;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 4px; overflow-x: auto;
}
.tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; cursor: pointer; color: var(--text-muted);
  font-size: 13px; font-weight: 500; white-space: nowrap;
  background: transparent; border: 0; border-radius: var(--r-md);
  font-family: inherit;
  transition: all var(--t-fast) var(--ease-out);
}
.tab:hover { color: var(--text); background: var(--surface-2); }
.tab.active {
  color: var(--text); background: var(--surface-3);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset;
}
.tab .count {
  font-size: 11px; padding: 2px 8px; border-radius: var(--r-full);
  background: var(--surface-3); color: var(--text-dim); font-weight: 700;
  font-family: 'JetBrains Mono', monospace; letter-spacing: 0;
  border: 1px solid var(--border);
}
.tab.active .count { background: var(--accent-dim); color: var(--accent-bright); border-color: var(--accent); }
.tab-icon { opacity: 0.6; }

.tab-content {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--s-5); min-height: 480px;
  animation: fade-in 200ms var(--ease-out);
}

/* ========================================================== */
/* Commentary stream                                          */
/* ========================================================== */
.commentary-stream {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 70vh; overflow-y: auto; padding-right: 4px;
}
.commentary-stream::-webkit-scrollbar { width: 8px; }
.commentary-stream::-webkit-scrollbar-track { background: transparent; }
.commentary-stream::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: var(--r-full); }
.commentary-stream::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

.cmt {
  display: grid; grid-template-columns: 60px 1fr; gap: var(--s-3);
  padding: 10px 14px; background: var(--surface-2);
  border: 1px solid var(--border); border-left: 2px solid var(--border);
  border-radius: var(--r-md);
  font-size: 13.5px; line-height: 1.55;
  animation: slide-in 240ms var(--ease-out);
  transition: background var(--t-fast) var(--ease-out);
}
.cmt:hover { background: var(--surface-3); }
.cmt.new { border-left-color: var(--accent); background: rgba(16,185,129,0.04); }
.cmt.event { border-left-color: var(--warn); }
.cmt.goal { border-left-color: var(--ok); background: rgba(34,197,94,0.04); }
.cmt .min {
  color: var(--text-muted); font-size: 12px; font-weight: 500;
  font-family: 'JetBrains Mono', monospace; padding-top: 1px;
}
.cmt .text { color: var(--text-dim); }
@keyframes slide-in { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }

.tag {
  display: inline-block; padding: 1px 7px; font-size: 10px; font-weight: 700;
  border-radius: var(--r-sm); margin-right: 6px; letter-spacing: 0.04em;
  font-family: 'JetBrains Mono', monospace;
  vertical-align: 1px;
}
.tag.goal   { background: var(--ok); color: #042310; }
.tag.yellow { background: #facc15; color: #422006; }
.tag.red    { background: var(--err); color: white; }
.tag.sub    { background: var(--info); color: white; }
.tag.var    { background: var(--p-sportradar); color: white; }

/* ========================================================== */
/* Merged tab                                                 */
/* ========================================================== */
.merged-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); margin-bottom: var(--s-4);
  padding: var(--s-3) var(--s-4); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--r-md);
}
.merged-counts { display: flex; gap: var(--s-3); align-items: center; }
.merged-count { font-size: 12.5px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }
.merged-count-multi {
  font-size: 11.5px; color: var(--p-merged); font-family: 'JetBrains Mono', monospace;
  padding: 3px 10px; border-radius: var(--r-full);
  background: rgba(251,191,36,0.10); border: 1px solid rgba(251,191,36,0.25); font-weight: 600;
  cursor: help;
}
.merged-filter { display: flex; gap: var(--s-2); }
.src-toggle {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 11.5px; padding: 5px 10px; border-radius: var(--r-full);
  background: var(--surface-1); border: 1px solid var(--border);
  font-weight: 500; user-select: none;
  transition: all var(--t-fast) var(--ease-out);
}
.src-toggle input { display: none; }
.src-toggle em { color: var(--text-faint); font-style: normal; font-family: 'JetBrains Mono', monospace; }
.src-toggle:has(input:checked).goal       { background: rgba(52,211,153,0.10);  color: var(--p-goal);       border-color: rgba(52,211,153,0.3); }
.src-toggle:has(input:checked).espn       { background: rgba(251,113,133,0.10); color: var(--p-espn);       border-color: rgba(251,113,133,0.3); }
.src-toggle:has(input:checked).sportmonks { background: rgba(96,165,250,0.10);  color: var(--p-sportmonks); border-color: rgba(96,165,250,0.3); }
.src-toggle:has(input:checked).sportradar { background: rgba(167,139,250,0.10); color: var(--p-sportradar); border-color: rgba(167,139,250,0.3); }
.src-toggle:not(:has(input:checked)) { opacity: 0.5; }
.src-toggle:not(:has(input:checked)) em { color: var(--text-faint); }

.merged-row {
  display: grid; grid-template-columns: 60px 1fr; gap: var(--s-3);
  padding: 12px 14px; background: var(--surface-2);
  border: 1px solid var(--border); border-left: 2px solid var(--text-faint);
  border-radius: var(--r-md);
  animation: slide-in 240ms var(--ease-out);
}
.merged-row:hover { background: var(--surface-3); }
.merged-row.merged-multi { border-left-color: var(--p-merged); background: rgba(251,191,36,0.03); }
.merged-row.merged-standalone .min { color: var(--text-faint); }
.merged-row .min {
  color: var(--text-muted); font-size: 12px; font-weight: 500;
  font-family: 'JetBrains Mono', monospace; padding-top: 2px;
}
.merged-row .sources { display: flex; flex-direction: column; gap: 6px; }
.src-line { display: flex; align-items: baseline; gap: var(--s-3); }
.src-tag {
  flex: 0 0 auto; font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: var(--r-sm);
  text-transform: uppercase; letter-spacing: 0.06em;
  font-family: 'JetBrains Mono', monospace; line-height: 1.6;
}
.src-tag.goal       { background: rgba(52,211,153,0.15);  color: var(--p-goal); }
.src-tag.espn       { background: rgba(251,113,133,0.15); color: var(--p-espn); }
.src-tag.sportmonks { background: rgba(96,165,250,0.15);  color: var(--p-sportmonks); }
.src-tag.sportradar { background: rgba(167,139,250,0.15); color: var(--p-sportradar); }
.src-tag.audiosrt   { background: rgba(251,146,60,0.18);  color: var(--p-audiosrt); }
.src-text { color: var(--text-dim); font-size: 13px; line-height: 1.55; }

/* ========================================================== */
/* Webhook config                                             */
/* ========================================================== */
.webhook-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-5) var(--s-6);
  margin-bottom: var(--s-5);
}
.wh-block { display: flex; flex-direction: column; gap: var(--s-3); }
.wh-block h3 {
  margin: 0 0 var(--s-2);
  font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted); font-weight: 600;
  padding-bottom: var(--s-2); border-bottom: 1px solid var(--border);
}
.select-large { padding: 12px; font-weight: 500; }
.includes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2) var(--s-4); }
.includes label {
  display: flex; align-items: center; gap: var(--s-2); font-size: 12.5px;
  padding: 6px 0; cursor: pointer; user-select: none; color: var(--text-dim);
  transition: color var(--t-fast) var(--ease-out);
}
.includes label:hover { color: var(--text); }
.includes input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

.toggle {
  display: inline-flex; align-items: center; gap: var(--s-3); cursor: pointer; user-select: none;
  padding: var(--s-2) 0;
}
.toggle input { display: none; }
.toggle-slider {
  width: 36px; height: 20px; border-radius: var(--r-full);
  background: var(--surface-3); border: 1px solid var(--border);
  position: relative; transition: all var(--t-mid) var(--ease-out);
  flex-shrink: 0;
}
.toggle-slider::after {
  content: ''; position: absolute; top: 1px; left: 1px;
  width: 16px; height: 16px; border-radius: var(--r-full);
  background: var(--text-dim); transition: all var(--t-mid) var(--ease-out);
}
.toggle:hover .toggle-slider { border-color: var(--border-strong); }
.toggle input:checked + .toggle-slider {
  background: var(--accent); border-color: var(--accent);
}
.toggle input:checked + .toggle-slider::after { transform: translateX(16px); background: white; }
.toggle-label { font-size: 13px; font-weight: 500; }
.toggle-label .live-text   { color: var(--ok); font-weight: 600; }
.toggle-label .dry-text    { color: var(--text-muted); font-weight: 600; }
.toggle-label .locked-text { color: var(--text-faint); font-weight: 600; }
.toggle.locked { opacity: 0.55; cursor: not-allowed; }
.toggle.locked .toggle-slider { background: var(--surface-3); border-color: var(--border); }
.toggle.locked .toggle-slider::after { background: var(--text-faint); }

/* Compact variant used in the Append-to-comment / Sources-to-merge panels:
   smaller slider, smaller label, denser vertical rhythm so 15 fit cleanly. */
.toggle-compact {
  width: 100%;
  padding: var(--s-1) 0;
}
.toggle-compact .toggle-slider {
  width: 28px; height: 16px;
}
.toggle-compact .toggle-slider::after {
  width: 12px; height: 12px;
}
.toggle-compact input:checked + .toggle-slider::after { transform: translateX(12px); }
.toggle-compact .toggle-label { font-size: 12px; font-weight: 500; color: var(--text-dim); }
.toggle-compact input:checked ~ .toggle-label { color: var(--text); }
.toggle-list { display: flex; flex-direction: column; gap: var(--s-1); }

/* Custom-message sender above Recent deliveries — verifies the full inline
   pipeline (Score, Min, Formation, etc.) with operator-typed text. */
.wh-custom-send {
  display: flex; gap: var(--s-2); margin: var(--s-2) 0 var(--s-3) 0;
}
.wh-custom-send input[type="text"] {
  flex: 1; min-width: 0;
  padding: 8px 10px; font-size: 12.5px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); color: var(--text);
  font-family: inherit;
}
.wh-custom-send input[type="text"]:focus {
  outline: none; border-color: var(--accent);
}
.wh-custom-send button { flex-shrink: 0; }

/* ───── Prefab messages ───── */
.wh-prefab { display: flex; flex-direction: column; gap: var(--s-2); }
.wh-prefab-row { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.wh-prefab select,
.wh-prefab input[type="text"],
.wh-prefab input[type="number"] {
  width: auto; /* row layout — undo the global input/select width: 100% */
  padding: 8px 10px; font-size: 12.5px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); color: var(--text);
  font-family: inherit;
}
.wh-prefab select:focus,
.wh-prefab input:focus { outline: none; border-color: var(--accent); }
.wh-prefab .prefab-picker-wrap { display: contents; }
.wh-prefab [data-role="prefab-type"] { min-width: 170px; }
.wh-prefab [data-role="prefab-team"] { min-width: 140px; }
.wh-prefab [data-role="prefab-player"] { flex: 1; min-width: 120px; }
.wh-prefab [data-role="prefab-text"] { flex: 1; min-width: 0; }
.wh-prefab .prefab-score { display: flex; align-items: center; gap: var(--s-2); }
.wh-prefab .prefab-score label {
  font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted); font-weight: 600;
}
.wh-prefab .prefab-score input[type="number"] { width: 58px; text-align: center; }
.wh-prefab .prefab-score .dash { color: var(--text-muted); }
.wh-prefab .prefab-update-score {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text-dim); cursor: pointer; user-select: none;
}
.wh-prefab .prefab-update-score input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.wh-prefab .prefab-del { flex-shrink: 0; }
.wh-prefab button[type="submit"] { flex-shrink: 0; }

/* ───── Analytics tab ───── */
.analytics-toolbar {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding-bottom: var(--s-3); margin-bottom: var(--s-3);
  border-bottom: 1px solid var(--border);
}
.analytics-toolbar .hint { flex: 1; margin: 0; font-size: 12px; color: var(--text-muted); line-height: 1.55; }
.analytics-toolbar button { flex-shrink: 0; }

.analytics-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-3);
}
.analytics-card {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-3); border: 1px solid var(--border);
  border-radius: var(--r-md); background: var(--surface-2);
}
.analytics-head {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-2);
}
.analytics-name { font-weight: 700; font-size: 14px; color: var(--text); }
.phase-pill {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  padding: 2px 8px; border-radius: var(--r-full); letter-spacing: 0.04em;
}
.phase-live    { background: rgba(52,211,153,0.16); color: var(--ok); }
.phase-fixture { background: rgba(96,165,250,0.16); color: var(--info); }
.phase-ended   { background: rgba(148,163,184,0.16); color: var(--text-muted); }
.phase-unknown { background: var(--surface-3); color: var(--text-faint); }

.analytics-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2);
}
.analytics-stats .stat {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--s-2); background: var(--surface-3); border-radius: var(--r-sm);
}
.analytics-stats .stat-label {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-faint); font-weight: 600;
}
.analytics-stats .stat-value {
  font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; color: var(--text);
}
.analytics-note { font-size: 11px; color: var(--text-muted); font-style: italic; }
.analytics-actions { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.analytics-actions button { font-size: 11.5px; padding: 4px 10px; }

.source-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px;
}
.source-toolbar .src-test-result { display: inline-flex; flex: 1 1 180px; }

.test-poll-result {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  padding: 4px 8px; border-radius: var(--r-sm); flex: 1; min-height: 1em;
}
.test-poll-result:empty { padding: 0; background: transparent; }
.test-poll-ok   { background: rgba(52,211,153,0.12);  color: var(--ok); }
.test-poll-fail { background: rgba(251,113,133,0.14); color: var(--err); word-break: break-word; }

/* ───── HTMX in-flight state ─────
   Buttons (and any element using hx-* attrs) get the .htmx-request class
   automatically while their request is in-flight. Visual feedback so the
   user doesn't repeatedly click thinking nothing is happening. */
button.htmx-request,
[hx-post].htmx-request,
[hx-get].htmx-request,
[hx-patch].htmx-request,
[hx-delete].htmx-request {
  opacity: 0.55;
  cursor: progress;
  position: relative;
  pointer-events: none;
}
button.htmx-request::after {
  content: '';
  display: inline-block; width: 12px; height: 12px;
  margin-left: 6px; vertical-align: -2px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%;
  animation: htmx-spin 0.7s linear infinite;
}
@keyframes htmx-spin { to { transform: rotate(360deg); } }
button[disabled], button.htmx-request[disabled] { cursor: wait; }

/* Optimistic click-feedback: onclick handlers add .btn-busy synchronously so
   the user sees an immediate visual change even when the server response is
   too fast (~15ms) for .htmx-request to register perceptibly. */
button.btn-busy {
  opacity: 0.55;
  cursor: progress;
  pointer-events: none;
  position: relative;
}
button.btn-busy::after {
  content: '';
  display: inline-block; width: 11px; height: 11px;
  margin-left: 6px; vertical-align: -1px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%;
  animation: htmx-spin 0.6s linear infinite;
}

/* ───── Login page ───── */
.login-shell {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--bg);
}
.login-card {
  width: 100%; max-width: 360px;
  padding: var(--s-5); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--r-md);
}
.login-title { margin: 0 0 4px 0; font-size: 22px; }
.login-sub { margin: 0 0 var(--s-4) 0; color: var(--text-muted); font-size: 13px; }
.login-form { display: flex; flex-direction: column; gap: var(--s-3); }
.login-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-dim); }
.login-form input {
  padding: 9px 11px; font-size: 14px;
  background: var(--surface-3); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-sm);
}
.login-form input:focus { outline: none; border-color: var(--accent); }
.login-form button { margin-top: var(--s-2); }
.login-error {
  padding: 8px 12px; border-radius: var(--r-sm);
  background: rgba(251,113,133,0.14); color: var(--err);
  font-size: 12.5px;
}

/* ───── Ingest keys ───── */
.ingest-key-form { display: flex; gap: var(--s-3); align-items: flex-end; margin: var(--s-3) 0; flex-wrap: wrap; }
.ingest-key-form .field { flex: 1; min-width: 180px; }
.key-just-created {
  padding: var(--s-3); margin-bottom: var(--s-3);
  background: rgba(52,211,153,0.10); border: 1px solid rgba(52,211,153,0.3);
  border-radius: var(--r-sm);
}
.key-secret {
  display: block; font-family: 'JetBrains Mono', monospace; font-size: 12.5px;
  word-break: break-all; padding: 8px 10px; background: var(--surface-3);
  border-radius: var(--r-sm); user-select: all;
}
.ingest-keys-list { display: flex; flex-direction: column; gap: 4px; margin-top: var(--s-3); }
.ingest-key-row {
  display: grid; grid-template-columns: 1.5fr 2fr 1.2fr 1.2fr 0.8fr 0.8fr;
  gap: var(--s-2); padding: 8px 10px; font-size: 12.5px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); align-items: center;
}
.ingest-key-head {
  background: transparent; border: none; font-size: 9.5px;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint);
  font-weight: 600;
}
.ingest-key-row .mono { font-family: 'JetBrains Mono', monospace; color: var(--text-dim); font-size: 11.5px; }
.ingest-key-row button { padding: 4px 10px; font-size: 11.5px; }

.webhook-actions {
  display: flex; justify-content: flex-end; gap: var(--s-2);
  padding-top: var(--s-3); border-top: 1px solid var(--border);
}

/* webhook log */
/* ---------- simulation block ---------- */
.sim-card {
  margin-bottom: var(--s-5);
  padding: var(--s-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.sim-card h3 { margin-top: 0; }
.sim-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-bottom: var(--s-3); }
.sim-form .btn-primary { margin-top: var(--s-2); }
.sim-status { display: flex; flex-direction: column; gap: var(--s-3); }
.sim-progress-wrap {
  width: 100%; height: 6px;
  background: var(--surface-3); border-radius: var(--r-full);
  overflow: hidden;
}
.sim-progress {
  height: 100%; background: var(--accent);
  transition: width 240ms var(--ease-out);
  border-radius: var(--r-full);
}
.sim-meta {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  font-size: 12.5px; color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
}
.sim-meta b {
  font-weight: 500; color: var(--text-muted);
  margin-right: 4px;
  font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase;
}
.sim-actions { display: flex; justify-content: flex-end; }

.logs-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); }
.logs-head .btn-sm { text-transform: none; letter-spacing: 0; }
.webhook-logs { display: flex; flex-direction: column; gap: 4px; max-height: 360px; overflow-y: auto; padding-right: 4px; }
.webhook-logs::-webkit-scrollbar { width: 8px; }
.webhook-logs::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: var(--r-full); }

.wlog {
  display: grid; grid-template-columns: 70px 64px 70px 1fr 60px;
  gap: var(--s-2); align-items: start;
  padding: 7px 10px; font-size: 11.5px; line-height: 1.4;
  background: var(--surface-2); border: 1px solid var(--border); border-left: 2px solid var(--text-muted);
  border-radius: var(--r-sm); font-family: 'JetBrains Mono', monospace;
}
.wlog.ok       { border-left-color: var(--ok); }
.wlog.fail     { border-left-color: var(--err); }
.wlog.error    { border-left-color: var(--err); }
.wlog.dry-run  { border-left-color: var(--info); }
.wlog .time    { color: var(--text-muted); }
.wlog .status  { font-weight: 700; }
.wlog.ok       .status { color: var(--ok); }
.wlog.fail     .status, .wlog.error .status { color: var(--err); }
.wlog.dry-run  .status { color: var(--info); }
.wlog .source-pill {
  display: inline-flex; align-items: center; padding: 1px 6px;
  border-radius: var(--r-sm); font-size: 9.5px; font-weight: 700;
  background: var(--surface-3); color: var(--text-muted); text-transform: uppercase;
  justify-self: start;
}
.wlog .source-pill.goal       { background: rgba(52,211,153,0.12);  color: var(--p-goal); }
.wlog .source-pill.espn       { background: rgba(251,113,133,0.12); color: var(--p-espn); }
.wlog .source-pill.sportmonks { background: rgba(96,165,250,0.12);  color: var(--p-sportmonks); }
.wlog .source-pill.sportradar { background: rgba(167,139,250,0.12); color: var(--p-sportradar); }
.wlog .source-pill.audiosrt   { background: rgba(251,146,60,0.14);  color: var(--p-audiosrt); }
.wlog .source-pill.merged     { background: rgba(251,191,36,0.12);  color: var(--p-merged); }
.wlog .text    { color: var(--text-dim); white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
.wlog .latency { color: var(--text-muted); text-align: right; }

/* ========================================================== */
/* Overview                                                   */
/* ========================================================== */
.overview-section { margin-bottom: var(--s-5); }
.overview-section h3 {
  margin: 0 0 var(--s-3); color: var(--text); font-size: 14px;
  text-transform: none; letter-spacing: -0.01em; font-weight: 600;
}
.overview-section h3 .hint { font-size: 11.5px; color: var(--text-muted); font-weight: 400; }

/* ----- Rich lineups card ----- */
.lineups-card { padding: 0; gap: 0; }
.lineups-head {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface-1) 100%);
  border-bottom: 1px solid var(--border);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.ln-team { display: flex; align-items: center; gap: var(--s-3); }
.ln-team.right { justify-content: flex-end; }
.ln-team img { width: 36px; height: 36px; object-fit: contain; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.25)); }
.ln-blank { width: 36px; height: 36px; border-radius: 50%; background: var(--surface-3); }
.ln-team-text { display: flex; flex-direction: column; }
.ln-team.right .ln-team-text { text-align: right; }
.ln-name { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.ln-formation {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--accent-bright); letter-spacing: 0.06em;
  padding: 2px 8px; background: var(--accent-dim); border-radius: var(--r-full);
  display: inline-block; margin-top: 4px; font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  align-self: flex-start;
}
.ln-team.right .ln-formation { align-self: flex-end; }
.ln-vs { font-size: 11px; color: var(--text-muted); text-align: center; }

.lineup-section { padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--border); }
.lineup-section:last-of-type { border-bottom: 0; }
.lineup-section h4 {
  margin: 0 0 var(--s-3); font-size: 10.5px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600;
}
.lineup-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s-4); align-items: start;
}
.player-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1px; }
.player-list li {
  display: flex; align-items: center; gap: var(--s-2);
  padding: 7px 10px; border-radius: var(--r-sm);
  font-size: 13px; line-height: 1.4;
  transition: background var(--t-fast) var(--ease-out);
}
.player-list li:hover { background: var(--surface-2); }
.player-list.right li { flex-direction: row-reverse; text-align: right; }
.player-list.dim li { opacity: 0.65; }

.num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; padding: 0 4px;
  background: var(--surface-2); color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 11px;
  border-radius: var(--r-sm); border: 1px solid var(--border);
  flex-shrink: 0;
}
.pname { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cap-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; font-size: 9px; font-weight: 800;
  background: var(--warn); color: #1a1407;
  border-radius: 50%; margin-left: 6px; vertical-align: 1px;
  font-family: 'JetBrains Mono', monospace;
}
.evs { display: inline-flex; gap: 3px; flex-shrink: 0; }
.ev-badge {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 9.5px; font-weight: 700; padding: 2px 5px;
  border-radius: var(--r-sm); font-family: 'JetBrains Mono', monospace;
  line-height: 1; letter-spacing: 0; white-space: nowrap;
}
.ev-badge.goal     { background: var(--ok); color: #042310; }
.ev-badge.yellow   { background: #facc15; color: #422006; min-width: 14px; height: 14px; }
.ev-badge.red      { background: var(--err); color: white; min-width: 14px; height: 14px; }
.ev-badge.sub-on   { background: var(--accent-dim); color: var(--accent-bright); }
.ev-badge.sub-off  { background: rgba(239,68,68,0.12); color: var(--err); }
.ev-badge.var      { background: rgba(167,139,250,0.15); color: var(--p-sportradar); }
.rating {
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 700;
  color: var(--accent-bright); padding: 2px 6px; border-radius: var(--r-sm);
  background: var(--accent-dim); border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  flex-shrink: 0;
}

.manager-row { padding: 8px 10px; font-size: 13px; font-weight: 600; color: var(--text); }
.manager-row.right { text-align: right; }
.injury-tag {
  font-size: 9.5px; padding: 2px 6px; border-radius: var(--r-sm);
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.injury-tag.injury    { background: rgba(239,68,68,0.12); color: var(--err); }
.injury-tag.suspended { background: rgba(245,158,11,0.12); color: var(--warn); }

.lineup-legend {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  padding: var(--s-3) var(--s-5);
  font-size: 11px; color: var(--text-muted);
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.lineup-legend .lg { display: inline-flex; align-items: center; gap: 6px; }

.sc-icon { font-size: 14px; }

@media (max-width: 700px) {
  .lineup-grid { grid-template-columns: 1fr; }
  .player-list.right li { flex-direction: row; text-align: left; }
  .lineups-head { grid-template-columns: 1fr; text-align: center; }
  .ln-team.right { justify-content: center; }
}
.scorers-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.scorers-list li {
  padding: 8px 12px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-md); font-size: 13px;
}
.muted { color: var(--text-muted); font-size: 12px; }

/* ========================================================== */
/* Settings                                                   */
/* ========================================================== */
#view-settings { max-width: 720px; }

/* ========================================================== */
/* Toast                                                      */
/* ========================================================== */
#toast {
  position: fixed; bottom: var(--s-6); left: 50%; transform: translate(-50%, calc(100% + 24px));
  padding: 10px 18px; background: var(--surface-3); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); color: var(--text); font-size: 13px; font-weight: 500;
  box-shadow: var(--shadow-3); z-index: 1000;
  transition: transform var(--t-mid) var(--ease-out);
}
#toast.show { transform: translate(-50%, 0); }

/* ========================================================== */
/* Responsive                                                 */
/* ========================================================== */
@media (max-width: 900px) {
  .webhook-grid { grid-template-columns: 1fr; }
  .matches-grid { grid-template-columns: 1fr; }
  .md-scoreboard { padding: var(--s-5); }
  .md-scoreboard .vs .nums { font-size: 32px; }
}
@media (max-width: 600px) {
  main { padding: var(--s-5) var(--s-4); }
  .topbar { padding: var(--s-3) var(--s-4); gap: var(--s-3); }
  .brand .subtitle { display: none; }
  .page-head h1 { font-size: 22px; }
  .md-scoreboard { grid-template-columns: 1fr; text-align: center; }
  .md-scoreboard .team.right { justify-content: center; }
}

/* ========================================================== */
/* Reduced motion                                             */
/* ========================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}