.coloring{max-width:960px;margin:auto}
.coloring-title{margin:0;font-size:clamp(24px,3.3vw,34px);line-height:1.2}
.coloring-gallery-heading,.coloring-editor-heading{display:flex;align-items:center;gap:18px;margin-bottom:16px;justify-content:space-between}
.coloring-gallery-heading .coloring-title{flex:1;text-align:center}
.coloring-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.coloring-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px;border:3px solid #e0e9df;border-radius:26px;background:#fff;min-height:185px;box-shadow:0 4px 0 #d5c6ba22}
.coloring-card:nth-child(3n+2){background:#f1f5e8}.coloring-card:nth-child(3n){background:#edf4fa}
.coloring-card:hover{border-color:#55a095}.coloring-card:active{background:#dff0e8}
.coloring-card-label{font-size:20px;line-height:1.2;font-weight:700;overflow-wrap:anywhere}
.coloring-thumbnail{width:100%;height:120px;object-fit:contain;pointer-events:none;user-select:none}
.coloring-pagination,.coloring-gallery-extras{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:18px}
.coloring-gallery-extras{justify-content:space-between}
.coloring-back,.coloring-parent-button,.coloring-tool,.coloring-undo,.coloring-size,.coloring-save,.coloring-export,.coloring-clear,.coloring-cancel,.coloring-confirm-yes{min-height:56px;padding:10px 15px;border-radius:16px;border:2px solid #ceded5;background:#fffdf8;font-size:17px;font-weight:700}
.coloring-parent-button{color:#60736a;background:transparent;border-color:transparent;font-size:15px}
.coloring button:disabled{opacity:.45}
.coloring-tools{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.coloring-tool[aria-pressed=true],.coloring-size[aria-pressed=true]{background:#167e76;color:white;border-color:#167e76;box-shadow:0 3px 0 #0c5c54}
.coloring-sizes{display:flex;gap:6px}
.coloring-palette{display:flex;justify-content:center;gap:12px;margin:12px 0 16px}
.coloring-color{width:56px;height:56px;min-width:56px;border:4px solid white;border-radius:50%;background:var(--paint-color);box-shadow:0 0 0 1px #c7d5ce;font-size:27px;color:transparent;padding:0}
.coloring-color[aria-pressed=true]{box-shadow:0 0 0 3px #244a46;color:#173d3c}
.coloring-frame{position:relative;width:100%;max-width:640px;margin:auto;overflow:hidden;background:#fff;border:3px solid #c7dcd3;border-radius:20px;box-shadow:0 5px 0 #e1ebe2}
.coloring-canvas,.coloring-outline{display:block;position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;margin:0}
.coloring-canvas{position:relative;height:auto;aspect-ratio:4/3;touch-action:none;cursor:crosshair;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.coloring-outline{pointer-events:none;object-fit:contain;user-select:none;-webkit-user-select:none}
.coloring-actions{display:flex;justify-content:center;gap:12px;margin-top:16px}
.coloring-save{background:#e3f3e4;border-color:#72ab87}.coloring-clear{margin-left:auto;color:#886340}
.coloring-download{display:block;text-align:center;min-height:48px;padding:14px;color:#156d68}
.coloring-confirm{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;padding:14px;margin-bottom:14px;border:2px solid #dfc18f;border-radius:20px;background:#fff4dc}
.coloring-confirm-text{flex-basis:100%;margin:0;text-align:center;font-size:20px;font-weight:700}
.coloring-cancel{background:#e7f5e9;border-color:#257562}.coloring-confirm-yes{background:#fff0e7;border-color:#c98d67}
.coloring-status{margin:12px 0 0;text-align:center;font-size:14px;line-height:1.4;color:#496767;min-height:20px}
.coloring-status-warning{padding:12px;border-radius:12px;background:#fff1d7;color:#724519}
.coloring-parent{max-width:760px;margin:auto;line-height:1.5}
.coloring-import-form{display:grid;gap:14px;background:white;border-radius:20px;padding:20px}
.coloring-import-form input:not([type=checkbox]),.coloring-import-form select{min-height:48px;width:100%;font:inherit;border:2px solid #c7dcd3;border-radius:10px;padding:8px;background:white}
.coloring-import-preview{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.coloring-import-preview figure{margin:0;text-align:center}.coloring-import-preview img{width:100%;height:180px;object-fit:contain;border:1px solid #ccd6ce;background:repeating-conic-gradient(#d8e9e2 0% 25%,#fff 0% 50%) 50% / 20px 20px}
.coloring-approval{display:flex;align-items:center;gap:10px}.coloring-approval input{width:28px;height:28px;flex:none}
.coloring-credits{margin:20px 0}.coloring-credits summary{cursor:pointer;min-height:48px;padding:12px;background:#eaf0dd;border-radius:12px}
.compact-height .coloring-workspace{display:grid;grid-template-columns:225px minmax(0,1fr);gap:14px;align-items:start}
.compact-height .coloring-frame{max-width:520px;grid-column:2;grid-row:1 / span 3}
.compact-height .coloring-tools{grid-column:1;grid-row:1;align-content:start;margin:0}
.compact-height .coloring-palette{grid-column:1;grid-row:2;flex-wrap:wrap;margin:0}
.compact-height .coloring-confirm{grid-column:1;grid-row:3;margin:0}
.compact-height .coloring-sizes{flex-wrap:wrap;justify-content:center}
.compact-height .coloring-card{min-height:170px}.compact-height .coloring-thumbnail{height:105px}
.compact-height .coloring-gallery-heading,.compact-height .coloring-editor-heading{margin-bottom:10px}
@media(max-width:700px){.coloring-grid{gap:10px}.coloring-card{padding:8px;border-radius:20px;min-height:170px}.coloring-card-label{font-size:18px}.coloring-thumbnail{height:105px}.coloring-editor-heading{align-items:flex-start;gap:8px}.coloring-title{font-size:26px}.coloring-back{font-size:15px}}
@media(max-width:500px){.coloring-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.coloring-card{min-height:158px}.coloring-thumbnail{height:92px}.coloring-palette{gap:5px}.coloring-color{width:50px;min-width:50px;height:56px}.coloring-tools{gap:5px}.coloring-tool,.coloring-undo{font-size:15px;padding:8px}.coloring-actions{gap:6px}.coloring-actions button{font-size:15px;padding:8px 10px}.coloring-clear{margin-left:0}.coloring-editor-heading{flex-wrap:wrap}.coloring-editor-heading .coloring-title{flex:1;text-align:right}.coloring-gallery-heading{flex-wrap:wrap}.coloring-import-preview{grid-template-columns:1fr}}