:root {
  --bg: #ffffff;
  --fg: #111111;
  --muted: #888;
  --accent: #0066cc;
  --card: #f5f5f5;
  --border: #ddd;
  --header-bg: #ffffff;
  --header-fg: #111111;
  --badge-bg: #0066cc;
  --badge-fg: #ffffff;
  --invalid: #cc0000;
  --valid: #008800;
  --row-hover: #f0f0f0;
  --player-bg: #000000;
  --toast-bg: #333333;
  --toast-fg: #ffffff;
  --font: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1117;
    --fg: #c9d1d9;
    --muted: #8b949e;
    --accent: #58a6ff;
    --card: #161b22;
    --border: #30363d;
    --header-bg: #161b22;
    --header-fg: #c9d1d9;
    --badge-bg: #1f6feb;
    --badge-fg: #ffffff;
    --invalid: #f85149;
    --valid: #3fb950;
    --row-hover: #21262d;
    --player-bg: #000000;
    --toast-bg: #c9d1d9;
    --toast-fg: #0d1117;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--fg);
  -webkit-tap-highlight-color: transparent;
}

/* --- Header --- */
.header {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem;
  background: var(--header-bg); color: var(--header-fg); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.logo { font-weight: 800; font-size: 1.2rem; white-space: nowrap; }

/* --- Search --- */
.search-wrap { flex: 1; position: relative; min-width: 0; }
#search {
  width: 100%; padding: 0.4rem 2rem 0.4rem 0.6rem; border-radius: 0.4rem;
  border: 1px solid var(--border); background: var(--card); color: var(--fg);
}
.search-clear {
  position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; font-size: 1.3rem; cursor: pointer;
  color: var(--muted); display: none; padding: 0.2rem; line-height: 1;
}
.search-clear.visible { display: block; }

/* --- Buttons --- */
.btn {
  padding: 0.4rem 0.6rem; border-radius: 0.4rem; border: 1px solid var(--border);
  background: var(--card); color: var(--fg); cursor: pointer; font-size: 0.9rem;
  touch-action: manipulation; white-space: nowrap;
}
.btn:hover { background: var(--row-hover); }
.btn-icon { padding: 0.3rem 0.5rem; font-size: 1rem; }
.btn-small {
  background: var(--card); color: var(--fg); border: 1px solid var(--border);
  padding: 0.2rem 0.5rem; border-radius: 0.3rem; cursor: pointer; font-size: 0.8rem;
}
.btn-tiny {
  background: transparent; color: var(--muted); border: 1px solid var(--border);
  padding: 0.1rem 0.35rem; border-radius: 0.25rem; cursor: pointer;
  font-size: 0.68rem; line-height: 1.2; white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.btn-tiny:hover { color: var(--fg); border-color: var(--fg); }

.stats-badge {
  padding: 0.3rem 0.5rem; border-radius: 0.4rem; background: var(--badge-bg);
  color: var(--badge-fg); font-size: 0.85rem; white-space: nowrap;
}

/* --- Filter strip --- */
.filter-strip {
  display: flex; align-items: center; gap: 1rem; padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--border); background: var(--card); flex-wrap: wrap;
}
.filter-strip label {
  display: flex; align-items: center; gap: 0.3rem; font-size: 0.9rem; white-space: nowrap;
}
#source-filter {
  padding: 0.3rem 0.4rem; border-radius: 0.4rem; border: 1px solid var(--border);
  background: var(--bg); color: var(--fg); font-size: 0.9rem;
}
.filter-toggle-btn { display: none; }
.result-count { margin-left: auto; font-size: 0.85rem; color: var(--muted); white-space: nowrap; }

/* --- Main / Channel list --- */
.main { padding: 0.5rem 1rem; padding-bottom: 2rem; }
body.player-visible .main { padding-bottom: 280px; }
body.player-minimised .main { padding-bottom: 60px; }

.channel-list { display: flex; flex-direction: column; }
.channel-item {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0.5rem;
  border-bottom: 1px solid var(--border); cursor: pointer; min-height: 48px;
  touch-action: manipulation; transition: background 0.1s;
}
.channel-item:hover { background: var(--row-hover); }
.channel-item.leeds-row { border-left: 4px solid var(--accent); padding-left: 0.5rem; }
.channel-item.now-playing { background: var(--badge-bg); color: var(--badge-fg); font-weight: 600; }
.channel-item.now-playing .channel-host { color: var(--badge-fg); opacity: 0.7; }
.channel-item.now-playing .channel-valid { color: var(--badge-fg); }
.channel-item.now-playing .channel-epg { color: var(--badge-fg); opacity: 0.6; }
.channel-name-wrap { flex: 1; min-width: 0; overflow: hidden; }
.channel-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel-epg {
  font-size: 0.75em; color: var(--muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.channel-host { font-size: 0.8rem; color: var(--muted); white-space: nowrap; }
.channel-valid { font-size: 0.9rem; width: 20px; text-align: center; flex-shrink: 0; }
.channel-valid.valid { color: var(--valid); }
.channel-valid.invalid { color: var(--invalid); }
.channel-empty { padding: 2rem 1rem; text-align: center; color: var(--muted); font-size: 0.9rem; }

/* --- Host pills (grouped channel view) --- */
.host-pills {
  display: flex; flex-wrap: wrap; gap: 0.25rem; justify-content: flex-end;
  flex-shrink: 0; max-width: 55%; overflow: hidden;
}
.host-pill {
  display: inline-flex; align-items: center; gap: 0.15rem;
  padding: 0.15rem 0.4rem; border-radius: 0.3rem; font-size: 0.72rem;
  border: 1px solid var(--border); background: var(--card); cursor: pointer;
  white-space: nowrap; touch-action: manipulation; transition: background 0.1s, border-color 0.1s;
  line-height: 1.4;
}
.host-pill:hover { background: var(--row-hover); border-color: var(--accent); }
.host-pill.valid { border-color: rgba(0,136,0,0.3); color: var(--valid); }
.host-pill.invalid { opacity: 0.4; cursor: default; }
.host-pill.invalid:hover { background: var(--card); border-color: var(--border); }
.host-pill.active { background: var(--badge-bg); color: var(--badge-fg); border-color: var(--badge-bg); }
.channel-item.now-playing .host-pill.active { background: var(--badge-fg); color: var(--badge-bg); }

/* --- Pin star (pinned host preference) --- */
.pin-star { cursor: pointer; margin-right: 3px; font-size: 0.85em; user-select: none; }
.pin-star:hover { opacity: 0.7; }
.pin-star.pinned { color: #f0c040; }  /* gold for pinned */
.pin-star:not(.pinned) { color: #555; opacity: 0.4; }

/* --- Player pane --- */
.player-pane {
  position: fixed; bottom: 0; left: 0; right: 0; background: var(--player-bg); color: #fff;
  z-index: 20; transform: translateY(100%); transition: transform 0.3s ease;
  display: flex; flex-direction: column; box-shadow: 0 -4px 12px rgba(0,0,0,0.3);
}
.player-pane.visible { transform: translateY(0); }
.player-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.4rem 0.5rem; gap: 0.5rem; cursor: pointer;
}
.player-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
#player-channel { font-size: 0.95rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#player-provider { font-size: 0.75rem; color: #999; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-pane.minimised .player-video-wrap,
.player-pane.minimised .player-controls { display: none; }
.player-video-wrap { position: relative; }
.player-pane video { width: 100%; max-height: 220px; background: #000; display: block; }
.player-loading {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: none;
  flex-direction: column; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.75); color: #fff; gap: 0.6rem;
}
.player-loading.visible { display: flex; }
.spinner {
  width: 36px; height: 36px; border: 3px solid rgba(255,255,255,0.2);
  border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
#player-loading-text { font-size: 0.9rem; }
.player-controls { display: flex; gap: 0.5rem; padding: 0.4rem 0.5rem; }
.player-controls .btn { background: #222; color: #fff; border-color: #333; font-size: 0.85rem; }
.player-controls .btn:hover { background: #333; }

/* --- Fixtures panel (Leeds United PL 2026/27) --- */
.fixtures-panel {
  position: fixed; bottom: 1rem; right: 1rem; width: 380px; max-height: 60vh; overflow: auto;
  background: var(--card); color: var(--fg); border: 1px solid var(--border); border-radius: 0.5rem; z-index: 15;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
body.player-visible .fixtures-panel { bottom: 280px; }
body.player-minimised .fixtures-panel { bottom: 60px; }
.fixtures-panel.collapsed .fixtures-list { display: none; }
.fixtures-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
}
.fixtures-list { padding: 0.4rem 0.5rem; }
.fixture-item {
  padding: 0.5rem 0.6rem; margin-bottom: 0.4rem;
  border: 1px solid var(--border); border-radius: 0.4rem;
  font-size: 0.85rem; line-height: 1.35;
  display: flex; flex-direction: column; gap: 0.2rem;
}
.fixture-item.leeds { background: rgba(0,102,204,0.08); border-color: rgba(0,102,204,0.4); }
.fixture-item.past { opacity: 0.55; }
.fixture-item.next-up {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent), 0 2px 8px rgba(0,0,0,0.18);
  font-weight: 500;
}
.fx-row1 { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; font-size: 0.75rem; }
.fx-gw {
  display: inline-block; padding: 0.1rem 0.4rem; border-radius: 0.3rem;
  background: var(--badge-bg); color: var(--badge-fg);
  font-weight: 600; font-size: 0.7rem; letter-spacing: 0.02em;
}
.fx-ha {
  display: inline-block; padding: 0.1rem 0.4rem; border-radius: 0.3rem;
  font-weight: 700; font-size: 0.7rem; letter-spacing: 0.04em;
  background: var(--border); color: var(--fg);
}
.fx-ha-h { background: rgba(0,153,68,0.18); color: #006633; }
.fx-ha-a { background: rgba(204,0,0,0.18); color: #990000; }
.fx-comp { font-size: 0.7rem; opacity: 0.7; }
.fx-next-badge {
  margin-left: auto; padding: 0.1rem 0.45rem; border-radius: 0.3rem;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 0.7rem;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.fx-row2 { font-size: 0.92rem; }
.fx-row3 { font-size: 0.78rem; opacity: 0.85; display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap; }
.fx-row3 .fx-sep { opacity: 0.5; }
.fx-row4 { margin-top: 0.25rem; }
.fx-row4 .remind-btn { padding: 0.25rem 0.55rem; font-size: 0.75rem; }

/* --- Toast --- */
.toast {
  position: fixed; top: 4rem; left: 50%; transform: translateX(-50%);
  background: var(--toast-bg); color: var(--toast-fg); padding: 0.5rem 1rem;
  border-radius: 0.4rem; font-size: 0.9rem; opacity: 0; transition: opacity 0.3s;
  pointer-events: none; z-index: 2000; max-width: 90vw; text-align: center;
}
.toast.show { opacity: 1; }

/* --- Footer --- */
.footer { text-align: center; padding: 0.5rem; font-size: 0.8rem; border-top: 1px solid var(--border); background: var(--card); }

/* --- Debug panel --- */
.debug-panel {
  position: fixed; top: 0; right: -480px; width: 480px; height: 100vh;
  background: #1e1e1e; color: #d4d4d4; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px; z-index: 1000; display: flex; flex-direction: column;
  box-shadow: -4px 0 12px rgba(0,0,0,0.4); transition: right 0.2s;
}
.debug-panel.open { right: 0; }
.debug-header {
  display: flex; gap: 0.5rem; align-items: center; padding: 0.5rem 0.8rem;
  background: #2d2d2d; border-bottom: 1px solid #3e3e3e;
}
.debug-header strong { color: #fff; }
.debug-info { color: #999; font-size: 11px; margin-left: auto; }
.debug-log { flex: 1; overflow-y: auto; padding: 0.4rem 0.6rem; line-height: 1.4; -webkit-overflow-scrolling: touch; }
.dlog { padding: 2px 0; word-break: break-all; border-bottom: 1px solid #2a2a2a; }
.dlog-ts { color: #666; margin-right: 0.4rem; }
.dlog-level { font-weight: bold; margin-right: 0.4rem; padding: 0 4px; border-radius: 2px; }
.dlog-info .dlog-level { color: #4fc1ff; }
.dlog-debug .dlog-level { color: #888; }
.dlog-warn .dlog-level { color: #ffcc00; }
.dlog-error .dlog-level { color: #ff6b6b; background: #3a1f1f; }

/* --- Tab strip --- */
.tab-strip { display: flex; gap: 0; border-bottom: 1px solid var(--border); background: var(--card); }
.tab { padding: 0.6rem 1.2rem; cursor: pointer; background: none; border: none; color: var(--muted); font-size: 0.95rem; font-weight: 500; border-bottom: 2px solid transparent; transition: all 0.15s; }
.tab:hover { color: var(--fg); background: var(--row-hover); }
.tab.active { color: var(--fg); border-bottom-color: var(--accent); font-weight: 600; }

/* --- Dashboard summary --- */
.dashboard-summary { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.75rem 1rem; background: var(--card); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 5; }
.summary-tile { flex: 1; min-width: 120px; padding: 0.5rem 0.75rem; background: var(--bg); border: 1px solid var(--border); border-radius: 0.4rem; }
.summary-tile-num { font-size: 1.4rem; font-weight: 700; color: var(--fg); }
.summary-tile-label { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.15rem; }
.summary-tile.warning .summary-tile-num { color: #d97706; }
.summary-tile.danger .summary-tile-num { color: var(--invalid); }

/* --- Creds filter bar (re-uses filter-strip conventions) --- */
.creds-filter-strip { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 1rem; border-bottom: 1px solid var(--border); background: var(--card); flex-wrap: wrap; }
.creds-filter-strip input[type="text"] { padding: 0.35rem 0.5rem; border-radius: 0.4rem; border: 1px solid var(--border); background: var(--bg); color: var(--fg); font-size: 0.9rem; min-width: 200px; }
.creds-filter-strip select { padding: 0.3rem 0.4rem; border-radius: 0.4rem; border: 1px solid var(--border); background: var(--bg); color: var(--fg); font-size: 0.9rem; }
.creds-filter-strip .checkbox-wrap { display: flex; align-items: center; gap: 0.3rem; font-size: 0.9rem; white-space: nowrap; }

/* --- Sortable column headers --- */
.cred-headers { display: flex; gap: 0; padding: 0.4rem 1rem; background: var(--card); border-bottom: 1px solid var(--border); font-size: 0.78rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.cred-header { cursor: pointer; padding: 0.2rem 0.5rem; user-select: none; flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; }
.cred-header.cred-num { text-align: right; }
.cred-header:hover { color: var(--fg); }
.cred-header.active { color: var(--accent); }
.cred-header.active::after { content: attr(data-arrow); margin-left: 0.3rem; }

/* --- Cred cards (columns mirror .cred-headers above for alignment) --- */
.creds-list { display: flex; flex-direction: column; padding: 0 1rem; }
.cred-item { display: flex; align-items: center; gap: 0; padding: 0.5rem 0.5rem; border-bottom: 1px solid var(--border); transition: background 0.1s; min-height: 44px; }
.cred-item:hover { background: var(--row-hover); }
.cred-item.inactive { opacity: 0.5; }
.cred-host-col { flex: 1 1 0; min-width: 0; padding: 0 0.5rem; display: flex; flex-direction: column; gap: 0.1rem; overflow: hidden; }
.cred-host { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.85rem; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cred-user { font-size: 0.75rem; color: var(--muted); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cred-user:hover { color: var(--accent); }
.cred-pill { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 0.3rem; font-size: 0.72rem; border: 1px solid var(--border); white-space: nowrap; }
.cred-pill-cell { flex: 1 1 0; min-width: 0; padding: 0 0.5rem; overflow: hidden; text-overflow: ellipsis; }
.cred-status { }
.cred-expires { flex: 1 1 0; min-width: 0; padding: 0 0.5rem; font-size: 0.78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cred-expires.warning { color: #d97706; font-weight: 600; }
.cred-expires.danger { color: var(--invalid); font-weight: 700; }
.cred-channels { flex: 1 1 0; min-width: 0; padding: 0 0.5rem; font-size: 0.85rem; }
.cred-num-cell { text-align: right; }
.cred-last-used, .cred-last-check { flex: 1 1 0; min-width: 0; padding: 0 0.5rem; font-size: 0.78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cred-times-used { display: flex; align-items: center; justify-content: flex-end; gap: 0.3rem; }
.cred-primary { color: #d97706; font-size: 0.95rem; line-height: 1; }
.cred-times-used { flex: 0 0 50px; font-size: 0.78rem; color: var(--muted); text-align: right; }

/* --- Xtream status pills --- */
.xtream-pill.active { background: rgba(63,185,80,0.15); color: var(--valid); border-color: rgba(63,185,80,0.3); }
.xtream-pill.expired { background: rgba(248,81,73,0.15); color: var(--invalid); border-color: rgba(248,81,73,0.3); }
.xtream-pill.disabled { background: rgba(139,148,158,0.15); color: var(--muted); border-color: var(--border); }
.xtream-pill.banned { background: rgba(139,0,0,0.2); color: #dc2626; border-color: rgba(139,0,0,0.4); font-weight: 600; }
.xtream-pill.unknown { background: rgba(217,119,6,0.15); color: #d97706; border-color: rgba(217,119,6,0.3); }
.xtream-pill.untested { background: rgba(110,118,129,0.12); color: var(--muted); border-color: var(--border); font-style: italic; }

/* --- Health pill (reuses host-pill conventions) --- */
.cred-health { }
.cred-health .host-pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* --- Pagination --- */
.creds-pagination { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem; }
.creds-pagination button:disabled { opacity: 0.4; cursor: default; }
.cred-page-info { font-size: 0.85rem; color: var(--muted); }

/* --- Probing indicator --- */
.probing-indicator { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 0.3rem; background: rgba(0,102,204,0.15); color: var(--accent); font-size: 0.7rem; margin-left: 0.5rem; animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* --- Dashboard actions row (deactivate button, probing pill) --- */
.dashboard-actions { display: flex; gap: 0.5rem; align-items: center; padding: 0.5rem 1rem; background: var(--card); border-bottom: 1px solid var(--border); flex-wrap: wrap; }

/* --- Responsive (mobile) --- */
@media (max-width: 640px) {
  .header { flex-wrap: wrap; padding: 0.5rem; }
  .logo { font-size: 1rem; }
  .search-wrap { order: 3; flex-basis: 100%; margin-top: 0.5rem; }
  #search { font-size: 16px; padding: 0.5rem 2rem 0.5rem 0.6rem; }
  #source-filter { font-size: 16px; }
  .stats-badge { display: none; }
  #theme-toggle, #debug-toggle { font-size: 0.8rem; padding: 0.3rem 0.4rem; }

  .filter-toggle-btn { display: block; }
  .filter-content { display: none; }
  .filter-content.expanded { display: flex; flex-wrap: wrap; gap: 0.5rem; width: 100%; margin-top: 0.5rem; }
  .result-count { font-size: 0.8rem; }

  .channel-item { padding: 0.6rem 0.5rem; flex-wrap: wrap; }
  .channel-host { display: none; }
  .channel-name { font-size: 0.95rem; }
  .host-pills { max-width: 100%; margin-top: 0.2rem; justify-content: flex-start; }
  .host-pill { font-size: 0.68rem; padding: 0.1rem 0.3rem; }

  .player-pane video { max-height: 240px; }
  #player-channel { font-size: 0.9rem; }
  #player-provider { font-size: 0.7rem; }
  .player-controls .btn { font-size: 0.8rem; padding: 0.3rem 0.5rem; }

  .fixtures-panel {
    position: static; width: auto; max-height: none; margin: 0.5rem 1rem;
  }
  body.player-visible .fixtures-panel,
  body.player-minimised .fixtures-panel { bottom: auto; }

  .debug-panel { width: 100%; right: -100%; }
  .debug-panel.open { right: 0; }

  .main { padding: 0.5rem; }
  body.player-visible .main { padding-bottom: 260px; }

  /* Mobile: stack cred cards vertically with per-field labels */
  .cred-headers { display: none; }
  .cred-item { flex-direction: column; align-items: stretch; padding: 0.6rem 0.5rem; gap: 0.25rem; }
  .cred-host-col, .cred-pill-cell, .cred-status, .cred-expires, .cred-health,
  .cred-channels, .cred-last-used, .cred-last-check, .cred-times-used {
    flex: none; width: 100%; padding: 0; text-align: left; justify-content: flex-start;
  }
  .cred-num-cell { text-align: left; }
  .cred-host-col { order: 1; }
  .cred-pill-cell, .cred-status, .cred-expires, .cred-health { order: 2; }
  .cred-last-used, .cred-last-check { order: 3; font-size: 0.75rem; }
  .cred-channels, .cred-times-used { order: 4; }
  /* On mobile, prefix each non-host field with a small label */
  .cred-item > span[data-label]::before,
  .cred-pill-cell::before { content: attr(data-label) ": "; color: var(--muted); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-right: 0.3rem; }
  .creds-filter-strip input[type="text"] { min-width: 0; flex: 1; width: 100%; }
  .summary-tile { min-width: 100px; }
}

/* === Accessibility: visible focus indicators (WCAG 2.4.7) + skip link + reduced motion === */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
button:focus-visible,
.host-pill:focus-visible,
.tab:focus-visible,
input:focus-visible,
select:focus-visible {
  outline-offset: 1px;
}
/* Skip link: hidden until focused */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--badge-bg);
  color: var(--badge-fg);
  padding: 0.5rem 1rem;
  z-index: 9999;
  font-weight: 600;
  border-radius: 0 0 0.4rem 0;
  text-decoration: none;
}
.skip-link:focus { left: 0; }
/* Reduced motion: disable spin/pulse/transition for vestibular sensitivity */
@media (prefers-reduced-motion: reduce) {
  .spinner, .probing-indicator { animation: none !important; }
  .player-pane { transition: none !important; }
}

/* === Stream quality badges (Option A) === */
.player-badge {
  display: inline-block; padding: 0.1rem 0.35rem; margin-left: 0.3rem;
  border-radius: 0.2rem; font-size: 0.65rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  vertical-align: middle; line-height: 1.3;
}
.player-badge.res   { background: rgba(108, 182, 255, 0.2); color: #6cb6ff; }
.player-badge.codec { background: rgba(255, 255, 255, 0.12); color: #d0d0d0; }
.player-badge.audio { background: rgba(255, 255, 255, 0.08); color: #b0b0b0; }
.player-badge.xcode.on  { background: rgba(225, 29, 72, 0.25); color: #ff6b8a; }
.player-badge.xcode.off { background: rgba(106, 210, 106, 0.18); color: #6ad26a; }
.player-provider { font-variant-emoji: text; }

/* === Pill quality badges — prominent, colour-coded by tier === */
.pill-quality-badge {
  display: inline-block; padding: 0.1rem 0.4rem;
  border-radius: 0.2rem; font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.02em; text-transform: uppercase;
  line-height: 1.2;
}
.pill-quality-badge.tier-4k      { background: #16a34a; color: #fff; }
.pill-quality-badge.tier-fhd     { background: #2563eb; color: #fff; }
.pill-quality-badge.tier-hd      { background: #6b7280; color: #fff; }
.pill-quality-badge.tier-sd      { background: #9ca3af; color: #fff; }
.pill-quality-badge.tier-unknown { background: transparent; border: 1px solid #ccc; color: #999; }
.pill-host {
  font-size: 0.68rem; color: #666;
  max-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pill-codec {
  font-size: 0.6rem; color: #888;
  font-weight: 500; letter-spacing: 0.02em;
}
/* Transcode indicator: red left-border on the whole pill */
.host-pill.xcode { border-left: 2px solid #E11D48; padding-left: 0.4rem; }
.host-pill.xcode.invalid { border-left-color: #555; }
.host-pill.active { border-left-color: var(--badge-bg); }
.channel-item.now-playing .host-pill.xcode.active { border-left-color: var(--badge-fg); }