/**
 * SATIP Unified Monitoring System - Complete Rich Theming
 * Restored from original with all themes and advanced functionality
 */

:root {
  /* Default Blue Light Theme - Text always black in light mode */
  --bgA: #1e3a8a; --bgB: #3b82f6; --ink: #000000; --muted: #64748b; --line: #e2e8f0; --card: #ffffff;
  --ok: #10b981; --bad: #ef4444; --c1w: 640px; /* wider Column 1 */
  --primary: #2563eb;
  
  /* Dark Hacker Theme */
  --console-green: #00ff00; --console-bg: #000000;
  --hacker-accent: #00ff41; --hacker-dim: #00cc33; --hacker-bg: #001100;
  
  /* Modern Blue Accents */
  --light-accent: #2563eb; --light-secondary: #0ea5e9; --light-success: #10b981;
  --light-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}


/* Light Theme Color Palettes - Text stays black, backgrounds change */
.orange {
  --bgA: #ea580c; --bgB: #fb923c; --ink: #000000; --muted: #6b7280; --line: #e2e8f0; --card: #ffffff;
  --ok: #10b981; --bad: #ef4444; --light-accent: #ea580c; --light-secondary: #fb923c; --light-success: #10b981;
  --primary: #ea580c;
}

.cyan {
  --bgA: #0891b2; --bgB: #06b6d4; --ink: #000000; --muted: #6b7280; --line: #e2e8f0; --card: #ffffff;
  --ok: #10b981; --bad: #ef4444; --light-accent: #0891b2; --light-secondary: #06b6d4; --light-success: #10b981;
  --primary: #0891b2;
}

.emerald {
  --bgA: #047857; --bgB: #10b981; --ink: #000000; --muted: #6b7280; --line: #e2e8f0; --card: #ffffff;
  --ok: #10b981; --bad: #ef4444; --light-accent: #059669; --light-secondary: #10b981; --light-success: #10b981;
  --primary: #059669;
}

.black-knight {
  --bgA: #000916; --bgB: #1a1f2e; --ink: #000000; --muted: #6b7280; --line: #e2e8f0; --card: #ffffff;
  --ok: #10b981; --bad: #ef4444; --light-accent: #60a5fa; --light-secondary: #3b82f6; --light-success: #10b981;
  --primary: #60a5fa;
}

/* Brochure theme (based on SATLINE 2025 article palette) */
.brochure {
  --bgA: #0a0f1c; --bgB: #1a1f2e;
  --ink: #f0f4f8; --muted: rgba(240, 244, 248, 0.7);
  --line: rgba(255, 255, 255, 0.12);
  --card: rgba(6, 10, 18, 0.96);
  --ok: #10b981; --bad: #ef4444;
  --light-accent: #00d4ff; --light-secondary: #00ffca; --light-success: #10b981;
  --primary: #00d4ff;
}

.violet {
  --bgA: #7c2d92; --bgB: #a855f7; --ink: #000000; --muted: #6b7280; --line: #e2e8f0; --card: #ffffff;
  --ok: #10b981; --bad: #ef4444; --light-accent: #7c2d92; --light-secondary: #a855f7; --light-success: #10b981;
  --primary: #7c2d92;
}

.indigo {
  --bgA: #3730a3; --bgB: #4f46e5; --ink: #000000; --muted: #6b7280; --line: #e2e8f0; --card: #ffffff;
  --ok: #10b981; --bad: #ef4444; --light-accent: #3730a3; --light-secondary: #4f46e5; --light-success: #10b981;
  --primary: #3730a3;
}

/* Dark Theme Color Palettes - Background stays black, text/accents change */
.red-matrix {
  --console-green: #ff0000; --console-bg: #000000; --hacker-accent: #ff4141; --hacker-dim: #cc3333; --hacker-bg: #000000;
}

.blue-matrix {
  --console-green: #00ddff; --console-bg: #000000; --hacker-accent: #4193ff; --hacker-dim: #3385cc; --hacker-bg: #000000;
}


* { box-sizing: border-box; }

body {
  margin: 0; color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: linear-gradient(160deg, var(--bgA), var(--bgB)) fixed;
}

.wrapper { min-height: 100vh; display: flex; flex-direction: column; }

/* Layout for main dashboard */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1rem;
}

/* Header */
.header {
  background: rgba(255,255,255,.2);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.3);
  color: var(--ink);
  padding: 1rem 0;
  position: relative;
  z-index: 50;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  text-shadow: none;
  margin: 0;
}

/* Controls - Mac-style layout with centered title */
.controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 8px 12px; background: rgba(255,255,255,.2);
  position: sticky; top: 0; z-index: 2000; backdrop-filter: saturate(180%) blur(25px);
  border-bottom: 1px solid rgba(255,255,255,.3);
  box-shadow: 0 4px 32px rgba(37,99,235,.1);
}

/* Left side - controls (Mac-style) */
.controls .groups {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  justify-self: start;
}

/* Center - title */
.controls .left {
  color: var(--ink); font-weight: 700;
  text-align: center;
  justify-self: center;
  font-size: 22.4px;
}

/* Right side - theme controls (moved from right to left visually) */
.controls .theme-controls {
  display: flex; gap: 10px; align-items: center;
  justify-self: end;
}

.controls .group {
  display: flex; gap: 4px; align-items: center; background: rgba(255,255,255,.3);
  padding: 3px 4px; border-radius: 6px; backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.2);
}

.controls label { font-size: 6.5px; color: var(--ink); }

.controls input[type=range] {
  width: 160px; -webkit-appearance: none; appearance: none; height: 4px;
  border-radius: 2px; background: rgba(255,255,255,.3); outline: none;
}

.controls input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; height: 16px; width: 16px;
  border-radius: 50%; background: #fff; cursor: pointer;
  border: 2px solid rgba(37,99,235,.5); box-shadow: 0 2px 4px rgba(0,0,0,.2);
}

.controls input[type=range]::-moz-range-thumb {
  height: 16px; width: 16px; border-radius: 50%; background: #fff;
  cursor: pointer; border: 2px solid rgba(37,99,235,.5);
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
}

/* Tiny modern buttons */
.btn { border: 0; border-radius: 6px; padding: 4px 8px; font-weight: 500; cursor: pointer; transition: all 0.15s ease; font-size: 0.7rem; }
.btn-tiny { background: rgba(255,255,255,.8); color: var(--light-accent); border: 1px solid rgba(37,99,235,.2); font-size: 10px; padding: 3px 6px; }
.btn-tiny:hover { background: rgba(255,255,255,.95); transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,.1); }
.btn.success { background: var(--ok); color: #ffffff; border: none; box-shadow: 0 2px 6px rgba(16,185,129,0.4); }
.btn.success:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(16,185,129,0.55); }

/* Theme toggle switch */
.theme-toggle { position: relative; width: 30px; height: 12px; background: rgba(255,255,255,.3); border-radius: 6px; border: 1px solid rgba(255,255,255,.2); cursor: pointer; transition: all 0.3s ease; }
.theme-toggle .toggle-slider { position: absolute; top: 1px; left: 1px; width: 9px; height: 9px; background: #fff; border-radius: 50%; transition: all 0.3s ease; box-shadow: 0 0.5px 1.5px rgba(0,0,0,.2); }
.theme-toggle .toggle-icon { position: absolute; font-size: 5px; top: 50%; transform: translateY(-50%); transition: opacity 0.2s ease; }
.theme-toggle .sun { left: 2px; opacity: 1; }
.theme-toggle .moon { right: 2px; opacity: 0.3; }
.theme-toggle.auto .toggle-slider { left: 10.5px; }
.theme-toggle.auto .sun { opacity: 0.5; }
.theme-toggle.auto .moon { opacity: 0.5; }
.theme-toggle.dark .toggle-slider { left: 19px; background: var(--console-bg); }
.theme-toggle.dark .sun { opacity: 0.3; color: var(--console-green); }
.theme-toggle.dark .moon { opacity: 1; color: var(--console-green); }

/* Auto/Manual toggle */
.refresh-toggle { position: relative; width: 50px; height: 20px; background: rgba(255,255,255,.3); border-radius: 10px; border: 1px solid rgba(255,255,255,.2); cursor: pointer; transition: all 0.3s ease; }
.refresh-toggle .toggle-slider { position: absolute; top: 1px; left: 1px; width: 16px; height: 16px; background: var(--light-accent); border-radius: 50%; transition: all 0.3s ease; }
.refresh-toggle.manual .toggle-slider { left: 31px; background: var(--muted); }

/* Home button - modern */
.btn-home { background: rgba(255,255,255,.8); color: var(--light-accent); border: 1px solid rgba(37,99,235,.2); font-size: 0.7rem; padding: 4px 6px; border-radius: 6px; display: flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; }
.btn-home:hover { background: rgba(255,255,255,.95); transform: translateY(-1px); }

/* Color Palette Selector */
.palette-wrapper { position: relative; display: inline-block; }
.palette-btn { background: rgba(255,255,255,.8); color: var(--light-accent); border: 1px solid rgba(37,99,235,.2); font-size: 5.5px; padding: 2px 3px; border-radius: 3px; cursor: pointer; display: flex; align-items: center; justify-content: center; min-width: 12px; height: 12px; transition: all 0.15s ease; }
.palette-btn:hover { background: rgba(255,255,255,.95); transform: translateY(-1px); }
.palette-popup { position: absolute; top: 100%; right: 0; background: rgba(255,255,255,.98); border: 1px solid rgba(37,99,235,.2); border-radius: 12px; padding: 12px; box-shadow: 0 8px 32px rgba(37,99,235,.15); backdrop-filter: saturate(180%) blur(20px); display: none; z-index: 999999; min-width: 200px; }
.palette-popup.show { display: block; }
.palette-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.palette-grid.wide { grid-template-columns: repeat(4, 1fr); }
.palette-item { width: 40px; height: 30px; border-radius: 6px; cursor: pointer; border: 2px solid transparent; transition: all 0.2s ease; position: relative; overflow: hidden; }
.palette-item:hover { transform: scale(1.1); border-color: rgba(37,99,235,.5); }
.palette-item.active { border-color: var(--light-accent); box-shadow: 0 0 0 2px rgba(37,99,235,.2); }
.palette-item.theme-blue { background: linear-gradient(135deg, #1e3a8a, #3b82f6); }
.palette-item.theme-orange { background: linear-gradient(135deg, #ea580c, #fb923c); }
.palette-item.theme-cyan { background: linear-gradient(135deg, #0891b2, #06b6d4); }
.palette-item.theme-dark { background: linear-gradient(135deg, #000000, #001100); border: 1px solid #00ff00; }
.palette-item.theme-dark-neon { background: linear-gradient(135deg, #000a0a, #001111); border: 1px solid #00ddff; }
.palette-item.theme-dark-orange { background: linear-gradient(135deg, #0a0000, #110000); border: 1px solid #ff4141; }
.palette-item.theme-auto { background: linear-gradient(135deg, #f3f4f6, #1f2937); position: relative; }
.palette-item.theme-auto::after { content: 'A'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #666; font-size: 10px; font-weight: bold; }
.palette-item.theme-emerald { background: linear-gradient(135deg, #047857, #10b981); }
.palette-item.theme-black-knight { background: linear-gradient(135deg, #000916, #1a1f2e); }
.palette-item.theme-brochure { background: linear-gradient(135deg, #0a0f1c, #1a1f2e); border: 1px solid #00d4ff; }
.palette-item.theme-violet { background: linear-gradient(135deg, #7c2d92, #a855f7); }
.palette-item.theme-indigo { background: linear-gradient(135deg, #3730a3, #4f46e5); }
.palette-label { font-size: 10px; text-align: center; margin-top: 4px; color: #666; }
.palette-section { margin-bottom: 12px; }
.palette-section:last-child { margin-bottom: 0; }
.palette-section-title { font-size: 11px; font-weight: 600; color: #374151; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }

/* Server Grid */
.server-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

/* Server Cards */
.server-card {
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: var(--light-shadow, 0 8px 32px rgba(37,99,235,.15));
  transition: all 0.3s ease;
  backdrop-filter: saturate(180%) blur(20px);
  text-decoration: none;
  color: inherit;
  display: block;
}

.server-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 25px 50px -12px rgba(37,99,235,.25);
  background: rgba(255,255,255,.98);
  border-color: rgba(37,99,235,.4);
}

.server-card.offline {
  opacity: 0.6;
  border-color: var(--bad);
}

.server-card.online {
  border-color: rgba(16, 185, 129, 0.3);
}

.server-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.server-name {
  font-weight: 600;
  color: var(--light-accent);
  font-size: 1.1rem;
}

.server-status {
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.status-online {
  background: rgba(16, 185, 129, 0.1);
  color: var(--ok);
}

.status-offline {
  background: rgba(239, 68, 68, 0.1);
  color: var(--bad);
}

/* Server Info Grid */
.server-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}

.info-item {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.info-label {
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.25rem;
  flex-shrink: 0;
}

.info-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Card area: one full-width card per server (for monitoring pages) - compact spacing */
main { padding: 10px; padding-top: 0; }
.grid { display: grid; gap: 8px; grid-template-columns: 1fr; }

.card {
  background: rgba(255,255,255,.95); border: 1px solid rgba(255,255,255,.3);
  border-radius: 12px; padding: 10px 14px;
  box-shadow: var(--light-shadow, 0 6px 24px rgba(37,99,235,.12));
  display: flex; flex-direction: column; gap: 8px;
  transition: all 0.3s ease; backdrop-filter: saturate(180%) blur(20px);
  position: relative; margin-bottom: 8px;
}

.card:hover {
  transform: translateY(-4px); box-shadow: 0 25px 50px -12px rgba(37,99,235,.25);
  background: rgba(255,255,255,.98); border-color: rgba(37,99,235,.4);
}

.card.off { opacity: .55; }

/* Card Header with Status - positioned to avoid button overlap */
.card-header {
  position: absolute;
  top: 8px;
  left: 14px;
  z-index: 10;
}

.card-status {
  display: flex;
  justify-content: flex-end;
}

/* 4-column compact layout - matching reference image */
.section-four-columns {
  display: grid;
  /* row-gap | column-gap */
  gap: 8px 14px;
  /* Narrow server-info, controlled tuner width, moderate network, small buttons */
  grid-template-columns: minmax(280px, 1.1fr) minmax(320px, 1.2fr) minmax(260px, 1.1fr) 80px;
  align-items: start;
  padding: 8px 0;
}

/* Column borders to prevent overlap */
.section-four-columns > div {
  padding-right: 8px;
  border-right: 1px solid rgba(0,0,0,0.1);
  overflow: hidden;
}

.section-four-columns > div:last-child {
  border-right: none;
  padding-right: 0;
}

/* Ultra-compact tuner card mode */
.card.compact { padding: 6px 10px; gap: 5px; border-radius: 10px; }
.card.compact .section-four-columns { gap: 6px 14px; grid-template-columns: minmax(280px, 1.05fr) minmax(320px, 1.2fr) minmax(260px, 1.1fr) 72px; }
/* Remove extra padding; instead reserve a small margin on per-bar mini chips */
/* Double the gap between tuner and network columns */
.network-col { margin-left: 14px; margin-top: 8px; }
.card.compact .network-col { margin-left: 14px; margin-top: 8px; }
.card.compact .kv { grid-template-columns: 110px 1fr; gap: 1px 6px; font-size: 11px; line-height: 1.15; }
.card.compact .kv b { font-size: 10px; }
.card.compact .kv span { font-size: 10px !important; padding: 1px 4px !important; min-height: 14px !important; border-radius: 3px !important; }
.card.compact .metric { margin-bottom: 6px; }
.card.compact .metric .label { font-size: 9px; margin-bottom: 1px; }
.card.compact .progress { height: 10px; border-radius: 3px; }
.card.compact .dbchip { top: -12px; font-size: 8px; }
.card.compact .pill { font-size: 9px !important; padding: 1px 4px !important; min-height: 14px !important; border-radius: 3px !important; }
.card.compact .tuner-params { margin-top: 4px; }
.card.compact .param-row { margin-bottom: 1px; line-height: 1.15; }
.card.compact .button-column .tuner-link, .card.compact .buttons-bottom .tuner-link { font-size: 9px; padding: 3px 6px; border-radius: 3px; }
.card.compact .clients { padding: 4px; }

.section {
  display: grid; gap: 12px;
  grid-template-columns: minmax(280px, 1.8fr) minmax(200px, 0.8fr) minmax(220px, 0.9fr) 120px;
}

/* Tuner Parameters - compact design */
.tuner-params {
  margin-top: 4px;
  padding-top: 6px; /* small breathing room below the row with BER/CC */
  border-top: 1px solid var(--line); /* align separator directly under the barline row */
}

.param-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1px; /* tighter spacing */
  font-size: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.2; /* compact */
}

.param-label {
  color: var(--muted);
  font-weight: 700;
  min-width: 48px;
  font-size: 10px;
}

/* Control Buttons - compact design */
.control-buttons {
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: flex-start;
  align-items: stretch;
}

.control-buttons .tuner-link {
  width: 100%;
  text-align: center;
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 600;
  transition: all 0.2s;
  cursor: pointer;
  background: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  border: 1px solid;
}

.control-buttons .tuner-link.rtsp {
  background: rgba(37,99,235,.1);
  color: var(--light-accent);
  border-color: rgba(37,99,235,.2);
}

.control-buttons .tuner-link.rtsp:hover {
  background: rgba(37,99,235,.2);
  transform: translateY(-1px);
}

.control-buttons .tuner-link.http {
  background: rgba(16,185,129,.1);
  color: var(--ok);
  border-color: rgba(16,185,129,.2);
}

.control-buttons .tuner-link.http:hover {
  background: rgba(16,185,129,.2);
  transform: translateY(-1px);
}

.control-buttons .tuner-link.scan {
  background: rgba(236,72,153,.1);
  color: #ec4899;
  border-color: rgba(236,72,153,.2);
}

.control-buttons .tuner-link.scan:hover {
  background: rgba(236,72,153,.2);
  transform: translateY(-1px);
}

.control-buttons .tuner-link:active {
  transform: scale(0.95);
}

.no-tuner {
  color: var(--muted);
  font-style: italic;
  text-align: center;
  padding: 20px 0;
}

/* Button column styling for 4-column layout */
.button-column {
  display: flex;
  flex-direction: column;
  /* auto height so buttons sit closer to content height */
}

.status-top {
  text-align: center;
  margin-bottom: 8px;
}

.spacer {
  flex: 1; /* This pushes buttons to bottom */
}

.buttons-bottom {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 6px; /* lift buttons slightly to align with Dropped */
}

.button-column .tuner-link,
.buttons-bottom .tuner-link {
  width: 100%;
  text-align: center;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 600;
  transition: all 0.2s;
  cursor: pointer;
  background: none;
  border: 1px solid;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.button-column .tuner-link.rtsp,
.buttons-bottom .tuner-link.rtsp {
  background: rgba(37,99,235,.1);
  color: var(--light-accent);
  border-color: rgba(37,99,235,.2);
}

.button-column .tuner-link.rtsp:hover,
.buttons-bottom .tuner-link.rtsp:hover {
  background: rgba(37,99,235,.2);
  transform: translateY(-1px);
}

.button-column .tuner-link.http,
.buttons-bottom .tuner-link.http {
  background: rgba(16,185,129,.1);
  color: var(--ok);
  border-color: rgba(16,185,129,.2);
}

.button-column .tuner-link.http:hover,
.buttons-bottom .tuner-link.http:hover {
  background: rgba(16,185,129,.2);
  transform: translateY(-1px);
}

.button-column .tuner-link.scan,
.buttons-bottom .tuner-link.scan {
  background: rgba(236,72,153,.1);
  color: #ec4899;
  border-color: rgba(236,72,153,.2);
}

.button-column .tuner-link.scan:hover,
.buttons-bottom .tuner-link.scan:hover {
  background: rgba(236,72,153,.2);
  transform: translateY(-1px);
}

.button-column .tuner-link:active,
.buttons-bottom .tuner-link:active {
  transform: scale(0.95);
}

/* key/value grid - compact with bold labels and framed values */
.kv {
  display: grid;
  grid-template-columns: 120px 1fr; /* label | value */
  gap: 1px 6px; /* tighter vertical spacing */
  font-size: 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  align-items: start;
  justify-items: start; /* Prevent value boxes from stretching full width */
  line-height: 1.2; /* more compact lines */
}

.kv b { 
  color: #111827; 
  font-weight: 700;
  font-size: 10px; /* match other column labels */
}

.kv span {
  background: rgba(255,255,255,0.8) !important;
  border: 1px solid rgba(0,0,0,0.15) !important;
  border-radius: 3px !important; /* tighter corners */
  padding: 1px 5px !important; /* tighter padding */
  font-size: 11px !important; /* unify with pills */
  text-align: left !important;
  direction: ltr !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 16px !important; /* compact height */
  color: #333 !important;
  width: max-content; /* Fit to text */
  justify-self: start; /* Do not stretch in grid cell */
}

/* Dark theme overrides for .kv span */
.dark .kv span {
  background: rgba(0,20,0,0.4) !important;
  border: 1px solid var(--console-green) !important;
  color: var(--console-green) !important;
  box-shadow: inset 0 1px 2px rgba(0,255,65,0.1) !important;
}

.kv .nowrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kv .sep { display: none; }

/* Column 2 bars - compact design */
.metric { margin-bottom: 8px; }
.metric .label { font-size: 10px; color: #374151; margin-bottom: 2px; display: flex; align-items: center; gap: 4px; font-weight: 700; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.progress { 
  height: 14px; 
  width: 100%; 
  max-width: 100%; 
  border: 1px solid rgba(0,0,0,0.15); 
  background: rgba(255,255,255,0.8); 
  border-radius: 4px; 
  position: relative;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
  overflow: hidden;
}

/* STR/SNR with BER/CC to the right */
.signals-grid { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; align-items: start; overflow: hidden; }
.signals-side { display: flex; flex-direction: column; gap: 4px; }
.signals-side .mini { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.signals-side .mini .label { font-weight: 700; color: #374151; }

/* Per-bar alignment helper: progress + right pill in one row */
.barline { 
  display: grid; 
  grid-template-columns: 1fr auto; 
  align-items: center; 
  column-gap: 6px; 
  overflow: hidden; 
  max-width: 100%;
  width: 100%;
}
.barline .mini { display: flex; align-items: center; gap: 6px; font-size: 11px; margin-right: 0; white-space: nowrap; }
.barline .mini .label { font-weight: 700; color: #374151; }

/* Signal column specific constraints */
.signal-col {
  max-width: 100%;
  overflow: hidden;
  width: 100%;
}

.signal-col .metric {
  max-width: 100%;
  overflow: hidden;
}

.signal-col .progress {
  max-width: calc(100% - 80px); /* Leave space for BER/CC pills */
  min-width: 0;
  flex-shrink: 1;
}

/* Compact tweaks */
.card.compact .signals-grid { column-gap: 6px; }
.card.compact .signals-side .mini { font-size: 9px; gap: 4px; }
.card.compact .barline { column-gap: 4px; max-width: 100%; }
.card.compact .barline .mini { font-size: 9px; gap: 4px; margin-right: 0; }
.card.compact .signal-col .progress { max-width: calc(100% - 70px); }
.progress > span { display: block; height: 100%; }
.bar-1 { background: #fd5252; } .bar-2 { background: #fdb352; } .bar-3 { background: #e3d802; } .bar-4 { background: #bae302; } .bar-5 { background: #4eb725; }
.dbchip { position: absolute; right: 4px; top: -14px; font-size: 9px; background: rgba(60,60,60,.12); padding: 0 4px; border-radius: 3px; }
.pill { 
  display: inline-flex !important; 
  align-items: center !important;
  padding: 1px 5px !important; /* tighter padding */
  border-radius: 3px !important; 
  border: 1px solid rgba(0,0,0,0.15) !important; 
  background: rgba(255,255,255,0.8) !important; 
  font-size: 11px !important; 
  color: #333 !important;
  text-align: left !important;
  direction: ltr !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  min-height: 16px !important; /* compact height */
}

/* Dark theme overrides for .pill */
.dark .pill {
  background: rgba(0,20,0,0.4) !important;
  border: 1px solid var(--console-green) !important;
  color: var(--console-green) !important;
  box-shadow: inset 0 1px 2px rgba(0,255,65,0.1) !important;
}

/* Status badge - compact design */
.badge { 
  display: inline-block; 
  padding: 3px 8px; 
  border-radius: 999px; 
  font-size: 9px; 
  font-weight: 700; 
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.badge.ok { background: rgba(16,185,129,.15); color: var(--ok); }
.badge.down { background: rgba(239,68,68,.12); color: var(--bad); }

/* clients - compact design */
.hr { display: none; }
.clients { border: 1px dashed var(--line); border-radius: 6px; padding: 6px; margin-top: 4px; }
.clients-h { font-weight: 700; margin-bottom: 6px; font-size: 11px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }

/* New client cards layout */
.clients-cards { display: flex; flex-direction: column; gap: 8px; }
.client-card { 
  background: rgba(255,255,255,0.5); 
  border: 1px solid var(--line); 
  border-radius: 4px; 
  padding: 4px; 
  font-size: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.client-header { 
  font-weight: 700; 
  color: var(--light-accent); 
  margin-bottom: 2px; 
  font-size: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.client-address { 
  color: var(--ink);
}
.client-details { 
  display: flex; 
  flex-direction: column; 
  gap: 2px; 
}
.client-field { 
  display: flex; 
  align-items: flex-start; 
  gap: 4px;
}
.client-label { 
  font-weight: 700; 
  color: var(--muted); 
  min-width: 32px; 
  flex-shrink: 0;
  font-size: 9px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.client-value { 
  color: var(--ink); 
  font-weight: 500;
  font-size: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.client-pids { 
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 
  color: var(--light-accent); 
  background: rgba(37,99,235,.08); 
  padding: 1px 3px; 
  border-radius: 3px; 
  font-size: 9px;
  line-height: 1.3;
  word-break: break-all;
}

/* Dark theme adjustments */
.dark .client-card { 
  background: rgba(0,30,0,.3); 
  border-color: var(--hacker-accent);
}
.dark .client-header { 
  color: var(--console-green);
}
.dark .client-address { 
  color: var(--console-green);
}
.dark .client-label { 
  color: var(--hacker-dim);
}
.dark .client-value { 
  color: var(--console-green);
}
.dark .client-pids { 
  background: rgba(0,255,65,.1); 
  color: var(--console-green);
}

/* Legacy clients list styles (kept for backward compatibility) */
.clients-list { list-style: none; margin: 0; padding: 0; max-height: calc(1.6em * 10); overflow-y: auto; }
.clients-list li { display: flex; justify-content: space-between; align-items: center; font-size: 13px; line-height: 1.6; gap: 12px; padding: 4px 0; }
.client-info { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.clients-list .ua { font-weight: 700; }
.clients-list .addr { font-family: ui-monospace, Menlo, monospace; color: var(--muted); font-size: 12px; }
.clients-list .pids { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--light-accent); background: rgba(37,99,235,.08); padding: 2px 6px; border-radius: 4px; white-space: nowrap; }

/* Tuner Links */
.tuner-links { border: 1px dashed var(--line); border-radius: 10px; padding: 10px; margin-bottom: 8px; }
.tuner-links-h { font-weight: 700; margin-bottom: 6px; color: var(--light-accent); }
.tuner-list { list-style: none; margin: 0; padding: 0; }
.tuner-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); }
.tuner-item:last-child { border-bottom: none; }
.tuner-num { font-weight: 600; color: var(--ink); }
.tuner-freq { color: var(--muted); font-size: 13px; }
.tuner-urls { display: flex; gap: 8px; }
.tuner-link { 
  padding: 4px 12px; 
  border-radius: 6px; 
  font-size: 12px; 
  text-decoration: none; 
  transition: all 0.2s; 
  cursor: pointer;
  background: none;
  font-family: inherit;
}
.tuner-link.rtsp { background: rgba(37,99,235,.1); color: var(--light-accent); border: 1px solid rgba(37,99,235,.2); }
.tuner-link.rtsp:hover { background: rgba(37,99,235,.2); transform: translateY(-1px); }
.tuner-link.http { background: rgba(16,185,129,.1); color: var(--ok); border: 1px solid rgba(16,185,129,.2); }
.tuner-link.http:hover { background: rgba(16,185,129,.2); transform: translateY(-1px); }
.tuner-link.scan { background: rgba(236,72,153,.1); color: #ec4899; border: 1px solid rgba(236,72,153,.2); }
.tuner-link.scan:hover { background: rgba(236,72,153,.2); transform: translateY(-1px); }
.tuner-link:active { transform: scale(0.95); }

/* Delivery System Icons - smaller for compact mode */
.delivery-icon {
  height: 14px;
  width: auto;
  vertical-align: middle;
  margin-right: 4px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
  border-radius: 2px;
  transition: transform 0.2s ease;
  display: inline-block;
}

.delivery-icon:hover {
  transform: scale(1.05);
}

/* Dark theme adjustments for delivery icons */
.dark .delivery-icon {
  filter: brightness(0.9) contrast(1.1) drop-shadow(0 1px 2px rgba(0, 255, 65, 0.2));
}

/* Ensure delivery system span can hold icons properly */
.kv span:has(.delivery-icon) {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Fallback for browsers without :has() support */
.kv span {
  display: inline-flex;
  align-items: center;
  min-height: 16px; /* keep compact height consistent */
}

/* Forms in tools (e.g. reserved tuners) */
.reserved-tuners-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.reserved-tuners-table th,
.reserved-tuners-table td {
  padding: 0.4rem 0.75rem;
  text-align: left;
}

.reserved-tuners-header-row th {
  font-weight: 600;
}

/* Copy notification popup */
.copy-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  background: rgba(16, 185, 129, 0.95);
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 10000;
  opacity: 0;
  transform: translateY(-20px) scale(0.8);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  pointer-events: none;
}

.copy-notification.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Error state for copy notification */
.copy-notification:has-text("✗") {
  background: rgba(239, 68, 68, 0.95);
}

/* Light Theme - Explicit styles for light mode */
.light body {
  background: linear-gradient(160deg, var(--bgA), var(--bgB)) fixed !important;
  color: var(--ink) !important;
}

.light .wrapper { background: transparent; }
.light .header { background: rgba(255,255,255,.9); color: #000000; border-bottom: 1px solid #e2e8f0; }
.light .title { color: #000000; text-shadow: none; }
.light .subtitle { color: #000000 !important; }
.light .section-header { color: #000000 !important; }
.light .controls { background: rgba(255,255,255,.9); color: #000000; border-bottom: 1px solid #e2e8f0; }
.light .controls .left { color: var(--light-accent); }
.light .controls label { color: #000000; }
.light .group { background: rgba(255,255,255,.6); border: 1px solid #e2e8f0; }
.light .card { background: #ffffff; color: #000000; }
.light .kv b { color: #000000; }
.light .kv span { color: #000000; }
.light .metric .label { color: #000000; }
.light .info-value { color: #000000; }
.light .info-label { color: #64748b; }
.light .server-card { background: #ffffff; color: #000000; }
.light .server-name { color: var(--light-accent); }
.light .tuner-num { color: #000000; }
.light .tuner-freq { color: #64748b; }
.light .clients-list li { color: #000000; }
.light .clients-list .ua { color: var(--light-accent); }
 .light .clients-list .addr { color: #000000; }

/* Brochure light-mode overrides: use dark article-style cards/frames */
html.brochure.light .server-card,
body.brochure.light .server-card {
  background: rgba(6, 10, 18, 0.96);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px rgba(0, 212, 255, 0.25);
  color: var(--ink);
}

html.brochure.light .server-card:hover,
body.brochure.light .server-card:hover {
  background: rgba(10, 15, 28, 0.98);
  border-color: var(--light-accent);
  box-shadow: 0 16px 48px rgba(0, 212, 255, 0.35);
}

html.brochure.light .card,
body.brochure.light .card {
  background: rgba(6, 10, 18, 0.96);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px rgba(0, 212, 255, 0.25);
  color: var(--ink);
}

html.brochure.light .server-header,
body.brochure.light .server-header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

html.brochure.light .info-label,
body.brochure.light .info-label {
  color: var(--muted);
}

html.brochure.light .info-value,
body.brochure.light .info-value {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--ink);
}

html.brochure.light .header,
body.brochure.light .header {
  background: transparent;
  border-bottom: 1px solid rgba(0, 212, 255, 0.35);
  color: var(--ink);
}

html.brochure.light .controls,
body.brochure.light .controls {
  background: linear-gradient(135deg,
              rgba(0, 212, 255, 0.16),
              rgba(0, 255, 163, 0.08));
  border-bottom: 1px solid rgba(0, 212, 255, 0.45);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

html.brochure.light .controls .left,
body.brochure.light .controls .left {
  background: linear-gradient(135deg, var(--light-accent), var(--light-secondary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 18px rgba(0, 212, 255, 0.7);
}

html.brochure.light .controls .group,
body.brochure.light .controls .group {
  background: rgba(6, 10, 18, 0.9);
  border-color: rgba(0, 212, 255, 0.4);
}

html.brochure.light .theme-toggle,
body.brochure.light .theme-toggle,
html.brochure.light .refresh-toggle,
body.brochure.light .refresh-toggle {
  background: rgba(6, 10, 18, 0.9);
  border-color: rgba(0, 212, 255, 0.4);
}

html.brochure.light .btn-home,
body.brochure.light .btn-home,
html.brochure.light .btn-tiny,
body.brochure.light .btn-tiny,
html.brochure.light .palette-btn,
body.brochure.light .palette-btn {
  background: rgba(0, 212, 255, 0.12);
  color: var(--light-accent);
  border-color: rgba(0, 212, 255, 0.5);
}

html.brochure.light .palette-popup,
body.brochure.light .palette-popup {
  background: rgba(6, 10, 18, 0.98);
  border-color: rgba(0, 212, 255, 0.5);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.85);
}

html.brochure.light .section-header,
body.brochure.light .section-header {
  background: linear-gradient(135deg, var(--light-accent), var(--light-secondary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

/* Brochure tuner info cards: LyngSat-style boxes */
html.brochure.light .kv b,
body.brochure.light .kv b {
  color: var(--muted);
}

html.brochure.light .kv span,
body.brochure.light .kv span {
  background: rgba(15, 23, 42, 0.96) !important; /* slate-900 */
  border: 1px solid rgba(148, 163, 184, 0.6) !important; /* slate-400 */
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.9) !important;
  color: var(--ink) !important;
}

html.brochure.light .metric .label,
body.brochure.light .metric .label {
  color: var(--muted);
}

html.brochure.light .progress,
body.brochure.light .progress {
  background: rgba(15, 23, 42, 0.96);
  border-color: rgba(148, 163, 184, 0.6);
}

/* Tuner parameter chips (System/Frequency/SR/Mod/FEC/Position) */
html.brochure.light .pill,
body.brochure.light .pill {
  background: rgba(15, 23, 42, 0.96) !important;
  border-color: rgba(148, 163, 184, 0.6) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.9) !important;
  color: var(--ink) !important;
}

html.brochure.light .param-label,
body.brochure.light .param-label {
  color: var(--muted);
}

html.brochure.light .badge.ok,
body.brochure.light .badge.ok {
  background: rgba(34, 197, 94, 0.12);
  color: #4ade80;
}

html.brochure.light .badge.down,
body.brochure.light .badge.down {
  background: rgba(248, 113, 113, 0.12);
  color: #fca5a5;
}

html.brochure.light .clients,
body.brochure.light .clients {
  border-color: rgba(148, 163, 184, 0.5);
  background: rgba(15, 23, 42, 0.9);
}

html.brochure.light .client-card,
body.brochure.light .client-card {
  background: rgba(15, 23, 42, 0.98);
  border-color: rgba(148, 163, 184, 0.6);
}

/* Brochure: reserved tuners tool adopts tuner-card palette */
html.brochure.light .reserved-tuners-table,
body.brochure.light .reserved-tuners-table {
  background: transparent;
}

html.brochure.light .reserved-tuners-header-row th,
body.brochure.light .reserved-tuners-header-row th {
  background: rgba(15, 23, 42, 0.98);
  border-bottom: 1px solid rgba(148, 163, 184, 0.6);
  color: var(--ink);
}

html.brochure.light .reserved-tuners-row td,
body.brochure.light .reserved-tuners-row td {
  border-top: 1px solid rgba(15, 23, 42, 0.85);
}

html.brochure.light .reserved-tuners input[type="text"],
body.brochure.light .reserved-tuners input[type="text"],
html.brochure.light .reserved-tuners input[type="number"],
body.brochure.light .reserved-tuners input[type="number"],
html.brochure.light .reserved-tuners select,
body.brochure.light .reserved-tuners select {
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(148, 163, 184, 0.6);
  color: var(--ink);
  padding: 4px 8px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.9);
}

html.brochure.light .reserved-tuners input::placeholder,
body.brochure.light .reserved-tuners input::placeholder {
  color: rgba(148, 163, 184, 0.8);
}

/* Dark Hacker Theme */
.dark { background: var(--console-bg) !important; --line: #4b5563; --bgA: rgba(0,20,0,.9); --bgB: rgba(0,30,0,.6); --text: var(--console-green); --border: var(--hacker-accent); --primary: var(--hacker-accent); --ink: var(--console-green); --muted: var(--hacker-dim); }
.dark body { background: linear-gradient(135deg, var(--console-bg), var(--hacker-bg)) fixed !important; color: var(--console-green); }
.dark .wrapper { background: transparent; }
.dark .header { background: rgba(0,20,0,.9); color: var(--console-green); border-bottom: 1px solid var(--hacker-accent); }
/* Make index.php server card fields clear in dark mode */
.dark .server-card .info-value { 
  background: rgba(0,20,0,0.35) !important; 
  border: 1px solid var(--hacker-accent) !important; 
  color: var(--console-green) !important; 
}
.dark .server-card .info-label { color: var(--hacker-accent) !important; }
.dark .title { color: var(--hacker-accent); text-shadow: 0 0 10px var(--hacker-accent); }
.dark .controls { background: rgba(0,20,0,.9); color: var(--console-green); border-bottom: 1px solid var(--hacker-accent); }
.dark .controls .left { color: var(--hacker-accent); text-shadow: 0 0 10px var(--hacker-accent); }
.dark .controls label { color: var(--console-green); }
.dark .group { background: rgba(0,30,0,.4); border: 1px solid var(--hacker-accent); border-radius: 8px; }
.dark .btn-tiny { background: rgba(0,30,0,.6); color: var(--hacker-accent); border: 1px solid var(--hacker-accent); }
.dark .btn-tiny:hover { background: rgba(0,255,65,.2); box-shadow: 0 0 8px rgba(0,255,65,.3); }
.dark .theme-toggle { background: rgba(0,30,0,.6); border-color: var(--hacker-accent); }
.dark .theme-toggle .toggle-slider { background: var(--hacker-accent); box-shadow: 0 0 8px rgba(0,255,65,.4); }
.dark .theme-toggle .sun { color: var(--console-green); }
.dark .theme-toggle .moon { color: var(--console-green); }
.dark .refresh-toggle { background: rgba(0,30,0,.6); border-color: var(--hacker-accent); }
.dark .refresh-toggle .toggle-slider { background: var(--hacker-accent); }
.dark .refresh-toggle.manual .toggle-slider { background: var(--hacker-dim); }
.dark .btn-home { background: rgba(0,30,0,.6); color: var(--console-green); border: 1px solid var(--console-green); }
.dark .btn-home:hover { background: rgba(0,255,0,.2); box-shadow: 0 0 8px rgba(0,255,0,.3); }
.dark .server-card { background: rgba(0,20,0,.8); border: 1px solid var(--hacker-accent); color: var(--console-green); box-shadow: 0 0 20px rgba(0,255,65,.1); }
.dark .server-card:hover { box-shadow: 0 0 30px rgba(0,255,65,.2); border-color: var(--console-green); }
.dark .server-name { color: var(--hacker-accent); }
.dark .info-value { color: var(--console-green); }
.dark .info-label { color: var(--hacker-dim); }
.dark .card { background: rgba(0,20,0,.8); border: 1px solid var(--hacker-accent); color: var(--console-green); box-shadow: 0 0 20px rgba(0,255,65,.1); }
.dark .card:hover { box-shadow: 0 0 30px rgba(0,255,65,.2); border-color: var(--console-green); }
.dark .kv b { color: var(--hacker-accent) !important; }
.dark .kv span { color: var(--console-green); }
.dark .metric .label { color: var(--hacker-accent) !important; }
.dark .signals-side .mini .label { color: var(--hacker-accent) !important; }
.dark .barline .mini .label { color: var(--hacker-accent) !important; }
.dark .param-label { color: var(--hacker-accent) !important; }
.dark .progress { border-color: var(--hacker-accent); background: rgba(0,30,0,.3); }
.dark .dbchip { background: rgba(0,40,0,.9); color: var(--console-green); border: 1px solid var(--hacker-dim); }
.dark .pill { background: rgba(0,20,0,.8); border-color: var(--hacker-accent); color: var(--console-green); }
.dark .tuner-links { border-color: var(--hacker-accent); }
.dark .tuner-links-h { color: var(--hacker-accent); }
.dark .tuner-num { color: var(--console-green); }
.dark .tuner-freq { color: var(--hacker-dim); }
.dark .tuner-link.rtsp { background: rgba(0,40,0,.8); color: var(--console-green); border-color: var(--hacker-accent); }
.dark .tuner-link.rtsp:hover { background: rgba(0,255,65,.2); box-shadow: 0 0 8px rgba(0,255,65,.3); }
.dark .tuner-link.http { background: rgba(0,40,0,.8); color: var(--console-green); border-color: var(--hacker-accent); }
.dark .tuner-link.http:hover { background: rgba(0,255,65,.2); box-shadow: 0 0 8px rgba(0,255,65,.3); }
.dark .tuner-link.scan { background: rgba(0,40,0,.8); color: var(--console-green); border-color: var(--hacker-accent); }
.dark .tuner-link.scan:hover { background: rgba(0,255,65,.2); box-shadow: 0 0 8px rgba(0,255,65,.3); }
.dark .copy-notification { background: rgba(0,255,65,.95); color: var(--console-bg); text-shadow: 0 0 2px rgba(0,255,65,.5); }
.dark .copy-notification.error { background: rgba(255,0,0,.95); text-shadow: 0 0 2px rgba(255,0,0,.5); }
.dark .badge { color: var(--console-green); text-shadow: 0 0 5px currentColor; }
.dark .badge.ok { background: rgba(0,255,0,.2); color: var(--console-green); box-shadow: 0 0 10px rgba(0,255,0,.3); }
.dark .badge.down { background: rgba(255,0,0,.2); color: #ff6666; box-shadow: 0 0 10px rgba(255,0,0,.3); }
.dark .clients { border-color: var(--hacker-accent); background: rgba(0,30,0,.2); }
.dark .clients-h { color: var(--hacker-accent) !important; }
.dark .clients-list li { color: var(--console-green); }
.dark .clients-list .ua { color: var(--hacker-accent); }
.dark .clients-list .addr { color: var(--hacker-dim); font-family: 'Monaco', 'Menlo', monospace; }
.dark .hr { background: #4b5563 !important; height: 1px; box-shadow: none !important; }
.dark .sep, .dark .kv .sep { background: #4b5563 !important; box-shadow: none !important; }
.dark input[type=range] { background: rgba(0,40,0,.6) !important; border: 1px solid var(--hacker-accent); }
.dark input[type=range]::-webkit-slider-thumb { background: var(--console-green) !important; border: 2px solid var(--hacker-accent) !important; box-shadow: 0 0 8px rgba(0,255,65,.4) !important; }
.dark input[type=range]::-moz-range-thumb { background: var(--console-green) !important; border: 2px solid var(--hacker-accent) !important; box-shadow: 0 0 8px rgba(0,255,65,.4) !important; }
.dark .palette-btn { background: rgba(0,30,0,.6); color: var(--console-green); border: 1px solid var(--console-green); }
.dark .palette-btn:hover { background: rgba(0,255,0,.2); box-shadow: 0 0 8px rgba(0,255,0,.3); }
.dark .palette-popup { background: rgba(0,20,0,.95); border: 1px solid var(--hacker-accent); box-shadow: 0 0 30px rgba(0,255,65,.2); z-index: 999999; }
.dark .palette-section-title { color: var(--hacker-accent); }
.dark .palette-label { color: var(--console-green); }
.dark .palette-item { border: 1px solid rgba(255,255,255,0.2); }
.dark .palette-item:hover { border-color: var(--hacker-accent); box-shadow: 0 0 8px var(--hacker-accent); }
.dark .palette-item.active { border-color: var(--console-green); box-shadow: 0 0 8px var(--console-green); }

/* Sidebar dark theme styles */
.dark #sidebar { background: rgba(0,20,0,.9) !important; border-right-color: var(--hacker-accent) !important; }
.dark .sidebar-item { background: rgba(0,30,0,.6) !important; border-color: var(--hacker-accent) !important; color: var(--console-green) !important; }
.dark .sidebar-item:hover { background: rgba(0,255,65,.2) !important; color: var(--console-green) !important; box-shadow: 0 0 8px rgba(0,255,65,.3) !important; }
.dark .sidebar-server-item { background: rgba(0,30,0,.6) !important; border-color: var(--hacker-accent) !important; color: var(--console-green) !important; }
.dark .sidebar-server-item:hover { background: rgba(0,255,65,.2) !important; color: var(--console-green) !important; box-shadow: 0 0 8px rgba(0,255,65,.3) !important; }
.dark #sidebar h3 { color: var(--hacker-accent) !important; }
.dark #sidebar h4 { color: var(--hacker-accent) !important; }
.dark #sidebar button[onclick*="openAddModal"] { background: rgba(0,255,65,.3) !important; color: var(--console-green) !important; border-color: var(--hacker-accent) !important; }
.dark #sidebar button[onclick*="openAddModal"]:hover { background: rgba(0,255,65,.5) !important; box-shadow: 0 0 8px rgba(0,255,65,.4) !important; }

/* Loading States */
.loading {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--line);
  border-top: 2px solid var(--light-accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Refresh overlay for index.php (🔄 Refresh Servers URLs and per-server M3U generation) */
.refresh-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.refresh-modal {
  background: var(--card);
  border-radius: 16px;
  padding: 2.2rem 2.4rem;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(37, 99, 235, 0.5);
  max-width: 420px;
  width: 90%;
}

.refresh-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--light-accent);
  margin-bottom: 0.5rem;
}

.refresh-details {
  font-size: 0.95rem;
  color: var(--muted);
  margin-bottom: 1.4rem;
  line-height: 1.5;
}

.refresh-spinner {
  width: 52px;
  height: 52px;
  margin: 0 auto 1.1rem;
  border-radius: 999px;
  border: 4px solid rgba(148, 163, 184, 0.4);
  border-top-color: var(--light-accent);
  animation: spin 0.9s linear infinite;
}

.refresh-progress {
  width: 100%;
  height: 4px;
  background: rgba(148, 163, 184, 0.3);
  border-radius: 2px;
  overflow: hidden;
}

.refresh-progress-bar {
  height: 100%;
  width: 60%;
  background: linear-gradient(90deg, var(--light-accent), var(--light-secondary));
  transition: width 0.3s ease-out;
}

@keyframes progress-fill {
  0% { transform: translateX(-80%); }
  50% { transform: translateX(-10%); }
  100% { transform: translateX(40%); }
}

.dark .refresh-modal {
  background: rgba(0, 20, 0, 0.96);
  border-color: var(--hacker-accent);
}

.dark .refresh-title {
  color: var(--hacker-accent);
}

.dark .refresh-details {
  color: var(--console-green);
}

.fade-in {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Text Selection Styles */
::selection {
  background: rgba(0, 102, 204, 0.3);
  color: #000;
}

::-moz-selection {
  background: rgba(0, 102, 204, 0.3);
  color: #000;
}

/* Dark mode text selection */
.dark ::selection {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* --- Status coloring for BER/CC pills (appended) --- */
.pill.ok { border-color: rgba(16,185,129,.6) !important; color: var(--ok) !important; }
.pill.warn { border-color: rgba(245,158,11,.6) !important; color: var(--warn, #f59e0b) !important; }
.pill.bad { border-color: rgba(239,68,68,.6) !important; color: var(--bad) !important; }
.dark .pill.ok { border-color: var(--ok) !important; color: var(--ok) !important; }
.dark .pill.warn { border-color: var(--warn, #f59e0b) !important; color: var(--warn, #f59e0b) !important; }
.dark .pill.bad { border-color: var(--bad) !important; color: var(--bad) !important; }

/* Separator directly under SNR row */
.barline.sep { border-bottom: 1px solid var(--line); padding-bottom: 4px; }

.dark ::-moz-selection {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* Ensure light theme text is always black when selected */
html:not(.dark) ::selection {
  color: #000 !important;
}

html:not(.dark) ::-moz-selection {
  color: #000 !important;
}


/* Responsive Design */
/* New breakpoints to prevent tuner bars from covering the system column */
@media (max-width: 1400px) {
  .section-four-columns { grid-template-columns: minmax(260px, 1.1fr) minmax(360px, 1.8fr) minmax(240px, 1.1fr) 80px; gap: 8px 12px; }
  .metric .label { font-size: 9px; }
  .progress { height: 12px; }
}
@media (max-width: 1200px) {
  .section-four-columns { grid-template-columns: minmax(240px, 1.05fr) minmax(320px, 1.7fr) minmax(220px, 1.1fr) 72px; gap: 8px 10px; }
  .kv { grid-template-columns: 105px 1fr; }
  .pill { font-size: 10px !important; }
  .progress { height: 10px; }
}
@media (max-width: 1040px) {
  .section-four-columns { grid-template-columns: minmax(220px, 1fr) minmax(300px, 1.5fr) minmax(200px, 1fr) 64px; gap: 8px 8px; }
  .kv { grid-template-columns: 100px 1fr; }
  .progress { height: 9px; }
}

@media (max-width: 768px) {
  .server-grid { grid-template-columns: 1fr; }
  .header-content { flex-direction: column; text-align: center; }
  .server-info { grid-template-columns: 1fr 1fr; }
  /* Mobile controls layout */
  .controls { grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 8px; padding: 8px; }
  .controls .left { justify-self: center; font-size: 13px; order: 1; }
  .controls .groups { justify-self: center; order: 2; }
  .controls .theme-controls { justify-self: center; order: 3; }
}

.section { grid-template-columns: 1fr; gap: 1rem; }
}