.coloring-hub{background:#fff;min-height:60vh;padding:0 0 40px}.coloring-hub__wrap{max-width:880px;margin:0 auto;padding:0 16px}.coloring-hub__hero{text-align:center;padding:28px 12px 20px}.coloring-hub__title{margin:0;font-size:clamp(22px,4vw,28px);font-weight:800;color:#1e293b}.coloring-hub__lead{margin:8px 0 0;font-size:15px;color:#64748b}.coloring-hub__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:16px;margin-top:8px}.coloring-hub__empty{text-align:center;padding:60px 20px;color:#94a3b8}.coloring-hub__empty-icon{font-size:52px;display:block;margin-bottom:12px}.coloring-card{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;box-shadow:0 2px 10px #00000012;background:#f0f9ff;text-decoration:none;transition:transform .15s,box-shadow .15s}.coloring-card:hover{transform:translateY(-3px);box-shadow:0 6px 18px #0000001f}.coloring-card__thumb{aspect-ratio:3/4;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}.coloring-card__img{width:100%;height:100%;object-fit:contain}.coloring-card__emoji{font-size:52px}.coloring-card__body{display:flex;align-items:center;gap:6px;padding:8px 10px 10px}.coloring-card__emoji-sm{font-size:16px;flex-shrink:0}.coloring-card__name{font-size:13px;font-weight:700;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.coloring-play{display:flex;flex-direction:column;height:100dvh;height:100vh;background:#f1f5f9;overflow:hidden;max-width:480px;margin-left:auto;margin-right:auto;box-shadow:0 0 40px #0000001a}.coloring-play__topbar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#fff;border-bottom:1px solid #e2e8f0;flex-shrink:0;min-height:52px}.coloring-play__back{color:#64748b;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;padding:4px 8px;border-radius:8px;transition:background .1s}.coloring-play__back:hover{background:#f1f5f9}.coloring-play__title{flex:1;margin:0;font-size:16px;font-weight:700;color:#1e293b;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.coloring-play__actions{display:flex;gap:6px;flex-shrink:0}.coloring-play__btn{background:#f1f5f9;border:none;border-radius:10px;padding:6px 12px;font-size:18px;cursor:pointer;line-height:1;transition:background .1s}.coloring-play__btn:hover:not(:disabled){background:#e2e8f0}.coloring-play__btn:disabled{opacity:.35;cursor:default}.coloring-play__canvas-wrap{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.coloring-play__loading{display:flex;flex-direction:column;align-items:center;gap:12px;color:#94a3b8;font-size:15px}.coloring-play__spinner{width:36px;height:36px;border:3px solid #e2e8f0;border-top-color:#3b82f6;border-radius:50%;animation:cp-spin .7s linear infinite}@keyframes cp-spin{to{transform:rotate(360deg)}}.coloring-play__canvas{max-width:100%;max-height:100%;cursor:crosshair;display:block}.coloring-play__palette{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#fff;border-top:1px solid #e2e8f0;overflow-x:auto;flex-shrink:0;-webkit-overflow-scrolling:touch;scrollbar-width:none}.coloring-play__palette::-webkit-scrollbar{display:none}.coloring-play__swatch{width:40px;height:40px;flex-shrink:0;border-radius:50%;border:2px solid rgba(0,0,0,.12);cursor:pointer;position:relative;transition:transform .12s,border-color .12s,width .12s,height .12s;display:flex;align-items:center;justify-content:center;padding:0}.coloring-play__swatch.is-selected{width:48px;height:48px;border-color:#3b82f6;border-width:3px;box-shadow:0 0 0 3px #3b82f640}.coloring-play__swatch[data-color="#ffffff"]{border-color:#cbd5e1}.coloring-play__eraser-icon{font-size:14px;pointer-events:none}@media(max-width:420px){.coloring-play__swatch{width:34px;height:34px}.coloring-play__swatch.is-selected{width:42px;height:42px}}