:root{color-scheme:dark;--bg-studio: #24252b;--panel-bg: rgba(20, 21, 28, .84);--panel-border: rgba(168, 132, 224, .24);--accent-purple: #9d4edd;--accent-gold: #c9a24d;--text-main: #eef0f6;--text-muted: #a2a7b8}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden;background:var(--bg-studio);color:var(--text-main);font-family:Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;-webkit-user-select:none;user-select:none}#canvas-container{position:fixed;top:0;right:0;bottom:0;left:0;width:100vw;height:100vh}.hud-panel{position:fixed;background:var(--panel-bg);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:10px;box-shadow:0 12px 32px #0000008c;z-index:10}#hud-header{top:14px;left:16px;right:16px;padding:10px 18px;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand-block{display:flex;align-items:center;gap:12px}.badge-tag{background:linear-gradient(135deg,#4b1d7a,#24103a);border:1px solid rgba(186,118,255,.45);color:#e6c8ff;font-size:11px;font-weight:700;letter-spacing:.06em;padding:4px 8px;border-radius:5px}#hud-header h1{font-size:16px;font-weight:600;color:#f4f6fb}#hud-header h1 small{font-size:12px;color:var(--text-muted);font-weight:400;margin-left:8px}.stats-pill{font-size:12px;color:#d6dae6;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);padding:5px 12px;border-radius:999px}#hud-controls{top:72px;left:16px;width:296px;padding:14px;display:flex;flex-direction:column;gap:14px;max-height:calc(100vh - 88px);overflow-y:auto}.control-group h2{font-size:12px;font-weight:600;color:var(--accent-gold);letter-spacing:.03em;margin-bottom:8px;text-transform:uppercase}.btn-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:6px}.btn-stack{display:flex;flex-direction:column;gap:6px}.ctrl-btn{background:#ffffff0f;border:1px solid rgba(255,255,255,.12);color:var(--text-main);font-size:12px;padding:7px 10px;border-radius:6px;cursor:pointer;transition:all .15s ease;text-align:center}.ctrl-btn:hover{background:#9d4edd38;border-color:#b976f580}.ctrl-btn.active{background:linear-gradient(135deg,#7c2ac48c,#421670b8);border-color:#c278ff;color:#fff;font-weight:600}.ctrl-btn.primary-btn{background:linear-gradient(135deg,#6a22b5,#3d126e);border-color:#b76eff;font-weight:600}.ctrl-btn.primary-btn:hover{background:linear-gradient(135deg,#7f2dd4,#4d1888)}.audit-box{border-top:1px solid rgba(255,255,255,.1);padding-top:10px}.audit-list{list-style:none;font-size:11.5px;color:#cfd4e2;display:flex;flex-direction:column;gap:4px;line-height:1.45}.audit-list li.ok:before{content:"✓ ";color:#52e088;font-weight:700}#ref-overlay{bottom:16px;right:16px;width:340px;padding:10px}#ref-overlay.hidden,body.clean-capture .hud-panel{display:none!important}.ref-header{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--text-muted);margin-bottom:6px}.close-btn{background:none;border:none;color:var(--text-main);font-size:16px;cursor:pointer}#ref-overlay img{width:100%;border-radius:6px;display:block}