/* Shared console chrome for both pages: navbar, segments, buttons, inputs,
   setting rows and toggles. Colours, radii, shadows and type are Semantic UI
   2.5's own values (button/segment/label/message/input/menu/table variables),
   so the pages read as native Semantic without shipping the framework -- the
   console runs on a robot that is often off the internet. Keep new rules on
   Semantic values rather than inventing gradients or lifts: Semantic surfaces
   are flat. Page-specific rules live in simple.css and advanced.css. */
:root {
  color-scheme: light;
  --page-bg: #f7f7f7;
  --surface: #ffffff;
  --border: rgba(34,36,38,.15);
  --hairline: rgba(34,36,38,.1);
  --text: rgba(0,0,0,.87);
  --text-muted: rgba(0,0,0,.6);
  --text-faint: rgba(0,0,0,.4);
  --primary: #2185d0;
  --primary-hover: #1678c2;
  --primary-active: #1a69a4;
  --primary-tint: #f8ffff;
  --primary-border: #a9d5de;
  --focus-border: #85b7d9;
  --positive: #21ba45;
  --positive-hover: #16ab39;
  --positive-tint: #fcfff5;
  --positive-text: #2c662d;
  --positive-border: #a3c293;
  --negative: #db2828;
  --negative-hover: #d01919;
  --negative-tint: #fff6f6;
  --negative-text: #9f3a38;
  --negative-border: #e0b4b4;
  --warning: #b58105;
  --warning-tint: #fffaf3;
  --warning-text: #573a08;
  --warning-border: #c9ba9b;
  --grey-button: #e0e1e2;
  --grey-button-hover: #cacbcd;
  --grey-button-active: #babbbc;
  --nav-height: 60px;
  --radius: .28571429rem;
  --shadow-sm: 0 1px 2px 0 rgba(34,36,38,.15);
  --shadow-md: 0 2px 4px 0 rgba(34,36,38,.12), 0 2px 10px 0 rgba(34,36,38,.15);
  /* Latin faces first, then a CJK face per platform: without one named,
     Chinese text falls back to whatever the browser picks for the last
     generic family, which on Windows is often a serif Song face. */
  --font: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
[hidden] { display: none !important; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--page-bg); color: var(--text); font: 14px/1.4285em var(--font); padding-top: var(--nav-height); -webkit-font-smoothing: antialiased; }
h1,h2,h3,p { margin: 0; }
h1,h2,h3 { font-weight: 700; line-height: 1.28571429em; }
button, input, select { font: inherit; color: inherit; }

/* ---------- Navbar ---------- */
#navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--nav-height); background: transparent; border-bottom: 1px solid transparent; transition: background-color .22s ease, border-color .22s ease, box-shadow .22s ease; }
#navbar.scrolled { background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom-color: var(--border); box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.04); }
.nav-inner { height: 100%; max-width: 1320px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 24px; }
.nav-brand { display: flex; align-items: baseline; gap: 8px; font-size: 17px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.nav-brand small { font-size: 11px; font-weight: 600; color: var(--text-faint); letter-spacing: .02em; }
/* The brand dot is the connection indicator -- its colour is the only cue,
   so it stays to the small set below rather than growing a shade per state. */
.brand-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px #eaf4fc; transition: background-color .2s ease, box-shadow .2s ease; }
.brand-dot.online { background: var(--positive); box-shadow: 0 0 0 3px #e7f8ec; }
.brand-dot.syncing, .brand-dot.protected, .brand-dot.reconnecting { background: var(--warning); box-shadow: 0 0 0 3px #fdf6e3; }
.brand-dot.paused { background: var(--text-faint); box-shadow: 0 0 0 3px rgba(0,0,0,.06); }
.brand-dot.waiting { background: var(--negative); box-shadow: 0 0 0 3px #fdedec; }
/* The logo carries the connection dot as a corner badge, so the brand reads as
   one mark instead of a dot and a picture sitting side by side. .nav-brand
   aligns its children on their baselines, which would hang the wordmark off
   the top of the taller logo; the pair is centred instead, and the wordmark
   keeps its own inline baseline for the trailing <small>. */
.brand-mark { position: relative; flex: none; align-self: center; display: inline-flex; }
.brand-text { align-self: center; }
.brand-mark img { display: block; width: 28px; height: 28px; }
.brand-mark .brand-dot { position: absolute; right: 0; bottom: 1px; }
/* Wide bars lay the tabs and the status pills out inline; `display: contents`
   keeps them direct flex children of .nav-inner so the menu wrapper itself has
   no effect until the narrow layout turns it into a dropdown. */
.nav-menu { display: contents; }
.nav-toggle { display: none; }
.nav-tabs { display: flex; gap: 4px; margin-left: 4px; }
.tab { border: 0; background: none; color: var(--text-muted); padding: 8px 16px; border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 600; transition: background-color .15s, color .15s; }
.tab:hover { background: rgba(0,0,0,.045); color: var(--text); }
.tab.active { color: #fff; background: var(--primary); }
.tab:focus-visible { outline: 2px solid var(--focus-border); outline-offset: 2px; }
.nav-status { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.battery-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(0,0,0,.045); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 12px; white-space: nowrap; }
.battery-icon { position: relative; display: inline-block; width: 20px; height: 11px; flex: none; border: 1.5px solid var(--text-muted); border-radius: 2px; }
.battery-icon::after { content: ''; position: absolute; top: 2.5px; right: -4px; width: 2.5px; height: 4px; background: var(--text-muted); border-radius: 0 1px 1px 0; }
.battery-fill { display: block; height: 100%; width: 0; background: var(--positive); }
.battery-pill.battery-mid .battery-fill { background: var(--warning); }
.battery-pill.battery-low .battery-fill { background: var(--negative); }
.battery-pill.battery-low b { color: var(--negative); }
/* The charge glyph sits inside the battery icon itself. */
.battery-bolt { display: none; position: absolute; top: 50%; left: 50%; width: 6px; height: 9px; transform: translate(-50%, -50%); background: #fff; clip-path: polygon(58% 0%, 0% 58%, 38% 58%, 28% 100%, 100% 34%, 52% 34%); filter: drop-shadow(0 0 .5px rgba(0,0,0,.45)); }
.battery-pill.battery-charging .battery-bolt { display: block; animation: battery-bolt-pulse 1.6s ease-in-out infinite; }
@keyframes battery-bolt-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------- Layout ---------- */
main { max-width: 1320px; margin: 0 auto; padding: 20px 24px 40px; }
.panel { display: none; }
.panel.active { display: block; }
/* Semantic segment: flat white, hairline border, one soft shadow, no hover. */
.segment { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1em; margin-bottom: 16px; }
.segment:last-child { margin-bottom: 0; }
.segment-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; min-height: 30px; }
.segment-header h3 { font-size: 16px; font-weight: 700; }
.segment-actions { display: flex; align-items: center; gap: 8px; min-width: 0; }
.meta-text { color: var(--text-faint); font-size: 12px; font-variant-numeric: tabular-nums; }
.meta-strong { color: var(--text-muted); font-weight: 700; }

/* ---------- Setting rows ---------- */
/* Settings share one section, a row each, divided by rules. A slider row puts
   its value beside the label; a switch row toggles only on the switch itself. */
.setting-item { padding: 14px 0; }
.setting-item:last-child { padding-bottom: 2px; }
.segment-header + .setting-item { padding-top: 0; }
.setting-item + .setting-item { border-top: 1px solid var(--border); }
.setting-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 31px; }
.setting-item > input[type=range] { display: block; margin: 10px 0 4px; }
.setting-label { font-size: 15px; font-weight: 600; color: var(--text); }
/* An iOS-style switch: green when on, the knob stretching while pressed. */
.toggle-switch { flex: none; position: relative; width: 51px; height: 31px; }
.toggle-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.toggle-switch input:disabled { cursor: not-allowed; }
.toggle-switch i { position: absolute; inset: 0; border-radius: 16px; background: #e2e3e5; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); transition: background-color .2s ease, opacity .2s ease; pointer-events: none; }
.toggle-switch i:after { content: ""; position: absolute; left: 2px; top: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.15), 0 1px 1px rgba(0,0,0,.16); transition: transform .22s cubic-bezier(.3,.7,.4,1); }
.toggle-switch input:checked + i { background: var(--positive); }
.toggle-switch input:checked + i:after { transform: translateX(20px); }
.toggle-switch input:active + i:after { width: 31px; }
.toggle-switch input:checked:active + i:after { transform: translateX(16px); }
.toggle-switch input:focus-visible + i { outline: 2px solid var(--focus-border); outline-offset: 2px; }
.toggle-switch input:disabled + i { opacity: .45; }

/* ---------- Inputs ---------- */
input[type="range"] { width: 100%; height: 6px; accent-color: var(--primary); cursor: pointer; }
input[type="range"]::-webkit-slider-thumb { cursor: pointer; }
input[type="range"]::-moz-range-thumb { cursor: pointer; }
/* Semantic input: hairline border, no shadow, blue border on focus. */
input[type="number"], input[type="text"], input[type="password"], select { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); padding: .67857143em 1em; min-height: 36px; transition: border-color .1s ease; }
input[type="number"]:focus, input[type="text"]:focus, input[type="password"]:focus, select:focus { outline: none; border-color: var(--focus-border); box-shadow: none; }
input[type="number"]:disabled, input[type="text"]:disabled, select:disabled, button:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Buttons ---------- */
/* Semantic buttons: flat fills, bold labels, no borders and no hover lift.
   .btn is the standard grey button, .btn-primary the blue call to action,
   .btn-negative the destructive red one and .btn-secondary Semantic's "basic"
   button (transparent with an inset ring) for low-emphasis actions. */
.btn { border: 0; border-radius: var(--radius); background: var(--grey-button) none; color: var(--text-muted); padding: .78571429em 1.5em; min-height: 36px; cursor: pointer; font-weight: 700; line-height: 1em; white-space: nowrap; text-shadow: none; box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34,36,38,.15) inset; transition: background-color .1s ease, color .1s ease, box-shadow .1s ease; }
.btn:hover:not(:disabled) { background-color: var(--grey-button-hover); color: rgba(0,0,0,.8); }
.btn:active:not(:disabled) { background-color: var(--grey-button-active); color: rgba(0,0,0,.9); }
.btn:focus-visible { outline: 2px solid var(--focus-border); outline-offset: 2px; }
.btn-primary { background-color: var(--primary); color: #fff; }
.btn-primary:hover:not(:disabled) { background-color: var(--primary-hover); color: #fff; }
.btn-primary:active:not(:disabled) { background-color: var(--primary-active); color: #fff; }
.btn-negative { background-color: var(--negative); color: #fff; }
.btn-negative:hover:not(:disabled) { background-color: var(--negative-hover); color: #fff; }
.btn-negative:active:not(:disabled) { background-color: #b21e1e; color: #fff; }
.btn-positive { background-color: var(--positive); color: #fff; }
.btn-positive:hover:not(:disabled) { background-color: var(--positive-hover); color: #fff; }
.btn-secondary { background: transparent none; color: var(--text-muted); box-shadow: 0 0 0 1px var(--border) inset; }
.btn-secondary:hover:not(:disabled) { background: #fff; color: var(--text); box-shadow: 0 0 0 1px rgba(34,36,38,.35) inset; }
.btn-secondary:active:not(:disabled) { background: #f8f8f8; color: rgba(0,0,0,.9); box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset; }
/* Semantic icon button: square padding instead of the wide label padding. */
.btn-icon { width: 36px; padding: .78571429em 0; text-align: center; }
/* Floats over a video stage in either page. */
.fullscreen-btn { position: absolute; right: 10px; top: 10px; z-index: 2; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border: 0; border-radius: var(--radius); background: rgba(0,0,0,.5); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; transition: background-color .1s ease; }
.fullscreen-btn:hover { background: var(--primary); }

/* ---------- Responsive ---------- */
/* Below this width the bar cannot hold brand + tabs + battery without crushing
   them, so the tabs fold behind one toggle that shows the battery itself;
   connection state stays on the brand dot, which never moves. */
@media (max-width: 640px) {
  .nav-inner { gap: 12px; }
  /* Folded down to one control, the toggle shows the battery instead of a
     hamburger glyph -- connection state already lives in the brand dot. */
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 34px; margin-left: auto; padding: 5px 11px; border: 1px solid var(--border); border-radius: 999px; background: rgba(255,255,255,.9); cursor: pointer; }
  .nav-toggle .battery-pill.compact { padding: 0; background: none; }
  .nav-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
  .nav-menu { display: none; position: absolute; top: calc(var(--nav-height) - 8px); right: 14px; min-width: 200px; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.12); }
  #navbar.menu-open .nav-menu { display: block; }
  #navbar.menu-open { background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-bottom-color: var(--border); box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.04); }
  .nav-menu .nav-tabs { flex-direction: column; gap: 4px; margin: 0; }
  .nav-menu .tab { padding: 10px 12px; border-radius: 8px; text-align: left; font-size: 14px; }
  /* The toggle already shows the battery; the dropdown is tabs only so the
     reading never appears twice at once. */
  .nav-menu .nav-status { display: none; }
}
@media (max-width: 700px) {
  .nav-inner { padding: 0 14px; gap: 12px; }
  .nav-brand small { display: none; }
  .tab { padding: 7px 11px; font-size: 13px; }
  main { padding: 16px 14px 32px; }
}