:root{--bg: #070b14;--panel: #101826;--line: #243049;--text: #e8eefc;--muted: #8b9bb8;--accent: #f5c518;--accent2: #5b8cff;--font: "Segoe UI", system-ui, sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:var(--font)}#app{min-height:100%;display:flex;flex-direction:column}.top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);background:#0c1324}.brand{display:flex;gap:10px;align-items:center}.logo{font-size:28px}.tag{color:var(--muted);font-size:12px}.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.btn{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:8px 12px;cursor:pointer;font-weight:600;text-decoration:none;display:inline-block}.btn.primary{background:#2a2110;border-color:#6b5420;color:var(--accent)}.btn.active{outline:2px solid var(--accent2)}.layout{flex:1;display:grid;grid-template-columns:1fr 320px;min-height:0}.stage{position:relative;background:radial-gradient(ellipse at 50% 30%,#1a2744,#070b14 55%,#04060c);display:grid;place-items:center;min-height:480px;overflow:hidden}#view{width:min(100%,960px);height:auto;max-height:calc(100vh - 100px);border-radius:14px;border:1px solid var(--line);cursor:grab;background:transparent;touch-action:none}#view:active{cursor:grabbing}.hint{position:absolute;left:16px;bottom:12px;color:var(--muted);font-size:12px;background:#0008;padding:6px 10px;border-radius:8px}.badge{position:absolute;right:16px;top:12px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:#5b8cff33;color:#9ec1ff;border:1px solid #5b8cff66;padding:5px 10px;border-radius:999px}.stage-load{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#060910cc;color:var(--text);font-size:14px;font-weight:600;z-index:5;pointer-events:none;transition:opacity .25s ease;text-align:center;padding:16px}.stage-load.hidden{opacity:0;visibility:hidden}.stage-load-spin{width:40px;height:40px;border-radius:50%;border:3px solid #243049;border-top-color:var(--accent2);animation:beear-spin .8s linear infinite}@keyframes beear-spin{to{transform:rotate(360deg)}}.rail{border-left:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;min-height:0}.rail-head{display:flex;justify-content:space-between;align-items:center;padding:12px;border-bottom:1px solid var(--line)}.rail-head h2{margin:0;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}#filter{background:#0b1222;color:var(--text);border:1px solid var(--line);border-radius:8px;padding:6px 8px}.pd-panel{padding:10px 12px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:10px;font-size:12px;color:var(--muted)}.pd-panel label{display:flex;flex-direction:column;gap:4px}.pd-panel input[type=range]{width:100%}.catalog{flex:1;overflow:auto;padding:10px;display:flex;flex-direction:column;gap:8px}.sku{border:1px solid var(--line);border-radius:12px;padding:10px;background:#0d1528;cursor:pointer;display:grid;grid-template-columns:64px 1fr;gap:10px}.sku:hover,.sku.on{border-color:var(--accent2)}.sku img{width:64px;height:40px;object-fit:contain;background:#fff1;border-radius:6px}.sku h3{margin:0;font-size:13px}.sku p{margin:2px 0 0;color:var(--muted);font-size:11px}.meta{border-top:1px solid var(--line);padding:10px 12px;font-size:12px;color:var(--muted);min-height:64px}@media (max-width: 900px){.layout{grid-template-columns:1fr}.rail{border-left:none;border-top:1px solid var(--line);max-height:42vh}}