/* =============================================================
   DemoWrld v0.11 — 新介面外殼
   遠（軌道）= 星際效應：細字、暖白、幾乎沒有框
   近（城市）= Cyberpunk：等寬字、霓虹斜角、偶爾雜訊
   ============================================================= */
:root { --px: 0; --py: 0; }
.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* ---------- emoji 改成單色線條（字型放在 fonts/，不靠外部網站） ---------- */
body.hud.shell { --font: 'Space Grotesk', 'Noto Sans TC', 'Noto Emoji', system-ui, -apple-system, 'PingFang TC', sans-serif; --mono: 'JetBrains Mono', 'Noto Emoji', ui-monospace, Menlo, monospace; --orb: 'Orbitron', 'JetBrains Mono', 'Noto Emoji', monospace; }
body.hud.shell.orbit { --orb: 'Inter', 'Noto Sans TC', 'Noto Emoji', sans-serif; --font-thin: 'Inter', 'Noto Sans TC', 'Noto Emoji', sans-serif; }
body.hud.shell.street { --font: 'JetBrains Mono', 'Noto Sans TC', 'Noto Emoji', monospace; --orb: 'JetBrains Mono', 'Noto Sans TC', 'Noto Emoji', monospace; }

/* ---------- 收起舊的雜項 ---------- */
body.shell #rail, body.shell .hint, body.shell #langSel, body.shell #hoverToggle, body.shell #gestureToggle, body.shell #uploadTop,
body.shell .geo-search > .gs-icon, body.shell #geoInput, body.shell .geo-search > kbd:not(.nb-k), body.shell #geoResults { display: none !important; }
body.shell .top-right { min-width: 0; gap: 14px; }
body.hud.shell .hud-readout, body.hud.shell.street .hud-readout, body.hud.shell.orbit .hud-readout { left: 34px; }
body.shell .drawer.left { left: 22px !important; }
body.shell.nova-open .drawer.left { left: 22px !important; }
body.shell .drawer { bottom: 96px; }
body.shell.player-open .drawer { bottom: 190px; }
body.shell .zoom-ctrl { bottom: 96px; opacity: .35; transition: opacity .3s, right .4s; } body.shell .zoom-ctrl:hover { opacity: 1; }
body.shell.player-open .zoom-ctrl { bottom: 190px; }
body.shell .nova-caption { bottom: 92px; } body.shell.player-open .nova-caption { bottom: 186px; }

/* ---------- 浮出螢幕：跟著滑鼠的小視差 + 腳下的光 ---------- */
body.shell .geo-search.nb { translate: calc(var(--px) * -5px) calc(var(--py) * -3px); }
body.shell .dock { translate: calc(var(--px) * -7px) calc(var(--py) * -4px); }
body.shell .pill { translate: calc(var(--px) * -9px) calc(var(--py) * -5px); }
body.shell .hud-readout { translate: calc(var(--px) * -3px) calc(var(--py) * -2px); }
body.shell .top-right, body.shell .brand { translate: calc(var(--px) * -3px) calc(var(--py) * -2px); }
body.shell .drawer.open { translate: calc(var(--px) * -4px) calc(var(--py) * -3px); }
body.shell .geo-search.nb, body.shell .dock, body.shell .pill { transition: translate .25s ease-out, border-color .3s, background .3s, box-shadow .3s; }

/* ---------- NOVA 輸入列 ---------- */
body.shell .geo-search.nb { max-width: 580px; height: 40px; gap: 10px; padding: 0 12px 0 8px; overflow: visible; }
.nb #novaQ { flex: 1; min-width: 0; background: none; border: none; outline: none; font: 13px var(--font); color: var(--text); letter-spacing: .03em; -webkit-user-select: text; user-select: text; }
.nb #novaQ::placeholder { color: color-mix(in srgb, var(--hud) 50%, transparent); }
.nb .nova-orb { position: static !important; width: 26px !important; height: 26px !important; flex: none; }
.nb .nova-orb canvas { width: 26px !important; height: 26px !important; }
.nb .nova-orb span { display: none; }
.nb .nb-mic { background: none; border: none; padding: 4px; color: color-mix(in srgb, var(--hud) 70%, transparent); display: flex; cursor: pointer; }
.nb .nb-mic:hover { color: var(--hud); }
.nb kbd.nb-k { font: 10px var(--mono); color: var(--hud-dim); border: 1px solid var(--hud-faint); padding: 2px 6px; }
.nb.open kbd.nb-k { opacity: 0; }
.nb-res { position: absolute; left: 0; right: 0; top: 46px; z-index: 60; max-height: min(520px, calc(100vh - 170px)); overflow-y: auto; padding: 6px 0 8px;
  background: linear-gradient(170deg, rgba(10,10,12,.93), rgba(5,5,8,.9)); border: 1px solid var(--hud-faint); backdrop-filter: blur(18px); box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.02) inset; animation: nbIn .22s ease-out; }
@keyframes nbIn { from { opacity: 0; transform: translateY(-6px) scaleY(.96); } to { opacity: 1; transform: none; } }
.nb-sec { padding: 10px 16px 4px; font: 9.5px var(--mono); letter-spacing: .28em; color: var(--hud-dim); text-transform: uppercase; }
.nb-row { display: grid; grid-template-columns: 22px 1fr auto auto; gap: 10px; align-items: center; padding: 8px 16px; cursor: pointer; font-size: 13px; color: var(--text); border-left: 2px solid transparent; }
.nb-row .ic { color: var(--hud); opacity: .75; }
.nb-row b { font-weight: 400; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-row small { display: block; font-size: 11px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-row:hover, .nb-row.sel { background: color-mix(in srgb, var(--hud) 9%, transparent); border-left-color: var(--accent); }
.nb-row kbd { font: 10px var(--mono); color: var(--hud-dim); }
.nb-tag { font: 9.5px var(--mono); letter-spacing: .14em; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); padding: 1px 6px; }
.nb-note { padding: 14px 16px; font-size: 12px; color: var(--dim); }
.nb-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 16px 6px; }
.nb-chips button { background: none; border: 1px solid var(--hud-faint); color: color-mix(in srgb, var(--text) 80%, transparent); font: 12px var(--font); padding: 5px 10px; cursor: pointer; }
.nb-chips button:hover { border-color: var(--accent); color: var(--text); }
/* 軌道：只有一條底線，細字 */
body.shell.orbit .geo-search.nb { border: none; border-bottom: 1px solid rgba(243,230,204,.32); background: linear-gradient(180deg, transparent, rgba(243,230,204,.05)); box-shadow: 0 14px 30px -18px rgba(243,230,204,.35); }
body.shell.orbit .nb #novaQ { font: 300 13.5px 'Inter', 'Noto Sans TC', 'Noto Emoji', sans-serif; letter-spacing: .08em; }
body.shell.orbit .nb-res { border-color: rgba(243,230,204,.14); }
body.shell.orbit .nb-row b, body.shell.orbit .nb-chips button { font-family: 'Inter', 'Noto Sans TC', 'Noto Emoji', sans-serif; font-weight: 300; letter-spacing: .04em; }
/* 城市：霓虹斜角、等寬字 */
body.shell.street .geo-search.nb { border: none; border-bottom: 1px solid var(--accent); background: linear-gradient(90deg, rgba(255,61,240,.1), rgba(40,230,255,.05)); clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); box-shadow: none; padding: 0 20px 0 16px; }
body.shell.street .geo-search.nb.open { clip-path: none; }
body.shell.street .nb #novaQ { font: 12px 'JetBrains Mono', 'Noto Sans TC', 'Noto Emoji', monospace; letter-spacing: .1em; }
body.shell.street .nb kbd.nb-k { border-color: color-mix(in srgb, var(--neon, #28e6ff) 55%, transparent); color: var(--neon, #28e6ff); }
body.shell.street .nb-res { background: linear-gradient(170deg, rgba(16,4,26,.94), rgba(4,6,16,.92)); border: none; border-left: 1px solid var(--accent); border-bottom: 1px solid var(--neon, #28e6ff); }
body.shell.street .nb-row b, body.shell.street .nb-chips button { font-family: 'JetBrains Mono', 'Noto Sans TC', 'Noto Emoji', monospace; letter-spacing: .04em; }
body.shell.street .nb-chips button { clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); padding: 5px 13px; }

/* ---------- 平行地球切換：滑鼠移到上面才出現 ---------- */
body.hud.shell .multiverse { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(-10px); transition: opacity .35s, transform .45s cubic-bezier(.16,1,.3,1); }
body.hud.shell.chrome-top .multiverse { opacity: 1; pointer-events: auto; transform: translateX(-50%); }
body.hud.shell.layer-swap .multiverse { opacity: 0; }
body.shell .hud-readout { pointer-events: auto; cursor: pointer; }
body.shell .hud-data { opacity: .55; }

/* ---------- 四大區 Dock ---------- */
.dock { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 27; display: flex; gap: 6px; -webkit-user-select: none; user-select: none; transition: bottom .45s cubic-bezier(.16,1,.3,1), opacity .3s; }
body.player-open .dock { bottom: 116px; }
.dock button { position: relative; display: flex; align-items: center; gap: 9px; background: none; border: none; color: color-mix(in srgb, var(--text) 72%, transparent); cursor: pointer; padding: 8px 14px; transition: color .25s, background .25s, box-shadow .25s; }
.dock button small { font-size: 11px; letter-spacing: .28em; white-space: nowrap; }
.dock button:hover { color: var(--text); }
.dock .rail-badge { top: -2px; right: 2px; }
/* 軌道 */
body.orbit .dock { gap: 30px; }
body.orbit .dock button { padding: 6px 2px 10px; border-bottom: 1px solid transparent; font-family: 'Inter', 'Noto Sans TC', 'Noto Emoji', sans-serif; font-weight: 300; text-shadow: 0 0 8px rgba(0,0,0,.9); }
body.orbit .dock button .ic { width: 17px; height: 17px; stroke-width: 1.1; }
body.orbit .dock button.on { color: #fff; border-bottom-color: var(--g1, #e8c98f); text-shadow: 0 0 14px color-mix(in srgb, var(--g1, #e8c98f) 70%, transparent), 0 0 8px rgba(0,0,0,.9); }
body.orbit .dock button.on .ic { color: var(--g1, #e8c98f); }
body.orbit .dock::before { content: ''; position: absolute; inset: -14px -60px -20px; background: radial-gradient(ellipse at center, rgba(0,0,0,.55), transparent 72%); pointer-events: none; z-index: -1; }
body.orbit .dock::after { content: ''; position: absolute; left: 10%; right: 10%; bottom: -14px; height: 18px; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--g1, #e8c98f) 38%, transparent), transparent 70%); pointer-events: none; filter: blur(4px); }
/* 城市 */
body.street .dock { gap: 3px; }
body.street .dock button { height: 38px; min-width: 104px; justify-content: center; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); background: linear-gradient(180deg, color-mix(in srgb, var(--g1) 26%, rgba(10,6,16,.86)), color-mix(in srgb, var(--g2) 12%, rgba(6,4,12,.88))); color: color-mix(in srgb, var(--text) 88%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); font-family: 'JetBrains Mono', 'Noto Sans TC', 'Noto Emoji', monospace; }
body.street .dock button small { letter-spacing: .14em; font-size: 10.5px; }
body.street .dock button:hover { background: color-mix(in srgb, var(--g2) 34%, rgba(8,6,14,.85)); }
body.street .dock button.on { color: #fff; background: color-mix(in srgb, var(--g1) 46%, rgba(10,6,16,.8)); box-shadow: inset 0 0 18px color-mix(in srgb, var(--g1) 85%, transparent); text-shadow: 1px 0 color-mix(in srgb, var(--g2) 80%, transparent), -1px 0 color-mix(in srgb, var(--g1) 80%, transparent); }
body.street .dock::after { content: ''; position: absolute; left: 0; right: 0; bottom: -7px; height: 1px; background: linear-gradient(90deg, transparent, var(--g2), var(--g1), transparent); opacity: .7; }
body.layer-swap .dock, body.layer-swap .pill { opacity: 0; }
body.layer-in .dock, body.layer-in .pill { animation: layerIn .85s ease-out; }
body.touring .dock { z-index: 96; }

/* ---------- 側欄分頁 ---------- */
#sideTabs.single { display: none; }
#sideTabs button { position: relative; }
#sideTabs .rail-badge { top: 2px; right: 2px; }
#sideBody[data-vv] .sec[data-v] { display: none; }
#sideBody[data-vv="songs"] .sec[data-v~="songs"], #sideBody[data-vv="credit"] .sec[data-v~="credit"], #sideBody[data-vv="settings"] .sec[data-v~="settings"] { display: block; }
.set-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--hud-faint); font-size: 13px; }
.set-row .ic { color: var(--hud); opacity: .8; }
.set-row > span { flex: 1; min-width: 0; }
.set-row small { display: block; font-size: 11px; color: var(--dim); margin-top: 2px; }
.set-row select { width: auto; }
.sw-btn { width: 38px; height: 20px; flex: none; border: 1px solid var(--hud-dim); background: rgba(255,255,255,.04); position: relative; cursor: pointer; padding: 0; transition: background .2s, border-color .2s; }
.sw-btn i { position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; background: color-mix(in srgb, var(--text) 45%, transparent); transition: left .2s, background .2s; }
.sw-btn.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, transparent); } .sw-btn.on i { left: 20px; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
body.orbit .sw-btn, body.orbit .sw-btn i { border-radius: 10px; }

/* ---------- 播放器：平常是右下的膠囊 ---------- */
body.hud.shell .player { opacity: 0 !important; pointer-events: none; transform: translateX(-50%) translateY(26px) scale(.98); transition: opacity .3s, transform .45s cubic-bezier(.16,1,.3,1); }
body.hud.shell.player-open .player { opacity: 1 !important; pointer-events: auto; transform: translateX(-50%); }
.p-collapse { position: absolute; right: 6px; top: -1px; z-index: 3; width: 26px; height: 16px; background: none; border: none; color: var(--hud-dim); cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; }
.p-collapse:hover { color: var(--hud); } .p-collapse .ic { width: 14px; height: 14px; }
.pill { position: fixed; right: 24px; bottom: 22px; z-index: 27; display: flex; align-items: center; gap: 10px; max-width: 300px; padding: 6px 12px 6px 6px; cursor: pointer; -webkit-user-select: none; user-select: none; }
.pill.hidden, body.player-open .pill { display: none; }
body.right-open .pill { right: 24px; }
.pill .pl-play { width: 32px; height: 32px; flex: none; display: flex; align-items: center; justify-content: center; background: none; border: 1px solid var(--hud-dim); color: var(--hud); cursor: pointer; padding: 0; }
.pill .pl-play .ic { width: 14px; height: 14px; }
.pill .pl-t { min-width: 0; font-size: 12px; line-height: 1.3; }
.pill .pl-t b { display: block; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.pill .pl-t small { display: block; font-size: 10px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.pill .pl-eq { display: flex; gap: 2px; align-items: flex-end; height: 14px; }
.pill .pl-eq i { width: 2px; height: 3px; background: var(--accent); }
.pill.playing .pl-eq i { animation: plEq .9s ease-in-out infinite; } .pill.playing .pl-eq i:nth-child(2) { animation-delay: -.3s; } .pill.playing .pl-eq i:nth-child(3) { animation-delay: -.55s; } .pill.playing .pl-eq i:nth-child(4) { animation-delay: -.15s; }
@keyframes plEq { 0%, 100% { height: 3px; } 50% { height: 14px; } }
body.orbit .pill { border-top: 1px solid rgba(243,230,204,.32); padding: 9px 4px 0 0; font-family: 'Inter', 'Noto Sans TC', 'Noto Emoji', sans-serif; font-weight: 300; text-shadow: 0 0 8px rgba(0,0,0,.9); }
body.orbit .pill .pl-play { border-radius: 50%; border-color: rgba(243,230,204,.35); }
body.street .pill { background: linear-gradient(90deg, rgba(255,61,240,.14), rgba(40,230,255,.06)); border-left: 2px solid var(--accent); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%); font-family: 'JetBrains Mono', 'Noto Sans TC', 'Noto Emoji', monospace; }
body.street .pill .pl-play { border-color: var(--neon, #28e6ff); color: var(--neon, #28e6ff); }

/* ---------- 邊緣把手 ---------- */
.edge-h { position: fixed; top: 50%; width: 14px; height: 120px; margin-top: -60px; z-index: 21; cursor: pointer; }
.edge-h::after { content: ''; position: absolute; top: 0; bottom: 0; width: 2px; background: linear-gradient(transparent, color-mix(in srgb, var(--accent) 70%, transparent), transparent); opacity: .55; transition: opacity .25s, width .25s; }
.edge-h.l { left: 0; } .edge-h.l::after { left: 5px; } .edge-h.r { right: 0; } .edge-h.r::after { right: 5px; }
.edge-h:hover::after { opacity: 1; width: 3px; }
body.left-open .edge-h.l, body.right-open .edge-h.r, body.touring .edge-h { display: none; }

/* ---------- 空狀態 ---------- */
.empty-card { position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%); z-index: 23; width: min(460px, calc(100vw - 40px)); padding: 16px 20px 16px; text-align: center; background: var(--holo-bg); border: 1px solid var(--hud-faint); backdrop-filter: blur(12px); animation: nbIn .4s ease-out; }
.empty-card .x-btn { position: absolute; right: 8px; top: 8px; }
.empty-card .ec-k { font: 9.5px var(--mono); letter-spacing: .4em; color: var(--accent); margin-bottom: 6px; }
.empty-card b { font-size: 16px; font-weight: 400; letter-spacing: .04em; }
.empty-card p { margin: 6px 0 12px; font-size: 12.5px; color: var(--dim); }
.empty-card .ec-b { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
body.orbit .empty-card { background: radial-gradient(ellipse at center, rgba(4,4,6,.82), rgba(4,4,6,.5) 60%, transparent 78%); border: none; border-top: 1px solid rgba(243,230,204,.25); backdrop-filter: none; text-shadow: 0 0 10px #000, 0 0 3px #000; }
body.orbit .empty-card b { font-weight: 200; font-size: 19px; letter-spacing: .12em; }
body.player-open .empty-card { bottom: 186px; }

/* ---------- 新手教學 ---------- */
.tour { position: fixed; inset: 0; z-index: 95; }
.tour-ring { position: absolute; border: 1px solid var(--accent); box-shadow: 0 0 0 200vmax rgba(2,2,6,.62), 0 0 26px color-mix(in srgb, var(--accent) 55%, transparent) inset, 0 0 26px color-mix(in srgb, var(--accent) 40%, transparent); transition: all .5s cubic-bezier(.16,1,.3,1); pointer-events: none; }
.tour-ring.round { border-radius: 50%; }
.tour-card { position: absolute; padding: 18px 20px 14px; background: linear-gradient(165deg, rgba(14,13,14,.96), rgba(6,6,9,.95)); border: 1px solid var(--hud-dim); box-shadow: 0 30px 70px rgba(0,0,0,.6); transition: left .5s cubic-bezier(.16,1,.3,1), top .5s cubic-bezier(.16,1,.3,1); }
.tour-card .tc-k { display: flex; justify-content: space-between; font: 10px var(--mono); letter-spacing: .3em; color: var(--accent); }
.tour-card .tc-k span { color: var(--hud-dim); letter-spacing: .1em; }
.tour-card h3 { margin: 10px 0 8px; font-size: 19px; font-weight: 300; letter-spacing: .06em; }
.tour-card p { margin: 0; font-size: 13px; line-height: 1.75; color: color-mix(in srgb, var(--text) 82%, transparent); }
.tour-card p b { color: var(--accent); font-weight: 500; }
.tour-card kbd { font: 11px var(--mono); border: 1px solid var(--hud-dim); padding: 0 5px; }
.tour-foot { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.tour-foot select { width: auto; }
.tour-foot .ghost { border-color: transparent; opacity: .7; }
body.touring .topbar { z-index: 96; pointer-events: none; }

/* ---------- 城市層：偶爾的小雜訊（幅度很小） ---------- */
@keyframes jitA { 0% { transform: translate(0, 0); opacity: 1; } 20% { transform: translate(-1.5px, 0) skewX(-1.2deg); opacity: .82; } 40% { transform: translate(1px, .5px); opacity: 1; } 60% { transform: translate(-.5px, 0) skewX(.8deg); opacity: .9; } 100% { transform: translate(0, 0); opacity: 1; } }
@keyframes jitB { 0%, 100% { opacity: 1; filter: none; } 15% { opacity: .7; } 30% { opacity: 1; filter: drop-shadow(2px 0 rgba(40,230,255,.55)) drop-shadow(-2px 0 rgba(255,61,240,.55)); } 55% { opacity: .88; filter: none; } 70% { opacity: 1; } }
body.street .jit-a > * { animation: jitA .4s steps(5) 1; }
body.street .jit-b { animation: jitB .42s steps(6) 1; }
body.street.glitch .dock button.on, body.street.glitch .nb #novaQ, body.street.glitch .pill .pl-t { animation: jitA .2s steps(3) 1; }
@media (prefers-reduced-motion: reduce) { body.street .jit-a > *, body.street .jit-b { animation: none; } .pill.playing .pl-eq i { animation: none; height: 8px; } }

/* ---------- 窄螢幕 ---------- */
@media (max-width: 900px) {
  body.shell .brand-tag, body.shell .nb kbd.nb-k { display: none; }
  body.street .dock button { min-width: 0; padding: 8px 12px; } body.orbit .dock { gap: 16px; }
  .dock button small { letter-spacing: .1em; }
  .pill { bottom: 74px; right: 12px; } .pill .pl-t b, .pill .pl-t small { max-width: 110px; }
}

/* ---------- v0.11b：Dock 平常收起，滑鼠碰到畫面下緣才浮出 ---------- */
body.shell .dock { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(26px); transition: opacity .3s, transform .45s cubic-bezier(.16,1,.3,1), bottom .45s cubic-bezier(.16,1,.3,1); }
body.shell.chrome-bottom .dock, body.shell.touring .dock, body.shell .dock:hover { opacity: 1; pointer-events: auto; transform: translateX(-50%); }
body.shell.layer-swap .dock { opacity: 0; }
.edge-h.b { top: auto; bottom: 0; left: 50%; width: 160px; height: 12px; margin: 0 0 0 -80px; }
.edge-h.b::after { top: auto; bottom: 4px; left: 0; right: 0; width: auto; height: 2px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--g1, var(--accent)) 75%, transparent), transparent); }
.edge-h.b:hover::after { width: auto; height: 3px; }
body.chrome-bottom .edge-h.b, body.player-open .edge-h.b { opacity: 0; }
/* 右上角的頭像拿掉：個人介面改成滑鼠移到右邊緣滑出 */
body.shell #meAvatar { display: none !important; }
/* 城市層的橫向光帶跟著地球曲風換顏色 */
body.shell #crtBands i { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--g2) 30%, transparent) 12%, color-mix(in srgb, var(--g2) 16%, transparent) 60%, transparent); box-shadow: 0 6px 0 color-mix(in srgb, var(--g1) 10%, transparent); }
body.shell #crtBands i:nth-child(2) { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--g1) 28%, transparent) 30%, color-mix(in srgb, var(--g1) 14%, transparent) 80%, transparent); }
body.shell.glitch #crt::before { background: color-mix(in srgb, var(--g1) 22%, transparent); }

/* =============================================================
   v0.11 城市裡的人：全息頭像徽章
   ============================================================= */
.hav { position: relative; display: inline-flex; flex: none; width: 18px; height: 18px; vertical-align: middle; cursor: pointer; --hc: var(--c1, var(--accent)); }
.hav-in { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--hc) 85%, #fff); background: linear-gradient(135deg, color-mix(in srgb, var(--c1) 55%, transparent), color-mix(in srgb, var(--c2, var(--c1)) 40%, transparent)); box-shadow: 0 0 8px color-mix(in srgb, var(--hc) 60%, transparent); display: flex; align-items: center; justify-content: center; }
.hav-in img { width: 100%; height: 100%; object-fit: cover; opacity: .86; filter: saturate(.75) contrast(1.12) brightness(1.08); }
.hav-in b { font: 600 9px var(--mono); color: #fff; text-shadow: 0 0 6px var(--hc); letter-spacing: 0; }
.hav-in::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255,255,255,.14) 0 1px, transparent 1px 3px), linear-gradient(180deg, color-mix(in srgb, var(--hc) 30%, transparent), transparent 55%); mix-blend-mode: screen; }
.hav.me .hav-in { border-color: #fff; box-shadow: 0 0 0 1px var(--hc), 0 0 12px var(--hc); }
.hav.fr .hav-in { border-style: dashed; }
.hav-crown { position: absolute; left: 50%; top: -9px; width: 14px; height: 9px; margin-left: -7px; fill: #ffd76a; stroke: none; filter: drop-shadow(0 0 4px rgba(255,215,106,.9)); z-index: 2; }
.hav.md { width: 30px; height: 30px; } .hav.md .hav-in b { font-size: 13px; }
.hav.lg { width: 52px; height: 52px; } .hav.lg .hav-in b { font-size: 22px; } .hav.lg .hav-crown { width: 30px; height: 18px; margin-left: -15px; top: -20px; }
/* 城市標籤旁的小疊圖 */
.gl-ppl { display: inline-flex; align-items: center; margin-left: 8px; vertical-align: middle; }
.gl-ppl .hav { margin-left: -5px; } .gl-ppl .hav:first-child { margin-left: 0; }
.gl-ppl i { font: 400 9px var(--mono); font-style: normal; margin-left: 5px; opacity: .7; letter-spacing: .05em; }
.gl-ppl .hav-crown { width: 10px; height: 6px; margin-left: -5px; top: -6px; }
body.street .gl-ppl { display: none; } /* 拉近後改用展開的螺旋 */
/* 拉近後的螺旋 */
.people { position: fixed; inset: 0; z-index: 7; pointer-events: none; transition: opacity .5s; opacity: 0; }
.ppl-c { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.ppl-a, .ppl-more { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) scale(.2); opacity: 0; transition: transform .55s cubic-bezier(.16,1,.3,1) var(--d, 0s), opacity .35s var(--d, 0s); }
.ppl-c.show .ppl-a, .ppl-c.show .ppl-more { transform: translate(calc(var(--x) - 50%), calc(var(--y) - 50%)) scale(1); opacity: 1; }
.people.on .ppl-c.show .ppl-a, .people.on .ppl-c.show .ppl-more { pointer-events: auto; }
.ppl-a .hav:hover { z-index: 5; } .ppl-a .hav:hover .hav-in { transform: scale(1.18); box-shadow: 0 0 18px var(--hc); } .hav-in { transition: transform .2s, box-shadow .2s; }
.ppl-more { background: rgba(8,6,14,.75); border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); color: var(--text); font: 10px var(--mono); padding: 3px 8px; cursor: pointer; letter-spacing: .08em; clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); }
/* 城市層：一般人是切角方形；城主是大型全息投影 */
body.street .people .hav-in { border-radius: 0; clip-path: polygon(22% 0, 100% 0, 100% 78%, 78% 100%, 0 100%, 0 22%); border: none; box-shadow: none; background: linear-gradient(135deg, color-mix(in srgb, var(--c1) 60%, rgba(6,4,12,.6)), color-mix(in srgb, var(--c2, var(--c1)) 45%, rgba(6,4,12,.6))); }
body.street .people .hav { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--hc) 80%, transparent)) drop-shadow(1px 0 rgba(40,230,255,.5)) drop-shadow(-1px 0 rgba(255,61,240,.45)); }
body.street .people .hav.me { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 9px var(--hc)); }
.ppl-a.lord .hav.lg { animation: lordFloat 3.6s ease-in-out infinite, lordFlick 5.5s steps(1) infinite; }
.ppl-a.lord .hav-in { border-radius: 0 !important; clip-path: polygon(16% 0, 100% 0, 100% 84%, 84% 100%, 0 100%, 0 16%) !important; }
.ppl-a.lord .hav-in::before { content: ''; position: absolute; left: 0; right: 0; height: 34%; top: -40%; z-index: 1; background: linear-gradient(transparent, rgba(255,255,255,.34), transparent); mix-blend-mode: screen; animation: lordScan 2.8s linear infinite; }
.ppl-a.lord .hav-in img { opacity: .8; filter: saturate(.55) contrast(1.25) brightness(1.15) hue-rotate(-8deg); }
.ppl-a.lord .hav::after { content: ''; position: absolute; inset: -5px; pointer-events: none; background:
  linear-gradient(var(--hc), var(--hc)) 0 0 / 10px 1.5px no-repeat, linear-gradient(var(--hc), var(--hc)) 0 0 / 1.5px 10px no-repeat,
  linear-gradient(var(--hc), var(--hc)) 100% 100% / 10px 1.5px no-repeat, linear-gradient(var(--hc), var(--hc)) 100% 100% / 1.5px 10px no-repeat; }
.ppl-beam { position: absolute; left: 50%; top: 100%; width: 56px; height: 38px; margin-left: -28px; pointer-events: none; clip-path: polygon(8% 0, 92% 0, 56% 100%, 44% 100%); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 50%, transparent), transparent); opacity: .6; mix-blend-mode: screen; }
@keyframes lordFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes lordFlick { 0%, 100% { opacity: 1; } 47% { opacity: 1; } 48% { opacity: .55; } 49% { opacity: 1; } 50% { opacity: .75; } 51% { opacity: 1; } 82% { opacity: .85; } 83% { opacity: 1; } }
@keyframes lordScan { from { top: -40%; } to { top: 110%; } }
@media (prefers-reduced-motion: reduce) { .ppl-a.lord .hav.lg, .ppl-a.lord .hav-in::before { animation: none; } }
/* 篩選 */
.ppl-filter { position: fixed; left: 34px; bottom: 22px; z-index: 26; display: flex; align-items: center; gap: 2px; font: 10px var(--mono); letter-spacing: .14em; color: var(--hud-dim); opacity: .55; transition: opacity .3s; -webkit-user-select: none; user-select: none; }
.ppl-filter:hover { opacity: 1; }
.ppl-filter span { margin-right: 8px; text-transform: uppercase; }
.ppl-filter button { background: none; border: none; border-bottom: 1px solid transparent; color: color-mix(in srgb, var(--text) 60%, transparent); font: inherit; padding: 4px 7px; cursor: pointer; }
.ppl-filter button.on { color: var(--text); border-bottom-color: var(--g1, var(--accent)); }
body.left-open .ppl-filter, body.touring .ppl-filter, body.player-open .ppl-filter { opacity: 0; pointer-events: none; }

/* =============================================================
   v0.11c 頭像配色與透明度修正
   ============================================================= */
/* 遠景（星際效應）：不用曲風的鮮豔色，改成暖白細線、幾乎透明 */
body.orbit .gl-ppl .hav { --hc: #f3e6cc; }
body.orbit .gl-ppl .hav-in { background: rgba(243,230,204,.07); border: 1px solid rgba(243,230,204,.55); box-shadow: none; }
body.orbit .gl-ppl .hav-in b { font: 300 9px 'Inter', sans-serif; color: rgba(243,230,204,.92); text-shadow: none; }
body.orbit .gl-ppl .hav-in img { opacity: .8; filter: grayscale(.55) sepia(.3) brightness(1.05); }
body.orbit .gl-ppl .hav-in::after { display: none; }
body.orbit .gl-ppl .hav.me .hav-in { border-color: #fff; box-shadow: 0 0 8px rgba(243,230,204,.5); }
body.orbit .gl-ppl .hav-crown { fill: none; stroke: #e8c98f; stroke-width: 1.4; filter: none; }
body.orbit .gl-ppl i { color: rgba(243,230,204,.6); font-family: 'Inter', sans-serif; font-weight: 300; }
/* 城市層（Cyberpunk）：改成透光的全息投影 — 只有外框和掃描線是亮的，中間看得到後面的地圖 */
body.street .people .hav-in { background: linear-gradient(180deg, color-mix(in srgb, var(--c1) 20%, transparent), color-mix(in srgb, var(--c2, var(--c1)) 7%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hc) 75%, transparent), inset 0 0 12px color-mix(in srgb, var(--hc) 30%, transparent); backdrop-filter: none; }
body.street .people .hav-in b { color: color-mix(in srgb, var(--hc) 45%, #fff); opacity: .92; text-shadow: 0 0 8px var(--hc), 1px 0 rgba(40,230,255,.5), -1px 0 rgba(255,61,240,.45); font-weight: 400; }
body.street .people .hav-in img { opacity: .5; mix-blend-mode: screen; filter: saturate(.5) contrast(1.3) brightness(1.25); }
body.street .people .hav-in::after { background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--hc) 34%, transparent) 0 1px, transparent 1px 3px); mix-blend-mode: screen; opacity: .8; }
body.street .people .hav { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--hc) 55%, transparent)); }
body.street .people .hav.me .hav-in { box-shadow: inset 0 0 0 1.5px #fff, inset 0 0 14px color-mix(in srgb, var(--hc) 55%, transparent); }
body.street .people .ppl-a.lord .hav-in { background: linear-gradient(180deg, color-mix(in srgb, var(--c1) 26%, transparent), color-mix(in srgb, var(--c1) 6%, transparent)); }
body.street .people .ppl-a.lord .hav-in img { opacity: .55; }
.ppl-beam { opacity: .35; }

/* =============================================================
   v0.11c 分區排行榜
   ============================================================= */
.lb-mode { display: flex; gap: 2px; }
.lb-mode button, .lb-scopes button { background: none; border: 1px solid transparent; color: color-mix(in srgb, var(--text) 62%, transparent); font: 11px var(--font); padding: 4px 9px; cursor: pointer; letter-spacing: .06em; white-space: nowrap; }
.lb-mode button.on { color: var(--text); border-color: color-mix(in srgb, var(--g1, var(--accent)) 70%, transparent); background: color-mix(in srgb, var(--g1, var(--accent)) 14%, transparent); }
.lb-scopes { display: flex; flex-wrap: wrap; gap: 2px 0; padding: 8px 10px 6px; border-bottom: 1px solid var(--hud-faint); }
.lb-scopes button { padding: 4px 8px; border: none; border-bottom: 1px solid transparent; }
.lb-scopes button:hover { color: var(--text); }
.lb-scopes button.on { color: var(--text); border-bottom-color: var(--g1, var(--accent)); }
.lb-row.mine { background: color-mix(in srgb, var(--g1, var(--accent)) 10%, transparent); }
.lb-s em { font-style: normal; color: var(--warn); }
.lb-empty { padding: 28px 18px; text-align: center; font-size: 12.5px; line-height: 1.8; color: var(--dim); }
.lb-foot { padding: 10px 14px 12px; border-top: 1px solid var(--hud-faint); font-size: 11px; line-height: 1.65; color: var(--dim); }
.lb-foot b { color: var(--text); font-weight: 400; font-size: 12px; }
body.street .lb-mode button, body.street .lb-scopes button { font-family: 'JetBrains Mono', 'Noto Sans TC', monospace; font-size: 10.5px; }
body.orbit .lb-mode button, body.orbit .lb-scopes button { font-family: 'Inter', 'Noto Sans TC', sans-serif; font-weight: 300; }
body.orbit .lb-mode button.on { border-color: rgba(232,201,143,.6); background: rgba(232,201,143,.1); }
body.orbit .lb-scopes button.on { border-bottom-color: #e8c98f; }
body.orbit .lb-row.mine { background: rgba(232,201,143,.08); }

/* =============================================================
   v0.12 拉新：訪客、徽章、分享、落地卡、聽眾
   ============================================================= */
.guest-chip { display: none; background: none; border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); color: var(--text); font: 11px var(--font); letter-spacing: .08em; padding: 6px 12px; cursor: pointer; white-space: nowrap; }
body.guest .guest-chip { display: inline-flex; } body.guest #creditChip { display: none; }
body.orbit .guest-chip { border-radius: 16px; border-color: rgba(243,230,204,.4); font-family: 'Inter', 'Noto Sans TC', sans-serif; font-weight: 300; }
#globe canvas { touch-action: none; }

/* 徽章 */
.bdg-sec .sec-t { margin-bottom: 8px; }
.bdg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.bdg { --bc: #e8c98f; position: relative; padding: 10px 10px 9px; display: flex; flex-direction: column; gap: 3px; border: 1px solid color-mix(in srgb, var(--bc) 45%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--bc) 14%, transparent), transparent 70%); overflow: hidden; }
.bdg::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--bc) 10%, transparent) 0 1px, transparent 1px 3px); }
.bdg .ic { width: 22px; height: 22px; color: var(--bc); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--bc) 70%, transparent)); }
.bdg b { font-size: 12.5px; font-weight: 500; color: var(--text); letter-spacing: .03em; }
.bdg small { font-size: 10.5px; line-height: 1.45; color: var(--dim); }
.t-gold { --bc: #e8c98f; } .t-silver { --bc: #b9d4e6; } .t-bronze { --bc: #d39a74; } .t-holo { --bc: #8ff3ff; }
.bdg.t-holo { border-image: linear-gradient(135deg, #6ff7ff, #ff3df0, #ffd76a) 1; }
.bdg.t-holo .ic { color: #fff; filter: drop-shadow(0 0 5px #6ff7ff) drop-shadow(0 0 9px #ff3df0); }
.bdg-goal-t { margin: 14px 0 6px; font: 10px var(--mono); letter-spacing: .24em; color: var(--hud-dim); text-transform: uppercase; }
.bdg-goals { display: flex; flex-direction: column; gap: 6px; }
.bdg-goal { --bc: #888; display: flex; gap: 10px; align-items: center; padding: 7px 10px; border: 1px dashed color-mix(in srgb, var(--bc) 35%, transparent); opacity: .72; }
.bdg-goal .ic { width: 18px; height: 18px; color: color-mix(in srgb, var(--bc) 70%, #777); }
.bdg-goal b { display: block; font-size: 12px; font-weight: 500; } .bdg-goal small { display: block; font-size: 10.5px; color: var(--dim); }
.bdg-minis { display: inline-flex; gap: 3px; margin-left: 8px; vertical-align: middle; }
.bdg-mini { --bc: #e8c98f; display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; border: 1px solid color-mix(in srgb, var(--bc) 55%, transparent); }
.bdg-mini .ic { width: 12px; height: 12px; color: var(--bc); }
.bdg-celebrate { text-align: center; }
.bdg-celebrate .bdg-k { font: 10px var(--mono); letter-spacing: .4em; color: var(--accent); margin: 4px 0 16px; }
.bdg-big { --bc: #e8c98f; width: 96px; height: 96px; margin: 6px auto 12px; display: flex; align-items: center; justify-content: center; clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--bc) 45%, transparent), color-mix(in srgb, var(--bc) 8%, transparent) 70%); animation: bdgIn .7s cubic-bezier(.16,1,.3,1); }
.bdg-big .ic { width: 46px; height: 46px; color: #fff; stroke-width: 1.2; filter: drop-shadow(0 0 10px var(--bc)); }
.bdg-big.t-holo { background: conic-gradient(from 200deg, rgba(111,247,255,.45), rgba(255,61,240,.4), rgba(255,215,106,.4), rgba(111,247,255,.45)); }
.bdg-celebrate h2 { margin: 0 0 4px !important; }
.bdg-celebrate p { margin: 0 0 14px; color: var(--dim); }
@keyframes bdgIn { from { transform: scale(.3) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }
.pioneer-hint { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; padding: 8px 10px; border-left: 2px solid #e8c98f; background: rgba(232,201,143,.08); font-size: 12px; line-height: 1.6; }
.pioneer-hint .ic { width: 16px; height: 16px; color: #e8c98f; margin-top: 2px; }
.pioneer-hint b { color: #f3e6cc; font-weight: 500; }
.pioneer-hint.sm { margin: 8px 0 2px; font-size: 11.5px; }
.ec-founder { color: #e8c98f; font-weight: 500; letter-spacing: .04em; }

/* 分享 */
.share-btn .ic { width: 15px; height: 15px; }
.sh-link span { font-size: 11.5px; }
.sh-card { position: relative; margin: 12px auto 4px; height: min(46vh, 430px); aspect-ratio: 9 / 16; background: #050407; border: 1px solid var(--hud-faint); }
.sh-card canvas { width: 100%; height: 100%; display: block; }
.sh-load { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--dim); }

/* 聽眾 */
.ls-list { display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow-y: auto; }
.ls-row { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 9px 4px 11px; border-bottom: 1px solid var(--hud-faint); font-size: 13px; }
.ls-row b { font-weight: 500; } .ls-row span { font: 12px var(--mono); color: var(--accent); text-align: right; } .ls-row small { grid-column: 1 / -1; font-size: 11px; color: var(--dim); }
.ls-row i { position: absolute; left: 4px; right: 4px; bottom: 4px; height: 2px; background: rgba(255,255,255,.07); }
.ls-row i::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p) * 100%); background: var(--accent); }

/* 分享連結落地卡 */
.landing { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px; background: radial-gradient(ellipse at center, rgba(3,3,6,.35), rgba(3,3,6,.78)); animation: nbIn .35s ease-out; }
.ld-card { position: relative; width: min(420px, 100%); padding: 26px 24px 20px; text-align: center; background: linear-gradient(165deg, rgba(16,14,16,.94), rgba(6,6,9,.92)); border: 1px solid var(--hud-faint); box-shadow: 0 30px 80px rgba(0,0,0,.6); backdrop-filter: blur(14px); }
.ld-card .x-btn { position: absolute; right: 10px; top: 10px; }
.ld-k { font: 10px var(--mono); letter-spacing: .36em; color: var(--accent); }
.ld-from { margin-top: 14px; font-size: 13px; color: var(--dim); }
.ld-card h2 { margin: 6px 0 6px; font-size: 26px; font-weight: 300; letter-spacing: .03em; line-height: 1.3; }
.ld-meta { font-size: 12.5px; color: var(--dim); }
.ld-play { --c1: #e8c98f; margin: 22px auto 14px; width: 84px; height: 84px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 1px solid var(--c1); background: radial-gradient(circle, color-mix(in srgb, var(--c1) 30%, transparent), transparent 70%); color: #fff; cursor: pointer; box-shadow: 0 0 0 8px color-mix(in srgb, var(--c1) 10%, transparent), 0 0 40px color-mix(in srgb, var(--c1) 45%, transparent); animation: ldPulse 2.4s ease-in-out infinite; }
.ld-play .ic { width: 26px; height: 26px; fill: currentColor; stroke: none; margin-left: 4px; } .ld-play span { font-size: 10px; letter-spacing: .2em; }
@keyframes ldPulse { 50% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--c1) 6%, transparent), 0 0 56px color-mix(in srgb, var(--c1) 55%, transparent); } }
.ld-note { min-height: 1em; margin: 0 0 14px; font-size: 11.5px; line-height: 1.6; color: var(--dim); }
.ld-foot { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
body.street .ld-card { border: none; border-left: 2px solid var(--accent); border-bottom: 1px solid var(--neon, #28e6ff); background: linear-gradient(165deg, rgba(16,4,26,.94), rgba(4,6,16,.92)); }
@media (prefers-reduced-motion: reduce) { .ld-play, .bdg-big { animation: none; } }

/* =============================================================
   v0.13 版本與可編輯的時間軸註解、Demo 格子
   ============================================================= */
.c-main { min-width: 0; flex: 1; }
.c-ver { display: inline-block; margin-left: 6px; padding: 0 5px; font: 10px var(--mono); color: var(--accent2, #7fc8e8); border: 1px solid color-mix(in srgb, var(--accent2, #7fc8e8) 45%, transparent); vertical-align: 1px; }
.c-done { margin-left: 6px; font-size: 10.5px; color: #7fe0a8; }
.comment.resolved { opacity: .55; } .comment.resolved .c-text { text-decoration: line-through; text-decoration-color: rgba(255,255,255,.25); }
.c-acts { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: 4px; }
.c-acts .tr-btn { opacity: .7; } .comment:hover .c-acts .tr-btn { opacity: 1; }
.c-edit { width: 100%; min-height: 64px; margin-top: 4px; font-size: 13px; }
.c-filter { display: flex; justify-content: space-between; margin: 0 0 6px; font-size: 11px; color: var(--dim); }
.ver-ab { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; font-size: 11px; color: var(--dim); }
.ver-ab button { background: none; border: 1px solid var(--hud-faint); color: color-mix(in srgb, var(--text) 75%, transparent); font: 11px var(--mono); padding: 4px 9px; cursor: pointer; }
.ver-ab button.on { color: #fff; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.ver-ab small { flex-basis: 100%; font-size: 10.5px; opacity: .8; }
.slot-bar { display: flex; align-items: center; gap: 12px; margin: 2px 0 12px; padding: 10px 12px; border: 1px solid var(--hud-faint); background: rgba(255,255,255,.02); }
.slot-bar > div { flex: 1; min-width: 0; position: relative; padding-bottom: 8px; }
.slot-bar b { display: block; font-size: 13px; font-weight: 500; } .slot-bar small { display: block; font-size: 10.5px; color: var(--dim); line-height: 1.5; margin-top: 2px; }
.slot-bar i { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.08); }
.slot-bar i::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p) * 100%); background: var(--accent); }
.vi-foot label.btn { cursor: pointer; }