.colouring-dialog.colouring-studio-dialog{width:min(1050px,96vw);max-width:1050px;max-height:94vh;max-height:94dvh;overflow:auto;padding:0;color:#f5f8ff}
.colouring-studio-dialog .colouring-preview{padding:16px 24px 22px}
.colouring-studio-dialog .colouring-preview h2{margin:-32px 90px 4px;font-size:1.55rem}
.colouring-hint{font-size:1rem;margin:8px 0 12px;min-height:48px;display:flex;align-items:center;color:#dce8f8}
.colouring-shape-help{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:5px 13px 5px 5px;border:1px solid #a4c8ec;border-radius:28px;background:#172f4c;color:#fff;font:inherit;cursor:pointer;text-align:left}
.colouring-help-number{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border-radius:50%;background:var(--paint);color:#10243a;font-size:1.3rem;font-weight:800}
.colouring-help-action{font-size:.8rem;color:#ffe39c}
.colouring-workspace{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:22px;align-items:start}
.colouring-picture-panel{min-width:0}
.colouring-zoom{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin-bottom:9px}
.colouring-zoom-label{font-weight:700;font-size:.85rem;margin-right:3px}
.colouring-zoom button,.colouring-tool-picker button,.colouring-brush-sizes button{min-width:44px;min-height:44px;border:1px solid #9eb8d7;background:#223f5b;color:white;border-radius:12px;font:inherit;cursor:pointer;padding:7px 10px}
.colouring-zoom output{min-width:2em;font-variant-numeric:tabular-nums}
.colouring-canvas-wrap{height:min(60vh,620px);height:min(60dvh,620px);min-height:220px;overflow:auto;overscroll-behavior:contain;border-radius:12px;background:#d3d8df;color:#152e59;position:relative;text-align:center}
.colouring-canvas-wrap>p,.colouring-load-error{padding:60px 20px}
.colouring-surface{position:relative;min-width:100%;min-height:100%}
.colouring-canvas{display:block;position:absolute;max-width:none;max-height:none;touch-action:pan-x pan-y pinch-zoom;cursor:crosshair;outline-offset:-5px!important;background:white}
.colouring-canvas.tool-brush{touch-action:none;cursor:crosshair}
.colouring-canvas.tool-move{touch-action:none;cursor:grab}
.colouring-canvas.tool-move:active{cursor:grabbing}
.colouring-canvas:focus-visible{outline:4px solid #1c5388}
.colouring-tools{min-width:0;padding-top:4px}
.colouring-tool-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.colouring-tool-picker button{padding:8px 4px;font-size:.9rem}
.colouring-tool-picker button[aria-pressed=true],.colouring-brush-sizes button[aria-pressed=true]{background:#ffd650;color:#10243a;border-color:#ffd650;font-weight:750}
.colouring-brush-sizes{display:flex;justify-content:center;gap:9px;margin-top:9px}
.colouring-number-toggle{display:flex;align-items:center;gap:9px;min-height:48px;margin:8px 0 12px;text-align:left;font-size:.9rem;color:#fff}
.colouring-number-toggle input{width:23px;height:23px;flex:none;accent-color:#ffd650;margin:0}
.colouring-palette{display:grid;grid-template-columns:repeat(4,minmax(44px,1fr));gap:9px}
.colouring-swatch{background:var(--paint)!important;border:3px solid transparent;border-radius:50%;width:100%;min-width:44px;height:48px;min-height:48px;padding:0;color:#10243a!important;display:grid;place-items:center;box-shadow:inset 0 0 0 1px #0003;cursor:pointer;transition:transform .12s ease}
.colouring-swatch[aria-pressed=true]{border-color:#fff;outline:2px solid #a9d9fa;outline-offset:2px;transform:scale(.96)}
.colouring-swatch span{font-size:1.5rem;font-weight:900;color:#10243a!important}
.colouring-selected{display:block;font-size:.9rem;margin:12px 0 16px;color:#fff;min-height:1.3em}
.colouring-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.colouring-actions .button{font-size:.9rem;padding:11px 7px;min-height:46px;border:1px solid #9eb8d7;background:#223f5b;color:#fff}
.colouring-actions .colouring-save{grid-column:1/-1;background:#ffd650;border-color:#ffd650;color:#10243a;font-weight:750}
.colouring-actions .colouring-add-wall{grid-column:1/-1;background:#ceecc9;border-color:#ceecc9;color:#10243a;font-weight:750}
.colouring-view-wall{display:block;width:100%;min-height:44px;border:0;background:none;color:#ffe39c;font:inherit;font-size:.9rem;margin-top:7px;padding:8px;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
html[data-contrast=high] .colouring-actions .colouring-add-wall{background:#ceecc9;color:#081222;border-color:#ceecc9}
html[data-contrast=high] .colouring-view-wall{color:#ffe681}
.colouring-studio button:disabled{opacity:.45;cursor:default}
.colouring-keyboard{text-align:left;font-size:.8rem;color:#dce8f8;margin-top:16px}
.colouring-keyboard summary{cursor:pointer;min-height:44px;display:flex;align-items:center;list-style:none;text-decoration:underline;text-underline-offset:3px}
.colouring-keyboard p{margin:0;line-height:1.5}
.colouring-status{font-size:.85rem;min-height:1.5em;margin:7px 0 0;color:#e9f6ff}
.colouring-studio-dialog .colouring-preview>.button{margin:16px 0 0;font-size:.9rem}
html[data-contrast=high] .colouring-actions .button{background:#12243a;color:white;border:2px solid white}
html[data-contrast=high] .colouring-actions .colouring-save{background:#ffe75a;color:#081222;border-color:#ffe75a}
html[data-contrast=high] .colouring-swatch{forced-color-adjust:none}
html[data-contrast=high] .colouring-canvas-wrap p{color:#152e59}
@media(max-width:650px){
 .colouring-studio-dialog .colouring-preview{padding:12px 14px 18px}
 .colouring-studio-dialog .colouring-preview h2{margin:0 0 6px;font-size:1.4rem}
 .colouring-studio-dialog .close{position:sticky;top:0;z-index:2;background:#10243a}
 .colouring-workspace{grid-template-columns:minmax(0,1fr);gap:13px}
 .colouring-canvas-wrap{height:43vh;height:43dvh;min-height:190px}
 .colouring-tools{padding:0}
 .colouring-number-toggle{justify-content:center;margin:4px 0 10px}
 .colouring-tool-picker{max-width:430px;margin:auto}
 .colouring-palette{grid-template-columns:repeat(auto-fit,minmax(44px,1fr));gap:7px;max-width:430px;margin:auto}
 .colouring-swatch{min-width:0;height:44px;min-height:44px}
 .colouring-selected{margin:10px 0}
 .colouring-actions{grid-template-columns:1fr 1fr}
 .colouring-actions .colouring-save,.colouring-actions .colouring-add-wall{grid-column:1/-1;grid-row:auto}
 .colouring-keyboard{margin-top:5px}
 .colouring-status{margin:0;min-height:1.3em}
}
@media(forced-colors:active){.colouring-swatch{forced-color-adjust:none}.colouring-swatch[aria-pressed=true]{outline:3px solid Highlight}.colouring-canvas{forced-color-adjust:none}}