/* Multicaster User Panel — theme.
   Theming rule: EVERY surface/text colour comes from a CSS variable.
   :root is the dark theme (the product default, matching the original
   Multicaster screenshots). body.light is a complete light theme — every
   variable is redefined there, so no dark surface or dark text can leak
   into light mode (and vice versa). The only hardcoded colours left are
   accents that are identical in both modes (purple/green/red/orange/
   blue), the video-thumbnail gradients, and intentionally black video /
   monitor / code areas, which keep light text on black in both modes. */
:root{
  color-scheme:dark;
  --bg:#0f172a; --panel:#1e293b; --panel2:#16223a;
  --text:#e5e7eb; --muted:#94a3b8; --line:#243145;
  --sidebar-bg:#0a0f1e; --sidebar-text:#e5e7eb; --sidebar-muted:#94a3b8;
  --topbar-bg:#0d1526;
  --card-bg:#1b2942; --card-bg2:#16223a;
  --input-bg:#0b1526;
  --banner-bg:#2a1a4a; --banner-bg2:#1e293b;
  --tip-bg:#2a1a4a; --tip-text:#e5e7eb;
  --pro-bg:#292524; --pro-text:#fde68a;
  --note-bg:#1f2937; --note-text:#e5e7eb;
  --bar-bg:#1e293b; --menu-bg:#0b1526;
  --table-head-bg:#312e81;
  --link:#a78bfa; --heading-accent:#c4b5fd;
  --danger:#f87171; --red-border:#7f1d1d;
  --green-text:#4ade80; --red-text:#f87171;
  --badge-purple-text:#c4b5fd;
  --error-bg:#450a0a; --error-text:#fca5a5;
  --success-bg:#052e16; --success-text:#86efac;
  --code-bg:#000000; --code-text:#a5f3fc;
  --map-bg:#bcd9ea; --map-land:#eef6f8; --map-stroke:#9cc3d8; --map-text:#334155;
  --map-dark-bg:#0b1526; --map-dark-land:#1e3a5f; --map-dark-stroke:#2f5d8a; --map-dark-text:#94a3b8;
  --purple:#8b5cf6; --green:#22c55e; --red:#ef4444; --orange:#f97316; --blue:#3b82f6;
}
body.light{
  color-scheme:light;
  --bg:#eef2f7; --panel:#ffffff; --panel2:#f1f5f9;
  --text:#111827; --muted:#64748b; --line:#e2e8f0;
  --sidebar-bg:#ffffff; --sidebar-text:#111827; --sidebar-muted:#64748b;
  --topbar-bg:#ffffff;
  --card-bg:#ffffff; --card-bg2:#f8fafc;
  --input-bg:#ffffff;
  --banner-bg:#ede9fe; --banner-bg2:#f5f3ff;
  --tip-bg:#ede9fe; --tip-text:#1e1b4b;
  --pro-bg:#fef3c7; --pro-text:#451a03;
  --note-bg:#fffbeb; --note-text:#451a03;
  --bar-bg:#e2e8f0; --menu-bg:#ffffff;
  --table-head-bg:#312e81;
  --link:#6d28d9; --heading-accent:#6d28d9;
  --danger:#dc2626; --red-border:#fecaca;
  --green-text:#15803d; --red-text:#dc2626;
  --badge-purple-text:#6d28d9;
  --error-bg:#fee2e2; --error-text:#7f1d1d;
  --success-bg:#dcfce7; --success-text:#14532d;
  --code-bg:#0f172a; --code-text:#a5f3fc;
  --map-bg:#bcd9ea; --map-land:#eef6f8; --map-stroke:#9cc3d8; --map-text:#334155;
  --map-dark-bg:#bcd9ea; --map-dark-land:#eef6f8; --map-dark-stroke:#9cc3d8; --map-dark-text:#334155;
}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline}
.sidebar{position:fixed;left:0;top:0;bottom:0;width:240px;background:var(--sidebar-bg);color:var(--sidebar-text);border-right:1px solid var(--line);overflow:auto;padding:16px 12px;z-index:20}
.logo{font-size:26px;font-weight:800;padding:6px 8px 16px;letter-spacing:-.5px}.logo-multi{color:#3b82f6}.logo-cast{color:#f97316}
.nav-group{font-size:11px;letter-spacing:1px;color:var(--sidebar-muted);padding:16px 8px 6px}
.nav-item{display:flex;gap:8px;padding:9px 10px;border-radius:8px;color:var(--sidebar-text);text-decoration:none}
.nav-item.active{background:var(--purple);color:#fff}.nav-item:hover{background:var(--panel2);text-decoration:none}
.nav-item.logout{color:var(--danger)}
.sidebar-footer{margin-top:20px;border-top:1px solid var(--line);padding-top:12px}
.storage{color:var(--sidebar-text);font-size:13px}
.theme-btn,.btn{background:var(--panel2);border:1px solid var(--line);color:var(--text);padding:8px 12px;border-radius:8px;cursor:pointer;text-decoration:none;display:inline-block}
.theme-btn{width:100%;text-align:left;margin-bottom:10px}
.btn.purple{background:var(--purple);border-color:var(--purple);color:#fff}.btn.red{color:var(--red-text);border-color:var(--red-border)}.btn.green{color:var(--green-text)}
.btn-stop{background:#dc2626;border-color:#dc2626;color:#fff}.btn-restart{background:#f97316;border-color:#f97316;color:#fff}.btn-next{background:#8b5cf6;border-color:#8b5cf6;color:#fff}.btn-reload{background:#2563eb;border-color:#2563eb;color:#fff}.btn-live{background:transparent;border-color:#22c55e;color:var(--green-text)}
.stream-btns{display:flex;gap:8px;flex-wrap:wrap}
.main{margin-left:240px}.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid var(--line);background:var(--topbar-bg);position:sticky;top:0;z-index:10}
.top-right{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.pill{background:var(--panel);border:1px solid var(--line);padding:6px 10px;border-radius:20px;font-size:13px}.pill.online{color:var(--green-text)}
.bell{position:relative;text-decoration:none;font-size:18px}.bell b{position:absolute;top:-8px;right:-8px;background:var(--red);color:#fff;font-size:11px;border-radius:50%;padding:1px 5px}
.profile{background:var(--panel);border:1px solid var(--line);padding:6px 10px;border-radius:20px}
.content{padding:20px}.banner{background:linear-gradient(90deg,var(--banner-bg),var(--banner-bg2));border:1px solid var(--purple);padding:12px;border-radius:10px;margin-bottom:16px}
.card{background:linear-gradient(180deg,var(--card-bg),var(--card-bg2));border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:16px}
.card h2{margin:0 0 12px;font-size:18px}.card h3{margin:14px 0 8px;font-size:15px;color:var(--heading-accent)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:16px}
.stat{padding:16px;border-radius:14px;background:linear-gradient(180deg,var(--card-bg),var(--card-bg2));border:1px solid var(--line);display:flex;gap:12px;align-items:center}
.stat .icon{width:48px;height:48px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;color:#fff}
.stat .icon.purple{background:#8b5cf6}.stat .icon.green{background:#16a34a}.stat .icon.blue{background:#2563eb}.stat .icon.orange{background:#f97316}
.stat b{font-size:28px;display:block;line-height:1.1}.stat span{color:var(--muted);font-size:13px}
input,select,textarea{width:100%;background:var(--input-bg);border:1px solid var(--line);color:var(--text);padding:9px 10px;border-radius:8px;margin:4px 0 10px}
input[type=checkbox],input[type=radio]{width:auto;margin:0 6px 0 0}
label{font-size:13px;color:var(--muted)}
.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;min-width:560px}th{background:var(--table-head-bg);color:#fff;text-align:left;padding:9px}td{padding:9px;border-bottom:1px solid var(--line);vertical-align:top}
.badge{display:inline-block;padding:3px 8px;border-radius:20px;font-size:12px;background:var(--panel2);border:1px solid var(--line)}.badge.green{color:var(--green-text)}.badge.purple{color:var(--badge-purple-text)}
.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.video-card{background:var(--panel2);border:1px solid var(--line);border-radius:12px;overflow:hidden;position:relative}
.video-card.selected{outline:2px solid var(--purple)}
.thumb{height:150px;display:flex;align-items:center;justify-content:center;font-size:40px;position:relative;color:#fff}
.thumb-g1{background:linear-gradient(135deg,#312e81,#7c3aed,#0ea5e9)}.thumb-g2{background:linear-gradient(135deg,#065f46,#059669,#0ea5e9)}.thumb-g3{background:linear-gradient(135deg,#7c2d12,#ea580c,#f59e0b)}.thumb-g4{background:linear-gradient(135deg,#831843,#db2777,#8b5cf6)}
.thumb .dur{position:absolute;right:8px;bottom:8px;background:#000;padding:2px 7px;border-radius:6px;font-size:12px}
.vid-check{position:absolute;left:8px;top:8px;width:20px;height:20px;accent-color:var(--purple)}
.dots{position:absolute;right:8px;top:8px;background:#000;border:0;color:#fff;border-radius:50%;width:30px;height:30px;cursor:pointer}
.vid-menu{display:none;position:absolute;right:8px;top:42px;background:var(--menu-bg);border:1px solid var(--line);border-radius:8px;z-index:5;min-width:170px}
.vid-menu.open{display:block}.vid-menu a,.vid-menu button{display:block;width:100%;text-align:left;padding:9px 12px;background:none;border:0;color:var(--text);cursor:pointer;text-decoration:none}
.vid-menu button:hover,.vid-menu a:hover{background:var(--panel2)}
.bulk-bar{display:flex;gap:10px;align-items:center;border:1px solid rgba(239,68,68,.65);border-radius:10px;padding:10px 14px;margin-bottom:14px;background:var(--panel)}
.tip{background:var(--tip-bg);color:var(--tip-text);border-left:4px solid var(--purple);padding:10px 12px;border-radius:6px;margin:10px 0}
.pro{background:var(--pro-bg);color:var(--pro-text);border-left:4px solid #f59e0b;padding:10px 12px;border-radius:6px;margin:10px 0}
.note{background:var(--note-bg);color:var(--note-text);border-left:4px solid #f59e0b;padding:10px 12px;border-radius:6px;margin:10px 0}
.folders{display:flex;flex-direction:column;gap:4px}.folders a{color:var(--text);text-decoration:none;padding:8px;border-radius:8px;display:flex;justify-content:space-between}
.folders a.active{background:var(--purple);color:#fff}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}.two-narrow{display:grid;grid-template-columns:260px 1fr;gap:16px}.guide-wrap{display:grid;grid-template-columns:240px 1fr;gap:16px}
.guide-nav{position:sticky;top:80px;align-self:start;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px}
.guide-nav a{display:block;padding:7px 8px;color:var(--text);text-decoration:none;border-radius:6px}.guide-nav a:hover{background:var(--panel2)}
.monitor{aspect-ratio:16/9;background:#000;border:2px solid var(--green);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#94a3b8;overflow:hidden;position:relative}
.monitor.red{border-color:var(--red)}.monitor video{width:100%;height:100%;object-fit:cover}
.player-wrap{position:relative;aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden}.player-wrap video{width:100%;height:100%;object-fit:cover}
.ov-ticker{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.65);color:#fff;padding:6px 10px;overflow:hidden;white-space:nowrap}.ov-ticker span{display:inline-block;animation:tick 15s linear infinite}
@keyframes tick{from{transform:translateX(100%)}to{transform:translateX(-100%)}}
.ov-text{position:absolute;left:12px;top:12px;background:rgba(0,0,0,.55);color:#fff;padding:6px 10px;border-radius:6px}
.ov-watermark{position:absolute;right:12px;top:12px;background:rgba(0,0,0,.45);color:#fff;padding:4px 8px;border-radius:6px;font-size:13px}
.ov-datetime{position:absolute;right:12px;bottom:28px;color:#fff;text-shadow:0 1px 3px #000;font-size:13px}
.code{background:var(--code-bg);color:var(--code-text);padding:12px;border-radius:8px;overflow:auto;white-space:pre-wrap;font-family:monospace;font-size:13px}
.page-footer{text-align:center;color:var(--muted);padding:20px;border-top:1px solid var(--line)}
.hamburger{display:none;position:fixed;top:10px;left:10px;z-index:30;background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:9px;width:42px;height:42px;font-size:22px;cursor:pointer}
.backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:15}.backdrop.show{display:block}
.bar{height:8px;background:var(--bar-bg);border-radius:4px;overflow:hidden;margin-top:6px}.bar i{display:block;height:100%;background:var(--purple)}
.bar.red i{background:#ef4444}.bar.green i{background:#22c55e}
.auth{max-width:420px;margin:60px auto;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:24px}
.error{background:var(--error-bg);color:var(--error-text);border:1px solid var(--red);padding:10px;border-radius:8px;margin-bottom:12px}
.success{background:var(--success-bg);color:var(--success-text);border:1px solid var(--green);padding:10px;border-radius:8px;margin-bottom:12px}
.map-wrap{position:relative;background:var(--map-bg);border-radius:10px;overflow:hidden;min-height:300px}
.map-svg{width:100%;height:auto;display:block}.map-dot{fill:#ef4444;stroke:#fff;stroke-width:2}
.copy-row{display:flex;gap:8px;align-items:center}.copy-row input{margin:0}.copy-btn{flex-shrink:0}
.secret-row{display:flex;gap:8px;align-items:center}.secret-row input{margin:0}
.chart{display:flex;gap:6px;align-items:end;height:120px}.chart .bar-col{flex:1;background:#8b5cf6;border-radius:4px 4px 0 0;min-height:4px}
/* Dashboard (image-6) — header rows, announcement banner, current-video
   row, meter rows, label + pill + copy rows, Leaflet map grid, viewer
   list, real thumbnails, offline preview. Scoped to .dash-* classes. */
.dash-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}.dash-head h2{margin:0}.dash-head h3{margin:0}
.dash-announce{display:flex;gap:10px;background:#1e3a5f;border:1px solid #2563eb;border-radius:10px;padding:12px 14px;margin-bottom:16px}.dash-announce-icon{font-size:18px}.dash-announce p{margin:2px 0}
.dash-current{display:flex;gap:12px;align-items:center;background:var(--panel2);border-radius:10px;padding:10px;margin-bottom:12px}
.dash-current-thumb{width:110px;height:70px;flex-shrink:0;border-radius:8px;object-fit:cover}
.dash-meter{display:flex;justify-content:space-between;color:var(--muted);font-size:13px}
.dash-info{display:grid;grid-template-columns:130px 1fr auto auto;gap:8px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}.dash-info span:first-child{color:var(--muted)}
.dash-pill{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-pill-input{background:transparent;border:0;color:var(--text);padding:0;margin:0;width:100%;font-size:13px}
.dash-map-grid{display:grid;grid-template-columns:1fr 280px;gap:16px}
.dash-viewer{border-bottom:1px solid var(--line);padding:10px 0}.dash-viewer p{margin:2px 0}
.dash-thumb-img{width:100%;height:150px;object-fit:cover;display:block;position:relative}
.video-card .dur{position:absolute;right:8px;bottom:8px;background:#000;color:#fff;padding:2px 7px;border-radius:6px;font-size:12px}
.dash-offline{display:flex;align-items:center;justify-content:center;background:#000}.dash-offline-inner{display:flex;flex-direction:column;align-items:center;gap:8px;color:#94a3b8;font-size:32px}.dash-offline-inner span{font-size:14px}
@media(max-width:900px){.dash-map-grid{grid-template-columns:1fr}.dash-info{grid-template-columns:110px 1fr auto}}
@media(max-width:900px){.two,.two-narrow,.guide-wrap{grid-template-columns:1fr}}
@media(max-width:800px){.sidebar{transform:translateX(-100%);transition:transform .2s}.sidebar.open{transform:none}.main{margin-left:0}.hamburger{display:block}.topbar{padding-left:58px}.guide-nav{position:static}}
@media(max-width:700px){.grid{grid-template-columns:1fr 1fr}.content{padding:12px}table{min-width:480px}}

/* Mixer — full-screen studio (no sidebar). All colours come from the
   theme variables, so dark (default) and light both stay readable.
   Black monitor areas keep light text in both modes, as in the original. */
.mx{min-height:100vh;background:var(--bg);color:var(--text);padding:10px 12px;display:flex;flex-direction:column;gap:10px}
.mx a{color:var(--link)}
.mx-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.mx-toolform{display:flex}
.mx-toolbar select{background:var(--input-bg);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin:0;width:auto;max-width:180px}
.mx-tbtn{background:var(--panel2);border:1px solid var(--line);color:var(--text);padding:8px 12px;border-radius:8px;cursor:pointer;text-decoration:none;display:inline-block;font-size:14px;white-space:nowrap}
.mx-tbtn.green{background:#16a34a;border-color:#16a34a;color:#fff}.mx-tbtn.orange{background:#f97316;border-color:#f97316;color:#fff}
.mx-tbtn.blue{background:#2563eb;border-color:#2563eb;color:#fff}.mx-tbtn.purple{background:#7c3aed;border-color:#7c3aed;color:#fff}
.mx-tbtn.red{background:#dc2626;border-color:#dc2626;color:#fff}
.mx-tbtn.on{outline:2px solid var(--purple)}
.mx-spacer{flex:1}
.mx-online{color:var(--green-text);border:1px solid var(--line);border-radius:20px;padding:6px 12px;font-size:13px;background:var(--panel2)}
.mx-rec{border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-weight:700;color:var(--muted);background:var(--panel2)}
.mx-rec.on{background:#dc2626;border-color:#dc2626;color:#fff}
.mx-flash{padding:10px 14px;border-radius:10px;background:var(--success-bg);color:var(--success-text);border:1px solid var(--line)}
.mx-flash.error{background:var(--error-bg);color:var(--error-text)}
.mx-notice{padding:10px 14px;border-radius:10px;background:var(--note-bg);color:var(--note-text);border:1px solid var(--line)}
.mx-monitors{display:grid;grid-template-columns:1fr 190px 1fr;gap:12px;align-items:start}
.mx-monitor{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.mx-mon-head{display:flex;justify-content:space-between;gap:10px;background:#15803d;color:#fff;padding:8px 12px;font-weight:700}
.mx-mon-head.red{background:#b91c1c}
.mx-mon-title{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mx-mon-title.red{color:#fca5a5}
.mx-screen{position:relative;aspect-ratio:16/9;background:#000;display:flex;align-items:center;justify-content:center}
.mx-screen video{width:100%;height:100%;object-fit:cover;display:block}
.mx-empty{text-align:center;color:#94a3b8}
.mx-empty-icon{font-size:52px;margin-bottom:8px}
.mx-empty-sub{font-size:13px;color:#64748b}
.mx-timeline{display:flex;gap:10px;align-items:center;padding:8px 12px;font-size:12px;color:var(--muted)}
.mx-progress{flex:1;height:6px;background:var(--bar-bg);border-radius:3px;overflow:hidden}
.mx-progress i{display:block;height:100%;background:#22c55e}
.mx-progress.red i{background:linear-gradient(90deg,#ef4444,#f97316)}
.mx-mid{display:flex;flex-direction:column;gap:8px;align-items:stretch}
.mx-big{width:100%;padding:12px;border:0;border-radius:10px;color:#fff;font-weight:700;font-size:15px;cursor:pointer}
.mx-big.green{background:#16a34a}.mx-big.red{background:#dc2626}.mx-big.blue{background:#2563eb}.mx-big.purple{background:#8b5cf6}
.mx-mid form{margin:0}.mx-mid form .mx-big{width:100%}
.mx-sources{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.mx-src{aspect-ratio:1;border:0;border-radius:10px;color:#fff;font-weight:800;font-size:18px;cursor:pointer}
.mx-src.empty{opacity:.35;cursor:default}
.mx-src.active{outline:3px solid #fff}
.mx-vert{writing-mode:vertical-lr;direction:rtl;width:26px;height:110px;accent-color:#22c55e;margin:0 auto}
.mx-clock{background:var(--panel);border:1px solid var(--line);border-radius:10px;text-align:center;padding:10px}
.mx-clock div:first-child{color:#22c55e;font-size:26px;font-weight:800;font-family:monospace}
.mx-clock-ampm{color:var(--muted);font-size:13px}
.mx-note{color:var(--muted);font-size:13px;margin:0}
.mx-muted{color:var(--muted);font-size:13px}
.mx-lower{display:grid;grid-template-columns:1fr 230px;gap:12px;align-items:stretch}
.mx-bottom{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.mx-tabs{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding:6px 8px 0}
.mx-tab{background:none;border:0;border-bottom:3px solid transparent;color:var(--muted);padding:8px 12px;cursor:pointer;font-size:14px}
.mx-tab.active{color:var(--text);border-bottom-color:var(--purple);font-weight:700}
.mx-panels{padding:12px;display:flex;flex-wrap:wrap;gap:12px;min-height:170px;align-content:flex-start}
.mx-panel{display:none;flex-wrap:wrap;gap:12px;width:100%}
.mx-panel.active{display:flex}
.mx-card{width:220px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.mx-card-thumb{height:110px;display:flex;align-items:center;justify-content:center;font-size:32px;position:relative;color:#fff}
.mx-card-thumb.thumb-g1{background:linear-gradient(135deg,#312e81,#7c3aed,#0ea5e9)}.mx-card-thumb.thumb-g2{background:linear-gradient(135deg,#065f46,#059669,#0ea5e9)}.mx-card-thumb.thumb-g3{background:linear-gradient(135deg,#7c2d12,#ea580c,#f59e0b)}.mx-card-thumb.thumb-g4{background:linear-gradient(135deg,#831843,#db2777,#8b5cf6)}
.mx-card-num{position:absolute;left:8px;top:8px;background:#dc2626;color:#fff;font-size:13px;font-weight:700;border-radius:6px;padding:2px 8px}
.mx-card-dur{position:absolute;right:8px;bottom:8px;background:#000;color:#fff;font-size:12px;border-radius:6px;padding:2px 7px}
.mx-card-body{padding:10px;display:flex;flex-direction:column;gap:6px}
.mx-card-body strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mx-card-btns{display:flex;flex-wrap:wrap;gap:6px}
.mx-card-btns button{background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:7px;padding:6px 9px;cursor:pointer;font-size:12px}
.mx-card-btns button.on{background:var(--purple);color:#fff}
.mx-rtmp{display:flex;flex-direction:column;gap:4px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:12px;min-width:260px}
.mx-rtmp code{background:#000;color:#a5f3fc;padding:6px 8px;border-radius:6px;font-size:12px;overflow:auto}
.mx-audio{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:10px}
.mx-audio h3{margin:0;font-size:15px}
.mx-chan-row{display:flex;gap:10px;justify-content:space-around}
.mx-chan{display:flex;flex-direction:column;align-items:center;gap:6px}
.mx-chan-tag{background:#14532d;color:#4ade80;font-size:11px;font-weight:700;border-radius:5px;padding:2px 7px}
.mx-chan:nth-child(2) .mx-chan-tag{background:#7f1d1d;color:#fca5a5}
.mx-chan:nth-child(3) .mx-chan-tag{background:#713f12;color:#fcd34d}
.mx-meter{width:10px;height:110px;background:var(--bar-bg);border-radius:5px;overflow:hidden;display:flex;align-items:flex-end}
.mx-meter i{display:block;width:100%;background:linear-gradient(180deg,#ef4444,#facc15 35%,#22c55e 70%)}
.mx-chan-val{font-size:12px;color:var(--muted)}
.mx-chan-btns{display:flex;gap:4px}
.mx-chan-btns button{background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:6px;width:28px;height:26px;cursor:pointer}
.mx-chan-btns button.on{background:var(--purple);color:#fff}
.mx-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.mx-addtext{display:flex;gap:8px;flex:1;min-width:260px}
.mx-addtext input{margin:0;flex:1}
.mx-status{display:flex;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:13px;padding:2px 4px}
.mx-status strong{color:var(--text)}
.mx-footer{text-align:center;color:var(--muted);font-size:13px;padding:4px 0 8px}
@media(max-width:900px){.mx-monitors{grid-template-columns:1fr}.mx-lower{grid-template-columns:1fr}.mx-mid{flex-direction:row;flex-wrap:wrap}.mx-big{flex:1;min-width:120px}.mx-clock{flex:1;min-width:140px}}

/* Bootstrap Icons sizing for the shell + dashboard headings. Appended only;
   no existing rule or theme variable above was changed. */
.nav-item i.bi{font-size:16px;line-height:1;align-self:center;flex-shrink:0}
.topbar i.bi{font-size:16px;line-height:1;vertical-align:-2px}
.topbar .bell i.bi{font-size:18px;vertical-align:middle}
.topbar .profile i.bi{font-size:17px}
.theme-btn i.bi{font-size:15px;vertical-align:-2px;margin-right:4px}
.card h2 i.bi,.dash-head h2 i.bi{font-size:18px;line-height:1;vertical-align:-2px;margin-right:4px}
.dash-head h3 i.bi{font-size:16px;line-height:1;vertical-align:-2px;margin-right:4px}
.stat .icon i.bi{font-size:22px;line-height:1}
.dash-announce-icon i.bi{font-size:18px;line-height:1}
.dash-offline-inner i.bi{font-size:32px;line-height:1}
.dash-viewer i.bi{font-size:13px;vertical-align:-1px}
.btn i.bi{font-size:15px;line-height:1;vertical-align:-2px}
/* Public page + language switch (standalone public player uses inline
   background/colour, but keeps these shared classes for consistency). */
.lang-switch a{padding:2px 3px;font-size:16px;line-height:1}

/* Relax Channel — appended only; no existing rule or theme variable above
   was changed. The stage itself is intentionally dark in both themes
   (like a video area), while the controls and text around it use the
   theme variables so they stay readable in dark and light mode. */
.relax-stage{position:relative;width:100%;aspect-ratio:16/9;background:linear-gradient(135deg,#0b1220,#1e3a5f 55%,#0f172a);border-radius:12px;overflow:hidden;font-family:Georgia,'Times New Roman',serif;color:#fff}
.relax-stage.relax-full{aspect-ratio:auto;height:100vh;border-radius:0}
.relax-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease}
.relax-bg.active{opacity:1}
.relax-bg-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;background:linear-gradient(135deg,#0b1220,#1e3a5f 55%,#0f172a)}
.relax-bg-empty p{color:#cbd5e1;font-size:18px;max-width:520px}
.relax-logo{position:absolute;top:5%;left:5%;color:#f5c542;font-style:italic;font-weight:700;font-size:clamp(28px,4vw,58px);letter-spacing:1px;text-shadow:0 3px 12px rgba(0,0,0,.65);transform:rotate(-2deg);z-index:3}
.relax-headline{position:absolute;top:5%;right:5%;text-align:right;text-shadow:0 2px 10px rgba(0,0,0,.7);z-index:3}
.relax-kicker{font-size:clamp(13px,1.4vw,22px);font-style:italic}
.relax-title{font-size:clamp(22px,3.4vw,52px);letter-spacing:2px;margin:4px 0}
.relax-sub{font-size:clamp(13px,1.4vw,22px);font-style:italic;color:#f3e9c8}
.relax-lower{position:absolute;left:5%;right:5%;bottom:6%;display:flex;align-items:center;gap:18px;padding:14px 20px;background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.45) 70%,rgba(0,0,0,.15));border-radius:4px;z-index:3}
.relax-thumb{width:110px;height:84px;flex:0 0 110px;background:linear-gradient(135deg,#2b3a55,#0f1c2e);color:#fff;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:700;border:2px solid rgba(255,255,255,.25);overflow:hidden}
.relax-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.relax-song-title{font-size:clamp(20px,2.6vw,40px);text-shadow:0 2px 8px rgba(0,0,0,.8)}
.relax-song-artist{font-size:clamp(16px,2vw,30px);margin-top:4px;text-shadow:0 2px 8px rgba(0,0,0,.8)}
.relax-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px}
.relax-public-controls{position:absolute;left:50%;bottom:18%;transform:translateX(-50%);display:flex;gap:10px;z-index:4}
.relax-play-big{font-size:18px;padding:10px 22px}
@media(max-width:700px){.relax-thumb{width:72px;height:56px;flex-basis:72px;font-size:22px}.relax-lower{gap:10px;padding:10px 12px}.relax-public-controls{bottom:24%}}