/* ==========================================================================
   css/apps/paint.css
   Split from app.html (build 2026.10.08.9-beta), original lines 3682-3700.
   Rules are in their ORIGINAL order; load order is defined in index.html.
   ========================================================================== */
/* -- Paint / Canvas (App) -- */
.paint-topbar { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 16px; border-bottom:1px solid var(--border); flex-shrink:0; flex-wrap:wrap; }
.paint-swatches { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.paint-swatch { width:22px; height:22px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0; position:relative; transition:transform .1s; }
.paint-swatch:hover { transform:scale(1.12); }
.paint-swatch.active { border-color:var(--text-primary); box-shadow:0 0 0 2px var(--bg-surface), 0 0 0 4px var(--accent); }
.paint-custom { display:flex; align-items:center; justify-content:center; background:conic-gradient(from 0deg,#ef4444,#f59e0b,#eab308,#22c55e,#06b6d4,#3b82f6,#8b5cf6,#ec4899,#ef4444); overflow:hidden; }
.paint-custom input[type=color] { position:absolute; inset:0; opacity:0; cursor:pointer; }
.paint-tools { display:flex; align-items:center; gap:8px; }
.paint-tool { width:34px; height:34px; border-radius:9px; background:var(--bg-surface); border:1px solid var(--border); color:var(--text-secondary); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.paint-tool:hover { border-color:var(--border-strong); color:var(--text-primary); }
.paint-tool.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.paint-tool.danger:hover { background:color-mix(in srgb,#ef4444 18%,transparent); border-color:#ef4444; color:#ef4444; }
.paint-size { width:110px; accent-color:var(--accent); cursor:pointer; }
.paint-size-dot { display:inline-block; border-radius:50%; background:#111; flex-shrink:0; }
.paint-stage { flex:1; overflow:auto; display:flex; align-items:center; justify-content:center; padding:12px; background:repeating-conic-gradient(var(--bg-elevated) 0% 25%, var(--bg-surface) 0% 50%) 50% / 22px 22px; position:relative; }
#paintCanvas { background:#fff; border-radius:10px; box-shadow:0 18px 50px -20px rgba(0,0,0,.6); width:min(100%, 1800px); height:auto; aspect-ratio:16/9; touch-action:none; cursor:crosshair; max-height:100%; }
.paint-readonly { position:absolute; bottom:16px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,.7); color:#fff; font-size:12.5px; padding:7px 14px; border-radius:20px; }