.coloring-page-layout{display:flex;flex-direction:row;align-items:flex-start;justify-content:center;gap:2rem;padding:1rem 0;margin-bottom:2rem}.image-preview-container{width:600px;height:600px;max-width:100%;display:flex;justify-content:center;align-items:center;flex-shrink:0}.coloring-preview-image{width:100%;height:100%;object-fit:contain}.action-buttons-container{display:flex;flex-direction:column;gap:1rem}.main-action-btn{padding:1rem 1.5rem;font-size:1rem;font-weight:600;border:none;border-radius:.75rem;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:flex-start;gap:.5rem;min-width:180px;white-space:nowrap}.main-action-btn:hover{transform:translate(4px);box-shadow:0 4px 12px #0003}.main-action-btn.color-online{background:linear-gradient(135deg,#4caf50 0% 100%);color:#fff}.main-action-btn.download-png{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff}.main-action-btn.download-pdf{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}.main-action-btn.print{background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff}@media (max-width: 900px){.coloring-page-layout{flex-direction:column;align-items:center}.image-preview-container{width:100%;height:auto;aspect-ratio:1;max-width:500px}.action-buttons-container{flex-direction:row;flex-wrap:wrap;justify-content:center}.main-action-btn{width:auto}.main-action-btn:hover{transform:translateY(-2px)}}.coloring-modal-overlay{position:fixed;inset:0;background:#000c;display:flex;justify-content:center;align-items:center;z-index:1000;padding:0}.coloring-modal{background:#2d2d2d;border-radius:1rem;width:calc(100vw - 1rem);height:calc(100vh - 1rem);max-width:none;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 25px 50px #00000080;margin:.5rem}.coloring-modal-overlay:fullscreen .coloring-modal,.coloring-modal-overlay:-webkit-full-screen .coloring-modal,.coloring-modal-overlay:-moz-full-screen .coloring-modal,.coloring-modal-overlay:-ms-fullscreen .coloring-modal{margin:.5rem!important}.coloring-modal-header{background:linear-gradient(135deg,#1a1a1a,#2d2d2d);color:#fff;padding:.4rem 1.5rem;display:flex;align-items:center;gap:.75rem;border-bottom:3px solid #4CAF50}.modal-header-icon{font-size:1.2rem;font-weight:700;background:linear-gradient(90deg,#4caf50,#f4c430);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.coloring-modal-header h2{flex:1;font-size:1.25rem;font-weight:600}.modal-close-btn{background:#fff3;border:none;color:#fff;width:28px;height:28px;border-radius:50%;font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .4s ease;padding:0}.modal-close-btn:hover{background:#ffffff4d;transform:rotate(90deg)}.coloring-toolbar{background:#f5f5f5;border-bottom:1px solid #e0e0e0;padding:.5rem 1rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.toolbar-group{display:flex;align-items:center;gap:2px}.toolbar-btn{background:#fff;border:1px solid #d1d5db;border-radius:.375rem;padding:.5rem;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;color:#374151;width:36px;height:36px}.toolbar-btn:hover{background:#e5e7eb;border-color:#9ca3af}.toolbar-btn.active{background:#e8f5e9;border-color:#4caf50;color:#2e7d32}.toolbar-btn.disabled,.toolbar-btn:disabled{opacity:.4;cursor:not-allowed}.toolbar-btn.disabled:hover,.toolbar-btn:disabled:hover{background:#fff;border-color:#d1d5db}.toolbar-btn.has-toggle{position:relative}.toggle-badge{position:absolute;bottom:1px;right:1px;width:14px;height:14px;border-radius:50%;background:#d1d5db;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;border:1.5px solid white}.toggle-badge:hover{transform:scale(1.1)}.toggle-badge.active{background:#4caf50}.toolbar-separator{width:1px;height:28px;background:#d1d5db;margin:0 .5rem}.zoom-group{margin-left:auto}.zoom-value{font-size:.875rem;font-weight:500;color:#374151;min-width:45px;text-align:center}.coloring-modal-content{display:flex;flex:1;overflow:hidden}.coloring-sidebar{width:300px;min-width:300px;background:#e8e0c8;padding:1rem;display:flex;flex-direction:column;gap:1rem;overflow-y:auto}.palette-selector{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.palette-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 0;background:transparent;border:2px solid transparent;border-radius:.5rem;cursor:pointer;transition:all .15s}.palette-btn:hover,.palette-btn.active{background:#e5e7eb}.palette-preview{width:100%;height:20px;border-radius:.25rem;display:block}.palette-label{font-size:.65rem;font-weight:500;color:#4b5563}.palette-btn.active .palette-label{color:#1d4ed8}.color-palette{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;background:#fff;padding:.75rem;border-radius:.5rem;overflow:visible}.color-swatch{width:100%;aspect-ratio:1;border:1px solid transparent;border-radius:50%;cursor:pointer;transition:padding .15s,border-color .15s;min-width:0;padding:0;background-clip:content-box;box-sizing:border-box}.color-swatch:hover{padding:2px;border-color:#d0d0d0}.color-swatch.active{border-color:#4caf50!important;padding:2px}.color-swatch-custom{background:conic-gradient(from 0deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red);border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;aspect-ratio:1;width:100%;box-shadow:0 2px 4px #00000026;position:relative}.color-swatch-custom span{display:none}.color-swatch-custom:hover{transform:scale(1.15);box-shadow:0 4px 8px #00000040}.emoji-quick-section{background:#fff;padding:.5rem;border-radius:.5rem}.emoji-quick-grid{display:grid;grid-template-columns:repeat(5,auto);gap:8px;justify-content:start}.emoji-swatch{width:auto;padding:2px;border:2px solid transparent;border-radius:.25rem;background:transparent;cursor:pointer;font-size:1.5rem;display:flex;align-items:center;justify-content:center;transition:all .15s}.emoji-swatch:hover{background:#f3f4f6;transform:scale(1.15)}.emoji-swatch.active{border-color:#4caf50;background:#e8f5e9}.more-emojis-btn{width:100%;margin-top:.5rem;padding:.4rem;background:#f3f4f6;border:1px solid #d1d5db;border-radius:.375rem;font-size:.8rem;color:#4b5563;cursor:pointer;transition:all .15s}.more-emojis-btn:hover{background:#e5e7eb;color:#1f2937}.shapes-section{background:#fff;padding:.75rem;border-radius:.5rem}.shapes-section .section-label{display:block;font-size:.8rem;font-weight:600;color:#4b5563;margin-bottom:.5rem}.shapes-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}.shape-swatch{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:1.5rem;border:2px solid transparent;border-radius:.375rem;background:#f3f4f6;cursor:pointer;transition:all .15s}.shape-swatch:hover{background:#e5e7eb;transform:scale(1.1)}.shape-swatch.active{border-color:#3b82f6;background:#dbeafe}.brush-size-control{background:#fff;padding:.75rem;border-radius:.5rem}.brush-size-control label{display:block;font-size:.85rem;color:#4b5563;margin-bottom:.5rem}.brush-size-control input[type=range]{width:100%}.coloring-canvas-area{flex:1;background-color:#fff;background-image:radial-gradient(#cbd5e1 1.5px,transparent 1.5px);background-size:24px 24px;display:flex;justify-content:center;align-items:center;overflow:hidden;padding:.5rem}.canvas-scroll-container{transition:transform .2s}.modal-coloring-canvas{background:#fff;box-shadow:0 10px 30px #0000004d;cursor:crosshair;max-width:100%;height:auto}.modal-coloring-canvas.cursor-brush,.modal-coloring-canvas.cursor-fill{cursor:crosshair}.modal-coloring-canvas.cursor-eraser{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M16.24 3.56l4.95 4.94c.78.79.78 2.05 0 2.84L12 20.53a4.01 4.01 0 01-5.66 0L2.81 17c-.78-.79-.78-2.05 0-2.84l10.6-10.6c.79-.78 2.05-.78 2.83 0zM4.22 15.58l3.54 3.53c.78.79 2.04.79 2.83 0l3.53-3.53-4.95-4.95-4.95 4.95z'/%3E%3C/svg%3E") 4 20,crosshair}.modal-coloring-canvas.cursor-colorEraser{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M17.66 3.34c-.47-.47-1.23-.47-1.7 0L3.34 15.95c-.47.47-.47 1.23 0 1.7l3 3c.47.47 1.23.47 1.7 0l10.61-10.61 2.12 2.12c.47.47 1.23.47 1.7 0l.71-.71c.47-.47.47-1.23 0-1.7l-5.52-5.51zM5.93 18.24l-1.41-1.41 9.9-9.9 1.41 1.41-9.9 9.9z'/%3E%3C/svg%3E") 4 20,crosshair}.modal-coloring-canvas.cursor-text{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M5 4v3h5.5v12h3V7H19V4H5z'/%3E%3C/svg%3E") 12 12,text}.modal-coloring-canvas.cursor-emoji{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z'/%3E%3C/svg%3E") 12 12,pointer}.modal-coloring-canvas.cursor-select{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M3 5h2V3c-1.1 0-2 .9-2 2zm0 8h2v-2H3v2zm4 8h2v-2H7v2zM3 9h2V7H3v2zm10-6h-2v2h2V3zm6 0v2h2c0-1.1-.9-2-2-2zM5 21v-2H3c0 1.1.9 2 2 2zm-2-4h2v-2H3v2zM9 3H7v2h2V3zm2 18h2v-2h-2v2zm8-8h2v-2h-2v2zm0 8c1.1 0 2-.9 2-2h-2v2zm0-12h2V7h-2v2zm0 8h2v-2h-2v2zm-4 4h2v-2h-2v2zm0-16h2V3h-2v2z'/%3E%3C/svg%3E") 12 12,pointer}@media (max-width: 900px){.coloring-modal-content{flex-direction:column}.coloring-sidebar{width:100%;flex-direction:row;flex-wrap:wrap;padding:.75rem;gap:.5rem}.tool-buttons-grid{grid-template-columns:repeat(6,1fr)}.color-palette{grid-template-columns:repeat(10,1fr)}.coloring-canvas-area{flex:1;min-height:50vh}}@media (max-width: 600px){.action-buttons-container{flex-direction:column;width:100%}.main-action-btn{width:100%;justify-content:center}.coloring-sidebar{flex-direction:column}.tool-buttons-grid{grid-template-columns:repeat(3,1fr)}.color-palette{grid-template-columns:repeat(7,1fr)}}.text-input-modal,.emoji-picker-modal{position:absolute;inset:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:100}.text-input-content,.emoji-picker-content{background:#fff;padding:1.5rem;border-radius:1rem;min-width:300px;max-width:90%;box-shadow:0 10px 40px #0000004d}.text-input-content h3,.emoji-picker-content h3{margin:0 0 1rem;font-size:1.25rem;color:#1f2937}.text-input-content input[type=text]{width:100%;padding:.75rem;font-size:1rem;border:2px solid #e5e7eb;border-radius:.5rem;margin-bottom:1rem}.text-input-content input[type=text]:focus{outline:none;border-color:#3b82f6}.text-input-options{margin-bottom:1rem}.text-input-options label{display:flex;flex-direction:column;gap:.5rem;font-size:.9rem;color:#4b5563}.text-input-options input[type=range]{width:100%}.text-input-buttons{display:flex;gap:.5rem;justify-content:flex-end}.text-input-buttons button{padding:.5rem 1rem;border:none;border-radius:.5rem;cursor:pointer;font-weight:500;background:#e5e7eb;color:#374151}.text-input-buttons button.primary{background:#3b82f6;color:#fff}.text-input-buttons button:hover{opacity:.9}.emoji-size-control{margin-bottom:1rem}.emoji-size-control label{display:flex;flex-direction:column;gap:.5rem;font-size:.9rem;color:#4b5563}.emoji-size-control input[type=range]{width:100%}.emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:.25rem;margin-bottom:1rem}.emoji-btn{font-size:1.5rem;padding:.5rem;background:none;border:2px solid transparent;border-radius:.5rem;cursor:pointer;transition:all .15s}.emoji-btn:hover{background:#f3f4f6;border-color:#d1d5db;transform:scale(1.1)}.emoji-cancel{width:100%;padding:.5rem 1rem;border:none;border-radius:.5rem;cursor:pointer;font-weight:500;background:#e5e7eb;color:#374151}.emoji-cancel:hover{background:#d1d5db}