:root {
  color-scheme: dark;
  --bg: #0c1017;
  --panel: #151b25;
  --panel-2: #1b2330;
  --line: #2a3545;
  --text: #f3f6fa;
  --muted: #9aa8b8;
  --accent: #62d9b0;
  --accent-2: #2aa67e;
  --danger: #ff756f;
  font-family: Inter, "Microsoft YaHei UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
.hidden { display: none !important; }
.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; }
body { margin: 0; background: radial-gradient(circle at 18% 0, #17283a, var(--bg) 36rem); color: var(--text); min-height: 100vh; }
button, input, select { font: inherit; }
button, .file-button { border: 1px solid var(--line); background: var(--panel-2); color: var(--text); border-radius: 9px; padding: .65rem .85rem; cursor: pointer; }
button:hover:not(:disabled), .file-button:hover { border-color: #4c6077; background: #222d3d; }
button:disabled { cursor: default; opacity: .45; }
button.primary { background: var(--accent-2); border-color: var(--accent); color: #03130e; font-weight: 700; }
button.danger { color: #ffc2bf; }
input, select { min-width: 0; border: 1px solid var(--line); background: #0f151e; color: var(--text); border-radius: 8px; padding: .68rem .75rem; }
input:focus, select:focus, button:focus-visible, .video-shell:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.file-button input { display: none; }
.topbar { position: relative; z-index: 5; height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; border-bottom: 1px solid var(--line); background: rgba(12,16,23,.9); backdrop-filter: blur(18px); }
.brand, .connection, .topbar-actions, .account-cluster { display: flex; align-items: center; gap: 12px; }
.topbar-actions { min-width: 0; }
.connection { min-width: 0; padding-right: 12px; border-right: 1px solid var(--line); }
.account-cluster { padding: 5px 6px 5px 12px; border-radius: 12px; background: rgba(255,255,255,.025); }
.brand > span:last-child { display: grid; }
.brand small { color: var(--muted); margin-top: 2px; }
.account-name { color: var(--muted); font-size: .88rem; }
.account-manage-button { padding: .48rem .7rem; color: var(--accent); border-color: rgba(98,217,176,.32); background: rgba(98,217,176,.08); }
.mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--accent), #60a5fa); color: #07130f; font-weight: 900; font-size: 20px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #697586; box-shadow: 0 0 0 4px rgba(105,117,134,.12); }
.dot.online { background: var(--accent); box-shadow: 0 0 0 4px rgba(98,217,176,.14); }
.dot.pending { background: #f6c762; box-shadow: 0 0 0 4px rgba(246,199,98,.14); }
.dot.connecting { background: #f6c762; box-shadow: 0 0 0 4px rgba(246,199,98,.14); }
.dot.busy { background: #60a5fa; box-shadow: 0 0 0 4px rgba(96,165,250,.14); }
.login-view { min-height: calc(100vh - 72px); display: grid; place-items: center; padding: 24px; }
.login-card { width: min(420px, 100%); display: grid; gap: 14px; padding: 30px; border: 1px solid var(--line); border-radius: 18px; background: rgba(21,27,37,.96); box-shadow: 0 24px 80px rgba(0,0,0,.34); }
.login-card h1 { margin: 0; text-align: center; font-size: 1.45rem; }
.login-card p { margin: -4px 0 4px; text-align: center; color: var(--muted); line-height: 1.55; }
.login-card label { display: grid; gap: 7px; color: var(--muted); }
.login-mark { margin: 0 auto; width: 52px; height: 52px; font-size: 24px; }
.login-error { min-height: 1.4em; color: #ffaaa5; text-align: center; font-size: .9rem; }
.workspace { display: grid; grid-template-columns: 232px minmax(380px, 1fr) minmax(440px, 560px); gap: 16px; padding: 16px; height: calc(100vh - 72px); }
.workspace.read-only { grid-template-columns: 232px minmax(380px, 1fr); }
.device-sidebar { min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 16px; background: rgba(21,27,37,.92); overflow: hidden; }
.device-sidebar-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px; border-bottom: 1px solid var(--line); }
.device-sidebar-heading > div { display: grid; gap: 3px; }
.device-sidebar-heading small, .device-sidebar-note { color: var(--muted); font-size: .76rem; line-height: 1.45; }
.device-sidebar-heading button { padding: .45rem .65rem; }
.device-summary { display: flex; gap: 12px; padding: 7px 12px 2px; color: var(--muted); font-size: .72rem; }
.device-summary span { padding: 0; }
.device-summary strong { color: var(--text); font-size: .82rem; margin-right: 2px; }
.device-search { display: block; padding: 6px 12px; }
.device-search input { width: 100%; padding: .55rem .65rem; }
.device-offline-toggle { margin: 2px 12px 5px; padding: .36rem .55rem; border: 0; background: transparent; color: var(--muted); font-size: .74rem; text-align: left; }
.device-offline-toggle:hover, .device-offline-toggle[aria-pressed="true"] { color: var(--text); background: #17202c; }
.device-list { flex: 1; min-height: 120px; overflow: auto; padding: 4px 8px; }
.device-card { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 4px; min-height: 38px; border-bottom: 1px solid rgba(52,65,82,.72); }
.device-card.selected { background: rgba(98,217,176,.08); }
.device-card.selected::before { content: ""; position: absolute; inset: 5px auto 5px 0; width: 2px; background: var(--accent); }
.device-card.busy:not(.selected) { background: rgba(96,165,250,.045); }
.device-card.just-online { animation: device-online-arrival 1s ease-in-out 10; }
.device-card.just-online::after { content: "刚上线"; position: absolute; right: 5px; top: -6px; z-index: 1; padding: 1px 4px; border-radius: 999px; background: var(--accent); color: #06130e; font-size: .58rem; font-weight: 800; letter-spacing: .02em; }
@keyframes device-online-arrival {
  0%, 100% { background: rgba(98,217,176,.06); box-shadow: inset 3px 0 0 rgba(98,217,176,.15); }
  50% { background: rgba(98,217,176,.26); box-shadow: inset 3px 0 0 var(--accent), 0 0 0 1px rgba(98,217,176,.4); }
}
@media (prefers-reduced-motion: reduce) { .device-card.just-online { animation: none; box-shadow: inset 3px 0 0 var(--accent); } }
.device-card-main { min-width: 0; display: grid; grid-template-columns: 8px minmax(0,1fr); align-items: center; gap: 7px; border: 0; background: transparent; text-align: left; padding: 7px 5px; }
.device-card-main > span:last-child { min-width: 0; display: flex; align-items: baseline; gap: 6px; }
.device-card-main strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.device-card-main small { flex: 0 1 auto; max-width: 54px; overflow: hidden; color: var(--muted); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.device-actions { display: flex; gap: 2px; padding: 2px; }
.device-action { min-width: auto; padding: .22rem .32rem; border-color: transparent; background: transparent; font-size: .67rem; }
.device-action.danger { color: #ff9e9e; }
.device-empty { padding: 18px 10px; color: var(--muted); font-size: .85rem; line-height: 1.55; text-align: center; }
.remote-column, .admin-column { min-height: 0; }
.remote-column { display: flex; min-width: 0; flex-direction: column; align-items: center; gap: 10px; overflow: auto; }
.remote-session-header { display: flex; width: min(100%, 760px); min-height: 46px; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 4px; }
.remote-session-header > div { min-width: 0; display: grid; gap: 3px; }
.remote-session-header small { color: var(--muted); font-size: .72rem; }
.remote-session-header strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-pill { flex: 0 0 auto; padding: 5px 9px; border: 1px solid #46556a; border-radius: 999px; color: var(--muted); font-size: .73rem; font-weight: 700; }
.session-pill.online { color: var(--accent); border-color: rgba(98,217,176,.35); background: rgba(98,217,176,.08); }
.session-pill.pending { color: #f6c762; border-color: rgba(246,199,98,.35); background: rgba(246,199,98,.08); }
.session-pill.connecting { color: #f6c762; border-color: rgba(246,199,98,.35); background: rgba(246,199,98,.08); }
.session-pill.busy { color: #8fc1ff; border-color: rgba(96,165,250,.35); background: rgba(96,165,250,.08); }
.screen-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; justify-content: center; gap: 12px; width: min(100%,760px); }
.video-shell { --phone-width: 340px; --phone-aspect: 1240 / 2772; position: relative; display: grid; place-items: center; flex: 0 0 auto; width: min(var(--phone-width), 100%); height: auto; min-width: 0; min-height: 0; aspect-ratio: var(--phone-aspect); overflow: hidden; border: 1px solid #334155; border-radius: 18px; background: #05070a; box-shadow: 0 18px 50px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.025); user-select: none; touch-action: none; }
.video-shell[data-size="compact"] { --phone-width: 300px; --phone-height: 670px; }
.video-shell[data-size="standard"] { --phone-width: 340px; --phone-height: 760px; }
.video-shell[data-size="large"] { --phone-width: 400px; --phone-height: 895px; }
.video-shell:fullscreen { width: 100vw; height: 100vh; max-width: none; max-height: none; border: 0; border-radius: 0; }
#phone-video, #agent-phone-video { width: 100%; height: 100%; object-fit: contain; background: #05070a; }
.agent-video-shell { pointer-events: none; }
.agent-action-overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.agent-action-overlay .agent-tap { fill: rgba(96,165,250,.24); stroke: #7dd3fc; stroke-width: 7; vector-effect: non-scaling-stroke; }
.agent-action-overlay .agent-start { fill: #f6c762; stroke: #171006; stroke-width: 3; vector-effect: non-scaling-stroke; }
.agent-action-overlay .agent-end { fill: #62d9b0; stroke: #052016; stroke-width: 3; vector-effect: non-scaling-stroke; }
.agent-action-overlay .agent-path { fill: none; stroke: #62d9b0; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 18 11; vector-effect: non-scaling-stroke; }
.agent-action-overlay .pending { opacity: .55; }
.agent-action-overlay .failed { stroke: #ff6b6b; fill: rgba(255,107,107,.24); }
.agent-action-overlay text { fill: #fff; stroke: rgba(0,0,0,.88); stroke-width: 4; paint-order: stroke; font: 700 44px system-ui,sans-serif; text-anchor: middle; dominant-baseline: central; }
.agent-screen-label { position: absolute; inset: 8px auto auto 8px; z-index: 2; padding: 4px 7px; border: 1px solid rgba(125,211,252,.36); border-radius: 6px; background: rgba(5,7,10,.78); color: #bde9ff; font-size: .72rem; font-weight: 700; }
.agent-action-log { position: absolute; inset: auto 7px 7px 7px; z-index: 2; display: grid; gap: 2px; max-height: 29%; margin: 0; padding: 5px 7px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; background: rgba(5,7,10,.76); color: #d6e0eb; font: 600 .66rem/1.35 ui-monospace,SFMono-Regular,Consolas,monospace; list-style: none; }
.agent-action-log:empty { display: none; }
.agent-action-log li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-action-log li.pending { color: #f6c762; }
.agent-action-log li.failed { color: #ff9e9e; }
/* The agent panel is click-through (pointer-events: none) so the clear control
   has to opt back in explicitly, otherwise it would be unclickable. */
.agent-trace-clear { pointer-events: auto; }
.agent-trace-clear, .agent-trace-record { margin-left: 6px; padding: 1px 7px; border: 1px solid rgba(255,158,158,.55); border-radius: 4px; background: rgba(5,7,10,.85); color: #ff9e9e; font: inherit; font-size: .68rem; cursor: pointer; }
.agent-trace-record { pointer-events: auto; }
.agent-trace-clear:hover { background: rgba(255,158,158,.18); }
.agent-trace-record { border-color: rgba(98,217,176,.55); color: #8bf0cf; }
.agent-trace-record:hover { background: rgba(98,217,176,.16); }
.agent-trace-record.recording { border-color: #ff6b6b; background: rgba(255,107,107,.2); color: #fff; animation: agent-recording-pulse 1.2s ease-in-out infinite; }
.agent-trace-recording-status { margin-left: 5px; color: #f6c762; font-size: .64rem; }
@keyframes agent-recording-pulse { 50% { box-shadow: 0 0 0 3px rgba(255,107,107,.14); } }
.keymap-overlay { position: absolute; inset: 0; pointer-events: none; }
.keymap-marker { position: absolute; display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 8px; border: 2px solid #fff; border-radius: 999px; background: rgba(42,166,126,.88); color: #fff; font-size: .74rem; font-weight: 800; box-shadow: 0 2px 10px rgba(0,0,0,.55); transform: translate(-50%,-50%); }
.keymap-marker.pressed { background: #f6c762; color: #161000; transform: translate(-50%,-50%) scale(1.18); }
.keymap-marker.pending { min-width: 28px; height: 28px; padding: 0; border-style: dashed; background: rgba(246,199,98,.35); color: #fff; }
.video-placeholder { position: absolute; inset: 0; display: grid; place-content: center; gap: 8px; text-align: center; color: var(--muted); pointer-events: none; }
.video-placeholder strong { color: var(--text); font-size: 1.15rem; }
.video-placeholder.hidden { display: none; }
.toolbar { display: flex; width: min(100%, 760px); flex-wrap: wrap; gap: 7px; padding: 8px; border: 1px solid var(--line); border-radius: 13px; background: rgba(21,27,37,.84); }
.toolbar button { flex: 1 0 auto; }
kbd { color: var(--muted); font-size: .72rem; margin-left: 4px; }
.quality-row { display: flex; width: min(100%, 760px); align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: .82rem; }
.stream-panel { padding: 10px 12px; border: 1px solid var(--line); border-radius: 13px; background: rgba(21,27,37,.84); }
.view-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.view-controls label { display: flex; align-items: center; gap: 6px; }
.view-controls select { padding: .38rem .55rem; }
#quality-mode { color: #b7c6d6; white-space: nowrap; }
.stream-health { display: grid; justify-items: end; gap: 5px; white-space: nowrap; }
.quality-row details { text-align: right; }
.quality-row pre { text-align: left; white-space: pre-wrap; max-width: 520px; }
.admin-column { display: grid; grid-template-rows: auto minmax(0,1fr); border: 1px solid var(--line); border-radius: 16px; background: rgba(21,27,37,.92); overflow: hidden; }
.tabs { display: flex; gap: 4px; padding: 8px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs button { border-color: transparent; background: transparent; white-space: nowrap; }
.tabs button.active { color: var(--accent); background: rgba(98,217,176,.1); }
.panel { display: none; overflow: auto; padding: 18px; }
.panel.active { display: block; }
.panel h2 { margin: 0; font-size: 1.05rem; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.device-name { font-size: 1.25rem; font-weight: 750; margin-bottom: 10px; }
.readable-output { white-space: pre-wrap; word-break: break-word; min-height: 110px; padding: 14px; border-radius: 10px; background: #0f151e; color: #c8d4df; line-height: 1.6; }
.action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.action-grid button:last-child:nth-child(odd) { grid-column: 1 / -1; }
.endpoint-card { display: grid; gap: 11px; margin-top: 14px; padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: #0f151e; }
.endpoint-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.endpoint-heading > div { display: grid; gap: 3px; }
.endpoint-heading small { color: var(--muted); line-height: 1.45; }
.path-row, .command-row, .file-actions { display: flex; gap: 8px; margin-bottom: 10px; }
.path-row input, .path-row select, .command-row input { flex: 1; }
.file-breadcrumbs { display: flex; align-items: center; gap: 4px; min-height: 34px; margin: -2px 0 10px; padding: 4px 6px; overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: #0f151e; scrollbar-width: thin; }
.file-breadcrumbs button { flex: 0 0 auto; padding: .35rem .55rem; border-color: transparent; background: transparent; color: var(--muted); }
.file-breadcrumbs button:hover, .file-breadcrumbs button.current { color: var(--text); background: #1d2938; }
.file-breadcrumbs .separator { flex: 0 0 auto; color: #4f6075; user-select: none; }
.file-actions { justify-content: flex-end; }
.file-actions input { flex: 1; }
.workspace-controls { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #0f151e; }
.workspace-controls label { margin: 0; }
.workspace-controls .hint { min-height: 0; text-align: right; }
.app-actions { flex-wrap: wrap; }
.hint { min-height: 24px; color: var(--muted); font-size: .88rem; }
.file-list { min-height: 180px; border: 1px solid var(--line); border-radius: 10px; overflow: auto; background: #0f151e; }
.file-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #222c39; cursor: pointer; }
.file-row:last-child { border-bottom: 0; }
.file-row:hover, .file-row.selected { background: #1d2938; }
.file-row span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-row small { color: var(--muted); }
.file-manager { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 12px; min-height: 420px; }
.file-locations { display: flex; flex-direction: column; gap: 5px; padding-right: 10px; border-right: 1px solid var(--line); }
.file-locations button { padding: .6rem .65rem; text-align: left; border-color: transparent; background: transparent; }
.file-locations button.active { color: var(--accent); background: rgba(98,217,176,.1); }
.file-browser { min-width: 0; }
.file-table-head, .file-table .file-row { display: grid; grid-template-columns: minmax(150px, 1fr) 62px 74px 128px 60px; gap: 8px; align-items: center; }
.file-table-head { padding: 7px 10px; color: var(--muted); font-size: .78rem; border: 1px solid var(--line); border-bottom: 0; border-radius: 9px 9px 0 0; background: #121923; }
.file-table { border-radius: 0 0 9px 9px; min-height: 300px; max-height: calc(100vh - 315px); }
.file-table .file-row { padding: 8px 10px; }
.file-table .file-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-table .file-row .file-type, .file-table .file-row .file-size, .file-table .file-row .file-time { color: var(--muted); font-size: .78rem; }
.file-table .file-row.directory { cursor: pointer; }
.file-table .file-row.directory:hover span:first-child { color: var(--accent); }
.file-entry-action { justify-self: end; min-width: 54px; padding: .35rem .5rem; font-size: .76rem; }
.file-footer { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; }
.compact-output { min-height: 72px; }
.panel-heading > div { display: grid; gap: 3px; }
.panel-heading small { color: var(--muted); }
.toggle-row { display: flex !important; grid-auto-flow: column; align-items: center; gap: 7px !important; margin: 0 !important; color: var(--text) !important; }
.toggle-row input { width: 18px; height: 18px; accent-color: var(--accent-2); }
.input-trace-toggles { display: grid; gap: 8px; justify-items: end; }
.keymap-actions { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.keymap-actions label { margin: 0; }
.keymap-board { position: relative; width: min(100%, 270px); aspect-ratio: 1240 / 2772; min-height: 330px; max-height: 48vh; margin: 12px auto; overflow: hidden; border: 1px solid #46556a; border-radius: 14px; }
.keymap-board.black { background: #05070a; color: #fff; }
.keymap-board.white { background: #f7f8fa; color: #10151d; }
.key-record-board { width: 100%; aspect-ratio: auto; min-height: 250px; max-height: 46vh; padding: 14px; overflow: auto; }
.key-record-board:focus { outline: 2px solid var(--accent-2); outline-offset: 3px; }
.key-record-board.recording { box-shadow: inset 0 0 0 2px rgba(42,166,126,.55); }
.keymap-board-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 1rem; font-weight: 600; line-height: 1.8; }
.keymap-board .keymap-marker { border-color: currentColor; }
.keymap-board-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: .88rem; }
.keymap-help { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 12px 0; }
.keymap-help strong, .keymap-help small { grid-column: 1 / -1; }
.keymap-help span { padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #0f151e; color: #c8d4df; font-size: .8rem; }
.keymap-help small { color: var(--muted); line-height: 1.45; }
.keymap-list { display: grid; gap: 7px; }
.keymap-row { display: grid; grid-template-columns: 64px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: #0f151e; }
.keymap-row kbd { display: grid; place-items: center; min-height: 30px; margin: 0; border: 1px solid #4b5b6f; border-radius: 6px; background: #1e2938; color: var(--text); font-weight: 800; }
.keymap-row small { color: var(--muted); }
.keymap-row button { padding: .38rem .55rem; }
.key-category { justify-self: start; padding: 3px 7px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--muted); font-size: .72rem; }
.key-category.keyboard { border-color: rgba(72,199,160,.42); color: var(--accent); }
.key-category.navigation { border-color: rgba(96,165,250,.42); color: #8fc2ff; }
.key-category.media { border-color: rgba(246,199,98,.42); color: #f6c762; }
.key-category.system { border-color: rgba(255,117,111,.36); color: #ffaaa5; }
.key-category.text { border-color: rgba(196,132,252,.46); color: #d8a9ff; }
.key-category.edit { border-color: rgba(251,146,60,.46); color: #ffb47a; }
.key-source { color: var(--muted); font-size: .68rem; font-weight: 500; }
.qiguang-actions { margin-bottom: 20px; }
.camera-preview-card { margin-bottom: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #0f151e; }
.camera-preview-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.camera-preview-heading > div:first-child { display: grid; gap: 3px; }
.camera-preview-heading small { color: var(--muted); }
.camera-preview-stage { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; max-height: 310px; overflow: hidden; border-radius: 10px; background: #05070a; }
.camera-preview-stage img { width: 100%; height: 100%; object-fit: contain; }
#qiguang-camera-placeholder { display: grid; place-items: center; gap: 5px; color: var(--muted); text-align: center; }
#qiguang-camera-placeholder strong { color: var(--text); }
.camera-preview-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 10px; }
.qiguang-storage-note { margin: -10px 0 18px; }
.video-library-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.video-library-heading > div:first-child { display: grid; gap: 4px; }
.video-library-heading small { color: var(--muted); }
.video-library-heading .file-actions { margin: 0; flex-wrap: wrap; }
.video-transform-card { display: grid; grid-template-columns: minmax(150px,1fr) minmax(240px,1.5fr); align-items: center; gap: 14px; margin: 12px 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #0f151e; }
.video-transform-card > div:first-child { display: grid; gap: 4px; }
.video-transform-card small { color: var(--muted); }
.video-transform-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.video-transform-grid button { padding: .52rem .45rem; }
.face-lab-charge { display: grid; gap: 5px; color: var(--muted); font-size: .86rem; }
.face-lab-charge select { width: 100%; }
.video-library { display: grid; gap: 8px; max-height: 42vh; overflow: auto; }
.video-card { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #0f151e; }
.video-card.active { border-color: var(--accent-2); background: rgba(42,166,126,.1); }
.video-card .video-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 9px; background: #202b39; font-size: 1.2rem; }
.video-card.active .video-icon { background: var(--accent-2); color: #03130e; font-weight: 800; }
.video-card .video-info { min-width: 0; display: grid; gap: 3px; }
.video-card .video-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-card .video-info small { color: var(--muted); }
.video-card-actions { display: flex; gap: 6px; }
.video-card-actions button { padding: .5rem .65rem; }
.user-create-form { display: grid; grid-template-columns: 1fr 1.2fr .9fr auto; gap: 10px; align-items: end; margin-bottom: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #0f151e; }
.user-create-form label { margin: 0; }
.role-help { display: grid; gap: 5px; margin-bottom: 14px; color: var(--muted); font-size: 12px; }
.role-help strong { color: var(--text); }
.user-list { display: grid; gap: 8px; }
.user-row { display: grid; grid-template-columns: minmax(120px,1fr) auto; gap: 12px; align-items: center; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: #0f151e; }
.user-row.disabled { opacity: .62; }
.user-row > div:first-child { display: grid; gap: 3px; }
.user-row small { color: var(--muted); }
.user-row-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.user-row-actions select { width: auto; min-width: 92px; }
.account-dialog { width: min(920px, calc(100vw - 32px)); max-height: min(82vh, 820px); margin: auto; padding: 0; overflow: hidden; color: var(--text); border: 1px solid var(--line); border-radius: 16px; background: rgba(21,27,37,.98); box-shadow: 0 26px 90px rgba(0,0,0,.58); }
.account-dialog::backdrop { background: rgba(2,6,12,.72); backdrop-filter: blur(4px); }
.account-panel { max-height: min(82vh, 820px); overflow: auto; padding: 20px; }
.account-dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.account-dialog-heading > div:first-child { display: grid; gap: 4px; }
.account-dialog-heading h2 { margin: 0; font-size: 1.12rem; }
.account-dialog-heading small { color: var(--muted); }
.account-dialog-actions { display: flex; gap: 8px; }
.panel label { display: grid; gap: 6px; color: var(--muted); margin-bottom: 10px; }
.account-panel label { display: grid; gap: 6px; color: var(--muted); margin-bottom: 10px; }
.terminal-output { min-height: 320px; max-height: 55vh; overflow: auto; white-space: pre-wrap; word-break: break-word; padding: 14px; border-radius: 10px; background: #080c12; color: #ccebdd; line-height: 1.45; }
.terminal-session-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.terminal-session-actions span { color: var(--muted); margin-left: auto; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; padding: 10px 15px; border: 1px solid var(--line); border-radius: 10px; background: #202b39; transition: .18s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 1180px) {
  .workspace { grid-template-columns: 190px minmax(340px,1fr); height: auto; }
  .admin-column { grid-column: 1 / -1; min-height: 620px; }
}
@media (max-width: 900px) {
  .topbar { height: auto; min-height: 72px; align-items: flex-start; padding: 12px; gap: 10px; }
  .topbar-actions { align-items: flex-end; flex-direction: column-reverse; }
  .connection { flex-wrap: wrap; justify-content: flex-end; padding: 0; border: 0; }
  .account-cluster { padding: 0; background: transparent; }
  .workspace { grid-template-columns: 1fr; height: auto; }
  .device-sidebar { max-height: 300px; }
  .admin-column { grid-column: auto; }
  .remote-column { min-height: 0; }
  .admin-column { min-height: 620px; }
  .video-shell { max-width: 100%; }
}
@media (max-width: 660px) {
  .screen-pair { grid-template-columns: 1fr; }
  .video-shell { justify-self: center; }
}

/* Right-panel density pass: retain controls and live state, reduce fixed copy. */
.admin-column { grid-template-rows: 38px 42px minmax(0,1fr); }
.function-index-heading { display:flex; align-items:center; min-height:38px; padding:0 14px; }
.tabs.function-index { min-height:42px; padding:0 8px; }
.function-index button { padding:8px 0; font-size:12px; }
.function-index button span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.panel { padding:12px 14px 14px; overflow-x:hidden; }
.panel-heading { min-height:30px; margin-bottom:10px; }
.panel h2 { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.panel-heading > div:first-child, .endpoint-heading > div, .camera-preview-heading > div,
.video-library-heading > div:first-child, .video-transform-card > div:first-child { min-width:0; }
.hint.compact-hint, .panel > .hint {
  overflow:hidden; max-width:100%; margin-block:7px; text-overflow:ellipsis; white-space:nowrap;
}
.inline-status {
  overflow:hidden; margin:0 0 10px; padding:7px 9px; border-radius:4px;
  background:#f6f8fb; color:#73849a; font-size:11px; line-height:1.4;
  text-overflow:ellipsis; white-space:nowrap;
}
.endpoint-card { margin-top:10px; padding:10px; gap:7px; }
.endpoint-heading { align-items:center; }
.endpoint-heading small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.camera-preview-card { margin:12px 0 8px; }
.camera-preview-heading { min-height:28px; align-items:center; }
.camera-preview-stage { max-height:160px; }
.video-library-heading { align-items:center; margin-top:12px; padding-top:12px; }
.video-transform-card { gap:7px; padding:10px; margin:9px 0; }
.video-transform-card .action-grid button { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qiguang-storage-note { margin:5px 0 8px; }

/* Input panel is responsive to the right column itself, not the page width. */
.admin-column { container-type:inline-size; }
#panel-keymap.active { display:grid; gap:10px; }
#panel-keymap .panel-heading { align-items:stretch; flex-direction:column; gap:8px; margin:0; }
#panel-keymap .panel-heading small { font-size:11px; }
#panel-keymap .input-trace-toggles {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; width:100%;
}
#panel-keymap .normal-input-capture {
  display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:8px; width:100%;
  padding:8px 9px; border:1px solid var(--line-strong); border-radius:9px; background:var(--panel-2);
}
#panel-keymap .normal-input-capture button { min-width:148px; min-height:34px; padding-inline:10px; font-size:12px; }
#panel-keymap .normal-input-capture small { min-width:0; color:var(--muted); font-size:10px; line-height:1.4; }
#panel-keymap .normal-input-capture[data-recording="true"] { border-color:color-mix(in srgb, var(--accent) 52%, var(--line)); }
#panel-keymap .normal-input-capture[data-recording="true"] button { background:var(--panel); color:var(--accent); border-color:var(--accent); }
#panel-keymap .input-track-inline {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; width:100%;
}
#panel-keymap .input-track-inline label {
  display:flex; min-width:0; min-height:32px; align-items:center; justify-content:center; gap:5px;
  margin:0; padding:5px 6px; border:1px solid var(--line); border-radius:7px;
  background:var(--panel-2); color:var(--text); font-size:11px; white-space:nowrap;
}
#panel-keymap .input-track-inline input { width:14px; height:14px; margin:0; accent-color:var(--accent-2); }
#panel-keymap .input-track-inline label:has(input:disabled) { color:var(--muted); }
#panel-keymap .input-trace-advanced { border:1px solid var(--line); border-radius:8px; background:var(--panel-2); }
#panel-keymap .input-trace-advanced summary { padding:7px 9px; color:var(--muted); cursor:pointer; font-size:11px; font-weight:700; }
#panel-keymap .input-trace-advanced[open] summary { border-bottom:1px solid var(--line); }
#panel-keymap .input-trace-advanced .input-trace-toggles { padding:7px; }
#panel-keymap .toggle-row {
  display:grid !important; grid-template-columns:15px minmax(0,1fr); grid-template-areas:"check title" "check note";
  min-width:0; min-height:48px; margin:0 !important; padding:7px 9px;
  border:1px solid var(--line); border-radius:8px; background:var(--panel-2);
  color:var(--text) !important; font-size:12px; line-height:1.2;
}
#panel-keymap .toggle-row input { grid-area:check; align-self:center; flex:0 0 auto; width:15px; height:15px; margin:0; }
#panel-keymap .toggle-row span { grid-area:title; overflow:hidden; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
#panel-keymap .toggle-row small { grid-area:note; overflow:hidden; color:var(--muted); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
#panel-keymap .input-context-card {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(186px, .78fr); gap:10px; align-items:center;
  padding:10px; border:1px solid var(--line); border-radius:10px; background:var(--panel-2);
}
#panel-keymap .input-context-copy { display:grid; min-width:0; gap:8px; }
#panel-keymap .input-context-heading-row { display:flex; min-width:0; align-items:flex-start; justify-content:space-between; gap:8px; }
#panel-keymap .input-context-heading-row > div { display:grid; min-width:0; gap:3px; }
#panel-keymap .input-context-heading-row strong { font-size:12px; }
#panel-keymap .input-context-heading-row small { overflow:hidden; color:var(--muted); font-size:10px; line-height:1.4; text-overflow:ellipsis; white-space:nowrap; }
#panel-keymap .input-context-state {
  flex:0 0 auto; padding:3px 6px; border:1px solid var(--line-strong); border-radius:999px;
  color:var(--muted); font-size:10px; font-weight:700; white-space:nowrap;
}
#panel-keymap .input-context-state[data-state="on"] { border-color:color-mix(in srgb, var(--accent) 46%, var(--line)); background:color-mix(in srgb, var(--accent) 10%, transparent); color:var(--accent); }
#panel-keymap .input-context-state[data-state="unavailable"] { color:var(--muted); }
#panel-keymap .input-context-chips { display:flex; flex-wrap:wrap; gap:5px; }
#panel-keymap .input-context-chip {
  min-width:0; padding:4px 6px; border:1px solid var(--line); border-radius:6px;
  color:var(--muted); font-size:10px; line-height:1.2; white-space:nowrap;
}
#panel-keymap .input-context-chip[data-state="locked"] { border-color:color-mix(in srgb, #f6c762 48%, var(--line)); color:#f6c762; }
#panel-keymap .input-context-chip[data-state="active"] { border-color:color-mix(in srgb, var(--accent) 48%, var(--line)); color:var(--accent); }
#panel-keymap .input-context-chip[data-state="protected"] { border-color:color-mix(in srgb, #8ca0b6 45%, var(--line)); color:var(--muted); }
#panel-keymap .secure-input-toggle {
  display:grid; grid-template-columns:18px minmax(0,1fr); align-items:center; gap:8px; min-width:0; margin:0;
  padding:9px; border:1px solid var(--line-strong); border-radius:8px; background:color-mix(in srgb, var(--panel) 70%, transparent); cursor:pointer;
}
#panel-keymap .secure-input-toggle:has(input:disabled) { cursor:default; }
#panel-keymap .secure-input-toggle input { width:16px; height:16px; margin:0; accent-color:var(--accent-2); }
#panel-keymap .secure-input-toggle > span { display:grid; min-width:0; gap:3px; }
#panel-keymap .secure-input-toggle strong { overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
#panel-keymap .secure-input-toggle small { overflow:hidden; color:var(--muted); font-size:10px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
#panel-keymap .input-replay-heading { display:flex; min-width:0; align-items:center; justify-content:space-between; gap:10px; }
#panel-keymap .input-replay-heading > div { display:grid; min-width:0; gap:3px; }
#panel-keymap .input-replay-heading strong { font-size:12px; }
#panel-keymap .input-replay-heading small { overflow:hidden; color:var(--muted); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
#panel-keymap #keymap-status { flex:0 1 50%; min-width:0; margin:0; color:var(--muted); font-size:10px; text-align:right; }
#panel-keymap .keymap-actions {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:end; gap:7px; margin:0;
}
#panel-keymap .keymap-actions label { display:grid; min-width:0; gap:4px; margin:0; color:var(--muted); font-size:10px; }
#panel-keymap .keymap-actions select, #panel-keymap .keymap-actions button { min-width:0; width:100%; height:34px; padding-inline:7px; font-size:11px; }
#panel-keymap .key-record-board { margin:0; min-height:210px; max-height:40vh; border-radius:10px; }
#panel-keymap .input-virtual-keyboard { display:grid; gap:8px; padding:9px; border:1px solid var(--line); border-radius:10px; background:var(--panel-2); }
#panel-keymap .input-virtual-keyboard--observed { border-color:color-mix(in srgb, var(--accent) 34%, var(--line)); }
#panel-keymap .virtual-keyboard-heading { display:flex; min-width:0; align-items:center; justify-content:space-between; gap:8px; }
#panel-keymap .virtual-keyboard-heading > div { display:grid; min-width:0; gap:3px; }
#panel-keymap .virtual-keyboard-heading strong { font-size:12px; }
#panel-keymap .virtual-keyboard-heading small { overflow:hidden; color:var(--muted); font-size:10px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
#panel-keymap .virtual-keyboard-state { flex:0 1 auto; min-width:0; overflow:hidden; padding:3px 6px; border:1px solid var(--line-strong); border-radius:999px; color:var(--muted); font-size:10px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
#panel-keymap .virtual-keyboard-state[data-state="ready"] { border-color:color-mix(in srgb, var(--accent) 48%, var(--line)); color:var(--accent); }
#panel-keymap .virtual-keyboard-state[data-state="active"] { border-color:color-mix(in srgb, var(--accent) 62%, var(--line)); background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent); }
#panel-keymap .observed-keyboard-kind { display:inline-grid; flex:0 0 auto; width:19px; height:17px; border:1px solid color-mix(in srgb, var(--accent) 50%, var(--line)); border-radius:4px; place-items:center; background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent); font-size:10px; font-weight:800; line-height:1; }
#panel-keymap .observed-keyboard-kind[hidden] { display:none; }
#panel-keymap .observed-keyboard-kind[data-kind="full"] { font-size:12px; }
#panel-keymap .observed-keyboard-kind[data-kind="symbols"] { font-size:9px; }
#panel-keymap .virtual-keyboard { display:grid; gap:4px; }
#panel-keymap .virtual-keyboard-row { display:grid; grid-template-columns:repeat(var(--keys), minmax(0, 1fr)); gap:4px; }
#panel-keymap .virtual-key { min-width:0; min-height:27px; padding:4px 2px; overflow:hidden; border:1px solid var(--line-strong); border-radius:5px; color:var(--muted); font-size:10px; font-weight:700; line-height:1; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
#panel-keymap .virtual-key.wide { grid-column:span 2; }
#panel-keymap .virtual-key.space { grid-column:span 5; }
#panel-keymap .virtual-key.active { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 18%, transparent); color:var(--accent); box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent); }
#panel-keymap .input-privacy-note { display:flex; align-items:flex-start; gap:7px; margin:0; color:var(--muted); font-size:10px; line-height:1.45; }
#panel-keymap .input-privacy-note strong { flex:0 0 auto; color:var(--text); font-size:10px; }
@container (max-width: 520px) {
  #panel-keymap .input-context-card { grid-template-columns:1fr; }
  #panel-keymap .keymap-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #panel-keymap .normal-input-capture { grid-template-columns:1fr; }
  #panel-keymap .normal-input-capture button { width:100%; }
  #panel-keymap .virtual-keyboard-heading { align-items:flex-start; flex-direction:column; }
  #panel-keymap .virtual-keyboard-state { max-width:100%; }
}
@container (max-width: 340px) {
  #panel-keymap .input-trace-toggles, #panel-keymap .keymap-actions { grid-template-columns:1fr; }
  #panel-keymap .input-replay-heading { align-items:flex-start; flex-direction:column; }
  #panel-keymap #keymap-status { flex-basis:auto; text-align:left; }
}
@media (max-width: 520px) {
  .topbar { align-items: stretch; flex-direction: column; }
  .topbar-actions { align-items: stretch; }
  .connection, .account-cluster { justify-content: space-between; }
  #status-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .workspace { padding: 10px; }
  .remote-session-header { padding-inline: 2px; }
  .toolbar button { flex-basis: calc(25% - 7px); padding-inline: .55rem; }
  .quality-row { align-items: flex-start; flex-direction: column; }
  .view-controls { display: grid; width: 100%; grid-template-columns: 1fr 1fr; }
  .view-controls label { justify-content: space-between; }
  .view-controls label:nth-child(3), .view-controls label:nth-child(4), #quality-mode { grid-column: 1 / -1; }
  .stream-health { width: 100%; justify-items: start; white-space: normal; }
  .workspace-controls { align-items: stretch; flex-direction: column; }
  .workspace-controls .hint { text-align: left; }
  .file-manager { grid-template-columns: 1fr; }
  .file-locations { flex-direction: row; overflow-x: auto; padding: 0 0 8px; border-right: 0; border-bottom: 1px solid var(--line); }
  .file-locations button { white-space: nowrap; }
  .path-row { flex-wrap: wrap; }
  .path-row input { flex-basis: 100%; order: -1; }
  .file-table-head, .file-table .file-row { grid-template-columns: minmax(140px,1fr) 70px 60px; }
  .file-type, .file-time { display: none; }
  .camera-preview-actions { grid-template-columns: 1fr; }
  .video-transform-card { grid-template-columns: 1fr; }
  .keymap-help { grid-template-columns: 1fr; }
  .keymap-help strong, .keymap-help small { grid-column: auto; }
  .user-create-form, .user-row { grid-template-columns: 1fr; }
  .user-row-actions { align-items: stretch; flex-direction: column; }
  .account-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .account-panel { max-height: calc(100dvh - 16px); padding: 14px; }
  .account-dialog-heading { align-items: stretch; flex-direction: column; }
  .account-dialog-actions button { flex: 1; }
}

/* Flat workstation v2: one hierarchy, fewer nested cards, denser controls. */
:root {
  --bg: #0a0d11;
  --panel: #10151b;
  --panel-2: #151b22;
  --line: #252d37;
  --line-strong: #34404d;
  --text: #eef3f7;
  --muted: #8997a6;
  --accent: #5bddb1;
  --accent-2: #2db58a;
  --danger: #ff746d;
}
body { background: var(--bg); }
button, .file-button { border-radius: 6px; padding: .58rem .76rem; background: #151b22; }
button:hover:not(:disabled), .file-button:hover { border-color: var(--line-strong); background: #1a222c; }
button.primary { color: #04120d; background: var(--accent); border-color: var(--accent); }
input, select { border-radius: 5px; padding: .59rem .68rem; background: #0c1117; }
.topbar {
  position: relative;
  height: 58px;
  padding: 0 16px;
  border-bottom-color: var(--line);
  background: #0d1116;
  backdrop-filter: none;
}
.brand, .connection, .topbar-actions, .account-cluster { gap: 9px; }
.brand small { margin-top: 0; font-size: .72rem; }
.mark { width: 32px; height: 32px; border-radius: 7px; background: var(--accent); font-size: 16px; }
.connection { padding-right: 10px; }
.account-cluster { padding: 0 0 0 10px; border-radius: 0; background: transparent; }
.account-manage-button { border-color: var(--line); background: transparent; }
.workspace {
  grid-template-columns: 220px minmax(360px, 1fr) minmax(430px, 580px);
  gap: 0;
  height: calc(100vh - 58px);
  padding: 0;
  background: var(--line);
}
.workspace.read-only { grid-template-columns: 220px minmax(360px, 1fr); }
.device-sidebar, .admin-column {
  border: 0;
  border-radius: 0;
  background: var(--panel);
}
.device-sidebar { border-right: 1px solid var(--line); }
.device-sidebar-heading { min-height: 54px; padding: 10px 12px; }
.device-summary { padding: 6px 10px 2px; }
.device-search { padding: 6px 10px; }
.device-list { padding: 6px; }
.device-card { border-radius: 0; }
.device-card-main { padding: 7px 5px; }
.device-card.selected { border-color: transparent; background: rgba(91,221,177,.09); }
.device-card.selected::before { inset-block: 5px; width: 2px; }
.remote-column {
  align-items: center;
  gap: 9px;
  padding: 12px 16px 18px;
  background: #0c1015;
}
.remote-session-header { min-height: 38px; padding: 0; }
.session-pill { padding: 4px 8px; border-radius: 5px; }
.video-shell {
  border-color: #2a333e;
  border-radius: 11px;
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
}
.toolbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.toolbar button { min-height: 37px; padding: .46rem .55rem; background: var(--panel); }
#privacy-button { color: var(--accent); border-color: rgba(91,221,177,.35); }
.quality-row { gap: 9px; }
.stream-panel {
  padding: 9px 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.view-controls { gap: 8px; }
.view-controls select { padding: .31rem .45rem; }
.admin-column { border-left: 1px solid var(--line); }
.tabs { min-height: 48px; gap: 0; padding: 0 12px; background: #0d1218; }
.tabs button {
  min-width: 0;
  padding: .72rem .68rem .62rem;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
}
.tabs button:hover:not(:disabled) { border-color: transparent; border-bottom-color: #4a5867; background: transparent; }
.tabs button.active { color: var(--text); border-bottom-color: var(--accent); background: transparent; }
.panel { padding: 16px 18px 20px; }
.panel-heading { margin-bottom: 12px; }
.panel h2 { font-size: 1rem; }
.device-name { font-size: 1.08rem; }
.readable-output, .workspace-controls, .file-list, .camera-preview-card,
.video-transform-card, .keymap-help span, .keymap-row, .video-card,
.user-create-form, .user-row {
  border-radius: 6px;
  background: #0c1117;
}
.readable-output { padding: 12px; }
.file-manager { gap: 10px; }
.file-table-head { border-radius: 5px 5px 0 0; }
.file-table { border-radius: 0 0 5px 5px; }
.file-row:hover, .file-row.selected { background: #17212c; }
.file-locations button { border-radius: 5px; }
.keymap-board { border-radius: 7px; }
.camera-preview-card { padding: 10px; }
.camera-preview-stage { border-radius: 5px; }
.video-card .video-icon { border-radius: 5px; }
.account-dialog { border-radius: 9px; background: #10151b; }
.account-dialog::backdrop { background: rgba(0,0,0,.72); backdrop-filter: none; }
.login-view { min-height: calc(100vh - 58px); }
.login-card { border-radius: 10px; background: #10151b; box-shadow: 0 18px 48px rgba(0,0,0,.3); }
.toast { border-radius: 6px; background: #18212b; }

@media (max-width: 1280px) {
  .workspace { grid-template-columns: 200px minmax(340px, 1fr); height: auto; min-height: calc(100vh - 58px); }
  .workspace.read-only { grid-template-columns: 200px minmax(340px, 1fr); }
  .admin-column { grid-column: 1 / -1; min-height: 620px; border-top: 1px solid var(--line); border-left: 0; }
}

@media (max-width: 900px) {
  .topbar { height: auto; min-height: 58px; padding: 9px 12px; }
  .workspace, .workspace.read-only { grid-template-columns: 1fr; }
  .device-sidebar { border-right: 0; border-bottom: 1px solid var(--line); }
  .remote-column { padding: 12px; }
  .admin-column { grid-column: auto; }
}
@media (max-width: 520px) {
  .topbar { align-items: stretch; }
  .topbar > *, .topbar-actions { min-width: 0; max-width: 100%; }
  .topbar-actions { width: 100%; overflow: hidden; }
  .connection, .account-cluster {
    display: flex;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    justify-content: flex-start;
    padding: 0;
    border: 0;
  }
  #status-text, .account-name {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #connect-button, .account-manage-button, #logout-button { flex: 0 0 auto; }
  .workspace { padding: 0; }
  .remote-column { padding-inline: 8px; }
  .toolbar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .toolbar button { padding-inline: .35rem; font-size: .82rem; }
  .tabs { padding-inline: 5px; }
  .tabs button { padding-inline: .58rem; }
  .panel { padding: 14px 12px 18px; }
}
@media (max-height: 1050px) and (min-width: 901px) {
  .video-shell:not([data-size]) { --phone-width: 310px; }
  .video-shell[data-size="standard"] { --phone-width: 310px; }
  .video-shell[data-size="large"] { --phone-width: 360px; }
}

/* Unified workstation v3: one navigation rail and one continuous work surface. */
.workspace,
.workspace.read-only {
  grid-template-columns: 220px minmax(0, 1fr);
  grid-template-rows: auto minmax(560px, 1fr);
  gap: 0;
  min-height: calc(100vh - 58px);
  height: auto;
  padding: 0;
  background: var(--bg);
}
.device-sidebar {
  grid-column: 1;
  grid-row: 1 / -1;
  min-height: calc(100vh - 58px);
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
}
.remote-column {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  padding: 14px 18px 16px;
  border-bottom: 1px solid var(--line);
  background: #0c1015;
}
.admin-column {
  grid-column: 2;
  grid-row: 2;
  min-height: 560px;
  border: 0;
  border-radius: 0;
  background: var(--panel);
}
.remote-session-header,
.toolbar,
.stream-panel,
.screen-pair {
  width: min(100%, 980px);
  margin-inline: auto;
}
.screen-pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  overflow: visible;
}
.screen-pair[data-layout="device"],
.screen-pair[data-layout="track"] { grid-template-columns: minmax(0, 1fr); }
.screen-pair[data-layout="device"] #agent-video-shell,
.screen-pair[data-layout="track"] #video-shell { display: none; }
.screen-label,
.agent-screen-label {
  position: absolute;
  z-index: 4;
  top: 8px;
  left: 8px;
  max-width: calc(100% - 16px);
  padding: 4px 7px;
  overflow: hidden;
  color: #e9f4ef;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 5px;
  background: rgba(5,9,13,.72);
  font-size: .72rem;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(5px);
}
.agent-screen-label { left: auto; right: 8px; }
.view-controls { align-items: end; }
.view-controls label { min-width: 0; }
.view-controls select { max-width: 250px; }
.file-scope-actions { display: flex; align-items: end; gap: 8px; }
.file-scope-actions label { margin: 0; }
.panel { max-width: 1180px; width: 100%; margin-inline: auto; }

@media (max-width: 900px) {
  .workspace,
  .workspace.read-only { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .device-sidebar { grid-column: 1; grid-row: 1; min-height: 0; max-height: 280px; border-right: 0; border-bottom: 1px solid var(--line); }
  .remote-column { grid-column: 1; grid-row: 2; padding: 12px; }
  .admin-column { grid-column: 1; grid-row: 3; min-height: 620px; }
}

@media (max-width: 660px) {
  .screen-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .screen-pair[data-layout="device"],
  .screen-pair[data-layout="track"] { grid-template-columns: minmax(0, 1fr); }
  .video-shell { min-width: 0; justify-self: stretch; }
  .agent-action-log { display: none; }
  .screen-label, .agent-screen-label { top: 5px; padding: 3px 5px; font-size: .62rem; }
  .view-controls { grid-template-columns: 1fr 1fr; }
  .view-controls label:nth-child(3),
  .view-controls label:nth-child(4),
  .view-controls label:nth-child(5),
  #quality-mode { grid-column: auto; }
  .file-scope-actions { align-items: stretch; flex-direction: column; }
}

@media (max-width: 520px) {
  .device-sidebar { max-height: 210px; }
  .device-list { min-height: 0; max-height: 76px; }
  .view-controls label {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 4px;
  }
  .view-controls select { width: 100%; max-width: none; }
  .panel-heading { align-items: flex-start; flex-direction: column; gap: 9px; }
  .input-trace-toggles {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: start;
  }
  .keymap-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
  }
  .keymap-actions label { display: grid; gap: 4px; }
  .keymap-actions button { width: 100%; }
}

/* Workstation v4: keep device, dual screens, controls and the function index in one viewport. */
@media (min-width: 1281px) {
  .workspace,
  .workspace.read-only {
    grid-template-columns: clamp(186px, 12vw, 210px) minmax(590px, 1.2fr) minmax(470px, .95fr);
    grid-template-rows: minmax(0, 1fr);
    width: 100%;
    height: calc(100vh - 58px);
    min-height: 0;
    overflow: hidden;
  }
  .workspace.read-only { grid-template-columns: clamp(186px, 12vw, 210px) minmax(590px, 1fr); }
  .device-sidebar {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    height: 100%;
  }
  .remote-column {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    align-items: stretch;
    min-width: 0;
    min-height: 0;
    height: 100%;
    gap: 6px;
    padding: 8px 12px 10px;
    overflow: hidden;
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }
  .remote-session-header,
  .toolbar,
  .stream-panel,
  .screen-pair {
    width: 100%;
    max-width: 900px;
    margin-inline: auto;
  }
  .remote-session-header { min-height: 32px; }
  .screen-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    justify-items: center;
    min-height: 0;
    height: 100%;
    gap: 10px;
    overflow: hidden;
  }
  .screen-pair[data-layout="device"],
  .screen-pair[data-layout="track"] { grid-template-columns: minmax(0, 1fr); }
  .video-shell,
  .video-shell[data-size="compact"],
  .video-shell[data-size="standard"],
  .video-shell[data-size="large"] {
    width: auto;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    aspect-ratio: var(--phone-aspect);
  }
  .video-shell:fullscreen {
    width: 100vw;
    max-width: none;
    height: 100vh;
    max-height: none;
  }
  .toolbar {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 4px;
  }
  .toolbar button {
    min-height: 32px;
    padding: .34rem .3rem;
    font-size: .8rem;
  }
  .stream-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    padding: 6px 0 0;
  }
  .view-controls {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
  }
  .view-controls label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 4px;
    min-width: 0;
    font-size: .72rem;
    white-space: nowrap;
  }
  .view-controls select {
    width: 100%;
    min-width: 0;
    max-width: none;
    padding: .28rem .34rem;
    font-size: .72rem;
  }
  #quality-mode { display: none; }
  .stream-health {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-height: 24px;
    font-size: .72rem;
  }
  .admin-column {
    grid-column: 3;
    grid-row: 1;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    border: 0;
  }
  .workspace.read-only .admin-column { display: none; }
  .function-index-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    min-height: 38px;
    padding: 8px 12px 5px;
    border-bottom: 1px solid var(--line);
    background: #0d1218;
  }
  .function-index-heading span { color: var(--muted); font-size: .68rem; text-align: right; }
  .function-index {
    display: grid;
    /* The common group has four controls. Keep them on one line so the
       last control is not visually detached beneath the other three. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: 70px;
    padding: 5px 8px 7px;
    gap: 4px;
  }
  .function-index button {
    display: grid;
    gap: 1px;
    align-content: center;
    min-height: 29px;
    padding: .28rem .42rem;
    border: 1px solid transparent;
    border-radius: 5px;
    text-align: left;
  }
  .function-index button span { font-size: .78rem; }
  .function-index button small { overflow: hidden; color: var(--muted); font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
  .function-index button.active { border-color: rgba(91,221,177,.26); background: rgba(91,221,177,.08); }
  .function-index button.active small { color: #a9c8bd; }
  .panel {
    min-height: 0;
    max-width: none;
    height: 100%;
    padding: 12px 14px 16px;
    overflow: auto;
  }
}

@media (max-width: 1280px) {
  .function-index-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px 4px;
    background: #0d1218;
  }
  .function-index-heading span { color: var(--muted); font-size: .68rem; }
  .function-index button { display: grid; gap: 1px; }
  .function-index button small { color: var(--muted); font-size: .62rem; }
}

/* Approved illustration implementation — 2026-10-14.
   Single final presentation layer. Video/overlay coordinates stay in video-shell. */
:root {
  color-scheme: light;
  --bg: #f3f6fa; --panel: #fff; --panel-2: #f6f8fc;
  --line: #e4eaf1; --line-strong: #c7d6e6;
  --text: #26364a; --muted: #738298;
  --accent: #328ef2; --accent-2: #287fe0; --danger: #c74d57;
  --rail-width: 200px;
  font-family: "Segoe UI", "Microsoft YaHei UI", system-ui, sans-serif;
  font-size: 14px;
}
body { background: var(--bg); color: var(--text); }
button, .file-button {
  border: 1px solid #dfe6ef; border-radius: 5px; padding: 8px 12px;
  background: #fff; color: #41546b; box-shadow: none; font-size: 13px;
  line-height: 1.4;
}
button:hover:not(:disabled), .file-button:hover { border-color: #abcdf2; background: #eef5ff; color: #2074cb; }
button:disabled { opacity: .5; }
button.primary { background: #328ef2; border-color: #328ef2; color: #fff; font-weight: 600; }
button.danger { color: #bd4552; }
input, select { background: #fff; border-color: #dce4ee; color: #42556c; border-radius: 4px; padding: 7px 9px; font-size: 13px; }
input::placeholder { color: #8997aa; }
.topbar { height: 64px; padding: 0 24px 0 0; background: #fff; border-bottom: 1px solid #e7ecf3; backdrop-filter: none; }
.topbar .brand { width: var(--rail-width); align-self: stretch; flex: 0 0 var(--rail-width); padding: 0 22px; background: #1e3548; color: #fff; gap: 10px; }
.brand strong { font-size: 17px; letter-spacing: .4px; }.brand small { font-size: 11px; color: #adbed0; }
.mark { width: 30px; height: 30px; border-radius: 7px; background: #3a99ef; color: #fff; font-size: 18px; }
.topbar-actions { gap: 16px; font-size: 13px; }.connection { border-color: var(--line); }.account-name { color: #65768b; font-size: 13px; }
.account-cluster { background: transparent; gap: 10px; }.account-cluster button { background: transparent; border-color: transparent; }
.dot.online { background: #36b775; box-shadow: none; }.dot { box-shadow: none; }
.workspace, .workspace.read-only {
  display: grid; grid-template-columns: var(--rail-width) minmax(510px, 1fr) minmax(340px, 28%);
  grid-template-rows: minmax(0, 1fr); gap: 0; padding: 0;
  height: calc(100dvh - 64px); min-height: 660px; overflow: hidden; background: var(--bg);
}
.workspace.read-only { grid-template-columns: var(--rail-width) minmax(510px, 1fr); }
.device-sidebar { grid-column: 1; grid-row: 1; background: #1e3548; color: #e8eff7; min-height: 0; height: 100%; border: 0; border-radius: 0; }
.device-sidebar-heading { padding: 23px 18px 12px; border: 0; }.device-sidebar-heading strong { font-size: 14px; }
.device-sidebar-heading small { color: #a4b7cb; font-size: 11px; }.device-sidebar-heading button { border: 0; background: #2b4359; color: #d5e6f6; }
.device-summary { padding: 3px 18px 12px; gap: 10px; color: #a4b7cb; font-size: 11px; }.device-summary strong { color: #e3edf7; font-size: 12px; }
.device-search { padding: 0 14px 12px; }.device-search input { background: #294256; border-color: #375167; color: #eef5fc; padding: 9px; font-size: 12px; }
.device-search input::placeholder { color: #acc0d2; }.device-list { padding: 0; }
.device-card { margin: 4px 0; border: 0; border-radius: 0; padding: 7px 13px; }
.device-card-main { color: #dce7f2; background: transparent; padding: 8px 4px; font-size: 13px; }
.device-card-main > span:last-child { display: grid; gap: 5px; }.device-card-main small { color: #aabed0; max-width: none; font-size: 11px; }
.device-card.selected { background: #328ef2; }.device-card.selected::before { display: none; }
.device-card.selected .device-card-main, .device-card.selected small { color: #fff; }
.device-card-main:hover:not(:disabled) { background: #ffffff0c; color: #fff; border-color: transparent; }
.device-offline-toggle { margin: 2px 14px 12px; color: #a9bfd2; font-size: 11px; background: transparent; border: 0; }.device-empty { color: #a9bfd2; }
.remote-column {
  grid-column: 2; grid-row: 1; display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  grid-template-rows: minmax(0,1fr) auto;
  grid-template-areas: "controls screens" "health health";
  min-height: 0; height: 100%; padding: 16px 18px 16px 22px;
  gap: 12px; align-items: stretch; background: var(--bg); border: 0; overflow: hidden;
}
/* The selected device already appears in the left rail and top bar.  Removing
   this duplicate status line gives the paired screens their vertical budget. */
.remote-session-header { display: none; }
.remote-session-header small { font-size: 12px; color: #7a8aa0; }.remote-session-header strong { font-size: 21px; letter-spacing: -.3px; color: #26364a; }
.session-pill, .session-pill.online { background: transparent; border: 0; padding: 4px 0; color: #54806b; font-size: 12px; font-weight: 400; }
.session-pill.offline { color: #8491a2; }.session-pill.busy { color: #297cca; }
.toolbar {
  grid-area: controls; display: flex; flex-direction: column; align-self: start;
  width: 78px; max-width: none; margin: 0; padding: 9px;
  gap: 7px; border: 1px solid var(--line); border-radius: 7px; background: #fff;
}
.toolbar button {
  flex: 0 0 51px; min-height: 51px; width: 58px; padding: 5px 2px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 11px; font-weight: 500; line-height: 1.3;
  background: #f3f6fb; border: 1px solid transparent; border-radius: 4px;
}
.toolbar button svg { width: 19px; height: 19px; stroke-width: 1.65; pointer-events: none; }
.toolbar kbd { display: none; }.toolbar #privacy-button { color: #297ee0; background: #eaf3ff; }
.toolbar #privacy-button.active, .toolbar #privacy-button[aria-pressed="true"] { background: #328ef2; color: #fff; }
.toolbar #privacy-button.privacy-state-unknown { color: #6d7b8c; background: #f3f6fb; border-color: #d8e0ea; }
.toolbar .privacy-icon { position: relative; display: grid; place-items: center; width: 22px; height: 22px; }
.toolbar .privacy-icon-state { position: absolute; right: -9px; bottom: -4px; display: grid; place-items: center; min-width: 15px; height: 12px; padding: 0 2px; border: 1px solid #fff; border-radius: 8px; color: #fff; font-size: 8px; font-weight: 800; line-height: 1; box-shadow: 0 1px 3px #23385133; }
.toolbar .privacy-icon-state.privacy-icon-on { background: #2578c8; }
.toolbar .privacy-icon-state.privacy-icon-off { background: #718096; }
.toolbar .privacy-icon-state.privacy-icon-unknown { background: #a36f1f; }
.toolbar #privacy-button[aria-pressed="true"] .privacy-icon-state.privacy-icon-on { border-color: #dceeff; background: #fff; color: #1f65a9; }
.screen-pair {
  grid-area: screens; width: 100%; max-width: none; height: 100%; margin: 0;
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px;
  align-items: stretch; justify-items: stretch; min-height: 0; overflow: visible;
}
.screen-card {
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  border: 1px solid var(--line); border-radius: 7px; background: #fff;
  padding: 14px 14px 18px; box-shadow: 0 1px 3px #23385104;
}
.screen-card-head { display: grid; gap: 6px; padding: 0 0 13px; min-height: 48px; }
.screen-card-head strong { display: flex; gap: 7px; align-items: center; font-size: 13px; font-weight: 600; }
.screen-card-head i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #91a4ba; }
.screen-card-head small { color: #8090a6; font-size: 11px; padding-left: 14px; }
.screen-card-body { flex: 1; min-height: 0; display: grid; place-items: center; container-type: size; overflow: auto; scrollbar-gutter: stable; }
.video-shell, .video-shell[data-size="compact"], .video-shell[data-size="standard"], .video-shell[data-size="large"] {
  width: min(100cqw, calc(100cqh * var(--phone-aspect)));
  max-width: 100%; height: auto; max-height: 100%; aspect-ratio: var(--phone-aspect);
  border: 2px solid #1f2c3a; border-radius: 21px; background: #101923;
  box-shadow: 0 7px 15px #1b30451a;
}
.video-shell:fullscreen { width: 100vw; height: 100vh; max-width: none; max-height: none; border: 0; border-radius: 0; }
.video-placeholder { padding: 18px; background: #eef2f7; color: #7b8da3; font-size: 12px; line-height: 1.6; }
.video-placeholder strong { color: #51687f; font-size: 14px; }.screen-label { display: none; }
.agent-screen-label { top: 9px; left: 6px; right: 6px; max-width: none; white-space: normal; text-align: center; line-height: 1.5; font-size: 10px; padding: 4px; background: #172c44d9; }
.agent-trace-record, .agent-trace-clear { font-size: 10px; padding: 2px 4px; margin-left: 3px; }
.screen-pair[data-layout="device"], .screen-pair[data-layout="track"] { grid-template-columns: minmax(0,1fr); }
.screen-pair[data-layout="device"] .screen-card:has(#agent-video-shell),
.screen-pair[data-layout="track"] .screen-card:has(#video-shell) { display: none; }
.stream-panel {
  grid-area: health; width: 100%; max-width: none; margin: 0; padding: 10px 12px;
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px;
  align-items: end; font-size: 11px;
}
.view-controls { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 9px; align-items: start; }
.view-controls label { display: grid; grid-template-columns: 1fr; gap: 4px; color: #77879b; font-size: 11px; white-space: normal; }
.view-controls select { width: 100%; min-width: 0; max-width: none; padding: 5px 6px; font-size: 11px; background: #f9fbfd; }
#quality-mode { display: none; }.stream-health { display: flex; justify-content: flex-end; align-items: center; gap: 12px; min-height: 18px; white-space: normal; color: #8492a4; font-size: 11px; }
.stream-health details { position: relative; }.stream-health details[open] { z-index: 9; }
.stream-health details[open] pre { position: absolute; right: 0; bottom: 24px; width: 300px; max-height: 280px; overflow: auto; padding: 12px; border: 1px solid var(--line); background: #fff; color: #506378; box-shadow: 0 4px 20px #2338511a; }
.admin-column {
  grid-column: 3; grid-row: 1; display: grid; grid-template-rows: auto auto minmax(0,1fr);
  align-self: stretch; height: auto; min-height: 0; margin: 16px 20px 16px 0;
  background: #fff; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; box-shadow: none;
}
.workspace.read-only .admin-column { display: none; }
.function-index-heading { padding: 12px 16px 0; min-height: 0; background: #fff; border: 0; }
.function-index-heading strong { font-size: 13px; }.function-index-heading span { display: none; }
.tabs.function-index {
  display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 0;
  min-height: 50px; padding: 0 10px; background: #fff; border-bottom: 1px solid #e8edf4;
}
.function-index button { min-width: 0; display: flex; align-items: center; justify-content: center; padding: 11px 1px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: #62748c; font-size: 12px; }
.function-index button span { font-size: 12px; }.function-index button small { display: none; }
.function-index button.active { color: #2688ed; background: transparent; border: 0; border-bottom: 2px solid #328ef2; font-weight: 600; }
.panel { width: 100%; max-width: none; height: 100%; min-height: 0; margin: 0; padding: 16px; overflow: auto; scrollbar-width: thin; }
.panel-heading { align-items: center; gap: 8px; margin-bottom: 13px; }.panel h2 { font-size: 15px; font-weight: 600; }.panel-heading small { color: #7d8da2; }
.hint, .panel small { font-size: 12px; color: #7c8ba0; line-height: 1.6; }.hint { min-height: 0; }
.readable-output { min-height: 0; background: #f6f8fb; color: #60748a; border-radius: 5px; padding: 12px; font-family: inherit; font-size: 12px; line-height: 1.7; }
.device-name { font-size: 16px; }.action-grid { gap: 7px; }.action-grid button { padding: 8px 4px; font-size: 12px; }
.endpoint-card,.workspace-controls,.file-list,.file-breadcrumbs,.keymap-help span,.keymap-row,
.camera-preview-card,.video-transform-card,.video-card,.user-create-form,.user-row {
  background: #fff; border-color: var(--line); color: #4c6079; border-radius: 5px;
}
.endpoint-card { padding: 12px; gap: 9px; }.endpoint-heading small { font-size: 11px; }
.panel label { font-size: 12px; }.file-row { border-color: #edf1f6; }.file-row:hover,.file-row.selected { background: #edf5ff; }.file-table-head { background: #f5f8fc; border-color: var(--line); color: #7d8fa5; }
.file-breadcrumbs button { color: #61788e; }.file-breadcrumbs button:hover,.file-breadcrumbs button.current { background: #edf5ff; color: #277edb; }
.file-manager { grid-template-columns: 86px minmax(0,1fr); gap: 8px; min-height: 300px; }.file-locations { padding-right: 7px; }
.path-row,.file-actions,.command-row { flex-wrap: wrap; }.path-row input,.command-row input { min-width: 90px; }
.file-table { overflow-x: auto; }.file-table-head,.file-table .file-row { grid-template-columns: minmax(100px,1fr) 44px 48px 80px 48px; font-size: 11px; gap: 4px; }
.keymap-actions { flex-wrap: wrap; }.keymap-row kbd { color: #40556c; background: #f3f6fa; border-color: #d8e2ee; }
.keymap-board.white { background: #fafcff; color: #26364a; }.keymap-board.black,.terminal-output { background: #1c2c3d; color: #e0eaf5; }
.keymap-help span { color: #667e95; }.keymap-help { grid-template-columns: 1fr; }.keymap-help small { font-size: 11px; }
.camera-preview-card { padding: 0; border: 0; margin: 18px 0 10px; }.camera-preview-heading { gap: 6px; }.camera-preview-heading strong { font-size: 14px; }.camera-preview-heading small { font-size: 11px; }
.camera-preview-stage { background: #edf1f6; border: 1px solid #e2e8f0; border-radius: 5px; max-height: 190px; }
#qiguang-camera-placeholder { color: #8997a9; font-size: 12px; }#qiguang-camera-placeholder strong { color: #72869e; font-weight: 400; }
.camera-preview-actions { gap: 6px; }.camera-preview-actions button { font-size: 12px; padding: 8px 4px; }
.video-transform-card { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 12px; margin: 12px 0; }
.video-transform-card .action-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.video-transform-card .action-grid button { min-height: 34px; padding: 6px 2px; font-size: 11px; }.video-transform-card p { margin: 0; }
.face-lab-charge { display: flex !important; align-items: center; justify-content: space-between; margin: 0 !important; }.face-lab-charge select { width: 68%; font-size: 11px; }
.video-library-heading { margin-top: 18px; padding-top: 16px; }.video-transform-grid button { font-size: 11px; }.video-card.active { background: #edf5ff; border-color: #a7cef5; }.video-card .video-icon { background: #edf3fa; color: #54718d; }
.account-dialog { background: #fff; color: var(--text); border-color: var(--line); box-shadow: 0 15px 60px #132c4440; border-radius: 8px; }
.account-dialog::backdrop { background: #122c454d; backdrop-filter: none; }
.login-card { background: #fff; border-color: var(--line); border-radius: 9px; box-shadow: 0 10px 30px #23385110; }.login-error { color: #c34d59; }
.toast { color: #fff; background: #263e55; border-color: #3d566e; }
@media (min-width: 1700px) { :root { --rail-width: 220px; }.remote-column { padding-left: 26px; padding-right: 22px; }.screen-card { padding: 18px 20px 22px; } }
@media (max-width: 1279px) and (min-width: 1000px) {
  :root { --rail-width: 166px; }
  .workspace,.workspace.read-only { grid-template-columns: var(--rail-width) minmax(430px,1fr) 325px; }
  .workspace.read-only { grid-template-columns: var(--rail-width) minmax(430px,1fr); }
  .remote-column { padding: 10px; gap: 9px; grid-template-columns: 64px minmax(0,1fr); }
  .toolbar { width: 64px; padding: 6px; }.toolbar button { width: 50px; }
  .screen-pair { gap: 9px; }.screen-card { padding: 10px 7px 13px; }
  .screen-card-head strong { font-size: 12px; }.screen-card-head small { font-size: 10px; }
  .admin-column { margin: 10px 10px 10px 0; }.panel { padding: 12px; }
  .stream-panel { grid-template-columns: minmax(0,1fr); }
  .view-controls { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .topbar-actions { gap: 7px; }.connection { gap: 6px; }.topbar { padding-right: 12px; }
}
@media (max-width: 999px) {
  .workspace,.workspace.read-only { grid-template-columns: 150px minmax(0,1fr); grid-template-rows: minmax(660px,calc(100dvh - 64px)) auto; height: auto; min-height: 0; overflow: visible; }
  .device-sidebar { grid-column: 1; grid-row: 1/-1; max-height: none; min-height: 0; }
  .remote-column { grid-column: 2; grid-row: 1; padding: 12px; }
  .admin-column { grid-column: 2; grid-row: 2; height: 620px; margin: 0 12px 18px; min-height: 0; }
  .topbar { padding-right: 12px; }.topbar .brand { width: 150px; flex-basis: 150px; padding: 0 14px; }
  .brand small,.account-name { display: none; }.topbar-actions { gap: 6px; }.connection { border: 0; padding: 0; }
}
@media (max-width: 660px) {
  .topbar { height: auto; min-height: 64px; padding: 0 10px 0 0; gap: 8px; flex-direction: row; align-items: center; }
  .topbar .brand { flex: 0 0 105px; width: 105px; padding: 12px 9px; }.brand strong { font-size: 13px; }.brand .mark { width: 24px; height: 24px; }
  .topbar-actions { align-items: flex-end; flex-direction: column; padding: 8px 0; }.connection { font-size: 10px; }.account-cluster { gap: 5px; padding: 0; }.account-cluster button { font-size: 11px; padding: 3px; }
  .workspace,.workspace.read-only { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto 680px 600px; min-height: 0; }
  .device-sidebar { grid-column: 1; grid-row: 1; max-height: 150px; }.device-sidebar-heading,.device-summary { display: none; }.device-search { padding-top: 10px; }.device-list { min-height: 45px; }.device-card { margin: 0; padding: 0 14px; }
  .remote-column { grid-column: 1; grid-row: 2; grid-template-columns: 57px minmax(0,1fr); grid-template-rows: minmax(0,1fr) auto; gap: 7px; padding: 10px; }
  .toolbar { width: 57px; padding: 5px; gap: 5px; }.toolbar button { width: 45px; flex-basis: 45px; min-height: 45px; font-size: 10px; }
  .screen-pair { gap: 7px; }.screen-card { padding: 8px 5px; }.screen-card-head strong { font-size: 10px; }.screen-card-head small { display: none; }.screen-card-head { min-height: 28px; padding-bottom: 6px; }.video-shell { border-radius: 14px; }.agent-screen-label { font-size: 9px; }
  .stream-panel { grid-template-columns: minmax(0,1fr); }.view-controls { grid-template-columns: repeat(3,minmax(0,1fr)); }.view-controls label { font-size: 10px; }.view-controls select { font-size: 10px; }
  .admin-column { grid-column: 1; grid-row: 3; margin: 0 10px 12px; height: auto; }.remote-session-header strong { font-size: 17px; }
}

/* Optional dark presentation: the information architecture remains identical
   to the default light workstation, so it is safe to switch during a session. */
.theme-toggle { min-width: 50px; padding-inline: 9px; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #171a1f; --panel: #202124; --panel-2: #292c32;
  --line: #3c4043; --line-strong: #5f6368;
  --text: #f1f3f4; --muted: #bdc1c6;
  --accent: #8ab4f8; --accent-2: #669df6; --danger: #f28b82;
}
:root[data-theme="dark"] body { background: #171a1f; color: var(--text); }
:root[data-theme="dark"] .topbar { background: #202124; border-bottom-color: #3c4043; }
:root[data-theme="dark"] .device-sidebar { background: #202124; border-right-color: #3c4043; }
:root[data-theme="dark"] .workspace { background: #171a1f; }
:root[data-theme="dark"] .remote-column { background: #1b1e23; border-bottom-color: #3c4043; }
:root[data-theme="dark"] .admin-column,
:root[data-theme="dark"] .function-index-heading,
:root[data-theme="dark"] .tabs.function-index,
:root[data-theme="dark"] .stream-panel,
:root[data-theme="dark"] .screen-card,
:root[data-theme="dark"] .login-card,
:root[data-theme="dark"] .account-dialog { background: #202124; }
:root[data-theme="dark"] .tabs.function-index { border-bottom-color: #3c4043; }
:root[data-theme="dark"] button,
:root[data-theme="dark"] .file-button { background: #292c32; border-color: #4a4f57; color: var(--text); }
:root[data-theme="dark"] button:hover:not(:disabled),
:root[data-theme="dark"] .file-button:hover { background: #353940; border-color: #7b8188; }
:root[data-theme="dark"] button.primary { background: #8ab4f8; border-color: #a8c7fa; color: #202124; }
:root[data-theme="dark"] .theme-toggle { background: #292c32; border-color: #5f6368; color: #e8eaed; }
:root[data-theme="dark"] input,
:root[data-theme="dark"] select { background: #202124; border-color: #5f6368; color: var(--text); }
:root[data-theme="dark"] .screen-card { border-color: #4a4f57; box-shadow: 0 5px 18px #00000033; }
:root[data-theme="dark"] .screen-card-head small,
:root[data-theme="dark"] .panel-heading small,
:root[data-theme="dark"] .hint,
:root[data-theme="dark"] .panel small { color: #bdc1c6; }
:root[data-theme="dark"] .video-shell { border-color: #5f6368; background: #101114; }
:root[data-theme="dark"] .video-placeholder { background: #292c32; color: #bdc1c6; }
:root[data-theme="dark"] .video-placeholder strong { color: #f1f3f4; }
:root[data-theme="dark"] .readable-output,
:root[data-theme="dark"] .endpoint-card,
:root[data-theme="dark"] .workspace-controls,
:root[data-theme="dark"] .file-list,
:root[data-theme="dark"] .file-breadcrumbs,
:root[data-theme="dark"] .keymap-help span,
:root[data-theme="dark"] .keymap-row,
:root[data-theme="dark"] .camera-preview-card,
:root[data-theme="dark"] .video-transform-card,
:root[data-theme="dark"] .video-card,
:root[data-theme="dark"] .user-create-form,
:root[data-theme="dark"] .user-row { background: #292c32; border-color: #4a4f57; color: #e8eaed; }
:root[data-theme="dark"] .file-table-head { background: #292c32; color: #dfe3e8; }
:root[data-theme="dark"] .file-row { border-color: #3c4043; }
:root[data-theme="dark"] .file-row:hover,
:root[data-theme="dark"] .file-row.selected,
:root[data-theme="dark"] .file-breadcrumbs button:hover,
:root[data-theme="dark"] .file-breadcrumbs button.current,
:root[data-theme="dark"] .video-card.active { background: #3c4043; color: #f1f3f4; }
:root[data-theme="dark"] .keymap-row kbd { background: #353940; border-color: #5f6368; color: #f1f3f4; }
:root[data-theme="dark"] .keymap-board.white { background: #e8eff7; color: #213044; }
:root[data-theme="dark"] #panel-keymap .toggle-row { background: #292c32; border-color: #5f6368; color: #e8eaed !important; }
:root[data-theme="dark"] #panel-keymap .keymap-help { border-top-color: #4a4f57; }
:root[data-theme="dark"] .camera-preview-stage { background: #202124; border-color: #5f6368; }
:root[data-theme="dark"] .video-card .video-icon { background: #353940; color: #dfe3e8; }
:root[data-theme="dark"] .account-dialog::backdrop { background: #00000099; }
:root[data-theme="dark"] .toast { background: #303134; border-color: #5f6368; }

/* Six visible FaceLab actions form two balanced rows after deferred controls. */
.video-transform-card .action-grid.face-lab-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ============================================================================
   设备栏 B 方案 —— 单行 + 状态分组（2026-10-15）
   · 兼容当前配色与 v5「暮蓝晨金」覆盖层（变量均带回退值）
   · 交互配合 app.js renderDevices：按 使用中 / 在线 / 待确认 / 离线 分组，
     离线组默认折叠（状态存 localStorage: qg-device-groups），搜索时强制展开
   ============================================================================ */
.device-sidebar {
  --dr-ok: var(--ok, #36b775);
  --dr-busy: var(--busy, #60a5fa);
  --dr-pend: var(--accent-strong, #f6c762);
  --dr-off: var(--navy-muted, #8fa0b6);
  --dr-sel: var(--navy-2, #2b4359);
  --dr-bar: var(--accent-fill, var(--accent, #62d9b0));
  --dr-hover: rgba(255, 255, 255, .06);
}
.device-sidebar-heading { align-items: flex-start; gap: 8px; padding: 14px 14px 6px; border-bottom: 0; }
.device-sidebar-heading > div { display: grid; gap: 2px; min-width: 0; }
.device-sidebar-heading strong { font-size: 13.5px; }
.device-sidebar-heading small { font-size: 10px; color: var(--navy-muted, #a4b7cb); }
.device-summary { display: flex; flex-wrap: wrap; gap: 2px 9px; padding: 3px 0 1px; color: var(--navy-muted, #a4b7cb); font-size: 10.5px; }
.device-summary span { padding: 0; }
.device-summary strong { color: var(--navy-text, #e3edf7); font-size: 11px; margin-right: 2px; }
.device-search { padding: 2px 10px 8px; }
.device-search input { padding: 7px 9px; font-size: 11.5px; }
.device-list { padding: 2px 6px 12px; }
.device-offline-toggle { margin: 0 12px 6px; }

/* —— 单行设备行 —— */
.device-card { display: flex; align-items: center; gap: 0; min-height: 36px; margin: 1px 0; padding: 0; border-bottom: 0; border-radius: 7px; }
.device-card:hover { background: var(--dr-hover); }
.device-card.selected { background: var(--dr-sel); }
.device-card.selected::before { display: block; inset: 5px auto 5px 0; width: 3px; border-radius: 2px; background: var(--dr-bar); }
.device-card.busy:not(.selected) { background: transparent; }
.device-card-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent; text-align: left; }
.device-card-main:hover:not(:disabled) { background: transparent; border-color: transparent; }
.device-card-main > span:last-child { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
.device-card-main strong { min-width: 0; font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.device-card-main small { flex: 0 0 auto; max-width: 46%; margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; }
.device-card[data-state="idle"] .device-card-main small { color: var(--dr-ok); }
.device-card[data-state="busy"] .device-card-main small { color: var(--dr-busy); }
.device-card[data-state="pending"] .device-card-main small { color: var(--dr-pend); }
.device-card[data-state="offline"] .device-card-main small { color: var(--dr-off); }
.device-card[data-state="offline"] .device-card-main strong { color: var(--navy-muted, #9fb0cc); }
.device-card[data-state="offline"] .dot { opacity: .75; }

/* —— 悬停/键盘聚焦时，操作按钮顶替状态文字位置 —— */
.device-actions { display: none; padding-right: 6px; }
.device-card:hover .device-actions,
.device-card:focus-within .device-actions { display: inline-flex; gap: 4px; }
.device-card:has(.device-actions):hover .device-card-main small,
.device-card:has(.device-actions):focus-within .device-card-main small { display: none; }
.device-action { min-width: auto; padding: 3px 8px; border: 0; border-radius: 5px; background: var(--navy-2, #2b4359); color: var(--navy-text, #dce7f2); font-size: 10.5px; }
.device-action:hover:not(:disabled) { background: var(--dr-sel); border-color: transparent; }
.device-action.danger { color: #f2a79e; background: rgba(229, 103, 90, .16); }

/* —— 状态分组头 —— */
.device-group-head { display: flex; align-items: center; gap: 6px; width: 100%; height: 26px; margin: 5px 0 1px; padding: 0 9px; border: 0; border-radius: 6px; background: transparent; color: var(--navy-muted, #9fb0cc); font: inherit; font-size: 10.5px; letter-spacing: .08em; text-align: left; cursor: pointer; }
.device-group-head:hover { background: var(--dr-hover); color: var(--navy-text, #dce7f2); }
.device-group-head .caret { width: 9px; font-size: 9px; opacity: .8; transition: transform .15s ease; }
.device-group-head[aria-expanded="false"] .caret { transform: rotate(-90deg); }
.device-group-head .cnt { margin-left: auto; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .device-group-head .caret { transition: none; } }

/* C174: preserve every screen setting without giving it a full bottom row.
   Portrait video is height-bound, so moving settings beside its owner gives
   both screens substantially more usable canvas at desktop widths. */
.remote-column {
  grid-template-rows: minmax(0, 1fr) 24px;
  grid-template-areas: "controls screens" "controls health";
}
.screen-pair {
  grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr);
  gap: 10px;
}
.screen-pair[data-layout="device"] { grid-template-columns: minmax(0, 1fr) 46px; }
.screen-pair[data-layout="track"] { grid-template-columns: 46px minmax(0, 1fr); }
.screen-card { padding: 10px 10px 12px; }
.screen-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-height: 0;
  padding: 0 1px 7px;
}
.screen-card-head small { padding-left: 0; text-align: right; white-space: nowrap; }
.screen-card-content { display: grid; flex: 1; min-height: 0; gap: 8px; }
.device-card-content { grid-template-columns: 76px minmax(0, 1fr); }
.agent-card-content { grid-template-columns: minmax(0, 1fr) 76px; }
.screen-side-controls {
  display: grid;
  align-content: start;
  gap: 7px;
  padding-top: 1px;
}
.screen-side-controls label {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: #77879b;
  font-size: 10px;
  line-height: 1.25;
}
.screen-side-controls select {
  width: 100%;
  min-width: 0;
  padding: 5px 3px;
  color: #4c6079;
  font-size: 10px;
  text-overflow: ellipsis;
}
.screen-zoom-rail {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 3px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: #77879b;
}
.screen-zoom-rail label {
  display: grid;
  justify-items: center;
  gap: 8px;
  color: inherit;
  font-size: 10px;
}
.screen-zoom-rail label > span { writing-mode: vertical-rl; letter-spacing: .08em; }
.screen-zoom-rail input[type="range"] {
  width: 18px;
  height: min(42vh, 320px);
  min-height: 130px;
  margin: 0;
  accent-color: #328ef2;
  writing-mode: vertical-lr;
  direction: rtl;
}
.screen-zoom-rail output { color: #4e6279; font-size: 10px; font-variant-numeric: tabular-nums; }
.compact-stream-health {
  grid-area: health;
  justify-self: end;
  min-height: 0;
  padding: 0 2px;
  overflow: visible;
  font-size: 10px;
  white-space: nowrap;
}
.toolbar #privacy-button { cursor: pointer; }
.toolbar #privacy-button:disabled { cursor: wait; }

@media (max-width: 1279px) and (min-width: 1000px) {
  .screen-pair { grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr); gap: 7px; }
  .screen-card { padding: 8px 6px 9px; }
  .device-card-content { grid-template-columns: 65px minmax(0, 1fr); }
  .agent-card-content { grid-template-columns: minmax(0, 1fr) 65px; }
  .screen-side-controls { gap: 5px; }
  .screen-side-controls label,.screen-side-controls select { font-size: 9px; }
  .screen-zoom-rail { padding-inline: 1px; }
  .screen-zoom-rail input[type="range"] { min-height: 100px; }
}

@media (max-width: 999px) {
  .remote-column { grid-template-rows: minmax(0, 1fr) 26px; }
  .screen-pair { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0,1fr) auto minmax(0,1fr); }
  .screen-pair[data-layout="device"] { grid-template-rows: minmax(0,1fr) auto; }
  .screen-pair[data-layout="track"] { grid-template-rows: auto minmax(0,1fr); }
  .screen-zoom-rail { grid-row: 2; grid-template-columns: auto minmax(140px,1fr) auto; width: 100%; padding: 5px 9px; }
  .screen-zoom-rail label { grid-template-columns: auto minmax(140px,1fr); width: 100%; align-items: center; }
  .screen-zoom-rail label > span { writing-mode: horizontal-tb; }
  .screen-zoom-rail input[type="range"] { width: 100%; height: 18px; min-height: 0; writing-mode: horizontal-tb; direction: ltr; }
}

@media (max-width: 660px) {
  .screen-card-head small { display: none; }
  .device-card-content { grid-template-columns: 62px minmax(0, 1fr); }
  .agent-card-content { grid-template-columns: minmax(0, 1fr) 62px; }
  .screen-side-controls label,.screen-side-controls select { font-size: 9px; }
  .compact-stream-health { justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
}

:root[data-theme="dark"] .screen-zoom-rail { background: #202124; }
:root[data-theme="dark"] .screen-side-controls label,
:root[data-theme="dark"] .screen-zoom-rail { color: #bdc1c6; }

/* ===== 三主题层（纸墨/暮蓝/财神）· 粘贴于 2026-10-15，来源 docs/ui-prototypes/qiguang-remote-console-palette-v5.css ===== */

/* ============================================================================
   启光远控 · 三主题配色层（v5）—— 纸墨（浅色）/ 暮蓝（深色）/ 财神（红金喜庆）
   配色覆盖层（2026-10-15）· 已粘贴到 style.css 最末尾（本文件保留为来源副本）
   ----------------------------------------------------------------------------
   · 只改颜色层：所有选择器与原文件同名（后者生效），不动布局 / ID / data-*
   · 主题切换：app.js 三档循环（浅色 → 深色 → 财神红），localStorage: qg-ui-theme
   · 主题属性：浅色=默认 / dark=暮蓝 / caishen=财神
   · 令牌说明：金分两档 —— 文本档 --accent / 填充档 --accent-fill（填充底用深炭字）
   · 财神底纹（可选）：把 caishen-pattern.png 放 public/assets/，再把下方 caishen
     块中的 --caishen-pattern 设为 url("/app/assets/caishen-pattern.png")
   ============================================================================ */

/* ---------- 令牌：浅色（纸墨） ---------- */
:root, :root[data-theme="light"] {
  --bg:            #F4F0E8;   /* 页面 · 暖瓷纸 */
  --bg-soft:       #FBF8F1;   /* 顶栏亮面 */
  --panel:         #FEFCF6;   /* 面板 · 暖白（非纯白） */
  --panel-2:       #F8F4EA;   /* 内嵌块 */
  --line:          #E6E0D2;
  --line-strong:   #CFC5B0;
  --text:          #232A3B;
  --muted:         #5E6A80;
  --faint:         #8C95A7;
  --accent:        #96610B;   /* 晨金 · 文本/图标档 */
  --accent-fill:   #E8A33D;   /* 晨金 · 填充档 */
  --accent-strong: #F2B24F;
  --accent-soft:   rgba(232, 163, 61, .14);
  --accent-line:   rgba(178, 122, 32, .38);
  --on-accent:     #2A1B04;
  --ok:            #1E8E5A;   --ok-soft:     rgba(30, 142, 90, .12);
  --busy:          #2F73C9;   --busy-soft:   rgba(47, 115, 201, .12);
  --danger:        #B7423A;   --danger-soft: rgba(183, 66, 58, .12);
  --navy:          #1B2A44;   /* 导航深蓝 */
  --navy-2:        #223452;
  --navy-text:     #DCE4F2;
  --navy-muted:    #9FB0CC;
  --shadow:        0 16px 40px rgba(40, 36, 28, .10);
  --hairline:      linear-gradient(90deg, transparent, rgba(232, 163, 61, .65) 18%, rgba(232, 163, 61, .65) 82%, transparent);
}

/* ---------- 令牌：深色（暮蓝） ---------- */
:root[data-theme="dark"] {
  --bg:            #0B0E16;
  --bg-soft:       #10141F;
  --panel:         #151A28;
  --panel-2:       #1B2133;
  --line:          #232B3F;
  --line-strong:   #333D57;
  --text:          #E9EDF6;
  --muted:         #97A2B9;
  --faint:         #6C7792;
  --accent:        #F0B45C;
  --accent-fill:   #F0B45C;
  --accent-strong: #FFC97A;
  --accent-soft:   rgba(240, 180, 92, .13);
  --accent-line:   rgba(240, 180, 92, .40);
  --on-accent:     #241703;
  --ok:            #4CC38A;   --ok-soft:     rgba(76, 195, 138, .13);
  --busy:          #6FA8FF;   --busy-soft:   rgba(111, 168, 255, .13);
  --danger:        #E5675A;   --danger-soft: rgba(229, 103, 90, .13);
  --navy:          #141B2E;
  --navy-2:        #1C2640;
  --navy-text:     #E4EAF8;
  --navy-muted:    #93A2C4;
  --shadow:        0 18px 44px rgba(0, 0, 0, .45);
  --hairline:      linear-gradient(90deg, transparent, rgba(240, 180, 92, .55) 18%, rgba(240, 180, 92, .55) 82%, transparent);
}

/* ---------- 基底与氛围（有纵深的背景，无纯白/纯灰平铺） ---------- */
body {
  background:
    radial-gradient(1100px 520px at 16% -12%, rgba(232, 163, 61, .10), transparent 62%),
    radial-gradient(900px 480px at 88% -6%, rgba(47, 115, 201, .07), transparent 60%),
    var(--bg);
  color: var(--text);
}
:root[data-theme="dark"] body {
  background:
    radial-gradient(1200px 560px at 14% -14%, rgba(240, 180, 92, .07), transparent 60%),
    radial-gradient(900px 500px at 90% -8%, rgba(111, 168, 255, .05), transparent 55%),
    var(--bg);
  color: var(--text);
}

/* ---------- 顶栏与品牌（记忆点：晨昏线 + 金色品牌章） ---------- */
.topbar { position: relative; background: var(--bg-soft); border-bottom-color: var(--line); }
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--hairline); pointer-events: none; }
.topbar .brand { background: var(--navy); color: var(--navy-text); }
.brand small { color: var(--navy-muted); }
.mark { background: linear-gradient(150deg, var(--accent-strong), var(--accent-fill) 55%, #C98422); color: var(--on-accent); box-shadow: inset 0 -6px 10px rgba(42, 27, 4, .25); }
.account-name { color: var(--muted); }
.connection { border-right-color: var(--line); color: var(--muted); }

/* ---------- 通用控件 ---------- */
button, .file-button {
  background: var(--panel); border-color: var(--line-strong); color: var(--text);
}
button:hover:not(:disabled), .file-button:hover { background: var(--panel-2); border-color: var(--accent-line); color: var(--text); }
button.primary { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); font-weight: 700; }
button.primary:hover:not(:disabled) { background: var(--accent-strong); border-color: var(--accent-strong); box-shadow: 0 4px 18px rgba(232, 163, 61, .35); }
button.danger { color: var(--danger); border-color: rgba(183, 66, 58, .38); background: var(--danger-soft); }
button:disabled { opacity: .45; }
input, select { background: var(--panel); border-color: var(--line-strong); color: var(--text); }
input::placeholder { color: var(--faint); }
button:focus-visible, input:focus-visible, select:focus-visible,
.video-shell:focus-visible { outline: 2px solid var(--accent-fill); outline-offset: 2px; }
::selection { background: rgba(232, 163, 61, .32); }

/* ---------- 设备栏（深蓝家族统一） ---------- */
.device-sidebar { background: var(--navy); color: var(--navy-text); }
.device-sidebar-heading small { color: var(--navy-muted); }
.device-sidebar-heading button { background: var(--navy-2); border-color: transparent; color: var(--navy-text); }
.device-summary { color: var(--navy-muted); }
.device-summary strong { color: var(--navy-text); }
.device-search input { background: var(--navy-2); border-color: transparent; color: var(--navy-text); }
.device-search input::placeholder { color: var(--navy-muted); }
.device-card { border-color: rgba(255, 255, 255, .07); }
.device-card-main { color: var(--navy-text); }
.device-card-main small { color: var(--navy-muted); }
.device-card-main:hover:not(:disabled) { background: rgba(255, 255, 255, .06); color: #fff; }
.device-card.selected { background: var(--navy-2); box-shadow: inset 3px 0 0 var(--accent-fill); }
.device-card.selected .device-card-main, .device-card.selected small { color: var(--navy-text); }
.device-offline-toggle, .device-empty { color: var(--navy-muted); }
.device-offline-toggle:hover, .device-offline-toggle[aria-pressed="true"] { color: var(--navy-text); background: var(--navy-2); }
.device-action.danger { color: #F2A79E; }

/* ---------- 状态语义（玉绿 / 蓝 / 晨金 / 灰） ---------- */
.dot { background: var(--faint); box-shadow: none; }
.dot.online { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); }
.dot.pending, .dot.connecting { background: var(--accent-fill); box-shadow: 0 0 0 4px var(--accent-soft); }
.dot.busy { background: var(--busy); box-shadow: 0 0 0 4px var(--busy-soft); }
.session-pill { border-color: var(--line-strong); color: var(--muted); }
.session-pill.online { color: var(--ok); border-color: rgba(30, 142, 90, .35); background: var(--ok-soft); }
.session-pill.pending, .session-pill.connecting { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.session-pill.busy { color: var(--busy); border-color: rgba(47, 115, 201, .35); background: var(--busy-soft); }
:root[data-theme="dark"] .session-pill.online { border-color: rgba(76, 195, 138, .38); }
:root[data-theme="dark"] .session-pill.busy { border-color: rgba(111, 168, 255, .38); }

/* ---------- 画面区 ---------- */
.remote-column { background: var(--bg); }
.screen-card { background: var(--panel); border-color: var(--line); box-shadow: var(--shadow); }
.screen-card-head i { background: var(--accent-fill); }
.screen-card-head small, .panel-heading small { color: var(--faint); }
.video-shell { border-color: #2A3346; background: #0B0E16; box-shadow: 0 18px 50px rgba(10, 12, 20, .35); }
:root[data-theme="light"] .video-shell { border-color: #D8D0BE; }
.video-placeholder { background: var(--panel-2); color: var(--muted); }
.video-placeholder strong { color: var(--text); }
.agent-screen-label { background: rgba(11, 14, 22, .82); border-color: var(--accent-line); color: var(--text); }
.toolbar { background: var(--panel); border-color: var(--line); }
.toolbar button { background: transparent; }
.toolbar button:hover { background: var(--panel-2); border-color: var(--line); color: var(--text); }
.toolbar #privacy-button { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.toolbar #privacy-button.active, .toolbar #privacy-button[aria-pressed="true"] { background: var(--accent-fill); color: var(--on-accent); }
.toolbar #privacy-button.privacy-state-unknown { color: var(--muted); background: transparent; border-color: var(--line); }
.toolbar .privacy-icon-state { border-color: var(--panel); color: var(--on-accent); }
.toolbar .privacy-icon-state.privacy-icon-on { background: var(--ok); color: #fff; }
.toolbar .privacy-icon-state.privacy-icon-off { background: var(--faint); color: #fff; }
.toolbar .privacy-icon-state.privacy-icon-unknown { background: var(--accent-fill); }
.stream-panel { background: var(--panel); border-color: var(--line); }
.view-controls label { color: var(--muted); }
.view-controls select { background: var(--panel-2); }
.stream-health { color: var(--muted); }
.stream-health details[open] pre { background: var(--panel); color: var(--muted); border-color: var(--line); }
kbd { color: var(--faint); background: var(--panel-2); border-color: var(--line); }

/* ---------- 功能中心（右栏） ---------- */
.admin-column { background: var(--panel); border-color: var(--line); }
.function-index-heading, .tabs.function-index { background: var(--panel); border-bottom-color: var(--line); }
.function-index button { color: var(--muted); }
.function-index button.active { color: var(--accent); border-bottom-color: var(--accent-fill); }
.panel-heading h2 { color: var(--text); }
.hint, .panel small { color: var(--faint); }
.readable-output { background: var(--panel-2); color: var(--muted); }
.endpoint-card, .service-recovery-card { background: var(--panel-2); border-color: var(--line); }
.action-grid button { background: var(--panel); }

/* ---------- 文件 / 终端 / 应用 / 输入 / 媒体 ---------- */
.file-row { border-color: var(--line); }
.file-row:hover, .file-row.selected { background: var(--accent-soft); }
.file-breadcrumbs button { color: var(--muted); }
.file-breadcrumbs button:hover, .file-breadcrumbs button.current { background: var(--accent-soft); color: var(--accent); }
.file-table-head { background: var(--panel-2); color: var(--muted); }
.terminal-output { background: #0B0E16; color: #D7DEEA; border-color: var(--line-strong); }
.keymap-board.white { background: #FAF7EF; color: var(--text); }
.keymap-board.black { background: #0B0E16; color: #D7DEEA; }
.keymap-row kbd { color: var(--text); background: var(--panel-2); border-color: var(--line); }
.keymap-help span { color: var(--muted); }
.camera-preview-stage { background: var(--panel-2); border-color: var(--line); }
#qiguang-camera-placeholder { color: var(--faint); }
#qiguang-camera-placeholder strong { color: var(--muted); }
.video-card.active { background: var(--accent-soft); border-color: var(--accent-line); }
.video-card .video-icon { background: var(--panel-2); color: var(--muted); }

/* ---------- 对话框 / 登录 / 提示条 ---------- */
.account-dialog { background: var(--panel); border-color: var(--line); box-shadow: var(--shadow); }
.account-dialog::backdrop { background: rgba(15, 22, 38, .45); }
.device-name-dialog { width: min(460px, calc(100vw - 32px)); margin: auto; padding: 0; overflow: hidden; color: var(--text); border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: var(--shadow); }
.device-name-dialog::backdrop { background: rgba(15, 22, 38, .45); }
.device-name-panel { display: grid; gap: 13px; padding: 18px; }
.device-name-dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 11px; border-bottom: 1px solid var(--line); }
.device-name-dialog-heading h2 { margin: 0; font-size: 1.06rem; }
.device-name-dialog-heading small { display: block; max-width: 330px; margin-top: 4px; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.device-name-field { display: grid; gap: 6px; color: var(--muted); font-size: .84rem; }
.device-name-field input { min-width: 0; }
.device-name-original, .device-name-error { min-height: 1.3em; margin: -4px 0 0; font-size: .81rem; line-height: 1.4; }
.device-name-original { color: var(--muted); }
.device-name-error { color: var(--danger); }
.device-name-actions { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; align-items: center; }
.device-name-actions button { min-height: 34px; white-space: nowrap; }
.workspace.multi-session-host > .remote-column,
.workspace.multi-session-host > .admin-column { display: none; }
.workspace.multi-session-host { display: grid; grid-template-rows: minmax(0,1fr); height: calc(100dvh - 64px); min-height: 400px; }
.multi-device-workspace { grid-column: 2 / -1; display: grid; grid-template-rows: auto minmax(0,1fr); min-width: 0; min-height: 0; overflow: hidden; }
.device-session-tabs { display: flex; align-items: center; gap: 6px; min-height: 37px; padding: 4px 10px; overflow-x: auto; border-bottom: 1px solid var(--line); background: var(--panel); }
.device-session-tab { display: flex; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.device-session-tab button { border: 0; border-radius: 0; background: transparent; min-height: 27px; padding: 3px 9px; white-space: nowrap; }
.device-session-tab.active { border-color: var(--accent); background: var(--accent-soft); }
.device-session-tab.active button { color: var(--accent); }
.device-session-tab .device-session-close { padding: 3px 7px; border-left: 1px solid var(--line); }
.device-session-stage { position: relative; min-height: 0; min-width: 0; overflow: hidden; }
.device-session-frame { display: block; width: 100%; height: 100%; border: 0; }
.device-session-frame[hidden], .device-session-empty[hidden] { display: none; }
.device-session-empty { height: 100%; display: grid; place-content: center; padding: 24px; color: var(--muted); text-align: center; }
.embedded-session .topbar, .embedded-session .device-sidebar { display: none; }
.embedded-session .workspace { grid-template-columns: minmax(0,1fr) minmax(300px,28%); height: 100dvh; min-height: 0; }
.embedded-session .remote-column { grid-column: 1; grid-row: 1; }
.embedded-session .admin-column { grid-column: 2; grid-row: 1; }
.embedded-session .workspace.read-only { grid-template-columns: minmax(0,1fr); }
@media (max-width: 850px) {
  .workspace.multi-session-host { grid-template-columns: 150px minmax(0,1fr); }
  .embedded-session .workspace { display: flex; flex-direction: column; height: 100dvh; overflow: auto; }
  .embedded-session .remote-column { flex: 0 0 85dvh; min-height: 560px; }
  .embedded-session .admin-column { flex: 0 0 60dvh; min-height: 420px; }
}
@media (max-width: 660px) {
  .workspace.multi-session-host { grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(0,1fr); }
  .workspace.multi-session-host > .device-sidebar { max-height: 160px; overflow: auto; }
  .multi-device-workspace { grid-column: 1; }
}
@media (max-width: 520px) {
  .device-name-dialog { width: calc(100vw - 16px); }
  .device-name-panel { padding: 14px; }
  .device-name-dialog-heading { align-items: stretch; flex-direction: column; }
  .device-name-dialog-heading > button { align-self: end; }
  .device-name-actions { grid-template-columns: 1fr 1fr; }
  .device-name-actions > span { display: none; }
}
.login-card { background: var(--panel); border-color: var(--line); box-shadow: var(--shadow); }
.login-error { color: var(--danger); }
.toast { background: var(--navy-2); border-color: var(--navy); color: var(--navy-text); }

/* ---------- 深色层覆盖（同名选择器，位置靠后即生效） ---------- */
:root[data-theme="dark"] .topbar { background: var(--bg-soft); border-bottom-color: var(--line); }
:root[data-theme="dark"] .device-sidebar { background: var(--navy); border-right-color: var(--line); }
:root[data-theme="dark"] .workspace { background: var(--bg); }
:root[data-theme="dark"] .remote-column { background: var(--bg); }
:root[data-theme="dark"] .admin-column,
:root[data-theme="dark"] .function-index-heading,
:root[data-theme="dark"] .tabs.function-index,
:root[data-theme="dark"] .stream-panel,
:root[data-theme="dark"] .screen-card,
:root[data-theme="dark"] .login-card,
:root[data-theme="dark"] .account-dialog { background: var(--panel); }
:root[data-theme="dark"] button, :root[data-theme="dark"] .file-button { background: var(--panel-2); border-color: var(--line-strong); color: var(--text); }
:root[data-theme="dark"] button:hover:not(:disabled), :root[data-theme="dark"] .file-button:hover { background: #212944; border-color: var(--accent-line); }
:root[data-theme="dark"] button.primary { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }
:root[data-theme="dark"] input, :root[data-theme="dark"] select { background: var(--panel-2); border-color: var(--line-strong); color: var(--text); }
:root[data-theme="dark"] .video-shell { border-color: #2A3346; background: #0B0E16; }
:root[data-theme="dark"] .video-placeholder { background: var(--panel-2); color: var(--muted); }
:root[data-theme="dark"] .video-placeholder strong { color: var(--text); }
:root[data-theme="dark"] .readable-output,
:root[data-theme="dark"] .endpoint-card,
:root[data-theme="dark"] .workspace-controls,
:root[data-theme="dark"] .file-list,
:root[data-theme="dark"] .file-breadcrumbs,
:root[data-theme="dark"] .keymap-help span,
:root[data-theme="dark"] .keymap-row,
:root[data-theme="dark"] .camera-preview-card,
:root[data-theme="dark"] .video-transform-card,
:root[data-theme="dark"] .video-card,
:root[data-theme="dark"] .user-create-form,
:root[data-theme="dark"] .user-row { background: var(--panel-2); border-color: var(--line); color: var(--text); }
:root[data-theme="dark"] .file-table-head { background: var(--panel-2); color: var(--muted); }
:root[data-theme="dark"] .file-row:hover, :root[data-theme="dark"] .file-row.selected,
:root[data-theme="dark"] .file-breadcrumbs button:hover, :root[data-theme="dark"] .file-breadcrumbs button.current,
:root[data-theme="dark"] .video-card.active { background: var(--accent-soft); color: var(--accent); }
:root[data-theme="dark"] .keymap-row kbd { background: var(--panel-2); border-color: var(--line); color: var(--text); }
:root[data-theme="dark"] .keymap-board.white { background: #1A2133; color: var(--text); }
:root[data-theme="dark"] #panel-keymap .toggle-row { background: var(--panel-2); border-color: var(--line-strong); color: var(--text) !important; }
:root[data-theme="dark"] .camera-preview-stage { background: var(--panel-2); border-color: var(--line); }
:root[data-theme="dark"] .video-card .video-icon { background: #212944; color: var(--muted); }
:root[data-theme="dark"] .account-dialog::backdrop { background: rgba(4, 6, 12, .72); }
:root[data-theme="dark"] .toast { background: var(--navy-2); border-color: #2C3752; color: var(--navy-text); }
:root[data-theme="dark"] .screen-card { border-color: var(--line); box-shadow: var(--shadow); }

/* ---------- 可选增强（非颜色，可整段删掉） ----------
   1) 正文字体（替换 Inter / Segoe UI；如已内置 MiSans 子集可直接生效）
   2) 数字等宽对齐（设备计数 / 文件大小 / 帧率）
*/
:root { font-family: "MiSans", "HarmonyOS Sans SC", "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei UI", sans-serif; }
.terminal-output, .readable-output, #quality-mode, .file-table, .device-summary strong { font-variant-numeric: tabular-nums; }

/* ---------- 补充（2026-10-15 晚）：适配新版侧栏控制与缩放滑轨 ----------
   对 style.css 新增的 .screen-side-controls / .screen-zoom-rail 做颜色收编 */
.screen-side-controls label { color: var(--muted); }
.screen-side-controls select { color: var(--text); }
.screen-zoom-rail { background: var(--panel); color: var(--muted); border-color: var(--line); }
.screen-zoom-rail input[type="range"] { accent-color: var(--accent-fill); }
.screen-zoom-rail output { color: var(--accent); }
:root[data-theme="dark"] .screen-zoom-rail { background: var(--panel); color: var(--muted); }
:root[data-theme="dark"] .screen-side-controls label { color: var(--muted); }

/* ============================================================================
   主题三：财神（红金喜庆，2026-10-15）—— :root[data-theme="caishen"]
   · 红为面、金为骨：深枣红三层表面 + 鎏金强调 + 米白暖字
   · 与浅色/深色共用同一套语义令牌，切换即生效；状态色保持可辨识
   · --caishen-pattern：可选喜庆底纹钩子（默认 none；放入图片后设为其 url 即生效，
     样式会把它叠在设备栏上，不影响视频画面）
   ============================================================================ */
:root[data-theme="caishen"] {
  color-scheme: dark;
  --bg:            #5E0F17;
  --bg-soft:       #6B121C;
  --panel:         #7A1622;
  --panel-2:       #8A1C2A;
  --line:          #A03040;
  --line-strong:   #B84050;
  --text:          #FFF3E0;
  --muted:         #F0C8A8;
  --faint:         #D9A184;
  --accent:        #F5C842;
  --accent-fill:   #F5C842;
  --accent-strong: #FFE07A;
  --accent-soft:   rgba(245, 200, 66, .16);
  --accent-line:   rgba(245, 200, 66, .45);
  --on-accent:     #4A1206;
  --ok:            #7ED9A0;   --ok-soft:     rgba(126, 217, 160, .15);
  --busy:          #8FC7FF;   --busy-soft:   rgba(143, 199, 255, .15);
  --danger:        #FFB199;   --danger-soft: rgba(255, 177, 153, .16);
  --navy:          #4E0C14;
  --navy-2:        #601218;
  --navy-text:     #FFEFD6;
  --navy-muted:    #E0A98C;
  --shadow:        0 18px 44px rgba(40, 4, 8, .5);
  --hairline:      linear-gradient(90deg, transparent, rgba(245, 200, 66, .8) 18%, rgba(245, 200, 66, .8) 82%, transparent);
  --caishen-pattern: none;
}
/* 氛围：顶部金光 + 底部暖红辉光 */
:root[data-theme="caishen"] body {
  background-color: var(--bg);
  background-image:
    radial-gradient(1100px 540px at 50% -16%, rgba(245, 200, 66, .16), transparent 62%),
    radial-gradient(900px 480px at 88% 108%, rgba(255, 90, 70, .12), transparent 60%);
  background-repeat: no-repeat, no-repeat;
  color: var(--text);
}
/* 喜庆底纹（可选钩子）：叠在设备栏与顶栏上，不碰视频区 */
:root[data-theme="caishen"] .device-sidebar {
  background-color: var(--navy);
  background-image: var(--caishen-pattern);
  background-size: 420px 420px;
  background-blend-mode: overlay;
}
:root[data-theme="caishen"] .topbar {
  background-color: var(--bg-soft);
  background-image: var(--caishen-pattern);
  background-size: 420px 420px;
  background-blend-mode: overlay;
}
/* 画面围边保持近黑暖调，不干扰手机画面还原 */
:root[data-theme="caishen"] .video-shell { border-color: #5A1622; background: #12070A; }
:root[data-theme="caishen"] .video-placeholder { background: var(--panel-2); color: var(--muted); }
:root[data-theme="caishen"] .video-placeholder strong { color: var(--text); }
:root[data-theme="caishen"] .terminal-output,
:root[data-theme="caishen"] .keymap-board.black { background: #12070A; color: #F5E7D8; border-color: var(--line-strong); }
:root[data-theme="caishen"] .keymap-board.white { background: #FBF3E4; color: #4A1206; }
/* 金按钮辉光 + 选中金标 */
:root[data-theme="caishen"] button.primary { box-shadow: 0 4px 18px rgba(245, 200, 66, .28); }
:root[data-theme="caishen"] .mark { box-shadow: 0 0 0 1px rgba(245, 200, 66, .55), inset 0 -6px 10px rgba(74, 18, 6, .35); }

/* Generated Heineken badge: keep its 2:1 artwork intact in all three themes. */
.topbar .brand { padding-inline: 12px; gap: 8px; }
.brand .heineken-logo,
.login-card .heineken-logo {
  object-fit: contain;
  border-radius: 5px;
  background: none;
  box-shadow: none;
  flex-shrink: 0;
}
.brand .heineken-logo { width: 72px; height: 36px; }
.brand .brand-caption { min-width: 0; }
.brand .brand-caption small { white-space: nowrap; }
.login-card .heineken-logo { width: 160px; height: 80px; }
@media (max-width: 660px) {
  .topbar .brand { padding-inline: 9px; }
  .brand .heineken-logo { width: 84px; height: 42px; }
  .brand .brand-caption { display: none; }
}

/* Compact input UI only. No controller, permission or collection changes. */
#panel-keymap[data-compact-input].active{gap:7px;align-content:start;grid-auto-rows:max-content;}
#panel-keymap[data-compact-input] .panel-heading{flex-direction:row;align-items:center;justify-content:space-between;gap:6px;}
#panel-keymap[data-compact-input] .panel-heading h2{margin:0;font-size:13px;}
#panel-keymap[data-compact-input] .normal-input-capture{display:block;width:auto;padding:0;border:0;background:none;}
#panel-keymap[data-compact-input] .normal-input-capture button{width:auto;min-width:88px;min-height:28px;padding:4px 9px;font-size:11px;}
#panel-keymap[data-compact-input] .input-compact-switches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;}
#panel-keymap[data-compact-input] .input-compact-switches label{display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;min-height:30px;margin:0;padding:4px;border:1px solid var(--line);border-radius:5px;background:var(--panel-2);color:var(--text);font-size:12px;white-space:nowrap;}
#panel-keymap[data-compact-input] .input-compact-switches input{flex:0 0 auto;width:14px;height:14px;margin:0;accent-color:var(--accent);}
#panel-keymap[data-compact-input] .input-compact-switches span{min-width:0;}
#panel-keymap[data-compact-input] .input-compact-switches .observed-layout-control{justify-content:flex-start;}
#panel-keymap[data-compact-input] .input-compact-switches .observed-layout-control small{min-width:0;overflow:hidden;color:var(--muted);font-size:10px;text-overflow:ellipsis;white-space:nowrap;}
#panel-keymap[data-compact-input] .input-compact-switches .observed-layout-control small[data-state="ready"]{color:var(--accent);}
#panel-keymap[data-compact-input] .input-compact-status{min-width:0;border-bottom:1px solid var(--line);padding-bottom:5px;}
#panel-keymap[data-compact-input] .input-compact-status summary{display:flex;align-items:center;gap:6px;cursor:pointer;color:var(--muted);font-size:11px;min-height:23px;}
#panel-keymap[data-compact-input] .input-compact-status summary::before{content:'▸';font-size:10px;}
#panel-keymap[data-compact-input] .input-compact-status[open] summary::before{content:'▾';}
#panel-keymap[data-compact-input] .input-context-chip,#panel-keymap[data-compact-input] .input-context-state{padding:2px 5px;font-size:10px;}
#panel-keymap[data-compact-input] .input-compact-status-body{display:grid;gap:5px;margin-top:6px;min-width:0;color:var(--muted);font-size:11px;}
#panel-keymap[data-compact-input] .input-compact-status-body small,#panel-keymap[data-compact-input] #keymap-status{margin:0;text-align:left;font-size:11px;overflow-wrap:anywhere;line-height:1.4;}
#panel-keymap[data-compact-input] .input-virtual-keyboard{gap:6px;padding:7px;border-radius:6px;}
#panel-keymap[data-compact-input] .virtual-keyboard-heading{flex-direction:row;align-items:center;flex-wrap:wrap;gap:5px;}
#panel-keymap[data-compact-input] .virtual-keyboard-heading>div{display:flex;align-items:center;flex-wrap:wrap;gap:7px;}
#panel-keymap[data-compact-input] .virtual-keyboard-heading strong{font-size:11px;white-space:nowrap;}
#panel-keymap[data-compact-input] .virtual-keyboard-heading label{margin:0;}
#panel-keymap[data-compact-input] .virtual-keyboard-heading select{max-width:115px;height:27px;padding:3px 6px;font-size:11px;}
#panel-keymap[data-compact-input] .virtual-keyboard-state{max-width:100%;padding:2px 5px;}
#panel-keymap[data-compact-input] .input-replay-heading{flex-direction:row;align-items:center;gap:5px;}
#panel-keymap[data-compact-input] .input-replay-heading strong{font-size:11px;}
#panel-keymap[data-compact-input] .keymap-actions{grid-template-columns:minmax(90px,1.4fr) minmax(57px,.8fr) auto auto;gap:5px;align-items:center;}
#panel-keymap[data-compact-input] .keymap-actions label{display:block;margin:0;}
#panel-keymap[data-compact-input] .keymap-actions select,#panel-keymap[data-compact-input] .keymap-actions button{height:28px;padding:3px 6px;font-size:11px;white-space:nowrap;}
#panel-keymap[data-compact-input] .key-record-board{min-height:210px;border-radius:6px;}
@container(max-width:260px){#panel-keymap[data-compact-input] .input-compact-switches{grid-template-columns:repeat(2,minmax(0,1fr));}#panel-keymap[data-compact-input] .keymap-actions{grid-template-columns:repeat(2,minmax(0,1fr));}}

.function-index-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;}
#device-profile-label{font-size:11px;color:var(--muted);font-weight:normal;}
[data-device-adapter][hidden],#media-tab[hidden],#app-audit-tab[hidden]{display:none!important;}
#panel-app-audit>label{display:grid;gap:6px;margin:10px 0;font-size:12px;}
#app-audit-packages{width:100%;box-sizing:border-box;resize:vertical;background:var(--surface,var(--panel));color:var(--text);border:1px solid var(--line);border-radius:5px;padding:8px;font:12px/1.5 monospace;}

/* Delayed input capture uses one calm status card instead of three unrelated
   narrow rows. The controls and ids stay intact; this is presentation only. */
#panel-keymap[data-compact-input] .input-capture-card {
  display: block;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(91, 111, 137, .55);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(25, 35, 50, .96), rgba(14, 21, 31, .96));
  box-shadow: 0 8px 22px rgba(0, 0, 0, .16);
}
#panel-keymap[data-compact-input] .input-capture-card .observed-input-tracks {
  display: grid;
  gap: 0;
}
#panel-keymap[data-compact-input] .input-capture-card .observed-layout-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 8px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
#panel-keymap[data-compact-input] .observed-layout-label,
#panel-keymap[data-compact-input] .observed-layout-result {
  display: flex;
  align-items: baseline;
  min-width: 0;
}
#panel-keymap[data-compact-input] .observed-layout-label { gap: 7px; }
#panel-keymap[data-compact-input] .observed-layout-label strong {
  color: #edf5ff;
  font-size: 12px;
  letter-spacing: .01em;
}
#panel-keymap[data-compact-input] .observed-layout-label small {
  color: var(--muted);
  font-size: 10px;
}
#panel-keymap[data-compact-input] .observed-layout-result {
  justify-content: flex-end;
  gap: 6px;
}
#panel-keymap[data-compact-input] .observed-layout-result #observed-keyboard-state {
  max-width: 120px;
  overflow: hidden;
  color: #aebed0;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#panel-keymap[data-compact-input] .observed-layout-result #observed-keyboard-state[data-state="ready"] {
  color: #8bf0cf;
}
#panel-keymap[data-compact-input] .input-track-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 7px 10px 8px;
  border-top: 1px solid rgba(91, 111, 137, .28);
}
#panel-keymap[data-compact-input] .input-track-summary > span {
  flex: 0 0 auto;
  padding: 2px 6px;
  border: 1px solid rgba(98, 217, 176, .28);
  border-radius: 999px;
  background: rgba(98, 217, 176, .07);
  color: #b9dfd2;
  font-size: 9px;
}
#panel-keymap[data-compact-input] .input-track-summary #normal-input-tracks {
  min-width: 0;
  margin: 0 0 0 auto;
  padding: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#panel-keymap[data-compact-input] .input-compact-status {
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(91, 111, 137, .42);
  border-radius: 9px;
  background: rgba(14, 21, 31, .72);
}
#panel-keymap[data-compact-input] .input-compact-status summary {
  display: grid;
  grid-template-columns: minmax(72px, 1fr) auto 12px;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 7px 9px;
  list-style: none;
}
#panel-keymap[data-compact-input] .input-compact-status summary::-webkit-details-marker { display: none; }
#panel-keymap[data-compact-input] .input-compact-status summary::before { content: none; }
#panel-keymap[data-compact-input] .input-compact-status summary::after {
  content: '⌄';
  grid-column: 3;
  color: #70839a;
  font-size: 12px;
  transform: translateY(-1px);
}
#panel-keymap[data-compact-input] .input-compact-status[open] summary::after { transform: rotate(180deg); }
#panel-keymap[data-compact-input] .input-status-heading {
  display: grid;
  gap: 1px;
}
#panel-keymap[data-compact-input] .input-status-heading strong { color: #edf5ff; font-size: 11px; }
#panel-keymap[data-compact-input] .input-status-heading small { color: var(--muted); font-size: 8px; }
#panel-keymap[data-compact-input] .input-status-chips {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
  min-width: 0;
}
#panel-keymap[data-compact-input] .input-status-chips .input-context-chip,
#panel-keymap[data-compact-input] .input-status-chips .input-context-state {
  margin: 0;
  padding: 3px 6px;
  border-radius: 999px;
  font-size: 9px;
  white-space: nowrap;
}
#panel-keymap[data-compact-input] .input-compact-status-body {
  margin: 0;
  padding: 8px 9px 9px;
  border-top: 1px solid rgba(91, 111, 137, .28);
}
@container(max-width:260px) {
  #panel-keymap[data-compact-input] .input-compact-status summary {
    grid-template-columns: 1fr auto;
  }
  #panel-keymap[data-compact-input] .input-status-chips {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
  #panel-keymap[data-compact-input] .input-compact-status summary::after {
    grid-column: 2;
    grid-row: 1;
  }
}

/* Pixel 6a input panel H. The 6a-only normal-input-tracks marker is hidden by
   the existing device-profile switch on every other adapter, so this visual
   pass cannot change the Pixel 8 input panel. */
#panel-keymap[data-compact-input]:has(#normal-input-tracks:not([hidden])) .panel-heading {
  align-items: center;
}
#panel-keymap[data-compact-input]:has(#normal-input-tracks:not([hidden])) .input-panel-title {
  display: grid;
  min-width: 0;
  gap: 3px;
}
#panel-keymap[data-compact-input]:has(#normal-input-tracks:not([hidden])) .input-panel-title small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}
#panel-keymap[data-compact-input]:has(#normal-input-tracks:not([hidden])) .input-capture-card {
  display: block;
  justify-self: stretch;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-2);
  box-shadow: none;
}
#panel-keymap[data-compact-input]:has(#normal-input-tracks:not([hidden])) .input-capture-card .observed-layout-control {
  display: grid;
  grid-template-columns: minmax(132px, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 14px;
  min-height: 54px;
  padding: 10px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  white-space: normal;
}
#panel-keymap[data-compact-input]:has(#normal-input-tracks:not([hidden])) .observed-layout-label {
  display: grid;
  gap: 3px;
  min-width: 0;
}
#panel-keymap[data-compact-input]:has(#normal-input-tracks:not([hidden])) .observed-layout-label strong {
  color: var(--text);
  font-size: 12px;
}
#panel-keymap[data-compact-input]:has(#normal-input-tracks:not([hidden])) .observed-layout-label small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}
#panel-keymap[data-compact-input]:has(#normal-input-tracks:not([hidden])) .observed-layout-result {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}
#panel-keymap[data-compact-input]:has(#normal-input-tracks:not([hidden])) .observed-layout-result #observed-keyboard-state {
  max-width: none;
  overflow: visible;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
  text-align: right;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}
#panel-keymap[data-compact-input]:has(#normal-input-tracks:not([hidden])) .observed-layout-result #observed-keyboard-state[data-state="ready"] {
  color: var(--accent);
}
#panel-keymap[data-compact-input]:has(#normal-input-tracks:not([hidden])) .input-track-summary {
  display: block;
  min-height: 0;
  margin: 0;
  padding: 8px 12px 9px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
}
#panel-keymap[data-compact-input]:has(#normal-input-tracks:not([hidden])) .input-compact-status {
  border-color: var(--line);
  background: var(--panel-2);
}
#panel-keymap[data-compact-input]:has(#normal-input-tracks:not([hidden])) .input-compact-status summary {
  grid-template-columns: minmax(68px, auto) minmax(0, 1fr) 12px;
  min-height: 38px;
  padding: 7px 10px;
}
#panel-keymap[data-compact-input]:has(#normal-input-tracks:not([hidden])) .input-status-heading strong {
  color: var(--text);
}
#panel-keymap[data-compact-input]:has(#normal-input-tracks:not([hidden])) .input-status-chips {
  flex-wrap: wrap;
}
@container(max-width:360px) {
  #panel-keymap[data-compact-input]:has(#normal-input-tracks:not([hidden])) .panel-heading {
    align-items: stretch;
    flex-direction: column;
  }
  #panel-keymap[data-compact-input]:has(#normal-input-tracks:not([hidden])) .normal-input-capture button {
    width: 100%;
  }
  #panel-keymap[data-compact-input]:has(#normal-input-tracks:not([hidden])) .input-capture-card .observed-layout-control {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  #panel-keymap[data-compact-input]:has(#normal-input-tracks:not([hidden])) .observed-layout-result {
    justify-content: flex-start;
  }
  #panel-keymap[data-compact-input]:has(#normal-input-tracks:not([hidden])) .observed-layout-result #observed-keyboard-state {
    text-align: left;
  }
}

/* The four shared controls are a single navigation group on desktop.  This
   late rule deliberately wins over the legacy six-column skin rule above. */
@media (min-width:1000px) {
  .tabs.function-index {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}