:root{--bg:#09090e;--bg2:#111118;--bg3:#18181f;--bd:rgba(255,255,255,.07);--bdh:rgba(255,255,255,.15);--tx:#eeeef4;--tx2:#8888a4;--gold:#c8973a;--gold2:#e8bc6a;--ok:#34d399;--err:#f87171}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:"DM Sans",sans-serif;background:var(--bg);color:var(--tx);font-size:14px;overflow:hidden}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-thumb{background:var(--bd);border-radius:3px}
.bar{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;border-bottom:1px solid var(--bd);background:rgba(9,9,14,.97);height:54px}
.brand{font-family:"Syne",sans-serif;font-weight:800;color:var(--gold2);font-size:16px}
.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tbtn{background:var(--bg3);border:1px solid var(--bd);color:var(--tx2);border-radius:8px;padding:7px 12px;font-size:12px;cursor:pointer;font-family:"DM Sans",sans-serif;transition:.15s}
.tbtn:hover{border-color:var(--bdh);color:var(--tx)}
.tbtn.active{background:rgba(200,151,58,.15);border-color:rgba(200,151,58,.4);color:var(--gold2)}
.sep{width:1px;height:20px;background:var(--bd)}
.status{font-size:12px;color:var(--tx2);margin-left:6px}
.app{display:grid;grid-template-columns:240px 1fr 240px;height:calc(100% - 54px)}
.panel{background:var(--bg2);overflow-y:auto;display:flex;flex-direction:column}
.panel-left{border-right:1px solid var(--bd)}
.panel-right{border-left:1px solid var(--bd)}
.panel-hd{font-family:"Syne",sans-serif;font-size:12px;font-weight:700;color:var(--gold2);text-transform:uppercase;letter-spacing:.5px;padding:14px 16px 8px}
.thumbs{display:flex;flex-direction:column;gap:8px;padding:4px 12px 12px}
.thumb{display:flex;align-items:center;gap:10px;background:var(--bg3);border:1px solid var(--bd);border-radius:10px;padding:8px;cursor:pointer;transition:.15s}
.thumb:hover{border-color:rgba(200,151,58,.4)}
.thumb.active{border-color:var(--gold);background:rgba(200,151,58,.1)}
.thumb img{width:48px;height:48px;object-fit:cover;border-radius:7px;background:var(--bg);flex:none}
.thumb .nm{font-size:12px;color:var(--tx)}
.viewport{position:relative;background:#0b0b11}
.viewport canvas{display:block}
.dropzone{display:flex;align-items:center;justify-content:center;text-align:center;margin:4px 12px 16px;padding:18px 12px;border:1.5px dashed var(--bd);border-radius:10px;color:var(--tx2);font-size:12px;line-height:1.6;cursor:pointer;transition:.15s}
.dropzone:hover,.dropzone.over{border-color:var(--gold);color:var(--gold2)}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(8px);background:var(--bg3);border:1px solid var(--bdh);border-radius:10px;padding:10px 18px;font-size:13px;z-index:999;opacity:0;transition:.3s;pointer-events:none;max-width:80vw}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{border-color:var(--err);color:#fecaca}