/* styles.css */
html,body { height:100%; margin:0 }
body { display:flex; gap:12px; padding:12px; background:#111; color:#eee; font-family:system-ui,Segoe UI,Roboto,Arial }
.side { width:300px; display:flex; flex-direction:column; gap:12px }
.card { background:#1b1b1b; border-radius:10px; padding:12px; display:flex; flex-direction:column; gap:10px }
.row { display:flex; gap:8px; align-items:center }
.row>* { flex:1 }
.label { width:90px; flex:0 0 auto; opacity:.8 }
input,button,select { background:#232323; color:#eee; border:1px solid #333; border-radius:8px; padding:8px; outline:none }
input[type=number] { text-align:right }
input[type=file] { padding:6px }
button { cursor:pointer }
button:hover { background:#2a2a2a }
.btns { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px }
.canvasWrap { position:relative; flex:1; background:#0d0d0d; border-radius:12px; overflow:hidden; display:flex }
#beadCan { width:100%; height:100%; display:block; background:#0a0a0a }
.tip { font-size:12px; opacity:.7 }
.sep { height:1px; background:#2a2a2a; margin:6px 0 }
.pal { display:flex; gap:6px; flex-wrap:wrap }
.sw { width:22px; height:22px; border-radius:50%; border:1px solid #333; cursor:pointer }
.sw.sel { outline:2px solid #7ab7ff }
#colPick { height:50px; }