:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100vh;background:#0a0a0a;color:#fafafa}.shell{min-height:100vh;display:grid;place-items:center;padding:2rem}.necklace-app{max-width:34rem;width:100%;border:1px solid rgba(212,175,55,.2);padding:2rem;border-radius:1rem;background:linear-gradient(180deg,#140f0af2,#0a0a0af2);box-shadow:0 0 60px #d4af370d}h1{margin:0 0 .25rem;font-size:1.5rem;font-weight:600;letter-spacing:-.02em;color:#d4af37}.subtitle{margin:0 0 1.25rem;color:#ffffff73;font-size:.85rem}.necklace-svg{width:100%;height:auto;display:block;margin-bottom:1.25rem;cursor:default}.bead-group{transition:transform .15s ease}.bead-group:hover{filter:brightness(1.2)}.bead-selected .bead-group{filter:brightness(1.3)}.controls{display:flex;flex-direction:column;gap:1rem}.control-row{display:flex;gap:.75rem}.btn{padding:.5rem 1rem;border:1px solid rgba(255,255,255,.15);border-radius:.5rem;background:#ffffff0d;color:#fafafa;font-size:.85rem;cursor:pointer;transition:all .15s ease}.btn:hover:not(:disabled){background:#ffffff1a;border-color:#ffffff40}.btn:disabled{opacity:.35;cursor:not-allowed}.btn-add{flex:1;border-color:#d4af374d;color:#d4af37}.btn-add:hover{background:#d4af3726;border-color:#d4af3780}.btn-remove{flex:1;border-color:#e639464d;color:#e63946}.btn-remove:hover:not(:disabled){background:#e6394626;border-color:#e6394680}.bead-editor{background:#ffffff08;border:1px solid rgba(255,255,255,.08);border-radius:.75rem;padding:1rem;display:flex;flex-direction:column;gap:.75rem}.editor-section label{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.15em;color:#fff6;margin-bottom:.4rem}.type-buttons{display:flex;gap:.5rem}.btn-type{flex:1;text-transform:capitalize;font-size:.8rem;padding:.4rem .5rem}.btn-type.active{background:#d4af3733;border-color:#d4af3780;color:#d4af37}.color-palette{display:flex;flex-wrap:wrap;gap:.4rem}.color-swatch{width:28px;height:28px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:all .15s ease;padding:0}.color-swatch:hover{transform:scale(1.15)}.color-swatch.active{border-color:#fff;box-shadow:0 0 8px #ffffff4d}