:root { color-scheme: dark; }
  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  html, body { margin:0; padding:0; height:100%; overflow:hidden; background:#000;
    font-family: ui-sans-serif, system-ui, -apple-system, "Noto Sans TC", sans-serif;
    color:#e8f4f0; -webkit-user-select:none; user-select:none; }
  #video, #baked, #live { position:fixed; inset:0; width:100%; height:100%; }
  #video { object-fit: cover; }
  #video.mirror { transform: scaleX(-1); }
  #baked, #live { pointer-events:none; }

  /* ── 起始畫面（iOS 一定要有使用者手勢才拿得到相機） */
  #gate { position:fixed; inset:0; z-index:30; display:grid; place-content:center;
    gap:18px; padding:32px; text-align:center;
    background:radial-gradient(120% 90% at 50% 0%, #17251f 0%, #080a09 70%); }
  #gate.gone { display:none; }
  #gate h1 { margin:0; font-size:26px; letter-spacing:.06em; font-weight:700; }
  #gate h1 span { color:#4ade9f; }
  #gate p { margin:0; font-size:13.5px; line-height:1.85; opacity:.62; max-width:30ch; }
  #gate code { background:rgba(255,255,255,.08); padding:1px 5px; border-radius:4px; font-size:12px; }
  #go { justify-self:center; margin-top:6px; padding:15px 40px; border:none; border-radius:999px;
    background:#4ade9f; color:#062b1c; font-size:16px; font-weight:700; cursor:pointer; }
  #go:disabled { background:#2a3833; color:#7a8a84; }
  #gateErr { color:#ff8f7a; font-size:12.5px; line-height:1.8; max-width:34ch; display:none; }
  #gateErr.show { display:block; }

  /* Task 18：installHint() 的安裝提示，只有非 standalone 時才有內容、才顯示 */
  #installHint { display:none; font-size:11.5px; opacity:.5; max-width:30ch; }
  #installHint.show { display:block; }

  .hud { position:fixed; z-index:10; left:0; right:0; display:flex; gap:8px; align-items:center;
    padding:calc(env(safe-area-inset-top) + 12px) 14px 0; }
  .title { font-size:15px; font-weight:600; letter-spacing:.02em; text-shadow:0 1px 6px rgba(0,0,0,.7); }
  .title span { color:#4ade9f; }
  .spacer { flex:1; }
  button.icon { width:44px; height:44px; border:none; border-radius:12px; flex:none;
    background:rgba(22,26,25,.62); backdrop-filter:blur(10px); color:#e8f4f0;
    font-size:17px; line-height:1; display:grid; place-items:center; cursor:pointer; }
  button.icon:active { background:rgba(60,66,64,.85); }
  button.icon.accent { background:rgba(24,60,48,.7); box-shadow:inset 0 0 0 1.5px #4ade9f; }
  button.icon.on { background:rgba(70,32,26,.7); box-shadow:inset 0 0 0 1.5px #ff8f7a; }

  #toast { position:fixed; z-index:20; top:50%; left:50%; transform:translate(-50%,-50%);
    background:rgba(10,12,12,.88); backdrop-filter:blur(12px); padding:16px 20px;
    border-radius:14px; max-width:80vw; font-size:13.5px; line-height:1.7; text-align:center;
    transition:opacity .4s; }
  #toast.hide { opacity:0; pointer-events:none; }
  #toast b { color:#4ade9f; }

  #fps { position:fixed; z-index:10; left:14px; bottom:calc(env(safe-area-inset-bottom) + 56px);
    font-size:11px; opacity:.5; font-variant-numeric:tabular-nums; }

  #toolbar { position:fixed; z-index:10; left:50%; transform:translateX(-50%);
    top:calc(env(safe-area-inset-top) + 66px); padding:6px 14px; border-radius:999px;
    background:rgba(14,17,16,.7); backdrop-filter:blur(10px); font-size:12.5px;
    opacity:.55; transition:opacity .2s, background .2s; }
  #toolbar.active { opacity:1; background:rgba(24,60,48,.85); box-shadow:inset 0 0 0 1.5px #4ade9f; }

  #panel { position:fixed; z-index:15; left:0; right:0; bottom:0;
    background:rgba(14,17,16,.86); backdrop-filter:blur(16px);
    border-radius:18px 18px 0 0; padding:0 16px calc(env(safe-area-inset-bottom) + 14px);
    transform:translateY(calc(100% - 46px)); transition:transform .28s cubic-bezier(.4,0,.2,1);
    max-height:78vh; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  #panel.open { transform:translateY(0); }
  #panelHead { height:46px; display:flex; align-items:center; justify-content:center; gap:8px;
    font-size:13px; cursor:pointer; }
  #panelHead .caret { color:#4ade9f; transition:transform .28s; }
  #panel.open #panelHead .caret { transform:rotate(180deg); }
  .row { display:flex; align-items:center; gap:12px; padding:7px 0; font-size:12.5px; }
  .row label { width:78px; flex:none; opacity:.78; }
  .row input[type=range] { flex:1; accent-color:#4ade9f; min-width:0; }
  .row output { width:44px; text-align:right; font-variant-numeric:tabular-nums; opacity:.66; }
  .chips { display:flex; flex-wrap:wrap; gap:7px; padding:9px 0 3px; }
  .chip { padding:7px 12px; border-radius:9px; border:1px solid rgba(255,255,255,.14);
    background:transparent; color:#e8f4f0; font-size:12px; cursor:pointer; }
  .chip.on { background:rgba(74,222,159,.16); border-color:#4ade9f; color:#4ade9f; }
  .chip.wide { flex:1; text-align:center; }
  /* Task 18：CDN 模式下離線鈕會被 main.js 用 disabled 停用，沒有這條規則的話看起來
     還是能點——加上明顯的視覺區別（半透明 + 不是 pointer 游標）。 */
  .chip:disabled { opacity:.38; cursor:not-allowed; }
  input[type=color] { width:38px; height:30px; padding:0; border:1px solid rgba(255,255,255,.16);
    border-radius:8px; background:transparent; cursor:pointer; }
  .hint { font-size:11px; opacity:.42; padding:10px 0 2px; line-height:1.7; }
  .hint b { color:#4ade9f; opacity:.9; }

  /* Task 15：拍照倒數，畫面正中央大數字 —— 手在鏡頭裡按不到螢幕，靠這個爭取擺位時間 */
  #countdown { position:fixed; z-index:25; inset:0; display:none; place-items:center;
    font-size:min(40vw,220px); font-weight:700; color:#fff;
    text-shadow:0 4px 30px rgba(0,0,0,.6); pointer-events:none; }
  #countdown.show { display:grid; }

  /* Task 15：📷 選單，從 #btnShot 底下彈出，含影像／透明背景／3 秒後拍 */
  #shotMenu { position:fixed; z-index:11; right:14px;
    top:calc(env(safe-area-inset-top) + 60px); flex-direction:column;
    background:rgba(14,17,16,.88); backdrop-filter:blur(14px); padding:9px;
    border-radius:14px; display:none; }
  #shotMenu.show { display:flex; }
  #shotMenu .chip { text-align:left; white-space:nowrap; }

  /* M4：#live 要接住雙指 pinch-zoom / 單指拖曳的螢幕手勢後援，蓋掉上面的 pointer-events:none；
     touch-action:none 讓瀏覽器別把這些手勢拿去做原生縮放/捲動。 */
  #live { z-index:2; pointer-events:auto; touch-action:none; }
  #baked { z-index:1; transform-origin: 0 0; }  /* 縮放中用 CSS transform 拉伸 */

  /* Task 16：錄音中 HUD 指示（紅點 + 經過秒數），塞進 .hud 的 flex 列，跟 title 並排 */
  #recHud { display:none; align-items:center; gap:7px; font-size:12px; padding:6px 11px;
    border-radius:999px; background:rgba(70,20,20,.68); backdrop-filter:blur(10px);
    font-variant-numeric:tabular-nums; }
  #recHud.show { display:flex; }
  #recHud .dot { width:7px; height:7px; border-radius:50%; background:#ff5555;
    animation: recPulse 1.1s ease-in-out infinite; }
  @keyframes recPulse { 0%,100% { opacity:1; } 50% { opacity:.2; } }

  /* Task 16：錄製結果選單（▶ 重播 / 💾 下載 / ✕ 捨棄），同 #shotMenu 的浮動樣式 */
  #recResult { position:fixed; z-index:11; right:14px;
    top:calc(env(safe-area-inset-top) + 60px); flex-direction:column;
    background:rgba(14,17,16,.88); backdrop-filter:blur(14px); padding:9px;
    border-radius:14px; display:none; }
  #recResult.show { display:flex; }
  #recResult .chip { text-align:left; white-space:nowrap; }

  /* Task 16：重播進度條 + 停止鈕，重播期間繪圖輸入同時停用（main.js 端擋掉） */
  #replayBar { position:fixed; z-index:26; left:14px; right:14px;
    bottom:calc(env(safe-area-inset-bottom) + 14px); display:none;
    align-items:center; gap:10px; }
  #replayBar.show { display:flex; }
  #replayTrack { flex:1; height:6px; border-radius:999px; background:rgba(255,255,255,.14); overflow:hidden; }
  #replayFill { height:100%; width:0%; background:#4ade9f; }

  /* Task 17：影片輸出不支援時的一行說明，塞在 #recResult 選單裡的按鈕下面 */
  #videoUnsupportedHint { font-size:11px; line-height:1.4; color:#9aa8a3; max-width:170px;
    padding:2px 2px 0; }

  /* Task 17：影片輸出進度條——即時輸出，跟重播一樣長，一定要有進度＋可取消，不能靜默卡住 */
  #exportBar { position:fixed; z-index:27; left:14px; right:14px;
    bottom:calc(env(safe-area-inset-bottom) + 14px); display:none;
    flex-direction:column; gap:8px; background:rgba(14,17,16,.88); backdrop-filter:blur(14px);
    padding:12px 14px; border-radius:14px; }
  #exportBar.show { display:flex; }
  #exportBar .row { display:flex; align-items:center; gap:10px; }
  #exportBar .label { font-size:12px; color:#e8f4f0; flex:1; }
  #exportTrack { flex:1; height:6px; border-radius:999px; background:rgba(255,255,255,.14); overflow:hidden; }
  #exportFill { height:100%; width:0%; background:#4ade9f; }

  /* Task 19：新手引導 —— 頂部一條提示 + 略過鈕。pointer-events:none 在容器上，
     只有略過鈕自己開回 auto，這樣底下的畫布還是接得到手勢/觸控，不是蓋住畫面的 modal。 */
  #onboard { position:fixed; z-index:22; left:0; right:0;
    top:calc(env(safe-area-inset-top) + 100px); display:none;
    flex-direction:column; align-items:center; gap:10px; pointer-events:none; }
  #onboard.show { display:flex; }
  #onboardText { padding:10px 18px; border-radius:12px; background:rgba(14,17,16,.82);
    backdrop-filter:blur(10px); font-size:13.5px; line-height:1.6; text-align:center;
    max-width:82vw; box-shadow:inset 0 0 0 1.5px rgba(74,222,159,.5); }
  #onboardText b { color:#4ade9f; }
  #btnOnboardSkip { pointer-events:auto; padding:6px 14px; border-radius:999px;
    border:1px solid rgba(255,255,255,.2); background:rgba(14,17,16,.6); color:#e8f4f0;
    font-size:11.5px; opacity:.8; cursor:pointer; }

  /* Task 18：離線資料下載進度條 + 狀態文字，塞在參數面板「離線」區塊裡 */
  #offlineStatus { font-size:11.5px; opacity:.62; align-self:center; }
  #offlineTrack { display:none; height:6px; border-radius:999px; background:rgba(255,255,255,.14);
    overflow:hidden; margin:2px 0 4px; }
  #offlineTrack.show { display:block; }
  #offlineFill { height:100%; width:0%; background:#4ade9f; transition:width .15s; }