:root{
    --bg:#0f1114; --bg-soft:#14171b; --panel:#1a1f25; --line:#2a2f36;
    --text:#e8ebf0; --muted:#9aa3ad; --brand:#3aa6ff; --brand-2:#38f2b8; --danger:#ff8a8a;
    --radius:16px;
}
.viz-page{padding:16px}
.viz-shell{max-width:1280px;margin:auto}
.viz-topbar{display:flex;justify-content:space-between;align-items:center;background:var(--panel);
    border:1px solid var(--line); border-radius:var(--radius); padding:10px 14px; margin-bottom:12px}
.vt-left{display:flex;gap:12px;align-items:center}
.vt-menu{width:38px;height:34px;border-radius:10px;border:1px solid var(--line);background:transparent;display:grid;place-items:center}
.vt-menu span{display:block;width:18px;height:2px;background:#fff;margin:2px 0}
.vt-brand img{height:28px;display:block}
.vt-title{display:flex;flex-direction:column;line-height:1.1}
.vt-title strong{color:var(--text)}
.vt-title small{color:var(--muted)}
.lang-switch{display:flex;gap:6px}
.lang-switch button{border:1px solid var(--line);background:var(--bg-soft);color:var(--text);
    padding:.35rem .6rem;border-radius:999px}
.lang-switch button.active{outline:2px solid var(--brand)}
.viz-main{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:12px}
.viz-stage{width:100%;aspect-ratio:16/9;background:#0e0f12;border-radius:14px;overflow:hidden}
.viz-dock{margin-top:10px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px}
.dock-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.dock-tab{border:1px solid var(--line);background:#151a20;color:var(--text);padding:.45rem .7rem;border-radius:10px}
.dock-tab.active{background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#0c1015;border:none}
.dock-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.dock-search input{min-width:260px;padding:.6rem .8rem;border-radius:10px;border:1px solid var(--line);background:#10151a;color:var(--text);outline-color:var(--brand)}
.dock-toggle{margin-left:auto;display:flex;align-items:center;gap:8px;color:var(--muted)}
.dock-panel{background:#12161c;border:1px dashed var(--line);border-radius:10px;padding:10px}
.hidden{display:none}
.grid{display:grid;gap:10px}
.cards{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.card{border:1px solid var(--line);border-radius:12px;background:#0f1318;overflow:hidden}
.card .thumb{height:86px;background:#0b0e12;display:grid;place-items:center}
.card .thumb img{max-height:86px;max-width:100%;object-fit:contain}
.card .meta{padding:.55rem .6rem;display:flex;justify-content:space-between;align-items:center}
.card .meta .name{color:var(--text);font-weight:600}
.card .meta small{color:var(--muted)}
.swatches{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
.swatch{height:46px;border-radius:10px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;cursor:pointer}
.scenes{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.scene{height:70px;border-radius:10px;border:1px solid var(--line);overflow:hidden;cursor:pointer}
.scene img{width:100%;height:100%;object-fit:cover}
.empty{color:var(--muted);padding:.6rem}
.viz-error{color:var(--danger);min-height:1.2rem;margin-top:8px}