:root{--bg:#0e1116;--bg-elev:#161b22;--bg-elev-2:#1c232d;--border:#2a323d;--text:#e6edf3;--text-dim:#9aa7b4;--accent:#3b82f6;--accent-hover:#2f6fd6;--danger:#ef4444;--radius:10px;--shadow:0 6px 24px #00000059}*{box-sizing:border-box}html,body{height:100%;margin:0;padding:0}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}.topbar{border-bottom:1px solid var(--border);background:var(--bg-elev);justify-content:space-between;align-items:center;height:56px;padding:0 20px;display:flex}.topbar .brand{letter-spacing:.2px;align-items:center;gap:10px;font-weight:650;display:flex}.topbar .brand .dot{background:var(--accent);width:10px;height:10px;box-shadow:0 0 12px var(--accent);border-radius:50%}.topbar .right{color:var(--text-dim);align-items:center;gap:14px;font-size:14px;display:flex}.btn{background:var(--accent);color:#fff;border:none;border-radius:8px;padding:9px 16px;font-weight:550;transition:background .15s}.btn:hover{background:var(--accent-hover)}.btn.ghost{border:1px solid var(--border);color:var(--text-dim);background:0 0}.btn.ghost:hover{background:var(--bg-elev-2);color:var(--text)}.container{max-width:1100px;margin:0 auto;padding:32px 20px 64px}.page-title{margin:0 0 4px;font-size:22px;font-weight:650}.page-sub{color:var(--text-dim);margin:0 0 28px;font-size:14px}.grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;display:grid}.card{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);transition:border-color .15s,transform .15s;overflow:hidden}.card:hover{border-color:var(--accent);transform:translateY(-2px)}.card .thumb{height:130px;color:var(--text-dim);background:radial-gradient(circle at 30% 30%,#223049,#12161d);justify-content:center;align-items:center;display:flex}.card .thumb svg{opacity:.6;width:48px;height:48px}.card .meta{padding:14px 16px}.card .meta .name{word-break:break-word;font-weight:600}.card .meta .sub{color:var(--text-dim);margin-top:4px;font-size:12.5px}.empty{border:1px dashed var(--border);border-radius:var(--radius);text-align:center;color:var(--text-dim);padding:48px 24px}.empty code{background:var(--bg-elev-2);color:var(--text);border-radius:6px;padding:2px 6px}.login-wrap{place-items:center;min-height:100vh;padding:20px;display:grid}.login-card{background:var(--bg-elev);border:1px solid var(--border);width:100%;max-width:380px;box-shadow:var(--shadow);border-radius:14px;padding:32px 28px}.login-card h1{align-items:center;gap:10px;margin:0 0 4px;font-size:20px;display:flex}.login-card p.hint{color:var(--text-dim);margin:0 0 24px;font-size:13.5px}.field{margin-bottom:16px}.field label{color:var(--text-dim);margin-bottom:6px;font-size:13px;display:block}.field input{background:var(--bg);border:1px solid var(--border);width:100%;color:var(--text);border-radius:8px;outline:none;padding:11px 12px;font-size:15px;transition:border-color .15s}.field input:focus{border-color:var(--accent)}.login-card .btn{width:100%;margin-top:4px;padding:12px}.error{color:#fca5a5;background:#ef44441f;border:1px solid #ef444466;border-radius:8px;margin-bottom:16px;padding:10px 12px;font-size:13.5px}.viewer-shell{display:flex;position:fixed;inset:56px 0 0}.viewer-canvas{flex:1;min-width:0;position:relative}.viewer-canvas canvas{display:block;width:100%!important;height:100%!important}.viewer-overlay{color:var(--text-dim);pointer-events:none;text-align:center;place-items:center;gap:10px;display:grid;position:absolute;inset:0}.spinner{border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:34px;height:34px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.sidebar{border-left:1px solid var(--border);background:var(--bg-elev);width:260px;padding:18px 16px;overflow-y:auto}.sidebar h3{text-transform:uppercase;letter-spacing:.6px;color:var(--text-dim);margin:0 0 12px;font-size:12px}.layer-row{border-radius:7px;align-items:center;gap:10px;padding:7px 6px;font-size:14px;display:flex}.layer-row:hover{background:var(--bg-elev-2)}.layer-row input{accent-color:var(--accent);width:15px;height:15px}.layer-row .swatch{border:1px solid #ffffff26;border-radius:3px;flex-shrink:0;width:12px;height:12px}.layer-row .lname{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}