:root{color-scheme:dark;--bg: #0c0f14;--panel: #141a24;--border: #243044;--text: #e8edf5;--muted: #8b9bb4;--accent: #3d8bfd;--accent-dim: #2563c9;--success: #3ecf8e;--danger: #f07178;font-family:DM Sans,system-ui,sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text)}#app{display:grid;grid-template-rows:auto 1fr;grid-template-columns:1fr;height:100vh}.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1.25rem;background:var(--panel);border-bottom:1px solid var(--border);z-index:2}.brand{display:flex;align-items:center;gap:.65rem}.brand-mark{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:.5rem;background:linear-gradient(135deg,var(--accent),#6c5ce7);font-weight:600;font-size:.7rem;letter-spacing:.04em}.brand-title{font-weight:600;font-size:1.05rem}.topbar-actions{display:flex;gap:.5rem;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;padding:.5rem 1rem;border-radius:.5rem;border:1px solid transparent;font:inherit;font-weight:500;cursor:pointer;transition:background .15s,border-color .15s}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-dim)}.btn-ghost{background:transparent;border-color:var(--border);color:var(--text)}.btn-ghost:hover{border-color:var(--muted)}.stage{position:relative;min-height:0}.viewer{width:100%;height:calc(100vh - 3.5rem)}.viewer canvas{display:block}.drop-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;pointer-events:none;background:radial-gradient(ellipse at center,rgba(61,139,253,.08),transparent 65%);transition:opacity .2s}.drop-overlay.hidden,body.viewer-busy .drop-overlay{opacity:0;visibility:hidden}.drop-overlay p{margin:0;font-size:1.1rem}.drop-overlay .hint{color:var(--muted);font-size:.9rem}.status{position:absolute;left:1rem;bottom:1rem;max-width:min(32rem,calc(100% - 2rem));padding:.5rem .85rem;border-radius:.5rem;background:#141a24eb;border:1px solid var(--border);font-size:.85rem;color:var(--muted)}.status.error{color:var(--danger);border-color:#f0717866}.status.ok{color:var(--success)}.sidebar{position:fixed;top:3.5rem;right:0;width:min(22rem,100vw);height:calc(100vh - 3.5rem);background:var(--panel);border-left:1px solid var(--border);padding:1rem;overflow-y:auto;z-index:3;transform:translate(100%);transition:transform .2s}.sidebar.open{transform:translate(0)}.sidebar h2{margin:0 0 .75rem;font-size:.95rem;font-weight:600}#library-list{list-style:none;margin:0;padding:0}#library-list li{margin-bottom:.35rem}#library-list button{width:100%;text-align:left;padding:.45rem .55rem;border:1px solid transparent;border-radius:.4rem;background:transparent;color:var(--text);font:inherit;cursor:pointer}#library-list button:hover{background:#3d8bfd1f;border-color:var(--border)}body.drag-active .drop-overlay{opacity:1;background:#3d8bfd1f}