@import"https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=ZCOOL+KuaiLe&display=swap";:root{--bg: #FFFFFF;--surface: #F7F7F7;--primary: #3DA000;--primary-dark: #2C7A00;--accent: #E51919;--text: #1F1F1F;--text-muted: #5C5C5C;--border: #E5E5E5;--success: #3DA000;--warning: #A87C00;--danger: #E51919;--radius: 20px;--shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04)}body{margin:0;padding:0;overflow:hidden;background:radial-gradient(circle at 10% 20%,#E5191933 0%,transparent 40%),radial-gradient(circle at 90% 80%,#3DA00022 0%,transparent 40%),var(--bg);color:var(--text);font-family:Quicksand,ZCOOL KuaiLe,Nunito,sans-serif;display:flex;justify-content:center;align-items:center;min-height:100vh;width:100vw}#root{width:100%;height:100vh;display:flex;justify-content:center;align-items:center}.app-container{position:relative;width:100%;height:100vh;max-width:1200px;max-height:800px;background-color:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center}.cloud-sync-indicator{position:absolute;top:10px;right:10px;background-color:var(--surface);color:var(--text-muted);padding:5px 10px;border-radius:var(--radius);font-size:.8em;box-shadow:var(--shadow);z-index:100}.cloud-toast{position:absolute;top:20px;left:50%;transform:translate(-50%);background-color:var(--primary);color:var(--bg);padding:10px 20px;border-radius:var(--radius);box-shadow:var(--shadow);z-index:101;font-weight:600;text-align:center}.start-page,.draw-page,.gallery-page{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px;box-sizing:border-box}.start-page-content{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}.app-title{font-family:ZCOOL KuaiLe,Quicksand,sans-serif;font-size:3.5em;color:var(--primary);margin-bottom:10px;text-shadow:2px 2px 0px rgba(0,0,0,.1)}.app-subtitle{font-size:1.2em;color:var(--text-muted);margin-bottom:30px}.start-page-image-container{width:250px;height:250px;border-radius:var(--radius);overflow:hidden;background-color:var(--border);display:flex;justify-content:center;align-items:center;box-shadow:var(--shadow)}.start-page-image{width:100%;height:100%;object-fit:cover}.fallback-emoji{font-size:3em;color:var(--text-muted)}.start-button,.gallery-button,.start-drawing-button,.ai-generate-button,.add-to-canvas-button{background-color:var(--primary);color:var(--bg);border:none;border-radius:var(--radius);padding:15px 30px;font-size:1.2em;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow);transition:background-color .3s ease}.start-button:hover,.gallery-button:hover,.start-drawing-button:hover,.ai-generate-button:hover,.add-to-canvas-button:hover{background-color:var(--primary-dark)}.gallery-button{background-color:var(--accent)}.gallery-button:hover{background-color:#c01515}.draw-page{position:relative;display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:1fr;gap:10px;padding:15px}.draw-page.fullscreen-mode{grid-template-rows:1fr;padding:0}.toolbar{display:flex;flex-wrap:wrap;gap:8px;padding:10px;background-color:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);justify-content:center}.toolbar-button{background-color:var(--surface);color:var(--text-muted);border:none;border-radius:15px;padding:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);transition:all .2s ease}.toolbar-button:hover{background-color:var(--border);color:var(--text)}.toolbar-button.active{background-color:var(--primary);color:var(--bg);box-shadow:0 0 0 3px var(--primary-dark)}.toolbar-button:disabled{opacity:.5;cursor:not-allowed}.color-picker-panel,.ai-generator-panel{position:absolute;top:100px;left:50%;transform:translate(-50%);background-color:var(--surface);padding:15px;border-radius:var(--radius);box-shadow:var(--shadow);display:flex;flex-wrap:wrap;gap:10px;z-index:50;max-width:90%;justify-content:center}.color-swatch{width:30px;height:30px;border-radius:50%;cursor:pointer;box-shadow:var(--shadow);transition:transform .2s ease,border .2s ease}.color-swatch:hover{transform:scale(1.1)}.canvas-container{flex-grow:1;width:100%;background-color:var(--bg);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);position:relative;display:flex;justify-content:center;align-items:center}.draw-page.fullscreen-mode .canvas-container{border-radius:0;box-shadow:none}.drawing-canvas{width:100%;height:100%;touch-action:none}.brush-size-slider-container{display:flex;align-items:center;gap:10px;padding:10px;background-color:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);justify-content:center}.slider-label{font-size:1em;color:var(--text-muted)}.brush-size-slider{width:200px;-webkit-appearance:none;height:8px;background:var(--border);outline:none;border-radius:5px}.brush-size-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--primary);cursor:pointer;box-shadow:var(--shadow)}.brush-size-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--primary);cursor:pointer;box-shadow:var(--shadow)}.ai-generator-panel{flex-direction:column;align-items:center;gap:15px}.ai-prompt-input{width:100%;padding:10px 15px;border:1px solid var(--border);border-radius:15px;font-size:1em;color:var(--text);background-color:var(--bg);box-shadow:inset 0 1px 3px #0000000d}.ai-prompt-input::placeholder{color:var(--text-muted)}.ai-generated-image-preview{display:flex;flex-direction:column;align-items:center;gap:10px}.ai-generated-image-preview img{max-width:200px;max-height:200px;border-radius:var(--radius);box-shadow:var(--shadow);border:2px solid var(--border)}.ai-example-text{color:var(--text-muted);font-size:.9em;margin-top:5px}.exit-fullscreen-button{position:absolute;top:15px;right:15px;background-color:var(--surface);color:var(--text-muted);border:none;border-radius:50%;width:40px;height:40px;display:flex;justify-content:center;align-items:center;box-shadow:var(--shadow);cursor:pointer;z-index:60}.exit-fullscreen-button:hover{background-color:var(--border);color:var(--text)}.gallery-page{justify-content:flex-start;align-items:stretch;gap:20px}.gallery-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:10px 0}.back-button{background-color:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);padding:10px 20px;font-size:1em;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:8px;box-shadow:var(--shadow);transition:background-color .3s ease,color .3s ease}.back-button:hover{background-color:var(--border)}.gallery-title{font-family:ZCOOL KuaiLe,Quicksand,sans-serif;font-size:2em;color:var(--primary);text-shadow:1px 1px 0px rgba(0,0,0,.05);margin:0}.empty-gallery{flex-grow:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;color:var(--text-muted);text-align:center}.empty-gallery-image{max-width:250px;border-radius:var(--radius);box-shadow:var(--shadow)}.empty-gallery p{font-size:1.1em}.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px;width:100%;overflow-y:auto;padding:10px}.gallery-item{background-color:var(--bg);border-radius:var(--radius);box-shadow:var(--shadow);padding:15px;display:flex;flex-direction:column;align-items:center;gap:10px;position:relative;overflow:hidden}.gallery-thumbnail{width:100%;height:120px;object-fit:contain;border-radius:10px;border:1px solid var(--border);background-color:#fff}.gallery-thumbnail-placeholder{width:100%;height:120px;border-radius:10px;border:1px solid var(--border);background-color:var(--surface);display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--text-muted);font-size:.9em}.gallery-item-title{font-family:ZCOOL KuaiLe,Quicksand,sans-serif;font-size:1.1em;color:var(--text);margin:0;text-align:center}.gallery-item-date{font-size:.8em;color:var(--text-muted);margin:0}.delete-button{position:absolute;top:8px;right:8px;background-color:var(--danger);color:var(--bg);border:none;border-radius:50%;width:30px;height:30px;display:flex;justify-content:center;align-items:center;cursor:pointer;box-shadow:var(--shadow);transition:background-color .2s ease}.delete-button:hover{background-color:#b21414}.loading-spinner{border:4px solid rgba(0,0,0,.1);border-left-color:var(--primary);border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 768px){.app-container{border-radius:0;max-width:100vw;max-height:100vh}.app-title{font-size:2.5em}.start-button,.gallery-button{padding:12px 25px;font-size:1em}.toolbar{padding:8px;gap:6px}.toolbar-button{padding:8px;border-radius:12px}.brush-size-slider-container{padding:8px}.gallery-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:15px}.gallery-item-title{font-size:1em}}