/* =====================================================================
   远程视频小汽车 · 整站软件风样式（style.css）
   设计令牌：小圆角(3-6px) / 紧凑字号(11-14px) / 细边框分区 / 浅色为主
   外壳结构：body > .app-shell > .titlebar + .workspace( .sidebar + .content )
   驾驶层样式已拆分至 drive.css（仅 scene.html 等引入 controls.js 的页面）
   ===================================================================== */

/* ---------- 1. 设计令牌 ---------- */
:root {
  color-scheme: light;
  font-family: Inter, "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  font-size: 14px;
  --surface: #ffffff;
  --surface-muted: #f5f6f7;
  --surface-strong: #eceff1;
  --border: #d9dde1;
  --border-strong: #c6cbd0;
  --text: #1d242c;
  --muted: #707982;
  --accent: #0a7c6d;
  --accent-hover: #08695e;
  --accent-soft: #e3f3f0;
  --danger: #c2413b;
  --warning: #a26412;
  --shadow: 0 12px 32px rgba(26, 36, 45, .13);
  /* 兼容层：旧变量名映射到新令牌 */
  --bg: #e7eaed;
  --panel: var(--surface);
  --panel-2: var(--surface-muted);
  --line: var(--border);
  --accent-2: var(--accent-hover);
  --live-bg: var(--accent-soft);
  --live-border: #bfe0db;
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: #ffffff;
  --btn-secondary-text: var(--text);
  --btn-secondary-hover: var(--surface-muted);
}
html[data-theme="dark"] {
  color-scheme: dark;
  --surface: #20262b;
  --surface-muted: #293137;
  --surface-strong: #343d44;
  --border: #3d474f;
  --border-strong: #52606a;
  --text: #e4eaed;
  --muted: #a8b3ba;
  --accent: #55b9f3;
  --accent-hover: #78c9f7;
  --accent-soft: #183f5a;
  --danger: #e07a72;
  --warning: #d4a017;
  --shadow: 0 12px 32px rgba(0, 0, 0, .4);
  --bg: #14191d;
  --live-border: #2b3947;
  --btn-primary-text: #08130f;
  --btn-secondary-bg: #343d44;
  --btn-secondary-text: var(--text);
  --btn-secondary-hover: #3d474f;
}

/* ---------- 2. 全局防护：禁止选择/右键/缩放、隐藏视频原生控件 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
input, textarea, select, [contenteditable="true"] { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; }
img { -webkit-user-drag: none; user-drag: none; }
video::-webkit-media-controls, video::-webkit-media-controls-enclosure, video::-webkit-media-controls-panel, video::-webkit-media-controls-start-playback-button, video::-webkit-media-controls-play-button, video::-webkit-media-controls-overlay-play-button, video::-webkit-media-controls-timeline, video::-webkit-media-controls-current-time-display, video::-webkit-media-controls-volume-slider, video::-webkit-media-controls-mute-button, video::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-media-controls-picture-in-picture-button, video::-webkit-media-controls-download-button { display: none !important; visibility: hidden !important; }
video:not([controls]) { pointer-events: auto; }

/* ---------- 3. 基础排版 ---------- */
body { margin: 0; min-height: 100vh; padding: 14px; background: var(--bg); color: var(--text); font: 13px/1.5 Inter, "Segoe UI", "Microsoft YaHei", system-ui, sans-serif; transition: background .2s, color .2s; }
h1 { margin: 6px 0; font-size: clamp(20px, 3vw, 26px); }
h2 { margin: 0; font-size: 15px; }
h3 { font-size: 14px; }
a { color: var(--accent); }
.muted { color: var(--muted); }
.eyebrow { margin: 0; color: var(--accent); letter-spacing: .16em; font-size: 11px; font-weight: 800; }

/* ---------- 4. 软件外壳 ---------- */
.app-shell { display: flex; flex-direction: column; min-height: calc(100vh - 28px); overflow: hidden; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: var(--shadow); }
.titlebar { flex: none; height: 56px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 0 12px 0 16px; background: var(--surface-muted); border-bottom: 1px solid var(--border); }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand > span:last-child, .brand strong { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-mark { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 6px; color: #fff; background: #152a2b; font-weight: 900; font-size: 16px; }
.brand-mark.small { width: 26px; height: 26px; border-radius: 5px; font-size: 14px; }
.titlebar-center { display: flex; align-items: center; justify-content: center; gap: 8px; }
.titlebar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.user-area { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 12px; }
.role { padding: 2px 8px; color: var(--accent); background: var(--accent-soft); border-radius: 20px; font-size: 11px; font-weight: 700; }
.role.plain { color: var(--muted); background: var(--surface-muted); border: 1px solid var(--border); }
.link-button { border: 0; padding: 4px 6px; color: var(--muted); background: none; cursor: pointer; font-size: 12px; }
.link-button:hover { color: var(--danger); }
.workspace { flex: 1 1 auto; display: grid; grid-template-columns: 232px minmax(0, 1fr); align-items: stretch; min-height: 0; }
.workspace.no-side { grid-template-columns: minmax(0, 1fr); }
.sidebar { min-width: 0; padding: 14px 12px; background: var(--surface-muted); border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 3px; }
.sidebar a { display: block; padding: 9px 12px; border-radius: 5px; color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 600; transition: color .12s, background .12s; }
.sidebar a:hover { color: var(--text); background: var(--surface-strong); }
.sidebar a.active { color: var(--accent); background: var(--accent-soft); }
.sidebar-title { padding: 4px 12px 10px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.content { min-width: 0; padding: 20px 22px 30px; }

/* ---------- 5. 按钮 / 图标按钮 ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 13px; border: 1px solid var(--border-strong); border-radius: 5px; color: var(--text); background: transparent; cursor: pointer; font-weight: 600; font-size: 13px; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
.button.primary { color: var(--btn-primary-text); border-color: var(--accent-hover); background: var(--accent); }
.button.primary:hover:not(:disabled) { background: var(--accent-hover); }
.button.secondary { background: var(--btn-secondary-bg); }
.button.secondary:hover:not(:disabled) { background: var(--btn-secondary-hover); }
.button.ghost { padding: 0 10px; color: var(--muted); border-color: var(--border); background: transparent; }
.button.ghost:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); background: var(--surface); }
.button.danger { color: #fff; border-color: #a8382f; background: var(--danger); }
.button.danger:hover:not(:disabled) { filter: brightness(1.08); }
.button.compact { height: 28px; padding: 0 10px; font-size: 12px; }
.button:disabled { opacity: .45; cursor: not-allowed; }
a.button { text-decoration: none; }
.icon-button { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--muted); cursor: pointer; font-size: 15px; transition: color .15s, background .15s, border-color .15s; }
.icon-button:hover { color: var(--text); border-color: var(--border); background: var(--surface); }

/* ---------- 6. 表单 ---------- */
label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 600; }
input, select, textarea { width: 100%; height: 34px; padding: 0 10px; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 5px; outline: none; font-size: 13px; font-family: inherit; transition: border-color .15s, box-shadow .15s; }
textarea { height: auto; padding: 8px 10px; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
input::placeholder { color: var(--muted); }
input[type="file"] { display: block; height: auto; min-height: 40px; padding: 5px 10px 5px 5px; background: var(--surface-muted); border: 1px dashed var(--border-strong); border-radius: 6px; color: var(--muted); font-size: 12px; line-height: 28px; cursor: pointer; transition: border-color .15s, background .15s; }
input[type="file"]:hover { border-color: var(--accent); background: var(--accent-soft); }
input[type="file"]:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
input[type="file"]::file-selector-button, input[type="file"]::-webkit-file-upload-button { height: 28px; margin: 0 10px 0 0; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 5px; background: var(--surface); color: var(--text); font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
input[type="file"]:hover::file-selector-button, input[type="file"]:hover::-webkit-file-upload-button { border-color: var(--accent); background: var(--surface); color: var(--accent); }
select { appearance: none; -webkit-appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23707982' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 10px 6px; cursor: pointer; }
input[type="checkbox"], input[type="radio"] { width: auto; height: auto; padding: 0; accent-color: var(--accent); cursor: pointer; }
.form-stack { display: grid; gap: 14px; }
.form-row { display: flex; gap: 8px; align-items: center; }
.form-row select, .form-row input { flex: 1; min-width: 0; }
.alert { margin: 14px 0 0; padding: 9px 12px; color: var(--danger); background: #faeceb; border: 1px solid #e0aaa7; border-radius: 5px; font-size: 12px; }
.success { margin: 14px 0 0; padding: 9px 12px; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--live-border); border-radius: 5px; font-size: 12px; }
html[data-theme="dark"] .alert { background: #4b2928; border-color: #8d4d49; }
html[data-theme="dark"] select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a8b3ba' stroke-width='1.5'/%3E%3C/svg%3E"); }

/* ---------- 7. 内容工具条 / 标题 ---------- */
.hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; margin-bottom: 18px; flex-wrap: wrap; }
.hero h1 { margin: 6px 0; }
.hero .muted { margin: 4px 0 0; font-size: 12px; }
.live-summary { display: grid; min-width: 130px; padding: 12px 16px; background: var(--accent-soft); border: 1px solid var(--live-border); border-radius: 6px; }
.live-summary strong { color: var(--accent); font-size: 24px; font-variant-numeric: tabular-nums; }
.live-summary span { color: var(--muted); font-size: 12px; }
.content-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.toolbar-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.toolbar-title strong { font-size: 16px; }
.toolbar-title span { color: var(--muted); font-size: 12px; }
.toolbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.toolbar { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; flex-wrap: wrap; }
.toolbar input { max-width: 340px; }

/* ---------- 8. 卡片网格：设备（dashboard / share） ---------- */
.device-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.device-card { display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; transition: border-color .15s, box-shadow .15s; }
.device-card:hover { border-color: var(--border-strong); box-shadow: 0 4px 16px rgba(26, 36, 45, .08); }
.video-wrap { position: relative; aspect-ratio: 16 / 9; background: #080d18; }
.video-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: #8b97a8; font-size: 12px; }
.video-controls { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; opacity: 0; transition: opacity .2s; }
.video-wrap:hover .video-controls { opacity: 1; }
.vbtn { border: 0; cursor: pointer; width: 30px; height: 30px; border-radius: 5px; color: #fff; background: rgba(0, 0, 0, .55); font-size: 15px; display: grid; place-items: center; }
.vbtn:hover { background: rgba(0, 0, 0, .8); }
.card-body { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; }
.card-body h2 { font-size: 14px; }
.card-body p { margin: 3px 0 0; font-size: 11px; }
.card-actions { display: flex; gap: 6px; padding: 0 14px 14px; flex-wrap: wrap; }
.status { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 3px; font-size: 11px; font-weight: 700; border: 1px solid transparent; }
.status.online { color: #0b6a5c; background: var(--accent-soft); border-color: #9bcfc7; }
.status.offline { color: var(--danger); background: #faeceb; border-color: #e0aaa7; }
html[data-theme="dark"] .status.online { color: #8dd3ff; border-color: #397da4; background: #183f5a; }
html[data-theme="dark"] .status.offline { border-color: #8d4d49; background: #4b2928; }
.video-wrap > .status { position: absolute; top: 10px; left: 10px; z-index: 2; }

/* ---------- 9. 卡片网格：车辆 mini（scene） ---------- */
.mini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.mini-card { overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; }
.mini-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(26, 36, 45, .12); border-color: var(--accent); }
.mini-card.offline { cursor: not-allowed; opacity: .7; }
.mini-thumb { position: relative; aspect-ratio: 16 / 9; background: #080d18; overflow: hidden; }
.mini-thumb canvas.mini-frame, .mini-thumb img.mini-frame { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: #8b97a8; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .02) 0 10px, transparent 10px 20px); }
.mini-placeholder span { padding: 3px 8px; border-radius: 5px; background: rgba(0, 0, 0, .4); font-size: 11px; }
.mini-live { position: absolute; top: 8px; left: 8px; padding: 2px 7px; border-radius: 3px; font-size: 10px; font-weight: 800; }
.mini-live.on { color: #071b18; background: var(--accent); }
.mini-live.off { color: #ffe1e5; background: #9b3d4c; }
.mini-meta { padding: 9px 11px; }
.mini-meta-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.mini-meta-head h2 { margin: 0; font-size: 13px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-set-btn { flex: none; width: 24px; height: 24px; border-radius: 5px; color: var(--muted); background: var(--surface-muted); border: 1px solid var(--border); cursor: pointer; font-size: 13px; display: grid; place-items: center; transition: color .15s, border-color .15s, background .15s; }
.mini-set-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.mini-meta p { margin: 3px 0 0; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 10. 卡片网格：场景（scenes） ---------- */
.scene-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.scene-card { overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; }
.scene-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(26, 36, 45, .12); border-color: var(--accent); }
.scene-thumb { position: relative; aspect-ratio: 16 / 9; background: var(--surface-muted); }
.scene-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scene-thumb-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 40px; }
.scene-meta { padding: 12px 14px; }
.scene-title { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.scene-title h2 { font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scene-owner { margin-left: 8px; padding: 1px 8px; color: var(--muted); background: var(--surface-muted); border: 1px solid var(--border); border-radius: 20px; font-size: 11px; font-weight: 600; vertical-align: middle; }
.scene-count { padding: 2px 9px; color: var(--accent); background: var(--accent-soft); border-radius: 20px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.scene-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }

/* ---------- 11. 统计 / 后台面板 ---------- */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 12px; }
.stat-card { display: grid; gap: 4px; padding: 14px 16px; background: var(--surface-muted); border: 1px solid var(--border); border-radius: 6px; }
.stat-card strong { color: var(--accent); font-size: 24px; font-variant-numeric: tabular-nums; }
.stat-card span { color: var(--muted); font-size: 12px; }
.admin-panel { padding: 18px 20px; margin-bottom: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }
.admin-panel h1, .admin-panel h2 { margin: 0 0 6px; }
.admin-panel > p.muted { margin: 0 0 14px; font-size: 12px; }
/* 后台概览分节标题：不套卡片容器时的分节留白（首个标题紧贴工具条） */
.section-title { margin: 24px 0 0; }
.content > .section-title:first-of-type { margin-top: 0; }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-top: 12px; }
.admin-card { display: grid; gap: 4px; padding: 16px; color: var(--text); background: var(--surface-muted); border: 1px solid var(--border); border-radius: 6px; text-decoration: none; transition: border-color .15s, background .15s; }
.admin-card:hover { border-color: var(--accent); background: var(--accent-soft); }
.admin-card strong { font-size: 13px; }
.admin-card span { color: var(--muted); font-size: 11px; }
.settings-card { padding: 18px 20px; background: var(--surface-muted); border: 1px solid var(--border); border-radius: 6px; }
.admin-shell { min-width: 0; }
.admin-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 0 0 14px; align-items: end; }
.admin-form button { min-height: 34px; }

/* ---------- 12. 列表行 ---------- */
.admin-list { display: grid; gap: 8px; margin-top: 14px; }
.admin-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 11px 14px; background: var(--surface-muted); border: 1px solid var(--border); border-radius: 5px; }
.admin-row > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.admin-row strong { font-size: 13px; }
.admin-row small { display: block; color: var(--muted); font-size: 11px; }
.admin-row .actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- 13. 表格 ---------- */
.table-wrap { overflow-x: auto; margin-top: 14px; border: 1px solid var(--border); border-radius: 6px; }
/* 后台列表页表格外框：内容区工具条已提供下间距，避免双重间距 */
.content > .table-wrap { margin-top: 0; }
table.data { width: 100%; border-collapse: collapse; font-size: 12px; }
table.data th, table.data td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); }
table.data thead th { background: var(--surface-muted); color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover td { background: var(--surface-muted); }
/* 表格内：主/次文本单元、不换行单元与行尾操作按钮组 */
table.data td .cell-title { display: block; font-weight: 700; font-size: 13px; }
table.data td .cell-sub { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
table.data td.nowrap { white-space: nowrap; }
table.data td .actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
table.data td .actions:empty { display: none; }

/* ---------- 14. 弹窗 ---------- */
.modal { display: flex; position: fixed; inset: 0; z-index: 900; align-items: center; justify-content: center; padding: 18px; background: rgba(18, 27, 31, .42); }
.modal-box { display: flex; flex-direction: column; width: min(100%, 520px); max-height: 86vh; overflow: hidden; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 6px; box-shadow: var(--shadow); }
.modal-head { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 14px; background: var(--surface-muted); border-bottom: 1px solid var(--border); }
.modal-head h2 { flex: 1; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal-head button { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border: 0; border-radius: 5px; background: none; color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer; }
.modal-head button:hover { color: var(--text); background: var(--surface-strong); }
/* 仅内容区滚动：标题、选项卡固定不动，避免标题被一起滚走 */
.modal-body { flex: 1; min-height: 0; overflow: auto; padding: 16px; }

/* 动态模态对话框（替代原生 alert/confirm/prompt） */
.ui-modal { z-index: 10001; }
.ui-modal-box { width: min(100%, 420px); }
.ui-modal-msg { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text); word-break: break-word; }
.ui-modal-input { width: 100%; margin-top: 12px; padding: 9px 11px; background: var(--surface-muted); border: 1px solid var(--border); border-radius: 5px; color: var(--text); font-size: 13px; }
.ui-modal-input:focus { outline: none; border-color: var(--accent); }
.ui-modal-foot { flex: none; display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); background: var(--surface-muted); }
/* 表单模态（管理员后台新增/编辑）：两列栅格，full 字段占满整行 */
.ui-form-box { width: min(100%, 480px); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.form-field.full { grid-column: 1 / -1; }
.form-field.check { display: flex; flex-direction: row; align-items: center; gap: 8px; color: var(--text); font-weight: 500; }
.form-field.check input { width: auto; height: auto; }
.ui-form-hint { margin: 12px 0 0; font-size: 12px; }
.pad-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; }
.pad-grid .button { height: 40px; }
.telemetry-box { padding: 14px; background: var(--surface-muted); border: 1px solid var(--border); border-radius: 6px; }
.telemetry-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 12px; }
.telemetry-grid div { display: grid; gap: 2px; }
.telemetry-grid strong { color: var(--accent); font-size: 16px; font-variant-numeric: tabular-nums; }
.telemetry-grid span { color: var(--muted); font-size: 11px; }

/* ---------- 15. 车辆设置（网络 / 控制台 / 声音） ---------- */
.settings-form { display: grid; gap: 16px; }
.form-section { display: grid; gap: 12px; padding: 16px; background: var(--surface-muted); border: 1px solid var(--border); border-radius: 6px; }
.form-section h2 { margin: 0; font-size: 13px; color: var(--accent); }
.form-section .check { display: flex; flex-direction: row; align-items: center; gap: 8px; color: var(--text); font-size: 13px; font-weight: 500; }
.form-section .check input { width: auto; height: auto; }
.settings-modal { width: min(100%, 560px); }
.car-settings .modal-body { display: grid; gap: 16px; align-content: start; }
/* 设置面板：三个子夹各自成块，内部卡片纵向等距排列 */
.settings-panel { display: grid; gap: 12px; align-content: start; }
.settings-tabs { flex: none; display: flex; gap: 4px; padding: 10px 16px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.settings-tab { display: inline-flex; align-items: center; padding: 8px 14px; color: var(--muted); background: transparent; border: 1px solid var(--border); border-bottom: 0; border-radius: 6px 6px 0 0; font-size: 12px; font-weight: 700; cursor: pointer; transition: color .15s, background .15s, border-color .15s; }
.settings-tab:hover { color: var(--text); background: var(--surface-muted); }
.settings-tab.active { color: var(--accent); background: var(--surface); border-color: var(--accent); }
/* 控制台 */
.console-row { display: flex; gap: 8px; }
.console-input { flex: 1; min-width: 0; padding: 9px 11px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 5px; color: var(--text); outline: none; height: 34px; font-size: 12px; font-family: 'Consolas', 'Menlo', monospace; }
.console-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.console-result { margin-top: 10px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 5px; font-size: 12px; font-family: 'Consolas', 'Menlo', monospace; white-space: pre-wrap; word-break: break-all; max-height: 240px; overflow: auto; }
.console-result.console-err { color: var(--danger); border-color: var(--danger); }
.console-quick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.quick-label { color: var(--muted); font-size: 11px; }
.quick-btn { padding: 4px 9px; background: var(--surface); border: 1px solid var(--border); border-radius: 5px; color: var(--text); font-size: 11px; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.quick-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
/* 网络概览 */
.net-hero { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }
.net-hero-info { flex: 1; min-width: 0; }
.net-hero-label { color: var(--muted); font-size: 11px; letter-spacing: .04em; }
.net-hero-value { margin-top: 2px; font-size: 16px; font-weight: 800; color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.net-refresh { border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; width: 30px; height: 30px; flex: none; border-radius: 5px; font-size: 15px; transition: color .15s, border-color .15s; }
.net-refresh:hover { color: var(--accent); border-color: var(--accent); }
.net-card { padding: 14px 16px; background: var(--surface-muted); border: 1px solid var(--border); border-radius: 6px; }
.net-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.net-card-head > span { font-size: 13px; font-weight: 800; color: var(--text); }
.net-card-head > span::before { content: ""; display: inline-block; width: 3px; height: 12px; margin-right: 8px; border-radius: 2px; background: var(--accent); vertical-align: middle; }
.net-scan-hint { color: var(--muted); font-size: 11px; font-style: normal; }
/* 失败反馈：网络读取/连接失败时就地标红，区别于正常提示 */
.net-scan-hint.net-fail-hint { color: var(--danger); font-weight: 700; }
.net-fail { color: var(--danger); font-size: 12px; }
/* 声音 */
.sound-row { display: flex; align-items: center; gap: 10px; padding: 6px 2px; }
.volume-val { min-width: 34px; text-align: right; font-size: 18px; font-weight: 900; color: var(--accent); font-variant-numeric: tabular-nums; }
.volume-slider { flex: 1; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 4px; background: linear-gradient(90deg, var(--accent) 0%, var(--accent) var(--v, 10%), var(--surface-strong) var(--v, 10%)); outline: none; cursor: pointer; }
.volume-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); box-shadow: 0 1px 4px rgba(0, 0, 0, .35); cursor: pointer; }
.volume-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); cursor: pointer; }
/* WiFi 列表 */
.wifi-list { display: grid; gap: 6px; max-height: min(200px, 26vh); overflow: auto; }
.wifi-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 5px; cursor: pointer; transition: background .15s, border-color .15s; }
.wifi-item:hover { background: var(--accent-soft); border-color: var(--accent); }
.wifi-item .wifi-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wifi-item .wifi-name b { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wifi-item .wifi-name .wifi-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; }
.wifi-item .wifi-name .wifi-dot.open { background: #16d98a; box-shadow: 0 0 6px #16d98a; }
.wifi-item .wifi-name .wifi-dot.lock { background: var(--muted); }
.wifi-item span { color: var(--muted); font-size: 11px; white-space: nowrap; }
/* 已选中的网络：与“下一步输入密码”联动，明确选中了哪一个 */
.wifi-item.active { background: var(--accent-soft); border-color: var(--accent); }
.wifi-item.active .wifi-name b { color: var(--accent); }
/* 手动添加表单 */
.net-form-grid { display: grid; gap: 10px; }
.net-field { display: grid; gap: 5px; }
.net-field > span { color: var(--muted); font-size: 11px; }
.net-field input { height: 32px; transition: border-color .2s, box-shadow .2s; }
/* 点击附近 WiFi 后：密码输入区短暂高亮，引导用户进入“下一步” */
.net-field.net-flash > span { color: var(--accent); font-weight: 700; }
.net-field.net-flash input { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.net-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.net-actions .button { min-width: 80px; }
/* 切换 / 添加 WiFi：默认收起隐藏，点击上方网络后才滑动展开（相当于切换到输入密码这一步） */
.net-connect-card { max-height: 0; margin-top: -12px; padding-top: 0; padding-bottom: 0; border-color: transparent; opacity: 0; overflow: hidden; pointer-events: none; transition: max-height .34s cubic-bezier(.4,0,.2,1), margin-top .34s cubic-bezier(.4,0,.2,1), padding .34s cubic-bezier(.4,0,.2,1), opacity .24s ease, border-color .34s ease; }
.net-connect-card.expanded { max-height: 260px; margin-top: 0; padding-top: 14px; padding-bottom: 14px; border-color: var(--border); opacity: 1; pointer-events: auto; }
/* 内容随展开同步下滑，形成“滑出来”的观感 */
.net-connect-card > * { transform: translateY(-6px); transition: transform .34s cubic-bezier(.4,0,.2,1); }
.net-connect-card.expanded > * { transform: translateY(0); }
.net-collapse { border: 0; padding: 2px 4px; color: var(--muted); background: none; font-family: inherit; font-size: 11px; line-height: 1; cursor: pointer; }
.net-collapse:hover { color: var(--accent); }

/* ---------- 16. 分享链接 ---------- */
.share-link { display: flex; gap: 8px; }
.share-link input { flex: 1; min-width: 0; }
.share-link .button { white-space: nowrap; }

/* 分享管理面板：开关行 / 双滑块 / 链接列表 */
.share-switch { display: flex; align-items: center; margin: 0 0 10px; }
.share-switch label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; }
.share-switch input { width: auto; height: auto; accent-color: var(--accent); }
.share-range { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.share-range > span { flex: 0 0 84px; font-size: 12px; color: var(--muted); }
.share-range > b { flex: 0 0 62px; text-align: right; font-size: 12px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.share-range.is-disabled { opacity: .45; }
.share-range.is-disabled .volume-slider { pointer-events: none; }
.share-generate { display: flex; justify-content: flex-end; margin: 14px 0; }
.share-list { display: flex; flex-direction: column; gap: 8px; }
.share-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: var(--surface-muted); border: 1px solid var(--border); border-radius: 6px; }
.share-item-main { min-width: 0; }
.share-item-sub { font-size: 12px; color: var(--muted); }
.share-item-url { margin-top: 2px; font-size: 11px; color: var(--text); word-break: break-all; }
.share-item-actions { display: flex; gap: 6px; flex: 0 0 auto; }

/* 游客侧权限提示条 */
.share-perm { margin: 0 0 12px; padding: 8px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; border: 1px solid var(--border); background: var(--surface-muted); color: var(--muted); }
.share-perm.control { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.share-perm.busy { color: #b7791f; border-color: #e3c168; background: rgba(227, 193, 104, .15); }
.share-perm.read-only { color: var(--muted); }
/* 分享链接失效提示：链接过期或错误时居中展示 */
.share-invalid { display: grid; justify-items: center; gap: 12px; padding: 72px 20px; text-align: center; }
.share-invalid-icon { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--border-strong); border-radius: 50%; color: var(--muted); font-size: 22px; font-weight: 800; }
.share-invalid-text { margin: 0; color: var(--muted); font-size: 14px; }

/* 游客卡片：四项只读状态角标 + 按钮组 */
.share-stats { position: absolute; right: 8px; bottom: 8px; display: flex; flex-wrap: wrap; gap: 4px 8px; max-width: calc(100% - 16px); padding: 5px 8px; border-radius: 6px; background: rgba(0, 0, 0, .55); color: #e6eef8; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.share-stats span { white-space: nowrap; }
.card-buttons { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; }
/* 分享页播放中的卡片：按钮切换为“停止”并高亮，提示当前仅此一路在播 */
.card-buttons .button.playing { color: #fff; border-color: var(--danger); background: var(--danger); }
.card-buttons .button.playing:hover:not(:disabled) { background: var(--danger); filter: brightness(.92); }

/* ---------- 17. Toast / 缩放 / 空态 ---------- */
/* 统一细滚动条：忠于软件风，避免系统原生宽滚动条在深色主题下刺眼 */
.modal-body, .wifi-list, .console-result, .table-wrap, .content {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.modal-body::-webkit-scrollbar, .wifi-list::-webkit-scrollbar, .console-result::-webkit-scrollbar, .table-wrap::-webkit-scrollbar, .content::-webkit-scrollbar { width: 8px; height: 8px; }
.modal-body::-webkit-scrollbar-track, .wifi-list::-webkit-scrollbar-track, .console-result::-webkit-scrollbar-track, .table-wrap::-webkit-scrollbar-track, .content::-webkit-scrollbar-track { background: transparent; }
.modal-body::-webkit-scrollbar-thumb, .wifi-list::-webkit-scrollbar-thumb, .console-result::-webkit-scrollbar-thumb, .table-wrap::-webkit-scrollbar-thumb, .content::-webkit-scrollbar-thumb { background: var(--border-strong); border: 2px solid transparent; background-clip: padding-box; border-radius: 6px; }
.modal-body::-webkit-scrollbar-thumb:hover, .wifi-list::-webkit-scrollbar-thumb:hover, .console-result::-webkit-scrollbar-thumb:hover, .table-wrap::-webkit-scrollbar-thumb:hover, .content::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: padding-box; }
.modal-body::-webkit-scrollbar-corner, .wifi-list::-webkit-scrollbar-corner, .console-result::-webkit-scrollbar-corner, .table-wrap::-webkit-scrollbar-corner, .content::-webkit-scrollbar-corner { background: transparent; }

.empty, .loading { grid-column: 1 / -1; padding: 50px 20px; color: var(--muted); text-align: center; font-size: 13px; }
.zoom-modal { display: none; position: fixed; inset: 0; z-index: 1000; background: #000; align-items: center; justify-content: center; }
.zoom-modal video { width: 100%; height: 100%; object-fit: contain; }
.zoom-close { position: absolute; top: 16px; right: 22px; border: 0; cursor: pointer; width: 44px; height: 44px; border-radius: 50%; color: #fff; background: rgba(0, 0, 0, .6); font-size: 26px; line-height: 1; }
.toast-region, #toast-box { z-index: 9999; }

/* ---------- 17.1 分享页：卡片顶部「正被他人驾驶中」浮标 + 接管提醒 ---------- */
/* 卡片顶部浮标：车辆正被其他观众驾驶时在该车辆画面顶部居中显示，不拦截页面操作（仍可观看/播放） */
.card-driving { position: absolute; top: 9px; left: 0; right: 0; z-index: 3; display: none; justify-content: center; pointer-events: none; }
.card-driving.show { display: flex; animation: card-driving-in .2s ease-out; }
.card-driving-badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 14px; border: 1px solid rgba(255, 198, 92, .45); border-radius: 999px; background: rgba(12, 18, 28, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 2px 10px rgba(0, 0, 0, .35); color: #ffc65c; font-size: 12px; font-weight: 800; letter-spacing: .05em; white-space: nowrap; }
.card-driving .sd-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #ffc65c; animation: share-driving-pulse 1.3s ease-in-out infinite; }
@keyframes share-driving-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }
@keyframes card-driving-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* 接管提醒：前一位驾驶人离页/心跳超时后弹出，先接管者成为新驾驶人 */
.share-takeover { position: fixed; inset: 0; z-index: 950; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(18, 27, 31, .42); }
.share-takeover.show { display: flex; }
.share-takeover-card { width: min(100%, 360px); padding: 22px 20px 18px; text-align: center; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: var(--shadow); }
.share-takeover-ic { display: grid; place-items: center; width: 42px; height: 42px; margin: 0 auto 10px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.share-takeover-ic svg { width: 20px; height: 20px; }
.share-takeover-card h3 { margin: 0 0 6px; font-size: 16px; }
.share-takeover-card p { margin: 0 0 16px; color: var(--muted); font-size: 12.5px; line-height: 1.65; }
.share-takeover-actions { display: flex; justify-content: center; gap: 8px; }
/* 多车辆场景：可接管的卡片按钮做呼吸提示，引导点选具体车辆 */
.share-enter-btn.pulse { animation: share-enter-pulse 1.3s ease-in-out infinite; }
@keyframes share-enter-pulse { 0%,100% { box-shadow: 0 0 0 0 var(--accent); } 50% { box-shadow: 0 0 0 7px rgba(10, 124, 109, 0); } }

/* ---------- 18. 后台侧栏导航 ---------- */
.menu-toggle { display: none; }
.admin-menu-backdrop { display: none; }
.admin-menu-title { padding: 4px 12px 10px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.admin-menu { min-width: 0; padding: 14px 12px; background: var(--surface-muted); border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 3px; }
.admin-menu a { display: block; padding: 9px 12px; border-radius: 5px; color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 600; transition: color .12s, background .12s; }
.admin-menu a:hover { color: var(--text); background: var(--surface-strong); }
.admin-menu a.active { color: var(--accent); background: var(--accent-soft); }

/* ---------- 19. 认证页 ---------- */
.auth-page { display: grid; place-items: center; min-height: 100vh; }
.auth-card { width: min(100%, 380px); padding: 32px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: var(--shadow); }
.auth-card .brand-mark { margin-bottom: 18px; }
.auth-card h1 { margin: 6px 0 4px; }
.auth-card > .muted { margin: 0 0 4px; font-size: 12px; }
.auth-card .form-stack { margin-top: 22px; }
.auth-link { margin: 18px 0 0; color: var(--muted); text-align: center; font-size: 12px; }
.auth-link a { color: var(--accent); font-weight: 700; }

/* ---------- 20. 响应式 ---------- */
@media (max-width: 1100px) {
  body { padding: 0; }
  .app-shell { min-height: 100vh; border: 0; border-radius: 0; }
}
@media (max-width: 820px) {
  .workspace { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .sidebar { align-self: start; border-right: 0; border-bottom: 1px solid var(--border); }
  .titlebar { grid-template-columns: 1fr auto; }
  .titlebar-center { display: none; }
  .content { padding: 16px 14px 24px; }
  /* 后台：侧栏变抽屉 */
  .admin-menu { position: fixed; top: 0; bottom: 0; left: 0; z-index: 60; width: min(80vw, 280px); background: var(--surface-muted); border-right: 1px solid var(--border); box-shadow: var(--shadow); transform: translateX(-100%); transition: transform .2s; }
  body.admin-menu-open .admin-menu { transform: translateX(0); }
  .admin-menu-backdrop { position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .45); }
  body.admin-menu-open .admin-menu-backdrop { display: block; }
  .menu-toggle { display: inline-flex; }
  /* 后台内容在抽屉打开时不被 grid 占列 */
  .workspace > .admin-menu { grid-column: auto; }
}
@media (max-width: 560px) {
  .content { padding: 14px 12px 22px; }
  .hero { align-items: flex-start; flex-direction: column; }
  .live-summary { width: 100%; }
  .content-toolbar { align-items: flex-start; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar input { max-width: none; }
  .admin-row { align-items: flex-start; flex-direction: column; }
  .admin-row .actions { justify-content: flex-start; width: 100%; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .share-link { flex-direction: column; }
}

/* ---------- 21. 兼容：dashboard.html 旧结构（当前路由未直接渲染） ---------- */
.side-nav { position: fixed; top: 0; bottom: 0; left: 0; width: 210px; padding: 16px 12px; background: var(--surface-muted); border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 3px; }
.side-nav > strong { padding: 4px 12px 10px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.side-nav a { display: block; padding: 9px 12px; border-radius: 5px; color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 600; }
.side-nav a:hover, .side-nav a.active { color: var(--accent); background: var(--accent-soft); }
.side-nav ~ .dashboard { margin-left: 210px; }
.dashboard { padding: 20px 22px 30px; }

/* ---------- 22. 移动端横屏（视口高度受限）：精简文字、压缩留白，避免纵向滚动 ---------- */
/* 手机横屏时可用高度很小，装饰性/说明性文字会挤占空间导致频繁滚动，故在此场景一律隐藏 */
@media (orientation: landscape) and (max-height: 560px) {
  /* 认证页：隐藏品牌副标题与说明文字，缩小 logo、压缩卡片与表单，保证表单完整可见无需滚动 */
  .auth-page { padding: 8px; }
  .auth-card { width: min(100%, 460px); padding: 12px 16px; }
  .auth-card .brand-mark { width: 24px; height: 24px; margin-bottom: 6px; font-size: 12px; border-radius: 5px; }
  .auth-card .eyebrow { display: none; }
  .auth-card > .muted { display: none; }
  .auth-card h1 { margin: 0; font-size: 16px; }
  .auth-card .form-stack { margin-top: 8px; gap: 8px; }
  .auth-card label { gap: 4px; }
  .auth-card input { height: 30px; }
  .alert, .success { margin-top: 8px; padding: 6px 10px; }
  .auth-link { margin-top: 8px; }

  /* 内容页：隐藏描述性副标题等次要文字，压缩标题栏与内容区留白 */
  .titlebar { height: 44px; }
  .content { padding: 10px 12px 12px; }
  .hero { align-items: center; margin-bottom: 10px; }
  .hero h1 { margin: 0; font-size: 17px; }
  .hero .muted { display: none; }
  .live-summary { min-width: 96px; padding: 6px 12px; }
  .live-summary strong { font-size: 18px; }
  .content-toolbar { padding-bottom: 8px; margin-bottom: 10px; }
  .toolbar-title strong { font-size: 15px; }
  .toolbar-title span { display: none; }
}