/* SiMPLE Drone 介面樣式：從 web/mockup 樣稿抽出（開發者 10/4 看過：很棒、很清楚）。
   設計尺度與顏色照抄 CTS index.html（--sp-* --r-* --fs-*、深色／淺色主題）。 */
:root{
  --sp-0:2px; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --r-1:4px; --r-2:8px;
  --fs-xs:.68rem; --fs-sm:.74rem; --fs-md:.8rem; --fs-base:.86rem;
  --fs-lg:1rem; --fs-xl:1.06rem; --fs-2xl:1.1rem;
}
/* 深色（10/8 開發者：太暗、學生以為是「黑科技」→ 預設改淺色；深色從接近全黑調成柔和的深灰藍，字也更亮） */
:root, [data-theme="dark"] {
  --bg:#2b313a; --surface:#353c46; --surface2:#414955; --border:#5a6472; --hdr-bg:#252b33;
  --accent:#6cb4f5; --accent2:#66cc90; --warn:#ff9c9c; --warn-amber:#e8ac4c;
  --text:#eef1f5; --text2:#b8c1cc; --editor-bg:#252b33; --editor-fg:#eef2f6;
  --row-sep:#47505c; --num-bg:#2f363f; --on-accent:#ffffff;
  --sel-bg:#2c4366; --danger:#dd5f5b;
}
[data-theme="light"] {
  --bg:#e8ecf1; --surface:#ffffff; --surface2:#f4f7fa; --border:#b9c4d0; --hdr-bg:#d7dee7;
  --accent:#1668c9; --accent2:#1f7a45; --warn:#b3271a; --warn-amber:#9a5b00;
  --text:#12161d; --text2:#4e5866; --editor-bg:#ffffff; --editor-fg:#12161d;
  --row-sep:#dde4ec; --num-bg:#eef2f6; --on-accent:#ffffff;
  --sel-bg:#d2e2fb; --danger:#c0392b;
}
* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; }
body { font-family:'Segoe UI','Microsoft JhengHei',system-ui,sans-serif; background:var(--bg); color:var(--text);
  display:flex; flex-direction:column; font-size:15px; }
button { font-family:inherit; font-size:var(--fs-md); padding:var(--sp-1) var(--sp-3); border-radius:var(--r-1);
  border:1px solid var(--border); background:var(--surface2); color:var(--text); cursor:pointer; }
button:hover:not(:disabled) { background:var(--border); }
button:disabled { opacity:.45; cursor:not-allowed; }
button.run-btn { background:var(--accent2); color:var(--on-accent); border-color:var(--accent2); font-weight:700;
  font-size:var(--fs-base); padding:var(--sp-1) var(--sp-4); }
button.hover-btn { background:var(--warn-amber); color:#1c1f24; border-color:var(--warn-amber); font-weight:700; }
button.esc-btn { background:var(--danger); color:#fff; border-color:var(--danger); font-weight:800;
  font-size:var(--fs-lg); padding:var(--sp-2) var(--sp-4); }

/* Header */
#app-header { background:var(--hdr-bg); padding:var(--sp-2) var(--sp-4); display:flex; align-items:center;
  gap:var(--sp-3); border-bottom:1px solid var(--border); flex-wrap:wrap; }
.title { font-size:var(--fs-lg); font-weight:700; color:var(--accent); }
.badge { font-size:var(--fs-xs); font-weight:600; color:var(--text2); background:var(--surface2);
  border:1px solid var(--border); border-radius:999px; padding:var(--sp-0) var(--sp-2); }
.badge.mock { color:var(--warn-amber); border-color:var(--warn-amber); }
#mode { font-size:var(--fs-base); font-weight:700; }
.spacer { flex:1; }

/* Fleet strip：12 台常駐 */
#fleet { display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:var(--sp-1);
  padding:var(--sp-2) var(--sp-4); background:var(--hdr-bg); border-bottom:1px solid var(--border); }
.mini { background:var(--surface); border:2px solid var(--border); border-radius:var(--r-2); padding:var(--sp-1) var(--sp-2);
  cursor:pointer; user-select:none; min-width:0; }
.mini:hover { border-color:var(--text2); }
.mini.sel { border-color:var(--accent); background:var(--sel-bg); }
.mini .nm { font-size:var(--fs-sm); font-weight:700; display:flex; align-items:center; gap:var(--sp-1); white-space:nowrap; }
.mini .ln { font-size:var(--fs-xs); color:var(--text2); display:flex; justify-content:space-between; gap:var(--sp-1); margin-top:var(--sp-0); }
.dot { width:9px; height:9px; border-radius:50%; flex:none; background:var(--text2); }
.dot.on { background:var(--accent2); } .dot.off { background:transparent; border:1.5px solid var(--text2); }
.dot.busy { background:var(--warn-amber); }
.bar { height:4px; border-radius:2px; background:var(--surface2); overflow:hidden; margin-top:var(--sp-1); }
.bar > i { display:block; height:100%; background:var(--accent2); }
.t-ok { color:var(--accent2); } .t-warm { color:var(--warn-amber); } .t-hot { color:var(--warn); font-weight:700; }
#fleet-hint { grid-column:1 / -1; font-size:var(--fs-xs); color:var(--text2); display:flex; gap:var(--sp-3); align-items:center; }
#fleet-hint button { font-size:var(--fs-xs); padding:0 var(--sp-2); }

/* Main grid */
#main { flex:1; min-height:0; display:grid; gap:var(--sp-2); padding:var(--sp-2) var(--sp-4) var(--sp-3);
  grid-template-columns:minmax(300px,1fr) minmax(340px,1.15fr) minmax(280px,.9fr);
  grid-template-rows:minmax(0,1fr) 170px; }
.panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-2); display:flex;
  flex-direction:column; min-height:0; overflow:hidden; }
.panel-header { display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-1) var(--sp-3); background:var(--hdr-bg);
  font-size:var(--fs-xs); font-weight:600; color:var(--text2); letter-spacing:.04em; min-height:34px; }
.panel-header { flex-wrap:wrap; }
.panel-header .lbl { color:var(--text); font-size:var(--fs-sm); white-space:nowrap; }
.panel-header > span:not(.lbl):not(.spacer) { min-width:0; }
.panel-body { flex:1; min-height:0; overflow:auto; padding:var(--sp-3); }

/* Mission editor */
#ed-wrap { flex:1; min-height:0; display:flex; background:var(--editor-bg); }
#gutter { padding:var(--sp-2) var(--sp-1); text-align:right; color:var(--text2); background:var(--num-bg);
  font:600 var(--fs-base)/1.7 Consolas,'Courier New',monospace; overflow:hidden; user-select:none; min-width:2.6em; }
#gutter div.bad { color:var(--warn); }
#editor { flex:1; border:none; outline:none; resize:none; padding:var(--sp-2) var(--sp-3); background:var(--editor-bg);
  color:var(--editor-fg); font:600 var(--fs-base)/1.7 Consolas,'Courier New',monospace; white-space:pre; overflow:auto; }
#check { border-top:1px solid var(--border); padding:var(--sp-2) var(--sp-3); font-size:var(--fs-md); max-height:120px; overflow:auto; }
#check .ok { color:var(--accent2); font-weight:600; } #check .bad { color:var(--warn); font-weight:600; }
#check a { color:var(--warn); cursor:pointer; text-decoration:underline; }

/* Detail cards */
#detail { display:grid; gap:var(--sp-3); }
#detail.one { grid-template-columns:1fr; } #detail.two { grid-template-columns:1fr 1fr; }
.card { border:1px solid var(--border); border-radius:var(--r-2); padding:var(--sp-3); background:var(--surface2); }
.card h3 { font-size:var(--fs-xl); display:flex; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-2); }
.card h3 .st { font-size:var(--fs-sm); font-weight:600; color:var(--text2); }
.gauges { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2) var(--sp-3); }
.g .k { font-size:var(--fs-xs); color:var(--text2); }
.g .v { font-size:1.5rem; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.2; }
.g .v small { font-size:var(--fs-sm); font-weight:600; color:var(--text2); margin-left:2px; }
.g .bar { height:7px; }
.compass { display:flex; align-items:center; gap:var(--sp-2); }
.compass svg { width:46px; height:46px; flex:none; }
.pre { margin-top:var(--sp-3); border-top:1px solid var(--border); padding-top:var(--sp-2); font-size:var(--fs-md);
  display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-1) var(--sp-2); }
.pre .verdict { grid-column:1 / -1; font-weight:700; margin-top:var(--sp-1); }
.lastcmd { margin-top:var(--sp-2); font-size:var(--fs-md); color:var(--text2); }
.video { margin-top:var(--sp-3); border:1px solid var(--border); border-radius:var(--r-2); overflow:hidden; background:#000; }
.video .scr { aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; color:#9aa4b2; font-size:var(--fs-md);
  background:linear-gradient(160deg,#2a3340,#0e1116); text-align:center; line-height:1.7; }
.video .bar2 { display:flex; gap:var(--sp-2); align-items:center; padding:var(--sp-1) var(--sp-2); background:var(--hdr-bg); font-size:var(--fs-sm); }
.empty { text-align:center; color:var(--text2); padding:var(--sp-5) var(--sp-3); font-size:var(--fs-base); line-height:1.8; }
.empty b { color:var(--text); font-size:var(--fs-xl); }
table.compact { width:100%; border-collapse:collapse; font-size:var(--fs-md); font-variant-numeric:tabular-nums; }
table.compact th { text-align:left; font-size:var(--fs-xs); color:var(--text2); font-weight:600; padding:var(--sp-1); border-bottom:1px solid var(--border); }
table.compact td { padding:var(--sp-1); border-bottom:1px solid var(--row-sep); white-space:nowrap; }

/* Map */
#map { width:100%; height:100%; display:block; }
#map-note { font-size:var(--fs-xs); color:var(--text2); padding:0 var(--sp-3) var(--sp-2); }

/* Log */
#log { grid-column:1 / -1; }
#log .panel-body { font-size:var(--fs-base); line-height:1.6; padding:var(--sp-2) var(--sp-3); }
#log .row { display:flex; gap:var(--sp-3); }
#log .tm { color:var(--text2); font-variant-numeric:tabular-nums; font-size:var(--fs-sm); padding-top:2px; }
#log .ok { color:var(--accent2); } #log .unc { color:var(--warn-amber); } #log .err { color:var(--warn); font-weight:700; }

/* Tools drawer */
/* 窄螢幕（< 1150px）：任務＋無人機兩欄，俯視圖放到下面 */
@media (max-width:1150px) {
  #main { grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:minmax(420px,1fr) 320px 170px; overflow:auto; }
  #map-panel { grid-column:1 / -1; }
  #fleet { grid-template-columns:repeat(6, minmax(0,1fr)); }
}
@media (max-width:700px) {
  #main { grid-template-columns:minmax(0,1fr); grid-template-rows:none; grid-auto-rows:minmax(360px,auto); }
  #fleet { grid-template-columns:repeat(4, minmax(0,1fr)); padding:var(--sp-2); }
}
#tools { position:fixed; right:var(--sp-4); top:56px; width:320px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-2); box-shadow:0 8px 24px rgba(0,0,0,.35); display:none; z-index:10; }
#tools.open { display:block; }
#tools ul { list-style:none; padding:var(--sp-2); }
#tools li { padding:var(--sp-2); border-radius:var(--r-1); font-size:var(--fs-md); }
#tools li:hover { background:var(--surface2); }
#tools li .d { font-size:var(--fs-xs); color:var(--text2); }

#banner { display:none; background:var(--danger); color:#fff; font-weight:800; text-align:center; padding:var(--sp-2);
  font-size:var(--fs-xl); }
#banner.show { display:block; }

/* ── 真實版加的 ── */
.badge.live { color:var(--accent2); border-color:var(--accent2); }
.badge.fake { color:var(--warn-amber); border-color:var(--warn-amber); }
.dot.stale { background:var(--warn-amber); opacity:.5; }
.note { font-size:var(--fs-sm); color:var(--text2); margin-top:var(--sp-2); line-height:1.6; }
#offline { display:none; position:fixed; inset:0; background:rgba(0,0,0,.72); z-index:20; color:#fff;
  align-items:center; justify-content:center; text-align:center; font-size:var(--fs-2xl); line-height:2; }
#offline.show { display:flex; }
#offline b { font-size:1.6rem; color:var(--warn); }

/* ── 手動飛（搖桿）── */
#joy { border:1px solid var(--accent); border-radius:var(--r-2); padding:var(--sp-2) var(--sp-3); margin-bottom:var(--sp-3); background:var(--surface2); }
.joy-bar { display:flex; gap:var(--sp-2); align-items:center; flex-wrap:wrap; }
.joy-bar select { font:inherit; font-size:var(--fs-base); padding:var(--sp-1); border-radius:var(--r-1); background:var(--surface); color:var(--text); border:1px solid var(--border); }
#joy-state.on { color:var(--accent2); border-color:var(--accent2); } #joy-state.dog { color:var(--warn); border-color:var(--warn); }
.joy-main { display:flex; justify-content:space-between; align-items:center; gap:var(--sp-2); margin:var(--sp-2) 0; }
.joy-stick, .joy-mid { text-align:center; }
.joy-mid { flex:1; display:flex; flex-direction:column; gap:var(--sp-1); align-items:center; }
.jpad { position:relative; width:min(13vw, 150px); min-width:110px; aspect-ratio:1; border-radius:50%; margin:0 auto;
  background:radial-gradient(circle, var(--surface) 0, var(--editor-bg) 70%); border:2px solid var(--border); touch-action:none; cursor:grab; }
.jpad::before, .jpad::after { content:""; position:absolute; background:var(--border); }
.jpad::before { left:50%; top:8%; bottom:8%; width:2px; } .jpad::after { top:50%; left:8%; right:8%; height:2px; }
.jpad .knob { position:absolute; width:30%; aspect-ratio:1; left:35%; top:35%; border-radius:50%; background:var(--accent); z-index:1; pointer-events:none; }
.joy-lbl { font-size:var(--fs-sm); color:var(--text2); line-height:1.5; margin-top:var(--sp-1); }
#joy-vals { font:700 var(--fs-base)/1.6 Consolas, monospace; }
#joy-btn.active { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }

/* 任務執行中：目前這一行 */
#gutter div.cur { color:var(--accent2); font-weight:800; }
#check code { font-family:Consolas,monospace; color:var(--text); }

/* ── 鏡頭（點選看一台）── */
#vid { border:1px solid var(--accent2); border-radius:var(--r-2); padding:var(--sp-2) var(--sp-3); margin-bottom:var(--sp-3); background:var(--surface2); }
#vid-canvas { display:block; width:100%; aspect-ratio:4/3; margin-top:var(--sp-2); background:#000; border-radius:var(--r-1); }
#vid-btn.active { background:var(--accent2); color:var(--on-accent); border-color:var(--accent2); }

/* ── 🥽 MR 浮層：蓋在主畫面上（不另開分頁——搖桿看門狗要主畫面在最前面）── */
#mr-overlay { position:fixed; left:0; right:0; bottom:0; z-index:15; background:var(--bg); border-top:2px solid var(--accent); }
#mr-frame { width:100%; height:100%; border:0; display:block; }
#mr-overlay.ph { top:0 !important; z-index:70; border-top:0; }   /* 📱 手機搖桿（v5.34）：整個螢幕＝3D，上面蓋觸控搖桿 */
#mr-overlay.ph #mr-close { display:none; }
#mr-close { position:absolute; right:var(--sp-3); top:var(--sp-1); z-index:2; }
#mr-btn.active { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }

/* 📄 飛行紀錄（學習歷程，v4.5） */
#fl-ov { position:fixed; inset:0; z-index:30; background:rgba(0,0,0,.45); display:flex; align-items:flex-start; justify-content:center; padding:6vh var(--sp-4) var(--sp-4); }
#fl-ov[hidden] { display:none; }
.fl-box { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-2); width:min(900px, 100%); max-height:86vh;
  display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-3) var(--sp-4); box-shadow:0 10px 30px rgba(0,0,0,.35); }
.fl-top { display:flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-lg); }
.fl-hint { font-size:var(--fs-md); color:var(--text2); line-height:1.6; }
#fl-sum { font-size:var(--fs-base); line-height:1.6; }
.fl-list { overflow:auto; border:1px solid var(--border); border-radius:var(--r-1); min-height:80px; }
#fl-table { border-collapse:collapse; width:100%; font-size:var(--fs-md); }
#fl-table th, #fl-table td { padding:var(--sp-1) var(--sp-2); border-bottom:1px solid var(--row-sep); text-align:left; vertical-align:top; }
#fl-table th { position:sticky; top:0; background:var(--surface2); white-space:nowrap; }
#fl-table td.r { text-align:right; white-space:nowrap; }
#fl-table .real td:nth-child(2) { color:var(--accent2); font-weight:700; }
#fl-table .empty { color:var(--text2); text-align:center; padding:var(--sp-4); }
.fl-actions { display:flex; align-items:center; gap:var(--sp-2); }
a.fl-dl { background:var(--accent); color:var(--on-accent); border-radius:var(--r-1); padding:var(--sp-1) var(--sp-4);
  text-decoration:none; font-weight:700; font-size:var(--fs-base); }
a.fl-dl.off { opacity:.45; pointer-events:none; }

/* 練習／實機同一個程式（v4.6）：一眼分得出現在是哪個模式 */
#mode-strip { text-align:center; font-weight:800; font-size:var(--fs-base); padding:3px var(--sp-2);
  background:var(--warn-amber); color:#1c1f24; letter-spacing:.04em; }
body.mode-real #mode-strip { background:var(--accent2); color:#fff; }
body.mode-practice #app-header { border-bottom:3px solid var(--warn-amber); }
body.mode-real #app-header { border-bottom:3px solid var(--accent2); }
button.mode-btn { font-weight:700; border-width:2px; }
body.mode-practice button.mode-btn { border-color:var(--accent2); color:var(--accent2); }
body.mode-real button.mode-btn { border-color:var(--warn-amber); color:var(--warn-amber); }
#md-ov { position:fixed; inset:0; z-index:40; background:rgba(0,0,0,.5); display:flex; align-items:flex-start; justify-content:center; padding:10vh var(--sp-4) var(--sp-4); }
#md-ov[hidden] { display:none; }
.md-box { background:var(--surface); border:2px solid var(--accent2); border-radius:var(--r-2); width:min(560px, 100%); padding:var(--sp-4);
  display:flex; flex-direction:column; gap:var(--sp-3); box-shadow:0 10px 30px rgba(0,0,0,.4); }
.md-box.to-practice { border-color:var(--warn-amber); }
.md-box h3 { font-size:var(--fs-2xl); }
#md-body { font-size:var(--fs-base); line-height:1.7; }
#md-body label { display:flex; gap:var(--sp-2); align-items:flex-start; cursor:pointer; padding:2px 0; }
#md-body input { margin-top:.35em; }
#md-body .err { color:var(--warn); font-weight:700; }
.md-actions { display:flex; justify-content:flex-end; gap:var(--sp-2); }

/* 📡 脫隊（單機模式）的無人機（v4.7） */
#ap-banner { margin:0 var(--sp-4) var(--sp-1); padding:var(--sp-2) var(--sp-3); border:2px solid var(--warn-amber); border-radius:var(--r-2);
  background:var(--surface); display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; font-size:var(--fs-base); }
#ap-banner[hidden] { display:none; }
#ap-banner b { color:var(--warn-amber); }
#ap-banner .note { font-size:var(--fs-sm); color:var(--text2); flex-basis:100%; }
#ap-banner button { font-weight:700; border-color:var(--warn-amber); }
.mini .ap { color:var(--warn-amber); font-weight:700; }

/* 淺色主題的對比修正（10/8）：--warn-amber 在淺色是深咖啡色，配深色字讀不清楚 */
#mode-strip { background:#f2b84b; color:#2a1d00; }
#class-strip { background:var(--danger); color:#fff; font-weight:700; text-align:center; padding:6px 12px; }   /* 👑 v5.9 */
.class-btn { font-weight:700; border-color:#8a6200; }
.class-btn.on { background:var(--danger); color:#fff; border-color:var(--danger); }
.mini .own { color:#d08a00; }
.gp-wrap { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:60; display:flex; align-items:center; justify-content:center; }   /* 👥 v5.10 */
.gp-wrap[hidden] { display:none; }
.room-lines { max-height:40vh; overflow:auto; background:var(--surface2); border:1px solid var(--border); border-radius:var(--r-1); padding:6px 8px; font:var(--fs-sm)/1.5 Consolas,'Courier New',monospace; white-space:pre-wrap; }   /* 🏠 v5.23 */
.gp-box { background:var(--surface, #fff); color:var(--text); border-radius:12px; padding:14px 16px; max-width:min(96vw, 860px); max-height:92vh; overflow:auto; box-shadow:0 10px 40px rgba(0,0,0,.35); }
.gp-top { display:flex; gap:12px; align-items:baseline; flex-wrap:wrap; margin-bottom:8px; }
.gp-hint, .gp-presets { font-size:var(--fs-sm); color:var(--text2); }
.gp-presets button { margin:2px 4px; }
.gp-grid { display:grid; grid-template-columns:auto repeat(12, 1fr); gap:2px 4px; margin:10px 0; font-size:var(--fs-sm); align-items:center; }
.gp-grid .h { font-weight:700; text-align:center; }
.gp-grid label { display:flex; justify-content:center; padding:3px; border-radius:6px; cursor:pointer; }
.gp-grid label.mine { background:color-mix(in srgb, var(--accent2) 22%, transparent); }
.gp-grid label.dup input:checked { outline:2px solid var(--danger); }
.gp-actions { display:flex; gap:8px; align-items:center; }
.gp-warn { color:var(--danger); font-size:var(--fs-sm); }
#heal-btn { font-size:var(--fs-sm); padding:0 10px; margin-left:6px; border-radius:999px; border:1px solid #8a6200; background:#fff7e0; color:#2a1d00; cursor:pointer; font-weight:700; }
body.mode-real #mode-strip { background:var(--accent2); color:#fff; }
[data-theme="light"] button.hover-btn { color:#fff; }

/* 中間欄頁籤（v4.8，10/8 學生建議：狀態、手動飛、鏡頭擠在同一個區域） */
.tabbar { display:flex; gap:2px; background:var(--surface2); border:1px solid var(--border); border-radius:var(--r-2); padding:2px; }
.tabbar .tab { border:0; background:transparent; font-weight:700; font-size:var(--fs-base); padding:3px 12px; border-radius:6px; color:var(--text2); }
.tabbar .tab:hover:not(.on) { background:var(--border); color:var(--text); }
.tabbar .tab.on { background:var(--accent); color:var(--on-accent); }
.tabbar .tab[data-tab="vid"].on { background:var(--accent2); }
#mini-st { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-3); padding:var(--sp-1) var(--sp-3); margin-bottom:var(--sp-2);
  border:1px solid var(--border); border-radius:var(--r-2); background:var(--surface2); font-size:var(--fs-base); }
#mini-st[hidden] { display:none; }
#mini-st .k { color:var(--text2); font-size:var(--fs-sm); }
#mini-st b { font-variant-numeric:tabular-nums; }
#detail[hidden] { display:none; }

/* ── 壓縮版面（v4.8，10/8 開發者：「儀表板空白太多」；學生筆電常見 1366×768） ── */
#app-header { padding:var(--sp-1) var(--sp-4); gap:var(--sp-2); }
button.esc-btn { padding:var(--sp-1) var(--sp-4); }
#fleet { padding:var(--sp-1) var(--sp-4); }
.mini { padding:2px var(--sp-2); }
.mini .ln { margin-top:0; }
#main { gap:var(--sp-2); padding:var(--sp-1) var(--sp-4) var(--sp-2); grid-template-rows:minmax(0,1fr) 130px; }
.panel-header { min-height:30px; }
.panel-body { padding:var(--sp-2) var(--sp-3); }
/* 狀態卡：數字三欄、字小一號，起飛前檢查不用捲 */
.card { padding:var(--sp-2) var(--sp-3); }
.card h3 { font-size:var(--fs-lg); margin-bottom:var(--sp-1); }
.gauges { grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--sp-1) var(--sp-3); }
#detail.two .gauges { grid-template-columns:1fr 1fr; }
.g .v { font-size:1.25rem; }
.g .bar { height:5px; }
.compass svg { width:34px; height:34px; }
.pre { margin-top:var(--sp-2); padding-top:var(--sp-1); }
.lastcmd { margin-top:var(--sp-1); }
/* 手動飛＋同時看鏡頭：鏡頭變成網頁裡的浮動小視窗（v4.9，10/8 開發者）。拖標題列移動、拖右下角改大小。
   ⚠ 刻意不做成獨立視窗（Picture-in-Picture）：點了獨立視窗，主網頁就失去焦點 → 手動飛的看門狗 0.35 秒讓它懸停。
   z-index 16：在 MR 浮層（15）之上，在「連線程式沒有在跑」（20）、紀錄（30）、確認視窗（40）之下；不蓋到標題列的 Esc 鈕。 */
body.vid-float #vid { position:fixed; z-index:16; margin:0; width:380px; min-width:240px; max-width:90vw; min-height:150px;
  resize:both; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.35); display:flex; flex-direction:column; }
body.vid-float #vid[hidden] { display:none; }
body.vid-float #vid .joy-bar { cursor:move; user-select:none; }
body.vid-float #vid .joy-bar select, body.vid-float #vid .joy-bar button { cursor:pointer; }
body.vid-float #vid-canvas { width:100%; height:auto; flex:1; min-height:0; object-fit:contain; }
body.vid-float #vid::after { content:'⇲'; position:absolute; right:3px; bottom:0; font-size:14px; color:var(--text2); pointer-events:none; }

/* ── 寫程式（v5.0，10/8 正式版）：A1 大字模式、A2 指令按鈕、A3 ▶ 這一行 ── */
#ed-tools { display:flex; align-items:center; gap:var(--sp-1); flex-wrap:wrap; padding:var(--sp-1) var(--sp-2); border-bottom:1px solid var(--border); background:var(--surface); }
#ed-tools button { padding:2px var(--sp-2); }
#ed-tools kbd, #ed-mini kbd { font:600 var(--fs-xs) Consolas,monospace; border:1px solid var(--border); border-bottom-width:2px; border-radius:3px; padding:0 4px; color:var(--text2); }
button.line-btn { background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:700; }
#big-btn.on, #pal-btn.on { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
#ed-area { flex:1; min-height:0; display:flex; flex-direction:column; }
#ed-wrap { --ed-fs:var(--fs-base); }
#gutter, #editor { font-size:var(--ed-fs) !important; }
#gutter div.here { color:var(--accent); font-weight:800; }
#gutter div.done { color:var(--accent2); }
#gutter div.done::after { content:'✓'; font-size:.75em; margin-left:1px; }
#ed-mini { display:flex; flex-wrap:wrap; gap:var(--sp-1) var(--sp-3); align-items:center; padding:var(--sp-1) var(--sp-3);
  border-bottom:1px solid var(--border); background:var(--surface2); font-size:var(--fs-base); }
#ed-mini[hidden] { display:none; }
#ed-mini .k { color:var(--text2); font-size:var(--fs-sm); }
#pal { order:-1; display:flex; flex-direction:column; gap:var(--sp-1); padding:var(--sp-2); border-bottom:1px solid var(--border); background:var(--surface2); }
#pal[hidden] { display:none; }
#pal .pal-h { font-size:var(--fs-sm); color:var(--text2); }
#pal .pal-row { display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
#pal .pal-row > button { font-size:var(--fs-md); padding:3px 8px; }
#pal .k { font-size:var(--fs-sm); color:var(--text2); margin-right:2px; }
#pal .chips { display:flex; gap:3px; }
#pal .chips button { border-radius:999px; padding:1px 9px; font-size:var(--fs-sm); }
#pal .chips button.on { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
#pal .pal-go input { width:52px; font:600 var(--fs-md) Consolas,monospace; background:var(--editor-bg); color:var(--editor-fg);
  border:1px solid var(--border); border-radius:var(--r-1); padding:2px 4px; text-align:right; }
/* A1 大字模式：編輯區佔 2／3、指令按鈕放右邊；中間「我們的無人機」收起來（標題列的 Esc、Space 照常；狀態看編輯區上方那一行） */
body.big-ed #main { grid-template-columns:minmax(0,2fr) minmax(280px,1fr); }
body.big-ed #drone-panel { display:none; }
body.big-ed #ed-area { flex-direction:row; }
body.big-ed #ed-wrap { flex:1; min-width:0; }
body.big-ed #pal { order:1; width:260px; flex:none; border-bottom:0; border-left:1px solid var(--border); overflow:auto; }
@media (max-width:1150px) {
  body.big-ed #main { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(420px,1fr) 320px 130px; }
  body.big-ed #ed-area { flex-direction:column; }
  body.big-ed #pal { order:-1; width:auto; border-left:0; border-bottom:1px solid var(--border); }
}

/* 🥽 Quest 連線（v5.1 Q0） */
#quest-pop { position:fixed; right:var(--sp-4); top:56px; width:min(440px, calc(100vw - 32px)); z-index:12; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-2); box-shadow:0 8px 24px rgba(0,0,0,.25); }
#quest-pop[hidden] { display:none; }
#quest-pop .qp-body { padding:var(--sp-3); font-size:var(--fs-base); line-height:1.7; }
#quest-pop ol { margin:0; padding-left:1.3em; }
#qp-urls div { font:700 var(--fs-lg) Consolas,monospace; color:var(--accent); user-select:all; }
.qp-code { font:800 1.6rem Consolas,monospace; letter-spacing:.15em; color:var(--accent2); }
.qp-st { margin-top:var(--sp-2); color:var(--text2); }
.qp-err { color:var(--warn); font-weight:700; }
#quest-btn.on { background:var(--accent2); color:var(--on-accent); border-color:var(--accent2); }

/* v5.3（10/20）：🎥 鏡頭一顆開關（浮動視窗）、手把燈號、可拖動的分隔線 */
.cam-btn { font-weight:700; margin-left:var(--sp-1); }
.cam-btn.on { background:var(--accent2); color:var(--on-accent); border-color:var(--accent2); }
body.vid-float.vid-big #vid { left:50% !important; top:64px !important; transform:translateX(-50%); width:min(960px, 72vw) !important; height:auto !important; resize:none; }
.pad-lamp { font-size:var(--fs-sm); font-weight:700; padding:2px 10px; border-radius:999px; border:1.5px solid var(--border); white-space:nowrap; }
.pad-lamp.off { color:var(--text2); }
.pad-lamp.on { color:var(--accent2); border-color:var(--accent2); }
.pad-lamp.act { color:var(--on-accent); background:var(--accent2); border-color:var(--accent2); }
.bat-swap, .bat-tip { display:block; width:100%; margin-top:3px; font-size:var(--fs-sm); font-weight:700; padding:1px 4px; border-radius:6px;
  border:1.5px solid var(--warn); background:color-mix(in srgb, var(--warn) 18%, transparent); color:inherit; cursor:pointer; text-align:center; }   /* 🔋 v5.12 */
.bat-swap.now, .bat-tip.now { border-color:var(--danger); background:var(--danger); color:#fff; }
.bat-tip { cursor:default; }
/* 🧊 v5.13 飛行任務的 3D 視窗：左邊程式、右邊 3D（取代右欄的 2D 俯視圖） */
#ed-split { flex:1; min-height:0; display:flex; flex-direction:column; }
#ed-split > #ed-area { flex:1; min-width:0; min-height:0; }
#v3d { position:relative; flex:1.25; min-width:0; min-height:0; border-left:1px solid var(--border); background:var(--editor-bg); }
#v3d[hidden] { display:none; }
#v3d-canvas, #v3d-vid { position:absolute; inset:0; width:100%; height:100%; display:block; }
#v3d-canvas { touch-action:none; cursor:grab; }
.v3d-top { position:absolute; left:0; right:0; top:0; display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center; padding:3px var(--sp-2); font-size:var(--fs-sm); pointer-events:none; }
.v3d-top > * { pointer-events:auto; }
.v3d-top .seg { display:inline-flex; }
.v3d-top .seg button { border-radius:0; } .v3d-top .seg button:first-child { border-radius:var(--r-1) 0 0 var(--r-1); } .v3d-top .seg button:last-child { border-radius:0 var(--r-1) var(--r-1) 0; }
.v3d-top button.on { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
/* ▶ 執行中的那一行：反白（v5.14，10/22 開發者）——白色條＋difference＝顏色反過來（淺色、深色主題都是反白） */
#ed-wrap { position:relative; }
#ed-run { position:absolute; left:0; right:0; background:#fff; mix-blend-mode:difference; pointer-events:none; display:none; z-index:2; }
.v3d-bar { position:absolute; left:0; right:0; bottom:0; display:flex; gap:var(--sp-2); align-items:center; padding:3px var(--sp-2);
  background:color-mix(in srgb, var(--surface) 82%, transparent); font-size:var(--fs-sm); }
.v3d-hint { color:var(--text2); font-size:var(--fs-xs); }
#v3d-line { font-weight:700; }
.v3d-btn.on { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
body.v3d #map-panel { display:none; }
body.v3d #main { grid-template-columns:minmax(560px,1.9fr) minmax(320px,1fr); }
body.v3d #ed-split { flex-direction:row; }
body.big-ed #v3d { display:none; }
@media (max-width:1150px) {
  body.v3d #main { grid-template-columns:minmax(0,1fr); }
  body.v3d #ed-split { flex-direction:column; }
  body.v3d #v3d { flex:none; height:50%; border-left:0; border-top:1px solid var(--border); }
}
/* ⛶ 鏡頭全螢幕（v5.15，10/22 開發者：不戴 Quest，筆電螢幕放大無人機鏡頭畫面、只留必要資訊） */
#fpv { position:fixed; inset:0; z-index:200; background:#000; color:#fff; }
#fpv[hidden] { display:none; }
#fpv-video { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
#fpv-video canvas { width:100%; height:100%; object-fit:contain; display:block; }
.fpv-hud { position:absolute; padding:6px 14px; font:700 clamp(15px, 1.6vw, 26px)/1.3 system-ui, sans-serif; background:rgba(0,0,0,.45); border-radius:10px; text-shadow:0 1px 2px #000; }
.fpv-hud.tl { left:12px; top:12px; } .fpv-hud.tr { right:64px; top:12px; } .fpv-hud.bl { left:12px; bottom:12px; } .fpv-hud.br { right:12px; bottom:12px; }
.fpv-hud.bc { left:50%; top:12px; transform:translateX(-50%); max-width:44vw; font-size:clamp(11px, 1.05vw, 17px); font-weight:400; text-align:center; }   /* 上方正中間：不跟下方左右兩塊疊在一起 */
.fpv-hud .bad { color:#ff7070; } .fpv-hud .ok { color:#8ff0a4; }
#fpv-warn { display:block; color:#ffd166; font-weight:700; font-size:clamp(15px, 1.6vw, 26px); }
#fpv-warn:empty { display:none; }
#fpv-exit { position:absolute; right:12px; top:12px; width:44px; height:44px; border-radius:50%; font-size:22px; background:rgba(0,0,0,.5); color:#fff; border:1px solid #fff8; }
/* ❓ 按鍵說明（v5.16，10/23 開發者：簡易手控按鍵說明，先隱藏、按了才顯示） */
#keyhelp { position:fixed; inset:0; z-index:250; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.35); }
#keyhelp[hidden] { display:none; }
.kh-box { background:var(--surface); color:var(--text); border-radius:14px; padding:14px 18px; box-shadow:0 10px 40px rgba(0,0,0,.4); max-width:min(96vw, 1080px); max-height:92vh; overflow:auto; }
.kh-top { display:flex; align-items:baseline; gap:8px; font-size:var(--fs-lg); margin-bottom:8px; }
.kh-hint { font-size:var(--fs-sm); color:var(--text2); }
.kh-cols { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; }
@media (max-width:900px) { .kh-cols { grid-template-columns:1fr 1fr; } }
@media (max-width:640px) { .kh-cols { grid-template-columns:1fr; } }
.kh-cols h4 { margin:0 0 6px; font-size:var(--fs-md); }
.kh-cols table { border-collapse:collapse; width:100%; font-size:var(--fs-md); }
.kh-cols td { padding:4px 6px; border-bottom:1px solid var(--row-sep, var(--border)); white-space:nowrap; }
.kh-cols td:first-child { font-weight:700; }
.kh-cols kbd { display:inline-block; min-width:1.6em; text-align:center; padding:1px 6px; border:1.5px solid var(--border); border-bottom-width:3px; border-radius:6px; font:700 var(--fs-sm) Consolas, monospace; background:var(--surface2, transparent); }
.kh-sep { border-bottom:0 !important; padding:2px !important; }
.kh-sos td { color:var(--danger); }
.kh-foot { margin-top:8px; font-size:var(--fs-sm); color:var(--text2); }
.fpv-kh { position:absolute; right:64px; top:12px; width:44px; height:44px; border-radius:50%; font-size:20px; background:rgba(0,0,0,.5); color:#fff; border:1px solid #fff8; }
.fpv-hud.tr { right:116px !important; }
.spd-presets { display:flex; gap:4px; justify-content:center; margin-top:2px; }
.spd-presets button { font-size:var(--fs-sm); padding:0 8px; border-radius:999px; }
.spd-presets button.on { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
/* ☁ 雲端練習版（v5.19）：需要筆電連線程式的功能藏起來（實機、Xbox 直控、micro:bit、Quest、老師接管、分組、找脫隊） */
body.cloud #mode-btn, body.cloud #use-pad-l, body.cloud #use-mb-l, body.cloud #use-ph-l, body.cloud #ph-pop, body.cloud #use-quest-l, body.cloud #quest-btn,
body.cloud #class-btn, body.cloud #groups-btn, body.cloud #pd-btn, body.cloud .mb-bar, body.cloud .xr-bar,
body.cloud [data-act="find"], body.cloud #vid-dir, body.cloud #role-badge { display:none !important; }
/* ☁ 雲端版頁尾（v5.34.1）：著作權＋連回 SiMPLE 入口網站；本機版（學校筆電）不顯示 */
#site-foot { display:none; }
body.cloud #site-foot { display:block; flex:none; text-align:center; font-size:var(--fs-xs); color:var(--text2); padding:0 var(--sp-4) var(--sp-1); }
#site-foot a { color:var(--accent); text-decoration:none; }
#site-foot a:hover { text-decoration:underline; }
.smooth-chk { display:inline-flex; align-items:center; gap:4px; font-size:var(--fs-sm); font-weight:700; white-space:nowrap; cursor:pointer; }   /* 🌊 v5.11 */
.use-chk { display:inline-flex; align-items:center; gap:4px; font-weight:700; padding:2px 10px; border-radius:999px; border:1.5px solid var(--border); cursor:pointer; white-space:nowrap; }   /* v5.8 勾選 Xbox／Quest */
.use-chk.on { color:var(--on-accent); background:var(--accent2); border-color:var(--accent2); }
.use-chk.warn { border-color:var(--danger); }
.use-s { font-weight:400; font-size:var(--fs-sm); }
.pd-btn.on { color:var(--on-accent); background:var(--accent2); border-color:var(--accent2); font-weight:700; }   /* 🎮 手把直控（v5.6） */
.pad-lamp.blur { color:#fff; background:var(--danger); border-color:var(--danger); }   /* 網頁不在最前面：搖桿不能用（10/20） */
#main { position:relative; }
.col-grip { position:absolute; width:12px; margin-left:-6px; cursor:col-resize; z-index:5; border-radius:6px; }
.col-grip::after { content:''; position:absolute; left:5px; top:0; bottom:0; width:2px; background:transparent; border-radius:2px; transition:background .15s; }
.col-grip:hover::after, .col-grip.drag::after { background:var(--accent); }
body.col-dragging { cursor:col-resize; user-select:none; }
/* 📷 拍照／⏺ 錄影（10/20） */
#vid-rec.rec-on { color:#fff; background:var(--danger); border-color:var(--danger); }
#vid-mic.mic-off { color:var(--text2); text-decoration:line-through; }
.xr-bar { margin-top:var(--sp-1); }
#vid-wrap { position:relative; flex:1; min-height:0; display:flex; flex-direction:column; }
#rec-badge { position:absolute; left:10px; top:14px; padding:3px 12px; border-radius:999px; font-weight:700; color:#fff; background:var(--danger);
             box-shadow:0 1px 6px rgba(0,0,0,.4); animation:recBlink 1s steps(2, start) infinite; pointer-events:none; }
@keyframes recBlink { to { opacity:.45; } }
@keyframes snapFlash { from { filter:brightness(2.2); } to { filter:none; } }
#vid-canvas.snap-flash { animation:snapFlash .35s ease-out; }

/* 窄螢幕／手機（10/23 開發者：「手機版看不到飛行任務，也看不到 Run」）：
   上面「壓縮版面」的 #main { grid-template-rows:minmax(0,1fr) 130px } 寫在 @media 後面、蓋掉了窄螢幕的排法 →
   單欄時飛行任務那一列被擠成 0。這裡放在最後：列高照內容、每個面板給固定高度，整頁往下捲。 */
@media (max-width:1150px) {
  #main, body.v3d #main, body.big-ed #main { grid-template-rows:none; grid-auto-rows:auto; }
  #mission { height:min(760px, calc(100vh - 24px)); min-height:520px; }
  #drone-panel { min-height:380px; }
  #map-panel { height:320px; }
  #log { height:200px; }
}
@media (max-width:700px) {
  html, body { height:auto; }
  body { min-height:100%; }
  #main { flex:none; overflow:visible; padding:var(--sp-1) var(--sp-2) var(--sp-2); }
  #mission { height:calc(100vh - 16px); min-height:560px; }
}

/* 📐 學習歷程（v5.21；版面照 CTS 的 ✈ 學習歷程（無人機），index.html 的 .pf-*） */
#pf-btn, #pf-ov .pf-print { background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:700; }
#pf-ov { position:fixed; inset:0; z-index:40; background:var(--bg); color:var(--text); display:flex; flex-direction:column; }
#pf-ov .pf-top { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:8px 12px; border-bottom:1px solid var(--border); background:var(--surface); }
#pf-ov .pf-task select { font:inherit; max-width:min(60vw, 360px); }
#pf-ov .pf-hint { flex:1; min-width:200px; font-size:var(--fs-sm); color:var(--text2); }
#pf-ov .pf-body { flex:1; min-height:0; display:grid; grid-template-columns:minmax(260px, 340px) 1fr; }
#pf-ov .pf-form { overflow:auto; padding:12px; border-right:1px solid var(--border); background:var(--surface); display:flex; flex-direction:column; gap:8px; }
#pf-ov .pf-form label { display:flex; flex-direction:column; gap:2px; font-size:var(--fs-sm); color:var(--text2); }
#pf-ov .pf-form input, #pf-ov .pf-form textarea { font:inherit; font-size:var(--fs-base); color:var(--text); background:var(--surface2); border:1px solid var(--border); border-radius:var(--r-1); padding:4px 6px; }
#pf-ov .pf-form fieldset { border:1px solid var(--border); border-radius:var(--r-1); padding:6px 8px 8px; display:flex; flex-direction:column; gap:6px; }
#pf-ov .pf-form legend { font-size:var(--fs-sm); font-weight:700; }
#pf-ov .pf-note { font-size:var(--fs-xs); color:var(--text2); line-height:1.5; }
#pf-ov .pf-preview { overflow:auto; padding:16px; background:#8a8f98; }
@media (max-width:800px) { #pf-ov .pf-body { grid-template-columns:1fr; overflow:auto; } #pf-ov .pf-form, #pf-ov .pf-preview { overflow:visible; } #pf-ov .pf-form { border-right:0; } }
.pf-sheet { width:210mm; margin:0 auto; background:#fff; color:#1a1a1a; padding:14mm 14mm 10mm; box-shadow:0 2px 12px rgba(0,0,0,.3);
  font:10.5pt/1.55 "Noto Sans TC","Microsoft JhengHei","PingFang TC",sans-serif; page:pfsheet; }
.pf-sheet, .pf-sheet * { box-sizing:border-box; }          /* 邊框算在寬度裡（CTS v2.1.351：右邊框被切掉） */
@page pfsheet {
  margin:12mm 12mm 15mm;
  @bottom-center { content:"第 " counter(page) " 頁／共 " counter(pages) " 頁"; font-size:9pt; color:#666; }
  @bottom-left { content:"無人機飛行任務　學習紀錄"; font-size:8pt; color:#999; }
  @bottom-right { content:"SiMPLE Drone"; font-size:8pt; color:#999; }
}
.pf-sheet h1 { font-size:17pt; margin:2mm 0 3mm; text-align:center; letter-spacing:.08em; }
.pf-sheet h2 { font-size:12pt; margin:5mm 0 2mm; padding-bottom:1mm; border-bottom:1.5px solid #2f6b4f; color:#2f6b4f; break-after:avoid; }
.pf-sheet h3 { font-size:10.5pt; margin:3mm 0 1mm; break-after:avoid; }
.pf-sheet p { margin:1mm 0; }
.pf-course { text-align:center; color:#555; font-size:10pt; }
.pf-sheet table { border-collapse:collapse; width:100%; }
.pf-sheet th, .pf-sheet td { border:1px solid #bbb; padding:1mm 2mm; text-align:left; vertical-align:top; }
.pf-sheet th { background:#eef4f0; white-space:nowrap; font-weight:600; }
.pf-meta td { min-width:20mm; }
.pf-t td.r { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.pf-hist { font-size:9pt; }
.pf-hist tr.pf-realrow td:nth-child(3) { font-weight:700; color:#2f6b4f; }
.pf-hist tr.pf-best td { background:#fff6d6; font-weight:600; }
.pf-hist small { color:#666; }
.pf-story { background:#eef4f0; padding:2mm 3mm; border-radius:2px; }
.pf-field { display:flex; gap:4mm; align-items:flex-start; }
.pf-field figure { flex:0 0 72mm; margin:0; text-align:center; }
.pf-field .pf-map { width:100%; height:auto; border:1px solid #ccc; background:#fff; }
.pf-field figcaption { font-size:8pt; color:#555; }
.pf-field p { flex:1; }
.pf-prog { margin:0; padding:2mm; background:#f6f6f6; border:1px solid #ddd; font:8.5pt/1.4 Consolas,"Courier New",monospace; white-space:pre-wrap; overflow-wrap:anywhere; column-count:2; column-gap:5mm; }
.pf-write { white-space:pre-wrap; border-bottom:1px solid #999; padding:1mm 0 2mm; min-height:8mm; }
.pf-blank i { display:block; height:8mm; border-bottom:1px solid #999; }
.pf-foot { margin-top:5mm; font-size:8pt; color:#777; text-align:center; }
@media print {
  body.pf-printing > *:not(#pf-ov) { display:none !important; }
  body.pf-printing { display:block; height:auto; background:#fff; }
  body.pf-printing #pf-ov { position:static; display:block; background:#fff; }
  body.pf-printing #pf-ov .pf-top, body.pf-printing #pf-ov .pf-form { display:none !important; }
  body.pf-printing #pf-ov .pf-body, body.pf-printing #pf-ov .pf-preview { display:block; overflow:visible; padding:0; background:#fff; }
  body.pf-printing .pf-sheet { box-shadow:none; padding:0 0.5mm; width:auto; max-width:none; }
  body.pf-printing .pf-sheet tr, body.pf-printing .pf-field { break-inside:avoid; }
  body.pf-printing .pf-sheet thead { display:table-header-group; }   /* 跨頁的表格，下一頁再印一次表頭 */
}

/* 🧰 場景工具盒（v5.22；照 CTS ⑤ 的直排工具盒）：3D 視窗左邊，上下讓出標題列和底下那一條 */
.v3d-pal { position:absolute; left:4px; top:34px; bottom:32px; max-height:calc(100% - 66px); overflow:auto; display:flex; flex-flow:column wrap; align-content:flex-start; gap:3px;   /* 矮的時候自動排成兩欄 */
  padding:4px; border-radius:var(--r-1); background:color-mix(in srgb, var(--surface) 88%, transparent); border:1px solid var(--border); z-index:2; }
.v3d-pal[hidden] { display:none; }
.v3d-pal.busy { opacity:.45; pointer-events:none; }
.v3d-pal .ph { font-size:var(--fs-xs); color:var(--accent2); font-weight:700; margin-top:3px; }
.v3d-pal .pg { width:90px; display:flex; flex-direction:column; gap:3px; }   /* 一組（標題＋按鈕）一起換欄 */
.v3d-pal button { font-size:var(--fs-sm); padding:2px 4px; text-align:left; white-space:nowrap; }
.v3d-pal button.on { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.v3d-pal button[hidden], .v3d-pal label[hidden] { display:none; }
.v3d-pal label { font-size:var(--fs-xs); color:var(--text2); display:flex; align-items:center; gap:2px; }
.v3d-pal input, .v3d-pal select { width:100%; min-width:0; font:inherit; font-size:var(--fs-xs); padding:1px 2px; }
.sc-pop { position:absolute; left:auto; right:8px; top:34px; width:min(300px, calc(100% - 16px)); max-height:calc(100% - 70px); overflow:auto; z-index:3;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-2); box-shadow:0 6px 20px rgba(0,0,0,.3); padding:var(--sp-2) var(--sp-3);
  display:flex; flex-direction:column; gap:6px; font-size:var(--fs-sm); }
.sc-pop[hidden] { display:none; }
.sc-pop label { display:flex; align-items:center; gap:6px; }
.sc-pop label input { width:5em; font:inherit; }
.sc-pop .pp-note { color:var(--text2); font-size:var(--fs-xs); line-height:1.5; margin:0; }
.sc-pop .pp-row { display:flex; flex-wrap:wrap; gap:6px; }
.sc-pop button.on { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.sc-pop .pp-item { text-align:left; display:flex; flex-direction:column; }
.sc-pop .pp-item small { color:var(--text2); font-size:var(--fs-xs); }
#v3d-msg { position:absolute; left:50%; top:36px; transform:translateX(-50%); max-width:min(560px, calc(100% - 220px)); z-index:2; pointer-events:none;
  background:color-mix(in srgb, var(--surface) 92%, transparent); border:1px solid var(--border); border-radius:var(--r-1); padding:3px 10px;
  font-size:var(--fs-sm); opacity:0; transition:opacity .2s; }
#v3d-msg.show { opacity:1; }
#v3d-msg.bad { border-color:var(--warn); color:var(--warn); font-weight:700; }
#v3d.pal-on #v3d-msg { left:calc(50% + 50px); }

/* 🎮→✈ 手飛轉程式（v5.32）：飛行任務窗格下方、檢查列上面 */
#hf-card { display:flex; align-items:center; gap:var(--sp-2); padding:4px var(--sp-3); border-top:1px solid var(--border);
  background:color-mix(in srgb, var(--accent2) 14%, var(--surface)); font-size:var(--fs-md); }
#hf-card[hidden] { display:none; }
#hf-card.rec { background:color-mix(in srgb, var(--warn) 12%, var(--surface)); }
#hf-card.rec #hf-make, #hf-card.rec #hf-x { display:none; }
/* v5.33：3D 開著＝卡片浮在 3D 視窗右下角（底下那一條上面；左邊讓給工具盒） */
#hf-card.in3d { position:absolute; right:8px; bottom:36px; max-width:calc(100% - 120px); z-index:3; flex-wrap:wrap;
  border:1px solid var(--border); border-radius:var(--r-2); box-shadow:0 4px 14px rgba(0,0,0,.3); }
#hf-pick { font:inherit; font-size:var(--fs-sm); max-width:100%; }
#hf-pick[hidden] { display:none; }
/* 📱 手機搖桿 QR code（v5.34）：上方勾「📱 手機」之後在右上角 */
#ph-pop { position:fixed; right:12px; top:56px; z-index:40; width:300px; max-width:calc(100vw - 32px); background:var(--surface); border:1.5px solid var(--accent2); border-radius:12px; padding:10px 12px; box-shadow:0 8px 24px rgba(0,0,0,.25); }
#ph-pop[hidden] { display:none; }
.ph-top { display:flex; align-items:center; gap:6px; margin-bottom:6px; }
#ph-qr { display:block; margin:0 auto; width:220px; height:220px; image-rendering:pixelated; background:#fff; border-radius:6px; }
.ph-url { font-family:ui-monospace,Consolas,monospace; font-size:var(--fs-sm); word-break:break-all; text-align:center; margin:4px 0; color:var(--text2); }
.ph-st { font-weight:700; font-size:var(--fs-sm); margin:4px 0; }
.ph-how { margin:4px 0 0; padding-left:20px; font-size:var(--fs-sm); line-height:1.5; color:var(--text2); }
#use-ph-s { cursor:pointer; }