/* Hide placeholder text under transparent artwork in both interfaces. */
.insight-art-fallback.is-hidden { display:none; }
/* Original stays the default. Only the interface picker is shared by both views. */
.modern-only { display: none !important; }
.appearance-home { display: contents; }
.settings-details { display: contents; }
.original-mobile-settings { display:none; }
.interface-options { display:grid; grid-template-columns:1fr 1fr; gap:18px; padding:0; margin:20px 0 14px; border:0; min-width:0; }
.interface-options legend { margin-bottom:12px; color:var(--muted-strong); font-size:13px; }
.interface-option { position:relative; display:flex; flex-direction:column; gap:0; min-width:0; padding:7px; border:1px solid var(--line); border-radius:14px; cursor:pointer; background:var(--deep-bg); transition:border-color .18s, background .18s; }
.interface-option:has(input:checked) { border-color:var(--cyan); background:color-mix(in srgb,var(--cyan) 5%,var(--deep-bg)); }
.interface-option:has(input:focus-visible) { outline:2px solid var(--cyan); outline-offset:4px; }
.interface-option > input { position:absolute; top:17px; right:17px; width:18px; height:18px; z-index:1; accent-color:var(--cyan); }
.interface-preview { height:110px; position:relative; overflow:hidden; display:grid; grid-template-columns:1fr 1fr 1fr; grid-template-rows:26px 1fr; gap:6px; padding:26px 16px 12px 64px; border-radius:9px; background:#071a3f; }
.interface-preview::before { content:""; position:absolute; inset:0 auto 0 0; width:47px; background:#102951; border-right:1px solid #244267; }
.interface-preview::after { content:""; position:absolute; width:25px; height:4px; background:#4c88b5; left:11px; top:27px; box-shadow:0 12px #244267,0 24px #244267,0 36px #244267; border-radius:2px; }
.interface-preview b { grid-column:1/-1; width:50%; height:5px; margin-top:7px; background:#739bc3; border-radius:3px; }
.interface-preview i { background:#163861; border:1px solid #275077; border-radius:3px; }
.interface-preview em { display:none; }
.preview-updated { background:#101516; padding-top:18px; grid-template-rows:32px 1fr; gap:8px; }
.preview-updated::before { background:#141b1d; border-color:#2b3436; }
.preview-updated::after { background:#6bdcc3; box-shadow:0 12px #303c3d,0 24px #303c3d,0 36px #303c3d; }
.preview-updated b { background:#e3eeeb; width:62%; height:6px; box-shadow:0 10px #576a66; }
.preview-updated i { background:#1c2627; border-color:#33423e; border-radius:6px; border-top:2px solid #5c9f8e; }
.interface-option-copy { padding:14px 9px 9px; }
.interface-option-copy strong { display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--text); font-size:15px; }
.interface-option-copy small { display:block; margin-top:5px; color:var(--muted); font-size:12px; line-height:1.5; }
.interface-selected { visibility:hidden; color:var(--cyan); font-size:10px; font-weight:600; }
.interface-option:has(input:checked) .interface-selected { visibility:visible; }
.interface-note { color:var(--muted); font-size:12px; line-height:1.5; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Graphite, soft whites and sea-glass. Themes change the accent, not readability. */
html[data-control-ui="updated"] {
  --bg:#101416; --bg-soft:#13191c; --header-bg:rgba(16,20,22,.94);
  --surface:#1c2428; --surface-2:#182024; --surface-3:#293438;
  --panel-bg:#191f23; --field-bg:#11171a; --deep-bg:#11171a; --control-bg:#20292d;
  --line:#303a3f; --line-strong:#4a5d63; --text:#eff5f3; --muted:#a0b0b4; --muted-strong:#c4d1d3;
  --cyan:#7de2c7; --magenta:#b2abe8; --violet:#aaa7db; --gold:#f6bb35; --green:#8fe0b3; --danger:#ff9d9f;
  --primary-bg:var(--cyan); --primary-hover:#a6efdb; --primary-border:var(--cyan); --primary-text:#102920;
  --nav-active-bg:#21332e; --nav-active-line:var(--cyan); --shadow:0 10px 32px #00000016;
  --sidebar-width:232px; --sidebar-expanded-width:232px; --topbar-height:76px; --content-gutter:32px;
  --overview-hairline:var(--line); --transcoder-hairline:var(--line); --remote-hairline:var(--line);
  color-scheme:dark;
}
html[data-control-ui="updated"][data-control-theme="midnight"] { --cyan:#a99aff; --primary-hover:#c3b9ff; --primary-text:#211e39; --nav-active-bg:#2a293e; }
html[data-control-ui="updated"][data-control-theme="sunset"] { --cyan:#ff9b68; --primary-hover:#ffb58e; --primary-text:#35221b; --nav-active-bg:#372b29; }
html[data-control-ui="updated"][data-control-theme="cinema"] {
  --bg:#141414; --bg-soft:#191919; --header-bg:rgba(17,17,17,.96);
  --surface:#272727; --surface-2:#222; --surface-3:#333;
  --panel-bg:#242424; --field-bg:#171717; --deep-bg:#171717; --control-bg:#2d2d2d;
  --line:#3b3b3b; --line-strong:#5c5c5c; --text:#f5f5f5; --muted:#aaa; --muted-strong:#d6d6d6;
  --cyan:#efb018; --gold:#efb018;
  --primary-hover:#ffc235; --primary-text:#211707; --nav-active-bg:#2b2b2b;
}
html[data-control-ui="updated"][data-control-theme="black"] { --bg:#080a0b; --bg-soft:#101213; --panel-bg:#141719; --cyan:#d0dedb; --primary-hover:#eff5f3; --primary-text:#17211e; --nav-active-bg:#29312e; }
html[data-control-ui="updated"][data-control-theme="retro"] { --cyan:#68baff; --primary-hover:#9fd3ff; --primary-text:#192b38; --nav-active-bg:#23313c; }
html[data-control-ui="updated"] .modern-only { display:flex !important; }
html[data-control-ui="updated"] [hidden] { display:none !important; }
html[data-control-ui="updated"] body { font-family:Inter,"Segoe UI Variable Text","Segoe UI",sans-serif; font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; }
html[data-control-ui="updated"] :where(button,input,select,textarea) { font-family:inherit; }
html[data-control-ui="updated"] :where(button,a,input,select,textarea,summary):focus-visible { outline:2px solid var(--cyan); outline-offset:3px; }
html[data-control-ui="updated"] :where(button,a) { touch-action:manipulation; }
html[data-control-ui="updated"] :where(.page,.panel,.activity-section-head,.overview-status-panel,.viewing-insights-section) { scroll-margin-top:100px; }
html[data-control-ui="updated"] main { background:var(--bg); padding:calc(var(--topbar-height) + 30px) var(--content-gutter) 64px; }
html[data-control-ui="updated"] .page { max-width:1760px; margin-inline:auto; }
html[data-control-ui="updated"] .topbar { grid-template-columns:212px minmax(0,1fr) auto; height:var(--topbar-height); gap:22px; padding:0 24px; border-bottom:1px solid var(--line); box-shadow:none; }
html[data-control-ui="updated"] .topbar-start { gap:12px; }
html[data-control-ui="updated"] .brand-copy { display:block; }
html[data-control-ui="updated"] .brand strong { font-size:20px; letter-spacing:-.7px; }
html[data-control-ui="updated"] :is(.brand-tide,.brand-view) { color:var(--text); }
html[data-control-ui="updated"] .brand small { display:block; color:var(--muted); font-size:8px; margin-top:5px; letter-spacing:2.8px; }
html[data-control-ui="updated"] .brand-mark { width:32px; height:32px; flex-basis:32px; }
html[data-control-ui="updated"] .page-context .eyebrow { color:var(--muted); font-size:9px; letter-spacing:1.6px; font-weight:500; }
html[data-control-ui="updated"] .page-context h1 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:5px; font-size:16px; font-weight:600; }
html[data-control-ui="updated"] .top-actions { gap:10px; }
html[data-control-ui="updated"] .top-actions .save-state { max-width:95px; font-size:10px; }
html[data-control-ui="updated"] .top-actions :is(.button,.icon-button) { height:38px; min-height:38px; border-radius:9px; font-size:12px; }
html[data-control-ui="updated"] .control-search-button { align-items:center; gap:10px; height:38px; width:240px; color:var(--muted); background:var(--panel-bg); border:1px solid var(--line); border-radius:9px; padding:0 12px; cursor:pointer; text-align:left; font-size:12px; }
html[data-control-ui="updated"] .control-search-button svg { width:15px; height:15px; }
html[data-control-ui="updated"] .control-search-button kbd { margin-left:auto; color:var(--muted); border:1px solid var(--line); border-radius:4px; font:10px inherit; padding:1px 5px; }
html[data-control-ui="updated"] .sidebar { background:var(--bg-soft); }
html[data-control-ui="updated"] .sidebar nav { padding:20px 14px; gap:4px; }
html[data-control-ui="updated"] .nav-group { margin:18px 12px 4px; color:#84959c; font-size:9px; font-weight:600; letter-spacing:1.5px; opacity:1; }
html[data-control-ui="updated"] .nav-group:first-child { margin-top:2px; }
html[data-control-ui="updated"] :is(.nav-item,.nav-launch) { height:41px; min-height:41px; border-radius:8px; font-size:12px; font-weight:500; padding-inline:12px; gap:12px; color:var(--muted-strong); }
html[data-control-ui="updated"] .nav-icon { color:#8d9fa4; width:17px; height:17px; stroke-width:1.65; }
html[data-control-ui="updated"] .nav-item.active { background:var(--nav-active-bg); color:var(--cyan); box-shadow:none; }
html[data-control-ui="updated"] .nav-item.active .nav-icon { color:var(--cyan); }
html[data-control-ui="updated"] .sidebar-foot { margin: auto 14px 14px; padding:14px 0 0; gap:12px; }
html[data-control-ui="updated"] .server-connection { border:1px solid var(--line); border-radius:10px; padding:12px; background:var(--panel-bg); }
html[data-control-ui="updated"] .server-connection strong { font-size:12px; font-weight:600; }
html[data-control-ui="updated"] .server-connection small { margin-top:3px; font-size:10px; }
html[data-control-ui="updated"] .status-dot { width:7px; height:7px; box-shadow:none; }
html[data-control-ui="updated"] .sidebar-collapse-button { height:32px; font-size:11px; color:var(--muted); }
html[data-control-ui="updated"].control-sidebar-collapsed { --sidebar-width:76px; }
html[data-control-ui="updated"].control-sidebar-collapsed .topbar { grid-template-columns:212px minmax(0,1fr) auto; }
html[data-control-ui="updated"].control-sidebar-collapsed .sidebar-foot { margin-inline:8px; }
html[data-control-ui="updated"] :is(.panel,.table-shell,.source-card,.user-card,.guide-card,.empty-state,.helper-box,.metric,.connection-card,.storage-card,.client-grid > div) { border-color:var(--line); box-shadow:none; }
html[data-control-ui="updated"] .panel { padding:25px; margin-bottom:20px; border-radius:14px; background:var(--panel-bg); border:1px solid var(--line); }
html[data-control-ui="updated"] :is(.panel-head,.section-toolbar) { gap:20px; margin-bottom:22px; }
html[data-control-ui="updated"] :is(h2,h3,h4,h5) { color:var(--text); letter-spacing:-.35px; }
html[data-control-ui="updated"] .panel h2 { font-size:18px; font-weight:600; }
html[data-control-ui="updated"] :is(.panel-head p,.section-toolbar p) { max-width:80ch; color:var(--muted); line-height:1.65; font-size:12px; }
html[data-control-ui="updated"] .eyebrow { color:var(--muted); font-size:9px; letter-spacing:1.5px; font-weight:600; margin-bottom:7px; }
html[data-control-ui="updated"] :is(.button,.icon-button) { border-radius:8px; min-height:38px; box-shadow:none; font-size:12px; font-weight:600; transition:background .16s,border-color .16s; }
html[data-control-ui="updated"] .button.primary { background:var(--primary-bg); color:var(--primary-text); border:1px solid var(--primary-border); }
html[data-control-ui="updated"] .button.primary:hover { background:var(--primary-hover); }
html[data-control-ui="updated"] :is(.button.secondary,.icon-button) { border:1px solid var(--line); background:var(--control-bg); color:var(--muted-strong); }
html[data-control-ui="updated"] :is(.button.secondary,.icon-button):hover { border-color:var(--line-strong); background:var(--surface-3); color:var(--text); }
html[data-control-ui="updated"] .button.danger { color:var(--danger); background:#372628; border:1px solid #654247; }
html[data-control-ui="updated"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea) { min-height:40px; background:var(--field-bg); border:1px solid var(--line); border-radius:8px; color:var(--text); font-size:13px; }
html[data-control-ui="updated"] :is(input[type="checkbox"],input[type="radio"],input[type="range"]) { accent-color:var(--cyan); }
html[data-control-ui="updated"] :is(.form-grid label,.toggle-list label) { font-size:13px; color:var(--muted-strong); }
html[data-control-ui="updated"] :is(.form-grid small,.toggle-list small) { color:var(--muted); line-height:1.6; font-size:12px; font-weight:400; }
html[data-control-ui="updated"] .form-grid { gap:22px; }
html[data-control-ui="updated"] .toggle-list label { padding-block:17px; border-color:var(--line); }
html[data-control-ui="updated"] .toggle-list strong { font-weight:550; }
html[data-control-ui="updated"] .helper-box { border:1px solid var(--line); border-radius:10px; background:var(--surface-2); padding:16px; }
html[data-control-ui="updated"] .helper-box strong { color:var(--muted-strong); }
html[data-control-ui="updated"] .helper-box span { color:var(--muted); }
html[data-control-ui="updated"] :is(.pill,.badge) { padding:5px 9px; font-size:10px; font-weight:600; color:var(--muted-strong); border-color:var(--line); background:var(--control-bg); box-shadow:none; }
html[data-control-ui="updated"] .pill.good { color:var(--green); background:#20322c; border-color:#355547; }
html[data-control-ui="updated"] .pill.warn { color:var(--gold); background:#332e23; border-color:#615139; }
html[data-control-ui="updated"] .pill.bad { color:var(--danger); background:#38282b; border-color:#654247; }
html[data-control-ui="updated"] .section-tabs { margin:0 0 25px; padding:4px; width:fit-content; max-width:100%; gap:4px; border:1px solid var(--line); background:var(--deep-bg); border-radius:10px; }
html[data-control-ui="updated"] .section-tabs button { min-height:36px; padding:8px 16px; border:0; border-radius:7px; background:transparent; color:var(--muted); font-size:12px; font-weight:500; white-space:nowrap; }
html[data-control-ui="updated"] .section-tabs button.active { background:var(--surface-3); color:var(--text); box-shadow:0 2px 4px #0002; }
/* Main section navigation uses distinct, clickable buttons in both interfaces. */
.section-tabs:is(.guide-main-tabs,.settings-main-tabs) { gap:10px; padding:0; border:0; background:transparent; }
.section-tabs:is(.guide-main-tabs,.settings-main-tabs) button {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:42px; padding:9px 17px; border:1px solid var(--line-strong);
  border-radius:9px; background:var(--control-bg); color:var(--text);
  font-size:13px; font-weight:650; cursor:pointer;
  box-shadow:0 2px 4px #0002;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.section-tabs:is(.guide-main-tabs,.settings-main-tabs) button::before {
  content:""; width:16px; height:16px; flex:0 0 16px; background:currentColor;
  mask:center / contain no-repeat;
}
.section-tabs:is(.guide-main-tabs,.settings-main-tabs) button[data-go="guide"]::before {
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18M8 15h2M14 15h2'/%3E%3C/svg%3E");
}
.section-tabs:is(.guide-main-tabs,.settings-main-tabs) button[data-go="channels"]::before {
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3Ccircle cx='9' cy='6' r='2' fill='black'/%3E%3Ccircle cx='15' cy='12' r='2' fill='black'/%3E%3Ccircle cx='8' cy='18' r='2' fill='black'/%3E%3C/svg%3E");
}
.section-tabs:is(.guide-main-tabs,.settings-main-tabs) button:hover { color:var(--text); border-color:var(--cyan); background:var(--surface-3); transform:translateY(-1px); }
.section-tabs:is(.guide-main-tabs,.settings-main-tabs) button:active { transform:translateY(1px); }
.section-tabs:is(.guide-main-tabs,.settings-main-tabs) button.active { color:var(--primary-text); border-color:var(--primary-border); background:var(--primary-bg); box-shadow:0 2px 6px #0003; }
.section-tabs:is(.guide-main-tabs,.settings-main-tabs) button.active:hover { background:var(--primary-hover); }
.section-tabs:is(.guide-main-tabs,.settings-main-tabs) button:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; }
html[data-control-ui="updated"] .section-tabs:is(.guide-main-tabs,.settings-main-tabs) { gap:10px; padding:0; border:0; background:transparent; }
html[data-control-ui="updated"] .section-tabs:is(.guide-main-tabs,.settings-main-tabs) button { min-height:42px; padding:9px 17px; border:1px solid var(--line-strong); border-radius:9px; background:var(--control-bg); color:var(--text); font-size:13px; font-weight:650; box-shadow:0 2px 4px #0002; }
html[data-control-ui="updated"] .section-tabs:is(.guide-main-tabs,.settings-main-tabs) button:hover { border-color:var(--cyan); background:var(--surface-3); }
html[data-control-ui="updated"] .section-tabs:is(.guide-main-tabs,.settings-main-tabs) button.active { color:var(--primary-text); border-color:var(--primary-border); background:var(--primary-bg); box-shadow:0 2px 6px #0003; }
html[data-control-ui="updated"] .section-tabs:is(.guide-main-tabs,.settings-main-tabs) button.active:hover { background:var(--primary-hover); }
.section-tabs.settings-main-tabs button[data-go="processing"]::before { mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206h16M4%2012h16M4%2018h16%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%226%22%20r%3D%222%22%20fill%3D%22black%22%2F%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2212%22%20r%3D%222%22%20fill%3D%22black%22%2F%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2218%22%20r%3D%222%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E"); }
.section-tabs.settings-main-tabs button[data-go="integrations"]::before { mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%203v5M16%203v5M6%208h12v3a6%206%200%200%201-6%206v4M12%2017a6%206%200%200%201-6-6%22%2F%3E%3C%2Fsvg%3E"); }
.section-tabs.settings-main-tabs button[data-go="compatibility"]::before { mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%2214%22%20height%3D%2211%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M6%2019h6M9%2015v4%22%2F%3E%3Crect%20x%3D%2217%22%20y%3D%229%22%20width%3D%225%22%20height%3D%2212%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E"); }
.section-tabs.settings-main-tabs button[data-go="setup"]::before { mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m5%2019%2010-10M12%206l6%206M18%202v4M16%204h4M4%205v4M2%207h4M18%2016v4M16%2018h4%22%2F%3E%3C%2Fsvg%3E"); }
html[data-control-ui="updated"] .workspace-intro { align-items:center; gap:18px; margin:4px 0 24px; }
html[data-control-ui="updated"] .workspace-intro > span { display:grid; place-items:center; flex:0 0 52px; height:52px; border:1px solid var(--line); background:var(--panel-bg); border-radius:15px; color:var(--cyan); }
html[data-control-ui="updated"] .workspace-intro svg { width:23px; height:23px; }
html[data-control-ui="updated"] .workspace-intro h2 { margin:0; font-size:30px; line-height:1.2; font-weight:550; letter-spacing:-1px; }
html[data-control-ui="updated"] .workspace-intro p:last-child { margin:8px 0 0; color:var(--muted); font-size:13px; }
html[data-control-ui="updated"] .section-jump { gap:8px; flex-wrap:wrap; margin:0 0 26px; }
html[data-control-ui="updated"] .section-jump button { border:1px solid var(--line); border-radius:7px; padding:7px 11px; font-size:11px; background:transparent; color:var(--muted-strong); cursor:pointer; }
html[data-control-ui="updated"] .section-jump button:hover { border-color:var(--cyan); color:var(--cyan); }
html[data-control-ui="updated"] .section-jump button[hidden] { display:none; }
html[data-control-ui="updated"] .appearance-controls { gap:18px; flex-wrap:wrap; align-items:center; padding:20px 0 0; margin-top:20px; border-top:1px solid var(--line); }
html[data-control-ui="updated"] :is(.theme-picker,.font-picker,.advanced-switch) { height:44px; padding:0 12px; background:var(--field-bg); border-color:var(--line); border-radius:8px; font-size:12px; gap:10px; }
html[data-control-ui="updated"] :is(.theme-picker,.font-picker) select { min-height:32px; height:32px; border:0; font-size:12px; }
html[data-control-ui="updated"] .server-menu-popover { width:300px; max-width:calc(100vw - 24px); }
html[data-control-ui="updated"] .server-menu-popover :is(.theme-picker,.font-picker) { grid-column:1 / -1; width:100%; display:flex; }
html[data-control-ui="updated"] .server-menu-popover :is(.theme-picker,.font-picker) > span { display:inline; min-width:42px; }
html[data-control-ui="updated"] .server-menu-popover :is(.theme-picker,.font-picker) select { flex:1; min-width:0; width:0; }
html[data-control-ui="updated"] .server-menu-popover :is(.theme-picker,.font-picker) svg { flex-shrink:0; }
html[data-control-ui="updated"] .server-menu-popover .advanced-switch { grid-column:1 / -1; display:flex; justify-content:space-between; width:100%; }
html[data-control-ui="updated"] .server-menu-popover .advanced-switch > span { display:inline; }
html[data-control-ui="updated"] .server-menu-popover .server-power-heading { border-top:1px solid var(--line); padding-top:14px; margin-top:4px; }
@media (max-width:760px), (max-width:1024px) and (hover:none) and (pointer:coarse) {
  html[data-control-ui="updated"] .server-menu-popover { position:fixed; right:12px; top:calc(var(--topbar-height) + 8px); max-height:calc(100dvh - var(--topbar-height) - 20px); overflow-y:auto; }
}
html[data-control-ui="updated"] .server-identity-panel { background:var(--panel-bg); }
html[data-control-ui="updated"] .server-identity-mark img { max-width:110px; }
html[data-control-ui="updated"] .table-shell { border:1px solid var(--line); border-radius:13px; background:var(--panel-bg); }
html[data-control-ui="updated"] table { background:transparent; }
html[data-control-ui="updated"] th { background:var(--surface-2); color:var(--muted); padding:16px; font-size:9px; letter-spacing:1px; font-weight:600; border-color:var(--line); }
html[data-control-ui="updated"] td { padding:18px 16px; border-color:var(--line); font-size:12px; }
html[data-control-ui="updated"] tbody tr:hover { background:#ffffff03; }
html[data-control-ui="updated"] td :is(small,.muted) { color:var(--muted); }
html[data-control-ui="updated"] .empty-state { background:var(--surface-2); border-radius:10px; color:var(--muted); padding:28px; }
html[data-control-ui="updated"] :is(.source-card,.guide-card,.connection-card,.user-card) { background:var(--panel-bg); border-radius:12px; border:1px solid var(--line); }
html[data-control-ui="updated"] dialog { background:var(--panel-bg); color:var(--text); border:1px solid var(--line-strong); border-radius:18px; box-shadow:0 28px 100px #0008; }
html[data-control-ui="updated"] dialog::backdrop { background:#05090bc9; backdrop-filter:blur(7px); }
html[data-control-ui="updated"] .notice { position:fixed; z-index:200; bottom:20px; left:calc(var(--sidebar-width) + 25px); max-width:calc(100vw - var(--sidebar-width) - 50px); background:var(--surface-3); border:1px solid var(--line-strong); border-radius:12px; padding:16px 20px; box-shadow:0 12px 40px #0005; }

/* Overview: a quiet hero, compact telemetry, then the full operational detail. */
html[data-control-ui="updated"] .overview-shortcuts { gap:6px; flex-wrap:wrap; margin:0 0 28px; }
html[data-control-ui="updated"] .overview-shortcuts button { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:11px; border:0; border-radius:7px; padding:8px 12px; background:transparent; cursor:pointer; }
html[data-control-ui="updated"] .overview-shortcuts button:hover { color:var(--text); background:var(--surface); }
html[data-control-ui="updated"] .overview-shortcuts svg { width:15px; height:15px; }
html[data-control-ui="updated"] .page[data-page="overview"] .overview-status-panel { background:transparent; border:0; padding:0; margin:0 0 28px; box-shadow:none; }
html[data-control-ui="updated"] .overview-status-head { align-items:center; position:relative; gap:16px; margin-bottom:18px; }
html[data-control-ui="updated"] .overview-status-head h2 { font-size:20px; font-weight:550; }
html[data-control-ui="updated"] .overview-status-head p:not(.eyebrow) { display:none; }
html[data-control-ui="updated"] #refreshActivity { margin-left:auto; }
html[data-control-ui="updated"] .telemetry-note { color:var(--muted); font-size:10px; order:1; }
html[data-control-ui="updated"] .page[data-page="overview"] .command-status-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; border:0; background:transparent; overflow:visible; border-radius:0; }
html[data-control-ui="updated"] .page[data-page="overview"] .command-status-grid .metric:nth-child(n) { position:relative; min-height:150px; padding:21px; background:var(--panel-bg); border:1px solid var(--line); border-radius:13px; overflow:hidden; }
html[data-control-ui="updated"] .page[data-page="overview"] .command-status-grid .metric:nth-child(n)::before { display:none; }
html[data-control-ui="updated"] .page[data-page="overview"] .command-status-grid .metric > span:not(.metric-symbol) { padding-right:26px; font-size:9px; color:var(--muted); font-weight:550; letter-spacing:1px; }
html[data-control-ui="updated"] .page[data-page="overview"] .command-status-grid .metric strong { color:var(--text); font-size:29px; font-weight:500; letter-spacing:-1px; line-height:1.2; margin-top:13px; }
html[data-control-ui="updated"] .page[data-page="overview"] .command-status-grid .metric .metric-text { font-size:17px; line-height:1.4; letter-spacing:-.25px; }
html[data-control-ui="updated"] .page[data-page="overview"] .command-status-grid .metric small { font-size:10px; color:var(--muted); line-height:1.65; margin-top:7px; }
html[data-control-ui="updated"] .page[data-page="overview"] .command-status-grid .metric-symbol { position:absolute; top:17px; right:16px; width:27px; height:27px; align-items:center; justify-content:center; padding:0; border:1px solid var(--line); border-radius:8px; color:var(--cyan); background:var(--surface-2); }
html[data-control-ui="updated"] .metric-symbol svg { width:14px; height:14px; }
html[data-control-ui="updated"] .metric .viewer-limit-pair { margin-top:0; gap:20px; }
html[data-control-ui="updated"] .metric .cpu-metric-pair { margin-top:14px; }
html[data-control-ui="updated"] .metric .cpu-metric-pair strong { margin-top:1px !important; }
html[data-control-ui="updated"] .metric-trend { flex-direction:column; margin-top:auto; padding-top:12px; gap:4px; width:100%; }
html[data-control-ui="updated"] .metric-trend svg { width:100%; height:32px; overflow:visible; }
html[data-control-ui="updated"] .metric-trend polyline { fill:none; stroke:var(--cyan); stroke-width:1.6; vector-effect:non-scaling-stroke; stroke-linejoin:round; stroke-linecap:round; }
html[data-control-ui="updated"] .metric-trend .trend-grid { fill:none; stroke:var(--line); stroke-width:.5; }
html[data-control-ui="updated"] .metric-trend span { font-size:9px !important; font-weight:400 !important; letter-spacing:0 !important; color:var(--muted) !important; }
html[data-control-ui="updated"] .page[data-page="overview"] .command-status-grid .metric:nth-child(n+5) { display:flex; flex-direction:column; min-height:220px; }
html[data-control-ui="updated"] .page[data-page="overview"] .overview-status-panel .activity-tuner-band { margin-top:14px; padding:0; border:0; background:none; }
html[data-control-ui="updated"] .page[data-page="overview"] .activity-tuner-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:8px; padding:0; border:0; background:none; box-shadow:none; overflow:visible; }
html[data-control-ui="updated"] .page[data-page="overview"] .overview-status-panel .activity-tuner { padding:14px 12px; min-width:0; border:1px solid var(--line); border-radius:10px; background:var(--panel-bg); }
html[data-control-ui="updated"] .activity-tuner :is(strong,b) { font-size:11px; }
html[data-control-ui="updated"] .activity-tuner :is(small,span) { font-size:10px; }
html[data-control-ui="updated"] .activity-tuner-icon { background:var(--surface-3); border-color:var(--line); color:var(--muted-strong); box-shadow:none; }
html[data-control-ui="updated"] .page[data-page="overview"] .activity-tuner { grid-template-columns:minmax(0,1fr) auto; gap:8px; }
html[data-control-ui="updated"] .activity-tuner .source-symbol { display:none; }
html[data-control-ui="updated"] .page[data-page="overview"] .activity-tuner strong { white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; }
html[data-control-ui="updated"] .activity-section-head { margin:30px 0 16px; }
html[data-control-ui="updated"] .activity-section-head h3 { font-size:20px; font-weight:550; }
html[data-control-ui="updated"] .page[data-page="overview"] :is(.activity-stream-table,.history-table,.top-user-card,.insight-ranking,.endpoint-panel) { background:var(--panel-bg); border:1px solid var(--line); border-radius:13px; box-shadow:none; }
html[data-control-ui="updated"] .page[data-page="overview"] .viewing-insights-section { background:transparent; margin-top:34px; }
html[data-control-ui="updated"] .page[data-page="overview"] .insight-ranking-head { background:var(--surface-2); border-color:var(--line); padding:16px; }
html[data-control-ui="updated"] .top-user-card { padding:20px; }
html[data-control-ui="updated"] .top-user-card:hover { border-color:var(--line-strong); }
html[data-control-ui="updated"] :is(.top-user-avatar,.top-user-avatar img) { box-shadow:none; border-color:var(--line); }
html[data-control-ui="updated"] .activity-filters select { min-height:36px; }
html[data-control-ui="updated"] .insight-subhead h4 { font-size:14px; font-weight:550; }
html[data-control-ui="updated"] :is(.transcoder-policy-panel,.tideview-plus-panel,.remote-main-panel,.remote-side-stack > .panel) { background:var(--panel-bg); }
html[data-control-ui="updated"] .transcoder-storage-grid { background:var(--surface-2); border-color:var(--line); border-radius:10px; }
html[data-control-ui="updated"] .remote-workspace { gap:20px; }
html[data-control-ui="updated"] .control-spotlight { animation:control-spotlight 1.6s ease; }
@keyframes control-spotlight { 15%,60% { outline:2px solid var(--cyan); outline-offset:4px; } }

/* Search is native-dialog based, with keyboard selection and a focus trap. */
html[data-control-ui="updated"] .original-toolbar { display:none; }
html[data-control-ui="updated"] .workspace-intro { flex-wrap:wrap; }
html[data-control-ui="updated"] .workspace-intro > div:not(.workspace-actions) { flex:1; min-width:180px; }
html[data-control-ui="updated"] .workspace-actions { margin-left:auto; display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
html[data-control-ui="updated"] .workspace-actions > div { display:flex; flex-wrap:wrap; gap:8px; }
html[data-control-ui="updated"] .interface-panel { display:grid; grid-template-columns:minmax(0,1fr) 240px; column-gap:28px; }
html[data-control-ui="updated"] .interface-panel > .panel-head { grid-column:1/-1; margin-bottom:6px; }
html[data-control-ui="updated"] .interface-options { grid-column:1; margin-top:10px; }
html[data-control-ui="updated"] .interface-note { grid-column:1; margin:0; }
html[data-control-ui="updated"] .appearance-controls { grid-column:2; grid-row:2/4; flex-direction:column; align-items:stretch; justify-content:center; margin:0; padding:0 0 0 24px; border-top:0; border-left:1px solid var(--line); gap:14px; }
html[data-control-ui="updated"] .appearance-controls > label { display:flex; justify-content:space-between; width:100%; }
html[data-control-ui="updated"] .appearance-controls > label > span { display:inline !important; }
html[data-control-ui="updated"] .settings-details { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; align-items:stretch; }
html[data-control-ui="updated"] .settings-details > .panel { margin:0; min-width:0; grid-column:1/-1; }
html[data-control-ui="updated"] .settings-details > .server-identity-panel { grid-column:1; grid-row:1; display:flex; flex-direction:column; align-items:stretch; gap:22px; }
html[data-control-ui="updated"] .settings-details > .server-identity-panel > label { width:100%; }
html[data-control-ui="updated"] .settings-details > .license-settings-panel { grid-column:2; grid-row:1; display:flex; flex-direction:column; align-items:flex-start; }
html[data-control-ui="updated"] .license-settings-panel .panel-head { margin-bottom:18px; }
html[data-control-ui="updated"] .license-settings-panel .button { margin-top:auto; }
html[data-control-ui="updated"] .license-settings-note { margin:12px 0 0; color:var(--muted); font-size:12px; line-height:1.6; }
html[data-control-ui="updated"] .license-settings-note a { color:var(--text); text-underline-offset:3px; }
html[data-control-ui="updated"] .settings-details > .software-update-panel { grid-column:1/-1; grid-row:2; }
html[data-control-ui="updated"] .settings-details > .software-update-panel .form-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; }
html[data-control-ui="updated"] .settings-details .form-grid { grid-template-columns:1fr; }
@media (max-width:1100px) {
  html[data-control-ui="updated"] .interface-panel { display:block; }
  html[data-control-ui="updated"] .appearance-controls { flex-direction:row; flex-wrap:wrap; padding:18px 0 0; margin-top:18px; border-left:0; border-top:1px solid var(--line); }
  html[data-control-ui="updated"] .appearance-controls > label { width:auto; }
  html[data-control-ui="updated"] .settings-details { display:block; }
  html[data-control-ui="updated"] .settings-details > .panel { margin-bottom:20px; }
}
@media (max-width:680px) {
  html[data-control-ui="updated"] .settings-details > .software-update-panel .form-grid { grid-template-columns:1fr; }
}
html[data-control-ui="updated"] .control-search-dialog { width:min(640px,calc(100vw - 32px)); max-height:min(680px,85vh); margin:12vh auto auto; padding:0; overflow:hidden; }
html[data-control-ui="updated"] .control-search-top { display:flex; align-items:center; gap:15px; padding:18px 20px; border-bottom:1px solid var(--line); }
html[data-control-ui="updated"] .control-search-top > svg { width:21px; color:var(--cyan); }
html[data-control-ui="updated"] #controlSearchInput { flex:1; min-width:0; padding:4px; background:none; border:0; border-radius:0; outline-offset:3px; font-size:16px; }
html[data-control-ui="updated"] .control-search-caption { margin:16px 22px 8px; color:var(--muted); font-size:10px; letter-spacing:1px; }
html[data-control-ui="updated"] #controlSearchResults { padding:0 10px 10px; max-height:min(420px,50vh); overflow-y:auto; }
html[data-control-ui="updated"] .control-search-result { display:flex; align-items:center; gap:14px; border-radius:9px; padding:13px; cursor:pointer; }
html[data-control-ui="updated"] .control-search-result[aria-selected="true"],html[data-control-ui="updated"] .control-search-result:hover { background:var(--nav-active-bg); }
html[data-control-ui="updated"] .control-search-result > svg { width:18px; height:18px; color:var(--cyan); flex:0 0 18px; }
html[data-control-ui="updated"] .control-search-result > svg:last-child { margin-left:auto; color:var(--muted); width:14px; }
html[data-control-ui="updated"] .control-search-result strong { display:block; font-size:13px; font-weight:550; }
html[data-control-ui="updated"] .control-search-result small { display:block; margin-top:3px; font-size:11px; color:var(--muted); }
html[data-control-ui="updated"] .control-search-dialog footer { display:flex; justify-content:space-between; gap:10px; color:var(--muted); font-size:10px; border-top:1px solid var(--line); padding:12px 22px; }

@media (max-width:1400px) {
  html[data-control-ui="updated"] { --sidebar-width:214px; --sidebar-expanded-width:214px; --content-gutter:24px; }
  html[data-control-ui="updated"] .control-search-button { width:175px; }
  html[data-control-ui="updated"] .control-search-button kbd { display:none; }
  html[data-control-ui="updated"] .top-actions .save-state { display:none; }
  html[data-control-ui="updated"] .page[data-page="overview"] .command-status-grid .metric strong { font-size:25px; }
}
@media (max-width:1100px) {
  html[data-control-ui="updated"] .control-search-button { width:38px; justify-content:center; padding:0; }
  html[data-control-ui="updated"] .control-search-button span { display:none; }
  html[data-control-ui="updated"] .topbar { gap:14px; }
  html[data-control-ui="updated"] .page[data-page="overview"] .command-status-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  html[data-control-ui="updated"] .telemetry-note { display:none !important; }
}
@media (max-width:760px), (max-width:1024px) and (hover:none) and (pointer:coarse) {
  html[data-control-ui="updated"],html[data-control-ui="updated"].control-sidebar-collapsed { --sidebar-width:0px; --topbar-height:64px; --content-gutter:16px; }
  html[data-control-ui="updated"] .topbar,html[data-control-ui="updated"].control-sidebar-collapsed .topbar { display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-rows:1fr; gap:9px; height:var(--topbar-height); min-height:var(--topbar-height); padding:env(safe-area-inset-top,0px) 12px 0; }
  html[data-control-ui="updated"] .mobile-control-brand { display:none; }
  html[data-control-ui="updated"] .topbar .topbar-start { display:flex !important; grid-area:auto; }
  html[data-control-ui="updated"] .mobile-nav-button { display:flex; align-items:center; justify-content:center; }
  html[data-control-ui="updated"] .brand { display:none; }
  html[data-control-ui="updated"] .topbar .page-context { display:block !important; grid-area:auto; justify-self:start; }
  html[data-control-ui="updated"] .page-context .eyebrow { display:none; }
  html[data-control-ui="updated"] .page-context h1 { font-size:15px; margin:0; }
  html[data-control-ui="updated"] .topbar .top-actions { display:flex !important; grid-area:auto; width:auto; gap:7px; overflow:visible; padding:0; }
  html[data-control-ui="updated"] .top-actions :is(.refresh-button,.media-launch-button) { display:none !important; }
  html[data-control-ui="updated"] .top-actions .server-menu > summary { width:36px; padding:0; justify-content:center; }
  html[data-control-ui="updated"] .top-actions .server-menu > summary :is(span,.menu-chevron) { display:none; }
  html[data-control-ui="updated"] .sidebar,html[data-control-ui="updated"].control-sidebar-collapsed .sidebar { display:flex !important; width:260px; top:var(--topbar-height); transform:translateX(-100%); }
  html[data-control-ui="updated"].control-nav-open .sidebar-scrim { display:block !important; position:fixed; z-index:100; inset:var(--topbar-height) 0 0 260px; background:#0008; }
  html[data-control-ui="updated"] .sidebar.open { transform:translateX(0); }
  html[data-control-ui="updated"] main { margin-left:0; padding-top:84px; }
  html[data-control-ui="updated"] .overview-shortcuts { gap:0; margin-bottom:24px; }
  html[data-control-ui="updated"] .overview-shortcuts button { padding:8px; font-size:10px; }
  html[data-control-ui="updated"] .panel { padding:20px; }
  html[data-control-ui="updated"] .workspace-intro h2 { font-size:26px; }
  html[data-control-ui="updated"] .workspace-intro > span { flex-basis:44px; height:44px; border-radius:12px; }
  html[data-control-ui="updated"] .workspace-intro p:last-child { font-size:12px; }
  html[data-control-ui="updated"] .page[data-page="overview"] .command-status-grid { gap:10px; }
  html[data-control-ui="updated"] .page[data-page="overview"] .command-status-grid .metric:nth-child(n) { padding:16px 13px; min-height:150px; }
  html[data-control-ui="updated"] .page[data-page="overview"] .command-status-grid .metric:nth-child(n+5) { min-height:228px; }
  html[data-control-ui="updated"] .page[data-page="overview"] .command-status-grid .metric-symbol { top:12px; right:10px; width:22px; height:22px; }
  html[data-control-ui="updated"] .page[data-page="overview"] .command-status-grid .metric > span:not(.metric-symbol) { font-size:8px; letter-spacing:.6px; }
  html[data-control-ui="updated"] .page[data-page="overview"] .command-status-grid .metric strong { font-size:23px; }
  html[data-control-ui="updated"] .page[data-page="overview"] .command-status-grid .metric .metric-text { font-size:14px; }
  html[data-control-ui="updated"] .page[data-page="overview"] .activity-tuner-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  html[data-control-ui="updated"] .metric .viewer-limit-pair { gap:10px; }
  html[data-control-ui="updated"] .interface-options { gap:10px; }
  html[data-control-ui="updated"] .interface-preview { height:90px; padding-left:40px; padding-right:10px; }
  html[data-control-ui="updated"] .interface-preview::before { width:30px; }
  html[data-control-ui="updated"] .interface-preview::after { left:7px; width:16px; }
  html[data-control-ui="updated"] .interface-option-copy { padding:12px 4px 6px; }
  html[data-control-ui="updated"] .interface-option-copy strong { flex-wrap:wrap; font-size:13px; }
  html[data-control-ui="updated"] .interface-option-copy small { font-size:11px; }
  html[data-control-ui="updated"] .appearance-controls { gap:10px; }
  html[data-control-ui="updated"] .appearance-controls > label { flex:1 1 160px; justify-content:space-between; }
  html[data-control-ui="updated"] .workspace-actions { flex-basis:100%; margin-left:0; }
  html[data-control-ui="updated"] .topbar .icon-button { min-width:36px; width:36px; }
  html[data-control-ui="updated"] .topbar #controlMobileMenu { width:40px; min-width:40px; height:40px; min-height:40px; }
  html[data-control-ui="updated"] .topbar .control-search-button { height:38px; min-width:36px; width:36px; }
  html[data-control-ui="updated"] .topbar .control-music-player:not([hidden]) { display:flex !important; }
  html[data-control-ui="updated"] .section-jump { gap:6px; }
  html[data-control-ui="updated"] .section-jump button { padding:7px 9px; font-size:10px; }
  html[data-control-ui="updated"] :where(.page,.panel,.activity-section-head,.overview-status-panel,.viewing-insights-section) { scroll-margin-top:85px; }
}
@media (max-width:760px), (max-width:1024px) and (hover:none) and (pointer:coarse) {
  html[data-control-ui="original"] .mobile-control-brand { width:100%; justify-content:space-between; }
  html[data-control-ui="original"] .original-mobile-settings { display:inline-flex; }
}
@media (max-width:380px) {
  html[data-control-ui="updated"] #openControlAppearance { display:none !important; }
}
@media (prefers-reduced-motion:reduce) {
  html[data-control-ui="updated"] *,html[data-control-ui="updated"] *::before,html[data-control-ui="updated"] *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
html[data-control-ui="updated"][data-control-font="large"] body { font-size:16px; }
html[data-control-ui="updated"][data-control-font="xlarge"] body { font-size:18px; }
html[data-control-ui="updated"][data-control-font="large"] :is(.nav-item,.nav-launch,.button,.form-grid label,.toggle-list label,td) { font-size:14px; }
html[data-control-ui="updated"][data-control-font="xlarge"] :is(.nav-item,.nav-launch,.button,.form-grid label,.toggle-list label,td) { font-size:16px; }
html[data-control-ui="updated"][data-control-font="large"] :is(.panel-head p,.form-grid small,.toggle-list small,.workspace-intro p:last-child) { font-size:14px; }
html[data-control-ui="updated"][data-control-font="xlarge"] :is(.panel-head p,.form-grid small,.toggle-list small,.workspace-intro p:last-child) { font-size:16px; }
html[data-control-ui="updated"][data-control-font="large"] .page[data-page="overview"] .command-status-grid .metric small { font-size:12px; }
html[data-control-ui="updated"][data-control-font="xlarge"] .page[data-page="overview"] .command-status-grid .metric small { font-size:14px; }
/* Keep music accessible without crowding the management header. */
html[data-control-ui="updated"] .topbar:has(.control-music-player:not([hidden])) { grid-template-columns:212px minmax(0,1fr) auto; }
html[data-control-ui="updated"] .topbar .control-music-player:not([hidden]) { position:fixed; inset:auto 20px 18px auto; width:min(760px,calc(100vw - var(--sidebar-width) - 40px)); max-width:none; background:var(--panel-bg); border:1px solid var(--line-strong); border-radius:14px; box-shadow:0 14px 45px #0006; z-index:95; }
html[data-control-ui="updated"] .topbar:has(.control-music-player:not([hidden])) .top-actions { display:flex; flex-wrap:nowrap; grid-column:auto; grid-row:auto; }
html[data-control-ui="updated"] body:has(.control-music-player:not([hidden])) main { padding-bottom:190px; }
@media (min-width:761px) {
  html[data-control-ui="updated"] .topbar .control-music-player:not([hidden]) {
    inset:8px auto auto 50%;
    width:min(960px,46vw);
    transform:translateX(-50%);
  }
  html[data-control-ui="updated"] body:has(.control-music-player:not([hidden])) main { padding-bottom:50px; }
}
@media (max-width:760px) {
  html[data-control-ui="updated"] .topbar:has(.control-music-player:not([hidden])) { grid-template-columns:auto minmax(0,1fr) auto; }
  html[data-control-ui="updated"] .topbar .control-music-player:not([hidden]) { inset:auto 10px 10px; width:calc(100vw - 20px); transform:none; }
}

/* Android mobile Control: app-native navigation and information-dense touch layouts. */
.mobile-app-navigation { display:none; }
.mobile-gpu-encoder { display:none; }

@media (max-width:760px), (max-width:1024px) and (hover:none) and (pointer:coarse) {
  html[data-control-client="android-mobile"],
  html[data-control-client="android-mobile"].control-sidebar-collapsed {
    --sidebar-width:0px;
    --topbar-height:calc(62px + env(safe-area-inset-top, 0px));
    --mobile-app-nav-height:calc(68px + env(safe-area-inset-bottom, 0px));
    --content-gutter:12px;
  }

  html[data-control-client="android-mobile"] body {
    min-height:100dvh;
    overscroll-behavior-y:none;
    background:var(--bg);
    -webkit-tap-highlight-color:transparent;
  }

  html[data-control-client="android-mobile"] .topbar,
  html[data-control-client="android-mobile"].control-sidebar-collapsed .topbar {
    position:fixed;
    z-index:120;
    inset:0 0 auto;
    display:grid;
    grid-template-columns:44px minmax(0,1fr) auto;
    grid-template-rows:1fr;
    gap:10px;
    height:var(--topbar-height);
    min-height:var(--topbar-height);
    padding:env(safe-area-inset-top, 0px) 12px 0;
    border-bottom:1px solid color-mix(in srgb,var(--line) 74%,transparent);
    background:color-mix(in srgb,var(--header-bg) 94%,transparent);
    box-shadow:0 8px 28px rgba(0,0,0,.2);
    backdrop-filter:blur(20px) saturate(1.25);
  }

  html[data-control-client="android-mobile"] .topbar .topbar-start {
    display:flex !important;
    min-width:44px;
  }
  html[data-control-client="android-mobile"] .topbar .brand,
  html[data-control-client="android-mobile"] .topbar .mobile-control-brand,
  html[data-control-client="android-mobile"] .topbar .control-music-player,
  html[data-control-client="android-mobile"] .top-actions .media-launch-button,
  html[data-control-client="android-mobile"] .top-actions .save-state { display:none !important; }
  html[data-control-client="android-mobile"] .topbar .page-context {
    display:block !important;
    min-width:0;
    justify-self:start;
  }
  html[data-control-client="android-mobile"] .page-context h1 {
    max-width:none;
    font-size:17px;
    font-weight:760;
    letter-spacing:-.015em;
  }
  html[data-control-client="android-mobile"] .page-context h1::before {
    content:"TideView  ";
    color:var(--cyan);
    font-weight:850;
  }
  html[data-control-client="android-mobile"] .topbar .top-actions {
    display:flex !important;
    width:auto;
    gap:7px;
    justify-self:end;
  }
  html[data-control-client="android-mobile"] .topbar .icon-button,
  html[data-control-client="android-mobile"] .topbar #controlMobileMenu,
  html[data-control-client="android-mobile"] .top-actions .server-menu > summary {
    width:40px;
    min-width:40px;
    height:40px;
    min-height:40px;
    padding:0;
    display:grid !important;
    place-items:center;
    border-radius:12px;
  }
  html[data-control-client="android-mobile"] .top-actions .server-menu > summary :is(span,.menu-chevron) { display:none; }
  html[data-control-client="android-mobile"] .server-menu-popover {
    position:fixed;
    z-index:160;
    top:calc(var(--topbar-height) + 8px);
    right:10px;
    width:min(330px,calc(100vw - 20px));
    max-height:calc(100dvh - var(--topbar-height) - var(--mobile-app-nav-height) - 20px);
    overflow:auto;
    padding:16px;
    grid-template-columns:1fr 1fr;
    gap:11px;
    border-radius:18px;
    box-shadow:0 24px 70px rgba(0,0,0,.58);
  }
  html[data-control-client="android-mobile"] .server-menu-popover :is(.theme-picker,.font-picker,.advanced-switch) {
    min-width:0;
    height:auto;
    min-height:48px;
    padding:8px 10px;
    border-radius:12px;
  }
  html[data-control-client="android-mobile"] .server-menu-popover .theme-picker { grid-column:1 / -1; }
  html[data-control-client="android-mobile"] .server-menu-popover .theme-picker > span,
  html[data-control-client="android-mobile"] .server-menu-popover .font-picker > span,
  html[data-control-client="android-mobile"] .server-menu-popover .advanced-switch > span { display:inline; }
  html[data-control-client="android-mobile"] .server-menu-popover select { flex:1; min-width:0; }

  html[data-control-client="android-mobile"] .mobile-app-navigation {
    position:fixed;
    z-index:125;
    inset:auto 0 0;
    height:var(--mobile-app-nav-height);
    padding:6px 8px env(safe-area-inset-bottom, 0px);
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:3px;
    border-top:1px solid color-mix(in srgb,var(--line) 78%,transparent);
    background:color-mix(in srgb,var(--header-bg) 96%,transparent);
    box-shadow:0 -12px 34px rgba(0,0,0,.22);
    backdrop-filter:blur(22px) saturate(1.25);
  }
  html[data-control-client="android-mobile"] .mobile-app-navigation button {
    position:relative;
    min-width:0;
    min-height:54px;
    padding:5px 2px 4px;
    display:grid;
    place-items:center;
    align-content:center;
    gap:3px;
    color:var(--muted);
    border:0;
    border-radius:13px;
    background:transparent;
    font:inherit;
    font-size:10px;
    font-weight:720;
  }
  html[data-control-client="android-mobile"] .mobile-app-navigation button svg { width:21px; height:21px; }
  html[data-control-client="android-mobile"] .mobile-app-navigation button.active,
  html[data-control-client="android-mobile"].control-nav-open #controlMobileMore {
    color:var(--cyan);
    background:color-mix(in srgb,var(--cyan) 11%,transparent);
  }
  html[data-control-client="android-mobile"] .mobile-app-navigation button.active::before,
  html[data-control-client="android-mobile"].control-nav-open #controlMobileMore::before {
    content:"";
    position:absolute;
    top:1px;
    width:24px;
    height:3px;
    border-radius:999px;
    background:var(--cyan);
    box-shadow:0 0 12px color-mix(in srgb,var(--cyan) 54%,transparent);
  }

  html[data-control-client="android-mobile"] .sidebar,
  html[data-control-client="android-mobile"].control-sidebar-collapsed .sidebar {
    z-index:150;
    top:var(--topbar-height);
    bottom:var(--mobile-app-nav-height);
    width:min(330px,88vw);
    display:flex !important;
    border-right-color:color-mix(in srgb,var(--line) 75%,transparent);
    background:var(--bg-soft);
    box-shadow:18px 0 50px rgba(0,0,0,.5);
    transform:translateX(-102%);
  }
  html[data-control-client="android-mobile"] .sidebar.open { transform:translateX(0); }
  html[data-control-client="android-mobile"] .sidebar nav { padding:10px; }
  html[data-control-client="android-mobile"] .nav-group { margin:14px 12px 4px; }
  html[data-control-client="android-mobile"] :is(.nav-item,.nav-launch) {
    min-height:48px;
    height:48px;
    border-radius:12px;
    font-size:14px;
  }
  html[data-control-client="android-mobile"] .sidebar-scrim,
  html[data-control-client="android-mobile"].control-nav-open .sidebar-scrim {
    position:fixed;
    z-index:140;
    inset:var(--topbar-height) 0 var(--mobile-app-nav-height) 0;
    background:rgba(0,0,0,.64);
    backdrop-filter:blur(2px);
  }
  html[data-control-client="android-mobile"].control-nav-open .sidebar-scrim { display:block !important; }

  html[data-control-client="android-mobile"] main {
    margin-left:0;
    min-height:100dvh;
    padding:calc(var(--topbar-height) + 14px) 12px calc(var(--mobile-app-nav-height) + 22px);
  }
  html[data-control-client="android-mobile"] .page { min-width:0; }
  html[data-control-client="android-mobile"] .panel {
    margin-bottom:12px;
    padding:15px;
    border-radius:16px;
    box-shadow:0 10px 28px rgba(0,0,0,.12);
  }
  html[data-control-client="android-mobile"] :is(.section-toolbar,.panel-head,.activity-section-head) { gap:10px; }
  html[data-control-client="android-mobile"] :is(.section-toolbar h2,.panel-head h2) { font-size:20px; }
  html[data-control-client="android-mobile"] :is(.section-toolbar p,.panel-head p) { font-size:12px; line-height:1.48; }
  html[data-control-client="android-mobile"] .section-tabs {
    margin-right:-12px;
    margin-left:-12px;
    padding:2px 12px 7px;
    gap:7px;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }
  html[data-control-client="android-mobile"] .section-tabs button { min-width:max-content; scroll-snap-align:start; border-radius:12px; }
  html[data-control-client="android-mobile"] :is(.button,.icon-button) { min-height:46px; border-radius:12px; }
  html[data-control-client="android-mobile"] .button-row { gap:8px; }
  html[data-control-client="android-mobile"] .button-row .button { flex:1 1 138px; }

  html[data-control-client="android-mobile"] .page[data-page="overview"] .overview-status-panel { margin-bottom:20px; }
  html[data-control-client="android-mobile"] .page[data-page="overview"] .overview-status-head { margin:0 2px 12px; }
  html[data-control-client="android-mobile"] .page[data-page="overview"] .overview-status-head h2 { font-size:21px; }
  html[data-control-client="android-mobile"] .page[data-page="overview"] .overview-status-head p:not(.eyebrow) { font-size:12px; }
  html[data-control-client="android-mobile"] .page[data-page="overview"] .command-status-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1px;
    border-radius:16px;
  }
  html[data-control-client="android-mobile"] .page[data-page="overview"] .command-status-grid .metric:nth-child(n) {
    min-height:116px;
    padding:14px 12px;
    border-right:1px solid var(--overview-hairline);
    border-bottom:1px solid var(--overview-hairline);
  }
  html[data-control-client="android-mobile"] .page[data-page="overview"] .command-status-grid .metric:nth-child(2n) { border-right:0; }
  html[data-control-client="android-mobile"] .page[data-page="overview"] .command-status-grid .metric:nth-last-child(-n+2) { border-bottom:0; }
  html[data-control-client="android-mobile"] .page[data-page="overview"] .command-status-grid .metric strong { font-size:22px; }
  html[data-control-client="android-mobile"] .page[data-page="overview"] .command-status-grid .metric small { font-size:9px; }
  html[data-control-client="android-mobile"] .page[data-page="overview"] .activity-tuner-list { grid-template-columns:1fr; }
  html[data-control-client="android-mobile"] .activity-section-head { margin-top:22px; align-items:flex-start; }
  html[data-control-client="android-mobile"] .mobile-gpu-encoder { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:11px; padding-top:8px; border-top:1px solid var(--line); }
  html[data-control-client="android-mobile"] .mobile-gpu-encoder span { color:var(--muted); font-size:10px; }
  html[data-control-client="android-mobile"] .mobile-gpu-encoder strong { font-size:14px; font-weight:700; }

  html[data-control-client="android-mobile"] .activity-stream-table tbody tr {
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:0;
    margin-bottom:10px;
    border-radius:16px;
  }
  html[data-control-client="android-mobile"] .activity-stream-table tbody td {
    min-height:0;
    padding:9px 12px;
    font-size:12px;
    line-height:1.35;
  }
  html[data-control-client="android-mobile"] .activity-stream-table tbody td::before { margin-bottom:3px; font-size:9px; }
  html[data-control-client="android-mobile"] .activity-stream-table tbody td:nth-child(1) {
    grid-column:1 / -1;
    padding:13px 12px 11px;
  }
  html[data-control-client="android-mobile"] .activity-stream-table tbody td:nth-child(1)::before,
  html[data-control-client="android-mobile"] .activity-stream-table tbody td:nth-child(4)::before { display:none; }
  html[data-control-client="android-mobile"] .activity-stream-table tbody td:nth-child(2),
  html[data-control-client="android-mobile"] .activity-desktop-viewer { display:none; }
  html[data-control-client="android-mobile"] .activity-mobile-primary { display:flex; align-items:center; gap:12px; min-width:0; }
  html[data-control-client="android-mobile"] .activity-mobile-channel-logo {
    flex:0 0 88px; width:88px; height:60px; object-fit:contain;
    padding:0; border:0; background:transparent;
  }
  html[data-control-client="android-mobile"] .activity-mobile-primary-text { display:flex; flex-direction:column; min-width:0; gap:3px; }
  html[data-control-client="android-mobile"] .activity-mobile-primary-text > strong { font-size:16px; line-height:1.18; overflow-wrap:anywhere; }
  html[data-control-client="android-mobile"] .activity-mobile-user { color:var(--muted); font-size:12px; }
  html[data-control-client="android-mobile"] .activity-mobile-user b { color:var(--text); font-size:13px; }
  html[data-control-client="android-mobile"] .activity-mobile-primary-text small { color:var(--muted); font-size:11px; line-height:1.3; }
  html[data-control-client="android-mobile"] .activity-mobile-specs {
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 12px;
    margin-top:11px; padding-top:10px; border-top:1px solid var(--line);
  }
  html[data-control-client="android-mobile"] .activity-mobile-specs > div { min-width:0; }
  html[data-control-client="android-mobile"] .activity-mobile-specs span { display:block; color:var(--muted); font-size:9px; font-weight:750; text-transform:uppercase; }
  html[data-control-client="android-mobile"] .activity-mobile-specs strong { display:block; margin-top:2px; font-size:11px; font-weight:650; overflow-wrap:anywhere; }
  html[data-control-client="android-mobile"] .activity-stream-table tbody td:nth-child(3) { grid-column:1 / -1; }
  html[data-control-client="android-mobile"] .activity-stream-table tbody td:nth-child(3) strong { font-size:12px; }
  html[data-control-client="android-mobile"] .activity-stream-table tbody td:nth-child(4) { grid-column:1 / -1; padding:0 12px 9px; }
  html[data-control-client="android-mobile"] .activity-stream-table tbody td:nth-child(4) > .delivery-pill,
  html[data-control-client="android-mobile"] .activity-stream-table tbody td:nth-child(4) > .activity-delivery-detail { display:none; }
  html[data-control-client="android-mobile"] .activity-mobile-detail-toggle { border-top:1px solid var(--line); padding-top:8px; }
  html[data-control-client="android-mobile"] .activity-mobile-detail-toggle summary { color:var(--cyan); cursor:pointer; font-size:11px; font-weight:700; }
  html[data-control-client="android-mobile"] .activity-mobile-detail-toggle .activity-mobile-details { margin-top:10px; gap:6px; }
  html[data-control-client="android-mobile"] .activity-mobile-detail-toggle .activity-mobile-details > div { grid-template-columns:90px minmax(0,1fr); }
  html[data-control-client="android-mobile"] .activity-mobile-detail-toggle .activity-mobile-details :is(dt,dd) { font-size:11px; }
  html[data-control-client="android-mobile"] .activity-stream-table tbody td:nth-child(5) { grid-column:1; min-width:0; border-bottom:0; }
  html[data-control-client="android-mobile"] .activity-stream-table tbody td:nth-child(6) { grid-column:2; text-align:right; border-bottom:0; }
  html[data-control-client="android-mobile"] .activity-stream-table tbody td:nth-child(7) { grid-column:1 / -1; padding-top:0; }
  html[data-control-client="android-mobile"] .activity-stream-table tbody td:nth-child(5) .activity-state-timer { margin-top:3px; font-size:10px; }
  html[data-control-client="android-mobile"] .activity-stream-table .compact-actions { justify-content:flex-end; }
  html[data-control-client="android-mobile"] .activity-stream-table .compact-actions .button { width:auto; min-width:84px; min-height:38px; padding:7px 10px; font-size:11px; }
  html[data-control-client="android-mobile"] .activity-stream-table .activity-background-row { background:color-mix(in srgb,var(--panel-bg) 80%,var(--bg)); }
  html[data-control-client="android-mobile"] .activity-stream-table .activity-background-row td:nth-child(3),
  html[data-control-client="android-mobile"] .activity-stream-table .activity-background-row td:nth-child(4),
  html[data-control-client="android-mobile"] .activity-stream-table .activity-background-row td:nth-child(6),
  html[data-control-client="android-mobile"] .activity-stream-table .activity-background-row td:nth-child(7) { display:none; }
  html[data-control-client="android-mobile"] .activity-stream-table .activity-background-row td:nth-child(5) { grid-column:1 / -1; padding-top:7px; }

  html[data-control-client="android-mobile"] .history-table { border:0; overflow:visible; background:transparent; box-shadow:none; }
  html[data-control-client="android-mobile"] .history-table table,
  html[data-control-client="android-mobile"] .history-table tbody { display:block; width:100%; min-width:0; }
  html[data-control-client="android-mobile"] .history-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  html[data-control-client="android-mobile"] .history-table tbody tr {
    margin-bottom:10px;
    padding:11px 12px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px 12px;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--panel-bg);
  }
  html[data-control-client="android-mobile"] .history-table tbody td {
    display:block;
    min-width:0;
    padding:0;
    border:0;
    white-space:normal;
    overflow-wrap:anywhere;
  }
  html[data-control-client="android-mobile"] .history-table tbody td:nth-child(3),
  html[data-control-client="android-mobile"] .history-table tbody td:nth-child(4),
  html[data-control-client="android-mobile"] .history-table tbody td:nth-child(7),
  html[data-control-client="android-mobile"] .history-table tbody td[colspan] { grid-column:1 / -1; }
  html[data-control-client="android-mobile"] .history-table tbody td::before {
    display:block;
    margin-bottom:3px;
    color:var(--muted);
    font-size:9px;
    font-weight:820;
    text-transform:uppercase;
  }
  html[data-control-client="android-mobile"] .history-table tbody td:nth-child(1):not([colspan])::before { content:"When"; }
  html[data-control-client="android-mobile"] .history-table tbody td:nth-child(2)::before { content:"User"; }
  html[data-control-client="android-mobile"] .history-table tbody td:nth-child(3)::before { content:"Played"; }
  html[data-control-client="android-mobile"] .history-table tbody td:nth-child(4)::before { content:"Client & source"; }
  html[data-control-client="android-mobile"] .history-table tbody td:nth-child(5)::before { content:"Delivery"; }
  html[data-control-client="android-mobile"] .history-table tbody td:nth-child(6)::before { content:"Result"; }
  html[data-control-client="android-mobile"] .history-table tbody td:nth-child(7)::before { content:"Progress / error"; }

  html[data-control-client="android-mobile"] :is(.form-grid,.remote-main-grid,.transcoder-processing-grid,.guide-main-grid,.dvr-layout) { grid-template-columns:minmax(0,1fr); }
  html[data-control-client="android-mobile"] :is(input,select,textarea) { font-size:16px; }
  html[data-control-client="android-mobile"] .table-shell:not(.activity-stream-table):not(.history-table) {
    max-width:100%;
    overflow:auto;
    border-radius:14px;
    overscroll-behavior-x:contain;
  }
  html[data-control-client="android-mobile"] dialog {
    width:calc(100vw - 16px);
    max-width:calc(100vw - 16px);
    max-height:calc(100dvh - 18px);
    margin:auto auto 8px;
    border-radius:22px 22px 16px 16px;
  }
}

html[data-control-client="android-mobile"][data-control-theme="cinema"] .topbar,
html[data-control-client="android-mobile"][data-control-theme="cinema"] .mobile-app-navigation {
  border-color:rgba(229,160,13,.28);
  background:rgba(12,12,12,.97);
}
html[data-control-client="android-mobile"][data-control-theme="cinema"] .panel,
html[data-control-client="android-mobile"][data-control-theme="cinema"] .history-table tbody tr {
  border-color:rgba(229,160,13,.2);
  background:linear-gradient(145deg,rgba(229,160,13,.035),var(--panel-bg));
}

/* Compact operational header and motion tied to real server activity. */
html[data-control-ui="updated"] .horizon-welcome { align-items:center; justify-content:space-between; gap:24px; padding:0 0 18px; margin:0; border:0; background:none; min-height:0; }
html[data-control-ui="updated"] .horizon-kicker { display:flex; align-items:center; flex-wrap:wrap; gap:18px; font-size:10px; color:var(--muted); }
html[data-control-ui="updated"] .horizon-live { display:flex; align-items:center; gap:8px; color:var(--green); }
html[data-control-ui="updated"] .horizon-live::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; animation:live-beacon 2.6s ease-out infinite; }
html[data-control-ui="updated"] .horizon-live.is-stale { color:var(--gold); }
html[data-control-ui="updated"] .horizon-live.is-stale::before { animation:none; }
html[data-control-ui="updated"] #horizonTitle { display:flex; gap:17px; align-items:center; margin:10px 0 8px; font-size:32px; font-weight:550; line-height:1.15; letter-spacing:-1.1px; }
html[data-control-ui="updated"] .horizon-server { display:flex; flex-wrap:wrap; gap:14px; font-size:11px; color:var(--muted); }
html[data-control-ui="updated"] .horizon-server > span { display:flex; align-items:center; gap:7px; }
html[data-control-ui="updated"] .horizon-server strong { font-weight:500; color:var(--muted-strong); }
html[data-control-ui="updated"] .horizon-server svg { width:13px; height:13px; }
html[data-control-ui="updated"] .horizon-server small { font-size:10px; }
html[data-control-ui="updated"] .horizon-actions { display:flex; gap:10px; flex-wrap:wrap; }
html[data-control-ui="updated"] .horizon-actions svg { width:15px; height:15px; }
html[data-control-ui="updated"] .overview-shortcuts { padding-bottom:13px; margin-bottom:18px; border-bottom:1px solid var(--line); }
html[data-control-ui="updated"] .overview-status-head { margin-bottom:12px; }
html[data-control-ui="updated"] .overview-status-head .eyebrow { display:none; }
html[data-control-ui="updated"] .overview-status-head h2 { font-size:15px; color:var(--muted-strong); }
html[data-control-ui="updated"] .page[data-page="overview"] .command-status-grid .metric:nth-child(n) { min-height:126px; padding:16px 18px; }
html[data-control-ui="updated"] .page[data-page="overview"] .command-status-grid .metric:nth-child(n+5) { min-height:192px; }
html[data-control-ui="updated"] .page[data-page="overview"] .command-status-grid .metric:nth-child(1) { order:5; display:flex; flex-direction:column; }
html[data-control-ui="updated"] .page[data-page="overview"] .command-status-grid .metric:nth-child(2) { order:1; }
html[data-control-ui="updated"] .page[data-page="overview"] .command-status-grid .metric:nth-child(3) { order:2; }
html[data-control-ui="updated"] .page[data-page="overview"] .command-status-grid .metric:nth-child(4) { order:3; }
html[data-control-ui="updated"] .page[data-page="overview"] .command-status-grid .metric:nth-child(5) { order:0; min-height:126px; }
html[data-control-ui="updated"] .page[data-page="overview"] .command-status-grid .metric:nth-child(6) { order:6; }
html[data-control-ui="updated"] .page[data-page="overview"] .command-status-grid .metric:nth-child(7) { order:7; }
html[data-control-ui="updated"] .page[data-page="overview"] .command-status-grid .metric:nth-child(8) { order:8; }
html[data-control-ui="updated"] .viewer-capacity-bars { gap:12px; margin-top:12px; }
html[data-control-ui="updated"] .viewer-capacity-bars > div { min-width:0; flex:1; }
html[data-control-ui="updated"] .viewer-capacity-bars span { font-size:9px !important; letter-spacing:0 !important; font-weight:400 !important; }
html[data-control-ui="updated"] .viewer-capacity-bars meter { display:block; width:100%; height:5px; margin-top:4px; }
html[data-control-ui="updated"] meter::-webkit-meter-bar { background:var(--surface-3); border:0; }
html[data-control-ui="updated"] meter::-webkit-meter-optimum-value { background:linear-gradient(90deg,var(--cyan),#96baf1); transition:width .7s ease; }
html[data-control-ui="updated"] .work-breakdown { flex-direction:column; gap:5px; margin-top:auto; padding-top:14px; }
html[data-control-ui="updated"] .work-breakdown span { display:flex; justify-content:space-between; font-size:10px !important; font-weight:400 !important; letter-spacing:0 !important; }
html[data-control-ui="updated"] .work-breakdown b { color:var(--text); font-weight:550; }
html[data-control-ui="updated"] .live-wave { display:flex; height:23px; gap:3px; align-items:center; }
html[data-control-ui="updated"] .live-wave i { display:block; height:18px; width:3px; border-radius:3px; background:var(--cyan); transform:scaleY(.45); animation:live-wave 1.2s ease-in-out infinite alternate; }
html[data-control-ui="updated"] .live-wave i:nth-child(2) { animation-delay:-.6s; height:24px; }
html[data-control-ui="updated"] .live-wave i:nth-child(3) { animation-delay:-.3s; height:14px; }
html[data-control-ui="updated"] .live-wave i:nth-child(4) { animation-delay:-.9s; height:22px; }
html[data-control-ui="updated"] .live-wave i:nth-child(5) { animation-delay:-.45s; height:12px; }
html[data-control-ui="updated"] .live-wave.is-idle i { animation:none; transform:scaleY(.2); }
html[data-control-ui="updated"] .page.active { animation:workspace-enter .32s cubic-bezier(.22,.7,.32,1); }
html[data-control-ui="updated"] .command-status-grid .metric { animation:metric-enter .45s both; }
html[data-control-ui="updated"] .command-status-grid .metric:nth-child(2n) { animation-delay:.06s; }
html[data-control-ui="updated"] .command-status-grid .metric:nth-child(3n) { animation-delay:.12s; }
html[data-control-ui="updated"] .command-status-grid .metric:nth-child(4n) { animation-delay:.18s; }
html[data-control-ui="updated"] :is(.metric,.top-user-card,.source-card,.interface-option) { transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease; }
html[data-control-ui="updated"] :is(.metric,.top-user-card,.source-card,.interface-option):hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--cyan) 48%,var(--line)) !important; box-shadow:0 8px 26px #0003; }
html[data-control-ui="updated"] .nav-item { transition:background .2s,color .2s; }
html[data-control-ui="updated"] .nav-item.active .nav-icon { animation:nav-icon-in .3s ease; }
html[data-control-ui="updated"] .metric-trend polyline { animation:none; }
html[data-control-ui="updated"] .metric-trend svg { background:linear-gradient(0deg,color-mix(in srgb,var(--cyan) 5%,transparent),transparent); }
html[data-control-ui="updated"] .state-label:is(.streaming,.watching,.listening)::before { animation:live-beacon 2.6s ease-out infinite; }
html[data-control-ui="updated"] .button.primary:hover { box-shadow:0 4px 20px color-mix(in srgb,var(--cyan) 16%,transparent); }
@keyframes live-wave { to { transform:scaleY(1); } }
@keyframes live-beacon { 0% { box-shadow:0 0 0 0 #81e5bd40; } 70%,100% { box-shadow:0 0 0 6px #81e5bd00; } }
@keyframes workspace-enter { from { opacity:.65; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
@keyframes metric-enter { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:translateY(0); } }
@keyframes nav-icon-in { from { transform:scale(.85); } to { transform:scale(1); } }
@keyframes trace-in { from { stroke-dashoffset:360; } to { stroke-dashoffset:0; } }
@media (max-width:760px) {
  html[data-control-ui="updated"] .horizon-welcome { align-items:flex-start; flex-wrap:wrap; gap:15px; padding:0 0 14px; }
  html[data-control-ui="updated"] #horizonTitle { font-size:27px; }
  html[data-control-ui="updated"] .horizon-actions .button { min-height:36px; font-size:11px; }
  html[data-control-ui="updated"] .horizon-server { gap:8px; }
  html[data-control-ui="updated"] .page[data-page="overview"] .command-status-grid .metric:nth-child(n) { padding:15px 12px; }
  html[data-control-ui="updated"] .page[data-page="overview"] .command-status-grid .metric:nth-child(n+6) { min-height:200px; }
}
@media (prefers-reduced-motion:reduce) {
  html[data-control-ui="updated"] *,html[data-control-ui="updated"] *::before,html[data-control-ui="updated"] *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* Quiet header, focused actions, and activity shared by both interfaces. */
html .topbar .page-context[hidden],
html[data-control-ui="updated"] .topbar .page-context[hidden],
#saveState[hidden] { display:none !important; }
.topbar .top-actions { grid-column:3; }
.control-activity-button { position:relative; flex-shrink:0; overflow:visible; }
.control-activity-button.has-activity { color:var(--cyan); }
.control-activity-button.has-activity::before {
  content:"";
  position:absolute;
  inset:4px;
  border:2px solid transparent;
  border-top-color:#32d4c5;
  border-right-color:#32d4c5;
  border-bottom-color:#ff9234;
  border-radius:50%;
  pointer-events:none;
  animation:control-activity-ring-spin 3.2s linear infinite;
}
.control-activity-button.has-activity::after {
  content:"";
  position:absolute;
  inset:8px;
  border:1px solid transparent;
  border-top-color:#ff9234;
  border-left-color:#ff9234;
  border-bottom-color:#32d4c5;
  border-radius:50%;
  pointer-events:none;
  animation:control-activity-ring-spin-reverse 2.4s linear infinite;
}
.control-activity-button.has-activity > svg { z-index:1; color:#dffdfa; animation:control-activity-orbit 4.6s linear infinite; filter:drop-shadow(0 0 3px #32d4c5) drop-shadow(0 0 3px rgba(255,146,52,.72)); }
.control-activity-count { position:absolute; z-index:2; right:-11px; top:1px; min-width:15px; height:15px; padding:0 3px; display:grid; place-items:center; border-radius:8px; background:#ff9234; color:#0b1210; font-size:9px; font-weight:800; line-height:1; }
.control-activity-count[hidden] { display:none; }
@keyframes control-activity-orbit { to { transform:rotate(360deg); } }
@keyframes control-activity-ring-spin { to { transform:rotate(360deg); } }
@keyframes control-activity-ring-spin-reverse { to { transform:rotate(-360deg); } }
dialog.control-activity-drawer { inset:0 0 0 auto; margin:0; box-sizing:border-box; width:min(420px,100vw); max-width:100vw; height:100dvh; max-height:100dvh; padding:26px; border:0; border-left:1px solid var(--line); border-radius:0; background:var(--panel-bg,var(--surface)); color:var(--text); box-shadow:-20px 0 80px #0005; }
dialog.control-activity-drawer[open] { display:flex; flex-direction:column; gap:16px; animation:control-drawer-in .22s ease-out; }
.control-activity-drawer::backdrop { background:#0007; backdrop-filter:blur(3px); }
.control-activity-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.control-activity-heading h2 { margin:4px 0 0; font-size:24px; }
.control-activity-status { margin:0; font-size:12px; color:var(--muted); }
.control-activity-list { flex:1; overflow-y:auto; min-height:0; }
.control-activity-item { display:flex; align-items:flex-start; gap:12px; padding:18px 0; border-bottom:1px solid var(--line); }
.control-activity-item > div { min-width:0; }
.control-activity-item strong { display:block; font-size:14px; line-height:1.5; overflow-wrap:anywhere; }
.control-activity-item small { display:block; margin-top:5px; font-size:12px; color:var(--muted); line-height:1.6; overflow-wrap:anywhere; }
.control-activity-symbol { color:var(--cyan); padding-top:4px; }
.control-activity-empty { padding:30px 0; }
.control-activity-empty p { color:var(--muted); font-size:13px; }
.page-save-feedback { display:inline-block; color:var(--muted); font-size:11px; line-height:1.4; align-self:center; margin:0 8px; }
.page-save-feedback:empty { display:none; }
.button.has-unsaved-changes { outline:2px solid var(--cyan); outline-offset:3px; }
@keyframes control-drawer-in { from { transform:translateX(30px); opacity:0; } to { transform:none; opacity:1; } }
@media (prefers-reduced-motion:reduce) {
  .control-activity-button.has-activity::before,
  .control-activity-button.has-activity::after,
  .control-activity-button.has-activity > svg,
  dialog.control-activity-drawer[open] { animation:none; }
}
html[data-control-ui="updated"][data-control-theme="cinema"] .interface-option:has(input:checked) { background:var(--deep-bg); }
html[data-control-ui="updated"] dialog.control-activity-drawer { border:0; border-left:1px solid var(--line); border-radius:0; }

/* Matching CPU/GPU metrics with a compact physical temperature reading. */
.metric-temperature { display:flex; align-items:center; gap:8px; margin-top:10px; }
.metric-temperature > span { color:var(--muted); font-size:11px; }
.metric-temperature > strong { color:var(--text); font-size:14px; font-weight:600; }
html[data-control-ui="updated"] .metric-temperature > strong { font-size:14px; }

/* Explicit scales and a solid plot background keep peaks easy to compare. */
html[data-control-ui="updated"] .metric-trend svg { height:88px; background:transparent; }
html[data-control-ui="updated"] .metric-trend .trend-grid { stroke:var(--muted); stroke-opacity:.65; stroke-width:1; vector-effect:non-scaling-stroke; }
html[data-control-ui="updated"] .metric-trend .trend-axis { fill:var(--muted-strong); font:9px "Segoe UI",sans-serif; }
html[data-control-ui="updated"] .metric-trend polyline { stroke-width:2; }

.metric-stack { display:grid; gap:12px; grid-template-rows:minmax(0,1fr) auto; min-width:0; }
html[data-control-ui="updated"] .command-status-grid > .metric-stack { order:5; }
html[data-control-ui="updated"] .page[data-page="overview"] .command-status-grid .metric-stack > .metric { order:0; min-height:0; padding:14px 18px; }
html[data-control-ui="updated"] .metric-stack .work-breakdown { margin-top:8px; }
html[data-control-ui="updated"] .metric-stack .temperature-metric .cpu-metric-pair { margin-top:7px; }
html[data-control-ui="updated"] .metric-stack .temperature-metric .cpu-metric-pair strong { font-size:22px !important; }

.xmltv-source-row > div { min-width:0; }
.xmltv-source-url { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:55vw; }
#xmlTvGuideForm { display:grid; gap:18px; }
#xmlTvGuideForm label { display:grid; gap:7px; }
#xmlTvGuideForm .checkbox-row { display:flex; align-items:center; }
#xmlTvGuideFeedback { margin:0; color:var(--muted); font-size:12px; }
#xmlTvGuideFeedback:empty { display:none; }
@media(max-width:700px) { .xmltv-source-row { flex-wrap:wrap; }.xmltv-source-row .row-actions { flex-wrap:wrap; } }