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

/* ── Light theme (default) ── */
:root {
  --sidebar-bg:   #1e2139;
  --sidebar-text: rgba(255,255,255,0.55);
  --sidebar-active-bg: rgba(255,255,255,0.1);
  --sidebar-width: 220px;

  --bg:       #f4f6fb;
  --surface:  #ffffff;
  --surface2: #f0f2f8;
  --border:   #e8ecf4;
  --text:     #2d3748;
  --text-dim: #59637a;

  --accent:  #e05c5c;
  --blue:    #5c7cfa;
  --green:   #38c172;
  --red:     #e05c5c;
  --yellow:  #f6ad55;

  /* "ink" variants: the same hues, darkened just enough that small colored
     text (badges, pills, trend arrows) reaches WCAG AA 4.5:1 on both a plain
     surface and their own light tinted background. Only used for TEXT — dots,
     borders, toggle fills, tab underlines and button backgrounds keep the
     brighter base hue above untouched, so nothing about the overall palette
     changes, only the readability of small labels. */
  --green-ink:  #0a6e34;
  --blue-ink:   #3450c9;
  --red-ink:    #b32626;
  --yellow-ink: #8a5810;
  --purple-ink: #7d3c9e;
  --orange-ink: #8f4c00;

  --radius: 14px;
  --shadow: 0 2px 16px rgba(0,0,0,0.07);
  --topbar-bg: #ffffff;
  --topbar-border: #e8ecf4;

  --table-hover: #f7f9ff;
  --toggle-off: #dde1ec;
  --code-bg: #1e2139;
  --code-text: #abb2bf;
}

/* ── Dark theme ── */
[data-theme="dark"] {
  --sidebar-bg:   #0d0e1a;
  --sidebar-text: rgba(255,255,255,0.45);
  --sidebar-active-bg: rgba(255,255,255,0.08);

  --bg:       #12132a;
  --surface:  #1a1c2e;
  --surface2: #1f2235;
  --border:   #252840;
  --text:     #e2e4f0;
  --text-dim: #8f96b5;

  --accent:  #e05c5c;
  --blue:    #5c7cfa;
  --green:   #38c172;
  --red:     #e05c5c;
  --yellow:  #f6ad55;

  /* Dark backgrounds already give these hues comfortable contrast, so the
     "ink" variants equal the base color here — only light mode needed darkening. */
  --green-ink:  #38c172;
  --blue-ink:   #5c7cfa;
  --red-ink:    #e05c5c;
  --yellow-ink: #f6ad55;
  --purple-ink: #c090d6;
  --orange-ink: #ff9800;

  --shadow: 0 2px 20px rgba(0,0,0,0.35);
  --topbar-bg: #1a1c2e;
  --topbar-border: #252840;

  --table-hover: #1f2235;
  --toggle-off: #2d3050;
  --code-bg: #0d0e1a;
  --code-text: #8b93b8;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  transition: background 0.25s, color 0.25s;
}

/* ── Sidebar ── */
.sidebar {
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  height: 100vh;
  height: 100dvh;          /* the visible height on phones, where 100vh includes the browser bar */
  position: fixed;
  top: 0; left: 0;
  display: flex;
  flex-direction: column;
  padding: 0 0 24px;
  z-index: 10;
  transition: background 0.25s;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 22px 20px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 10px;
}
.logo-icon {
  width: 34px; height: 34px;
  background: var(--accent);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sidebar-logo span {
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
}

.sidebar-section {
  padding: 10px 20px 4px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.25);
  margin-top: 8px;
}

/* The site list is the only part of the sidebar that grows with the number of
   sites, so it scrolls on its own: the logo, the nav links and the version label
   stay where they are. Without this, anything past the bottom of the window
   (with 16 sites, the last half dozen) could not be reached at all. */
.sidebar > * { flex-shrink: 0; }
#sidebar-sites {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.28) transparent;
}
#sidebar-sites::-webkit-scrollbar { width: 6px; }
#sidebar-sites::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.28); border-radius: 3px; }
#sidebar-sites::-webkit-scrollbar-track { background: transparent; }

.sidebar-version {
  margin-top: auto;
  padding: 14px 20px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.04em;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  color: var(--sidebar-text);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  border-left: 3px solid transparent;
}
.nav-link:hover { color: #fff; background: rgba(255,255,255,0.05); }
.nav-link.active {
  color: #fff;
  background: var(--sidebar-active-bg);
  border-left-color: var(--accent);
  padding-left: 17px;
}
.nav-icon { font-size: 1rem; width: 20px; text-align: center; }

/* ── Main ── */
.main {
  margin-left: var(--sidebar-width);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ── Topbar ── */
.topbar {
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--topbar-border);
  padding: 0 32px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: sticky;
  top: 0; z-index: 5;
  transition: background 0.25s, border-color 0.25s;
}
.topbar h1 { flex: 1; font-size: 1.2rem; font-weight: 700; }
.topbar-actions { display: flex; gap: 10px; align-items: center; }

/* Dark mode toggle button */
.theme-toggle {
  width: 36px; height: 36px;
  border: none;
  border-radius: 8px;
  background: var(--surface2);
  color: var(--text-dim);
  font-size: 1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.theme-toggle:hover { background: var(--border); color: var(--text); }

/* ── Page content ── */
.page-content { padding: 28px 32px; flex: 1; }

/* ── Stat cards ── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 18px;
  margin-bottom: 24px;
}
.stat-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--border);
  transition: background 0.25s, border-color 0.25s;
}
.stat-label { font-size: 0.78rem; color: var(--text-dim); font-weight: 500; }
.stat-val   { font-size: 1.85rem; font-weight: 700; line-height: 1.1; }
.stat-trend { font-size: 0.73rem; font-weight: 600; display: flex; align-items: center; gap: 3px; }
.trend-up   { color: var(--green-ink); }
.trend-down { color: var(--red-ink); }
.trend-flat { color: var(--text-dim); }

/* ── Card ── */
.card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: background 0.25s, border-color 0.25s;
}
.card-header {
  display: flex;
  align-items: center;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}
.card-header h2 { flex: 1; font-size: 1rem; font-weight: 700; }

/* ── Buttons ── */
.btn {
  padding: 9px 18px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  transition: filter 0.15s, opacity 0.15s;
  background: var(--surface2);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
}
.btn:hover   { filter: brightness(1.08); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; filter: none; }
.btn-primary { background: var(--accent); color: #fff; border-color: transparent; }
.btn-blue    { background: var(--blue);   color: #fff; border-color: transparent; }
.btn-green   { background: var(--green);  color: #fff; border-color: transparent; }
.btn-danger  { background: var(--red);    color: #fff; border-color: transparent; }
.btn-warning { background: var(--yellow); color: #fff; border-color: transparent; }
.btn-sm { padding: 6px 12px; font-size: 0.78rem; border-radius: 6px; }

/* ── Badges ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.badge-running    { background: rgba(56,193,114,0.15);  color: var(--green-ink); }
.badge-ok         { background: rgba(92,124,250,0.15);  color: var(--blue-ink); }
.badge-error      { background: rgba(224,92,92,0.15);   color: var(--red-ink); }
.badge-proxy-lost { background: rgba(255,152,0,0.18);   color: var(--orange-ink); }
.badge-disabled   { background: rgba(90,96,122,0.2);    color: var(--text-dim); }
.badge-idle       { background: rgba(90,96,122,0.12);   color: var(--text-dim); }

.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
.dot.pulse { animation: pulse 1.2s infinite; }

/* ── Table ── */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  text-align: left;
  padding: 11px 20px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-dim);
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
}
.data-table td {
  padding: 13px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
  vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--table-hover); }
.data-table a { color: var(--blue); text-decoration: none; font-weight: 500; }
.data-table a:hover { text-decoration: underline; }

.site-name-cell { display: flex; flex-direction: column; gap: 3px; }
.site-name-cell .name { font-weight: 600; color: var(--text); }
.site-name-cell .url  { font-size: 0.74rem; color: var(--text-dim); }

/* ── Toggle switch ── */
.toggle { position: relative; display: inline-block; width: 40px; height: 22px; cursor: pointer; }
.toggle input { display: none; }
.toggle-slider {
  position: absolute; inset: 0;
  background: var(--toggle-off);
  border-radius: 22px;
  transition: background 0.2s;
}
.toggle input:checked + .toggle-slider { background: var(--green); }
.toggle-slider::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  top: 3px; left: 3px;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.toggle input:checked + .toggle-slider::after { transform: translateX(18px); }

.actions-group { display: flex; gap: 6px; }

/* ── Tabs ── */
.tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  padding: 0 22px;
}
.tab {
  background: none; border: none;
  border-bottom: 3px solid transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.875rem; font-weight: 600;
  padding: 14px 16px;
  transition: color 0.15s, border-color 0.15s;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.tab-content { padding: 22px; }
.tab-pane    { display: none; }
.tab-pane.active { display: block; }

/* ── Code / log block ── */
.code-block {
  background: var(--code-bg);
  color: var(--code-text);
  border-radius: var(--radius);
  padding: 18px;
  font-size: 0.8rem;
  font-family: "SF Mono", Menlo, monospace;
  overflow: auto;
  white-space: pre;
  line-height: 1.65;
  border: 1px solid var(--border);
}

/* ── Pagination ── */
.pagination { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; }
.page-info  { font-size: 0.82rem; color: var(--text-dim); padding: 0 6px; }

/* ── Type filter pills ── */
.type-pills { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.type-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  background: none;
  color: var(--text-dim);
  font-size: 0.82rem; font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.type-pill:hover { border-color: var(--accent); color: var(--accent); }
.type-pill.active                   { background: var(--accent); border-color: var(--accent); color: #fff; }
.type-pill[data-type="series"].active { background: var(--blue);    border-color: var(--blue); }
.type-pill[data-type="movie"].active  { background: var(--green);   border-color: var(--green); }
.type-pill[data-type="unknown"].active{ background: var(--text-dim);border-color: var(--text-dim); }
.type-pill[data-type="dubbed_movie"].active  { background: var(--red-ink, #e05c5c); border-color: var(--red-ink, #e05c5c); }
.type-pill[data-type="dubbed_series"].active { background: var(--red-ink, #e05c5c); border-color: var(--red-ink, #e05c5c); }
.pill-count {
  background: rgba(255,255,255,0.2);
  border-radius: 10px; font-size: 0.7rem;
  padding: 1px 6px; min-width: 20px; text-align: center;
}
.type-pill:not(.active) .pill-count { background: var(--border); color: var(--text-dim); }

.type-badge {
  display: inline-block; padding: 2px 7px; border-radius: 4px;
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}
.type-series  { background: rgba(92,124,250,0.15);  color: var(--blue-ink); }
.type-movie   { background: rgba(56,193,114,0.15);  color: var(--green-ink); }
.type-anime   { background: rgba(155,89,182,0.15);  color: var(--purple-ink); }
.type-dubbed  { background: rgba(224,92,92,0.15);   color: var(--red-ink); }
.type-dubbed_movie  { background: rgba(224,92,92,0.15);   color: var(--red-ink); }
.type-dubbed_series { background: rgba(224,92,92,0.15);   color: var(--red-ink); }
.type-unknown { background: rgba(90,96,122,0.12);   color: var(--text-dim); }

/* ── Modal ── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; padding: 20px;
}
.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  width: 100%; max-width: 640px;
  max-height: 92vh; overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0,0,0,0.3);
  transition: background 0.25s;
}
.modal-header { display: flex; align-items: center; margin-bottom: 22px; }
.modal-header h2 { flex: 1; font-size: 1.1rem; font-weight: 700; }
.modal-close {
  background: none; border: none; cursor: pointer;
  color: var(--text-dim); font-size: 1.2rem;
  padding: 4px 6px; border-radius: 4px;
}
.modal-close:hover { color: var(--text); background: var(--border); }

.form-section {
  font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--text-dim);
  margin: 18px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
label.field {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 0.78rem; font-weight: 600; color: var(--text-dim);
}
label.field.full { grid-column: 1 / -1; }
.field input, .field textarea, .field select {
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.875rem;
  padding: 9px 12px;
  width: 100%;
  font-family: inherit;
  transition: border-color 0.15s, background 0.25s;
}
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--blue);
}
.field textarea { resize: vertical; min-height: 72px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

/* ── Extra pills ── */
.extra-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.pill {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px; font-size: 0.72rem;
  padding: 3px 8px; color: var(--text-dim);
}
.pill b { color: var(--text); }

/* ── Download links ── */
.dl-links { display: flex; flex-direction: column; gap: 3px; }
.dl-links a { font-size: 0.78rem; color: var(--blue); }

/* ── Empty state ── */
.empty { text-align: center; padding: 48px 24px; color: var(--text-dim); }
.empty-icon { font-size: 2.5rem; margin-bottom: 12px; }
.empty p { font-size: 0.9rem; }

/* ── Error text ── */
.err-text { color: var(--red-ink); font-size: 0.78rem; max-width: 260px; }

/* ── Back link ── */
.back-link {
  color: var(--text-dim); text-decoration: none; font-size: 0.85rem;
  display: inline-flex; align-items: center; gap: 5px; font-weight: 500;
}
.back-link:hover { color: var(--text); }

/* ── Nav SVG icons ── */
.nav-svg {
  width: 17px; height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* ── Stat card icon row ── */
.stat-icon-row { margin-bottom: 2px; }
.stat-icon {
  width: 20px; height: 20px;
  fill: none;
  stroke: var(--text-dim);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.7;
}

/* ── Two-column layout for report + errors ── */
.two-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 960px) {
  .two-col-grid { grid-template-columns: 1fr; }
}

/* ── Daily report summary row ── */
.daily-summary {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
}
.daily-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 8px;
  gap: 2px;
  border-right: 1px solid var(--border);
}
.daily-stat:last-child { border-right: none; }
.daily-stat > span:first-child { font-size: 1.5rem; font-weight: 700; }
.daily-stat > span:last-child  { font-size: 0.7rem; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }

/* ── Network graph card ── */
.net-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.78rem;
  color: var(--text-dim);
  font-weight: 600;
  margin-left: 16px;
}
.net-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.net-rate-badge {
  margin-left: auto;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-dim);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 10px;
  min-width: 68px;
  text-align: center;
}
.net-totals {
  display: flex;
  gap: 0;
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.net-total-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 8px;
  border-right: 1px solid var(--border);
}
.net-total-item:last-child { border-right: none; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .sidebar { width: 60px; }
  .sidebar .nav-link span, .sidebar-logo span, .sidebar-section { display: none; }
  .main { margin-left: 60px; }
  .page-content { padding: 16px; }
  .topbar { padding: 0 16px; }
  .form-row { grid-template-columns: 1fr; }
}

/* ── Run dropdown ── */
.run-dropdown {
  position: relative;
  display: inline-flex;
}
.run-dropdown .btn-blue:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 1px solid rgba(255,255,255,0.2);
}
.run-caret {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  padding: 9px 10px !important;
}
.run-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.25);
  min-width: 220px;
  z-index: 200;
  overflow: hidden;
}
.run-menu button {
  display: block;
  width: 100%;
  padding: 11px 16px;
  text-align: left;
  background: none;
  border: none;
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}
.run-menu button:hover { background: var(--surface2); }
.run-menu-warn { color: var(--yellow) !important; }
.run-menu-divider { height: 1px; background: var(--border); margin: 4px 0; }

/* ── Source status row ── */
.source-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.source-status-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 160px;
}
.source-meta {
  display: flex;
  gap: 10px;
  font-size: 0.72rem;
  color: var(--text-dim);
  font-weight: 500;
}

/* ── Download links in items table ── */
.dl-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dl-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 0.73rem;
  color: var(--blue);
  text-decoration: none;
  font-weight: 500;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dl-pill:hover { background: rgba(92,124,250,0.1); border-color: var(--blue); }
.dl-quality {
  display: inline-block;
  background: rgba(246,173,85,0.18);
  color: var(--yellow-ink);
  border-radius: 3px;
  padding: 0 4px;
  font-size: 0.65rem;
  font-weight: 700;
  flex-shrink: 0;
}
.dl-episode {
  display: inline-block;
  background: rgba(56,193,114,0.15);
  color: var(--green-ink);
  border-radius: 3px;
  padding: 0 4px;
  font-size: 0.65rem;
  font-weight: 700;
  flex-shrink: 0;
}
.dl-more-btn {
  background: none;
  border: 1px dashed var(--border);
  border-radius: 5px;
  padding: 2px 8px;
  font-size: 0.72rem;
  color: var(--text-dim);
  cursor: pointer;
  font-weight: 600;
  text-align: left;
}
.dl-more-btn:hover { border-color: var(--blue); color: var(--blue); }
.dl-expanded {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 2px;
}

/* ── Proxy icon theme tint ── */
[data-theme="dark"] .proxy-icon-img {
  filter: brightness(0) invert(0.75);
}

/* ── Sources tab ── */
.source-cfg-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 12px;
  transition: border-color .15s;
}
.source-cfg-card:hover { border-color: var(--blue); }
.source-cfg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.source-cfg-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
}
.source-cfg-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.78rem;
  color: var(--text-dim);
  padding-top: 4px;
  border-top: 1px solid var(--border);
}
.source-cfg-meta span { min-width: 0; word-break: break-all; }

/* ── Settings page ── */
.settings-hint {
  display: block;
  font-size: 0.75rem;
  margin-top: 4px;
  min-height: 1em;
}

/* ── Progress bar ── */
.progress-card { border: 1px solid rgba(92,124,250,0.35); }
[data-theme="dark"] .progress-card { border-color: rgba(92,124,250,0.25); }

@keyframes prog-pulse {
  0%   { background-position: 0% 0; }
  50%  { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}

/* ── Domain filter tab ── */
.df-blocked td { opacity: 0.55; }
.df-toggle {
  position: relative; display: inline-block;
  width: 34px; height: 18px; cursor: pointer;
}
.df-toggle input { opacity: 0; width: 0; height: 0; }
.df-slider {
  position: absolute; inset: 0;
  background: var(--border); border-radius: 18px;
  transition: background .2s;
}
.df-slider::before {
  content: ""; position: absolute;
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff; left: 3px; top: 3px;
  transition: transform .2s;
}
.df-toggle input:checked + .df-slider { background: var(--green); }
.df-toggle input:checked + .df-slider::before { transform: translateX(16px); }

/* Domain health check */
#domain-check-table th:last-child,
#domain-check-table td:last-child { width: 90px; text-align: right; }
#domain-check-table td:nth-child(2),
#domain-check-table td:nth-child(3) { white-space: nowrap; }

/* Replace domain inputs */
#replace-domain-status {
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(92,124,250,0.06);
  border: 1px solid var(--border);
}

/* ── Site ON/OFF power pill ─────────────────────────────────────────────────── */
.site-power-toggle { cursor: pointer; }
.site-power-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px 5px 8px;
  border-radius: 20px; border: 1.5px solid var(--border);
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em;
  transition: background .18s, border-color .18s;
  user-select: none;
}
.site-power-dot {
  width: 9px; height: 9px; border-radius: 50%;
  transition: background .18s;
}
.site-power-on  { background: rgba(56,193,114,0.12); border-color: var(--green); color: var(--green-ink); }
.site-power-on  .site-power-dot { background: var(--green); box-shadow: 0 0 5px var(--green); }
.site-power-off { background: rgba(180,180,180,0.08); border-color: var(--border); color: var(--text-dim); }
.site-power-off .site-power-dot { background: var(--text-dim); }

/* ── Dashboard running row & spinner ────────────────────────────────────────── */
tr.row-running { background: rgba(92,124,250,0.04); }
.run-spinner-ring {
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--green);
  border-right-color: var(--green);
  animation: spin-ring .9s linear infinite;
  pointer-events: none;
}
@keyframes spin-ring { to { transform: rotate(360deg); } }

/* ── Accessibility layer ──────────────────────────────────────────────────────
   Everything below is invisible during normal mouse use — it only shows up
   for keyboard navigation, reduced-motion preference, or the brief instant
   of a click — so it adds no visual change to the design at rest. */

/* Visible focus ring for keyboard users. :focus-visible (not :focus) means
   a mouse click never shows it — only Tab/Shift+Tab navigation does. */
.btn:focus-visible,
.nav-link:focus-visible,
.tab:focus-visible,
.type-pill:focus-visible,
.theme-toggle:focus-visible,
.modal-close:focus-visible,
.dl-more-btn:focus-visible,
.back-link:focus-visible,
.data-table a:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Subtle press feedback — scales back down instantly on release, never
   shifts layout since it's a transform, not a width/height change. */
.btn:active:not(:disabled) { filter: brightness(0.94); transform: scale(0.98); }
.type-pill:active { transform: scale(0.97); }

/* Numbers that update live (stat cards, table figures) keep a fixed digit
   width so they don't jitter left/right as the value changes. */
.stat-val, .daily-stat > span:first-child, .net-rate-badge, .data-table td {
  font-variant-numeric: tabular-nums;
}

/* Respect the OS-level "reduce motion" setting: stop decorative animation
   and instant-snap transitions instead of quietly ignoring the preference. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}