:root{--primary: #ff5e62;--primary-glow: rgba(255, 94, 98, .4);--secondary: #ff9966;--bg-dark: #0f1118;--bg-card: rgba(255, 255, 255, .05);--text-main: #f8f9fa;--text-muted: #abb2bf;--accent: #00d2ff;--border: rgba(255, 255, 255, .1);--board-bg: #1a1e2e;--font-main: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}*{margin:0;padding:0;box-sizing:border-box}body{background:var(--bg-dark);color:var(--text-main);font-family:var(--font-main);-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden}#root{display:flex;flex-direction:column;min-height:100vh}.glass{background:var(--bg-card);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:16px}.btn-primary{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;padding:12px 24px;border-radius:12px;border:none;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s;display:flex;align-items:center;gap:8px}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px var(--primary-glow)}.btn-secondary{background:var(--bg-card);color:var(--text-main);padding:12px 24px;border-radius:12px;border:1px solid var(--border);font-weight:500;cursor:pointer;transition:all .2s}.btn-secondary:hover{background:#ffffff1a;border-color:#ffffff4d}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .4s ease-out forwards}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#fff3}.app-container{display:flex;flex-direction:column;height:100vh;padding:clamp(10px,2vw,20px);gap:20px;overflow:hidden}header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;position:sticky;top:0;z-index:100;flex-wrap:wrap;gap:15px}.brand{display:flex;align-items:center;gap:12px}.menu-toggle{display:none;background:none;border:none;color:#fff;font-size:1.8rem;cursor:pointer;padding:5px}.logo-img{width:32px;height:32px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.2));image-rendering:pixelated}header h1{font-size:1.5rem;font-weight:700;background:linear-gradient(135deg,#fff,#abb2bf);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}header h1 small{display:block;font-size:.8rem;font-weight:400;color:var(--text-muted)}.controls{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.mirror-toggle-group{display:flex;align-items:center;background:#ffffff0d;padding:8px 12px;border-radius:12px;border:1px solid var(--border);transition:all .2s}.mirror-toggle-group:hover{background:#ffffff14;border-color:var(--primary)}.checkbox-container{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:.9rem;color:var(--text-muted);-webkit-user-select:none;user-select:none}.checkbox-container input{cursor:pointer;width:16px;height:16px;accent-color:var(--primary)}.checkbox-label{white-space:nowrap}select{background:#1a1e2e;border:1px solid var(--border);color:#fff;padding:10px 32px 10px 16px;border-radius:12px;outline:none;cursor:pointer;font-family:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:calc(100% - 12px) center;transition:all .2s}main{display:grid;grid-template-columns:320px 1fr 300px;gap:20px;flex:1;min-height:0}.sidebar{padding:20px;display:flex;flex-direction:column;overflow-y:auto;min-width:0}.drawer-header{display:none;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:10px;border-bottom:1px solid var(--border)}.close-drawer{background:none;border:none;color:#fff;font-size:2rem;cursor:pointer}.palette-section{margin-bottom:24px}.palette-section h4{font-size:.8rem;color:var(--text-muted);margin-bottom:12px;padding-bottom:6px;border-bottom:1px solid var(--border)}.tool-tabs{display:flex;gap:8px}.tool-btn{flex:1;background:var(--bg-card);border:1px solid var(--border);color:var(--text-main);padding:10px;border-radius:10px;cursor:pointer;transition:all .2s;font-size:.9rem;display:flex;align-items:center;justify-content:center;gap:6px}.tool-btn.active{background:var(--primary);border-color:var(--primary);box-shadow:0 4px 12px var(--primary-glow)}.palette-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(36px,1fr));gap:8px}.color-swatch{width:100%;aspect-ratio:1;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform .2s,border-color .2s}.color-swatch.active{border-color:#fff;box-shadow:0 0 0 2px var(--primary)}.editor-container{display:flex;justify-content:center;align-items:center;background:var(--board-bg);border-radius:20px;border:1px solid var(--border);overflow:hidden;position:relative;cursor:crosshair}.canvas-wrapper{background:#121520;border-radius:4px;box-shadow:0 20px 80px #0009;-webkit-user-select:none;user-select:none;touch-action:none}.viewport-actions{position:absolute;bottom:20px;right:20px;display:flex;gap:8px;z-index:10}.action-btn{background:#0f1118cc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--border);color:#fff;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.2rem}.drawer-backdrop{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;opacity:0;transition:opacity .3s;pointer-events:none}.drawer-backdrop.open{opacity:1;pointer-events:auto}.color-item{display:flex;align-items:center;gap:12px;background:var(--bg-card);padding:12px 16px;border-radius:12px;border:1px solid var(--border)}.color-item .dot{width:20px;height:20px;border-radius:50%}.desktop-only{display:block}@media(max-width:1280px){main{grid-template-columns:280px 1fr 260px}}@media(max-width:1100px){main{grid-template-columns:260px 1fr}.sidebar.right,.desktop-only{display:none}}@media(max-width:850px){.menu-toggle{display:block}main{grid-template-columns:1fr;grid-template-rows:1fr;gap:0}.sidebar.left{position:fixed;top:0;left:0;width:300px;height:100vh;z-index:1001;transform:translate(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);background:#0f1118;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:10px 0 30px #00000080;padding-top:20px}.sidebar.left.drawer-open{transform:translate(0)}.drawer-header{display:flex}.drawer-backdrop{display:block}.editor-container{border-radius:0;border:none}header{padding:10px 15px}header h1{font-size:1.1rem;flex:1}.controls select{font-size:.8rem;padding:8px 24px 8px 12px}.controls button{padding:8px 12px;font-size:.8rem}}.crop-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000d9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:2000;display:flex;justify-content:center;align-items:center}.crop-modal{width:min(500px,90vw);padding:30px;display:flex;flex-direction:column;gap:20px;text-align:center}.crop-header h3{font-size:1.4rem;margin-bottom:8px}.crop-header p{font-size:.9rem;color:var(--text-muted)}.crop-viewport{width:400px;max-width:100%;aspect-ratio:1 / 1;margin:0 auto;position:relative;background:#000;border-radius:8px;overflow:hidden;cursor:grab;box-shadow:0 0 0 2px var(--primary)}.crop-viewport:active{cursor:grabbing}.crop-frame{position:absolute;top:0;left:0;width:100%;height:100%;border:2px dashed #fff;box-shadow:0 0 0 2000px #00000080;pointer-events:none;z-index:5}.crop-controls{display:flex;justify-content:center;padding-top:10px}.crop-actions{display:flex;gap:12px;width:100%}.crop-actions button{flex:1;padding:12px}