.login-container{display:flex;justify-content:center;align-items:center;min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2)}.login-box{background:#fff;border-radius:20px;box-shadow:0 20px 60px #0000004d;padding:40px;width:100%;max-width:420px}.login-header{text-align:center;margin-bottom:30px}.login-header h1{margin:0;font-size:2em;color:#333}.login-header p{margin:5px 0 0;color:#666;font-size:.9em}.login-form{display:flex;flex-direction:column;gap:20px}.form-group{display:flex;flex-direction:column;gap:8px}.form-group label{font-weight:600;color:#333;font-size:.95em}.form-group input{padding:12px 16px;border:2px solid #e0e0e0;border-radius:8px;font-size:1em;transition:all .3s ease}.form-group input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.error-message{background:#fee;color:#c33;padding:12px 16px;border-radius:8px;border-left:4px solid #c33;font-size:.9em}.login-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:14px 24px;border-radius:8px;font-size:1.05em;font-weight:600;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.login-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 30px #667eea66}.login-button:active:not(:disabled){transform:translateY(0)}.login-button:disabled{opacity:.6;cursor:not-allowed}.login-footer{margin-top:30px;padding-top:20px;border-top:1px solid #e0e0e0;text-align:center;color:#666;font-size:.9em}.login-footer p{margin:5px 0}.login-footer strong{color:#333;font-family:Courier New,monospace;background:#f0f0f0;padding:2px 6px;border-radius:4px}.dashboard{min-height:100vh;background:#f5f7fa}.dashboard-header{background:#fff;padding:20px 40px;box-shadow:0 2px 10px #0000000d;display:flex;justify-content:space-between;align-items:center}.header-left h1{margin:0;font-size:1.5em;color:#333}.header-right{display:flex;align-items:center;gap:20px}.user-info{display:flex;flex-direction:column;align-items:flex-end}.user-name{font-weight:600;color:#333}.user-role{font-size:.85em;color:#666;background:#f0f0f0;padding:2px 8px;border-radius:4px}.logout-button{background:#e74c3c;color:#fff;border:none;padding:10px 20px;border-radius:6px;cursor:pointer;font-weight:600;transition:background .3s ease}.logout-button:hover{background:#c0392b}.dashboard-content{max-width:1200px;margin:0 auto;padding:40px 20px}.welcome-section{background:#fff;padding:30px;border-radius:12px;box-shadow:0 2px 10px #0000000d;margin-bottom:30px}.welcome-section h2{margin:0 0 10px;color:#333}.welcome-section p{margin:0;color:#666}.admin-quick-link{margin-bottom:30px}.admin-button{display:inline-block;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:15px 30px;border-radius:8px;text-decoration:none;font-weight:600;transition:transform .2s ease}.admin-button:hover{transform:translateY(-2px)}.modules-section{background:#fff;padding:30px;border-radius:12px;box-shadow:0 2px 10px #0000000d;margin-bottom:30px}.modules-section h3{margin:0 0 20px;color:#333}.modules-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}.module-card{background:#f9f9f9;border:2px solid #e0e0e0;border-radius:12px;padding:24px;text-align:center;transition:all .3s ease}.module-card:hover{border-color:#667eea;box-shadow:0 4px 20px #667eea26}.module-icon{font-size:3em;margin-bottom:15px}.module-card h4{margin:0 0 10px;color:#333}.module-card p{margin:0 0 20px;color:#666;font-size:.9em}.module-button{background:#667eea;color:#fff;border:none;padding:10px 24px;border-radius:6px;cursor:pointer;font-weight:600;transition:background .3s ease}.module-button:hover{background:#5568d3}.stats-section{background:#fff;padding:30px;border-radius:12px;box-shadow:0 2px 10px #0000000d;margin-bottom:30px}.stats-section h3{margin:0 0 20px;color:#333}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}.stat-card{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:24px;border-radius:12px;text-align:center}.stat-value{font-size:2.5em;font-weight:700;margin-bottom:8px}.stat-label{font-size:.9em;opacity:.9}.info-section{background:#fff;padding:30px;border-radius:12px;box-shadow:0 2px 10px #0000000d}.info-section h3{margin:0 0 15px;color:#333}.info-section ul{list-style:none;padding:0;margin:0}.info-section li{padding:10px 0;border-bottom:1px solid #e0e0e0;color:#666}.info-section li:last-child{border-bottom:none}.loading{display:flex;justify-content:center;align-items:center;height:100vh;font-size:1.2em;color:#666}.admin-panel{min-height:100vh;background:#f5f7fa}.admin-header{background:#fff;padding:20px 40px;box-shadow:0 2px 10px #0000000d;display:flex;justify-content:space-between;align-items:center}.admin-header h1{margin:0;font-size:1.5em;color:#333}.header-right{display:flex;gap:10px}.back-button{background:#95a5a6;color:#fff;border:none;padding:10px 20px;border-radius:6px;cursor:pointer;font-weight:600;transition:background .3s ease}.back-button:hover{background:#7f8c8d}.admin-content{max-width:1400px;margin:0 auto;padding:40px 20px}.admin-section{background:#fff;padding:30px;border-radius:12px;box-shadow:0 2px 10px #0000000d;margin-bottom:30px}.admin-section h2{margin:0 0 20px;color:#333}.table-container{overflow-x:auto}.admin-table{width:100%;border-collapse:collapse}.admin-table th{background:#f8f9fa;padding:12px 16px;text-align:left;font-weight:600;color:#333;border-bottom:2px solid #e0e0e0}.admin-table td{padding:12px 16px;border-bottom:1px solid #f0f0f0;color:#666}.admin-table tr:hover{background:#f8f9fa}.role-badge{display:inline-block;padding:4px 12px;border-radius:12px;font-size:.85em;font-weight:600}.role-badge.role-1{background:#e74c3c;color:#fff}.role-badge.role-2{background:#e67e22;color:#fff}.role-badge.role-3{background:#3498db;color:#fff}.role-badge.role-4{background:#95a5a6;color:#fff}.role-badge.role-5{background:#ecf0f1;color:#7f8c8d}.status-badge{display:inline-block;padding:4px 12px;border-radius:12px;font-size:.85em;font-weight:600}.status-badge.active{background:#d4edda;color:#155724}.status-badge.inactive{background:#f8d7da;color:#721c24}.modules-list{display:flex;flex-direction:column;gap:15px}.module-item{display:flex;justify-content:space-between;align-items:center;padding:20px;background:#f9f9f9;border:2px solid #e0e0e0;border-radius:12px;transition:all .3s ease}.module-item:hover{border-color:#667eea}.module-info{display:flex;align-items:center;gap:20px}.module-icon{font-size:2.5em}.module-info h3{margin:0 0 5px;color:#333}.module-info p{margin:0 0 5px;color:#666;font-size:.9em}.module-route{display:inline-block;background:#ecf0f1;color:#7f8c8d;padding:2px 8px;border-radius:4px;font-size:.85em;font-family:Courier New,monospace}.toggle-button{padding:10px 24px;border:2px solid;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease}.toggle-button.active{background:#27ae60;color:#fff;border-color:#27ae60}.toggle-button.active:hover{background:#229954;border-color:#229954}.toggle-button.inactive{background:#fff;color:#95a5a6;border-color:#95a5a6}.toggle-button.inactive:hover{background:#95a5a6;color:#fff}.system-info{list-style:none;padding:0;margin:0}.system-info li{padding:12px 0;border-bottom:1px solid #e0e0e0;color:#666}.system-info li:last-child{border-bottom:none}.system-info strong{color:#333}.add-button{background:#27ae60;color:#fff;border:none;padding:10px 20px;border-radius:6px;cursor:pointer;font-weight:600}.add-user-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:20px 0;padding:20px;background:#f9f9f9;border-radius:8px}.add-user-form input,.add-user-form select{padding:10px;border:1px solid #ddd;border-radius:4px}.delete-btn{background:#e74c3c;color:#fff;border:none;padding:6px 12px;border-radius:4px;cursor:pointer}.admin-tabs{display:flex;gap:10px;padding:20px 40px;background:#fff;border-bottom:2px solid #e0e0e0}.admin-tabs button{padding:12px 24px;border:none;background:#f0f0f0;border-radius:8px 8px 0 0;cursor:pointer;font-weight:600;transition:all .3s ease}.admin-tabs button.active{background:#667eea;color:#fff}.permissions-layout{display:grid;grid-template-columns:300px 1fr;gap:20px}.users-list{background:#f9f9f9;border-radius:8px;padding:15px}.user-item{padding:12px;border:2px solid #e0e0e0;border-radius:6px;margin-bottom:8px;cursor:pointer;transition:all .3s ease}.user-item:hover{border-color:#667eea}.user-item.selected{background:#667eea;color:#fff;border-color:#667eea}.user-item strong{display:block}.user-item .user-role{font-size:.85em;opacity:.8}.permissions-panel{background:#f9f9f9;border-radius:8px;padding:20px;max-height:600px;overflow-y:auto}.info-text{background:#fff3cd;padding:10px;border-radius:4px;margin-bottom:15px}.permission-group{background:#fff;padding:15px;border-radius:6px;margin-bottom:15px}.permission-group h4{margin:0 0 10px;color:#667eea;text-transform:capitalize}.permission-checkbox{display:flex;align-items:center;gap:10px;padding:8px;cursor:pointer;border-radius:4px;transition:background .2s}.permission-checkbox:hover{background:#f0f0f0}.permission-checkbox input{cursor:pointer}.permission-checkbox span{font-weight:600;flex:1}.permission-checkbox small{color:#666;font-size:.85em}.module-perm{display:block;color:#666;font-size:.85em;margin-top:5px}.settings-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin-top:20px}.settings-card{background:#fff;padding:25px;border-radius:12px;box-shadow:0 2px 10px #0000001a;border:1px solid #e0e0e0}.settings-card h3{margin:0 0 10px;color:#333}.settings-card p{color:#666;margin-bottom:20px}.config-button{width:100%;padding:12px;background:#667eea;color:#fff;border:none;border-radius:6px;font-weight:600;cursor:pointer;transition:background .3s}.config-button:hover{background:#5568d3}.admin-table td.actions-cell{display:flex;gap:8px;align-items:center}.edit-btn{background:#3498db;color:#fff;border:none;padding:6px 12px;border-radius:4px;cursor:pointer;transition:background .3s ease}.edit-btn:hover{background:#2980b9}.modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background:#fff;padding:25px 30px;border-radius:12px;box-shadow:0 5px 20px #0003;width:100%;max-width:500px;z-index:1001}.modal-content h3{margin-top:0;margin-bottom:20px;color:#333}.modal-form{display:flex;flex-direction:column;gap:15px}.modal-form label{font-weight:600;color:#555;margin-bottom:-10px}.modal-form input[type=text],.modal-form input[type=password],.modal-form select{width:100%;padding:12px;border:1px solid #ddd;border-radius:6px;box-sizing:border-box}.modal-form .checkbox-label{display:flex;align-items:center;gap:10px;font-weight:400}.modal-form .checkbox-label input{width:auto}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.modal-actions button{padding:10px 20px;border:none;border-radius:6px;font-weight:600;cursor:pointer;transition:background .3s ease}.modal-actions .btn-save{background:#27ae60;color:#fff}.modal-actions .btn-save:hover{background:#229954}.modal-actions .btn-cancel{background:#f0f0f0;color:#555}.modal-actions .btn-cancel:hover{background:#e0e0e0}.lightbox-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000f2;z-index:10000;display:flex;align-items:center;justify-content:center;animation:fadeIn .2s ease}.lightbox-close{position:absolute;top:20px;right:20px;width:44px;height:44px;border:none;background:#ffffff1a;color:#fff;font-size:24px;border-radius:50%;cursor:pointer;z-index:10002;transition:all .2s;display:flex;align-items:center;justify-content:center}.lightbox-close:hover{background:#fff3;transform:scale(1.1)}.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:60px;height:60px;border:none;background:#ffffff1a;color:#fff;font-size:40px;border-radius:50%;cursor:pointer;z-index:10002;transition:all .2s;display:flex;align-items:center;justify-content:center}.lightbox-nav:hover{background:#fff3}.lightbox-prev{left:20px}.lightbox-next{right:20px}.lightbox-image-container{max-width:90vw;max-height:80vh;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.lightbox-image{max-width:100%;max-height:80vh;object-fit:contain;transition:transform .1s ease-out,opacity .3s;-webkit-user-select:none;user-select:none}.lightbox-loader{position:absolute;display:flex;align-items:center;justify-content:center}.lightbox-loader .spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}.lightbox-toolbar{position:absolute;bottom:80px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:20px;padding:10px 20px;background:#000000b3;border-radius:30px;z-index:10002}.lightbox-toolbar button{width:36px;height:36px;border:none;background:#ffffff1a;color:#fff;font-size:16px;border-radius:50%;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.lightbox-toolbar button:hover{background:#fff3}.lightbox-toolbar-left,.lightbox-toolbar-right{display:flex;align-items:center;gap:8px}.lightbox-toolbar-center{padding:0 20px}.zoom-level{color:#fff;font-size:12px;min-width:50px;text-align:center}.lightbox-counter{color:#fff;font-size:14px;font-weight:500}.lightbox-info{position:absolute;bottom:140px;left:50%;transform:translate(-50%);max-width:600px;padding:15px 25px;background:#000000b3;border-radius:10px;text-align:center;z-index:10001}.lightbox-title{color:#fff;margin:0 0 5px;font-size:16px;font-weight:500}.lightbox-description{color:#ffffffb3;margin:0;font-size:13px;line-height:1.4;max-height:60px;overflow:hidden;text-overflow:ellipsis}.lightbox-thumbnails{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:flex;gap:8px;padding:10px;background:#00000080;border-radius:10px;max-width:90vw;overflow-x:auto;z-index:10002}.lightbox-thumb{width:50px;height:50px;border:2px solid transparent;border-radius:6px;overflow:hidden;cursor:pointer;transition:all .2s;padding:0;background:transparent;flex-shrink:0}.lightbox-thumb:hover{border-color:#ffffff80}.lightbox-thumb.active{border-color:#fff}.lightbox-thumb img{width:100%;height:100%;object-fit:cover}@media (max-width: 768px){.lightbox-nav{width:44px;height:44px;font-size:30px}.lightbox-prev{left:10px}.lightbox-next{right:10px}.lightbox-toolbar{bottom:90px;padding:8px 15px;gap:10px}.lightbox-toolbar button{width:32px;height:32px;font-size:14px}.lightbox-thumbnails{max-width:95vw}.lightbox-thumb{width:40px;height:40px}.lightbox-info{bottom:150px;max-width:90vw;padding:10px 15px}}@media (max-width: 480px){.lightbox-thumbnails{display:none}.lightbox-toolbar{bottom:20px}}.ai-generator-page{min-height:100vh;background:#f5f7fa}.header{display:flex;justify-content:space-between;align-items:center;padding:20px 30px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.header-left{display:flex;align-items:baseline;gap:15px}.header h1{margin:0;font-size:28px;font-weight:600}.header-subtitle{font-size:14px;opacity:.8;background:#fff3;padding:4px 12px;border-radius:20px}.back-btn{padding:10px 20px;background:#fff3;border:none;color:#fff;border-radius:8px;cursor:pointer;font-size:14px;transition:all .2s}.back-btn:hover{background:#ffffff4d}.toast{position:fixed;top:20px;right:20px;padding:15px 25px;border-radius:10px;font-weight:500;z-index:9999;animation:slideIn .3s ease}.toast-success{background:#28a745;color:#fff}.toast-error{background:#dc3545;color:#fff}.content-wrapper{display:grid;grid-template-columns:280px 1fr;gap:25px;padding:25px;max-width:1600px;margin:0 auto}.sidebar{display:flex;flex-direction:column;gap:20px}.sidebar-section{background:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 10px #0000000d}.sidebar-section h3{margin:0 0 15px;font-size:14px;text-transform:uppercase;color:#666;letter-spacing:.5px}.sidebar-empty{color:#999;font-size:13px;text-align:center;padding:20px 0}.recent-jobs-list{display:flex;flex-direction:column;gap:10px}.recent-job-card{display:flex;gap:12px;padding:10px;background:#f8f9fa;border-radius:8px;cursor:pointer;transition:all .2s}.recent-job-card:hover{background:#eef1f5;transform:translate(3px)}.recent-job-thumb{width:50px;height:50px;border-radius:6px;object-fit:cover}.recent-job-thumb.placeholder{display:flex;align-items:center;justify-content:center;background:#e9ecef;font-size:20px}.recent-job-info{display:flex;flex-direction:column;justify-content:center;gap:4px}.recent-job-name{font-size:13px;font-weight:500;color:#333}.recent-job-count{font-size:11px;color:#888}.quick-template{padding:8px 12px;background:#f0f4ff;border-radius:6px;font-size:13px;color:#5b6be6;cursor:pointer;margin-bottom:8px;transition:all .2s}.quick-template:hover{background:#e0e7ff}.main-content{display:flex;flex-direction:column;gap:25px}.card{background:#fff;border-radius:12px;padding:25px;box-shadow:0 2px 10px #0000000d}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid #eee}.card-header h2{margin:0;font-size:20px;color:#333}.btn-templates{padding:8px 16px;background:#f0f4ff;border:none;color:#5b6be6;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s}.btn-templates:hover{background:#e0e7ff}.templates-panel{background:#f8f9fa;border-radius:10px;padding:20px;margin-bottom:20px;animation:expandDown .3s ease}@keyframes expandDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.templates-header{display:flex;gap:15px;margin-bottom:15px}.templates-search,.templates-category-filter{padding:10px 15px;border:1px solid #ddd;border-radius:8px;font-size:14px}.templates-search{flex:1}.templates-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;max-height:300px;overflow-y:auto;padding:5px}.template-item{background:#fff;border-radius:8px;padding:15px;cursor:pointer;border:1px solid #eee;transition:all .2s}.template-item:hover{border-color:#667eea;box-shadow:0 2px 8px #667eea26}.template-main{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.template-name{font-weight:500;color:#333}.template-category{font-size:11px;padding:3px 8px;background:#e9ecef;border-radius:10px;color:#666}.template-preview{font-size:12px;color:#888;margin:0 0 10px;line-height:1.4}.template-actions{display:flex;gap:8px}.template-actions button{padding:4px 8px;background:transparent;border:none;cursor:pointer;opacity:.5;transition:all .2s}.template-actions button:hover{opacity:1}.save-template-form{display:flex;gap:10px;margin-top:15px;padding-top:15px;border-top:1px solid #ddd}.save-template-form input{flex:1;padding:10px 15px;border:1px solid #ddd;border-radius:8px}.save-template-form button{padding:10px 20px;background:#667eea;color:#fff;border:none;border-radius:8px;cursor:pointer;white-space:nowrap}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;font-weight:500;color:#444}.form-group input,.form-group textarea,.form-group select{width:100%;padding:12px 15px;border:1px solid #ddd;border-radius:8px;font-size:14px;transition:all .2s;box-sizing:border-box}.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.form-group textarea{resize:vertical;min-height:100px}.form-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.form-actions{display:flex;gap:15px;margin-top:10px}.btn-primary{padding:14px 30px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:500;cursor:pointer;transition:all .2s}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 15px #667eea66}.btn-secondary{padding:14px 25px;background:#f0f4ff;color:#667eea;border:none;border-radius:8px;font-size:14px;cursor:pointer;transition:all .2s}.btn-secondary:hover{background:#e0e7ff}.jobs-filters{display:flex;gap:15px}.jobs-filters select,.jobs-filters input{padding:8px 15px;border:1px solid #ddd;border-radius:8px;font-size:13px}.jobs-filters input{width:200px}.loading-state,.empty-state{text-align:center;padding:40px;color:#888}.jobs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:20px}.job-card{background:#f8f9fa;border-radius:12px;overflow:hidden;border:1px solid #eee;transition:all .2s}.job-card:hover{box-shadow:0 4px 15px #0000001a}.job-card.job-status-failed{border-color:#ffcdd2;background:#fff8f8}.job-card.job-status-processing{border-color:#bbdefb;background:#f8fbff}.job-thumbnail{height:180px;background:#e9ecef;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;overflow:hidden}.job-thumbnail img{width:100%;height:100%;object-fit:cover;transition:transform .3s}.job-thumbnail:hover img{transform:scale(1.05)}.thumb-placeholder{font-size:48px;opacity:.3}.thumb-loading{display:flex;flex-direction:column;align-items:center;gap:10px}.thumb-loading .spinner{width:30px;height:30px;border:3px solid #ddd;border-top-color:#667eea;border-radius:50%;animation:spin 1s linear infinite}.thumb-count{position:absolute;bottom:10px;right:10px;background:#000000b3;color:#fff;padding:4px 10px;border-radius:15px;font-size:12px;font-weight:500}.job-info{padding:15px}.job-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.job-filename{font-weight:600;color:#333}.job-status-badge{padding:4px 12px;border-radius:15px;color:#fff;font-size:11px;text-transform:uppercase;font-weight:500}.job-prompt{font-size:13px;color:#666;margin:0 0 12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4}.job-meta{display:flex;gap:15px;font-size:12px;color:#888;margin-bottom:12px}.job-error{font-size:12px;color:#dc3545;background:#ffebee;padding:8px 12px;border-radius:6px;margin:10px 0}.progress-bar{height:6px;background:#e9ecef;border-radius:3px;overflow:hidden;margin:10px 0}.progress-fill{height:100%;background:linear-gradient(90deg,#667eea,#764ba2);transition:width .3s}.job-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;padding-top:12px;border-top:1px solid #eee}.btn-action{padding:6px 12px;background:#fff;border:1px solid #ddd;border-radius:6px;font-size:12px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:5px}.btn-action:hover{background:#f0f4ff;border-color:#667eea;color:#667eea}.btn-action:disabled{opacity:.5;cursor:not-allowed}.btn-action.btn-danger{color:#dc3545}.btn-action.btn-danger:hover{background:#fff5f5;border-color:#dc3545}.pagination{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:25px;padding-top:20px;border-top:1px solid #eee}.pagination button:hover:not(:disabled){background:#f0f4ff;border-color:#667eea}@media (max-width: 1200px){.content-wrapper{grid-template-columns:1fr}.sidebar{display:grid;grid-template-columns:repeat(2,1fr)}}@media (max-width: 768px){.header{flex-direction:column;gap:15px;text-align:center}.header-left{flex-direction:column;gap:10px}.content-wrapper{padding:15px}.sidebar,.form-row,.jobs-grid{grid-template-columns:1fr}.jobs-filters{flex-direction:column}.jobs-filters input{width:100%}.templates-list{grid-template-columns:1fr}}.image-modifier-page{min-height:100vh;background:#f5f7fa}.image-modifier-page .header{display:flex;justify-content:space-between;align-items:center;padding:20px 30px;background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff}.image-modifier-page .header-left{display:flex;align-items:baseline;gap:15px}.image-modifier-page .header h1{margin:0;font-size:28px;font-weight:600}.image-modifier-page .header-subtitle{font-size:14px;opacity:.8;background:#fff3;padding:4px 12px;border-radius:20px}.image-modifier-page .back-btn{padding:10px 20px;background:#fff3;border:none;color:#fff;border-radius:8px;cursor:pointer;font-size:14px;transition:all .2s}.image-modifier-page .back-btn:hover{background:#ffffff4d}.image-modifier-page .toast{position:fixed;top:20px;right:20px;padding:15px 25px;border-radius:10px;font-weight:500;z-index:9999;animation:slideIn .3s ease}.image-modifier-page .toast-success{background:#28a745;color:#fff}.image-modifier-page .toast-error{background:#dc3545;color:#fff}.image-modifier-page .content-wrapper{display:grid;grid-template-columns:280px 1fr;gap:25px;padding:25px;max-width:1600px;margin:0 auto}.image-modifier-page .sidebar{display:flex;flex-direction:column;gap:20px}.image-modifier-page .sidebar-section{background:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 10px #0000000d}.image-modifier-page .sidebar-section h3{margin:0 0 15px;font-size:14px;text-transform:uppercase;color:#666;letter-spacing:.5px}.image-modifier-page .sidebar-empty{color:#999;font-size:13px;text-align:center;padding:20px 0}.image-modifier-page .recent-jobs-list{display:flex;flex-direction:column;gap:10px}.image-modifier-page .recent-job-card{display:flex;gap:12px;padding:10px;background:#f8f9fa;border-radius:8px;cursor:pointer;transition:all .2s}.image-modifier-page .recent-job-card:hover{background:#fff0f3;transform:translate(3px)}.image-modifier-page .recent-job-thumb{width:50px;height:50px;border-radius:6px;object-fit:cover}.image-modifier-page .recent-job-thumb.placeholder{display:flex;align-items:center;justify-content:center;background:#e9ecef;font-size:20px}.image-modifier-page .recent-job-info{display:flex;flex-direction:column;justify-content:center;gap:4px}.image-modifier-page .recent-job-name{font-size:13px;font-weight:500;color:#333}.image-modifier-page .recent-job-count{font-size:11px;color:#888}.image-modifier-page .quick-template{padding:8px 12px;background:#fff0f3;border-radius:6px;font-size:13px;color:#f5576c;cursor:pointer;margin-bottom:8px;transition:all .2s}.image-modifier-page .quick-template:hover{background:#ffe0e6}.image-modifier-page .main-content{display:flex;flex-direction:column;gap:25px}.image-modifier-page .card{background:#fff;border-radius:12px;padding:25px;box-shadow:0 2px 10px #0000000d}.image-modifier-page .card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid #eee}.image-modifier-page .card-header h2{margin:0;font-size:20px;color:#333}.image-modifier-page .btn-templates{padding:8px 16px;background:#fff0f3;border:none;color:#f5576c;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s}.image-modifier-page .btn-templates:hover{background:#ffe0e6}.image-modifier-page .templates-panel{background:#f8f9fa;border-radius:10px;padding:20px;margin-bottom:20px}.image-modifier-page .templates-header{margin-bottom:15px}.image-modifier-page .templates-category-filter{padding:10px 15px;border:1px solid #ddd;border-radius:8px;font-size:14px;min-width:200px}.image-modifier-page .templates-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;max-height:250px;overflow-y:auto}.image-modifier-page .template-item{background:#fff;border-radius:8px;padding:15px;cursor:pointer;border:1px solid #eee;transition:all .2s}.image-modifier-page .template-item:hover{border-color:#f5576c}.image-modifier-page .template-main{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.image-modifier-page .template-name{font-weight:500;color:#333}.image-modifier-page .template-category{font-size:11px;padding:3px 8px;background:#e9ecef;border-radius:10px;color:#666}.image-modifier-page .template-preview{font-size:12px;color:#888;margin:0 0 10px;line-height:1.4}.image-modifier-page .template-actions{display:flex;gap:8px}.image-modifier-page .template-actions button{padding:4px 8px;background:transparent;border:none;cursor:pointer;opacity:.5}.image-modifier-page .template-actions button:hover{opacity:1}.image-modifier-page .save-template-form{display:flex;gap:10px;margin-top:15px;padding-top:15px;border-top:1px solid #ddd}.image-modifier-page .save-template-form input{flex:1;padding:10px 15px;border:1px solid #ddd;border-radius:8px}.image-modifier-page .save-template-form button{padding:10px 20px;background:#f5576c;color:#fff;border:none;border-radius:8px;cursor:pointer}.image-dropzone{border:2px dashed #ddd;border-radius:12px;padding:40px;text-align:center;cursor:pointer;transition:all .2s;background:#fafafa}.image-dropzone:hover{border-color:#f5576c;background:#fff8f9}.image-dropzone.has-image{padding:10px;border-style:solid;background:#fff}.dropzone-placeholder{pointer-events:none}.dropzone-icon{font-size:48px;display:block;margin-bottom:15px}.dropzone-placeholder p{margin:0;color:#888}.image-preview-container{position:relative;display:inline-block}.image-preview-container img{max-width:100%;max-height:200px;border-radius:8px}.remove-image-btn{position:absolute;top:-10px;right:-10px;width:30px;height:30px;border-radius:50%;background:#dc3545;color:#fff;border:none;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0003}.image-modifier-page .form-group{margin-bottom:20px}.image-modifier-page .form-group label{display:block;margin-bottom:8px;font-weight:500;color:#444}.image-modifier-page .form-group input,.image-modifier-page .form-group textarea,.image-modifier-page .form-group select{width:100%;padding:12px 15px;border:1px solid #ddd;border-radius:8px;font-size:14px;transition:all .2s;box-sizing:border-box}.image-modifier-page .form-group input:focus,.image-modifier-page .form-group textarea:focus{outline:none;border-color:#f5576c;box-shadow:0 0 0 3px #f5576c1a}.image-modifier-page .form-group textarea{resize:vertical;min-height:80px}.image-modifier-page .form-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.image-modifier-page .form-actions{margin-top:10px}.image-modifier-page .btn-primary{padding:14px 30px;background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:500;cursor:pointer;transition:all .2s}.image-modifier-page .btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 15px #f5576c66}.image-modifier-page .btn-primary:disabled{opacity:.5;cursor:not-allowed}.image-modifier-page .jobs-filters{display:flex;gap:15px}.image-modifier-page .jobs-filters select,.image-modifier-page .jobs-filters input{padding:8px 15px;border:1px solid #ddd;border-radius:8px;font-size:13px}.image-modifier-page .jobs-filters input{width:200px}.image-modifier-page .loading-state,.image-modifier-page .empty-state{text-align:center;padding:40px;color:#888}.image-modifier-page .jobs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:20px}.image-modifier-page .job-card{background:#f8f9fa;border-radius:12px;overflow:hidden;border:1px solid #eee;transition:all .2s}.image-modifier-page .job-card:hover{box-shadow:0 4px 15px #0000001a}.image-modifier-page .job-thumbnail{height:180px;background:#e9ecef;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;overflow:hidden}.image-modifier-page .job-thumbnail img{width:100%;height:100%;object-fit:cover;transition:transform .3s}.image-modifier-page .job-thumbnail:hover img{transform:scale(1.05)}.image-modifier-page .thumb-placeholder{font-size:48px;opacity:.3}.image-modifier-page .thumb-loading{display:flex;flex-direction:column;align-items:center;gap:10px}.image-modifier-page .thumb-loading .spinner{width:30px;height:30px;border:3px solid #ddd;border-top-color:#f5576c;border-radius:50%;animation:spin 1s linear infinite}.image-modifier-page .thumb-count{position:absolute;bottom:10px;right:10px;background:#000000b3;color:#fff;padding:4px 10px;border-radius:15px;font-size:12px}.image-modifier-page .job-info{padding:15px}.image-modifier-page .job-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.image-modifier-page .job-filename{font-weight:600;color:#333}.image-modifier-page .job-status-badge{padding:4px 12px;border-radius:15px;color:#fff;font-size:11px;text-transform:uppercase;font-weight:500}.image-modifier-page .job-prompt{font-size:13px;color:#666;margin:0 0 12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.image-modifier-page .job-meta{display:flex;gap:15px;font-size:12px;color:#888;margin-bottom:12px}.image-modifier-page .job-error{font-size:12px;color:#dc3545;background:#ffebee;padding:8px 12px;border-radius:6px;margin:10px 0}.image-modifier-page .progress-bar{height:6px;background:#e9ecef;border-radius:3px;overflow:hidden;margin:10px 0}.image-modifier-page .progress-fill{height:100%;background:linear-gradient(90deg,#f093fb,#f5576c);transition:width .3s}.image-modifier-page .job-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;padding-top:12px;border-top:1px solid #eee}.image-modifier-page .btn-action{padding:6px 12px;background:#fff;border:1px solid #ddd;border-radius:6px;font-size:12px;cursor:pointer;transition:all .2s}.image-modifier-page .btn-action:hover{background:#fff0f3;border-color:#f5576c;color:#f5576c}.image-modifier-page .btn-action:disabled{opacity:.5;cursor:not-allowed}.image-modifier-page .btn-action.btn-danger{color:#dc3545}.image-modifier-page .btn-action.btn-danger:hover{background:#fff5f5;border-color:#dc3545}.image-modifier-page .pagination{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:25px;padding-top:20px;border-top:1px solid #eee}.image-modifier-page .pagination button{padding:10px 20px;background:#fff;border:1px solid #ddd;border-radius:8px;cursor:pointer;transition:all .2s}.image-modifier-page .pagination button:hover:not(:disabled){background:#fff0f3;border-color:#f5576c}.image-modifier-page .pagination button:disabled{opacity:.5;cursor:not-allowed}.image-modifier-page .pagination-info{color:#666;font-size:14px}@media (max-width: 1200px){.image-modifier-page .content-wrapper{grid-template-columns:1fr}}@media (max-width: 768px){.image-modifier-page .header{flex-direction:column;gap:15px;text-align:center}.image-modifier-page .header-left{flex-direction:column;gap:10px}.image-modifier-page .form-row,.image-modifier-page .jobs-grid{grid-template-columns:1fr}.image-modifier-page .jobs-filters{flex-direction:column}.image-modifier-page .jobs-filters input{width:100%}}.top-toolbar{display:flex;align-items:center;justify-content:space-between;height:48px;min-height:48px;padding:0 12px;background:var(--bg-secondary);border-bottom:1px solid var(--border-primary);gap:8px}.top-toolbar.disabled{opacity:.5;pointer-events:none}.top-toolbar .toolbar-section{display:flex;flex-direction:row;align-items:center;gap:4px;flex-wrap:nowrap;flex-shrink:0}.toolbar-center{flex:1;justify-content:center}.toolbar-right{justify-content:flex-end}.toolbar-divider{width:1px;height:24px;background:var(--border-secondary);margin:0 8px}.toolbar-btn{display:flex;align-items:center;justify-content:center;gap:6px;height:32px;min-width:32px;padding:0 8px;background:transparent;border:1px solid transparent;border-radius:var(--radius-md);color:var(--text-muted);font-size:var(--font-md);cursor:pointer;transition:all var(--transition-normal);position:relative}.toolbar-btn:hover:not(:disabled){background:var(--bg-tertiary);color:var(--text-secondary);border-color:var(--border-secondary)}.toolbar-btn:active:not(:disabled){transform:scale(.95)}.toolbar-btn.active{background:var(--bg-hover);border-color:var(--border-light)}.toolbar-btn.btn-primary{background:var(--gradient-accent);color:var(--text-white);border-color:var(--accent-light);padding:0 12px}.toolbar-btn.btn-primary:hover:not(:disabled){background:var(--gradient-accent-hover);color:var(--text-white)}.btn-label{font-weight:500}.zoom-display{display:flex;align-items:center;justify-content:center;min-width:56px;height:28px;padding:0 8px;background:var(--bg-tertiary);border:1px solid var(--border-secondary);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:var(--font-base);font-weight:500;font-family:var(--font-mono);cursor:pointer;transition:all var(--transition-normal)}.zoom-display:hover:not(:disabled){background:var(--bg-hover);border-color:var(--border-hover)}.canvas-size-btn{display:flex;align-items:center;gap:6px;height:28px;padding:0 10px;background:var(--bg-tertiary);border:1px solid var(--border-secondary);border-radius:var(--radius-sm);color:var(--text-muted);font-size:var(--font-sm);font-family:var(--font-mono);cursor:pointer;transition:all var(--transition-normal)}.canvas-size-btn:hover:not(:disabled){background:var(--bg-hover);color:var(--text-secondary)}.canvas-size-btn svg{color:var(--text-icon)}.toolbar-dropdown{position:relative}.dropdown-menu{position:absolute;top:calc(100% + 4px);right:0;min-width:200px;background:var(--bg-elevated);border:1px solid var(--border-secondary);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:6px;z-index:1000;animation:dropdownFadeIn var(--transition-normal)}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.dropdown-header{padding:6px 10px 4px;font-size:var(--font-xs);font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-icon)}.dropdown-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;background:transparent;border:none;border-radius:var(--radius-sm);color:var(--text-secondary);font-size:var(--font-md);text-align:left;cursor:pointer;transition:all var(--transition-fast)}.dropdown-item:hover{background:var(--accent-bg);color:var(--text-white)}.dropdown-item svg{color:var(--text-muted);flex-shrink:0}.dropdown-item:hover svg{color:var(--accent-light)}.dropdown-item .shortcut{margin-left:auto;font-size:var(--font-sm);color:var(--text-disabled);font-family:var(--font-mono);background:var(--bg-tertiary);padding:2px 6px;border-radius:var(--radius-sm);flex-shrink:0}.dropdown-item.checked{background:var(--accent-bg-subtle)}.dropdown-item .check{margin-left:auto;color:var(--accent);font-weight:700}.dropdown-item span:not(.shortcut):not(.check){flex:1}.dropdown-divider{height:1px;background:var(--border-secondary);margin:6px 0}.quality-slider{display:flex;align-items:center;gap:8px;padding:8px 10px;color:var(--text-muted)}.quality-slider input[type=range]{flex:1;height:4px;background:var(--border-secondary);border-radius:var(--radius-xs);-webkit-appearance:none;cursor:pointer}.quality-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:var(--accent);border-radius:50%;cursor:pointer;transition:transform var(--transition-fast)}.quality-slider input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.quality-slider span{min-width:36px;font-size:var(--font-base);font-family:var(--font-mono);color:var(--text-secondary);text-align:right}.export-menu{min-width:240px}@media (max-width: 900px){.btn-label{display:none}.toolbar-btn.btn-primary{padding:0 10px}.canvas-size-btn span{display:none}}.export-history-menu{min-width:280px}.dropdown-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px;color:var(--text-muted)}.dropdown-empty span{font-size:var(--font-base)}.dropdown-menu .history-item{display:flex;align-items:center;gap:10px;padding:8px 12px;cursor:default}.dropdown-menu .history-item:hover{background:var(--bg-hover)}.history-item-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--bg-tertiary);border-radius:var(--radius-md);color:var(--text-muted);flex-shrink:0}.history-item-info{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.history-item-name{font-size:var(--font-md);color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.history-item-time{font-size:var(--font-sm);color:var(--text-muted)}.history-item-quality{font-size:var(--font-sm);color:var(--text-secondary);padding:2px 6px;background:var(--bg-secondary);border-radius:var(--radius-sm);flex-shrink:0}.toolbar-btn .badge{position:absolute;top:2px;right:2px;min-width:14px;height:14px;padding:0 4px;background:var(--accent);border-radius:7px;font-size:9px;font-weight:600;color:var(--text-white);display:flex;align-items:center;justify-content:center}.dropdown-menu .dropdown-item.text-danger{color:var(--error)}.dropdown-menu .dropdown-item.text-danger:hover{background:var(--error-bg-subtle)}.toolbar-btn.btn-save{background:var(--success-bg-subtle, rgba(34, 197, 94, .1));color:var(--success, #22c55e);border-color:var(--success-border, rgba(34, 197, 94, .3));padding:0 12px}.toolbar-btn.btn-save:hover:not(:disabled){background:var(--success, #22c55e);color:var(--text-white, #ffffff);border-color:var(--success, #22c55e)}.toolbar-btn.btn-save:active:not(:disabled){background:var(--success-dark, #16a34a)}.toolbar-btn.btn-close-editor{color:var(--text-muted);margin-left:4px}.toolbar-btn.btn-close-editor:hover:not(:disabled){background:var(--error-bg-subtle, rgba(239, 68, 68, .1));color:var(--error, #ef4444);border-color:var(--error-border, rgba(239, 68, 68, .3))}.toolbar-btn.btn-close-editor:active:not(:disabled){background:var(--error, #ef4444);color:var(--text-white, #ffffff)}.dropdown-item.highlight{background:var(--accent-bg-subtle, rgba(99, 102, 241, .1));border-left:2px solid var(--accent, #6366f1)}.dropdown-item.highlight:hover{background:var(--accent-bg, rgba(99, 102, 241, .2))}@media (max-width: 900px){.toolbar-btn.btn-save .btn-label{display:none}.toolbar-btn.btn-save{padding:0 8px}}.left-panel{width:140px;min-width:140px;background:var(--bg-secondary);border-right:1px solid var(--border-primary);display:flex;flex-direction:column;overflow:hidden;scrollbar-width:thin;scrollbar-color:var(--border-secondary) var(--bg-secondary)}.left-panel::-webkit-scrollbar{width:6px}.left-panel::-webkit-scrollbar-track{background:var(--bg-secondary)}.left-panel::-webkit-scrollbar-thumb{background:var(--border-secondary);border-radius:3px}.left-panel::-webkit-scrollbar-thumb:hover{background:var(--border-hover)}.left-panel.disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 8px;border-bottom:1px solid var(--border-primary);background:var(--bg-tertiary)}.panel-title{font-size:var(--font-xs);font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted)}.panel-hint{display:flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:var(--radius-sm);background:var(--warning-bg, rgba(245, 158, 11, .15));color:var(--warning, #f59e0b);cursor:help;animation:pulseHint 2s ease-in-out infinite}@keyframes pulseHint{0%,to{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}.tool-groups-container{flex:1;overflow-y:auto;overflow-x:hidden}.tool-group{border-bottom:1px solid var(--border-primary)}.tool-group.has-active{background:#6366f108}.tool-group.has-active .group-header{color:var(--accent)}.group-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:8px 10px;background:transparent;border:none;color:var(--text-muted);font-size:var(--font-xs);font-weight:600;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;transition:all var(--transition-normal)}.group-header:hover{background:var(--accent-bg-subtle);color:var(--text-secondary)}.group-header:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.group-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;text-align:left}.group-info{display:flex;align-items:center;gap:6px}.group-availability{font-size:9px;font-weight:500;padding:1px 4px;border-radius:var(--radius-xs);background:var(--bg-tertiary);color:var(--text-muted);opacity:.8}.group-arrow{display:flex;align-items:center;justify-content:center;color:var(--text-icon);transition:transform var(--transition-slow)}.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:6px;background:#00000026}.tool-button{position:relative;display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;padding:0;background:var(--bg-tertiary);border:1px solid transparent;border-radius:var(--radius-md);color:var(--text-muted);cursor:pointer;transition:all var(--transition-normal)}.tool-button:hover:not(:disabled){background:var(--bg-hover);color:var(--text-secondary);border-color:var(--border-light)}.tool-button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.tool-button:active:not(:disabled){transform:scale(.95)}.tool-button svg{flex-shrink:0}.tool-button.active{background:var(--gradient-accent);color:var(--text-white);border-color:var(--accent-light);box-shadow:0 2px 8px var(--accent-glow);animation:toolActivate var(--transition-slow)}@keyframes toolActivate{0%{transform:scale(1)}50%{transform:scale(1.08)}to{transform:scale(1)}}.tool-button:disabled{opacity:.4;cursor:not-allowed;pointer-events:auto}.tool-button.disabled-context{opacity:.5;background:var(--bg-tertiary);border-color:transparent}.tool-button.disabled-context:hover{background:#f59e0b1a;border-color:#f59e0b4d}.tool-requirement-icon{position:absolute;bottom:2px;right:2px;display:flex;align-items:center;justify-content:center;width:12px;height:12px;border-radius:50%;background:var(--warning-bg, rgba(245, 158, 11, .2));color:var(--warning, #f59e0b);font-size:8px;opacity:.9}.tool-button.requires-image:not(:disabled):not(.active):after,.tool-button.requires-selection:not(:disabled):not(.active):after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:60%;height:2px;background:var(--accent);border-radius:1px;opacity:.4}.tool-badge{position:absolute;top:-2px;right:-2px;padding:1px 3px;font-size:7px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;border-radius:var(--radius-xs);pointer-events:none;z-index:1}.tool-badge-wip{background:linear-gradient(135deg,#8b5cf6,#6366f1);color:#fff;box-shadow:0 1px 3px #6366f166}.tool-button.work-in-progress{opacity:.6}.tool-button.work-in-progress:hover{opacity:.7;background:#8b5cf61a;border-color:#8b5cf64d}.panel-footer{padding:6px 8px;border-top:1px solid var(--border-primary);background:var(--bg-tertiary)}.legend{display:flex;flex-direction:column;gap:2px}.legend-item{display:flex;align-items:center;gap:4px;font-size:8px;color:var(--text-muted);opacity:.7}.legend-item svg{opacity:.6}.tool-group:nth-child(2),.tool-group:nth-child(5),.tool-group:nth-child(7){border-top:2px solid var(--border-secondary)}@media (max-height: 800px){.panel-header{padding:6px 8px 4px}.panel-title{font-size:9px}.group-header{padding:6px 8px;font-size:9px}.tool-grid{gap:3px;padding:4px}.tool-button{border-radius:var(--radius-sm)}.tool-button svg{width:16px;height:16px}.tool-badge{font-size:6px;padding:0 2px}.panel-footer{padding:4px 6px}.legend-item{font-size:7px}}@media (max-height: 600px){.panel-header,.panel-footer{display:none}.tool-groups-container{padding-top:4px}}@media (prefers-contrast: high){.tool-button{border:2px solid var(--border-secondary)}.tool-button.active{border-color:var(--accent);border-width:2px}.tool-button:disabled{border-style:dashed}.tool-button.disabled-context{border-color:var(--warning, #f59e0b);border-style:dashed}.tool-badge{border:1px solid currentColor}.tool-requirement-icon{border:1px solid var(--warning, #f59e0b)}}@media (prefers-reduced-motion: reduce){.tool-button,.group-header,.group-arrow{transition:none}.tool-button.active,.panel-hint{animation:none}}@media (prefers-color-scheme: dark){.tool-button.disabled-context:hover{background:#f59e0b14;border-color:#f59e0b40}.tool-button.work-in-progress:hover{background:#8b5cf614;border-color:#8b5cf640}}.tool-group:focus-within .group-header{color:var(--text-secondary)}.tool-grid:focus-within{background:#0000002e}@media print{.left-panel{display:none}}.right-panel{width:280px;min-width:280px;background:var(--bg-secondary);border-left:1px solid var(--border-primary);display:flex;flex-direction:column;overflow:hidden}.tabs-header{display:flex;border-bottom:1px solid var(--border-primary);background:var(--bg-secondary)}.tab-btn{flex:1;display:flex;align-items:center;justify-content:center;height:44px;background:transparent;border:none;border-bottom:2px solid transparent;color:var(--text-icon);cursor:pointer;transition:all var(--transition-normal)}.tab-btn:hover{color:var(--text-muted);background:var(--accent-bg-hover)}.tab-btn.active{color:var(--accent);border-bottom-color:var(--accent);background:var(--accent-bg-subtle)}.tabs-content{flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--border-secondary) var(--bg-secondary)}.tabs-content::-webkit-scrollbar{width:6px}.tabs-content::-webkit-scrollbar-track{background:var(--bg-secondary)}.tabs-content::-webkit-scrollbar-thumb{background:var(--border-secondary);border-radius:3px}.tab-content{padding:12px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center;color:var(--text-disabled)}.empty-state svg{margin-bottom:12px;opacity:.5}.empty-state p{margin:0;font-size:var(--font-lg);color:var(--text-muted)}.empty-state span{font-size:var(--font-base);margin-top:4px}.empty-state.small{padding:20px}.empty-state.small svg{margin-bottom:8px}.section{margin-bottom:8px;background:var(--bg-elevated);border-radius:var(--radius-lg);overflow:hidden}.section-header{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;background:transparent;border:none;color:var(--text-secondary);font-size:var(--font-base);font-weight:600;text-align:left;cursor:pointer;transition:background var(--transition-normal)}.section-header:hover{background:var(--accent-bg-subtle)}.section-header svg{color:var(--text-icon)}.section-header .arrow{margin-left:auto;color:var(--text-disabled);font-size:var(--font-xs)}.section-content{padding:8px 12px 12px;border-top:1px solid var(--border-primary)}.control-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}.control-row:last-child{margin-bottom:0}.control-row label{flex-shrink:0;min-width:80px;font-size:var(--font-sm);color:var(--text-muted);display:flex;align-items:center;gap:4px}.control-row label svg{color:var(--text-icon)}.control-row input[type=range]{flex:1;height:4px;background:var(--border-secondary);border-radius:var(--radius-xs);-webkit-appearance:none;cursor:pointer}.control-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;background:var(--accent);border-radius:50%;cursor:pointer}.control-row .value{min-width:32px;font-size:var(--font-xs);color:var(--text-icon);text-align:right;font-family:var(--font-mono)}.control-row select{flex:1;height:28px;padding:0 8px;background:var(--bg-tertiary);border:1px solid var(--border-secondary);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:var(--font-base);cursor:pointer}.control-row select:hover{border-color:var(--border-hover)}.control-row select:focus{outline:none;border-color:var(--accent)}.color-input{display:flex;align-items:center;gap:4px;flex:1}.color-input input[type=color]{width:28px;height:28px;padding:0;border:2px solid var(--border-secondary);border-radius:var(--radius-sm);cursor:pointer;background:transparent}.color-input input[type=color]::-webkit-color-swatch-wrapper{padding:2px}.color-input input[type=color]::-webkit-color-swatch{border:none;border-radius:var(--radius-xs)}.btn-small{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--bg-tertiary);border:1px solid var(--border-secondary);border-radius:var(--radius-sm);color:var(--text-muted);font-size:var(--font-base);cursor:pointer;transition:all var(--transition-normal)}.btn-small:hover{background:var(--bg-hover);color:var(--text-secondary)}.button-row{display:flex;gap:4px}.style-btn{flex:1;height:32px;display:flex;align-items:center;justify-content:center;background:var(--bg-tertiary);border:1px solid var(--border-secondary);border-radius:var(--radius-sm);color:var(--text-muted);font-size:var(--font-lg);cursor:pointer;transition:all var(--transition-normal)}.style-btn:hover{background:var(--bg-hover);color:var(--text-secondary)}.style-btn.active{background:var(--accent);border-color:var(--accent-light);color:var(--text-white)}.action-buttons{display:flex;gap:8px;margin-top:16px;padding-top:16px;border-top:1px solid var(--border-primary)}.btn-action{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;height:34px;background:var(--bg-tertiary);border:1px solid var(--border-secondary);border-radius:var(--radius-md);color:var(--text-secondary);font-size:var(--font-base);cursor:pointer;transition:all var(--transition-normal)}.btn-action:hover{background:var(--bg-hover);border-color:var(--border-hover)}.btn-action.btn-danger{color:var(--error-light)}.btn-action.btn-danger:hover{background:var(--error-bg);border-color:var(--error-light)}.btn-reset{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:32px;margin-top:8px;background:var(--bg-tertiary);border:1px solid var(--border-secondary);border-radius:var(--radius-sm);color:var(--text-muted);font-size:var(--font-sm);cursor:pointer;transition:all var(--transition-normal)}.btn-reset:hover{background:var(--bg-hover);color:var(--text-secondary)}.btn-secondary{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:34px;margin-top:8px;background:var(--bg-tertiary);border:1px solid var(--border-secondary);border-radius:var(--radius-md);color:var(--text-secondary);font-size:var(--font-base);font-weight:500;cursor:pointer;transition:all var(--transition-normal)}.btn-secondary:hover{background:var(--bg-hover);border-color:var(--border-hover);color:var(--text-primary)}.btn-secondary:active{background:var(--bg-active);transform:translateY(1px)}.btn-secondary:disabled:hover{background:var(--bg-tertiary);border-color:var(--border-secondary);transform:none}.effects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.effect-btn{padding:8px 4px;background:var(--bg-tertiary);border:1px solid var(--border-secondary);border-radius:var(--radius-sm);color:var(--text-muted);font-size:var(--font-xs);cursor:pointer;transition:all var(--transition-normal)}.effect-btn:hover{background:var(--bg-hover);color:var(--text-secondary);border-color:var(--border-hover)}.btn-ai{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:36px;background:var(--gradient-accent-purple);border:none;border-radius:var(--radius-md);color:var(--text-white);font-size:var(--font-md);font-weight:500;cursor:pointer;transition:all var(--transition-normal)}.btn-ai:hover:not(:disabled){background:linear-gradient(135deg,var(--accent-hover) 0%,var(--accent-secondary-hover) 100%);transform:translateY(-1px);box-shadow:0 4px 12px var(--accent-glow)}.btn-ai:disabled{opacity:.7;cursor:not-allowed;transform:none}.spin{animation:spin 1s linear infinite}.divider{height:1px;background:var(--border-primary);margin:12px 0}.layers-tab{padding:8px}.layers-list{display:flex;flex-direction:column;gap:4px}.right-panel .layers-tab .layer-item{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;gap:6px;padding:8px;background:var(--bg-secondary);border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-normal);-webkit-user-select:none;user-select:none;min-width:0;min-height:40px}.right-panel .layers-tab .layer-item:hover{background:var(--bg-hover)}.right-panel .layers-tab .layer-item.selected{background:var(--accent-bg);border-color:var(--accent)}.right-panel .layers-tab .layer-item.dragging{opacity:.5;transform:scale(.98)}.right-panel .layers-tab .layer-item.drag-over{border-color:var(--accent);border-style:dashed;background:var(--bg-active)}.right-panel .layers-tab .layer-drag-handle{flex-shrink:0!important;display:inline-flex!important;align-items:center;justify-content:center;cursor:grab;color:var(--text-muted);padding:2px;width:20px;height:20px}.right-panel .layers-tab .layer-drag-handle:hover{color:var(--text-secondary)}.right-panel .layers-tab .layer-drag-handle:active{cursor:grabbing}.right-panel .layers-tab .layer-btn{flex-shrink:0!important;display:inline-flex!important;align-items:center;justify-content:center;width:24px;height:24px;background:transparent;border:none;border-radius:var(--radius-sm);color:var(--text-icon);cursor:pointer;transition:all var(--transition-fast);padding:0}.right-panel .layers-tab .layer-btn:hover:not(:disabled){background:var(--bg-hover);color:var(--text-secondary)}.right-panel .layers-tab .layer-btn:disabled{opacity:.3;cursor:not-allowed}.right-panel .layers-tab .layer-name{flex:1 1 auto!important;min-width:0;font-size:var(--font-base);color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block!important}.right-panel .layers-tab .layer-name-input{flex:1 1 auto!important;min-width:0;height:24px;padding:2px 6px;background:var(--bg-tertiary);border:1px solid var(--accent);border-radius:var(--radius-sm);color:var(--text-primary);font-size:var(--font-base);font-family:inherit;outline:none}.right-panel .layers-tab .layer-name-input:focus{border-color:var(--accent-light);box-shadow:0 0 0 2px var(--accent-glow)}.right-panel .layers-tab .layer-actions{flex-shrink:0!important;display:inline-flex!important;flex-direction:row!important;gap:2px;margin-left:auto}.assets-tab{padding:8px}.badges-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.badge-btn{aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:var(--bg-tertiary);border:1px solid var(--border-secondary);border-radius:var(--radius-md);font-size:20px;cursor:pointer;transition:all var(--transition-normal)}.badge-btn:hover{background:var(--bg-hover);border-color:var(--border-hover);transform:scale(1.05)}.icons-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.icon-btn{aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:var(--bg-tertiary);border:1px solid var(--border-secondary);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-normal)}.icon-btn:hover{background:var(--bg-hover);border-color:var(--border-hover);transform:scale(1.1)}.icon-btn svg{opacity:.8}.icon-btn:hover svg{opacity:1}@media (max-width: 1200px){.right-panel{width:260px;min-width:260px}}.filter-previews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:8px 0}.filter-preview-btn{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px;background:var(--bg-secondary);border:2px solid transparent;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-normal);overflow:hidden}.filter-preview-btn:hover{border-color:var(--accent);transform:scale(1.02)}.filter-preview-btn.active{border-color:var(--accent);background:var(--bg-active)}.filter-preview-btn img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-sm)}.filter-preview-placeholder{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:var(--bg-tertiary);border-radius:var(--radius-sm);color:var(--text-muted)}.filter-preview-label{font-size:var(--font-xs);color:var(--text-secondary);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.filter-preview-check{position:absolute;top:4px;right:4px;width:16px;height:16px;background:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-white)}.shape-buttons{display:flex;gap:4px}.shape-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border-secondary);border-radius:var(--radius-sm);background:var(--bg-tertiary);cursor:pointer;font-size:14px;transition:all var(--transition-fast)}.shape-btn:hover{background:var(--bg-hover);border-color:var(--border-hover)}.shape-btn.active{background:var(--accent);border-color:var(--accent);color:var(--text-white)}.checkbox-row{display:flex;justify-content:space-between;align-items:center}.checkbox-row label{display:flex;align-items:center;gap:8px;cursor:pointer}.checkbox-row input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--accent)}.checkbox-row .hint{font-size:11px;color:var(--text-disabled)}.control-row.indent{margin-left:24px}.section-divider{height:1px;background:var(--border-primary);margin:12px 0}.eraser-hint{display:flex;gap:8px;padding:8px;background:var(--accent-bg-subtle);border-radius:var(--radius-md);font-size:12px;color:var(--text-secondary);margin-top:8px}.eraser-hint .hint-icon{flex-shrink:0}.keyboard-shortcuts{display:flex;flex-direction:column;gap:4px;margin-top:8px;padding-top:8px;border-top:1px solid var(--border-primary);font-size:11px;color:var(--text-disabled)}.keyboard-shortcuts .shortcut{display:flex;align-items:center;gap:4px}.keyboard-shortcuts kbd{display:inline-block;padding:2px 6px;font-family:var(--font-mono);font-size:11px;background:var(--bg-tertiary);border:1px solid var(--border-secondary);border-radius:var(--radius-xs)}.status-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.status-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;font-size:12px;font-weight:500;border-radius:var(--radius-md);transition:all var(--transition-fast)}.status-badge.active{background:var(--success-bg, rgba(34, 197, 94, .15));color:var(--success, #22c55e);border:1px solid var(--success-border, rgba(34, 197, 94, .3))}.status-badge.inactive{background:var(--bg-tertiary);color:var(--text-muted);border:1px solid var(--border-secondary)}.btn-small.btn-text{width:auto;height:auto;padding:4px 8px;background:transparent;border:none;color:var(--text-muted);font-size:11px;cursor:pointer;transition:all var(--transition-fast)}.btn-small.btn-text:hover{color:var(--accent);background:var(--accent-bg-subtle)}.error-boundary-fallback{display:flex;align-items:center;justify-content:center;min-height:200px;padding:2rem;background:linear-gradient(135deg,#fef2f2,#fee2e2);border:1px solid #fecaca;border-radius:8px;box-sizing:border-box}.error-boundary-content{max-width:480px;text-align:center}.error-boundary-icon-large{font-size:3rem;margin-bottom:1rem;animation:errorShake .5s ease-in-out}@keyframes errorShake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.error-boundary-title{font-size:1.375rem;font-weight:600;color:#991b1b;margin:0 0 .75rem;line-height:1.3}.error-boundary-message{color:#7f1d1d;font-size:.938rem;line-height:1.5;margin:0 0 1.5rem}.error-boundary-actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}.error-boundary-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.625rem 1.25rem;font-size:.875rem;font-weight:500;border-radius:6px;border:none;cursor:pointer;transition:background-color .15s ease,transform .1s ease;font-family:inherit}.error-boundary-btn:hover{transform:translateY(-1px)}.error-boundary-btn:active{transform:translateY(0)}.error-boundary-btn:focus{outline:2px solid #3b82f6;outline-offset:2px}.error-boundary-btn:focus:not(:focus-visible){outline:none}.error-boundary-btn-primary{background:#dc2626;color:#fff}.error-boundary-btn-primary:hover{background:#b91c1c}.error-boundary-btn-secondary{background:#fff;color:#374151;border:1px solid #d1d5db}.error-boundary-btn-secondary:hover{background:#f9fafb}.error-boundary-btn-small{padding:.375rem .75rem;font-size:.813rem;background:#dc2626;color:#fff}.error-boundary-btn-small:hover{background:#b91c1c}.error-boundary-details{margin-top:1.5rem;text-align:left;background:#fff;border:1px solid #e5e7eb;border-radius:6px;overflow:hidden}.error-boundary-details summary{padding:.75rem 1rem;cursor:pointer;font-size:.813rem;color:#6b7280;background:#f9fafb;border-bottom:1px solid transparent;-webkit-user-select:none;user-select:none;list-style:none}.error-boundary-details summary::-webkit-details-marker{display:none}.error-boundary-details summary:before{content:"▶ ";font-size:.625rem;margin-right:.5rem;transition:transform .2s ease;display:inline-block}.error-boundary-details[open] summary:before{transform:rotate(90deg)}.error-boundary-details summary:hover{background:#f3f4f6}.error-boundary-details[open] summary{border-bottom-color:#e5e7eb}.error-boundary-error-info{padding:1rem;font-size:.813rem}.error-boundary-error-info p{margin:0 0 .5rem;color:#374151;word-break:break-word}.error-boundary-stack{background:#1f2937;color:#e5e7eb;padding:.75rem;border-radius:4px;font-family:SF Mono,Monaco,Menlo,Ubuntu Mono,monospace;font-size:.688rem;line-height:1.5;overflow-x:auto;white-space:pre-wrap;word-break:break-word;max-height:180px;overflow-y:auto;margin:.5rem 0}.error-boundary-panel{min-height:auto;padding:1rem;margin:.5rem;flex-direction:column}.error-boundary-panel .error-boundary-content{display:flex;align-items:center;gap:.75rem;text-align:left;max-width:none;width:100%}.error-boundary-panel .error-boundary-icon{font-size:1.5rem;flex-shrink:0}.error-boundary-panel .error-boundary-text{flex:1;min-width:0}.error-boundary-panel .error-boundary-text strong{display:block;font-size:.875rem;color:#991b1b;margin-bottom:.25rem}.error-boundary-panel .error-boundary-text p{font-size:.75rem;color:#7f1d1d;margin:0}.error-boundary-fullscreen{min-height:100vh;margin:0;border-radius:0;border:none}.error-boundary-canvas{position:absolute;top:0;left:0;right:0;bottom:0;margin:0;border-radius:0;z-index:100}@media (max-width: 480px){.error-boundary-fallback{padding:1.5rem 1rem}.error-boundary-icon-large{font-size:2.5rem}.error-boundary-title{font-size:1.125rem}.error-boundary-message{font-size:.875rem}.error-boundary-actions{flex-direction:column}.error-boundary-btn{width:100%}}@media (prefers-color-scheme: dark){.error-boundary-fallback{background:linear-gradient(135deg,#1c1917,#292524);border-color:#7f1d1d}.error-boundary-title{color:#fca5a5}.error-boundary-message{color:#fecaca}.error-boundary-btn-secondary{background:#374151;color:#f3f4f6;border-color:#4b5563}.error-boundary-btn-secondary:hover{background:#4b5563}.error-boundary-details{background:#1f2937;border-color:#374151}.error-boundary-details summary{background:#111827;color:#9ca3af}.error-boundary-details summary:hover{background:#1f2937}.error-boundary-details[open] summary{border-color:#374151}.error-boundary-error-info p{color:#d1d5db}.error-boundary-panel{background:linear-gradient(135deg,#1c1917,#292524)}.error-boundary-panel .error-boundary-text strong{color:#fca5a5}.error-boundary-panel .error-boundary-text p{color:#fecaca}}.photo-editor.dark .error-boundary-fallback,.photo-editor[data-theme=dark] .error-boundary-fallback{background:linear-gradient(135deg,#1c1917,#292524);border-color:#7f1d1d}.photo-editor.dark .error-boundary-title,.photo-editor[data-theme=dark] .error-boundary-title{color:#fca5a5}.photo-editor.dark .error-boundary-message,.photo-editor[data-theme=dark] .error-boundary-message{color:#fecaca}.modal-overlay,.modal-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--bg-overlay);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn var(--transition-normal)}.modal-content{background:var(--bg-secondary);border-radius:var(--radius-xl);border:1px solid var(--border-secondary);box-shadow:var(--shadow-xl);max-width:90vw;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;animation:slideUp var(--transition-slow)}.modal-small{max-width:440px;width:90%}@keyframes slideUp{0%{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border-primary)}.modal-header h2,.modal-header h3{font-size:var(--font-xl);font-weight:600;margin:0;display:flex;align-items:center;gap:8px;color:var(--text-white)}.modal-icon{margin-right:4px}.modal-close{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px 8px;border-radius:var(--radius-md);font-size:var(--font-2xl);transition:all var(--transition-normal);display:flex;align-items:center;justify-content:center}.modal-close:hover{background:var(--border-primary);color:var(--text-white)}.modal-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.modal-close:disabled{opacity:.5;cursor:not-allowed}.modal-body{padding:20px;overflow-y:auto;flex:1}.modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:16px 20px;border-top:1px solid var(--border-primary)}.modal-actions{display:flex;gap:10px}.btn,.btn-primary,.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;border-radius:var(--radius-md);font-size:var(--font-md);font-weight:500;cursor:pointer;transition:all var(--transition-normal);border:none}.btn:focus-visible,.btn-primary:focus-visible,.btn-secondary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn-primary{background:var(--accent);color:var(--text-white)}.btn-primary:hover:not(:disabled){background:var(--accent-hover)}.btn-primary:disabled{background:var(--border-light);color:var(--text-muted);cursor:not-allowed}.btn-secondary{background:var(--border-primary);color:var(--text-primary);border:1px solid var(--border-secondary)}.btn-secondary:hover:not(:disabled){background:var(--bg-hover)}.form-group{margin-bottom:16px}.form-label{display:block;margin-bottom:6px;font-size:var(--font-md);font-weight:500;color:var(--text-secondary)}.form-input{width:100%;padding:10px 12px;background:var(--bg-input);border:1px solid var(--border-primary);border-radius:var(--radius-md);color:var(--text-white);font-size:var(--font-lg);transition:border-color var(--transition-normal),box-shadow var(--transition-normal)}.form-input::placeholder{color:var(--text-placeholder)}.form-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}.form-input:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}.form-input.input-error{border-color:var(--error)}.form-input.input-error:focus{box-shadow:0 0 0 3px var(--error-bg)}.form-error{display:block;margin-top:6px;font-size:var(--font-base);color:var(--error)}.form-hint{margin:8px 0 0;font-size:var(--font-base);color:var(--text-placeholder)}.toast-container{position:fixed;top:16px;right:16px;z-index:10000;display:flex;flex-direction:column;gap:8px;pointer-events:none}.toast{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--radius-lg);background:var(--bg-secondary);border:1px solid var(--border-secondary);box-shadow:var(--shadow-md);min-width:280px;max-width:420px;pointer-events:auto;animation:toast-slide-in var(--transition-slower)}@keyframes toast-slide-in{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}.toast-icon{flex-shrink:0;font-size:var(--font-2xl)}.toast-message{flex:1;font-size:var(--font-md);color:var(--text-primary);line-height:1.4}.toast-close{flex-shrink:0;width:24px;height:24px;border:none;background:transparent;color:var(--text-placeholder);font-size:var(--font-2xl);cursor:pointer;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;transition:all var(--transition-normal)}.toast-close:hover{background:var(--border-primary);color:var(--text-white)}.toast-info{border-left:4px solid var(--info)}.toast-success{border-left:4px solid var(--success)}.toast-warning{border-left:4px solid var(--warning)}.toast-error{border-left:4px solid var(--error)}.recovery-message{font-size:var(--font-lg);color:var(--text-primary);margin-bottom:8px}.recovery-message strong{color:var(--text-white)}.recovery-timestamp{font-size:var(--font-base);color:var(--text-muted);margin-bottom:16px}.recovery-question{font-size:var(--font-md);color:var(--text-secondary);margin-bottom:16px}.recovery-hint{display:flex;align-items:flex-start;gap:8px;padding:12px;background:var(--bg-input);border:1px solid var(--border-primary);border-radius:var(--radius-md);font-size:var(--font-base);color:var(--text-muted)}.hint-icon{flex-shrink:0}.modal-canvas-size{width:520px}.modal-canvas-size h3{font-size:var(--font-base);font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin:0 0 12px}.presets-section{margin-bottom:24px}.presets-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.preset-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;background:var(--bg-input);border:1px solid var(--border-primary);border-radius:var(--radius-lg);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-normal)}.preset-btn:hover{background:var(--bg-elevated);border-color:var(--border-light);transform:translateY(-1px)}.preset-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.preset-btn.active{background:var(--accent-bg);border-color:var(--accent);color:var(--text-white)}.preset-icon{color:var(--accent);font-size:20px;line-height:1}.preset-name,.preset-label{font-size:var(--font-sm);font-weight:500;text-align:center}.preset-btn.active .preset-label{color:var(--accent)}.preset-size{font-size:var(--font-xs);color:var(--text-placeholder)}.custom-size-section{margin-bottom:24px}.size-inputs{display:flex;align-items:flex-end;gap:12px}.size-input-group{flex:1;position:relative}.size-input-group label{display:block;font-size:var(--font-sm);color:var(--text-muted);margin-bottom:6px}.size-input-group input{width:100%;padding:10px 12px;background:var(--bg-input);border:1px solid var(--border-primary);border-radius:var(--radius-md);color:var(--text-white);font-size:var(--font-lg)}.size-input-group input:focus{outline:none;border-color:var(--accent)}.size-input-group input:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}.size-input-group input[aria-invalid=true]{border-color:var(--error)}.size-input-group input[aria-invalid=true]:focus{box-shadow:0 0 0 3px var(--error-bg)}.size-input-group .form-error{position:absolute;bottom:-20px;left:0;font-size:var(--font-xs)}.swap-btn{padding:10px 12px;background:var(--border-primary);border:1px solid var(--border-secondary);border-radius:var(--radius-md);color:var(--text-muted);cursor:pointer;font-size:var(--font-xl);transition:all var(--transition-normal)}.swap-btn:hover{background:var(--bg-hover);color:var(--text-white)}.swap-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.background-section{margin-bottom:24px}.background-options{display:flex;gap:8px}.bg-option{width:40px;height:40px;border-radius:var(--radius-lg);border:2px solid transparent;cursor:pointer;transition:all var(--transition-normal);position:relative;overflow:hidden}.bg-option:hover{transform:scale(1.05)}.bg-option:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.bg-option.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-glow)}.bg-option.transparent{background:var(--bg-input)}.checkerboard-preview{width:100%;height:100%;background:repeating-conic-gradient(#3a3a4a,#3a3a4a 25%,#2a2a3a 0%,#2a2a3a 50%) 50% / 10px 10px}.bg-option.custom{padding:0;overflow:hidden}.bg-option.custom input{width:100%;height:100%;border:none;cursor:pointer}.preview-section{display:flex;justify-content:center}.canvas-preview{display:flex;align-items:center;justify-content:center;border:1px solid var(--border-secondary);border-radius:var(--radius-sm);font-size:var(--font-base);color:var(--text-muted)}.modal-history{width:400px;max-height:500px}.history-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;color:var(--text-placeholder)}.history-empty p{margin-top:12px}.history-timeline{display:flex;flex-direction:column;gap:8px}.history-item{display:flex;align-items:center;gap:12px;padding:10px;background:var(--bg-input);border:1px solid var(--border-primary);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-normal);text-align:left;width:100%}.history-item:hover{background:var(--bg-elevated);border-color:var(--border-light)}.history-item:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.history-item.current{background:var(--accent-bg-subtle);border-color:var(--accent)}.history-thumbnail{width:48px;height:48px;background:var(--bg-secondary);border-radius:var(--radius-sm);overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0}.history-thumbnail img{width:100%;height:100%;object-fit:cover}.history-placeholder{color:var(--text-placeholder)}.history-info{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}.history-label{font-size:var(--font-md);color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.history-current-badge{font-size:var(--font-xs);color:var(--accent);background:#6366f133;padding:2px 6px;border-radius:var(--radius-sm);width:fit-content}.modal-export{width:600px}.modal-export-large{max-width:800px;width:95vw}.export-layout{display:grid;grid-template-columns:200px 1fr;gap:24px}@media (max-width: 600px){.export-layout{grid-template-columns:1fr}}.export-preview{position:relative;background:var(--bg-input);border-radius:var(--radius-lg);padding:12px;display:flex;flex-direction:column;align-items:center;gap:12px}.export-preview img{max-width:100%;max-height:150px;border-radius:var(--radius-sm);box-shadow:var(--shadow-sm)}.export-preview-info{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:var(--font-sm);color:var(--text-muted)}.export-preview-loading{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:var(--bg-input);color:var(--text-placeholder);border-radius:var(--radius-lg)}.export-preview-loading .spinning{animation:spin 1s linear infinite}.export-preview-warning{display:flex;align-items:center;gap:4px;padding:4px 8px;background:var(--warning-bg);border-radius:var(--radius-sm);color:var(--warning);font-size:var(--font-sm);margin-top:8px}.export-options{display:flex;flex-direction:column;gap:16px}.export-group{display:flex;flex-direction:column;gap:8px}.export-group>label{display:flex;align-items:center;gap:6px;font-size:var(--font-base);color:var(--text-muted);font-weight:500}.label-warning{color:var(--warning)}.label-dim{color:var(--text-placeholder);font-size:var(--font-sm)}.export-group input[type=text],.export-group select{padding:8px 12px;background:var(--bg-input);border:1px solid var(--border-primary);border-radius:var(--radius-md);color:var(--text-white);font-size:var(--font-md)}.export-group input[type=text]:focus,.export-group select:focus{outline:none;border-color:var(--accent)}.export-group input[type=text]:focus-visible,.export-group select:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}.export-group input[type=range]{width:100%;height:6px;background:var(--border-primary);border-radius:3px;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.export-group input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.export-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:var(--accent);border-radius:50%;cursor:pointer}.export-group input[type=range]::-moz-range-thumb{width:16px;height:16px;background:var(--accent);border-radius:50%;cursor:pointer;border:none}.export-divider{height:1px;background:var(--border-primary);margin:16px 0}.filename-input-wrapper{display:flex;align-items:center;background:var(--bg-input);border:1px solid var(--border-primary);border-radius:var(--radius-md);overflow:hidden}.filename-input-wrapper:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}.filename-input-wrapper input{flex:1;background:transparent;border:none;padding:8px 12px;color:var(--text-white)}.filename-input-wrapper input:focus{outline:none}.filename-extension{padding:8px 12px;background:var(--bg-primary);color:var(--text-placeholder);font-size:var(--font-md)}.input-hint{display:block;font-size:var(--font-sm);margin-top:4px;color:var(--text-placeholder)}.input-hint.warning{color:var(--warning)}.format-buttons{display:flex;gap:8px}.format-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px;background:var(--bg-input);border:1px solid var(--border-primary);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;font-size:var(--font-base);font-weight:500;transition:all var(--transition-normal)}.format-btn:hover{background:var(--bg-elevated);border-color:var(--border-light)}.format-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.format-btn.active{background:var(--accent-bg);border-color:var(--accent);color:var(--text-white)}.marketplace-presets-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:8px}@media (max-width: 768px){.marketplace-presets-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width: 480px){.marketplace-presets-grid{grid-template-columns:repeat(2,1fr)}}.quality-presets,.scale-presets{display:flex;gap:6px}.quality-presets button,.scale-presets button{flex:1;padding:6px;background:var(--bg-input);border:1px solid var(--border-primary);border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;font-size:var(--font-sm);transition:all var(--transition-normal)}.quality-presets button:hover,.scale-presets button:hover{background:var(--bg-elevated);color:var(--text-white)}.quality-presets button:focus-visible,.scale-presets button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:var(--font-md)}.checkbox-label input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}.checkbox-label input[type=checkbox]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.watermark-options{display:flex;gap:8px;margin-top:8px}.watermark-options input{flex:1}.watermark-options select{width:auto}.export-info{display:flex;align-items:center;gap:6px;font-size:var(--font-base);color:var(--text-muted);margin-right:auto}.export-error{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--error-bg-subtle);border:1px solid var(--error-glow);border-radius:var(--radius-lg);color:var(--error);font-size:var(--font-md);margin-bottom:16px}.export-preset-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;background:var(--accent-bg);border-radius:var(--radius-xl);color:var(--accent);font-size:var(--font-sm);margin-left:8px}@media (max-width: 520px){.modal-canvas-size{width:95vw}.presets-grid{grid-template-columns:repeat(2,1fr)}.size-inputs{flex-direction:column;gap:16px}.swap-btn{align-self:center;transform:rotate(90deg)}}@media (max-width: 440px){.modal-small{width:95vw;max-width:none}.modal-history{width:95vw}}:root{--bg-primary: #0f0f1a;--bg-secondary: #1a1a2e;--bg-tertiary: #252538;--bg-hover: #303048;--bg-active: #252545;--bg-input: #12121f;--bg-elevated: #1e1e32;--bg-overlay: rgba(0, 0, 0, .75);--bg-overlay-heavy: rgba(15, 15, 26, .92);--border-primary: #2d2d44;--border-secondary: #3f3f5a;--border-light: #4a4a6a;--border-hover: #5a5a7a;--accent: #6366f1;--accent-light: #818cf8;--accent-dark: #4f46e5;--accent-hover: #7c7ff7;--accent-glow: rgba(99, 102, 241, .3);--accent-glow-strong: rgba(99, 102, 241, .4);--accent-bg: rgba(99, 102, 241, .15);--accent-bg-subtle: rgba(99, 102, 241, .1);--accent-bg-hover: rgba(99, 102, 241, .05);--accent-secondary: #8b5cf6;--accent-secondary-light: #a855f7;--accent-secondary-hover: #9d7afa;--accent-secondary-bg: rgba(139, 92, 246, .15);--text-white: #ffffff;--text-primary: #e0e0e8;--text-secondary: #c0c0d0;--text-muted: #8888a0;--text-disabled: #5a5a70;--text-placeholder: #666666;--text-icon: #6b6b80;--success: #10b981;--success-light: #34d399;--success-dark: #059669;--success-glow: rgba(16, 185, 129, .3);--success-glow-strong: rgba(16, 185, 129, .4);--warning: #f59e0b;--warning-light: #fbbf24;--warning-glow: rgba(251, 191, 36, .3);--warning-bg: rgba(245, 158, 11, .1);--error: #ef4444;--error-light: #f87171;--error-glow: rgba(239, 68, 68, .3);--error-bg: rgba(239, 68, 68, .15);--error-bg-subtle: rgba(239, 68, 68, .1);--info: #3b82f6;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;--font-mono: "SF Mono", "Monaco", "Consolas", monospace;--font-xs: 10px;--font-sm: 11px;--font-base: 12px;--font-md: 13px;--font-lg: 14px;--font-xl: 16px;--font-2xl: 18px;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-xl: 12px;--radius-2xl: 16px;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);--shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .4);--shadow-xl: 0 20px 60px rgba(0, 0, 0, .5);--shadow-canvas: 0 8px 32px rgba(0, 0, 0, .5);--transition-fast: .1s ease;--transition-normal: .15s ease;--transition-slow: .2s ease;--transition-slower: .3s ease;--gradient-accent: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);--gradient-accent-hover: linear-gradient(135deg, var(--accent-hover) 0%, var(--accent) 100%);--gradient-accent-purple: linear-gradient(135deg, var(--accent) 0%, var(--accent-secondary) 100%);--gradient-success: linear-gradient(135deg, var(--success) 0%, var(--success-dark) 100%);--gradient-success-hover: linear-gradient(135deg, var(--success-light) 0%, var(--success) 100%);--gradient-loading: linear-gradient(90deg, var(--accent) 0%, var(--accent-secondary) 50%, var(--accent-secondary-light) 100%)}.photo-editor{display:flex;flex-direction:column;width:100%;height:100vh;background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-family);overflow:hidden;-webkit-user-select:none;user-select:none;position:relative}.photo-editor *,.photo-editor *:before,.photo-editor *:after{box-sizing:border-box}.editor-main{display:flex;flex:1;overflow:hidden}.loading-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--bg-overlay-heavy);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10000;animation:fadeIn var(--transition-slow)}.loading-spinner{position:relative;width:80px;height:80px}.spinner-ring{position:absolute;width:100%;height:100%;border-radius:50%;border:3px solid transparent;animation:spinnerRotate 1.5s linear infinite}.spinner-ring:nth-child(1){border-top-color:var(--accent);animation-duration:1.2s}.spinner-ring:nth-child(2){width:70%;height:70%;top:15%;left:15%;border-right-color:var(--accent-secondary);animation-duration:1.8s;animation-direction:reverse}.spinner-ring:nth-child(3){width:40%;height:40%;top:30%;left:30%;border-bottom-color:var(--accent-secondary-light);animation-duration:1s}@keyframes spinnerRotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-text{margin-top:24px;display:flex;flex-direction:column;align-items:center;gap:12px}.loading-text span{font-size:15px;font-weight:500;color:var(--text-secondary);letter-spacing:.3px}.loading-progress{width:200px;height:4px;background:var(--bg-tertiary);border-radius:var(--radius-xs);overflow:hidden}.loading-progress-bar{height:100%;background:var(--gradient-loading);border-radius:var(--radius-xs);transition:width var(--transition-slower)}.loading-percent{font-size:var(--font-md);color:var(--text-muted);font-variant-numeric:tabular-nums}.canvas-container{flex:1;position:relative;display:flex;align-items:center;justify-content:center;background:var(--bg-input);overflow:hidden}.ruler{position:absolute;background:var(--bg-elevated);z-index:10}.ruler-horizontal{top:0;left:20px;right:0;height:20px}.ruler-vertical{top:20px;left:0;bottom:0;width:20px}.ruler-corner{position:absolute;top:0;left:0;width:20px;height:20px;background:var(--bg-elevated);border-right:1px solid var(--border-secondary);border-bottom:1px solid var(--border-secondary);z-index:11}.canvas-wrapper{position:relative;transition:transform var(--transition-fast);box-shadow:var(--shadow-canvas)}.canvas-wrapper.with-rulers{margin-top:20px;margin-left:20px}.canvas-checkerboard{position:absolute;top:0;left:0;background-image:linear-gradient(45deg,#2a2a3a 25%,transparent 25%),linear-gradient(-45deg,#2a2a3a 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#2a2a3a 75%),linear-gradient(-45deg,transparent 75%,#2a2a3a 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px;pointer-events:none;z-index:0}.canvas-wrapper canvas{position:relative;z-index:1}.mode-overlay{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:100}.mode-info{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:12px;padding:14px 20px;background:#1a1a2ef2;border:1px solid var(--border-secondary);border-radius:var(--radius-xl);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--shadow-lg);pointer-events:all;flex-wrap:wrap;max-width:90%;justify-content:center}.mode-info span{font-size:var(--font-md);color:var(--text-secondary);font-weight:500}.mode-info .mode-title{font-weight:600;color:var(--text-primary);font-size:var(--font-lg)}.mode-info .mode-hint{font-size:var(--font-base);color:var(--text-muted);font-style:italic;padding:4px 10px;background:var(--accent-bg);border-radius:var(--radius-sm);border:1px solid var(--accent-glow)}.mode-info label{display:flex;align-items:center;gap:8px;font-size:var(--font-base);color:var(--text-secondary)}.mode-info input[type=range]{width:100px;height:4px;background:var(--border-secondary);border-radius:var(--radius-xs);-webkit-appearance:none;cursor:pointer}.mode-info input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:var(--accent);border-radius:50%;cursor:pointer;transition:transform var(--transition-fast),background var(--transition-fast)}.mode-info input[type=range]::-webkit-slider-thumb:hover{background:var(--accent-light);transform:scale(1.1)}.mode-info input[type=range]::-moz-range-thumb{width:14px;height:14px;background:var(--accent);border-radius:50%;border:none;cursor:pointer}.mode-info select{height:32px;padding:0 10px;background:var(--bg-tertiary);border:1px solid var(--border-secondary);border-radius:var(--radius-md);color:var(--text-secondary);font-size:var(--font-base);cursor:pointer;transition:border-color var(--transition-normal)}.mode-info select:hover{border-color:var(--border-hover)}.mode-info select:focus{outline:none;border-color:var(--accent)}.mode-info button{height:32px;padding:0 16px;background:var(--bg-tertiary);border:1px solid var(--border-secondary);border-radius:var(--radius-md);color:var(--text-secondary);font-size:var(--font-md);font-weight:500;cursor:pointer;transition:all var(--transition-normal)}.mode-info button:hover{background:var(--bg-hover);border-color:var(--border-hover)}.mode-info button:first-of-type{background:var(--gradient-success);border-color:var(--success-light);color:var(--text-white)}.mode-info button:first-of-type:hover{background:var(--gradient-success-hover);box-shadow:0 2px 8px var(--success-glow-strong)}.mode-info button:last-of-type{background:var(--bg-tertiary);border-color:var(--error);color:var(--error-light)}.mode-info button:last-of-type:hover{background:var(--error-bg)}.mode-info button.btn-secondary{background:var(--bg-elevated);border-color:var(--border-light);color:var(--text-secondary)}.mode-info button.btn-secondary:hover{background:var(--bg-hover);border-color:var(--accent);color:var(--text-secondary)}.pipette-preview{position:absolute;top:20px;right:20px;padding:12px 20px;border-radius:var(--radius-lg);font-family:var(--font-mono);font-size:var(--font-lg);font-weight:600;color:var(--text-white);text-shadow:0 1px 2px rgba(0,0,0,.5);box-shadow:var(--shadow-md);z-index:100}.canvas-container.drag-over:after{content:"Upuść zdjęcie tutaj";position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:var(--accent-bg-subtle);border:3px dashed var(--accent);font-size:var(--font-2xl);font-weight:600;color:var(--accent);z-index:1000}.drag-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:var(--accent-bg);border:3px dashed var(--accent);border-radius:var(--radius-lg);z-index:100;pointer-events:none}.drag-overlay-content{display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--accent);font-size:var(--font-2xl);font-weight:500}.drag-icon{font-size:48px}.photo-editor ::-webkit-scrollbar{width:8px;height:8px}.photo-editor ::-webkit-scrollbar-track{background:var(--bg-secondary)}.photo-editor ::-webkit-scrollbar-thumb{background:var(--border-secondary);border-radius:var(--radius-sm)}.photo-editor ::-webkit-scrollbar-thumb:hover{background:var(--border-hover)}[title]{position:relative}.photo-editor.loading:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:#0f0f1acc;display:flex;align-items:center;justify-content:center;z-index:9999}.photo-editor.loading:before{content:"";position:absolute;top:50%;left:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border:3px solid var(--border-secondary);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;z-index:10000}@media (max-width: 1200px){.photo-editor{font-size:var(--font-md)}.mode-info{padding:12px 16px;gap:10px}.mode-info input[type=range]{width:80px}}@media (max-width: 900px){.editor-body{flex-direction:column}.canvas-container{order:1}.mode-info{bottom:10px;padding:10px 14px;gap:8px;font-size:var(--font-base)}.mode-info button{height:28px;padding:0 12px;font-size:var(--font-base)}}@media print{.photo-editor{display:none}}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.photo-editor button:focus-visible,.photo-editor input:focus-visible,.photo-editor select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.photo-editor ::selection{background:var(--accent-glow);color:var(--text-white)}.photo-editor .canvas-container[data-tool=cloneStamp]{cursor:crosshair}.photo-editor .canvas-container[data-tool=blur]{cursor:cell}.photo-editor .canvas-container[data-tool=eraser]{cursor:none}.toolbar-project-actions{display:flex;gap:4px;margin-left:8px;padding-left:8px;border-left:1px solid var(--border-secondary)}.toolbar-project-actions button{display:flex;align-items:center;gap:4px;padding:6px 10px;background:transparent;border:1px solid transparent;border-radius:var(--radius-md);color:var(--text-secondary);font-size:var(--font-base);cursor:pointer;transition:all var(--transition-normal)}.toolbar-project-actions button:hover{background:var(--bg-tertiary);border-color:var(--border-secondary);color:var(--text-primary)}.toolbar-project-actions button svg{width:14px;height:14px}.autosave-indicator{position:fixed;bottom:20px;right:20px;display:flex;align-items:center;gap:8px;padding:8px 14px;background:#1a1a2ee6;border:1px solid var(--border-secondary);border-radius:var(--radius-lg);font-size:var(--font-base);color:var(--text-muted);z-index:100;animation:fadeIn var(--transition-slower)}.autosave-indicator.saving{color:var(--warning-light);border-color:var(--warning-glow)}.autosave-indicator.saved{color:var(--success);border-color:var(--success-glow)}.autosave-indicator .dot{width:6px;height:6px;border-radius:50%;background:currentColor}.autosave-indicator.saving .dot{animation:pulse 1s ease-in-out infinite}.recovery-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--bg-secondary);border:1px solid var(--border-secondary);border-radius:var(--radius-2xl);padding:24px;max-width:400px;width:90%;z-index:10001;box-shadow:var(--shadow-xl);animation:slideUp var(--transition-slower)}.recovery-dialog h3{margin:0 0 12px;font-size:var(--font-2xl);font-weight:600;color:var(--text-primary)}.recovery-dialog p{margin:0 0 20px;font-size:var(--font-lg);color:var(--text-secondary);line-height:1.5}.recovery-dialog .actions{display:flex;gap:12px;justify-content:flex-end}.recovery-dialog button{padding:10px 20px;border-radius:var(--radius-lg);font-size:var(--font-lg);font-weight:500;cursor:pointer;transition:all var(--transition-normal)}.recovery-dialog button.primary{background:var(--gradient-accent-purple);border:none;color:var(--text-white)}.recovery-dialog button.primary:hover{box-shadow:0 4px 12px var(--accent-glow-strong)}.recovery-dialog button.secondary{background:transparent;border:1px solid var(--border-secondary);color:var(--text-secondary)}.recovery-dialog button.secondary:hover{background:var(--bg-tertiary);border-color:var(--border-hover);color:var(--text-primary)}.drag-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn var(--transition-slow)}.drag-overlay--active{animation:fadeIn var(--transition-slow),dropzonePulse 2s ease-in-out infinite}@keyframes dropzonePulse{0%,to{border-color:var(--accent);background:var(--accent-bg-subtle)}50%{border-color:var(--accent-secondary);background:var(--accent-secondary-bg)}}.drag-overlay .drag-icon{animation:dropzoneBounce 1s ease-in-out infinite}.drag-overlay .drag-icon svg{width:48px;height:48px;stroke:var(--accent);stroke-width:2;fill:none}@keyframes dropzoneBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.drag-overlay__spinner{width:48px;height:48px;border:3px solid var(--border-secondary);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}.drag-overlay__progress{width:200px;height:6px;background:var(--bg-tertiary);border-radius:3px;overflow:hidden;margin-top:8px}.drag-overlay__progress-bar{height:100%;background:var(--gradient-loading);border-radius:3px;transition:width var(--transition-slower);position:relative}.drag-overlay__progress-bar:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);animation:shimmer 1.5s infinite}.drag-overlay__text{font-size:15px;font-weight:500;color:var(--text-secondary)}@media (prefers-reduced-motion: reduce){.drag-overlay,.drag-overlay--active,.drag-overlay .drag-icon,.drag-overlay__spinner,.drag-overlay__progress-bar:after{animation:none}.drag-overlay__spinner{animation:spin 2s linear infinite}}.canvas-wrapper.is-panning,.canvas-wrapper.is-panning *{cursor:grabbing!important}.floating-toolbar{position:absolute;top:12px;left:50%;transform:translate(-50%);background:#1e1e28f2;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(99,102,241,.3);border-radius:12px;padding:12px 16px;min-width:320px;max-width:600px;box-shadow:0 8px 32px #0006,0 0 0 1px #ffffff0d inset;z-index:1000;animation:floatingToolbarSlideDown .2s ease-out;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}@keyframes floatingToolbarSlideDown{0%{opacity:0;transform:translate(-50%) translateY(-10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.toolbar-header{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.1)}.toolbar-icon{color:#6366f1;flex-shrink:0}.toolbar-title{font-weight:600;color:#fff;font-size:14px}.operations-count,.dimensions-badge,.status-badge{margin-left:auto;font-size:11px;padding:2px 8px;border-radius:10px;background:#6366f133;color:#a5b4fc;font-weight:500}.processing-indicator{display:inline-block;margin-left:8px;animation:spin 1s linear infinite}.operations-info{display:flex;align-items:center;justify-content:center;padding:6px 0;margin-top:4px;border-top:1px solid rgba(255,255,255,.1)}.operations-info .operations-count{margin-left:0;background:#ffffff0d;color:#9ca3af}.status-badge.success{background:#22c55e33;color:#86efac}.status-badge.warning{background:#fbbf2433;color:#fcd34d}.status-badge.error{background:#ef444433;color:#fca5a5}.toolbar-controls{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}.slider-control{display:flex;align-items:center;gap:8px}.slider-icon{color:#9ca3af;flex-shrink:0}.slider-label{font-size:12px;color:#9ca3af;min-width:60px;flex-shrink:0}.slider-input{flex:1;height:4px;border-radius:2px;background:#ffffff1a;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;outline:none}.slider-input::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,#6366f1 0%,#6366f1 var(--slider-progress, 50%),rgba(255,255,255,.1) var(--slider-progress, 50%),rgba(255,255,255,.1) 100%)}.slider-input::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#6366f1;cursor:pointer;transition:transform .1s,box-shadow .1s;margin-top:-5px;box-shadow:0 2px 6px #6366f166}.slider-input::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 2px 8px #6366f199}.slider-input::-moz-range-track{height:4px;border-radius:2px;background:#ffffff1a}.slider-input::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#6366f1;cursor:pointer;border:none;transition:transform .1s}.slider-input::-moz-range-thumb:hover{transform:scale(1.2)}.slider-value{font-size:12px;color:#fff;min-width:48px;text-align:right;font-family:SF Mono,Consolas,monospace;background:#ffffff0d;padding:2px 6px;border-radius:4px}.checkbox-control{display:flex;align-items:center;gap:6px;font-size:12px;color:#9ca3af;cursor:pointer;padding:4px 0;-webkit-user-select:none;user-select:none}.checkbox-control:hover{color:#d1d5db}.checkbox-control input[type=checkbox]{width:16px;height:16px;accent-color:#6366f1;cursor:pointer}.preset-dropdown{position:relative;flex:1}.preset-dropdown-trigger{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#fff;cursor:pointer;font-size:13px;transition:all .15s;width:100%;text-align:left}.preset-dropdown-trigger:hover{background:#ffffff26;border-color:#6366f1}.preset-dropdown-trigger:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 2px #6366f133}.preset-icon{font-size:16px;flex-shrink:0}.preset-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chevron{transition:transform .2s;flex-shrink:0;color:#9ca3af}.chevron.open{transform:rotate(180deg)}.preset-dropdown-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:999}.preset-dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;max-height:400px;overflow-y:auto;background:#1e1e28fa;border:1px solid rgba(99,102,241,.3);border-radius:8px;z-index:1001;box-shadow:0 8px 24px #0006}.preset-dropdown-menu::-webkit-scrollbar{width:6px}.preset-dropdown-menu::-webkit-scrollbar-track{background:#ffffff0d;border-radius:3px}.preset-dropdown-menu::-webkit-scrollbar-thumb{background:#6366f180;border-radius:3px}.preset-dropdown-menu::-webkit-scrollbar-thumb:hover{background:#6366f1b3}.preset-group{padding:4px 0;border-bottom:1px solid rgba(255,255,255,.05)}.preset-group:last-child{border-bottom:none}.preset-group-label{padding:6px 12px;font-size:10px;font-weight:600;text-transform:uppercase;color:#6b7280;letter-spacing:.5px}.preset-option{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;background:transparent;border:none;color:#d1d5db;font-size:12px;cursor:pointer;text-align:left;transition:background .1s}.preset-option:hover{background:#6366f126}.preset-option.active{background:#6366f140;color:#a5b4fc}.preset-option-icon{font-size:14px;width:20px;text-align:center;flex-shrink:0}.preset-option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.preset-option-desc{font-size:10px;color:#6b7280;flex-shrink:0}.toggle-controls{display:flex;gap:4px}.btn-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:#ffffff1a;border:1px solid transparent;border-radius:6px;color:#9ca3af;cursor:pointer;transition:all .15s}.btn-icon:hover{background:#ffffff26;color:#fff}.btn-icon:focus{outline:none;border-color:#6366f1}.btn-icon.active{background:#6366f14d;border-color:#6366f1;color:#a5b4fc}.quick-actions{display:flex;gap:8px}.preset-section{display:flex;gap:8px;align-items:center}.custom-ratio-input{display:flex;align-items:center;gap:8px;padding:8px;background:#ffffff0d;border-radius:6px}.custom-ratio-input input{width:50px;padding:4px 8px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:4px;color:#fff;font-size:12px;text-align:center}.custom-ratio-input input:focus{outline:none;border-color:#6366f1}.custom-ratio-input input::placeholder{color:#6b7280}.custom-ratio-input span{color:#6b7280;font-weight:600}.toolbar-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.toolbar-actions-main{display:flex;gap:8px;margin-left:auto}.btn-primary,.btn-secondary{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;border:none;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;white-space:nowrap}.btn-primary{background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;box-shadow:0 2px 8px #6366f14d}.btn-primary:hover{background:linear-gradient(135deg,#4f46e5,#4338ca);box-shadow:0 4px 12px #6366f166;transform:translateY(-1px)}.btn-primary:active{transform:translateY(0)}.btn-primary:focus{outline:none;box-shadow:0 0 0 2px #6366f166}.btn-secondary{background:#ffffff1a;color:#d1d5db;border:1px solid rgba(255,255,255,.2)}.btn-secondary:hover{background:#ffffff26;color:#fff}.btn-secondary:focus{outline:none;border-color:#6366f1}.btn-secondary.btn-danger{color:#f87171;border-color:#f871714d}.btn-secondary.btn-danger:hover{background:#f8717133;border-color:#f8717180}.btn-small{padding:4px 10px;font-size:11px}.toolbar-hint{display:flex;align-items:center;gap:6px;margin-top:10px;padding-top:8px;border-top:1px solid rgba(255,255,255,.1);font-size:11px;color:#6b7280}.toolbar-hint svg{flex-shrink:0}.tooltip-wrapper{position:relative;display:inline-flex}.tooltip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);padding:6px 10px;background:#1f2937;border:1px solid rgba(255,255,255,.1);border-radius:6px;font-size:11px;color:#fff;white-space:nowrap;z-index:1002;pointer-events:none;animation:tooltipFadeIn .15s ease-out}@keyframes tooltipFadeIn{0%{opacity:0;transform:translate(-50%) translateY(4px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.tooltip:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:5px solid transparent;border-top-color:#1f2937}.tooltip-shortcut{display:inline-block;margin-left:8px;padding:2px 6px;background:#ffffff1a;border-radius:3px;font-family:SF Mono,Consolas,monospace;font-size:10px}@media (max-width: 640px){.floating-toolbar{min-width:280px;max-width:calc(100vw - 24px);padding:10px 12px}.toolbar-header{flex-wrap:wrap}.operations-count,.dimensions-badge{margin-left:0;margin-top:4px;width:100%}.slider-label{min-width:50px;font-size:11px}.slider-value{min-width:40px}.preset-section{flex-direction:column;align-items:stretch}.toggle-controls{justify-content:center}.toolbar-actions{flex-direction:column;align-items:stretch}.toolbar-actions-main{width:100%;margin-left:0}.toolbar-actions-main .btn-primary,.toolbar-actions-main .btn-secondary{flex:1}}@media (max-width: 480px){.floating-toolbar{top:8px;padding:8px 10px}.toolbar-title{font-size:13px}.quick-actions,.custom-ratio-input{flex-wrap:wrap}}@media (prefers-contrast: high){.floating-toolbar{border-width:2px;border-color:#6366f1}.btn-primary{background:#4f46e5}.btn-secondary{border-width:2px}}@media (prefers-reduced-motion: reduce){.floating-toolbar,.tooltip{animation:none}.slider-input::-webkit-slider-thumb{transition:none}.btn-primary:hover{transform:none}}.canvas-scrollbar{position:absolute;background:#ffffff0d;border-radius:var(--radius-sm);z-index:50;opacity:.7;transition:opacity var(--transition-fast),background var(--transition-fast)}.canvas-scrollbar:hover{opacity:1;background:#ffffff14}.canvas-scrollbar-horizontal{left:4px;right:18px;bottom:4px;height:10px}.canvas-scrollbar-vertical{top:4px;right:4px;bottom:18px;width:10px}.canvas-container:has(.ruler) .canvas-scrollbar-horizontal{left:24px}.canvas-container:has(.ruler) .canvas-scrollbar-vertical{top:24px}.canvas-scrollbar-thumb{position:absolute;background:var(--accent);border-radius:var(--radius-sm);cursor:grab;transition:background var(--transition-fast),box-shadow var(--transition-fast);opacity:.8}.canvas-scrollbar-thumb:hover{background:var(--accent-light);opacity:1;box-shadow:0 0 8px var(--accent-glow)}.canvas-scrollbar-thumb:active{cursor:grabbing;background:var(--accent-hover);box-shadow:0 0 12px var(--accent-glow-strong)}.canvas-scrollbar-horizontal .canvas-scrollbar-thumb{top:0;height:100%;min-width:30px}.canvas-scrollbar-vertical .canvas-scrollbar-thumb{left:0;width:100%;min-height:30px}@media (prefers-reduced-motion: reduce){.canvas-scrollbar,.canvas-scrollbar-thumb{transition:none}}.bgremover-page{min-height:100vh;background:#0f172a;color:#e2e8f0}.bgremover-header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background:#1e293b;border-bottom:1px solid #334155}.bgremover-header .header-left{display:flex;align-items:center;gap:12px}.bgremover-header h1{margin:0;font-size:1.5rem;color:#f8fafc}.header-badge{font-size:.75rem;background:#6366f133;color:#a5b4fc;padding:4px 10px;border-radius:12px}.bgremover-header .back-btn{padding:8px 16px;background:#334155;border:none;color:#e2e8f0;border-radius:6px;cursor:pointer;font-size:.875rem;transition:background .2s}.bgremover-header .back-btn:hover{background:#475569}.bgremover-content{padding:24px;max-width:1400px;margin:0 auto}.toast{position:fixed;top:20px;right:20px;padding:14px 20px;border-radius:8px;font-weight:500;z-index:9999;animation:slideIn .3s ease;max-width:400px;cursor:pointer}.bgremover-upload{background:#1e293b;border:2px dashed #475569;border-radius:12px;padding:60px 40px;text-align:center;cursor:pointer;transition:all .3s ease}.bgremover-upload:hover,.bgremover-upload.drag-over{border-color:#6366f1;background:#6366f11a}.upload-icon{font-size:4rem;margin-bottom:16px}.bgremover-upload h2{margin:0 0 8px;font-size:1.25rem;color:#f8fafc}.bgremover-upload p{margin:0;color:#64748b}.bgremover-processing{background:#1e293b;border-radius:12px;padding:60px 40px;text-align:center}.processing-spinner{width:60px;height:60px;border:4px solid #334155;border-top-color:#6366f1;border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 24px}.bgremover-processing h3{margin:0 0 8px;font-size:1.25rem;color:#f8fafc}.processing-percent{font-size:2.5rem;font-weight:700;color:#6366f1;margin:16px 0}.progress-bar-large{width:100%;max-width:400px;height:8px;background:#334155;border-radius:4px;margin:0 auto;overflow:hidden}.progress-bar-large .progress-fill{height:100%;background:linear-gradient(90deg,#6366f1,#8b5cf6);transition:width .3s ease}.bgremover-workspace{background:#1e293b;border-radius:12px;overflow:hidden}.bgremover-toolbar{display:flex;gap:8px;padding:16px 20px;background:#0f172a;border-bottom:1px solid #334155;flex-wrap:wrap}.btn-tool{padding:10px 16px;background:#334155;border:1px solid #475569;border-radius:6px;cursor:pointer;font-size:.875rem;font-weight:500;color:#e2e8f0;transition:all .2s;display:flex;align-items:center;gap:6px}.btn-tool:hover{background:#475569}.btn-tool.active{background:#6366f133;border-color:#6366f1;color:#a5b4fc}.btn-tool:disabled{opacity:.5;cursor:not-allowed}.btn-save{background:#16a34a!important;border-color:#16a34a!important;color:#fff!important}.btn-save:hover:not(:disabled){background:#15803d!important}.btn-replace{background:#f59e0b!important;border-color:#f59e0b!important;color:#fff!important}.btn-replace:hover:not(:disabled){background:#d97706!important}.btn-download{background:#6366f1!important;border-color:#6366f1!important;color:#fff!important}.btn-download:hover{background:#4f46e5!important}.toolbar-separator{width:1px;background:#334155;margin:0 8px}.bgremover-main{display:flex;gap:0}.bgremover-preview-area{flex:1;padding:24px;min-height:500px;display:flex;align-items:center;justify-content:center;background:#0f172a}.bgremover-single-preview{max-width:100%;max-height:600px}.preview-image-container{border-radius:8px;overflow:hidden;box-shadow:0 4px 20px #0000004d}.preview-image-container.checkered-bg{background:linear-gradient(45deg,#374151 25%,transparent 25%),linear-gradient(-45deg,#374151 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#374151 75%),linear-gradient(-45deg,transparent 75%,#374151 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px}.preview-image-container img{display:block;max-width:100%;max-height:600px;object-fit:contain}.bgremover-compare{position:relative;width:100%;max-width:800px;aspect-ratio:1;border-radius:8px;overflow:hidden;cursor:ew-resize;box-shadow:0 4px 20px #0000004d;background:#1e293b}.compare-layer{position:absolute;top:0;left:0;width:100%;height:100%}.compare-layer img{width:100%;height:100%;object-fit:contain;pointer-events:none}.compare-original{z-index:1;background:#1e293b}.compare-result{z-index:2;background:linear-gradient(45deg,#374151 25%,transparent 25%),linear-gradient(-45deg,#374151 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#374151 75%),linear-gradient(-45deg,transparent 75%,#374151 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px;background-color:#1e293b}.compare-label{position:absolute;bottom:16px;padding:8px 16px;background:#000c;color:#fff;border-radius:6px;font-size:.8rem;font-weight:600;z-index:10;pointer-events:none}.label-left{right:16px}.label-right{left:16px}.compare-slider{position:absolute;top:0;bottom:0;width:4px;z-index:20;transform:translate(-50%);pointer-events:none}.compare-slider-line{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;transform:translate(-50%);box-shadow:0 0 10px #00000080}.compare-slider-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 15px #0006;font-size:1.25rem;color:#6366f1;font-weight:700}.bgremover-bg-panel{width:300px;padding:20px;background:#1e293b;border-left:1px solid #334155;overflow-y:auto;max-height:600px}.bgremover-bg-panel h3{margin:0 0 20px;font-size:1.125rem;color:#f8fafc}.bg-section{margin-bottom:24px}.bg-section h4{margin:0 0 12px;font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase}.bg-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.bg-preset-btn{aspect-ratio:1;border:2px solid #475569;border-radius:6px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden;background:#334155}.bg-preset-btn:hover{border-color:#6366f1;transform:scale(1.05)}.bg-preset-btn.active{border-color:#6366f1;box-shadow:0 0 0 2px #6366f166}.checkered-mini{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(45deg,#475569 25%,transparent 25%),linear-gradient(-45deg,#475569 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#475569 75%),linear-gradient(-45deg,transparent 75%,#475569 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0px}.color-picker-row{display:flex;gap:8px}.color-picker-input{width:48px;height:40px;border:1px solid #475569;border-radius:6px;cursor:pointer;padding:2px;background:#0f172a}.color-hex-input{flex:1;padding:10px 12px;border:1px solid #475569;border-radius:6px;font-family:monospace;background:#0f172a;color:#e2e8f0}.color-hex-input:focus{outline:none;border-color:#6366f1}.btn-upload-bg{width:100%;padding:12px;background:#0f172a;border:2px dashed #475569;border-radius:6px;cursor:pointer;transition:all .2s;color:#e2e8f0}.btn-upload-bg:hover{border-color:#6366f1;background:#6366f11a}.custom-bg-preview{margin-top:12px;border-radius:6px;overflow:hidden}.custom-bg-preview img{width:100%;height:80px;object-fit:cover}.fit-mode-options{display:flex;gap:6px;margin-top:12px}.fit-mode-btn{flex:1;padding:8px 4px;background:#334155;border:1px solid #475569;border-radius:6px;cursor:pointer;font-size:.75rem;color:#e2e8f0;transition:all .2s}.fit-mode-btn:hover{background:#475569}.fit-mode-btn.active{background:#6366f1;color:#fff;border-color:#6366f1}.bgremover-info{margin-top:24px}.info-card{background:#1e293b;border-radius:8px;padding:20px;border-left:4px solid #6366f1}.info-card h4{margin:0 0 12px;color:#f8fafc}.info-card ul{margin:0;padding-left:20px}.info-card li{margin-bottom:8px;color:#94a3b8}.info-card li strong{color:#a5b4fc}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;padding:24px}.modal-content{background:#1e293b;border-radius:12px;padding:24px;max-width:450px;width:100%}.modal-content h2{margin:0 0 16px;color:#f8fafc;font-size:1.25rem}.modal-content p{color:#94a3b8;margin:0 0 20px;line-height:1.6}.modal-actions{display:flex;justify-content:flex-end;gap:12px}.btn-secondary{padding:10px 20px;background:#334155;color:#e2e8f0;border:none;border-radius:6px;cursor:pointer;font-weight:500;transition:background .2s}.btn-danger{padding:10px 20px;background:#dc2626;color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:500;transition:background .2s}.btn-danger:hover{background:#b91c1c}@media (max-width: 1024px){.bgremover-main{flex-direction:column}.bgremover-bg-panel{width:100%;max-height:none;border-left:none;border-top:1px solid #334155}}@media (max-width: 768px){.bgremover-header{flex-direction:column;gap:12px;text-align:center}.bgremover-content{padding:16px}.bgremover-upload{padding:40px 20px}.bgremover-toolbar{flex-direction:column}.btn-tool{width:100%;justify-content:center}.toolbar-separator{display:none}}.api-dashboard{padding:20px;max-width:1400px;margin:0 auto}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.header h1{margin:0}.back-btn{padding:10px 20px;background:#6c757d;color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:600}.loading{text-align:center;padding:50px;font-size:1.2em;color:#666}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:30px}.stat-card{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:30px;border-radius:12px;text-align:center;box-shadow:0 4px 20px #667eea4d}.stat-icon{font-size:3em;margin-bottom:15px}.stat-value{font-size:2.5em;font-weight:700;margin-bottom:10px}.stat-label{font-size:1em;opacity:.9}.card{background:#fff;padding:30px;border-radius:12px;box-shadow:0 2px 10px #0000001a}.card h2{margin:0 0 20px}.provider-table{width:100%;border-collapse:collapse}.provider-table th{background:#f8f9fa;padding:12px;text-align:left;font-weight:600;border-bottom:2px solid #e0e0e0}.provider-table td{padding:12px;border-bottom:1px solid #f0f0f0}.provider-table tbody tr:hover{background:#f8f9fa}.users-table{width:100%;border-collapse:collapse}.users-table th{background:#f8f9fa;padding:12px;text-align:left;font-weight:600;border-bottom:2px solid #e0e0e0;-webkit-user-select:none;user-select:none}.users-table th:hover{background:#e9ecef}.users-table td{padding:12px;border-bottom:1px solid #f0f0f0}.users-table tbody tr:hover{background:#f8f9fa}.dashboard-content h2{color:#333;margin-bottom:20px}.api-dashboard .stat-card,.api-dashboard .stat-value,.api-dashboard .stat-label,.api-dashboard .stat-icon{color:#fff!important}.audit-log-page{min-height:100vh;background:#f5f7fa}.audit-log-page .header{display:flex;justify-content:space-between;align-items:center;padding:20px 30px;background:linear-gradient(135deg,#434343,#000);color:#fff}.audit-log-page .header-left{display:flex;align-items:baseline;gap:15px}.audit-log-page .header h1{margin:0;font-size:28px}.audit-log-page .header-subtitle{font-size:14px;opacity:.8;background:#ffffff26;padding:4px 12px;border-radius:20px}.audit-log-page .header-actions{display:flex;gap:10px}.btn-header{padding:10px 18px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:8px;cursor:pointer;font-size:14px;transition:all .2s}.btn-header:hover{background:#fff3}.btn-header.btn-danger{background:#dc35454d;border-color:#dc354580}.btn-header.btn-danger:hover{background:#dc354580}.audit-log-page .toast{position:fixed;top:20px;right:20px;padding:15px 25px;border-radius:10px;font-weight:500;z-index:9999;animation:slideIn .3s ease}.audit-log-page .toast-success{background:#28a745;color:#fff}.audit-log-page .toast-error{background:#dc3545;color:#fff}.audit-content{max-width:1600px;margin:0 auto;padding:25px}.stats-panel{margin-bottom:25px;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.stat-card{background:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 10px #0000000d}.stat-card h4{margin:0 0 15px;font-size:14px;color:#666;text-transform:uppercase;letter-spacing:.5px}.stat-card ul{list-style:none;margin:0;padding:0}.stat-card li{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #f0f0f0;font-size:13px}.stat-card li:last-child{border-bottom:none}.action-name,.user-name,.module-name{color:#333;font-weight:500}.action-count{background:#e9ecef;padding:2px 10px;border-radius:12px;font-size:12px;color:#666}.no-errors{color:#28a745;margin:0;padding:20px 0;text-align:center}.error-item{flex-wrap:wrap;gap:8px}.error-code{background:#ffebee;color:#dc3545;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600}.filters-panel{background:#fff;border-radius:12px;padding:20px;margin-bottom:20px;box-shadow:0 2px 10px #0000000d}.filters-row{display:flex;gap:15px;flex-wrap:wrap;align-items:center}.filters-row select,.filters-row input{padding:10px 15px;border:1px solid #ddd;border-radius:8px;font-size:14px;min-width:150px}.filters-row select:focus,.filters-row input:focus{outline:none;border-color:#667eea}.btn-reset{padding:10px 18px;background:#f8f9fa;border:1px solid #ddd;border-radius:8px;cursor:pointer;font-size:14px;transition:all .2s}.btn-reset:hover{background:#e9ecef}.logs-table-wrapper{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 10px #0000000d}.loading-state,.empty-state{text-align:center;padding:60px 20px;color:#888;font-size:16px}.logs-table{width:100%;border-collapse:collapse}.logs-table th{background:#f8f9fa;padding:15px;text-align:left;font-weight:600;font-size:13px;color:#666;text-transform:uppercase;letter-spacing:.5px;border-bottom:2px solid #eee}.logs-table td{padding:12px 15px;border-bottom:1px solid #f0f0f0;font-size:14px;vertical-align:middle}.logs-table tbody tr:hover{background:#fafafa}.logs-table tbody tr.expanded{background:#f8f9fa}.date-cell{color:#666;font-size:13px;white-space:nowrap}.user-cell .user-email{font-weight:500;color:#333}.action-badge{display:inline-block;padding:4px 10px;border-radius:12px;color:#fff;font-size:11px;font-weight:500;text-transform:uppercase}.module-cell{color:#666}.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px}.ip-cell{font-family:monospace;font-size:12px;color:#888}.btn-expand{width:28px;height:28px;border:none;background:#f0f0f0;border-radius:6px;cursor:pointer;font-size:10px;transition:all .2s}.btn-expand:hover{background:#e0e0e0}.details-row td{padding:0!important;background:#f5f7fa}.details-content{padding:20px;max-height:300px;overflow:auto}.details-content pre{margin:0;font-size:12px;font-family:Monaco,Menlo,monospace;background:#fff;padding:15px;border-radius:8px;border:1px solid #e0e0e0;white-space:pre-wrap;word-break:break-word}.pagination{display:flex;justify-content:center;align-items:center;gap:20px;padding:25px;background:#fff;border-radius:0 0 12px 12px;border-top:1px solid #eee}.pagination button{padding:10px 20px;background:#fff;border:1px solid #ddd;border-radius:8px;cursor:pointer;transition:all .2s}.pagination button:hover:not(:disabled){background:#f0f0f0}.pagination-info{color:#666;font-size:14px}@media (max-width: 1200px){.stats-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 768px){.audit-log-page .header{flex-direction:column;gap:15px;text-align:center}.audit-log-page .header-actions{flex-wrap:wrap;justify-content:center}.audit-content{padding:15px}.stats-grid{grid-template-columns:1fr}.filters-row{flex-direction:column}.filters-row select,.filters-row input{width:100%}.logs-table-wrapper{overflow-x:auto}.logs-table{min-width:800px}}.image-library-page{min-height:100vh;background:#0f172a;color:#e2e8f0}.header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background:#1e293b;border-bottom:1px solid #334155}.header-left h1{margin:0;font-size:1.5rem;color:#f8fafc}.header-subtitle{font-size:.875rem;color:#94a3b8}.back-btn{padding:8px 16px;background:#334155;color:#e2e8f0;border:none;border-radius:6px;cursor:pointer;transition:background .2s}.back-btn:hover{background:#475569}.toast{position:fixed;top:20px;right:20px;padding:12px 20px;border-radius:8px;font-weight:500;z-index:1000;animation:slideIn .3s ease;cursor:pointer}.toast-error{background:#dc2626;color:#fff}.toast-success{background:#16a34a;color:#fff}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.library-layout{display:flex;height:calc(100vh - 73px)}.library-sidebar{width:280px;background:#1e293b;border-right:1px solid #334155;display:flex;flex-direction:column;overflow:hidden}.sidebar-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid #334155}.sidebar-header h3{margin:0;font-size:1rem;color:#f8fafc}.btn-icon-small{width:28px;height:28px;border:none;background:#334155;color:#e2e8f0;border-radius:4px;cursor:pointer;font-size:.875rem;display:flex;align-items:center;justify-content:center;transition:background .2s}.btn-icon-small:hover{background:#475569}.folder-tree{flex:1;overflow-y:auto;padding:8px 0}.folder-row{display:flex;align-items:center;padding:8px 12px;gap:8px;cursor:pointer;transition:background .15s;border-left:3px solid transparent}.folder-row:hover{background:#6366f11a}.folder-row.selected{background:#6366f133;border-left-color:#6366f1}.folder-row.drag-over{background:#22c55e33;border-left-color:#22c55e}.folder-row.shared{opacity:.9}.folder-expand-btn{width:16px;height:16px;border:none;background:none;color:#64748b;cursor:pointer;font-size:.625rem;padding:0;display:flex;align-items:center;justify-content:center}.folder-expand-btn:hover{color:#94a3b8}.folder-expand-spacer{width:16px}.folder-icon{font-size:1rem}.folder-name{flex:1;font-size:.875rem;color:#e2e8f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.folder-count{font-size:.75rem;color:#64748b;background:#334155;padding:2px 6px;border-radius:10px}.shared-badge{font-size:.75rem;opacity:.7}.folder-section-divider{display:flex;align-items:center;padding:12px 16px 8px;margin-top:8px}.folder-section-divider span{font-size:.75rem;color:#64748b;text-transform:uppercase;letter-spacing:.5px}.library-main{flex:1;display:flex;flex-direction:column;overflow:hidden}.library-toolbar{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background:#1e293b;border-bottom:1px solid #334155;flex-wrap:wrap;gap:12px}.toolbar-left{display:flex;align-items:center;gap:12px}.toolbar-left h2{margin:0;font-size:1.25rem;color:#f8fafc}.shared-info{font-size:.75rem;color:#f59e0b;background:#f59e0b1a;padding:4px 8px;border-radius:4px}.toolbar-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.search-input,.filter-select{padding:8px 12px;background:#0f172a;border:1px solid #334155;border-radius:6px;color:#e2e8f0;font-size:.875rem}.search-input{width:180px}.search-input:focus,.filter-select:focus{outline:none;border-color:#6366f1}.bulk-actions{display:flex;align-items:center;gap:8px;padding:4px 12px;background:#6366f11a;border-radius:6px}.selection-count{font-size:.875rem;color:#a5b4fc}.btn-small{padding:6px 12px;background:#334155;color:#e2e8f0;border:none;border-radius:4px;font-size:.875rem;cursor:pointer;transition:background .2s}.btn-small:hover{background:#475569}.btn-small.active{background:#6366f1}.btn-small.btn-danger{background:#dc2626}.btn-small.btn-danger:hover{background:#b91c1c}.btn-primary{padding:8px 16px;background:#6366f1;color:#fff;border:none;border-radius:6px;font-weight:500;cursor:pointer;transition:background .2s}.btn-primary:hover:not(:disabled){background:#4f46e5}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{padding:8px 16px;background:#334155;color:#e2e8f0;border:none;border-radius:6px;font-weight:500;cursor:pointer;transition:background .2s}.btn-secondary:hover{background:#475569}.btn-danger{background:#dc2626!important}.btn-danger:hover{background:#b91c1c!important}.library-info-bar{padding:8px 24px;background:#0f172a;border-bottom:1px solid #1e293b;font-size:.875rem;color:#64748b}.images-grid{flex:1;overflow-y:auto;padding:24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;align-content:start}.image-card{background:#1e293b;border-radius:8px;overflow:hidden;transition:transform .2s,box-shadow .2s;position:relative}.image-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000004d}.image-card.selected{outline:2px solid #6366f1;outline-offset:2px}.image-card.no-transparency .image-thumbnail{border-left:3px solid #f59e0b}.image-card[draggable=true]{cursor:grab}.image-card[draggable=true]:active{cursor:grabbing}.image-thumbnail{position:relative;aspect-ratio:1;overflow:hidden;cursor:pointer}.image-thumbnail img{width:100%;height:100%;object-fit:cover;transition:transform .2s}.image-thumbnail:hover img{transform:scale(1.05)}.checkered-bg{background-image:linear-gradient(45deg,#374151 25%,transparent 25%),linear-gradient(-45deg,#374151 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#374151 75%),linear-gradient(-45deg,transparent 75%,#374151 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.source-badge,.transparency-warning,.owner-badge{position:absolute;background:#000000b3;padding:4px 6px;border-radius:4px;font-size:.875rem}.source-badge{top:8px;left:8px}.transparency-warning{top:8px;right:8px;background:#f59e0be6}.owner-badge{bottom:8px;left:8px;font-size:.75rem}.selection-checkbox{position:absolute;top:8px;left:8px;width:24px;height:24px;background:#00000080;border:2px solid #6366f1;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}.selection-checkbox.checked{background:#6366f1}.image-info{padding:12px}.image-name{margin:0 0 4px;font-size:.875rem;color:#e2e8f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.image-meta{font-size:.75rem;color:#64748b}.image-actions{position:absolute;bottom:52px;right:8px;display:flex;gap:4px;opacity:0;transition:opacity .2s}.image-card:hover .image-actions{opacity:1}.btn-icon{width:32px;height:32px;border:none;background:#000000b3;color:#e2e8f0;border-radius:4px;cursor:pointer;font-size:.875rem;display:flex;align-items:center;justify-content:center;transition:background .2s}.btn-icon:hover{background:#000000e6}.btn-icon.btn-danger:hover{background:#dc2626}.btn-icon.btn-remove-bg{background:#f59e0be6}.btn-icon.btn-remove-bg:hover{background:#f59e0b}.loading-state,.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px;color:#64748b;flex:1}.spinner{width:40px;height:40px;border:3px solid #334155;border-top-color:#6366f1;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.empty-icon{font-size:4rem;margin-bottom:16px;opacity:.5}.pagination{display:flex;justify-content:center;align-items:center;gap:16px;padding:16px;background:#1e293b;border-top:1px solid #334155}.pagination button{padding:8px 16px;background:#334155;color:#e2e8f0;border:none;border-radius:6px;cursor:pointer;transition:background .2s}.pagination button:hover:not(:disabled){background:#475569}.pagination button:disabled{opacity:.5;cursor:not-allowed}.pagination-info{color:#94a3b8;font-size:.875rem}.context-menu{position:fixed;background:#1e293b;border:1px solid #334155;border-radius:8px;box-shadow:0 10px 40px #00000080;min-width:180px;z-index:1000;overflow:hidden}.context-menu button{display:block;width:100%;padding:10px 16px;background:none;border:none;color:#e2e8f0;text-align:left;cursor:pointer;font-size:.875rem;transition:background .15s}.context-menu button:hover{background:#6366f133}.context-menu button.danger{color:#f87171}.context-menu button.danger:hover{background:#dc262633}.context-menu-divider{height:1px;background:#334155;margin:4px 0}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;padding:24px}.modal-content{background:#1e293b;border-radius:12px;padding:24px;max-width:500px;width:100%;max-height:90vh;overflow-y:auto;position:relative}.modal-content h2{margin:0 0 20px;color:#f8fafc}.modal-close{position:absolute;top:16px;right:16px;width:32px;height:32px;border:none;background:#334155;color:#e2e8f0;border-radius:50%;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center}.modal-close:hover{background:#475569}.modal-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}.preview-modal{max-width:90vw;max-height:90vh;padding:0;overflow:hidden;display:flex;flex-direction:column}.preview-modal img{max-width:100%;max-height:70vh;object-fit:contain;background:#0f172a}.preview-info{padding:16px 24px}.preview-info h3{margin:0 0 8px;color:#f8fafc}.preview-info p{margin:0 0 16px;color:#94a3b8;font-size:.875rem}.preview-actions{display:flex;gap:12px}.folder-modal .form-group{margin-bottom:20px}.folder-modal label{display:block;margin-bottom:8px;color:#94a3b8;font-size:.875rem}.folder-modal input[type=text]{width:100%;padding:10px 12px;background:#0f172a;border:1px solid #334155;border-radius:6px;color:#e2e8f0;font-size:.875rem;box-sizing:border-box}.folder-modal input[type=text]:focus{outline:none;border-color:#6366f1}.color-picker{display:flex;flex-wrap:wrap;gap:8px}.color-option{width:32px;height:32px;border:2px solid transparent;border-radius:50%;cursor:pointer;transition:transform .2s,border-color .2s}.color-option:hover{transform:scale(1.1)}.color-option.selected{border-color:#fff;box-shadow:0 0 0 2px #6366f180}.delete-modal .delete-warning{background:#dc26261a;border:1px solid rgba(220,38,38,.3);border-radius:8px;padding:16px;margin-bottom:16px}.delete-modal pre{margin:0;white-space:pre-wrap;font-family:inherit;color:#fca5a5;font-size:.875rem}.share-modal .share-input-row{display:flex;gap:8px;margin-bottom:12px}.share-modal .share-input-row input{flex:1;padding:10px 12px;background:#0f172a;border:1px solid #334155;border-radius:6px;color:#e2e8f0;font-size:.875rem}.share-modal .share-input-row input:focus{outline:none;border-color:#6366f1}.share-modal .share-input-row button{padding:10px 16px;background:#6366f1;color:#fff;border:none;border-radius:6px;cursor:pointer;transition:background .2s}.share-modal .share-input-row button:hover:not(:disabled){background:#4f46e5}.share-modal .share-input-row button:disabled{opacity:.5;cursor:not-allowed}.share-hint{font-size:.75rem;color:#64748b;margin-bottom:16px}.current-shares{border-top:1px solid #334155;padding-top:16px}.current-shares h4{margin:0 0 12px;color:#94a3b8;font-size:.875rem}.share-item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:#0f172a;border-radius:6px;margin-bottom:8px}.share-item span{color:#e2e8f0;font-size:.875rem}.rename-modal input{width:100%;padding:10px 12px;background:#0f172a;border:1px solid #334155;border-radius:6px;color:#e2e8f0;font-size:.875rem;box-sizing:border-box}.rename-modal input:focus{outline:none;border-color:#6366f1}@media (max-width: 768px){.library-layout{flex-direction:column}.library-sidebar{width:100%;max-height:200px;border-right:none;border-bottom:1px solid #334155}.library-toolbar{flex-direction:column;align-items:stretch}.toolbar-right{justify-content:flex-start}.images-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}}.image-picker-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;padding:24px}.image-picker-modal{background:#1e293b;border-radius:12px;width:100%;max-width:1000px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden}.picker-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #334155}.picker-header h2{margin:0;font-size:1.25rem;color:#f8fafc}.picker-close{width:32px;height:32px;border:none;background:#334155;color:#e2e8f0;border-radius:50%;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:background .2s}.picker-close:hover{background:#475569}.picker-layout{display:flex;flex:1;min-height:0}.picker-sidebar{width:220px;background:#0f172a;border-right:1px solid #334155;display:flex;flex-direction:column}.picker-sidebar-header{padding:12px 16px;font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid #334155}.picker-folder-tree{flex:1;overflow-y:auto;padding:8px 0}.picker-folder-item{-webkit-user-select:none;user-select:none}.picker-folder-row{display:flex;align-items:center;padding:8px 12px;gap:6px;cursor:pointer;transition:background .15s;border-left:2px solid transparent}.picker-folder-row:hover{background:#6366f11a}.picker-folder-row.selected{background:#6366f133;border-left-color:#6366f1}.picker-folder-expand{width:14px;height:14px;border:none;background:none;color:#64748b;cursor:pointer;font-size:.5rem;padding:0;display:flex;align-items:center;justify-content:center}.picker-folder-spacer{width:14px}.picker-folder-icon{font-size:.875rem}.picker-folder-name{flex:1;font-size:.8rem;color:#e2e8f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.picker-folder-count{font-size:.7rem;color:#64748b;background:#334155;padding:1px 5px;border-radius:8px}.picker-shared-badge{font-size:.7rem;opacity:.7}.picker-folder-divider{padding:10px 16px 6px;margin-top:8px}.picker-folder-divider span{font-size:.65rem;color:#64748b;text-transform:uppercase;letter-spacing:.5px}.picker-main{flex:1;display:flex;flex-direction:column;min-width:0}.picker-filters{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid #334155;flex-wrap:wrap}.picker-search{padding:8px 12px;background:#0f172a;border:1px solid #334155;border-radius:6px;color:#e2e8f0;font-size:.875rem;width:160px}.picker-search:focus{outline:none;border-color:#6366f1}.picker-filter-select{padding:8px 12px;background:#0f172a;border:1px solid #334155;border-radius:6px;color:#e2e8f0;font-size:.875rem;cursor:pointer}.picker-filter-select:focus{outline:none;border-color:#6366f1}.picker-info{font-size:.8rem;color:#64748b;margin-left:auto}.picker-grid{flex:1;overflow-y:auto;padding:16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;align-content:start}.picker-image{background:#0f172a;border-radius:6px;overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s;border:2px solid transparent}.picker-image:hover{transform:translateY(-2px);box-shadow:0 4px 15px #0000004d}.picker-image.selected{border-color:#6366f1}.picker-image.no-transparency{border-left:3px solid #f59e0b}.picker-image-thumb{position:relative;aspect-ratio:1;overflow:hidden}.picker-image-thumb img{width:100%;height:100%;object-fit:cover}.picker-image-thumb.checkered-bg{background-image:linear-gradient(45deg,#374151 25%,transparent 25%),linear-gradient(-45deg,#374151 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#374151 75%),linear-gradient(-45deg,transparent 75%,#374151 75%);background-size:12px 12px;background-position:0 0,0 6px,6px -6px,-6px 0px}.picker-checkbox{position:absolute;top:6px;left:6px;width:20px;height:20px;background:#00000080;border:2px solid #6366f1;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.75rem;font-weight:700}.picker-checkbox.checked{background:#6366f1}.picker-transparency-warning{position:absolute;top:6px;right:6px;display:flex;align-items:center;gap:4px;background:#f59e0be6;padding:4px 6px;border-radius:4px}.warning-icon{font-size:.8rem}.warning-action{border:none;background:#0000004d;color:#fff;padding:2px 4px;border-radius:3px;cursor:pointer;font-size:.75rem;transition:background .2s}.warning-action:hover{background:#00000080}.picker-image-info{padding:8px}.picker-image-name{margin:0;font-size:.75rem;color:#94a3b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.picker-loading,.picker-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#64748b}.picker-spinner{width:32px;height:32px;border:3px solid #334155;border-top-color:#6366f1;border-radius:50%;animation:picker-spin .8s linear infinite}@keyframes picker-spin{to{transform:rotate(360deg)}}.picker-empty span{font-size:3rem;opacity:.5;margin-bottom:8px}.picker-pagination{display:flex;justify-content:center;align-items:center;gap:12px;padding:12px;border-top:1px solid #334155}.picker-pagination button{width:32px;height:32px;border:none;background:#334155;color:#e2e8f0;border-radius:6px;cursor:pointer;transition:background .2s}.picker-pagination button:hover:not(:disabled){background:#475569}.picker-pagination button:disabled{opacity:.5;cursor:not-allowed}.picker-pagination span{font-size:.8rem;color:#94a3b8}.picker-footer{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-top:1px solid #334155;background:#0f172a}.picker-selection-info{font-size:.875rem;color:#94a3b8}.picker-footer-actions{display:flex;gap:12px}.picker-btn-secondary{padding:8px 16px;background:#334155;color:#e2e8f0;border:none;border-radius:6px;cursor:pointer;font-size:.875rem;transition:background .2s}.picker-btn-secondary:hover{background:#475569}.picker-btn-primary{padding:8px 16px;background:#6366f1;color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:500;font-size:.875rem;transition:background .2s}.picker-btn-primary:hover:not(:disabled){background:#4f46e5}.picker-btn-primary:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 768px){.picker-layout{flex-direction:column}.picker-sidebar{width:100%;max-height:150px;border-right:none;border-bottom:1px solid #334155}.picker-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}}.selected-images-pro{display:flex;flex-direction:column;gap:16px}.selection-summary{display:flex;gap:12px;padding:16px;background:linear-gradient(135deg,#f8fafc,#f1f5f9);border-radius:12px;border:1px solid #e2e8f0}.summary-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px;background:#fff;border-radius:10px;border:2px solid #e2e8f0;transition:all .2s ease;position:relative}.summary-item.ok{border-color:#10b981;background:linear-gradient(135deg,#ecfdf5,#d1fae5)}.summary-item.warning{border-color:#f59e0b;background:linear-gradient(135deg,#fffbeb,#fef3c7);animation:pulseWarning 2s infinite}.summary-item.limit-reached{border-color:#8b5cf6;background:linear-gradient(135deg,#f5f3ff,#ede9fe)}@keyframes pulseWarning{0%,to{box-shadow:0 0 #f59e0b00}50%{box-shadow:0 0 0 4px #f59e0b26}}.summary-icon{font-size:24px;line-height:1}.summary-label{font-size:12px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px}.summary-count{font-size:28px;font-weight:700;color:#1e293b;line-height:1}.summary-limit{font-size:11px;color:#94a3b8;font-weight:500}.summary-hint{font-size:10px;color:#94a3b8;font-weight:500;padding:2px 8px;background:#94a3b81a;border-radius:10px}.summary-item.warning .summary-hint{background:#f59e0b33;color:#b45309}.selection-warnings{display:flex;flex-direction:column;gap:8px}.warning-item{display:flex;align-items:center;gap:10px;padding:12px 16px;background:linear-gradient(135deg,#fffbeb,#fef3c7);border:1px solid #fcd34d;border-radius:10px;font-size:13px;font-weight:500;color:#92400e;animation:slideIn .3s ease}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.level-group{background:#fff;border-radius:12px;overflow:hidden;border:1px solid #e2e8f0;box-shadow:0 1px 3px #0000000d}.level-group-header{padding:12px 16px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px;border-bottom:1px solid #e2e8f0}.level-group-header.master{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#92400e}.level-group-header.level2{background:linear-gradient(135deg,#dbeafe,#bfdbfe);color:#1e40af}.level-group-header.level3{background:linear-gradient(135deg,#ede9fe,#ddd6fe);color:#5b21b6}.level-group-count{margin-left:auto;font-size:11px;padding:2px 8px;background:#fff9;border-radius:10px}.level-group-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;padding:16px}.selected-image-card{background:#f8fafc;border-radius:10px;border:2px solid #e2e8f0;overflow:hidden;transition:all .2s ease}.selected-image-card:hover{border-color:#94a3b8;box-shadow:0 4px 12px #0000001a;transform:translateY(-2px)}.selected-image-card.level-master{border-color:#fbbf24;box-shadow:0 0 0 2px #fbbf2433}.selected-image-card.level-level2{border-color:#3b82f6}.selected-image-card.level-level3{border-color:#8b5cf6}.card-thumbnail{position:relative;aspect-ratio:1;background:#fff;cursor:pointer;overflow:hidden}.card-thumbnail.checkered{background-image:linear-gradient(45deg,#f0f0f0 25%,transparent 25%),linear-gradient(-45deg,#f0f0f0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f0f0f0 75%),linear-gradient(-45deg,transparent 75%,#f0f0f0 75%);background-size:12px 12px;background-position:0 0,0 6px,6px -6px,-6px 0px}.card-thumbnail img{width:100%;height:100%;object-fit:contain;padding:8px;transition:transform .3s ease}.card-thumbnail:hover img{transform:scale(1.05)}.zoom-hint{position:absolute;bottom:6px;right:6px;width:24px;height:24px;background:#0009;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;opacity:0;transition:opacity .2s ease}.card-thumbnail:hover .zoom-hint{opacity:1}.card-content{padding:10px;display:flex;flex-direction:column;gap:8px}.card-name{font-size:11px;font-weight:500;color:#64748b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-level-selector{display:flex;gap:4px}.level-btn{flex:1;height:32px;border:2px solid #e2e8f0;background:#fff;border-radius:6px;cursor:pointer;font-size:14px;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.level-btn:hover{border-color:var(--level-color, #94a3b8);background:#f8fafc;transform:scale(1.05)}.level-btn.active{background:var(--level-bg, #e2e8f0);border-color:var(--level-color, #94a3b8);box-shadow:0 2px 8px #00000026}.level-btn.disabled{opacity:.4;cursor:not-allowed}.level-btn.disabled:hover{transform:none}.card-actions{display:flex;gap:4px}.action-btn{flex:1;height:28px;border:1px solid #e2e8f0;background:#fff;border-radius:6px;cursor:pointer;font-size:12px;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.action-btn:hover{background:#f1f5f9;border-color:#94a3b8}.action-btn.mirror-btn.active{background:linear-gradient(135deg,#dbeafe,#bfdbfe);border-color:#3b82f6}.action-btn.remove-btn:hover{background:#fef2f2;border-color:#ef4444;color:#ef4444}.portal-zoom-modal .zoom-modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:10000;padding:24px;animation:fadeIn .2s ease}.portal-zoom-modal .zoom-content{background:#fff;border-radius:16px;overflow:hidden;max-width:90vw;max-height:90vh;position:relative;display:flex;flex-direction:column;animation:zoomIn .3s cubic-bezier(.16,1,.3,1);box-shadow:0 25px 50px -12px #00000080}.portal-zoom-modal .zoom-close{position:absolute;top:12px;right:12px;width:36px;height:36px;background:#0009;border:none;border-radius:50%;color:#fff;font-size:18px;cursor:pointer;z-index:1;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.portal-zoom-modal .zoom-close:hover{background:#000c;transform:scale(1.1) rotate(90deg)}.portal-zoom-modal .zoom-content>img{max-width:80vw;max-height:70vh;object-fit:contain;background-image:linear-gradient(45deg,#f0f0f0 25%,transparent 25%),linear-gradient(-45deg,#f0f0f0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f0f0f0 75%),linear-gradient(-45deg,transparent 75%,#f0f0f0 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px}.portal-zoom-modal .zoom-info{padding:16px 20px;background:#f8fafc;border-top:1px solid #e2e8f0}.portal-zoom-modal .zoom-info h4{margin:0 0 8px;font-size:14px;font-weight:600;color:#1e293b}.portal-zoom-modal .zoom-level-info{display:flex;align-items:center;gap:8px;font-size:13px;color:#64748b}.level-badge{padding:4px 10px;border-radius:12px;font-size:11px;font-weight:600}.level-badge.master{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#92400e}.level-badge.level2{background:linear-gradient(135deg,#dbeafe,#bfdbfe);color:#1e40af}.level-badge.level3{background:linear-gradient(135deg,#ede9fe,#ddd6fe);color:#5b21b6}@media (max-width: 768px){.selection-summary{flex-direction:column}.level-group-items{grid-template-columns:repeat(2,1fr)}.card-level-selector{flex-wrap:wrap}.level-btn{min-width:calc(50% - 2px)}}@media (max-width: 480px){.level-group-items{grid-template-columns:1fr}}.collage-preview-card{background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:16px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;border:1px solid rgba(255,255,255,.8)}.preview-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:linear-gradient(135deg,#1e293b,#334155);border-radius:16px 16px 0 0;border-bottom:none}.preview-header-left{display:flex;align-items:center;gap:10px}.preview-header h2{margin:0;font-size:15px;font-weight:600;color:#fff;display:flex;align-items:center;gap:8px}.preview-header h2:before{display:none}.auto-refresh-badge{font-size:10px;font-weight:600;color:#10b981;background:#10b98126;padding:4px 10px;border-radius:12px;border:1px solid rgba(16,185,129,.3);animation:pulseGreen 2s ease-in-out infinite}@keyframes pulseGreen{0%,to{opacity:1}50%{opacity:.7}}.btn-fullscreen{width:36px;height:36px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:8px;cursor:pointer;font-size:16px;transition:all .2s ease;display:flex;align-items:center;justify-content:center;color:#fff}.btn-fullscreen:hover{background:#fff3;transform:scale(1.1)}.preview-content{padding:24px;min-height:320px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f8fafc,#f1f5f9);border-radius:0 0 16px 16px}.preview-generating{text-align:center;padding:40px 20px}.generating-animation{margin-bottom:24px}.cube-grid{width:64px;height:64px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;transform:perspective(200px) rotateX(20deg)}.cube{background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:4px;animation:cubeWave 1.5s ease-in-out infinite;box-shadow:0 2px 8px #6366f14d}.cube:nth-child(1){animation-delay:0s}.cube:nth-child(2){animation-delay:.1s}.cube:nth-child(3){animation-delay:.2s}.cube:nth-child(4){animation-delay:.1s}.cube:nth-child(5){animation-delay:.2s}.cube:nth-child(6){animation-delay:.3s}.cube:nth-child(7){animation-delay:.2s}.cube:nth-child(8){animation-delay:.3s}.cube:nth-child(9){animation-delay:.4s}@keyframes cubeWave{0%,to{transform:scale(1) translateY(0);opacity:1}50%{transform:scale(.6) translateY(-8px);opacity:.5}}.generating-text{margin:0 0 8px;font-size:16px;font-weight:600;color:#1e293b}.generating-hint{margin:0;font-size:13px;color:#64748b}.preview-result{width:100%;display:flex;flex-direction:column;align-items:center;gap:16px}.preview-image-wrapper{position:relative;max-width:380px;max-height:380px;border-radius:12px;overflow:hidden;cursor:pointer;box-shadow:0 10px 40px #00000026;transition:all .3s cubic-bezier(.16,1,.3,1);background:#fff}.preview-image-wrapper:hover{transform:scale(1.02) translateY(-4px);box-shadow:0 20px 50px #0003}.preview-image-wrapper img{display:block;max-width:380px;max-height:380px;width:auto;height:auto;object-fit:contain}.preview-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.6) 100%);display:flex;align-items:flex-end;justify-content:center;padding-bottom:16px;opacity:0;transition:opacity .3s ease}.preview-image-wrapper:hover .preview-overlay{opacity:1}.preview-overlay span{color:#fff;font-size:13px;font-weight:600;padding:10px 20px;background:#6366f1e6;border-radius:8px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transform:translateY(10px);transition:transform .3s ease}.preview-image-wrapper:hover .preview-overlay span{transform:translateY(0)}.preview-info{text-align:center;padding:0 16px}.info-badge{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:20px;font-size:12px;font-weight:600;margin-bottom:8px}.info-badge.success{background:linear-gradient(135deg,#ecfdf5,#d1fae5);color:#047857;border:1px solid #a7f3d0}.preview-info p{margin:0;font-size:12px;color:#64748b;line-height:1.5}.preview-placeholder{text-align:center;padding:30px 20px}.placeholder-icon{position:relative;width:80px;height:80px;margin:0 auto 24px}.placeholder-icon .icon-main{font-size:64px;display:block;opacity:.25;filter:grayscale(100%)}.placeholder-icon .icon-overlay{position:absolute;bottom:0;right:0;width:32px;height:32px;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;box-shadow:0 4px 12px #6366f166}.preview-placeholder h4{margin:0 0 8px;font-size:18px;font-weight:700;color:#1e293b}.preview-placeholder>p{margin:0 0 24px;font-size:14px;color:#64748b}.placeholder-steps{display:flex;justify-content:center;gap:8px}.step{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:500;color:#64748b;padding:8px 14px;background:#fff;border-radius:20px;border:1px solid #e2e8f0;transition:all .2s ease}.step:hover{border-color:#6366f1;color:#6366f1}.step-num{width:22px;height:22px;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}.portal-lightbox .preview-lightbox{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000f2;display:flex;align-items:center;justify-content:center;z-index:10000;padding:24px;animation:fadeIn .3s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.portal-lightbox .lightbox-content{background:#fff;border-radius:16px;overflow:hidden;max-width:95vw;max-height:95vh;position:relative;display:flex;flex-direction:column;animation:zoomIn .3s cubic-bezier(.16,1,.3,1);box-shadow:0 25px 50px -12px #00000080}.portal-lightbox .lightbox-close{position:absolute;top:12px;right:12px;width:44px;height:44px;background:#000000b3;border:none;border-radius:50%;color:#fff;font-size:20px;cursor:pointer;z-index:1;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.portal-lightbox .lightbox-close:hover{background:#000000e6;transform:scale(1.1) rotate(90deg)}.portal-lightbox .lightbox-content>img{max-width:90vw;max-height:80vh;object-fit:contain}.portal-lightbox .lightbox-info{padding:16px 24px;text-align:center;border-top:1px solid #e2e8f0;background:#f8fafc}.portal-lightbox .lightbox-info p{margin:0 0 12px;font-size:14px;color:#64748b}.btn-download-preview{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;text-decoration:none;border-radius:10px;font-size:14px;font-weight:600;transition:all .2s ease;box-shadow:0 4px 14px #6366f166}.btn-download-preview:hover{transform:translateY(-2px);box-shadow:0 6px 20px #6366f180}@media (max-width: 768px){.preview-image-wrapper,.preview-image-wrapper img{max-width:100%;max-height:300px}.placeholder-steps{flex-direction:column;align-items:center}.preview-content{min-height:250px;padding:16px}.step{width:100%;justify-content:center}.preview-header-left{flex-direction:column;align-items:flex-start;gap:6px}}.collage-editor{display:flex;flex-direction:column;gap:16px;background:linear-gradient(135deg,#0f172a,#1e293b);border-radius:16px;padding:20px;border:1px solid #334155}.editor-toolbar{display:flex;gap:24px;padding:12px 16px;background:#1e293bcc;border-radius:12px;border:1px solid #334155;flex-wrap:wrap}.toolbar-section{display:flex;flex-direction:column;gap:8px}.toolbar-label{font-size:10px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px}.toolbar-buttons{display:flex;gap:6px}.toolbar-btn{padding:8px 12px;background:#334155;border:1px solid #475569;border-radius:8px;color:#e2e8f0;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:6px}.toolbar-btn:hover:not(:disabled){background:#475569;border-color:#6366f1}.toolbar-btn.active{background:linear-gradient(135deg,#6366f1,#4f46e5);border-color:#6366f1;color:#fff}.toolbar-btn:disabled{opacity:.4;cursor:not-allowed}.toolbar-btn.danger:hover:not(:disabled){background:#dc2626;border-color:#dc2626}.toolbar-export{display:flex;align-items:center;gap:12px}.format-select{padding:8px 12px;background:#334155;border:1px solid #475569;border-radius:8px;color:#e2e8f0;font-size:12px;cursor:pointer}.format-select:focus{outline:none;border-color:#6366f1}.quality-slider{display:flex;align-items:center;gap:8px;font-size:11px;color:#94a3b8}.quality-slider input[type=range]{width:80px;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#475569;border-radius:2px;cursor:pointer}.quality-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;background:#6366f1;border-radius:50%;cursor:pointer}.editor-canvas-container{display:flex;flex-direction:column;align-items:center;gap:12px}.editor-canvas-wrapper{background:#fff;border-radius:12px;box-shadow:0 0 0 1px #6366f14d,0 25px 50px -12px #00000080;overflow:hidden;cursor:crosshair}.editor-canvas-wrapper canvas{display:block}.editor-canvas-info{display:flex;align-items:center;gap:8px;font-size:11px;color:#64748b}.editor-layers{background:#1e293bcc;border-radius:12px;border:1px solid #334155;overflow:hidden}.layers-header{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:#1e293b;border-bottom:1px solid #334155;font-size:12px;font-weight:600;color:#e2e8f0}.layers-reset{width:28px;height:28px;background:#334155;border:none;border-radius:6px;cursor:pointer;font-size:12px;transition:all .2s ease}.layers-reset:hover{background:#475569}.layers-list{display:flex;gap:8px;padding:12px;overflow-x:auto}.layer-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px;background:#1e293b;border:2px solid transparent;border-radius:10px;cursor:pointer;transition:all .2s ease;min-width:80px}.layer-item:hover{background:#334155;border-color:#475569}.layer-item.selected{border-color:#6366f1;background:#6366f11a}.layer-thumb{width:50px;height:50px;object-fit:contain;border-radius:6px;background:linear-gradient(45deg,#374151 25%,transparent 25%),linear-gradient(-45deg,#374151 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#374151 75%),linear-gradient(-45deg,transparent 75%,#374151 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0px}.layer-info{display:flex;flex-direction:column;align-items:center;gap:2px}.layer-level{font-size:10px;font-weight:600;color:#94a3b8;text-transform:capitalize}.layer-name{font-size:9px;color:#64748b;max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.editor-actions{display:flex;justify-content:flex-end;gap:12px;padding-top:8px;border-top:1px solid #334155}.editor-btn{padding:12px 24px;border:none;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:8px}.editor-btn.primary{background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;box-shadow:0 4px 14px #6366f166}.editor-btn.primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #6366f180}.editor-btn.secondary{background:#334155;color:#e2e8f0;border:1px solid #475569}.editor-btn.secondary:hover:not(:disabled){background:#475569}.editor-btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}@media (max-width: 768px){.editor-toolbar{flex-direction:column;gap:12px}.toolbar-section{width:100%}.toolbar-buttons{flex-wrap:wrap}.editor-canvas-wrapper{max-width:100%;overflow-x:auto}.layers-list{justify-content:flex-start}.editor-actions{flex-direction:column}.editor-btn{width:100%;justify-content:center}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.exporting{animation:pulse 1s ease-in-out infinite}.collage-generator-page{--primary: #6366f1;--primary-dark: #4f46e5;--primary-light: #818cf8;--secondary: #ec4899;--success: #10b981;--warning: #f59e0b;--danger: #ef4444;--gray-50: #f9fafb;--gray-100: #f3f4f6;--gray-200: #e5e7eb;--gray-300: #d1d5db;--gray-400: #9ca3af;--gray-500: #6b7280;--gray-600: #4b5563;--gray-700: #374151;--gray-800: #1f2937;--gray-900: #111827;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--shadow-sm: 0 1px 2px rgba(0,0,0,.05);--shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);--shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05);--shadow-xl: 0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04);min-height:100vh;background:linear-gradient(135deg,var(--gray-50) 0%,#eef2ff 50%,var(--gray-100) 100%);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif}.collage-generator-page .header{display:flex;justify-content:space-between;align-items:center;padding:16px 32px;background:linear-gradient(135deg,var(--gray-900) 0%,var(--gray-800) 100%);color:#fff;box-shadow:var(--shadow-lg);position:sticky;top:0;z-index:100}.collage-generator-page .header-left,.collage-generator-page .header-right{display:flex;align-items:center;gap:16px}.collage-generator-page .header h1{margin:0;font-size:24px;font-weight:700;background:linear-gradient(135deg,#fff 0%,var(--gray-300) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.collage-generator-page .header-subtitle{font-size:12px;color:var(--gray-400);background:#ffffff1a;padding:6px 14px;border-radius:20px;font-weight:500;letter-spacing:.3px}.mode-toggle{display:flex;background:#ffffff1a;border-radius:var(--radius-md);padding:4px;border:1px solid rgba(255,255,255,.2)}.mode-btn{padding:8px 16px;background:transparent;border:none;color:var(--gray-400);font-size:13px;font-weight:600;cursor:pointer;border-radius:var(--radius-sm);transition:all .2s ease;display:flex;align-items:center;gap:6px}.mode-btn:hover:not(:disabled){color:#fff;background:#ffffff1a}.mode-btn.active{background:var(--primary);color:#fff;box-shadow:0 2px 8px #6366f166}.mode-btn:disabled{opacity:.4;cursor:not-allowed}.collage-generator-page .back-btn{display:flex;align-items:center;gap:8px;padding:10px 20px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:var(--radius-md);cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease}.collage-generator-page .back-btn:hover{background:#fff3;transform:translate(-2px)}.toast{position:fixed;top:80px;right:24px;padding:16px 24px;border-radius:var(--radius-md);font-weight:500;font-size:14px;z-index:9999;animation:toastSlide .4s cubic-bezier(.16,1,.3,1);max-width:400px;display:flex;align-items:center;gap:12px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.toast-success{background:linear-gradient(135deg,#10b981f2,#059669f2);color:#fff;box-shadow:0 8px 32px #10b9814d}.toast-error{background:linear-gradient(135deg,#ef4444f2,#dc2626f2);color:#fff;box-shadow:0 8px 32px #ef44444d}@keyframes toastSlide{0%{transform:translate(120%);opacity:0}to{transform:translate(0);opacity:1}}.cg-content{padding:24px;max-width:1800px;margin:0 auto}.cg-layout{display:grid;grid-template-columns:1fr 420px;gap:24px;align-items:start}.cg-main{display:flex;flex-direction:column;gap:20px}.cg-sidebar{display:flex;flex-direction:column;gap:20px;position:sticky;top:90px}.card{background:#ffffffe6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-md);border:1px solid rgba(255,255,255,.8);transition:box-shadow .3s ease,transform .3s ease}.card:hover{box-shadow:var(--shadow-lg)}.card h2{margin:0 0 16px;font-size:16px;font-weight:600;color:var(--gray-800);display:flex;align-items:center;gap:10px}.card h2:before{content:"";width:4px;height:20px;background:linear-gradient(180deg,var(--primary) 0%,var(--secondary) 100%);border-radius:2px}.card-hint{margin:-8px 0 16px;font-size:13px;color:var(--gray-500);line-height:1.5}.settings-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;margin-bottom:20px}.setting-group{display:flex;flex-direction:column;gap:8px}.setting-group label{font-size:12px;font-weight:600;color:var(--gray-600);text-transform:uppercase;letter-spacing:.3px}.setting-group input[type=text],.setting-group input[type=number]{padding:12px 14px;border:2px solid var(--gray-200);border-radius:var(--radius-sm);font-size:14px;font-weight:500;color:var(--gray-800);background:#fff;transition:all .2s ease}.setting-group input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px #6366f11a}.setting-group input::placeholder{color:var(--gray-400);font-weight:400}.radio-group{display:flex;gap:8px;flex-wrap:wrap}.radio-label{display:flex;align-items:center;justify-content:center;cursor:pointer;padding:10px 16px;border:2px solid var(--gray-200);border-radius:var(--radius-sm);font-size:13px;font-weight:600;color:var(--gray-600);background:#fff;transition:all .2s ease;min-width:90px}.radio-label:hover{border-color:var(--primary-light);background:var(--gray-50)}.radio-label:has(input:checked){background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);border-color:var(--primary);color:#fff;box-shadow:0 4px 12px #6366f14d}.radio-label input{display:none}.export-format-group{display:flex;flex-direction:column;gap:10px}.format-select{padding:12px 14px;border:2px solid var(--gray-200);border-radius:var(--radius-sm);font-size:14px;font-weight:500;color:var(--gray-800);background:#fff;cursor:pointer;transition:all .2s ease}.format-select:focus{outline:none;border-color:var(--primary)}.quality-control{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--gray-600)}.quality-control input[type=range]{flex:1;height:6px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--gray-200);border-radius:3px;cursor:pointer}.quality-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;background:var(--primary);border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #6366f14d}.settings-checkboxes{display:flex;gap:12px;flex-wrap:wrap;padding:16px;background:linear-gradient(135deg,#faf5ff,#f3e8ff);border-radius:var(--radius-md);margin-bottom:20px;border:1px solid #e9d5ff}.checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:13px;font-weight:500;color:var(--gray-700);padding:8px 14px;background:#fff;border-radius:var(--radius-sm);border:1px solid var(--gray-200);transition:all .2s ease}.checkbox-label:hover{border-color:var(--primary-light);box-shadow:var(--shadow-sm)}.checkbox-label:has(input:checked){background:linear-gradient(135deg,#eef2ff,#e0e7ff);border-color:var(--primary);color:var(--primary-dark)}.checkbox-label input{width:18px;height:18px;accent-color:var(--primary);cursor:pointer}.auto-preview-toggle{background:linear-gradient(135deg,#ecfdf5,#d1fae5)!important;border-color:var(--success)!important}.auto-preview-toggle:has(input:checked){background:linear-gradient(135deg,#10b981,#059669)!important;color:#fff!important}.settings-actions{display:flex;gap:12px;padding-top:8px}.btn-primary,.btn-secondary{padding:14px 28px;border:none;border-radius:var(--radius-md);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:8px}.btn-primary{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff;box-shadow:0 4px 14px #6366f14d}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #6366f166}.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-secondary{background:#fff;color:var(--gray-700);border:2px solid var(--gray-200)}.btn-secondary:hover:not(:disabled){background:var(--gray-50);border-color:var(--primary);color:var(--primary)}.btn-secondary:disabled{opacity:.5;cursor:not-allowed}.jobs-card{max-height:500px;display:flex;flex-direction:column}.jobs-card h2{flex-shrink:0}.jobs-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding-right:4px}.job-item{background:var(--gray-50);border-radius:var(--radius-md);padding:14px;border:1px solid var(--gray-200);transition:all .2s ease}.job-item:hover{background:#fff;box-shadow:var(--shadow-sm)}.job-item.job-status-processing{border-left:4px solid var(--warning);animation:pulse 2s infinite}.job-item.job-status-completed{border-left:4px solid var(--success)}.job-item.job-status-failed{border-left:4px solid var(--danger)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.job-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.job-filename{font-size:14px;font-weight:600;color:var(--gray-800);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.job-status-badge{font-size:11px;font-weight:600;color:#fff;padding:4px 10px;border-radius:12px}.job-meta{display:flex;gap:12px;font-size:12px;color:var(--gray-500);margin-bottom:8px}.job-progress{display:flex;align-items:center;gap:10px;margin-bottom:8px}.progress-bar{flex:1;height:6px;background:var(--gray-200);border-radius:3px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--warning) 0%,var(--success) 100%);transition:width .3s ease}.progress-text{font-size:12px;font-weight:600;color:var(--gray-600);min-width:40px}.job-error{font-size:12px;color:var(--danger);margin:8px 0 0}.job-actions{display:flex;gap:6px;margin-top:12px;padding-top:12px;border-top:1px solid var(--gray-200)}.btn-action{width:36px;height:36px;border:1px solid var(--gray-200);background:#fff;border-radius:var(--radius-sm);cursor:pointer;font-size:15px;transition:all .2s ease;display:flex;align-items:center;justify-content:center;position:relative}.btn-action:hover:not(:disabled){background:var(--gray-50);border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow-sm)}.btn-action:disabled{opacity:.4;cursor:not-allowed}.btn-action.btn-danger:hover:not(:disabled){background:#fef2f2;border-color:var(--danger);color:var(--danger)}.btn-action[title]:hover:after{content:attr(title);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);padding:8px 12px;background:var(--gray-900);color:#fff;font-size:11px;font-weight:500;white-space:nowrap;border-radius:var(--radius-sm);z-index:100;animation:tooltipPop .2s cubic-bezier(.16,1,.3,1);box-shadow:var(--shadow-lg)}.btn-action[title]:hover:before{content:"";position:absolute;bottom:calc(100% + 2px);left:50%;transform:translate(-50%);border:6px solid transparent;border-top-color:var(--gray-900);z-index:100}@keyframes tooltipPop{0%{opacity:0;transform:translate(-50%) translateY(4px) scale(.95)}to{opacity:1;transform:translate(-50%) translateY(0) scale(1)}}.loading-state{text-align:center;padding:40px 20px;color:var(--gray-500)}.loading-state:before{content:"⏳";display:block;font-size:32px;margin-bottom:12px;animation:spin 1s linear infinite}.empty-state{text-align:center;padding:40px 20px}.empty-icon{font-size:48px;display:block;margin-bottom:16px;opacity:.4}.empty-state p{margin:0;color:var(--gray-600);font-weight:500}.empty-hint{font-size:13px;color:var(--gray-400);margin-top:8px!important;font-weight:400}.pagination-small{display:flex;justify-content:center;align-items:center;gap:12px;padding-top:16px;margin-top:16px;border-top:1px solid var(--gray-200)}.pagination-small button{width:32px;height:32px;border:1px solid var(--gray-200);background:#fff;border-radius:var(--radius-sm);cursor:pointer;font-size:14px;font-weight:600;transition:all .2s ease}.pagination-small button:hover:not(:disabled){background:var(--gray-50);border-color:var(--primary)}.pagination-small button:disabled{opacity:.3;cursor:not-allowed}.pagination-small span{font-size:13px;color:var(--gray-500);font-weight:500}.portal-main-lightbox .lightbox-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000f2;z-index:10000;display:flex;align-items:center;justify-content:center;animation:fadeIn .3s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.portal-main-lightbox .lightbox-container{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:60px 100px}.portal-main-lightbox .lightbox-close{position:absolute;top:20px;right:24px;width:48px;height:48px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:50%;color:#fff;font-size:20px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;z-index:10}.portal-main-lightbox .lightbox-close:hover{background:#fff3;transform:scale(1.1) rotate(90deg)}.portal-main-lightbox .lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:50%;color:#fff;font-size:28px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.portal-main-lightbox .lightbox-nav:hover{background:#fff3;transform:translateY(-50%) scale(1.1)}.portal-main-lightbox .lightbox-prev{left:24px}.portal-main-lightbox .lightbox-next{right:24px}.portal-main-lightbox .lightbox-content{max-width:90%;max-height:80vh;display:flex;align-items:center;justify-content:center}.portal-main-lightbox .lightbox-content img{max-width:100%;max-height:80vh;object-fit:contain;border-radius:var(--radius-md);box-shadow:0 25px 50px -12px #00000080;animation:zoomIn .3s cubic-bezier(.16,1,.3,1)}@keyframes zoomIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.portal-main-lightbox .lightbox-error{display:flex;flex-direction:column;align-items:center;gap:16px;color:#fff;text-align:center}.portal-main-lightbox .lightbox-error a{color:var(--primary-light);text-decoration:underline}.portal-main-lightbox .lightbox-footer{position:absolute;bottom:24px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:20px;background:#000c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:14px 24px;border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.1)}.portal-main-lightbox .lightbox-counter{color:#fff;font-size:14px;font-weight:600}.portal-main-lightbox .lightbox-filename{color:#fff9;font-size:13px;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.portal-main-lightbox .lightbox-download{padding:10px 20px;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff;text-decoration:none;border-radius:var(--radius-sm);font-size:13px;font-weight:600;transition:all .2s ease}.portal-main-lightbox .lightbox-download:hover{transform:translateY(-1px);box-shadow:0 4px 12px #6366f166}@media (max-width: 1200px){.cg-layout{grid-template-columns:1fr}.cg-sidebar{position:static;order:-1}}@media (max-width: 768px){.collage-generator-page .header{flex-direction:column;gap:12px;text-align:center;padding:16px}.collage-generator-page .header-left{flex-direction:column;gap:8px}.collage-generator-page .header-right{flex-direction:column;gap:8px;width:100%}.mode-toggle{width:100%;justify-content:center}.cg-content{padding:16px}.settings-grid{grid-template-columns:1fr}.settings-checkboxes{flex-direction:column;gap:8px}.settings-actions{flex-direction:column}.btn-primary,.btn-secondary{width:100%;justify-content:center}.portal-main-lightbox .lightbox-container{padding:20px}.portal-main-lightbox .lightbox-nav{width:44px;height:44px;font-size:24px}.portal-main-lightbox .lightbox-prev{left:10px}.portal-main-lightbox .lightbox-next{right:10px}.portal-main-lightbox .lightbox-footer{flex-direction:column;gap:12px;padding:16px;width:calc(100% - 40px)}}.card:has(.image-picker),.card:has(.folder-browser){overflow:hidden}.image-picker,.folder-browser{max-height:400px;overflow-y:auto;overflow-x:hidden}.image-picker .images-grid,.folder-browser .images-grid{max-height:350px;overflow-y:auto;padding-right:8px}.image-picker::-webkit-scrollbar,.folder-browser::-webkit-scrollbar,.images-grid::-webkit-scrollbar{width:6px}.image-picker::-webkit-scrollbar-track,.folder-browser::-webkit-scrollbar-track,.images-grid::-webkit-scrollbar-track{background:#f1f5f9;border-radius:3px}.image-picker::-webkit-scrollbar-thumb,.folder-browser::-webkit-scrollbar-thumb,.images-grid::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.image-picker::-webkit-scrollbar-thumb:hover,.folder-browser::-webkit-scrollbar-thumb:hover,.images-grid::-webkit-scrollbar-thumb:hover{background:#94a3b8}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}#root{min-height:100vh}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#888;border-radius:5px}::-webkit-scrollbar-thumb:hover{background:#555}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spinner{border:3px solid #f3f3f3;border-top:3px solid #667eea;border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite}