/* Vẽ đôi — tô màu theo số */
#view-paint{background:radial-gradient(120% 70% at 50% 0%,#241a44,#160E30 70%);z-index:3;overflow:hidden}
.pprog{font-family:var(--serif);font-size:20px;font-weight:700;line-height:1}
.pbar{height:5px;border-radius:999px;background:rgba(255,255,255,.1);margin:2px 18px 6px;overflow:hidden}
.pbar i{display:block;height:100%;width:0;background:var(--grad);border-radius:999px;transition:width .2s}
#pcv{flex:1;width:100%;display:block;min-height:0;touch-action:none}
.ppalette{display:flex;gap:9px;overflow-x:auto;padding:12px 16px calc(16px + env(safe-area-inset-bottom,0px));scrollbar-width:none}
.ppalette::-webkit-scrollbar{display:none}
.sw{flex:0 0 auto;width:48px;height:48px;border-radius:13px;position:relative;border:2px solid rgba(255,255,255,.16);transition:transform .1s}
.sw.sel{border-color:#fff;transform:scale(1.1);box-shadow:0 6px 16px -4px rgba(0,0,0,.5)}
.sw.done{opacity:.45}
.sw span{position:absolute;inset:0;display:grid;place-items:center;font-size:14px;font-weight:800;color:rgba(20,10,30,.7);text-shadow:0 1px 1px rgba(255,255,255,.4)}
.picker-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.picker-item{position:relative;aspect-ratio:1;border-radius:14px;background:var(--card);border:1px solid var(--line);overflow:hidden;display:grid;place-items:center}
.picker-item:active{transform:scale(.96)}
.picker-item canvas{width:82%;height:82%;image-rendering:pixelated}
.picker-item .pn{position:absolute;bottom:0;left:0;right:0;font-size:10.5px;color:var(--dim);text-align:center;padding:3px;background:rgba(12,8,26,.5)}
.pdone{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(16,10,34,.72);backdrop-filter:blur(4px);z-index:8}
.pdone[hidden]{display:none}.pdone.on{display:flex}
.pdone-in{text-align:center;font-size:52px}
.pdone-t{font-family:var(--serif);font-size:26px;font-weight:700;margin:6px 0 18px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.pdone .cta{max-width:220px;font-size:15px;padding:14px}
.pzoom{position:absolute;right:12px;bottom:92px;display:flex;flex-direction:column;gap:6px;z-index:6}
.pzoom button{width:42px;height:42px;border-radius:12px;background:rgba(28,19,56,.85);border:1px solid var(--line);color:var(--ink);font-size:20px;font-weight:700;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pzoom button:active{transform:scale(.92)}