*{margin:0;padding:0;box-sizing:border-box}:root{--primary:#667eea;--primary-dark:#764ba2;--secondary:#91cc75;--danger:#e66;--warning:#fac858;--bg:#f8fafc;--panel-bg:#fff;--text:#1e293b;--text-secondary:#64748b;--border:#e2e8f0;--hover:rgba(102,126,234,0.05);--shadow:rgba(0,0,0,0.1)}[data-theme="dark-mode"]{--primary:#667eea;--primary-dark:#764ba2;--secondary:#91cc75;--bg:#1a1a2e;--panel-bg:#16213e;--text:#e0e0e0;--text-secondary:#a0a0a0;--border:#2a2a40;--hover:rgba(102,126,234,0.15);--shadow:rgba(0,0,0,0.5)}[data-theme="theme-ocean"]{--primary:#0077be;--primary-dark:#004c8c;--secondary:#00bcd4;--bg:#e0f7fa;--panel-bg:#fff;--text:#01579b;--text-secondary:#0277bd;--border:#b3e5fc;--hover:rgba(0,119,190,0.05);--shadow:rgba(0,119,190,0.15)}[data-theme="theme-forest"]{--primary:#2e7d32;--primary-dark:#1b5e20;--secondary:#66bb6a;--bg:#e8f5e9;--panel-bg:#fff;--text:#1b5e20;--text-secondary:#388e3c;--border:#c8e6c9;--hover:rgba(46,125,50,0.05);--shadow:rgba(46,125,50,0.15)}[data-theme="theme-sunset"]{--primary:#ff6f00;--primary-dark:#e65100;--secondary:#ff9800;--bg:#fff3e0;--panel-bg:#fff;--text:#e65100;--text-secondary:#f57c00;--border:#ffe0b2;--hover:rgba(255,111,0,0.05);--shadow:rgba(255,111,0,0.15)}[data-theme="theme-purple-dream"]{--primary:#7b1fa2;--primary-dark:#4a148c;--secondary:#ab47bc;--bg:#f3e5f5;--panel-bg:#fff;--text:#4a148c;--text-secondary:#6a1b9a;--border:#e1bee7;--hover:rgba(123,31,162,0.05);--shadow:rgba(123,31,162,0.15)}[data-theme="theme-rose-gold"]{--primary:#d81b60;--primary-dark:#ad1457;--secondary:#ec407a;--bg:#fce4ec;--panel-bg:#fff;--text:#880e4f;--text-secondary:#c2185b;--border:#f8bbd0;--hover:rgba(216,27,96,0.05);--shadow:rgba(216,27,96,0.15)}[data-theme="theme-midnight-blue"]{--primary:#1976d2;--primary-dark:#0d47a1;--secondary:#42a5f5;--bg:#e3f2fd;--panel-bg:#fff;--text:#0d47a1;--text-secondary:#1565c0;--border:#bbdefb;--hover:rgba(25,118,210,0.05);--shadow:rgba(25,118,210,0.15)}[data-theme="theme-emerald"]{--primary:#00897b;--primary-dark:#00695c;--secondary:#26a69a;--bg:#e0f2f1;--panel-bg:#fff;--text:#004d40;--text-secondary:#00796b;--border:#b2dfdb;--hover:rgba(0,137,123,0.05);--shadow:rgba(0,137,123,0.15)}[data-theme="theme-amber"]{--primary:#fb8c00;--primary-dark:#f57c00;--secondary:#ffb74d;--danger:#ff6f00;--warning:#ffd54f;--bg:linear-gradient(135deg,#fffbf5 0,#fff8f0 50%,#fff3e0 100%);--panel-bg:linear-gradient(135deg,#fff 0,#fffdf8 100%);--text:#e65100;--text-secondary:#ef6c00;--border:#ffe0b2;--hover:rgba(251,140,0,0.1);--shadow:rgba(245,124,0,0.2)}[data-theme="theme-cyan"]{--primary:#0097a7;--primary-dark:#006064;--secondary:#00bcd4;--bg:#e0f7fa;--panel-bg:#fff;--text:#006064;--text-secondary:#00838f;--border:#b2ebf2;--hover:rgba(0,151,167,0.05);--shadow:rgba(0,151,167,0.15)}[data-theme="theme-cherry-blossom"]{--primary:#ec407a;--primary-dark:#d81b60;--secondary:#f06292;--danger:#c2185b;--warning:#f8bbd0;--bg:linear-gradient(135deg,#fffbfd 0,#fff5f8 50%,#fce4ec 100%);--panel-bg:linear-gradient(135deg,#fff 0,#fffafc 100%);--text:#880e4f;--text-secondary:#ad1457;--border:#f8bbd0;--hover:rgba(236,64,122,0.1);--shadow:rgba(216,27,96,0.2)}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Microsoft YaHei',Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;transition:background 0.4s cubic-bezier(0.4,0,0.2,1),color 0.4s cubic-bezier(0.4,0,0.2,1)}*{transition:background 0.4s cubic-bezier(0.4,0,0.2,1),border-color 0.4s cubic-bezier(0.4,0,0.2,1),color 0.4s cubic-bezier(0.4,0,0.2,1)}.photo-editor-component{}.bar-panel{background:linear-gradient(135deg,var(--primary) 0,var(--primary-dark) 100%);color:white;padding:20px 30px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 2px 8px var(--shadow)}.bar{font-size:24px;font-weight:600;margin:0}.tool-number{background:rgba(255,255,255,0.2);padding:5px 15px;border-radius:20px;font-size:14px}.photo-editor-container{display:flex;flex-direction:column;height:calc(100vh - 120px);margin22:20px;background:var(--panel-bg);border-radius:12px;box-shadow:0 4px 20px rgba(102,126,234,0.15);overflow:hidden;transition:all 0.3s ease}.photo-editor-container.fullscreen-mode{margin:0 !important;border-radius:0 !important;height:100vh !important;width:100vw !important}.top-toolbar{display:flex;flex-wrap:nowrap;gap:6px;padding:10px 16px;background:linear-gradient(135deg,var(--primary) 0,var(--primary-dark) 100%);box-shadow:0 2px 8px var(--shadow);overflow-x:auto;overflow-y:hidden}.top-toolbar::-webkit-scrollbar{height:4px}.top-toolbar::-webkit-scrollbar-track{background:rgba(255,255,255,0.1)}.top-toolbar::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.3);border-radius:2px}.toolbar-group{display:flex;gap:8px;align-items:center}.theme-select{padding:7px 12px;border:1.5px solid rgba(255,255,255,0.3);border-radius:6px;font-size:12px;cursor:pointer;background:linear-gradient(135deg,rgba(255,255,255,0.15),rgba(255,255,255,0.05));backdrop-filter:blur(10px);color:white;font-weight:500;min-width:160px;box-shadow:0 2px 8px rgba(0,0,0,0.1),inset 0 1px 2px rgba(255,255,255,0.2);text-shadow:0 1px 2px rgba(0,0,0,0.2);transition:all 0.3s cubic-bezier(0.4,0,0.2,1);outline:none}.theme-select:hover{background:linear-gradient(135deg,rgba(255,255,255,0.25),rgba(255,255,255,0.15));box-shadow:0 4px 12px rgba(0,0,0,0.2),inset 0 1px 2px rgba(255,255,255,0.3);transform:translateY(-1px);border-color:rgba(255,255,255,0.5)}.theme-select:focus{box-shadow:0 0 0 3px rgba(255,255,255,0.3),0 4px 12px rgba(0,0,0,0.2)}.theme-select option{background:#1e293b;color:#f1f5f9;padding:8px}.toolbar-btn{padding:7px 12px;border:none;border-radius:6px;background:rgba(255,255,255,0.2);color:white;cursor:pointer;font-size:12px;font-weight:500;transition:all 0.3s;white-space:nowrap;flex-shrink:0}.toolbar-btn:hover{background:rgba(255,255,255,0.3);transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,0.2)}.editor-main{display:flex;flex:1;overflow:hidden}.left-panel,.right-panel{width:280px;background:var(--panel-bg);display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;flex-shrink:0;max-height:100%}.left-panel::-webkit-scrollbar,.right-panel::-webkit-scrollbar{width:8px}.left-panel::-webkit-scrollbar-track,.right-panel::-webkit-scrollbar-track{background:var(--hover);border-radius:4px}.left-panel::-webkit-scrollbar-thumb,.right-panel::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}.left-panel::-webkit-scrollbar-thumb:hover,.right-panel::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}.left-panel{width:240px;background:var(--panel-bg);border-right:2px solid var(--border);overflow-y:auto;overflow-x:hidden;max-height:100%;flex-shrink:0;box-shadow:2px 0 15px var(--shadow)}.right-panel{border-left:2px solid var(--border)}.panel-header{padding:12px 16px;background:linear-gradient(135deg,var(--primary) 0,var(--primary-dark) 100%);color:white;font-size:14px;font-weight:700;letter-spacing:1px;text-align:center;border-bottom:2px solid var(--primary-dark);position:sticky;top:0;z-index:10;backdrop-filter:blur(12px);flex-shrink:0;box-shadow:0 2px 8px var(--shadow)}.tool-category{padding:12px 10px 16px 10px;border-bottom:1px solid var(--border);flex-shrink:0;background:transparent}.category-title{font-size:13px;font-weight:700;margin-bottom:10px;color:var(--text);padding:10px 12px;background:var(--hover);border-left:3px solid var(--primary);border-radius:0 6px 6px 0;letter-spacing:0.8px;box-shadow:0 2px 4px var(--shadow);cursor:pointer;transition:all 0.3s ease;display:flex;justify-content:space-between;align-items:center;user-select:none}.category-title:hover{background:linear-gradient(90deg,var(--hover),transparent);border-left-color:var(--primary-dark);box-shadow:0 3px 8px var(--shadow)}.category-text{flex:1}.category-arrow{font-size:10px;transition:transform 0.3s ease;color:var(--primary);font-weight:bold}.tool-category.collapsed .category-arrow{transform:rotate(-90deg)}.tool-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;transition:all 0.3s ease;overflow:hidden;max-height:1000px;opacity:1}.tool-category.collapsed .tool-grid{max-height:0;opacity:0;margin-top:0;padding-top:0}.tool-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px 8px;border:2px solid var(--border);border-radius:12px;cursor:pointer;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);background:var(--panel-bg);position:relative;overflow:hidden;min-height:70px;backdrop-filter:blur(10px)}.tool-item::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);transition:left 0.5s}.tool-item:hover::before{left:100%}.tool-item:hover{background:var(--hover);border-color:var(--primary);transform:translateY(-3px) scale(1.02);box-shadow:0 8px 24px var(--shadow),inset 0 1px 0 rgba(255,255,255,0.4)}.tool-item.active{background:linear-gradient(135deg,var(--primary) 0,var(--primary-dark) 100%);color:white;border-color:var(--primary-dark);box-shadow:0 8px 24px var(--shadow),inset 0 1px 0 rgba(255,255,255,0.3);transform:translateY(-2px)}.tool-item.active .tool-name{color:white;font-weight:700}.tool-item.active .tool-icon{filter:drop-shadow(0 3px 8px rgba(0,0,0,0.4));transform:scale(1.05)}.tool-icon{font-size:28px;transition:all 0.3s ease;flex-shrink:0;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.1));line-height:1}.tool-item:hover .tool-icon{transform:scale(1.2) rotate(-8deg);filter:drop-shadow(0 3px 6px var(--shadow))}.tool-name{font-size:11.5px;text-align:center;font-weight:600;letter-spacing:0.3px;line-height:1.2;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.center-panel{flex:1;display:flex;flex-direction:column;background:#2a2a2a;min-width:300px}.canvas-header{padding:12px 20px;background:rgba(0,0,0,0.6);color:white;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,0.1)}.canvas-info{display:flex;gap:20px;font-size:13px;color:rgba(255,255,255,0.9)}.canvas-wrapper{flex:1;display:flex;align-items:center;justify-content:center;overflow:auto;padding:20px;position:relative;background:linear-gradient(45deg,#2a2a2a 25%,transparent 25%),linear-gradient(-45deg,#2a2a2a 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#2a2a2a 75%),linear-gradient(-45deg,transparent 75%,#2a2a2a 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;background-color:#1a1a1a}.canvas-wrapper::before{content:'📷 点击"打开"按钮选择图片开始编辑';position:absolute;color:rgba(255,255,255,0.3);font-size:18px;font-weight:500;pointer-events:none;z-index:0}.canvas-wrapper:has(canvas[width]:not([width="300"]))::before{display:none}.canvas-wrapper::-webkit-scrollbar{width:8px;height:8px}.canvas-wrapper::-webkit-scrollbar-track{background:rgba(255,255,255,0.1)}.canvas-wrapper::-webkit-scrollbar-thumb{background:var(--primary);border-radius:4px}.canvas-wrapper::-webkit-scrollbar-thumb:hover{background:var(--primary-dark)}#mainCanvas{display:block;box-shadow:0 8px 32px rgba(0,0,0,0.5);border-radius:4px;background:white;cursor:crosshair;position:relative;z-index:1;image-rendering:auto;image-rendering:-webkit-optimize-contrast;max-width:none;max-height:none}.properties-section{padding:0;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--panel-bg);border:2px solid var(--border);border-radius:10px;margin-bottom:12px;box-shadow:0 2px 8px var(--shadow);backdrop-filter:blur(5px);overflow:hidden}.section-title{font-size:13px;font-weight:600;color:var(--text);padding:10px 12px;margin:0;background:var(--hover);border-radius:8px 8px 0 0;border-bottom:2px solid var(--border);display:flex;justify-content:space-between;align-items:center;cursor:pointer;user-select:none;transition:background 0.2s ease}.section-title:hover{background:linear-gradient(135deg,var(--hover),transparent)}.section-title .category-arrow{font-size:12px;transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);color:var(--primary)}.properties-section.collapsed .category-arrow{transform:rotate(-90deg)}.section-content{max-height:500px;opacity:1;overflow:hidden;transition:max-height 0.3s cubic-bezier(0.4,0,0.2,1),opacity 0.3s cubic-bezier(0.4,0,0.2,1);padding:12px}.properties-section.collapsed .section-content{max-height:0;opacity:0;padding-top:0;padding-bottom:0}.property-row{display:flex;align-items:center;margin-bottom:12px}.property-row-buttons{display:flex;margin-top:10px;gap:8px}.property-row-buttons .toolbar-btn{display:inline-flex !important;align-items:center;justify-content:center;min-height:32px;font-size:12px;padding:6px 12px;background:linear-gradient(135deg,var(--primary),var(--primary-dark)) !important;color:white !important;border:1px solid var(--border);box-shadow:0 2px 6px var(--shadow);font-weight:600}.property-row-buttons .toolbar-btn:hover{background:linear-gradient(135deg,var(--primary-dark),var(--primary)) !important;transform:translateY(-1px);box-shadow:0 4px 12px var(--shadow)}.property-label{flex:0 0 80px;font-size:13px;color:var(--text-secondary);font-weight:500}.color-picker{width:80px;height:30px;border:none;border-radius:4px;cursor:pointer;transition:transform 0.2s}.color-picker:hover{transform:scale(1.05)}.checkbox-input{width:20px;height:20px;cursor:pointer;accent-color:var(--primary)}.select-input{flex:1;padding:5px 8px;border:1px solid var(--border);border-radius:4px;background:white;cursor:pointer;font-size:13px;transition:border-color 0.3s}.select-input:hover{border-color:var(--primary)}.select-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px var(--hover)}.btn-full-width{width:100%;margin-top:10px}.crop-hint{padding:15px;text-align:center;color:var(--text-secondary);font-size:13px;line-height:1.6}.property-slider{flex:1;height:6px;border-radius:3px;background:var(--border);outline:none;cursor:pointer;transition:all 0.3s}.property-slider:hover{background:var(--hover)}.property-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,var(--primary) 0,var(--primary-dark) 100%);cursor:pointer;box-shadow:0 2px 6px var(--shadow)}.property-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,var(--primary) 0,var(--primary-dark) 100%);cursor:pointer;border:none;box-shadow:0 2px 6px var(--shadow)}.slider-value{margin-left:10px;min-width:40px;text-align:center;font-size:13px;font-weight:700;color:var(--primary);background:var(--hover);padding:2px 8px;border-radius:4px;transition:all 0.3s ease}.layers-panel{padding:15px}.layer-item{display:flex;align-items:center;padding:12px;margin-bottom:8px;background:var(--panel-bg);border:2px solid var(--border);border-radius:8px;cursor:pointer;transition:all 0.3s}.layer-item:hover{background:var(--hover);border-color:var(--primary)}.layer-item.active{background:var(--hover);border-color:var(--primary);font-weight:600}.layer-icon{font-size:22px;margin-right:12px}.layer-name{font-size:13px;font-weight:500}.modal-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(5px);z-index:10000;align-items:center;justify-content:center}.flip-dialog-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.65);backdrop-filter:blur(6px);z-index:10000;display:flex;align-items:center;justify-content:center;animation:fadeIn 0.25s ease}.flip-dialog-content{background:var(--panel-bg);border-radius:16px;box-shadow:0 12px 48px rgba(0,0,0,0.3);width:90%;max-width:520px;overflow:hidden;animation:slideInScale 0.3s cubic-bezier(0.4,0,0.2,1);border:1px solid var(--border)}@keyframes slideInScale{from{opacity:0;transform:scale(0.85) translateY(-30px)}to{opacity:1;transform:scale(1) translateY(0)}}.flip-dialog-header{padding:18px 24px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,var(--primary) 0,var(--primary-dark) 100%);color:white;border-bottom:2px solid rgba(255,255,255,0.2)}.flip-dialog-header h3{margin:0;font-size:16px;font-weight:600;letter-spacing:0.5px}.flip-dialog-header .close-btn{background:rgba(255,255,255,0.2);border:none;color:white;font-size:18px;cursor:pointer;width:32px;height:32px;border-radius:8px;transition:all 0.3s;display:flex;align-items:center;justify-content:center}.flip-dialog-header .close-btn:hover{background:rgba(255,255,255,0.3);transform:rotate(90deg)}.flip-dialog-body{padding:32px 24px;background:var(--bg)}.flip-options{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.flip-option{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 20px;border:2px solid var(--border);border-radius:14px;cursor:pointer;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);background:var(--panel-bg);position:relative;overflow:hidden}.flip-option::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(102,126,234,0.15),transparent);transition:left 0.5s}.flip-option:hover::before{left:100%}.flip-option:hover{background:var(--hover);border-color:var(--primary);transform:translateY(-5px) scale(1.03);box-shadow:0 8px 24px var(--shadow)}.flip-option:active{transform:translateY(-3px) scale(1.01)}.flip-icon{font-size:48px;margin-bottom:12px;transition:transform 0.3s;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.1))}.flip-option:hover .flip-icon{transform:scale(1.2) rotate(10deg)}.flip-label{font-size:16px;font-weight:600;color:var(--text);margin-bottom:6px}.flip-desc{font-size:13px;color:var(--text-secondary);text-align:center}.modal-panel{position:relative;background:var(--panel-bg);border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,0.3),0 0 80px var(--shadow);width:90%;max-width:900px;max-height:90vh;overflow:hidden;animation:modalSlideIn 0.3s ease-out;transform:none;border:1px solid var(--border)}@keyframes modalSlideIn{from{opacity:0;transform:scale(0.9) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal-header{padding:14px 18px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,var(--primary) 0,var(--primary-dark) 100%);color:white;border-bottom:2px solid rgba(255,255,255,0.2)}.modal-header h3{margin:0;font-size:15px;font-weight:600;letter-spacing:0.5px}.btn-close{background:rgba(255,255,255,0.2);border:none;color:white;font-size:16px;cursor:pointer;width:28px;height:28px;border-radius:6px;transition:all 0.3s;display:flex;align-items:center;justify-content:center}.btn-close:hover{background:rgba(255,255,255,0.3)}.modal-body{padding:20px;max-height:70vh;overflow-y:auto;background:var(--bg)}.modal-body::-webkit-scrollbar{width:8px}.modal-body::-webkit-scrollbar-track{background:var(--hover);border-radius:4px}.modal-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}.modal-body::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}.filter-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.filter-item{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 12px;border:2px solid var(--border);border-radius:10px;cursor:pointer;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);background:var(--panel-bg);position:relative;overflow:hidden;min-height:95px}.filter-item::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);transition:left 0.5s}.filter-item:hover::before{left:100%}.filter-item:hover{background:var(--hover);border-color:var(--primary);transform:translateY(-3px) scale(1.02);box-shadow:0 6px 20px var(--shadow)}.filter-icon{font-size:36px;margin-bottom:8px;transition:transform 0.3s;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.1))}.filter-item:hover .filter-icon{transform:scale(1.15) rotate(5deg)}.filter-name{font-size:13px;font-weight:600;color:var(--text);text-align:center;line-height:1.3;margin-top:2px}.help-modal .modal-body,.history-modal .modal-body{scrollbar-width:thin;scrollbar-color:var(--border) var(--hover)}.help-modal .modal-body::-webkit-scrollbar,.history-modal .modal-body::-webkit-scrollbar{width:8px}.help-modal .modal-body::-webkit-scrollbar-track,.history-modal .modal-body::-webkit-scrollbar-track{background:var(--hover);border-radius:4px}.help-modal .modal-body::-webkit-scrollbar-thumb,.history-modal .modal-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}.help-section{margin-bottom:25px;padding-bottom:20px;border-bottom:1px solid var(--border)}.help-title{color:var(--primary);font-size:16px;font-weight:700;margin:0 0 15px 0;display:flex;align-items:center;gap:8px}.help-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:12px}.help-item{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--hover);border-radius:8px;border:1px solid var(--border);transition:all 0.2s}.help-item:hover{background:linear-gradient(135deg,var(--hover),transparent);border-color:var(--primary);transform:translateX(3px)}.help-item kbd{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:white;padding:4px 10px;border-radius:5px;font-size:12px;font-weight:600;box-shadow:0 2px 6px var(--shadow);min-width:70px;text-align:center}.help-item span{color:var(--text);font-size:13px}.help-text{margin:8px 0;color:var(--text);font-size:14px;line-height:1.7}.help-text strong{color:var(--primary);font-weight:600}.history-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px}.history-item{position:relative;border:2px solid var(--border);border-radius:12px;overflow:hidden;cursor:pointer;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);background:var(--panel-bg)}.history-item:hover{border-color:var(--primary);transform:translateY(-5px) scale(1.02);box-shadow:0 10px 30px var(--shadow)}.history-item.active{border-color:var(--primary);background:var(--hover);box-shadow:0 0 0 3px var(--hover)}.history-item img{width:100%;height:150px;object-fit:cover;background:var(--bg)}.history-info{padding:12px;background:var(--panel-bg)}.history-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:4px}.history-size{font-size:12px;color:var(--text-secondary)}.history-delete{position:absolute;top:8px;right:8px;width:28px;height:28px;border:none;background:rgba(238,102,102,0.9);color:white;border-radius:50%;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;opacity:0;transition:all 0.3s}.history-item:hover .history-delete{opacity:1}.history-delete:hover{background:#e66;transform:scale(1.1)}@media (max-width:768px){.photo-editor-container{margin:0;border-radius:0;height:100vh}.top-toolbar{flex-wrap:wrap;padding:8px}.toolbar-btn{min-height:36px;font-size:13px;padding:8px 12px}.theme-select{min-width:140px;font-size:11px}.editor-main{flex-direction:column}.left-panel{width:100%;border-right:none;border-bottom:2px solid rgba(102,126,234,0.15);max-height:200px;order:1}.center-panel{order:2;min-height:40vh}.right-panel{width:100%;border-left:none;border-top:2px solid rgba(102,126,234,0.15);max-height:40vh;order:3}.panel-resizer{display:none}.tool-grid{grid-template-columns:repeat(3,1fr);gap:6px}.tool-item{padding:10px 6px;min-height:65px}.tool-icon{font-size:22px}.tool-name{font-size:10.5px}.canvas-header{padding:8px 12px;flex-wrap:wrap;gap:8px}.canvas-info{font-size:11px;gap:12px}.properties-section{padding:12px}.property-row{flex-direction:column;align-items:flex-start;gap:8px}.property-label{flex:none;margin-bottom:4px}.property-slider{width:100%}.transform-grid{grid-template-columns:repeat(3,1fr);gap:8px}.transform-btn{padding:12px 8px}.transform-label{font-size:10px}.modal-panel{margin:20px;max-width:calc(100vw - 40px) !important}.help-grid{grid-template-columns:1fr}.history-list{grid-template-columns:repeat(2,1fr)}.filter-grid{grid-template-columns:repeat(3,1fr);gap:10px}}@media (max-width:480px){.bar{font-size:18px}.toolbar-group{gap:4px}.toolbar-btn{padding:6px 10px;font-size:11px}.canvas-info span{display:block;margin-bottom:2px}.tool-grid{grid-template-columns:repeat(2,1fr);gap:5px}.history-list{grid-template-columns:1fr}.filter-grid{grid-template-columns:repeat(2,1fr);gap:8px}.filter-item{min-height:85px;padding:12px 8px}.filter-icon{font-size:30px}.filter-name{font-size:12px}}@media (pointer:coarse){.tool-item{min-height:72px;padding:14px 8px}.toolbar-btn{min-height:36px;min-width:36px}.property-slider{height:36px}.transform-btn{min-height:50px}}.tool-item:focus,.toolbar-btn:focus,.property-slider:focus{outline:2px solid var(--primary);outline-offset:2px}@media (prefers-contrast:high){.tool-item{border-width:3px}.toolbar-btn{border:2px solid currentColor}.property-slider{outline:1px solid var(--text)}}@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}.tool-item::before{display:none}.filter-item::before{display:none}}.tool-item,.filter-item,.history-item{contain:layout;will-change:transform}@media (hover:none) and (pointer:coarse){.tool-item:hover,.filter-item:hover,.history-item:hover{transform:none;box-shadow:initial}.tool-item::before,.filter-item::before{display:none}}.tutorial-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.75);backdrop-filter:blur(8px);z-index:9998;animation:fadeIn 0.3s ease}.photo-editor-container .tutorial-overlay{position:absolute;width:100%;height:100%}.tutorial-highlight{position:relative;z-index:9999 !important;box-shadow:0 0 0 4px var(--primary),0 0 25px rgba(102,126,234,0.6) !important;animation:pulse 2s infinite;border-radius:8px}@keyframes pulse{0%,100%{box-shadow:0 0 0 4px var(--primary),0 0 25px rgba(102,126,234,0.6)}50%{box-shadow:0 0 0 8px var(--primary),0 0 40px rgba(102,126,234,0.9)}}.tutorial-tooltip{position:fixed;background:white;border-radius:14px;box-shadow:0 12px 48px rgba(0,0,0,0.35),0 0 0 1px rgba(102,126,234,0.1);max-width:480px;z-index:10000;animation:slideIn 0.4s cubic-bezier(0.4,0,0.2,1)}.photo-editor-container .tutorial-tooltip{}@keyframes slideIn{from{opacity:0;transform:translateY(-15px) scale(0.95)}to{opacity:1;transform:translateY(0) scale(1)}}.tutorial-header{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:white;padding:16px 22px;border-radius:14px 14px 0 0;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 8px rgba(102,126,234,0.2)}.tutorial-header h4{margin:0;font-size:16px;font-weight:600}.tutorial-close{background:rgba(255,255,255,0.2);border:none;color:white;font-size:18px;width:28px;height:28px;border-radius:50%;cursor:pointer;transition:all 0.2s}.tutorial-close:hover{background:rgba(255,255,255,0.3);transform:rotate(90deg)}.tutorial-content{padding:22px 24px;color:var(--text);background:linear-gradient(to bottom,#fff,#fafbfc)}.tutorial-content p{margin:0;line-height:1.7;font-size:14px}.tutorial-content kbd{background:linear-gradient(135deg,#667eea,#764ba2);color:white;padding:2px 8px;border-radius:4px;font-size:12px;font-weight:600;box-shadow:0 2px 4px rgba(102,126,234,0.3)}.tutorial-footer{padding:15px 20px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}.tutorial-progress{font-size:13px;color:var(--text-secondary);font-weight:500}.tutorial-buttons{display:flex;gap:8px}.tutorial-tooltip::before{content:'';position:absolute;width:0;height:0;border:10px solid transparent}.tutorial-bottom::before{bottom:100%;left:50%;transform:translateX(-50%);border-bottom-color:var(--primary)}.tutorial-top::before{top:100%;left:50%;transform:translateX(-50%);border-top-color:white}.tutorial-left::before{left:100%;top:50%;transform:translateY(-50%);border-left-color:white}.tutorial-right::before{right:100%;top:50%;transform:translateY(-50%);border-right-color:white}.btn-primary,.btn-secondary,.btn-mini{border:none;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;transition:all 0.3s;padding:8px 16px}.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:white}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(102,126,234,0.4)}.btn-secondary{background:#94a3b8;color:white}.btn-secondary:hover{background:#64748b}.preset-item:hover{border-color:var(--primary);transform:translateY(-3px);box-shadow:0 6px 20px rgba(102,126,234,0.25)}.transform-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:12px 16px}.transform-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px 12px;border:2px solid rgba(102,126,234,0.2);border-radius:12px;background:linear-gradient(135deg,rgba(102,126,234,0.05),rgba(118,75,162,0.05));cursor:pointer;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);position:relative;overflow:hidden}.transform-btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);transition:left 0.5s}.transform-btn:hover::before{left:100%}.transform-btn:hover{background:linear-gradient(135deg,rgba(102,126,234,0.15),rgba(118,75,162,0.15));border-color:var(--primary);transform:translateY(-3px);box-shadow:0 6px 20px rgba(102,126,234,0.25)}.transform-btn:active{transform:translateY(-1px);box-shadow:0 3px 10px rgba(102,126,234,0.2)}.transform-icon{font-size:28px;margin-bottom:6px;transition:transform 0.3s}.transform-btn:hover .transform-icon{transform:scale(1.15) rotate(5deg)}.transform-label{font-size:12px;font-weight:600;color:var(--text)}body.dark-mode{--bg:#1e293b;--panel-bg:#0f172a;--text:#e2e8f0;--text-secondary:#94a3b8;--border:rgba(148,163,184,0.2);--hover:rgba(148,163,184,0.1)}body.dark-mode .tool-item,body.dark-mode .layer-item,body.dark-mode .filter-item{background:#1e293b;color:#e2e8f0}body.dark-mode .modal-panel{background:#0f172a;color:#e2e8f0}.loading-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;z-index:10001}.loading-spinner{width:60px;height:60px;border:4px solid rgba(255,255,255,0.3);border-top-color:var(--primary);border-radius:50%;animation:spin 0.8s linear infinite}.loading-text{color:white;margin-top:20px;font-size:16px;font-weight:600}@media (max-width:992px){.editor-main{flex-direction:column}.left-panel,.right-panel{width:100%;max-height:300px;border:none;border-top:2px solid rgba(102,126,234,0.15)}.filter-grid{grid-template-columns:repeat(3,1fr)}.canvas-header{flex-wrap:wrap}.canvas-info{flex-wrap:wrap;font-size:12px}}@media (max-width:768px){.tool-grid{grid-template-columns:repeat(2,1fr)}.filter-grid{grid-template-columns:repeat(2,1fr)}.top-toolbar{padding:8px 12px}.toolbar-btn{font-size:12px;padding:6px 10px}.canvas-wrapper{padding:10px}}.toolbar-btn:focus,.tool-item:focus,.filter-item:focus{outline:3px solid #fbbf24;outline-offset:2px}.tool-item,.filter-item,.layer-item{transition:all 0.3s cubic-bezier(0.4,0,0.2,1)}.loading-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10001}.loading-spinner{width:60px;height:60px;border:4px solid rgba(255,255,255,0.3);border-top-color:var(--primary);border-radius:50%;animation:spin 0.8s linear infinite}.loading-text{color:white;margin-top:20px;font-size:16px;font-weight:600}@keyframes spin{to{transform:rotate(360deg)}}.loading{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,0.3);border-top-color:white;border-radius:50%;animation:spin 0.8s linear infinite}.history-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:15px;padding:10px}.history-item{position:relative;border:2px solid rgba(102,126,234,0.15);border-radius:10px;overflow:hidden;cursor:pointer;background:white;transition:all 0.3s cubic-bezier(0.4,0,0.2,1)}.history-item:hover{border-color:var(--primary);transform:translateY(-3px);box-shadow:0 6px 20px rgba(102,126,234,0.25)}.history-item.active{border-color:var(--primary);background:linear-gradient(135deg,rgba(102,126,234,0.1) 0,rgba(118,75,162,0.1) 100%);box-shadow:0 4px 12px rgba(102,126,234,0.3)}.history-item img{width:100%;height:120px;object-fit:cover;display:block}.history-info{padding:10px;background:rgba(248,250,252,0.9)}.history-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:4px}.history-size{font-size:11px;color:var(--text-secondary)}.history-delete{position:absolute;top:8px;right:8px;width:24px;height:24px;border:none;border-radius:50%;background:rgba(238,102,102,0.9);color:white;cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;opacity:0;transition:all 0.3s cubic-bezier(0.4,0,0.2,1)}.history-item:hover .history-delete{opacity:1}.history-delete:hover{background:#c00;transform:scale(1.1)}.photo-editor-fullscreen-active{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;z-index:9999;background:var(--bg);margin:0 !important;padding:0 !important}.photo-editor-fullscreen-active .bar-panel{display:none}.photo-editor-fullscreen-active .photo-editor-container{margin:0 !important;border-radius:0 !important;height:100vh !important;width:100vw !important}.photo-editor-fullscreen-active .top-toolbar,.photo-editor-fullscreen-active .toolbar-btn{pointer-events:auto}.panel-resizer{width:5px;background:transparent;cursor:col-resize;position:relative;flex-shrink:0;transition:background 0.3s cubic-bezier(0.4,0,0.2,1),width 0.3s cubic-bezier(0.4,0,0.2,1)}.panel-resizer:hover{background:var(--primary);width:7px;box-shadow:0 0 8px rgba(102,126,234,0.5)}.panel-resizer.resizing{background:var(--primary-dark);width:7px;box-shadow:0 0 12px rgba(102,126,234,0.8)}.panel-resizer::before{content:'';position:absolute;top:0;left:-3px;right:-3px;bottom:0}.left-panel{border-right:2px solid rgba(102,126,234,0.15)}.right-panel{border-left:2px solid rgba(102,126,234,0.15)}