.coloring-section,.coloring-editor{min-width:0;padding-bottom:calc(var(--bottom-nav-height,64px) + env(safe-area-inset-bottom) + 16px)}.coloring-gallery{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px;margin-top:16px;display:grid}.coloring-card{border:1px solid var(--border);background:var(--surface);border-radius:8px;overflow:hidden}.coloring-card img{object-fit:contain;background:#fff;width:100%;height:240px}.coloring-card>div{padding:12px}.coloring-card h2{margin:0;font-size:17px}.coloring-card p{margin:8px 0;font-size:13px}.coloring-tabs,.coloring-tools,.coloring-palette{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.coloring-tabs button,.coloring-tools button{border:1px solid var(--border);background:var(--surface);min-width:44px;min-height:44px;color:var(--text);border-radius:8px;padding:6px 10px}.coloring-tools button[aria-pressed=true],.coloring-tabs button[aria-pressed=true]{outline:2px solid var(--primary);outline-offset:-2px}.coloring-tools button:disabled{opacity:.45}.coloring-tools{margin:10px 0}.coloring-tools label{align-items:center;gap:6px;font-size:13px;display:flex}.coloring-tools input[type=range]{width:90px}.coloring-palette button{border:2px solid var(--border);border-radius:8px;width:44px;height:44px}.coloring-palette button[aria-pressed=true]{outline:3px solid var(--primary);outline-offset:2px}.coloring-palette label{align-items:center;gap:6px;font-size:13px;display:flex}.coloring-stage{isolation:isolate;border:1px solid var(--border);touch-action:none;overscroll-behavior:contain;background:#e7e9ef;border-radius:8px;justify-content:center;align-items:center;width:100%;height:min(64dvh,720px);min-height:280px;display:flex;position:relative;overflow:hidden}.coloring-stage canvas{object-fit:contain;touch-action:none;transform-origin:50%;max-width:100%;height:100%;display:block;box-shadow:0 2px 12px #0002}.coloring-status{min-height:22px;margin:8px 0;font-size:13px}.coloring-notice{border:1px solid var(--border);border-radius:8px;margin:10px 0;padding:12px}.coloring-notice button{min-height:44px;margin:4px}.coloring-dialog-layer{z-index:1200;background:#0008;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.coloring-dialog{background:var(--surface);color:var(--text);border-radius:8px;max-width:420px;padding:20px}.coloring-dialog button{min-height:44px;margin:4px}.coloring-editor:fullscreen{background:var(--background);padding:12px;overflow:auto}.coloring-editor:fullscreen .coloring-stage{height:65dvh}.coloring-keyboard{flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px;font-size:13px;display:flex}.coloring-keyboard select,.coloring-keyboard button{min-height:44px}.coloring-editor h1{font-size:24px}.coloring-editor button:focus-visible,.coloring-section button:focus-visible{outline:3px solid var(--primary);outline-offset:2px}@media (max-width:767px){.coloring-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.coloring-card img{height:180px}.coloring-card>div{padding:10px}.coloring-card h2{font-size:15px}.coloring-card .button{width:100%;padding:8px}.coloring-stage{height:52dvh}.coloring-tools{gap:4px}}.coloring-stage canvas{width:auto;max-width:100%;height:auto;max-height:100%}.coloring-editor.coloring-fullscreen{z-index:1050;background:var(--background);padding:calc(env(safe-area-inset-top) + 12px) 12px calc(env(safe-area-inset-bottom) + 12px);overscroll-behavior:contain;position:fixed;inset:0;overflow:auto}.coloring-fullscreen .coloring-stage{height:60dvh}.rest-activities{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),520px));gap:16px;margin-top:20px;display:grid}.rest-activity{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:8px;align-items:center;gap:20px;padding:20px;text-decoration:none;display:flex;box-shadow:0 3px 12px #00000008}.rest-activity>img{object-fit:contain;background:#fff;border-radius:6px;width:35%;height:230px}.rest-activity>div{flex:1;min-width:0}.rest-activity h2{margin:10px 0;font-size:20px}.rest-activity p{font-size:14px;line-height:1.5}.rest-activity-action{min-height:44px;color:var(--primary);align-items:center;gap:8px;font-weight:600;display:inline-flex}.rest-activity:focus-visible{outline:3px solid var(--primary);outline-offset:3px}.rest-activity:hover{border-color:var(--primary)}.coloring-recent{white-space:nowrap;align-items:center;gap:6px;min-height:48px;font-size:12px;display:flex;overflow-x:auto}.coloring-recent button{border:2px solid var(--border);border-radius:8px;flex-shrink:0;width:44px;height:44px}.coloring-loading{place-items:center;width:100%;height:100%;display:grid;position:relative}.coloring-loading img{object-fit:contain;opacity:.25;filter:blur(1px);width:auto;max-width:100%;height:100%}.coloring-loading span{background:var(--surface);color:var(--text);border-radius:8px;padding:12px 18px;position:absolute;box-shadow:0 2px 12px #0001}.coloring-finished{color:var(--primary);margin-top:12px;padding:12px 0;font-size:14px}.coloring-card,.rest-activity{transition:border-color .16s,box-shadow .16s}@media (min-width:768px) and (max-width:1023px){.coloring-stage{height:52dvh}}@media (max-width:767px){.rest-activity{gap:14px;padding:14px}.rest-activity>img{height:190px}.rest-activity h2{font-size:18px}.coloring-recent{padding:2px 4px}.coloring-recent>span{flex-shrink:0}}@media (prefers-reduced-motion:reduce){.coloring-card,.rest-activity{transition:none}}:is(.app-shell:has(.coloring-editor) .floating-help,.app-shell:has(.coloring-editor) .chat-dock){display:none}@media (max-width:767px){.coloring-tools,.coloring-palette{scrollbar-width:thin;flex-wrap:nowrap;padding:4px;overflow-x:auto}.coloring-tools>*,.coloring-palette>*{flex-shrink:0}.coloring-stage{height:clamp(240px,100dvh - 440px,52dvh)}.coloring-editor h1{margin:10px 0;font-size:21px}.coloring-status{margin:5px 0}}
