@import"https://fonts.googleapis.com/css2?family=Lora:wght@400;500;700&family=Playfair+Display:wght@500;700&display=swap";:root{--bg: #FAF6EE;--surface: #FFFFFF;--primary: #7C5CFA;--primary-dark: #6447E0;--accent: #E8867E;--text: #3D2F1F;--text-muted: #8B7458;--border: #E8DDC9;--success: #7BA694;--warning: #D4A574;--danger: #E07A7A;--radius: 12px;--shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04)}body{margin:0;padding:0;font-family:Lora,Crimson Text,"Source Han Serif SC",serif;background:var(--bg);color:var(--text);min-height:100vh;display:flex;flex-direction:column;overflow:hidden;background-image:radial-gradient(circle,rgba(255,255,255,.02) 1px,transparent 1px);background-size:3px 3px}#root{flex-grow:1;display:flex;flex-direction:column}.app-container{display:flex;flex-direction:column;height:100vh;width:100vw;overflow:hidden;position:relative}.loading-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#faf6eee6;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:1000;font-size:1.2rem;color:var(--text)}.spinner{border:4px solid var(--border);border-top:4px solid var(--primary);border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite;margin-bottom:15px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.cloud-toast{position:absolute;top:20px;left:50%;transform:translate(-50%);background:var(--primary);color:#fff;padding:10px 20px;border-radius:var(--radius);box-shadow:var(--shadow);z-index:100;font-weight:500;font-size:.9rem}.app-header{background:var(--surface);padding:15px 30px;box-shadow:var(--shadow);z-index:10;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--border)}.app-title{font-family:Playfair Display,serif;font-size:1.8rem;margin:0;color:var(--primary-dark);display:flex;align-items:center;gap:10px}.cloud-indicator{font-size:.8rem;color:var(--text-muted);background:var(--border);padding:4px 8px;border-radius:8px;margin-left:10px}.main-content{flex-grow:1;display:flex;padding:20px;gap:20px;overflow:hidden}.toolbar,.right-panel{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;display:flex;flex-direction:column;gap:20px;flex-shrink:0;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}.toolbar::-webkit-scrollbar,.right-panel::-webkit-scrollbar{display:none}.toolbar{width:220px}.right-panel{width:280px}.tool-group{border-bottom:1px solid var(--border);padding-bottom:15px;margin-bottom:5px}.tool-group:last-child{border-bottom:none;padding-bottom:0;margin-bottom:0}.tool-button{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px;margin:5px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .2s ease;color:var(--text);width:45px;height:45px}.tool-button.active{background:var(--primary);color:#fff;border-color:var(--primary-dark);box-shadow:inset 0 1px 3px #0003}.tool-button:hover:not(.active){background:var(--border)}.color-picker-group{display:flex;flex-direction:column;gap:10px}.color-label{font-weight:500;color:var(--text-muted)}.color-input{width:100%;height:40px;border:1px solid var(--border);border-radius:8px;padding:0;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent}.color-input::-webkit-color-swatch-wrapper{padding:0}.color-input::-webkit-color-swatch{border:none;border-radius:7px}.color-swatches{display:flex;flex-wrap:wrap;gap:8px}.color-swatch{width:28px;height:28px;border-radius:50%;cursor:pointer;box-shadow:var(--shadow);transition:all .2s ease}.brush-size-group{display:flex;flex-direction:column;gap:10px}.brush-size-label{font-weight:500;color:var(--text-muted)}.brush-size-slider{width:100%;-webkit-appearance:none;height:8px;background:var(--border);border-radius:5px;outline:none;opacity:.7;transition:opacity .2s}.brush-size-slider:hover{opacity:1}.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)}.action-buttons,.export-buttons{display:flex;flex-direction:column;gap:10px}.action-button{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:10px 15px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;font-size:1rem;color:var(--text);transition:all .2s ease}.action-button:hover:not(:disabled){background:var(--border)}.action-button:disabled{opacity:.6;cursor:not-allowed}.action-button.primary-button{background:linear-gradient(45deg,var(--primary),var(--primary-dark));color:#fff;border:none;box-shadow:var(--shadow)}.action-button.primary-button:hover:not(:disabled){background:linear-gradient(45deg,var(--primary-dark),var(--primary))}.action-button.danger-button{background:var(--danger);color:#fff;border:none}.action-button.danger-button:hover:not(:disabled){background:#c06a6a}.canvas-area{flex-grow:1;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;position:relative;display:flex;justify-content:center;align-items:center}.drawing-canvas{touch-action:none;display:block;width:100%;height:100%}.right-panel h3{font-family:Playfair Display,serif;font-size:1.2rem;margin-top:0;margin-bottom:15px;color:var(--primary-dark)}.panel-toggle-button{background:linear-gradient(90deg,var(--accent),#f0a09a);color:#fff;border:none;border-radius:var(--radius);padding:12px 15px;margin-bottom:20px;cursor:pointer;font-size:1rem;font-weight:500;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:var(--shadow);transition:all .2s ease}.panel-toggle-button:hover{background:linear-gradient(90deg,#f0a09a,var(--accent))}.layers-panel{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;border:1px solid var(--border);border-radius:var(--radius);padding:15px}.layers-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.add-layer-button{background:var(--success);color:#fff;border:none;border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow);transition:all .2s ease}.add-layer-button:hover{background:#6aa08f}.layers-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}.layer-item{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .2s ease}.layer-item.active{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-dark)}.layer-name{font-weight:500;flex-grow:1;color:var(--text)}.layer-controls{display:flex;align-items:center;gap:5px}.layer-controls button{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:5px;border-radius:4px;transition:all .2s ease}.layer-controls button:hover{background:var(--border);color:var(--text)}.layer-controls .delete-layer-button{color:var(--danger)}.layer-controls .delete-layer-button:hover{background:var(--danger);color:#fff}.opacity-slider{width:60px;height:5px;-webkit-appearance:none;background:var(--border);border-radius:3px;outline:none;opacity:.7;transition:opacity .2s}.opacity-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:15px;height:15px;border-radius:50%;background:var(--accent);cursor:pointer;box-shadow:var(--shadow)}.history-panel{padding:15px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);flex-grow:1}.history-thumbnails{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;max-height:250px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--primary) var(--border)}.history-thumbnails::-webkit-scrollbar{width:8px}.history-thumbnails::-webkit-scrollbar-track{background:var(--border);border-radius:10px}.history-thumbnails::-webkit-scrollbar-thumb{background-color:var(--primary);border-radius:10px;border:2px solid var(--border)}.history-thumbnail-item{width:80px;height:60px;border:1px solid var(--border);border-radius:8px;overflow:hidden;cursor:pointer;box-shadow:var(--shadow);transition:all .2s ease}.history-thumbnail-item:hover{border-color:var(--primary);transform:translateY(-2px)}.history-thumbnail-item img{width:100%;height:100%;object-fit:cover;display:block}.text-muted{color:var(--text-muted);font-size:.9rem;margin-top:15px}