:root{--primary: #6366f1;--primary-hover: #4f46e5;--bg-app: #f8fafc;--bg-card: #ffffff;--text-main: #1e293b;--text-muted: #64748b;--border: #e2e8f0;--shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:var(--bg-app);color:var(--text-main);overflow:hidden}.app-container{display:flex;flex-direction:column;height:100vh}.app-header{height:64px;background:var(--bg-card);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 24px;z-index:10}.logo{display:flex;align-items:center;gap:12px}.logo h1{font-size:1.25rem;font-weight:700;background:linear-gradient(135deg,#6366f1,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.icon-sparkle{color:#f59e0b}.cloud-badge{font-size:12px;color:var(--text-muted);background:#f1f5f9;padding:4px 8px;border-radius:12px;display:flex;align-items:center;gap:4px}.actions{display:flex;align-items:center;gap:12px}.icon-btn{background:none;border:1px solid var(--border);padding:8px;border-radius:8px;cursor:pointer;color:var(--text-muted);transition:all .2s}.icon-btn:hover:not(:disabled){background:#f1f5f9;color:var(--primary)}.icon-btn:disabled{opacity:.4;cursor:not-allowed}.text-red:hover{color:#ef4444!important;border-color:#fecaca}.save-btn{background:var(--primary);color:#fff;border:none;padding:8px 16px;border-radius:8px;font-weight:600;display:flex;align-items:center;gap:8px;cursor:pointer}.main-content{display:flex;flex:1;overflow:hidden}.toolbar{width:240px;background:var(--bg-card);border-right:1px solid var(--border);padding:20px;display:flex;flex-direction:column;gap:24px}.tool-group{display:grid;grid-template-columns:1fr 1fr;gap:12px}.tool-btn{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px;border:1px solid var(--border);border-radius:12px;background:#fff;cursor:pointer;transition:all .2s}.tool-btn.active{border-color:var(--primary);background:#eef2ff;color:var(--primary)}.settings-group{display:flex;flex-direction:column;gap:12px}.settings-group label{font-size:14px;font-weight:600;color:var(--text-muted)}input[type=range]{width:100%;accent-color:var(--primary)}.color-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.color-swatch{width:32px;height:32px;border-radius:50%;border:2px solid transparent;cursor:pointer}.color-swatch.active{border-color:#1e293b;transform:scale(1.1)}.color-picker{width:32px;height:32px;padding:0;border:none;background:none;cursor:pointer}.ai-trigger-btn{margin-top:auto;background:linear-gradient(135deg,#6366f1,#a855f7);color:#fff;border:none;padding:12px;border-radius:12px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;box-shadow:0 4px 12px #6366f14d}.canvas-area{flex:1;background:#cbd5e1;padding:40px;display:flex;align-items:center;justify-content:center;overflow:auto}canvas{background:#fff;box-shadow:0 20px 25px -5px #0000001a;border-radius:4px;cursor:crosshair;touch-action:none}.gallery-sidebar{width:200px;background:var(--bg-card);border-left:1px solid var(--border);padding:20px;display:flex;flex-direction:column;gap:16px}.gallery-sidebar h3{font-size:14px;color:var(--text-muted)}.gallery-grid{display:flex;flex-direction:column;gap:12px;overflow-y:auto}.gallery-item{width:100%;aspect-ratio:1;border-radius:8px;overflow:hidden;border:1px solid var(--border);cursor:pointer;transition:transform .2s}.gallery-item:hover{transform:scale(1.05)}.gallery-item img{width:100%;height:100%;object-fit:cover}.empty-gallery{font-size:12px;color:var(--text-muted);text-align:center;padding:20px;border:1px dashed var(--border);border-radius:8px}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:100}.ai-modal{background:#fff;width:90%;max-width:600px;border-radius:24px;padding:32px;box-shadow:0 25px 50px -12px #00000040}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.close-btn{background:none;border:none;font-size:24px;cursor:pointer;color:var(--text-muted)}.modal-body{display:flex;flex-direction:column;gap:20px}textarea{width:100%;height:80px;padding:12px;border:1px solid var(--border);border-radius:12px;resize:none;font-family:inherit}.style-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.style-btn{padding:8px;border:1px solid var(--border);border-radius:8px;background:#fff;font-size:12px;cursor:pointer}.style-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}.preview-section{height:240px;background:#f1f5f9;border-radius:16px;display:flex;align-items:center;justify-content:center;overflow:hidden}.ai-preview-img{width:100%;height:100%;object-fit:contain}.generating-state{display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--primary)}.spin{animation:spin 2s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.modal-footer{margin-top:24px}.generate-btn,.primary-btn{width:100%;background:var(--primary);color:#fff;border:none;padding:14px;border-radius:12px;font-weight:600;cursor:pointer}.footer-actions{display:flex;gap:12px}.secondary-btn{flex:1;background:#f1f5f9;border:none;padding:14px;border-radius:12px;cursor:pointer}