/* =============================================================
   DemoWrld v0.3 — 100% 全螢幕 Cyberpunk 全息投影 HUD
   (覆蓋 style.css 的版面設定)
   ============================================================= */
:root {
  --hud: #6ff7ff; --hud-dim: rgba(111, 247, 255, .35); --hud-faint: rgba(111, 247, 255, .12);
  --holo-bg: linear-gradient(160deg, rgba(6, 18, 28, .86), rgba(4, 8, 16, .78));
  --orb: 'Orbitron', 'JetBrains Mono', monospace;
  --cut: 14px;
}
body.hud { background: #020308; }
body.hud::after { opacity: .07; z-index: 45; }

/* ---------- 地球滿版 ---------- */
body.hud .globe { position: fixed; inset: 0; z-index: 1; }
body.hud .labels { position: fixed; inset: 0; z-index: 3; }

/* ---------- HUD 外框 ---------- */
.hud-frame { position: fixed; inset: 10px; z-index: 4; pointer-events: none; }
.hud-frame .cn { position: absolute; width: 46px; height: 46px; border-color: var(--hud-dim); border-style: solid; border-width: 0; }
.hud-frame .tl { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.hud-frame .tr { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.hud-frame .bl { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.hud-frame .br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
.ticks { position: absolute; opacity: .35; }
.ticks.top { top: 0; left: 30%; right: 30%; height: 6px; background: repeating-linear-gradient(90deg, var(--hud) 0 1px, transparent 1px 14px); }
.ticks.left, .ticks.right { top: 35%; bottom: 35%; width: 6px; background: repeating-linear-gradient(0deg, var(--hud) 0 1px, transparent 1px 14px); }
.ticks.left { left: 0; } .ticks.right { right: 0; }
.sweep { position: absolute; left: 0; right: 0; height: 120px; top: -120px; background: linear-gradient(180deg, transparent, rgba(111,247,255,.045), transparent); animation: sweep 7s linear infinite; }
@keyframes sweep { to { top: 100%; } }

.center-reticle { position: fixed; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; z-index: 4; pointer-events: none; opacity: .55; transition: opacity .3s, transform .3s; }
.center-reticle svg { width: 100%; height: 100%; animation: spin 30s linear infinite; }
.center-reticle .r1 { fill: none; stroke: var(--hud-dim); stroke-width: 1; stroke-dasharray: 3 9; }
.center-reticle .r2 { fill: none; stroke: var(--hud-faint); stroke-width: 1; }
.center-reticle .r3 { stroke: var(--hud-dim); stroke-width: 1.5; } .center-reticle .r4 { stroke: var(--accent); stroke-width: 1.5; }
.center-reticle .lock { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 6px; font: 600 10px var(--mono); letter-spacing: .18em; color: var(--accent); white-space: nowrap; text-shadow: 0 0 8px var(--accent); }
.center-reticle.locked { opacity: 1; transform: scale(1.15); } .center-reticle.locked .r1 { stroke: var(--accent); }

/* ---------- 頂部 ---------- */
body.hud .topbar { height: 58px; background: linear-gradient(180deg, rgba(2,3,8,.85), transparent); border-bottom: none; backdrop-filter: none; z-index: 25; gap: 16px; padding: 0 26px; }
body.hud .topbar::after { content: ''; position: absolute; left: 26px; right: 26px; bottom: 6px; height: 1px; background: linear-gradient(90deg, var(--hud-dim), transparent 30%, transparent 70%, var(--hud-dim)); }
body.hud .brand-name { font-family: var(--orb); letter-spacing: .3em; font-size: 15px; }
body.hud .brand-tag { color: var(--hud); border-color: var(--hud-dim); }
.geo-search { position: relative; flex: 1; max-width: 520px; margin: 0 auto; display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 36px; border: 1px solid var(--hud-dim); background: rgba(4, 14, 22, .65);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.geo-search:focus-within { border-color: var(--hud); box-shadow: 0 0 24px rgba(111,247,255,.18) inset; }
.gs-icon { color: var(--hud); font-size: 16px; }
.geo-search input { flex: 1; background: none; border: none; outline: none; font: 13px var(--font); min-width: 0; }
.geo-search input::placeholder { color: var(--dimmer); }
.geo-search kbd { font: 9px var(--mono); color: var(--hud-dim); border: 1px solid var(--hud-faint); padding: 2px 5px; }
.gs-results { position: absolute; left: -1px; right: -1px; top: 40px; background: rgba(4, 10, 18, .96); border: 1px solid var(--hud-dim); max-height: 360px; overflow-y: auto; z-index: 40; }
.gs-row { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; padding: 8px 12px; cursor: pointer; font-size: 13px; border-bottom: 1px solid var(--hud-faint); }
.gs-row:hover, .gs-row.sel { background: rgba(111,247,255,.1); }
.gs-row small { display: block; color: var(--dim); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-row .ll { font: 10px var(--mono); color: var(--hud-dim); text-align: right; }
.gs-row.osm { color: var(--hud); font: 12px var(--mono); grid-template-columns: 26px 1fr; }
.gs-row.node b { color: var(--accent2); }
.gs-empty { padding: 12px; font-size: 12px; color: var(--dim); }
.hud-toggle { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--hud-dim); background: rgba(4,14,22,.6); font-size: 12px; white-space: nowrap; }
.hud-toggle .sw { width: 26px; height: 13px; border-radius: 7px; background: rgba(255,255,255,.15); position: relative; transition: background .2s; }
.hud-toggle .sw::after { content: ''; position: absolute; left: 2px; top: 2px; width: 9px; height: 9px; border-radius: 50%; background: #aaa; transition: left .2s, background .2s; }
.hud-toggle.on { border-color: var(--hud); color: var(--hud); box-shadow: 0 0 18px rgba(111,247,255,.25); }
.hud-toggle.on .sw { background: rgba(111,247,255,.4); } .hud-toggle.on .sw::after { left: 15px; background: var(--hud); }
.hud-toggle.loading .sw::after { animation: blink .6s infinite; }
body.hud .up-top, body.hud .credit-chip { border-radius: 0; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }

/* 曲風宇宙切換器 */
body.hud .multiverse { position: fixed; top: 62px; left: 50%; transform: translateX(-50%); z-index: 24; display: flex; gap: 4px; }
body.hud .verse-btn { border-radius: 0; border: 1px solid var(--hud-faint); background: rgba(4,10,18,.55); font: 600 11px var(--orb); letter-spacing: .08em; padding: 7px 14px; backdrop-filter: blur(6px);
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
body.hud .verse-btn small { font-family: var(--mono); }
body.hud .verse-btn.on { border-color: var(--accent); color: #fff; background: color-mix(in srgb, var(--accent) 26%, rgba(4,10,18,.6)); box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 45%, transparent) inset; }

/* 左上數據 */
body.hud .hud-readout { position: fixed; top: 70px; left: 26px; z-index: 6; pointer-events: none; text-align: left; transform: none; bottom: auto; padding: 0; background: none; border-radius: 0; }
.hud-readout .no { font: 600 10px var(--mono); letter-spacing: .35em; color: var(--hud); }
.hud-readout h1 { font: 900 22px var(--orb); letter-spacing: .12em; margin: 3px 0; text-shadow: 0 0 18px var(--accent); }
.hud-readout p { margin: 0; font: 11px var(--mono); color: var(--dim); }
.hud-readout.flash { animation: flash .9s; }
.hud-data { position: fixed; right: 26px; top: 108px; z-index: 6; pointer-events: none; font: 10px/1.75 var(--mono); color: var(--hud-dim); text-align: right; letter-spacing: .08em; }
.hud-data b { color: var(--hud); font-weight: 600; } .hud-data .warn { color: var(--warn); } .hud-data .ok { color: var(--ok); }
body.right-open .hud-data { opacity: 0; }

/* 左側圖示列 */
.hud-rail { position: fixed; left: 14px; top: 50%; transform: translateY(-50%); z-index: 26; display: flex; flex-direction: column; gap: 6px; }
.hud-rail button { width: 50px; height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border: 1px solid var(--hud-faint); background: rgba(4,10,18,.6); backdrop-filter: blur(6px); transition: all .2s;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.hud-rail button span { font-size: 17px; filter: grayscale(.4); } .hud-rail button small { font: 700 7.5px var(--orb); letter-spacing: .12em; color: var(--dim); }
.hud-rail button:hover { border-color: var(--hud-dim); background: rgba(111,247,255,.08); }
.hud-rail button.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, rgba(4,10,18,.6)); box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 40%, transparent); }
.hud-rail button.on span { filter: none; } .hud-rail button.on small { color: #fff; }
.hud-rail button .dot { position: absolute; } .rail-sep { height: 1px; background: var(--hud-faint); margin: 4px 6px; }

/* ---------- 全息抽屜 ---------- */
body.hud .panel { border-radius: 0; background: var(--holo-bg); border: 1px solid color-mix(in srgb, var(--hud) 30%, transparent); box-shadow: 0 0 40px rgba(0,0,0,.6), 0 0 30px rgba(111,247,255,.06) inset; backdrop-filter: blur(16px) saturate(1.2);
  clip-path: polygon(0 var(--cut), var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); }
.drawer { position: fixed !important; z-index: 22; top: 112px; bottom: 118px; opacity: 0; pointer-events: none; transition: transform .5s cubic-bezier(.16,1,.3,1), opacity .25s; display: flex; flex-direction: column; overflow: hidden; }
.drawer.left { left: 76px !important; width: 360px !important; max-height: none !important; transform: translateX(calc(-100% - 90px)); }
.drawer.right { right: 14px !important; left: auto !important; width: 420px !important; transform: translateX(calc(100% + 30px)); }
.drawer.open { transform: none; opacity: 1; pointer-events: auto; animation: holo-in .5s; }
@keyframes holo-in { 0% { filter: brightness(2.2) blur(3px); } 18% { opacity: .5; } 26% { opacity: .9; } 34% { opacity: .4; } 60% { filter: none; } }
.drawer::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 5; background: repeating-linear-gradient(0deg, rgba(111,247,255,.035) 0 1px, transparent 1px 3px); }
.drawer::after { content: ''; position: absolute; top: 0; left: var(--cut); right: 30%; height: 2px; background: linear-gradient(90deg, var(--accent), transparent); z-index: 6; }
body.hud #cityCard { padding: 14px; overflow-y: auto; display: block; }
body.hud #cityCard.drawer { display: block; } body.hud #cityCard.drawer:not(.open) { visibility: hidden; transition: transform .5s cubic-bezier(.16,1,.3,1), opacity .25s, visibility 0s .5s; }
body.hud #cityCard.open { visibility: visible; }
body.hud #leaderboard .lb-list { flex: 1; }
.drawer-bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px 6px 18px; font: 600 10px var(--mono); letter-spacing: .25em; color: var(--hud); }
.drawer-bar .x-btn, body.hud .x-btn { border-radius: 0; border-color: var(--hud-dim); color: var(--hud); font: 11px var(--mono); }
body.hud .lb-head { border-bottom-color: var(--hud-faint); }
body.hud .lb-head h3, body.hud .sec-t { font-family: var(--mono); color: var(--hud); letter-spacing: .2em; }
body.hud .tabs { border-bottom-color: var(--hud-faint); }
body.hud .tabs button { font: 600 11px var(--mono); letter-spacing: .05em; }
body.hud .tabs button.on { color: var(--hud); border-bottom-color: var(--hud); text-shadow: 0 0 8px var(--hud); }
body.hud .lb-rank, body.hud .lb-s, body.hud .cc-sub, body.hud .stat b, body.hud .reward { font-family: var(--mono); }
body.hud .btn, body.hud .lab-card, body.hud .vault-item, body.hud .list-row, body.hud .stat, body.hud .now-card, body.hud .inp, body.hud .cf-chip, body.hud .cf-q, body.hud .cf-bpm, body.hud .priv-opt, body.hud .seg, body.hud .seg button, body.hud .radio-btn, body.hud .drop, body.hud .ab-btn, body.hud .ver, body.hud .stem, body.hud .subtabs button, body.hud .demo-item, body.hud .tag-chip, body.hud .composer textarea { border-radius: 0; }
body.hud .btn.pri { clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
body.hud .radio-btn { clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
body.hud .row-demo { border-bottom-color: var(--hud-faint); border-radius: 0; }
body.hud .avatar { border-radius: 0; clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }

/* ---------- 搜尋目標卡 ---------- */
.target-card { position: fixed; z-index: 23; top: 108px; left: 50%; transform: translateX(-50%); width: 420px; padding: 12px 14px; background: var(--holo-bg); border: 1px solid var(--hud); backdrop-filter: blur(12px);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); animation: holo-in .5s; }
.target-card .tc-k { font: 600 9px var(--mono); letter-spacing: .3em; color: var(--hud); }
.target-card .tc-n { font-size: 18px; font-weight: 700; margin: 3px 0 2px; } .target-card .tc-n small { font-size: 12px; color: var(--dim); font-weight: 400; margin-left: 6px; }
.target-card .tc-m { font: 11px var(--mono); color: var(--dim); }
.target-card .tc-b { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.target-card .x-btn { position: absolute; right: 10px; top: 10px; }

/* ---------- 懸浮音波條 ---------- */
body.hud .player { left: 50%; right: auto; transform: translateX(-50%); bottom: 18px; width: min(1180px, calc(100vw - 150px)); height: 88px; padding: 0 18px; border: 1px solid color-mix(in srgb, var(--hud) 28%, transparent); background: linear-gradient(180deg, rgba(4,12,20,.82), rgba(2,6,12,.9)); backdrop-filter: blur(14px);
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%, 0 16px); grid-template-columns: 250px 140px 1fr 260px; }
body.hud .player::before { opacity: 1; height: 2px; }
body.hud .p-cover { border-radius: 0; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); width: 54px; height: 54px; }
body.hud .p-title { font-family: var(--font); } body.hud .p-time { color: var(--hud-dim); }
body.hud .p-btn { border-radius: 0; border-color: var(--hud-dim); clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
body.hud .p-btn.play { width: 48px; height: 48px; }
body.hud .quick-tags button, body.hud .rec-btn { border-radius: 0; border-color: var(--hud-faint); }

/* ---------- 其他 ---------- */
body.hud .zoom-ctrl { position: fixed; right: 22px; bottom: 124px; z-index: 20; }
body.right-open .zoom-ctrl { right: 450px; }
body.hud .zoom-ctrl button { border-radius: 0; border-color: var(--hud-dim); color: var(--hud); }
body.hud .hint { position: fixed; top: auto; bottom: 112px; z-index: 5; font: 10px var(--mono); color: var(--hud-dim); letter-spacing: .15em; }
body.hud .globe-label { border-radius: 0; font-family: var(--mono); background: rgba(2,8,14,.8); border-color: var(--hud-faint); clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%, 0 6px); }
body.hud .toast { border-radius: 0; font-family: var(--font); background: rgba(4,12,20,.95); border-color: var(--hud-dim); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
body.hud .toasts { top: 112px; }
body.hud .modal-box { border-radius: 0; background: rgba(4,12,20,.97); border-color: var(--hud-dim); clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); }
body.hud .modal-box h2 { font-family: var(--orb); font-size: 16px; letter-spacing: .06em; color: var(--hud); }

/* ---------- 手勢 HUD ---------- */
.gesture-hud { position: fixed; z-index: 27; right: 22px; bottom: 124px; width: 252px; padding: 6px; background: var(--holo-bg); border: 1px solid var(--hud); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); animation: holo-in .5s; }
body.right-open .gesture-hud { right: 450px; }
body.hud .gesture-hud ~ .zoom-ctrl { }
.gh-bar { display: flex; justify-content: space-between; font: 600 9px var(--mono); letter-spacing: .25em; color: var(--hud); padding: 2px 4px 5px; }
.gh-bar b { color: var(--accent2); }
#gCanvas { width: 240px; height: 180px; display: block; background: #01060a; }
.gh-help { font-size: 10px; color: var(--dim); padding: 5px 4px 2px; }
.gh-status { font: 9px var(--mono); color: var(--hud-dim); padding: 0 4px 2px; letter-spacing: .15em; }
.g-reticle { position: fixed; z-index: 48; left: 0; top: 0; width: 56px; height: 56px; margin: -28px 0 0 -28px; pointer-events: none; }
.g-reticle i { position: absolute; inset: 0; border: 2px solid var(--hud); border-radius: 50%; box-shadow: 0 0 14px var(--hud); }
.g-reticle i::before, .g-reticle i::after { content: ''; position: absolute; background: var(--hud); }
.g-reticle i::before { left: 50%; top: -10px; bottom: -10px; width: 2px; margin-left: -1px; } .g-reticle i::after { top: 50%; left: -10px; right: -10px; height: 2px; margin-top: -1px; }
.g-reticle b { position: absolute; left: 64px; top: 16px; font: 700 11px var(--mono); color: var(--accent2); white-space: nowrap; letter-spacing: .12em; text-shadow: 0 0 8px var(--accent); }
.g-reticle.lock i { border-color: var(--accent2); box-shadow: 0 0 22px var(--accent2); transform: scale(.75); transition: transform .15s; }
.g-reticle.pinch i { transform: scale(.45); background: color-mix(in srgb, var(--accent2) 30%, transparent); }
.g-reticle.mode-ROTATE i { border-style: dashed; animation: spin 2s linear infinite; }

@media (max-width: 1280px) { body.hud .player { grid-template-columns: 200px 130px 1fr 230px; } .geo-search kbd { display: none; } .hud-toggle { font-size: 11px; padding: 7px 9px; } }
.up-city { position: relative; } .up-city .gs-results { top: 58px; }


/* v0.5 手勢 HUD 設定 */
.gh-tip { font-size: 11px; color: var(--accent2); padding: 5px 4px 0; min-height: 18px; }
.gh-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; }
.gh-modes button { padding: 5px; font-size: 11px; border: 1px solid var(--hud-faint); background: none; }
.gh-modes button.on { border-color: var(--hud); color: var(--hud); background: rgba(111,247,255,.1); }
.gh-slider { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 6px; font: 10px var(--mono); color: var(--dim); padding: 1px 4px; }
.gh-slider input { accent-color: var(--hud); width: 100%; }
.g-hover { outline: 2px solid var(--hud) !important; outline-offset: 1px; box-shadow: 0 0 14px rgba(111,247,255,.5) !important; }
.g-reticle.mode-CLUTCH i { border-color: rgba(255,255,255,.35); box-shadow: none; }
.g-reticle.mode-DRAG i { border-style: dashed; animation: spin 2s linear infinite; }
.g-reticle.mode-ZOOM i { border-radius: 0; }

/* v0.5 登入 + 私訊 */
body.hud .tabs { grid-template-columns: repeat(5, 1fr); }
body.hud .tabs button { font-size: 10.5px; padding: 12px 2px; }
.tabs .badge.hidden, .rail-badge.hidden { display: none; }
.rail-badge { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; font: 700 9px/16px var(--mono); font-style: normal; color: #000; background: var(--accent2); border-radius: 8px; box-shadow: 0 0 8px var(--accent2); }
.hud-rail button { position: relative; }
body.hud .me-avatar { border: none; cursor: pointer; font: 700 14px var(--orb); }
body.hud .me-avatar:not(.authed) { background: rgba(255,255,255,.12); color: var(--dim); box-shadow: inset 0 0 0 1px var(--hud-dim); }
body.hud .me-avatar.authed { box-shadow: 0 0 0 2px var(--ok), 0 0 14px var(--ok); }
.au-msg { font-size: 12px; line-height: 1.6; min-height: 18px; margin-top: 4px; } .au-msg.err { color: #ff7aa8; } .au-msg.ok { color: var(--ok); }
.dm-status { font-size: 11.5px; color: var(--dim); padding: 8px 10px; border: 1px dashed var(--hud-faint); margin-bottom: 10px; line-height: 1.5; } .dm-status.ok { color: var(--ok); border-color: rgba(61,255,168,.3); } .dm-status a { color: var(--hud); }
.dm-new { position: relative; margin-bottom: 8px; } .dm-new .gs-results { top: 40px; }
.dm-row { display: flex; gap: 10px; align-items: center; padding: 10px 6px; border-bottom: 1px solid var(--hud-faint); cursor: pointer; }
.dm-row:hover { background: rgba(111,247,255,.05); } .dm-row.unread .dm-n { color: #fff; } .dm-row.unread .dm-p { color: var(--text); }
.dm-row .avatar.xs, .dm-head .avatar.xs { width: 34px; height: 34px; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #000; font-weight: 700; flex-shrink: 0; }
.dm-n { font-weight: 600; font-size: 13px; } .dm-p { font-size: 11.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.dm-r { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; } .dm-r small { font-size: 10px; color: var(--dimmer); }
.dm-r .badge { min-width: 18px; padding: 1px 5px; border-radius: 9px; background: var(--accent); color: #000; font: 700 10px var(--mono); text-align: center; }
.dm-head { display: flex; gap: 8px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--hud-faint); }
.dm-msgs { height: calc(100vh - 530px); min-height: 200px; overflow-y: auto; padding: 12px 2px; display: flex; flex-direction: column; gap: 8px; }
.dm-msg { max-width: 82%; align-self: flex-start; display: flex; flex-direction: column; gap: 3px; }
.dm-msg.mine { align-self: flex-end; align-items: flex-end; }
.dm-body { padding: 8px 11px; font-size: 13px; line-height: 1.5; background: rgba(255,255,255,.06); border: 1px solid var(--hud-faint); white-space: pre-wrap; word-break: break-word; }
.dm-msg.mine .dm-body { background: color-mix(in srgb, var(--accent) 22%, transparent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.dm-time { font: 9.5px var(--mono); color: var(--dimmer); }
.dm-sys { align-self: center; font-size: 11px; color: var(--hud); padding: 4px 10px; border: 1px dashed var(--hud-faint); }
.dm-card { padding: 10px 11px; border: 1px solid var(--hud-dim); background: rgba(4,14,22,.8); font-size: 12px; min-width: 220px; }
.dm-card .dm-body { background: none; border: none; padding: 6px 0 0; }
.dm-card.demo { display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.dc-k { font: 600 9px var(--mono); letter-spacing: .25em; color: var(--hud); } .dc-t { font-weight: 600; font-size: 13px; margin-top: 2px; } .dc-m { font-size: 11px; color: var(--dim); margin-top: 2px; }
.dc-st { font-size: 11px; margin-top: 6px; color: var(--warn); } .dc-st.accepted { color: var(--ok); } .dc-st.declined { color: #ff7aa8; }
.dc-b { display: flex; gap: 6px; margin-top: 8px; }
.dm-msg.typing .dm-body { display: flex; gap: 4px; padding: 11px 14px; } .dm-msg.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--hud); animation: blink 1s infinite; } .dm-msg.typing i:nth-child(2) { animation-delay: .2s; } .dm-msg.typing i:nth-child(3) { animation-delay: .4s; }
.dm-compose { border-top: 1px solid var(--hud-faint); padding-top: 10px; }
.dm-compose textarea { resize: none; }
.dm-tools { display: flex; gap: 6px; margin-top: 6px; } .dm-tools select { flex: 1; min-width: 0; }

/* ===================== v0.6 ◈ NOVA 全息管家 ===================== */
.nova-orb { position: fixed; left: 10px; bottom: 112px; z-index: 28; width: 58px; height: 74px; border: none; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.nova-orb canvas { width: 58px; height: 58px; filter: drop-shadow(0 0 10px var(--hud)); transition: transform .25s; }
.nova-orb span { font: 700 8px var(--orb); letter-spacing: .3em; color: var(--hud); margin-top: -2px; }
.nova-orb:hover canvas, .nova-orb.on canvas { transform: scale(1.12); }
.nova-orb.alert canvas { filter: drop-shadow(0 0 14px var(--warn)); }
.nova-panel { position: fixed; z-index: 29; left: 76px; bottom: 118px; width: 400px; height: min(560px, calc(100vh - 250px)); display: flex; flex-direction: column; background: var(--holo-bg); border: 1px solid var(--hud); backdrop-filter: blur(16px);
  clip-path: polygon(0 14px, 14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); animation: holo-in .5s; box-shadow: 0 0 40px rgba(111,247,255,.12) inset; }
.nova-panel::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(111,247,255,.035) 0 1px, transparent 1px 3px); }
.nova-panel.listening { border-color: var(--accent2); box-shadow: 0 0 30px color-mix(in srgb, var(--accent2) 40%, transparent); }
.nova-panel .drawer-bar b { color: var(--accent2); font-weight: 600; }
.nv-bar-btns { display: flex; gap: 6px; } .nv-bar-btns button:not(.x-btn) { background: none; border: 1px solid var(--hud-faint); width: 26px; height: 26px; }
.nv-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--hud-faint); }
.nv-tabs button { background: none; border: none; padding: 9px; font: 600 11px var(--mono); color: var(--dim); border-bottom: 2px solid transparent; }
.nv-tabs button.on { color: var(--hud); border-bottom-color: var(--hud); }
.nv-tabs i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--dimmer); margin-left: 4px; } .nv-tabs i.on { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.nv-view { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.nv-view[data-view="agent"] { overflow-y: auto; padding: 12px 14px; display: block; }
.nv-log { flex: 1; overflow-y: auto; padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.nv-line { font-size: 13px; line-height: 1.55; } .nv-line > span { display: block; font: 600 9.5px var(--mono); letter-spacing: .15em; color: var(--hud); margin-bottom: 1px; }
.nv-line.user { align-self: flex-end; text-align: right; max-width: 85%; } .nv-line.user > span { color: var(--dim); }
.nv-line.agent { padding: 6px 9px; border-left: 2px solid var(--warn); background: rgba(255,207,77,.05); font-size: 12px; } .nv-line.agent > span { color: var(--warn); }
.nv-line ol { margin: 5px 0 0; padding-left: 18px; font-size: 12px; } .nv-line li { cursor: pointer; padding: 1px 0; } .nv-line li:hover { color: var(--hud); } .nv-line li small { color: var(--dim); }
.nv-pending:empty { display: none; } .nv-pending { padding: 0 12px; }
.nv-req { border: 1px solid var(--warn); background: rgba(255,207,77,.08); padding: 9px 10px; margin-bottom: 8px; font-size: 12px; animation: holo-in .4s; }
.nv-req-k { font: 600 10px var(--mono); color: var(--warn); letter-spacing: .08em; margin-bottom: 3px; } .nv-req-b { display: flex; gap: 6px; margin-top: 7px; }
.nv-sugs { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 12px; border-top: 1px solid var(--hud-faint); }
.nv-sugs button { font-size: 10.5px; padding: 3px 8px; border: 1px solid var(--hud-faint); background: none; color: var(--dim); }
.nv-sugs button:hover { color: var(--hud); border-color: var(--hud-dim); }
.nv-input { display: flex; gap: 6px; padding: 8px 12px 12px; }
.nv-input input { flex: 1; min-width: 0; background: rgba(0,0,0,.4); border: 1px solid var(--hud-dim); padding: 9px 10px; font-size: 13px; outline: none; }
.nv-input input:focus { border-color: var(--hud); }
.nv-input button { width: 38px; border: 1px solid var(--hud-dim); background: rgba(111,247,255,.08); font-size: 15px; }
.nv-mic.off { opacity: .35; } .nova-panel.listening .nv-mic { background: var(--accent2); color: #000; animation: blink .8s infinite; }
.nova-caption { position: fixed; left: 50%; transform: translateX(-50%); bottom: 112px; z-index: 30; max-width: min(760px, 70vw); padding: 7px 16px; font-size: 13px; background: rgba(2,10,16,.9); border: 1px solid var(--hud-dim); pointer-events: none;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); text-align: center; }
.nova-caption b { font: 700 10px var(--orb); letter-spacing: .25em; color: var(--hud); margin-right: 8px; }
.nova-caption.flash { animation: holo-in .45s; }
body.hud .nova-caption:not(.hidden) ~ .hint { opacity: 0; }
.nv-agent-intro { font-size: 12px; color: var(--dim); line-height: 1.65; } .nv-agent-intro b { color: var(--text); }
.nv-link-st { margin-top: 10px; font: 11px var(--mono); padding: 7px 9px; border: 1px dashed var(--hud-faint); color: var(--dim); } .nv-link-st.ok { color: var(--ok); border-color: rgba(61,255,168,.35); } .nv-link-st code { color: var(--hud); }
.nv-ex { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; } .nv-ex button { font: 10px var(--mono); padding: 3px 7px; border: 1px solid var(--hud-faint); background: none; color: var(--hud); }
#novaSim { font: 11px/1.5 var(--mono); resize: vertical; }
.nv-sim-b { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.nv-manifest { display: flex; flex-direction: column; gap: 3px; } .nv-manifest > div { display: grid; grid-template-columns: 150px 64px 1fr; gap: 6px; font-size: 11px; align-items: baseline; padding: 3px 0; border-bottom: 1px solid var(--hud-faint); }
.nv-manifest code { font: 10.5px var(--mono); color: var(--hud); } .nv-manifest .safe { color: var(--ok); font-size: 10px; } .nv-manifest .confirm { color: var(--warn); font-size: 10px; } .nv-manifest small { color: var(--dim); }

.nova-panel { background: linear-gradient(160deg, rgba(5,16,26,.97), rgba(3,7,14,.95)); }
body.nova-open .drawer.left { left: 488px !important; }
body.nova-open .hud-readout { opacity: .25; }

.pw-wrap { position: relative; } .pw-wrap .inp { padding-right: 42px; }
.pw-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 34px; height: 30px; border: none; background: none; font-size: 15px; cursor: pointer; opacity: .75; } .pw-eye:hover { opacity: 1; }

/* ===================== v0.7 個人頁 / 社群 / 追蹤 ===================== */
.me-banner { font-size: 11.5px; color: var(--hud); padding: 7px 10px; border: 1px dashed var(--hud-dim); margin-bottom: 12px; }
.avatar.img { padding: 0; overflow: hidden; background: #000; } .avatar.img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.soc-row { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 10px; }
.soc { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; font-size: 11.5px; color: var(--text); text-decoration: none; border: 1px solid var(--hud-dim); background: rgba(111,247,255,.06); clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.soc:hover { border-color: var(--hud); background: rgba(111,247,255,.15); color: #fff; }
.soc.empty-soc { color: var(--dim); border-style: dashed; cursor: pointer; }
.prof-btns.three { grid-template-columns: 1fr 1fr 1fr; }
a.btn { text-decoration: none; }
.pe-top { display: flex; gap: 14px; align-items: flex-start; } .pe-top .grow { flex: 1; min-width: 0; }
.pe-avatar { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; } .pe-avatar small { font-size: 10px; color: var(--hud); }
.pe-avatar:hover .avatar { filter: brightness(1.2); outline: 1px solid var(--hud); }
.pe-soc { display: grid; grid-template-columns: 118px 1fr; gap: 8px; align-items: center; margin-bottom: 5px; font-size: 12px; }
.inp.bad { border-color: #ff7aa8 !important; background: rgba(255,122,168,.08); }
.pe-row { display: flex; gap: 4px; margin-bottom: 5px; align-items: center; } .pe-row .inp { flex: 1; min-width: 0; }
.pe-row .w60 { flex: 0 0 58px; } .pe-row .w90 { flex: 0 0 86px; } .pe-row .w130 { flex: 0 0 128px; }
.pe-row .x-btn { flex: 0 0 26px; }
.pe-foot { display: flex; justify-content: flex-end; gap: 8px; position: sticky; bottom: -16px; padding: 12px 0; background: linear-gradient(transparent, rgba(4,8,16,.95) 30%); }
body.hud .me-avatar.has-img { background-size: cover; background-position: center; }

#sideBody a:not(.btn):not(.soc) { color: var(--hud); text-decoration: none; border-bottom: 1px dotted var(--hud-dim); }
#sideBody a.btn { color: var(--text); }

/* ===================== v0.8 語言 / 通知 / 翻譯 / 喚醒詞 ===================== */
.lang-sel { background: rgba(4,14,22,.6); border: 1px solid var(--hud-dim); color: var(--hud); font: 600 11px var(--mono); padding: 7px 6px; cursor: pointer; }
.bell-btn { position: relative; width: 36px; height: 34px; border: 1px solid var(--hud-dim); background: rgba(4,14,22,.6); font-size: 15px; }
.bell-btn .rail-badge { top: -5px; right: -6px; }
.bell-btn.ring { animation: ring .6s; } @keyframes ring { 20% { transform: rotate(-18deg); } 40% { transform: rotate(14deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(4deg); } }
.noti-panel { position: fixed; z-index: 40; top: 58px; right: 150px; width: 360px; max-height: min(520px, calc(100vh - 200px)); display: flex; flex-direction: column; background: linear-gradient(160deg, rgba(5,16,26,.97), rgba(3,7,14,.96)); border: 1px solid var(--hud); backdrop-filter: blur(14px);
  clip-path: polygon(0 12px, 12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); animation: holo-in .4s; }
.noti-list { overflow-y: auto; padding: 4px 8px 10px; }
.noti-row { display: flex; gap: 10px; align-items: flex-start; padding: 9px 6px; border-bottom: 1px solid var(--hud-faint); cursor: pointer; font-size: 12.5px; line-height: 1.45; }
.noti-row:hover { background: rgba(111,247,255,.06); } .noti-row.unread .nt { color: #fff; font-weight: 600; } .noti-row:not(.unread) { opacity: .65; }
.noti-row .ni { font-size: 16px; } .noti-row small { font: 10px var(--mono); color: var(--dimmer); }
.noti-row.unread::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent2); box-shadow: 0 0 6px var(--accent2); margin-top: 6px; flex-shrink: 0; }
.tr-btn { background: none; border: none; color: var(--hud); font-size: 10.5px; padding: 2px 0; cursor: pointer; opacity: .8; } .tr-btn:hover { opacity: 1; text-decoration: underline; }
.dm-meta { display: flex; gap: 8px; align-items: center; } .dm-msg.mine .dm-meta { justify-content: flex-end; }
.tr-note { font-size: 9.5px; color: var(--hud-dim); margin-top: 2px; }
.nv-bar-btns button.on { border-color: var(--accent2); color: var(--accent2); box-shadow: 0 0 10px color-mix(in srgb, var(--accent2) 40%, transparent); }
.nova-orb.wake canvas { filter: drop-shadow(0 0 10px var(--accent2)); }
.nova-orb.wake span::after { content: ' 👂'; }
.nv-tabs i.wait { background: var(--warn); box-shadow: 0 0 6px var(--warn); }
.nv-link-st.connected { color: var(--ok); border-color: rgba(61,255,168,.35); } .nv-link-st.waiting { color: var(--warn); border-color: rgba(255,207,77,.35); }
@media (max-width: 1400px) { .hud-toggle { font-size: 11px; padding: 7px 8px; } .geo-search { max-width: 360px; } .noti-panel { right: 120px; } }

/* ===== v0.9 八顆地球 / 子曲風 / 跨界 / 自動賺 Credit ===== */
body.hud .multiverse { width: max-content; max-width: calc(100vw - 40px); flex-wrap: wrap; justify-content: center; gap: 3px; }
body.hud .verse-btn { padding: 6px 10px; font-size: 10px; letter-spacing: .05em; gap: 6px; }
body.hud .verse-btn small { display: none; }
@media (max-width: 1100px) { body.hud .verse-btn { padding: 5px 8px; font-size: 9px; } }
.cf-row.sub-row { grid-template-columns: 1fr; margin-top: 6px; }
.cf-sub { background: rgba(0,0,0,.35); border: 1px solid var(--line2); padding: 7px 9px; font-size: 12px; min-width: 0; color: var(--text); }
.rd-tags .t.sub { color: var(--accent2); background: color-mix(in srgb, var(--accent2) 12%, transparent); }
.rd-tags .t.cross { color: #ffcf4d; background: rgba(255,207,77,.08); border: 1px dashed rgba(255,207,77,.4); }
.sub2-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sub-hint { font-size: 11px; color: var(--dim); margin-top: 6px; line-height: 1.6; } .sub-hint b { color: var(--accent2); } .sub-hint small { color: var(--dimmer); }
.me-banner { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.econ small { display: block; margin-top: 3px; color: var(--dimmer); font-size: 10px; }

/* ===== v0.10 照距離切換：軌道（星際效應）⇄ 城市（Cyberpunk） ===== */
@property --hud { syntax: '<color>'; inherits: true; initial-value: #6ff7ff; }
@property --hud-dim { syntax: '<color>'; inherits: true; initial-value: rgba(111,247,255,.35); }
@property --hud-faint { syntax: '<color>'; inherits: true; initial-value: rgba(111,247,255,.12); }
body.hud { transition: --hud .9s, --hud-dim .9s, --hud-faint .9s; }
body.hud.orbit { --hud: #f3e6cc; --hud-dim: rgba(243,230,204,.3); --hud-faint: rgba(243,230,204,.1);
  --holo-bg: linear-gradient(160deg, rgba(16,15,14,.8), rgba(8,8,9,.72)); --orb: 'Inter', 'Noto Sans TC', sans-serif; }
body.hud.orbit .verse-btn, body.hud.orbit #earthTitle h1, body.hud.orbit .brand-name { font-weight: 300; letter-spacing: .2em; }
body.hud.orbit #earthTitle h1 { font-weight: 200; }
.hud-frame, .center-reticle { filter: opacity(calc(.12 + var(--street, 1) * .88)); transition: filter .4s; }
body.hud .globe { background: transparent; }
.nebula { position: absolute; inset: -4%; width: 108%; height: 108%; opacity: 0; transition: opacity 1.4s ease; filter: blur(2px) saturate(1.05); pointer-events: none; z-index: 0; will-change: opacity, transform; }

/* CRT 掃描線 + 雜訊：只在城市層出現 */
#crt { position: fixed; inset: 0; pointer-events: none; z-index: 44; opacity: calc(var(--street, 0) * var(--street, 0) * .6);
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.32) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }
#crt::after { content: ''; position: absolute; left: 0; right: 0; height: 140px; top: -140px; background: linear-gradient(transparent, rgba(160,255,255,.05), transparent); mix-blend-mode: screen; animation: crtRoll 7.5s linear infinite; }
#crt::before { content: ''; position: absolute; left: 0; right: 0; top: var(--gy, 40%); height: 0; background: rgba(255,40,160,.16); mix-blend-mode: screen; }
@keyframes crtRoll { to { top: 100%; } }
body.glitch #crt::before { height: 7px; box-shadow: 0 13px 0 rgba(40,230,255,.12), 0 -21px 0 rgba(255,40,160,.08); }
body.glitch .topbar, body.glitch #earthTitle, body.glitch .globe-label.active { animation: dwGlitch .2s steps(2) 1; }
@keyframes dwGlitch { 0% { transform: translateX(0); text-shadow: none; } 33% { transform: translateX(-3px); text-shadow: 2px 0 rgba(255,40,140,.8), -2px 0 rgba(40,230,255,.8); } 66% { transform: translateX(2px); text-shadow: -2px 0 rgba(255,40,140,.7), 2px 0 rgba(40,230,255,.7); } 100% { transform: translateX(0); text-shadow: none; } }
@media (prefers-reduced-motion: reduce) { #crt::after { animation: none; display: none; } body.glitch .topbar, body.glitch #earthTitle { animation: none; } }

/* 城市層：動態鎖定準星游標 */
body.street .globe canvas { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cg fill='none' stroke='%23ff3df0' stroke-width='1.4'%3E%3Cpath d='M4 10V4h6M22 4h6v6M28 22v6h-6M10 28H4v-6'/%3E%3C/g%3E%3Ccircle cx='16' cy='16' r='1.6' fill='%2328e6ff'/%3E%3C/svg%3E") 16 16, crosshair !important; }
body.street.node-hover .globe canvas { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cg fill='none' stroke='%2328e6ff' stroke-width='1.6'%3E%3Cpath d='M8 12V8h4M20 8h4v4M24 20v4h-4M12 24H8v-4'/%3E%3Ccircle cx='16' cy='16' r='5' stroke-dasharray='3 2'/%3E%3C/g%3E%3Ccircle cx='16' cy='16' r='2' fill='%23ff3df0'/%3E%3C/svg%3E") 16 16, pointer !important; }

/* 懸停試聽 */
#hoverToggle i { font-style: normal; font: 600 9px var(--mono); letter-spacing: .14em; color: var(--hud-dim); }
#hoverToggle.on { border-color: var(--accent); } #hoverToggle.on i { color: var(--accent); }
.hover-card { position: fixed; z-index: 30; width: 250px; padding: 10px 12px 12px; pointer-events: none; background: rgba(8,4,16,.82); border: 1px solid var(--hud-faint); backdrop-filter: blur(8px); font-size: 12px; transition: opacity .15s; }
.hover-card::before, .hover-card::after { content: ''; position: absolute; width: 10px; height: 10px; border: 0 solid var(--accent); }
.hover-card::before { left: -1px; top: -1px; border-width: 1px 0 0 1px; } .hover-card::after { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; }
.hover-card .hc-k { font: 600 9px var(--mono); letter-spacing: .24em; color: var(--accent); }
.hover-card .hc-t { font-size: 14px; color: #fff; margin: 5px 0 2px; } .hover-card .hc-a { font-size: 10.5px; color: var(--dim); }
.hover-card .hc-bar { height: 2px; background: rgba(255,255,255,.1); margin-top: 9px; position: relative; overflow: hidden; }
.hover-card .hc-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent); }
.hover-card.playing .hc-bar i { width: 100%; transition: width 3s linear; } .hover-card.done .hc-bar i { width: 100%; }
.hover-card .hc-st { font: 9.5px var(--mono); letter-spacing: .1em; color: var(--dimmer); margin-top: 6px; }
body.orbit .hover-card { background: rgba(14,13,12,.82); }

/* ===== v0.10b 軌道層 = 星際效應介面（照概念圖：無框、細字、暖白 + 琥珀） ===== */
body.hud.orbit { --accent: #e8c98f; --accent2: #f3e6cc; --hud: #f3e6cc; --font-thin: 'Inter', 'Noto Sans TC', sans-serif; }
body.hud.orbit .hud-frame, body.hud.orbit .center-reticle { opacity: 0; }
body.hud .hud-frame, body.hud .center-reticle { transition: opacity .6s; }
body.hud.orbit .topbar { background: linear-gradient(180deg, rgba(2,2,3,.55), transparent); }
body.hud.orbit .topbar::after { opacity: 0; }
body.hud.orbit .brand-name { font: 200 17px var(--font-thin); letter-spacing: .55em; } body.hud.orbit .brand-name b { font-weight: 200; color: inherit; }
body.hud.orbit .brand .orb { filter: grayscale(.6) brightness(1.1); }
body.hud.orbit .brand-tag { border-color: transparent; color: rgba(243,230,204,.4); font-weight: 400; }
body.hud.orbit .geo-search { border: none; border-bottom: 1px solid rgba(243,230,204,.14); background: transparent; clip-path: none; }
body.hud.orbit .geo-search input { font-family: var(--font-thin); font-weight: 300; letter-spacing: .04em; }
body.hud.orbit .geo-search kbd, body.hud.orbit .gs-icon { color: rgba(243,230,204,.4); border-color: transparent; }
body.hud.orbit .lang-sel, body.hud.orbit .bell-btn, body.hud.orbit .hud-toggle, body.hud.orbit .up-top, body.hud.orbit .credit-chip {
  background: transparent; border: 1px solid transparent; clip-path: none; border-radius: 0; color: rgba(243,230,204,.72); font-family: var(--font-thin); font-weight: 300; letter-spacing: .08em; box-shadow: none; }
body.hud.orbit .lang-sel:hover, body.hud.orbit .bell-btn:hover, body.hud.orbit .hud-toggle:hover, body.hud.orbit .up-top:hover { border-bottom-color: rgba(232,201,143,.6); background: transparent; }
body.hud.orbit .hud-toggle .sw { background: rgba(243,230,204,.15); }
body.hud.orbit .credit-chip small { letter-spacing: .26em; color: rgba(243,230,204,.5); } body.hud.orbit .credit-chip .c-icon { color: rgba(243,230,204,.5); }
body.hud.orbit .credit-chip span#creditVal { font: 200 24px var(--font-thin); color: #f3e6cc; letter-spacing: .02em; }
body.hud.orbit .me-avatar { border-radius: 50%; clip-path: none; background: transparent; color: #f3e6cc; box-shadow: inset 0 0 0 1px rgba(243,230,204,.25); font: 300 13px var(--font-thin); }
body.hud.orbit .me-avatar.authed { box-shadow: inset 0 0 0 1px rgba(232,201,143,.7); }
/* 曲風切換 → 純文字分頁 + 細底線 */
body.hud.orbit .multiverse { gap: 22px; top: 66px; }
body.hud.orbit .verse-btn { clip-path: none; border: none; border-bottom: 1px solid transparent; background: none; box-shadow: none; backdrop-filter: none; padding: 6px 0 8px; font: 400 10.5px var(--font-thin); letter-spacing: .22em; color: rgba(243,230,204,.5); text-transform: uppercase; }
body.hud.orbit .verse-btn .vd { width: 4px; height: 4px; box-shadow: none; opacity: .55; }
body.hud.orbit .verse-btn:hover { color: #f3e6cc; background: none; }
body.hud.orbit .verse-btn.on { color: #f3e6cc; border-bottom-color: #e8c98f; background: none; box-shadow: none; }
/* 左上標題：琥珀小字 + 超細大字 */
body.hud.orbit .hud-readout { top: 112px; left: 40px; }
body.hud.orbit .hud-readout .no { font: 400 10px var(--mono); letter-spacing: .38em; color: #e8c98f; }
body.hud.orbit .hud-readout h1 { font: 200 46px var(--font-thin); letter-spacing: .14em; margin: 8px 0 6px; text-shadow: none; color: #f3e6cc; }
body.hud.orbit .hud-readout p { font: 300 12.5px var(--font-thin); letter-spacing: .08em; color: rgba(243,230,204,.6); }
body.hud.orbit .hud-data { color: rgba(243,230,204,.45); letter-spacing: .2em; } body.hud.orbit .hud-data b { color: #f3e6cc; font-weight: 400; }
/* 左側圖示列：無框 */
body.hud.orbit .hud-rail button { border-color: transparent; background: transparent; clip-path: none; box-shadow: none; }
body.hud.orbit .hud-rail button span { filter: grayscale(1) brightness(1.4); opacity: .7; }
body.hud.orbit .hud-rail button small { font: 400 7.5px var(--font-thin); letter-spacing: .24em; color: rgba(243,230,204,.5); }
body.hud.orbit .hud-rail button.on { border-left: 1px solid #e8c98f; background: transparent; box-shadow: none; } body.hud.orbit .hud-rail button.on span { opacity: 1; }
/* 地球標籤：無框細字 + 暖色引線 */
body.hud.orbit .globe-label { background: none; border-color: transparent; clip-path: none; font: 400 10px var(--mono); letter-spacing: .16em; text-shadow: 0 0 6px #000, 0 0 3px #000; color: #f3e6cc; padding: 2px 4px; }
body.hud.orbit .globe-label b { font-weight: 400; } body.hud.orbit .globe-label small { color: rgba(243,230,204,.55); font-size: 9px; }
body.hud.orbit .globe-label .gl-dot { display: none; }
body.hud.orbit .globe-label.dense b, body.hud.orbit .globe-label.active b { color: #e8c98f; }
body.hud.orbit .globe-label.hover, body.hud.orbit .globe-label.active { background: none; border-color: transparent; }
body.hud.orbit .leaders line { stroke: rgba(243,230,204,.4); stroke-dasharray: none; stroke-width: .8; }
/* 播放器：暖色毛玻璃、圓形播放鍵 */
body.hud.orbit .player { clip-path: none; border: 1px solid rgba(243,230,204,.14); background: linear-gradient(180deg, rgba(14,13,12,.62), rgba(8,8,8,.55)); }
body.hud.orbit .player::before { opacity: 0; }
body.hud.orbit .p-cover { clip-path: none; border-radius: 50%; }
body.hud.orbit .p-title { font-family: var(--font-thin); font-weight: 400; letter-spacing: .04em; }
body.hud.orbit .p-artist { letter-spacing: .1em; }
body.hud.orbit .p-btn { clip-path: none; border-radius: 50%; background: transparent; border: 1px solid rgba(243,230,204,.2); color: #f3e6cc; box-shadow: none; }
body.hud.orbit .p-btn.play { border-color: #f3e6cc; background: transparent; color: #f3e6cc; }
body.hud.orbit .rec-btn, body.hud.orbit .quick-tags button { clip-path: none; background: transparent; border-color: rgba(243,230,204,.14); font-family: var(--font-thin); }
body.hud.orbit .nova-orb canvas { filter: drop-shadow(0 0 8px rgba(243,230,204,.5)) grayscale(.6); }
body.hud.orbit .nova-orb span { font: 400 8px var(--font-thin); letter-spacing: .34em; color: rgba(243,230,204,.7); }
body.hud.orbit::after { opacity: 0; }
body.hud::after { transition: opacity .8s; }
body.hud.orbit .verse-btn, body.hud.orbit .hud-readout, body.hud.orbit .hud-data { text-shadow: 0 0 8px rgba(0,0,0,.9), 0 0 3px #000; }
body.hud.orbit .quick-tags button, body.hud.orbit .qt { clip-path: none; border-radius: 0; background: transparent; }

/* ===== v0.10c 修正：軌道標題不壓到左側圖示列 ===== */
body.hud.orbit .hud-readout { top: 100px; left: 92px; max-width: 46vw; }
body.hud.orbit .hud-readout h1 { font-size: 40px; margin: 6px 0 4px; }
body.hud.orbit.left-open .hud-readout { opacity: .15; }

/* ===== v0.10c 城市層 = 概念圖 03 的 Cyberpunk：全等寬字、無框、霓虹角框 ===== */
body.hud.street { --font: 'JetBrains Mono', 'Noto Sans TC', monospace; --orb: 'JetBrains Mono', 'Noto Sans TC', monospace; --neon: #28e6ff;
  --brk: linear-gradient(var(--accent), var(--accent)); font-family: var(--font); }
/* 角框：用 8 條漸層畫四個角，不用外框 */
body.hud.street .panel, body.hud.street .hover-card, body.hud.street .nova-panel {
  border: none !important; clip-path: none !important; box-shadow: none;
  background: var(--brk) top left / 16px 1px no-repeat, var(--brk) top left / 1px 16px no-repeat, var(--brk) top right / 16px 1px no-repeat, var(--brk) top right / 1px 16px no-repeat,
    var(--brk) bottom left / 16px 1px no-repeat, var(--brk) bottom left / 1px 16px no-repeat, var(--brk) bottom right / 16px 1px no-repeat, var(--brk) bottom right / 1px 16px no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, rgba(10,4,20,.72)), rgba(8,3,16,.58)) !important; backdrop-filter: blur(10px); }
body.hud.street .drawer::after { left: 0; right: 55%; height: 1px; }
body.hud.street .drawer::before { background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px); }
body.hud.street .drawer-bar { color: var(--accent); letter-spacing: .3em; }
/* 上方列：純文字、不框 */
body.hud.street .topbar { background: linear-gradient(180deg, rgba(8,2,14,.75), transparent); }
body.hud.street .topbar::after { background: linear-gradient(90deg, var(--accent), transparent 40%, transparent 60%, var(--accent)); opacity: .6; }
body.hud.street .brand-name { font: 700 15px var(--mono); letter-spacing: .42em; text-shadow: -1px 0 rgba(255,40,120,.8), 1px 0 rgba(40,230,255,.8); }
body.hud.street .brand-name b { color: var(--accent); }
body.hud.street .brand-tag { border-color: transparent; color: var(--accent); }
body.hud.street .geo-search { border: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: transparent; clip-path: none; }
body.hud.street .geo-search input { font: 12px var(--mono); letter-spacing: .06em; }
body.hud.street .lang-sel, body.hud.street .bell-btn, body.hud.street .hud-toggle, body.hud.street .up-top, body.hud.street .credit-chip {
  background: transparent; border: 1px solid transparent; clip-path: none; border-radius: 0; box-shadow: none; font: 500 11px var(--mono); letter-spacing: .16em; color: rgba(244,236,255,.75); }
body.hud.street .lang-sel:hover, body.hud.street .bell-btn:hover, body.hud.street .hud-toggle:hover, body.hud.street .up-top:hover { border-bottom-color: var(--accent); }
body.hud.street .hud-toggle.on, body.hud.street #hoverToggle.on i { color: var(--accent); }
body.hud.street .credit-chip span#creditVal { font: 600 20px var(--mono); color: #ffd84d; } body.hud.street .credit-chip .c-icon { color: #ffd84d; }
body.hud.street .me-avatar { clip-path: none; border-radius: 0; background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); font: 700 13px var(--mono); }
/* 曲風分頁：斜切小方塊，選中的發光 */
body.hud.street .verse-btn { font: 500 10px var(--mono); letter-spacing: .12em; padding: 6px 11px; border: none; color: rgba(244,236,255,.55); background: color-mix(in srgb, var(--accent) 7%, transparent);
  clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%); box-shadow: none; backdrop-filter: none; }
body.hud.street .verse-btn .vd { width: 5px; height: 5px; box-shadow: none; }
body.hud.street .verse-btn.on { color: #fff; background: color-mix(in srgb, var(--accent) 40%, transparent); box-shadow: inset 0 0 14px color-mix(in srgb, var(--accent) 75%, transparent); }
/* 左上標題：等寬粗字 + 色差 */
body.hud.street .hud-readout .no { color: var(--accent); }
body.hud.street .hud-readout h1 { font: 700 22px var(--mono); letter-spacing: .14em; text-shadow: -1px 0 rgba(255,40,120,.85), 1px 0 rgba(40,230,255,.85); }
body.hud.street .hud-readout p, body.hud.street .hud-data { font-family: var(--mono); }
body.hud.street .hud-data b { color: var(--neon); }
/* 左側圖示列：角框 */
body.hud.street .hud-rail button { border: none; clip-path: none; box-shadow: none; background: var(--brk) top left / 8px 1px no-repeat, var(--brk) top left / 1px 8px no-repeat, var(--brk) bottom right / 8px 1px no-repeat, var(--brk) bottom right / 1px 8px no-repeat, rgba(10,4,20,.45); }
body.hud.street .hud-rail button small { font: 600 7.5px var(--mono); letter-spacing: .16em; }
body.hud.street .hud-rail button.on { background: var(--brk) top left / 8px 1px no-repeat, var(--brk) top left / 1px 8px no-repeat, var(--brk) bottom right / 8px 1px no-repeat, var(--brk) bottom right / 1px 8px no-repeat, color-mix(in srgb, var(--accent) 30%, rgba(10,4,20,.6)); }
/* 地球標籤：無框、等寬、色差 */
body.hud.street .globe-label { background: none; border-color: transparent; clip-path: none; padding: 2px 4px; font: 600 10.5px var(--mono); letter-spacing: .14em; text-shadow: -1px 0 rgba(255,40,120,.7), 1px 0 rgba(40,230,255,.7), 0 0 6px #000; }
body.hud.street .globe-label small { color: rgba(244,236,255,.55); font-size: 9px; text-shadow: 0 0 4px #000; }
body.hud.street .globe-label.active b, body.hud.street .globe-label.hover b, body.hud.street .globe-label.dense b { color: var(--accent); }
body.hud.street .globe-label.hover, body.hud.street .globe-label.active { background: none; }
body.hud.street .leaders line { stroke: var(--accent); stroke-dasharray: none; opacity: .7; }
/* 播放器：只留上緣霓虹線 */
body.hud.street .player { clip-path: none; border: none; border-top: 1px solid var(--accent); background: linear-gradient(0deg, rgba(20,4,30,.78), rgba(20,4,30,.35)); }
body.hud.street .player::before { opacity: 0; }
body.hud.street .p-title { font: 600 13px var(--mono); letter-spacing: .06em; } body.hud.street .p-artist { font: 10.5px var(--mono); letter-spacing: .12em; }
body.hud.street .p-btn { clip-path: none; border-radius: 0; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: transparent; }
body.hud.street .p-btn.play { background: color-mix(in srgb, var(--accent) 35%, transparent); color: #fff; box-shadow: inset 0 0 14px var(--accent); }
body.hud.street .rec-btn, body.hud.street .quick-tags button { font-family: var(--mono); clip-path: none; }
body.hud.street .x-btn { border-color: transparent; color: var(--accent); }
body.hud.street .nova-orb span { font: 700 8px var(--mono); color: var(--neon); }
/* v0.10d 城市層的固定訊號干擾橫帶（概念圖 03） */
#crtBands { position: fixed; inset: 0; pointer-events: none; z-index: 43; opacity: calc(var(--street, 0) * var(--street, 0)); mix-blend-mode: screen; }
#crtBands i { position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(40,230,255,.22) 12%, rgba(40,230,255,.12) 60%, transparent); box-shadow: 0 6px 0 rgba(255,61,240,.08); animation: bandDrift 9s ease-in-out infinite alternate; }
#crtBands i:nth-child(2) { background: linear-gradient(90deg, transparent, rgba(255,61,240,.2) 30%, rgba(255,61,240,.1) 80%, transparent); animation-duration: 13s; }
#crtBands i:nth-child(3) { height: 1px; animation-duration: 7s; }
@keyframes bandDrift { to { transform: translateY(26px); } }
@media (prefers-reduced-motion: reduce) { #crtBands i { animation: none; } }
.globe-label .gl-en { display: none; font-style: normal; font-weight: 600; letter-spacing: .14em; }
body.hud.street .globe-label .gl-en { display: inline; }
html:not([lang^="zh"]) .globe-label .gl-en { display: none !important; }

/* ===== v0.10e 過場：介面淡出 → 換風格 → 全息閃爍淡入（不再瞬間跳） ===== */
body.hud .topbar, body.hud .multiverse, body.hud .hud-readout, body.hud .hud-data, body.hud .hud-rail, body.hud .player, body.hud .labels, body.hud .nova-orb, body.hud .drawer.open {
  transition: opacity .5s ease, filter .5s ease, transform .5s cubic-bezier(.16,1,.3,1); }
body.layer-swap .topbar, body.layer-swap .multiverse, body.layer-swap .hud-readout, body.layer-swap .hud-data, body.layer-swap .hud-rail, body.layer-swap .player, body.layer-swap .labels, body.layer-swap .nova-orb, body.layer-swap .drawer.open {
  opacity: 0 !important; filter: blur(5px) brightness(1.8); transition-duration: .3s; }
body.layer-in .topbar, body.layer-in .multiverse, body.layer-in .hud-readout, body.layer-in .hud-rail, body.layer-in .player, body.layer-in .drawer.open { animation: layerIn .85s ease-out; }
@keyframes layerIn { 0% { opacity: 0; filter: blur(4px) brightness(2); } 22% { opacity: .55; } 30% { opacity: .2; } 42% { opacity: .8; filter: blur(1px) brightness(1.3); } 55% { opacity: .5; } 100% { opacity: 1; filter: none; } }
#crt, #crtBands, .nebula { transition: opacity 1.1s ease; }

/* ===== v0.10e 播放器：全息投影 ===== */
body.hud .player { --pc: var(--accent); }
body.hud.street .player, body.hud.orbit .player {
  border: none !important; clip-path: none !important; overflow: visible;
  transform: translateX(-50%) perspective(1100px) rotateX(7deg); transform-origin: 50% 100%;
  background:
    linear-gradient(var(--pc), var(--pc)) top left / 22px 1px no-repeat, linear-gradient(var(--pc), var(--pc)) top left / 1px 22px no-repeat,
    linear-gradient(var(--pc), var(--pc)) top right / 22px 1px no-repeat, linear-gradient(var(--pc), var(--pc)) top right / 1px 22px no-repeat,
    linear-gradient(var(--pc), var(--pc)) bottom left / 22px 1px no-repeat, linear-gradient(var(--pc), var(--pc)) bottom left / 1px 22px no-repeat,
    linear-gradient(var(--pc), var(--pc)) bottom right / 22px 1px no-repeat, linear-gradient(var(--pc), var(--pc)) bottom right / 1px 22px no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--pc) 13%, transparent), color-mix(in srgb, var(--pc) 4%, rgba(2,2,8,.28)) 70%, color-mix(in srgb, var(--pc) 9%, transparent)) !important;
  backdrop-filter: blur(5px) saturate(1.3);
  box-shadow: 0 0 34px -6px color-mix(in srgb, var(--pc) 45%, transparent) inset, 0 26px 60px -24px color-mix(in srgb, var(--pc) 70%, transparent);
  animation: holoFlicker 7s steps(1) infinite; }
/* 掃描線 + 上緣光 */
body.hud.street .player::before, body.hud.orbit .player::before { content: ''; opacity: 1 !important; position: absolute; inset: 0; height: auto; pointer-events: none; z-index: 0;
  background: linear-gradient(90deg, transparent, var(--pc), transparent) top / 100% 1px no-repeat, repeating-linear-gradient(0deg, color-mix(in srgb, var(--pc) 9%, transparent) 0 1px, transparent 1px 4px); }
/* 光澤掃過 */
body.hud.street .player::after, body.hud.orbit .player::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--pc) 16%, transparent) 48%, transparent 58%) -60% 0 / 60% 100% no-repeat; animation: holoSheen 6.5s ease-in-out infinite; }
/* 投影光束（從底部往上） */
body.hud .player .p-meta, body.hud .player .p-ctrl, body.hud .player .p-wave, body.hud .player .p-actions { position: relative; z-index: 1; }
@keyframes holoSheen { 0%, 55% { background-position: -60% 0; } 100% { background-position: 220% 0; } }
@keyframes holoFlicker { 0%, 100% { opacity: 1; } 61% { opacity: .86; } 62% { opacity: 1; } 87% { opacity: .92; } 88% { opacity: 1; } }
body.hud.street .player .p-title, body.hud.orbit .player .p-title { text-shadow: 0 0 10px color-mix(in srgb, var(--pc) 75%, transparent); }
body.hud.street .p-cover, body.hud.orbit .p-cover { opacity: .85; box-shadow: 0 0 18px color-mix(in srgb, var(--pc) 55%, transparent); mix-blend-mode: screen; }
body.hud.street .p-btn, body.hud.orbit .p-btn { background: color-mix(in srgb, var(--pc) 6%, transparent) !important; border: 1px solid color-mix(in srgb, var(--pc) 38%, transparent) !important; color: #fff; box-shadow: 0 0 10px -2px color-mix(in srgb, var(--pc) 50%, transparent); }
body.hud.street .p-btn.play, body.hud.orbit .p-btn.play { background: color-mix(in srgb, var(--pc) 26%, transparent) !important; box-shadow: 0 0 22px color-mix(in srgb, var(--pc) 65%, transparent), inset 0 0 12px color-mix(in srgb, var(--pc) 55%, transparent); }
body.hud.street .rec-btn, body.hud.street .quick-tags button, body.hud.orbit .rec-btn, body.hud.orbit .quick-tags button {
  background: color-mix(in srgb, var(--pc) 5%, transparent) !important; border: 1px solid color-mix(in srgb, var(--pc) 24%, transparent) !important; clip-path: none !important; border-radius: 0 !important; color: rgba(255,255,255,.85); }
body.hud.street .rec-btn:hover, body.hud.street .quick-tags button:hover, body.hud.orbit .rec-btn:hover, body.hud.orbit .quick-tags button:hover { border-color: var(--pc) !important; box-shadow: 0 0 12px -2px var(--pc); }
body.hud.orbit .player { --pc: #e8c98f; }
body.hud.orbit .p-btn.play { border-radius: 50%; } body.hud.orbit .p-btn { border-radius: 50% !important; }
@media (prefers-reduced-motion: reduce) { body.hud .player, body.hud .player::after { animation: none !important; } body.layer-in * { animation: none !important; } }

/* ===== v0.10f ===== */
/* 頭像照片：被 orbit/street 的 background 簡寫蓋掉了尺寸 → 強制填滿裁切 */
body.hud .me-avatar.has-img { background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; }
/* 地球標籤、HUD 文字不能被滑鼠反白選取（台北那個藍色選取框） */
.labels, .globe-label, .hud-readout, .hud-data, .topbar, .multiverse, .hud-rail, .player, .center-reticle, #hoverCard { -webkit-user-select: none; user-select: none; }
.topbar input, .player input { -webkit-user-select: text; user-select: text; }

/* 面板：更透明的全息投影 */
body.hud.street .panel, body.hud.street .nova-panel {
  background: var(--brk) top left / 16px 1px no-repeat, var(--brk) top left / 1px 16px no-repeat, var(--brk) top right / 16px 1px no-repeat, var(--brk) top right / 1px 16px no-repeat,
    var(--brk) bottom left / 16px 1px no-repeat, var(--brk) bottom left / 1px 16px no-repeat, var(--brk) bottom right / 16px 1px no-repeat, var(--brk) bottom right / 1px 16px no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, rgba(6,2,14,.30)), color-mix(in srgb, var(--accent) 4%, rgba(6,2,14,.18)) 75%, color-mix(in srgb, var(--accent) 8%, transparent)) !important;
  backdrop-filter: blur(3px) saturate(1.25) !important; box-shadow: inset 0 0 40px -10px color-mix(in srgb, var(--accent) 40%, transparent) !important; }
body.hud.street .drawer::before { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 60%, transparent), transparent) top / 100% 1px no-repeat, repeating-linear-gradient(0deg, color-mix(in srgb, var(--accent) 7%, transparent) 0 1px, transparent 1px 4px) !important; }
body.hud.street .drawer .side-body, body.hud.street #cityCard, body.hud.street #leaderboard { text-shadow: 0 0 8px rgba(0,0,0,.85); }
body.hud.street #cityCard .row-demo, body.hud.street .cf-chip, body.hud.street .radio-btn, body.hud.street .cf-q, body.hud.street .cf-bpm, body.hud.street .cf-sub, body.hud.street .kw, body.hud.street .lb-row, body.hud.street .side-body .btn, body.hud.street .side-body .inp, body.hud.street .stat, body.hud.street .vault-item, body.hud.street .lab-card, body.hud.street .sub-tabs button, body.hud.street #sideTabs button {
  background: color-mix(in srgb, var(--accent) 5%, transparent) !important; border-color: color-mix(in srgb, var(--accent) 22%, transparent) !important; box-shadow: none; }
body.hud.street .cf-chip.on, body.hud.street .radio-btn.on, body.hud.street .row-demo.playing, body.hud.street .lb-row.playing { background: color-mix(in srgb, var(--accent) 22%, transparent) !important; border-color: var(--accent) !important; box-shadow: 0 0 14px -4px var(--accent); }
body.hud.orbit .panel { background: linear-gradient(160deg, rgba(16,15,14,.48), rgba(8,8,9,.34)) !important; backdrop-filter: blur(6px) !important; border-color: rgba(243,230,204,.14) !important; }

/* 面板出現 = 投影展開：先一條亮線，再往上下展開，帶一點閃爍 */
@keyframes projIn {
  0% { opacity: 0; transform: scaleX(.35) scaleY(.004); filter: brightness(3) blur(1px); }
  18% { opacity: 1; transform: scaleX(1) scaleY(.006); filter: brightness(3); }
  45% { transform: scaleX(1) scaleY(1.03); filter: brightness(1.6); }
  55% { opacity: .55; } 62% { opacity: 1; transform: none; } 72% { opacity: .8; } 100% { opacity: 1; transform: none; filter: none; } }
body.hud .drawer.open { animation: projIn .62s cubic-bezier(.2,.9,.25,1) both !important; transform-origin: 50% 50%; }
body.hud .modal-box, body.hud .noti-panel:not(.hidden), body.hud .nova-panel:not(.hidden), body.hud #hoverCard:not(.hidden) { animation: projIn .5s cubic-bezier(.2,.9,.25,1) both; transform-origin: 50% 50%; }
@media (prefers-reduced-motion: reduce) { body.hud .drawer.open, body.hud .modal-box, body.hud .noti-panel, body.hud .nova-panel, body.hud #hoverCard { animation: none !important; } }

/* ===== v0.10g 上方文字可讀性：頂部一條「暗化 + 霧化」的遮罩，地球亮點不會穿過文字 ===== */
#hudShade { position: fixed; left: 0; right: 0; top: 0; height: 150px; z-index: 5; pointer-events: none;
  background: linear-gradient(180deg, rgba(4,2,10,.88) 0, rgba(4,2,10,.72) 45%, rgba(4,2,10,0) 100%);
  -webkit-backdrop-filter: blur(5px) saturate(.7); backdrop-filter: blur(5px) saturate(.7);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent);
  opacity: calc(.35 + var(--street, 0) * .65); transition: opacity .8s; }
#hudShade::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 520px; background: radial-gradient(ellipse at 0 30%, rgba(4,2,10,.7), transparent 70%); }
body.hud .hud-data { z-index: 6; }
body.hud.street .topbar { background: none; }
body.hud.street .geo-search input::placeholder { color: rgba(244,236,255,.45); }
body.hud.street .hud-readout .no, body.hud.street .hud-readout p, body.hud.street .verse-btn, body.hud.street .topbar button, body.hud.street .lang-sel, body.hud.street .hud-data { text-shadow: 0 0 6px #000, 0 0 2px #000; }
body.hud.street .verse-btn { background: color-mix(in srgb, var(--accent) 9%, rgba(4,2,10,.55)); }
body.hud.street .verse-btn:not(.on) { color: rgba(244,236,255,.72); }
body.hud.street .hud-readout { top: 100px; } /* 9 顆地球分頁變寬 → 標題移到分頁下面，不互相重疊 */

/* ===== v0.10h 上架前：示範標籤 / 檢舉 / 封鎖 / 條款 ===== */
.rd-tags .t.sample { color: #c9b6ff; background: rgba(160,130,255,.12); border: 1px dashed rgba(160,130,255,.45); }
.sample-banner { border-color: rgba(160,130,255,.5) !important; color: #c9b6ff !important; }
.mod-row { display: flex; gap: 14px; justify-content: flex-end; margin-top: 8px; }
.link-btn { background: none; border: none; padding: 0; font-size: 11px; color: var(--dimmer); cursor: pointer; letter-spacing: .04em; }
.link-btn:hover { color: #ff7a8a; text-decoration: underline; }
.rep-btn { width: 30px; height: 30px; border: 1px solid rgba(255,255,255,.14); background: transparent; color: var(--dim); font-size: 13px; cursor: pointer; flex: none; opacity: .7; }
.rep-btn:hover { opacity: 1; border-color: #ff7a8a; }
.rep-reasons { display: grid; gap: 6px; margin: 10px 0; } .rep-copy { padding: 10px; border: 1px dashed rgba(255,255,255,.14); margin-bottom: 10px; }
.au-agree { font-size: 12px; margin: 8px 0 2px; } .au-agree a, .au-forgot a { color: var(--accent2); }
.au-forgot { text-align: right; font-size: 12px; margin-top: -4px; }
.comment .tr-btn[data-crep] { opacity: .45; } .comment .tr-btn[data-crep]:hover { opacity: 1; }
/* v0.10i 左上標題永遠放在左側圖示列右邊（城市層也是），不再被 RANK 擋住 */
body.hud .hud-readout, body.hud.street .hud-readout { left: 92px; max-width: calc(100vw - 420px); }
body.hud.street .hud-readout p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== v0.10j 食指手勢準星 ===== */
.g-reticle { transition: transform .06s linear; }
.g-reticle.mode-REST i { border-color: rgba(255,255,255,.35); box-shadow: none; }
.g-reticle.mode-HOLD i { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent), 0 0 18px var(--accent); }
.g-reticle.mode-TAP i { transform: scale(.45); background: color-mix(in srgb, var(--accent2) 40%, transparent); }
.g-reticle.mode-ZOOM_IN i { transform: scale(1.5); border-radius: 0; } .g-reticle.mode-ZOOM_OUT i { transform: scale(.7); border-radius: 0; }
.g-reticle.lock i { transform: scale(1.35); border-color: var(--accent2); }

/* ===== v0.10j 播放器右側按鈕不再凸出去 ===== */
body.hud .player { grid-template-columns: minmax(180px, 240px) 150px minmax(120px, 1fr) auto !important; column-gap: 14px; }
body.hud .p-actions { min-width: 0; max-width: 380px; }
body.hud .quick-tags { display: flex; flex-wrap: nowrap; gap: 4px; overflow: hidden; }
body.hud .quick-tags button { padding: 4px 7px !important; font-size: 11px !important; white-space: nowrap; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body.hud .p-row { gap: 6px; } body.hud .p-row input[type=range] { width: 90px; min-width: 60px; }
@media (max-width: 1350px) { body.hud .quick-tags .qt-l { display: none; } body.hud .quick-tags button { font-size: 14px !important; } }

/* ===== v0.10k 左右手手勢 ===== */
.g-reticle::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; pointer-events: none; opacity: calc(var(--dwell, 0) * 3);
  background: conic-gradient(var(--accent2) calc(var(--dwell, 0) * 360deg), transparent 0); -webkit-mask: radial-gradient(circle, transparent 31px, #000 32px); mask: radial-gradient(circle, transparent 31px, #000 32px); }
.g-reticle.mode-PRESS i { transform: scale(.45); background: color-mix(in srgb, var(--accent2) 40%, transparent); }
.gh-opts { display: grid; gap: 4px; margin: 6px 0 4px; font-size: 11.5px; } .gh-opts .check { display: flex; gap: 6px; align-items: center; }
.gh-help b { color: var(--accent2); font-weight: 600; }

/* ===== v0.10l 好友 ===== */
.fr-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.fr-row .grow { min-width: 0; cursor: pointer; } .fr-row .grow b { display: block; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-row .grow small { display: block; font-size: 10.5px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-row .grow:hover b { color: var(--accent2); }
.fr-av { width: 34px !important; height: 34px !important; flex: none; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #000; font-weight: 700; }
.fr-btns { display: flex; gap: 4px; flex: none; }
.fr-invite { margin-top: 10px; } .fr-invite .vip-link span { font-size: 10px; }
.gs-row .btn.sm { flex: none; }
#sideTabs { display: flex; flex-wrap: nowrap; } #sideTabs button { flex: 1 1 0; min-width: 0; padding-left: 2px !important; padding-right: 2px !important; font-size: 11.5px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }