:root{ --cyan:#33e1ff; --amber:#f5b642; --ink:#d3ecf6; --muted:#6f97a8; --line:#1d4a5e;
  --panel:rgba(6,14,20,.72); --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace; }
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; background:#04070b; overflow:hidden; font-family:var(--mono); }
#canvas-container{ position:fixed; inset:0; }
#ui-overlay{ position:fixed; inset:0; pointer-events:none; z-index:10; transition:opacity .2s; }
#ui-overlay.hidden{ opacity:0; }
.hud{ position:absolute; pointer-events:auto; }
.top-right{ top:12px; right:14px; display:flex; gap:8px; }
.bottom-bar{ left:50%; bottom:16px; transform:translateX(-50%); display:flex; gap:6px; align-items:center;
  padding:7px 9px; background:var(--panel); border:1px solid var(--line); border-radius:10px; backdrop-filter:blur(6px);
  max-width:96vw; white-space:nowrap; }
.btn{ font:inherit; font-size:12px; color:var(--ink); text-decoration:none; cursor:pointer; white-space:nowrap;
  background:#0b1c27; border:1px solid var(--line); border-radius:7px; padding:7px 11px; }
.btn:hover{ border-color:var(--cyan); color:#fff; }
.btn.primary{ background:var(--cyan); color:#04222e; border-color:var(--cyan); font-weight:600; }
.btn.ghost{ background:transparent; color:var(--muted); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.style-btn{ font:inherit; font-size:12.5px; color:var(--muted); cursor:pointer;
  background:var(--panel); border:1px solid var(--line); border-radius:7px; padding:7px 13px; backdrop-filter:blur(6px); }
.style-btn:hover{ color:var(--ink); border-color:var(--cyan); }
.style-btn.active{ color:#04222e; background:var(--cyan); border-color:var(--cyan); font-weight:600; }
.passive{ margin-left:4px; font-size:11px; color:#4b93b0; border:1px solid var(--line); border-radius:20px; padding:3px 10px; }

.settings-panel{ position:absolute; top:58px; right:14px; width:262px; display:flex; flex-direction:column; gap:8px;
  padding:14px; background:var(--panel); border:1px solid var(--line2); border-radius:10px; backdrop-filter:blur(6px); }
.settings-panel[hidden]{ display:none; }
.sp-title{ font-size:13px; color:var(--cyan); letter-spacing:.05em; }
.settings-panel label{ display:flex; flex-direction:column; gap:3px; font-size:11px; color:var(--muted); }
.settings-panel input{ font:inherit; font-size:12px; color:var(--ink); background:#0b1c27; border:1px solid var(--line2); border-radius:6px; padding:6px 8px; }
.sp-hint{ opacity:.65; }
.sp-rule{ height:1px; background:var(--line); margin:3px 0; }
.sp-note{ font-size:10.5px; color:var(--muted); line-height:1.45; }

.trace-gate{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(4,7,11,.8); backdrop-filter:blur(3px); }
.trace-gate[hidden]{ display:none; }
.tg-card{ width:min(460px,92%); background:var(--panel); border:1px solid var(--amber); border-radius:12px; padding:20px; }
.tg-title{ font-size:15px; color:var(--amber); margin-bottom:6px; }
.tg-card p{ font-size:12.5px; color:var(--muted); line-height:1.5; margin:0 0 12px; }
.tg-affirm{ display:flex; gap:8px; align-items:flex-start; font-size:12px; color:var(--ink);
  background:#0b1c27; border:1px solid var(--line2); border-radius:8px; padding:9px 11px; margin-bottom:12px; }
.tg-actions{ display:flex; gap:8px; justify-content:flex-end; }

.hud-toast{ position:fixed; left:50%; bottom:64px; transform:translateX(-50%) translateY(10px); z-index:20;
  background:#0c1c27; border:1px solid var(--cyan); color:var(--ink); font-family:var(--mono); font-size:12.5px;
  padding:8px 14px; border-radius:8px; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; }
.hud-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }