.paint-room { position:fixed; inset:0; z-index:105; display:grid; grid-template-rows:minmax(0,1fr) auto; color:#fff8e6; background:#d9d3c6; font:15px/1.3 Arial,"Helvetica Neue",sans-serif; isolation:isolate; }
.paint-stage { position:relative; display:flex; align-items:center; justify-content:center; min-height:0; min-width:0; overflow:hidden; }
.paint-room .paint-paper { position:static; inset:auto; image-rendering:auto; display:block; background:#fff; box-shadow:0 3px 0 #0002, 0 10px 40px #0002; touch-action:none; cursor:crosshair; }
.paint-tools { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 14px; padding:10px max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); background:#2a2226; }
.paint-tools label { display:flex; align-items:center; gap:7px; font-size:14px; }
.paint-tools input[type=range] { width:110px; accent-color:#f2d24b; }
.paint-tools select { font:14px Arial,sans-serif; color:#fff8e6; background:#3c3236; border:1px solid #fff8e666; border-radius:4px; padding:6px; max-width:200px; }
.paint-tools select:disabled { opacity:.45; }
.paint-room button { font:15px Arial,sans-serif; min-height:40px; padding:6px 12px; color:#fff8e6; background:transparent; border:1px solid #fff8e688; border-radius:4px; cursor:pointer; touch-action:manipulation; user-select:none; -webkit-user-select:none; }
.paint-room button:hover { background:#fff8e61a; }
.paint-room button[aria-pressed=true], .paint-room .paint-main { color:#2a2226; background:#fff8e6; }
.paint-room button:disabled { opacity:.5; cursor:default; }
.paint-room :focus-visible { outline:3px solid #f2d24b; outline-offset:2px; }
.paint-swatches { display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
.paint-room .paint-swatch { width:28px; height:28px; min-height:0; padding:0; border:2px solid #fff8e655; border-radius:50%; }
.paint-room .paint-swatch[aria-pressed=true] { border-color:#fff8e6; box-shadow:0 0 0 2px #2a2226, 0 0 0 4px #fff8e6; }
.paint-custom { width:32px; height:30px; padding:0; border:0; background:none; cursor:pointer; }
.paint-actions { display:flex; flex-wrap:wrap; gap:6px; }
.paint-layer, .paint-status { margin:0; font-size:13px; opacity:.85; }
.paint-status { flex-basis:100%; text-align:center; opacity:.65; }
.paint-sheet { position:absolute; inset:0; z-index:2; display:grid; place-items:center; padding:16px; background:#2a2226d9; }
.paint-card { box-sizing:border-box; width:min(760px, 100%); max-height:100%; overflow:auto; padding:16px 18px; color:#2a2226; background:#fff8e6; border:3px solid #2a2226; box-shadow:4px 4px 0 #0007; }
.paint-card h2 { margin:0; font:28px/1 Anton, Impact, sans-serif; text-transform:lowercase; letter-spacing:.02em; }
.paint-card label { display:grid; gap:4px; margin:10px 0; font-size:14px; }
.paint-card input[type=text] { font:17px Arial,sans-serif; padding:8px; color:#2a2226; background:#fff; border:2px solid #2a2226; border-radius:0; }
.paint-card button { color:#2a2226; border-color:#2a2226; }
.paint-card .paint-main { color:#fff8e6; background:#2a2226; }
.paint-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between; margin-top:10px; }
.paint-row:first-child { margin-top:0; }
.paint-preview { display:block; width:100%; max-height:38vh; object-fit:contain; margin:12px 0 0; background:#fff; border:1px solid #2a222633; }
.paint-msg { min-height:1.3em; margin:8px 0 0; font-size:14px; }
.paint-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; margin-top:14px; }
.paint-card .paint-thumb { display:grid; gap:5px; padding:0; min-height:0; text-align:left; border:0; background:none; font-size:13px; }
.paint-thumb img { width:100%; aspect-ratio:16/10; object-fit:cover; background:#fff; border:2px solid #2a2226; }
.paint-thumb span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.paint-full { display:block; width:100%; max-height:62vh; object-fit:contain; background:#fff; border:2px solid #2a2226; }
.paint-caption { margin:10px 0 0; font-size:15px; }
@media (max-height:520px) and (orientation:landscape) {
  .paint-room { grid-template-rows:minmax(0,1fr); grid-template-columns:minmax(0,1fr) 210px; }
  .paint-tools { flex-direction:column; flex-wrap:nowrap; align-items:stretch; justify-content:flex-start; gap:8px; overflow-y:auto; padding:8px max(8px, env(safe-area-inset-right)) 8px 8px; }
  .paint-tools label { justify-content:space-between; }
  .paint-tools select { max-width:130px; }
  .paint-tools input[type=range] { width:120px; }
  .paint-room button { min-height:36px; padding:4px 8px; font-size:14px; }
  .paint-room .paint-swatch { width:24px; height:24px; }
  .paint-actions { display:grid; grid-template-columns:1fr 1fr; }
  .paint-status { text-align:left; }
  .paint-preview { max-height:30vh; }
}
@media (max-width:600px) and (orientation:portrait) { .paint-tools { gap:7px 10px; } .paint-tools input[type=range] { width:90px; } }
.paint-fade output { min-width:3.2em; font-variant-numeric:tabular-nums; opacity:.85; }