:root{--bg: #0f0f12;--panel: #1b1b20;--panel-2: #24242b;--text: #f3f2ee;--muted: #a8a6a0;--accent: #d6a55a;--accent-2: #b9885a;--border: #2e2e36;--slot: #2a2a33}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden}body{display:grid;grid-template-rows:56px 1fr 220px;grid-template-areas:"topbar" "stage" "palette"}.topbar{grid-area:topbar;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:var(--panel);border-bottom:1px solid var(--border)}.brand{font-weight:700;letter-spacing:.04em;color:var(--accent)}.actions{display:flex;gap:10px;align-items:center}.actions label{color:var(--muted);display:inline-flex;gap:6px;align-items:center;font-size:12px}select,input,button{background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:6px 10px;font:inherit}.btn{cursor:pointer}.btn.primary{background:var(--accent);color:#1a1208;border-color:var(--accent-2);font-weight:600}.btn.primary:hover{background:#e3b366}.btn.ghost{background:transparent}.btn.ghost:hover{background:var(--panel-2)}#stage{grid-area:stage;position:relative;overflow:hidden}#stage.drop-hover:after{content:"";position:absolute;top:12px;right:12px;bottom:12px;left:12px;border:2px dashed var(--accent);border-radius:10px;pointer-events:none}#c{display:block;width:100%;height:100%}.status{position:absolute;top:12px;left:12px;padding:6px 10px;background:#0009;border:1px solid var(--border);border-radius:6px;font-size:12px;color:var(--muted)}.palette{grid-area:palette;background:var(--panel);border-top:1px solid var(--border);display:flex;flex-direction:column;min-height:0}.palette-tabs{display:flex;gap:4px;padding:6px 10px 0;border-bottom:1px solid var(--border)}.tab{background:transparent;border:1px solid transparent;border-bottom:none;padding:6px 12px;color:var(--muted);border-radius:6px 6px 0 0;cursor:pointer}.tab.active{background:var(--panel-2);border-color:var(--border);color:var(--text)}.pane{flex:1;display:none;overflow:auto;padding:10px;gap:10px;flex-wrap:wrap;align-content:flex-start}.pane.active{display:flex}.bead-chip{display:flex;flex-direction:column;align-items:center;width:76px;padding:6px;background:var(--panel-2);border:1px solid var(--border);border-radius:8px;cursor:grab;-webkit-user-select:none;user-select:none;text-align:center}.bead-chip:active{cursor:grabbing}.bead-chip .swatch{width:48px;height:48px;border-radius:50%;margin-bottom:6px;box-shadow:inset -6px -6px 10px #00000059,inset 4px 4px 8px #ffffff1f}.bead-chip .label{font-size:11px;color:var(--muted);line-height:1.1}.bead-chip .sizes{display:flex;gap:3px;margin-top:4px;flex-wrap:wrap;justify-content:center}.bead-chip .size{font-size:10px;padding:1px 5px;border-radius:10px;background:var(--slot);color:var(--muted);border:1px solid var(--border);cursor:pointer}.bead-chip .size.active{background:var(--accent);color:#1a1208;border-color:var(--accent-2)}.tray-empty{color:var(--muted);padding:10px;font-style:italic}dialog{background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:10px;padding:16px;max-width:480px;width:90%}dialog::backdrop{background:#0000008c}dialog input{width:100%;margin-top:6px}.dialog-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}