.fas,.far,.fab,.fal,.fad{font-family:"Font Awesome 6 Free","Font Awesome 6 Pro","Font Awesome 6 Brands"!important;font-weight:900!important}.far{font-weight:400!important}.fab{font-family:"Font Awesome 6 Brands"!important;font-weight:400!important}@media (max-width:1024px){.app-container{display:flex!important;flex-direction:column!important;height:100vh;width:100vw;grid-template-areas:none!important;grid-template-columns:none!important;grid-template-rows:none!important}#editor-container,#preview-container{position:fixed!important;top:var(--mobile-header-height)!important;left:0!important;right:0!important;bottom:var(--mobile-toolbar-height)!important;width:100vw!important;overflow:hidden;z-index:10;grid-area:none!important}#header{position:fixed!important;top:0!important;left:0!important;right:0!important;width:100vw!important;z-index:1000;height:var(--mobile-header-height);grid-area:none!important}#sidebar{position:fixed!important;top:var(--mobile-header-height)!important;left:0!important;height:calc(100vh - var(--mobile-header-height))!important;width:min(80vw,300px)!important;z-index:1001;transform:translateX(-100%);transition:transform .3s ease;grid-area:none!important}.app-container.sidebar-collapsed,.app-container.preview-only,.app-container.split-screen{display:flex!important;flex-direction:column!important;grid-template-areas:none!important;grid-template-columns:none!important}body{overflow-x:hidden!important;max-width:100vw!important}}#preview-frame{width:100%;height:100%;border:0;background:#fff;display:block}.preview-frame-container{background:#fff;overflow:hidden}.preview-frame-container iframe[src^="blob:"]{pointer-events:auto;touch-action:auto}:root{--primary-color-light:#4361ee;--secondary-color-light:#3f37c9;--background-light:#ffffff;--panel-light:#f8f9fa;--text-light:#212529;--border-light:#dee2e6;--primary-color-dark:#4cc9f0;--secondary-color-dark:#4895ef;--background-dark:#0d1117;--panel-dark:#161b22;--text-dark:#e9ecef;--border-dark:#30363d;--accent-success:#06d6a0;--accent-warning:#ffd166;--accent-danger:#ef476f;--accent-purple:#7209b7;--accent-info:#00b4d8;--primary-color:var(--primary-color-dark);--secondary-color:var(--secondary-color-dark);--background:var(--background-dark);--panel:var(--panel-dark);--text:var(--text-dark);--border:var(--border-dark);--header-height:110px;--footer-height:32px;--sidebar-width:260px;--transition-speed:0.3s;--border-radius:6px;--mobile-header-height:50px;--mobile-toolbar-height:50px}:root,.theme-light{--text-secondary:#6c757d}.toast-with-action{display:flex;align-items:center;gap:10px;padding-right:10px}.toast-action{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);color:#fff;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.85rem;display:flex;align-items:center;gap:5px;transition:all .2s ease;white-space:nowrap}.toast-action:hover{background:rgba(255,255,255,.3);border-color:rgba(255,255,255,.4)}.toast-action i{font-size:.9rem}.danger-zone{margin-top:30px;padding-top:20px;border-top:2px solid var(--border)}.danger-zone label{color:#e74c3c;font-weight:600}.clear-data-section{background:rgba(231,76,60,.1);border:1px solid rgba(231,76,60,.3);border-radius:var(--border-radius);padding:15px;margin-top:10px}.warning-text{color:#e74c3c;margin:0 0 15px 0;font-size:.9rem}.warning-text i{margin-right:8px}.btn-danger{background:#e74c3c;color:#fff;border:0}.btn-danger:hover{background:#c0392b;transform:translateY(-1px)}.btn-danger:disabled{background:#95a5a6;cursor:not-allowed}.clear-data-warning{background:#fff5f5;border:2px solid #e74c3c;border-radius:var(--border-radius);padding:20px;color:#333}.theme-dark .clear-data-warning{background:rgba(231,76,60,.1);color:var(--text)}.clear-data-warning h4{color:#e74c3c;margin-top:0}.clear-data-warning ul{margin:10px 0;padding-left:25px}.clear-data-warning code{background:#e74c3c;color:#fff;padding:2px 8px;border-radius:4px;font-weight:700}.clear-data-warning input{margin-top:10px}.theme-dark{--text-secondary:#adb5bd}body.theme-light{--primary-color:var(--primary-color-light);--secondary-color:var(--secondary-color-light);--background:var(--background-light);--panel:var(--panel-light);--text:var(--text-light);--border:var(--border-light)}body.theme-dark{--primary-color:var(--primary-color-dark);--secondary-color:var(--secondary-color-dark);--background:var(--background-dark);--panel:var(--panel-dark);--text:var(--text-dark);--border:var(--border-dark)}*,::before,::after{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;margin:0;padding:0;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background-color:var(--background);color:var(--text);transition:background-color var(--transition-speed) ease,color var(--transition-speed) ease}body{display:flex;flex-direction:column}.app-container{display:grid;height:100vh;width:100%;grid-template-areas:"header header""sidebar main""footer footer";grid-template-rows:auto 1fr auto;grid-template-columns:var(--sidebar-width) 1fr;transition:all var(--transition-speed) ease;background-color:var(--background)}.app-container.sidebar-collapsed{grid-template-columns:50px 1fr}.app-container:not(.split-screen) #editor-container{grid-column:2}.app-container.split-screen{grid-template-areas:"header header header""sidebar editor preview""footer footer footer";grid-template-columns:var(--sidebar-width) 1fr 1fr}.app-container.split-screen.sidebar-collapsed{grid-template-columns:50px 1fr 1fr}.app-container.preview-only{grid-template-areas:"header header""sidebar main""footer footer";grid-template-columns:var(--sidebar-width) 1fr}.app-container.preview-only #editor-container{display:none}.app-container.preview-only #preview-container{grid-area:main;display:flex}.app-container.preview-only.sidebar-collapsed{grid-template-columns:50px 1fr}.app-container.sidebar-collapsed #sidebar{width:50px;overflow:hidden}.app-container.sidebar-collapsed .sidebar-header h3,.app-container.sidebar-collapsed .sidebar-tabs,.app-container.sidebar-collapsed .sidebar-content{display:none}.app-container.sidebar-collapsed #btn-sidebar-collapse{position:absolute;right:10px;top:10px}.explorer-item .item-header:focus{outline:2px solid var(--primary-color);outline-offset:-2px}.explorer-item .item-header{cursor:pointer}.explorer-item .item-header:focus-visible{outline:2px solid var(--primary-color);outline-offset:-2px}.ace_editor{font-family:"Fira Code","Consolas","Monaco","Courier New",monospace!important;line-height:1.3!important}.folder-picker-hint{background:var(--info-color, #4361ee);color:#fff;padding:8px 12px;border-radius:4px;font-size:.85rem;margin:10px;display:none}.folder-picker-hint.show{display:block}.ace_text-layer,.ace_gutter,.ace_line{font-family:inherit!important;line-height:inherit!important}#header{grid-area:header;background-color:var(--panel);color:var(--text);border-bottom:1px solid var(--border);padding:10px;display:flex;flex-direction:column;backdrop-filter:blur(10px);transition:background-color var(--transition-speed) ease}.header-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.app-title{font-size:1.3rem;font-weight:700;display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.app-title i{color:var(--primary-color);-webkit-text-fill-color:var(--primary-color)}.header-actions{display:flex;gap:8px}#toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.toolbar-group{display:flex;gap:5px;padding:0 8px;border-right:1px solid var(--border);position:relative}.toolbar-group:last-child{border-right:none}#sidebar{grid-area:sidebar;background-color:var(--panel);border-right:1px solid var(--border);width:var(--sidebar-width);overflow-y:auto;overflow-x:hidden;transition:all var(--transition-speed) ease;position:relative;display:flex;flex-direction:column}.sidebar-header{padding:12px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);background-color:var(--panel);flex-shrink:0}#project-name{font-size:1rem;font-weight:600;cursor:pointer;padding:4px 8px;border-radius:var(--border-radius);transition:all .2s ease}#project-name:hover{background-color:rgba(67,97,238,.1)}#project-name[contenteditable=true]{background-color:var(--background);border:2px solid var(--primary-color);outline:0}.sidebar-tabs{display:flex;gap:5px;padding:8px;background-color:var(--panel);flex-shrink:0}.sidebar-tab{flex:1;padding:6px 12px;cursor:pointer;border-radius:var(--border-radius);transition:all .2s ease;text-align:center;font-size:.9rem;font-weight:500}.sidebar-tab:hover{background-color:rgba(67,97,238,.1)}.sidebar-tab.active{background-color:var(--primary-color);color:#fff;box-shadow:0 2px 8px rgba(67,97,238,.3)}.sidebar-content{flex:1;overflow-y:auto;min-height:0}.sidebar-panel{display:none;padding:10px;height:100%}.sidebar-panel.active{display:block}#file-explorer{height:100%;display:flex;flex-direction:column;position:relative}.preview-checkbox-label{display:flex;align-items:center;gap:6px;padding:0 10px;font-size:.85rem;cursor:pointer;user-select:none}.preview-checkbox-label input[type=checkbox]{cursor:pointer;width:16px;height:16px}.preview-checkbox-label span{color:var(--text);opacity:.9}.preview-checkbox-label:hover span{opacity:1}.preview-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}.preview-actions{display:flex;align-items:center;gap:10px}.file-explorer-actions{display:flex;gap:5px;margin-bottom:15px;flex-shrink:0;padding:10px}.file-explorer-actions .btn{flex:1;font-size:.85rem;padding:5px 8px}.file-explorer-content{flex:1;overflow-y:auto;min-height:0;padding:0 10px 10px 10px}.explorer-item{user-select:none;position:relative}.explorer-item .item-header{display:flex;align-items:center;padding:6px 8px;cursor:pointer;border-radius:var(--border-radius);position:relative;transition:all .2s ease;min-height:32px}.explorer-item .item-header:hover{background-color:rgba(67,97,238,.1)}.explorer-item.active>.item-header{background-color:var(--primary-color);color:#fff;box-shadow:0 2px 8px rgba(67,97,238,.3)}.item-icon{margin-right:8px;width:20px;text-align:center;font-size:16px;flex-shrink:0}.item-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;font-size:.9rem}.item-actions{display:none!important}.folder-children{margin-left:20px;max-height:0;overflow:hidden;transition:max-height .3s ease;position:relative}.explorer-item.open>.folder-children{max-height:none;overflow:visible}.folder-children .explorer-item{position:relative}.folder-children .explorer-item::before{content:"";position:absolute;left:-12px;top:16px;width:12px;height:1px;background-color:var(--border)}.folder-children .explorer-item::after{content:"";position:absolute;left:-12px;top:0;bottom:0;width:1px;background-color:var(--border)}.folder-children .explorer-item:last-child::after{height:16px}.explorer-item[data-type=folder]>.item-header{font-weight:600}.explorer-item[data-type=folder] .item-icon{color:#ffa726;transition:all .2s ease}.explorer-item[data-type=folder].open .item-icon{color:#ff9800}.explorer-item[data-type=folder] .item-icon i{transition:transform .3s ease}.explorer-item[data-type=file] .item-icon{opacity:.8}.explorer-item[data-type=file]:hover .item-icon{opacity:1}.explorer-item.dragging{opacity:.5}.explorer-item.drag-over{background-color:rgba(76,201,240,.2);outline:2px dashed var(--primary-color)}.explorer-item[data-type=folder].drag-over>.item-header{background-color:rgba(76,201,240,.3)}#file-explorer.drag-over{background-color:rgba(76,201,240,.1);outline:2px dashed var(--primary-color)}.context-menu{position:fixed;background-color:var(--panel);border:1px solid var(--border);border-radius:var(--border-radius);box-shadow:0 4px 16px rgba(0,0,0,.2);padding:4px;min-width:180px;z-index:10000;display:none;backdrop-filter:blur(10px);animation:contextMenuIn .15s ease}@keyframes contextMenuIn{0%{opacity:0;transform:scale(.95) translateY(-5px)}to{opacity:1;transform:scale(1) translateY(0)}}.context-menu-item{padding:8px 12px;cursor:pointer;border-radius:4px;font-size:.9rem;display:flex;align-items:center;gap:12px;transition:all .2s ease;user-select:none;white-space:nowrap}.context-menu-item:hover{background-color:var(--primary-color);color:#fff}.context-menu-item i{width:16px;text-align:center;font-size:14px;opacity:.8}.context-menu-item:hover i{opacity:1}.context-menu-separator{height:1px;background-color:var(--border);margin:4px 8px;opacity:.5}.explorer-item.context-menu-active>.item-header{background-color:rgba(67,97,238,.15);outline:1px solid var(--primary-color)}.empty-message{text-align:center;padding:40px 20px;opacity:.5;font-style:italic}#editor-container{grid-area:main;display:flex;flex-direction:column;position:relative;overflow:hidden;background-color:var(--background)}.split-screen #editor-container{grid-area:editor}.tab-bar{display:flex;overflow-x:auto;background-color:var(--panel);border-bottom:1px solid var(--border);height:42px;align-items:center;user-select:none;scrollbar-width:thin;scrollbar-color:var(--border) transparent}.tab-bar::-webkit-scrollbar{height:6px}.tab-bar::-webkit-scrollbar-thumb{background-color:var(--border);border-radius:3px}.tab{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--panel);border:1px solid var(--border);border-bottom:none;cursor:pointer;transition:all .3s ease;font-size:.9rem;min-width:120px;max-width:200px;position:relative;opacity:.6;transform:scale(.95)}.tab:hover{opacity:.8;transform:scale(.98)}.tab.active{background:var(--background);border-color:var(--primary-color);color:var(--text);z-index:1;opacity:1;transform:scale(1);box-shadow:0 2px 8px rgba(67,97,238,.3);border-width:2px;font-weight:600}.tab.active::before{content:"";position:absolute;top:-2px;left:-2px;right:-2px;bottom:0;background:linear-gradient(90deg,var(--primary-color),#764ba2);border-radius:4px 4px 0 0;z-index:-1;opacity:.1}.tab.active .tab-name{color:var(--primary-color);font-weight:600}.tab.active{animation:activeTabPulse 2s ease-in-out infinite}@keyframes activeTabPulse{0%,to{box-shadow:0 2px 8px rgba(67,97,238,.3)}50%{box-shadow:0 2px 12px rgba(67,97,238,.5)}}.tab-close{margin-left:10px;opacity:0;transition:all .2s ease;font-size:14px;padding:2px;border-radius:3px}.tab:hover .tab-close{opacity:.6}.tab-close:hover{opacity:1;background-color:rgba(239,71,111,.2);color:var(--accent-danger)}.new-tab-button{display:flex;align-items:center;justify-content:center;width:42px;height:100%;background:0 0;border:0;color:var(--text);cursor:pointer;transition:all .2s ease}.new-tab-button:hover{background-color:rgba(67,97,238,.1);color:var(--primary-color)}.editor-wrapper{flex:1;position:relative;overflow:hidden;background-color:var(--background)}.tab-content{height:100%}.editor-instance{position:absolute;top:0;left:0;right:0;bottom:0;display:none}.editor-instance.active{display:block}#preview-container{grid-area:preview;background-color:var(--panel);border-left:1px solid var(--border);display:none;flex-direction:column;position:relative;overflow:hidden}.split-screen #preview-container{display:flex}.minify-file-info{background:var(--panel);padding:15px;border-radius:var(--border-radius);margin-bottom:20px}.minify-file-info p{margin:5px 0}.minify-options-group{background:var(--background);border:1px solid var(--border);border-radius:var(--border-radius);padding:15px;margin-bottom:20px}.minify-options-group h4{margin-top:0;margin-bottom:15px;color:var(--primary-color)}.minify-options-group .checkbox{margin-bottom:10px}.minify-preview{background:var(--panel);padding:15px;border-radius:var(--border-radius);margin-top:20px}.minify-preview h4{margin-top:0;margin-bottom:10px}#minify-size-info p{margin:5px 0;font-family:monospace}#minify-size-info span{font-weight:700;color:var(--primary-color)}.options-section{background:var(--background);border:1px solid var(--border);border-radius:var(--border-radius);padding:12px;margin-bottom:12px}.options-section h5{margin:0 0 10px 0;color:var(--primary-color);font-size:.95rem;font-weight:600}.options-section .checkbox{margin-bottom:8px}.minify-options-group{max-height:400px;overflow-y:auto;padding-right:10px}.minify-options-group::-webkit-scrollbar{width:8px}.minify-options-group::-webkit-scrollbar-track{background:var(--background);border-radius:4px}.minify-options-group::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}.minify-options-group::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}.modal-footer .btn{margin-left:8px}.preview-toolbar{display:flex;justify-content:space-between;padding:8px 12px;background-color:var(--panel);border-bottom:1px solid var(--border);gap:10px;min-height:42px;align-items:center}.device-selection{display:flex;gap:5px;background-color:rgba(67,97,238,.05);border-radius:var(--border-radius);padding:2px}.device-btn{padding:6px 10px;border-radius:4px;transition:all .2s ease}.device-btn.active{background-color:var(--primary-color);color:#fff;box-shadow:0 2px 6px rgba(67,97,238,.3)}.preview-actions{display:flex;gap:8px;align-items:center}#preview-zoom{background-color:var(--background);color:var(--text);border:1px solid var(--border);border-radius:var(--border-radius);padding:4px 8px;font-size:.85rem}.preview-frame-container{flex:1;position:relative;overflow:auto;display:flex;justify-content:center;align-items:flex-start;padding:0;background-color:#f0f0f0;background-image:repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(0,0,0,.02) 10px,rgba(0,0,0,.02) 20px),repeating-linear-gradient(-45deg,transparent,transparent 10px,rgba(0,0,0,.02) 10px,rgba(0,0,0,.02) 20px);width:100%;height:100%}.theme-dark .preview-frame-container{background-color:#0a0a0a;background-image:repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(255,255,255,.02) 10px,rgba(255,255,255,.02) 20px),repeating-linear-gradient(-45deg,transparent,transparent 10px,rgba(255,255,255,.02) 10px,rgba(255,255,255,.02) 20px)}#preview-frame{border:0;background:#fff;box-shadow:0 4px 20px rgba(0,0,0,.15);transition:all .3s ease;width:100%;height:100%;display:block;min-height:100%;top:0;left:0}.device-desktop #preview-frame{width:100%;height:100%;max-width:none;max-height:none;box-shadow:none}.device-tablet #preview-frame{width:768px;height:1024px;border:16px solid #333;border-radius:20px;box-shadow:0 10px 40px rgba(0,0,0,.3)}.device-mobile #preview-frame{width:375px;height:667px;border:16px solid #333;border-radius:30px;box-shadow:0 10px 40px rgba(0,0,0,.3)}#footer{grid-area:footer;background-color:var(--panel);border-top:1px solid var(--border);height:var(--footer-height);display:flex;align-items:center;padding:0 12px;font-size:12px}.status-bar{display:flex;justify-content:space-between;width:100%;align-items:center}.status-left,.status-right{display:flex;gap:20px}.status-center{flex:0 0 auto;text-align:center;opacity:.7}.status-item{display:flex;align-items:center;gap:6px;opacity:.8;transition:opacity .2s ease}.status-item:hover{opacity:1}.status-item i{font-size:12px}.btn{padding:6px 14px;border-radius:var(--border-radius);border:0;cursor:pointer;font-size:14px;font-weight:500;display:flex;align-items:center;gap:6px;background-color:var(--secondary-color);color:#fff;transition:all .2s ease;position:relative;overflow:hidden}.btn::before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background-color:rgba(255,255,255,.2);transform:translate(-50%,-50%);transition:width .3s,height .3s}.btn:hover::before{width:300px;height:300px}.btn:hover{background-color:var(--primary-color);transform:translateY(-1px);box-shadow:0 4px 12px rgba(67,97,238,.3)}.btn:active{transform:translateY(0);box-shadow:0 2px 6px rgba(67,97,238,.2)}.btn-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background-color:transparent;color:var(--text);border:0;border-radius:var(--border-radius);cursor:pointer;transition:all .2s ease;position:relative;font-size:16px}.btn-icon:hover{background-color:rgba(67,97,238,.1);color:var(--primary-color)}.btn-icon.active{background-color:var(--primary-color);color:#fff;box-shadow:0 2px 8px rgba(67,97,238,.3)}.btn-icon[title]{position:relative}.btn-icon[title]::after{content:attr(title);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background-color:rgba(0,0,0,.9);color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease;margin-bottom:5px}.btn-icon[title]:hover::after{opacity:1}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.6);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal{background-color:var(--panel);border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.3);width:500px;max-width:90%;max-height:90vh;overflow-y:auto;position:relative;animation:slideUp .3s ease}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-header{padding:20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}.modal-title{font-size:1.25rem;font-weight:600}.modal-close{background:0 0;border:0;font-size:24px;cursor:pointer;color:var(--text);opacity:.6;transition:all .2s ease;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--border-radius)}.modal-close:hover{opacity:1;background-color:rgba(239,71,111,.1);color:var(--accent-danger)}.modal-body{padding:20px}.modal-footer{padding:15px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px}.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:6px;font-weight:500;font-size:.9rem}.form-control{width:100%;padding:10px 12px;border-radius:var(--border-radius);border:1px solid var(--border);background-color:var(--background);color:var(--text);font-size:14px;transition:all .2s ease}.form-control:focus{outline:0;border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(67,97,238,.1)}.validation-panel{position:absolute;flex-direction:column;top:42px;right:0;width:350px;max-height:60%;overflow-y:auto;background-color:var(--panel);border-left:1px solid var(--border);border-bottom:1px solid var(--border);border-radius:0 0 0 var(--border-radius);z-index:50;display:none;box-shadow:-4px 4px 12px rgba(0,0,0,.1)}.validation-header{position:sticky;top:0;z-index:100;padding:12px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;background:var(--panel)}.validation-results{padding:12px;max-height:calc(100% - 60px);overflow-y:auto}.validation-item{margin-bottom:10px;padding:12px;border-radius:var(--border-radius);cursor:pointer;transition:all .2s ease}.validation-item:hover{transform:translateX(4px)}.validation-item.error{background-color:rgba(239,71,111,.1);border-left:4px solid var(--accent-danger)}.validation-item.warning{background-color:rgba(255,209,102,.1);border-left:4px solid var(--accent-warning)}.validation-item.info{background-color:rgba(76,201,240,.1);border-left:4px solid var(--accent-info)}.validation-item-header{display:flex;justify-content:space-between;margin-bottom:6px;font-weight:500}.validation-count{display:flex;gap:15px}.count-item{display:flex;align-items:center;gap:5px;font-weight:600}.count-item.error{color:var(--accent-danger)}.count-item.warning{color:var(--accent-warning)}.count-item.info{color:var(--accent-info)}.snippets-panel{position:absolute;top:42px;left:0;width:350px;max-height:60%;overflow-y:auto;background-color:var(--panel);border-right:1px solid var(--border);border-bottom:1px solid var(--border);border-radius:0 0 var(--border-radius)0;z-index:50;display:none;box-shadow:4px 4px 12px rgba(0,0,0,.1)}.snippets-header{padding:12px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;background-color:rgba(67,97,238,.05)}.snippets-tabs{display:flex;gap:5px;padding:8px;background-color:rgba(67,97,238,.03)}.snippets-tabs .btn{flex:1;padding:6px 12px;font-size:.85rem}.snippets-list{padding:12px}.snippet-item{margin-bottom:12px;padding:12px;border-radius:var(--border-radius);background-color:rgba(255,255,255,.03);cursor:pointer;transition:all .2s ease;border:1px solid transparent}.mobile-toolbar .btn-icon:disabled{opacity:.4;cursor:not-allowed}.snippet-item:hover{background-color:rgba(255,255,255,.05);border-color:var(--border);transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,.1)}.snippet-header{display:flex;justify-content:space-between;margin-bottom:6px}.snippet-title{font-weight:600;color:var(--primary-color)}.snippet-actions{display:flex;gap:5px}.snippet-description{font-size:.85rem;opacity:.8;margin-bottom:8px}.snippet-preview{font-size:.8rem;padding:8px;background-color:rgba(0,0,0,.2);border-radius:var(--border-radius);white-space:pre-wrap;overflow:hidden;max-height:120px;font-family:"Consolas","Monaco","Courier New",monospace}.toast-container{position:fixed;bottom:20px;right:20px;z-index:1000}.toast{padding:14px 16px;margin-top:10px;border-radius:var(--border-radius);background-color:var(--panel);color:var(--text);box-shadow:0 4px 16px rgba(0,0,0,.2);display:flex;align-items:center;gap:12px;animation:slideIn .3s ease,fadeOut .5s 2.5s forwards;max-width:350px;backdrop-filter:blur(10px)}.toast-success{border-left:4px solid var(--accent-success);background-color:rgba(6,214,160,.1)}.toast-error{border-left:4px solid var(--accent-danger);background-color:rgba(239,71,111,.1)}.toast-warning{border-left:4px solid var(--accent-warning);background-color:rgba(255,209,102,.1)}.toast-info{border-left:4px solid var(--accent-info);background-color:rgba(0,180,216,.1)}.toast-icon{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;font-size:16px}.toast-success .toast-icon{background-color:var(--accent-success);color:#fff}.toast-error .toast-icon{background-color:var(--accent-danger);color:#fff}.toast-warning .toast-icon{background-color:var(--accent-warning);color:#fff}.toast-info .toast-icon{background-color:var(--accent-info);color:#fff}.toast-message{flex:1;font-weight:500}@media (max-width:1024px){.mobile-toolbar{display:flex!important;position:fixed;bottom:0;left:0;right:0;background-color:var(--panel);border-top:1px solid var(--border);height:var(--mobile-toolbar-height);padding:0;z-index:999;box-shadow:0-2px 10px rgba(0,0,0,.1);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.mobile-toolbar::-webkit-scrollbar{display:none}.mobile-toolbar .btn-icon{flex:0 0 auto;min-width:50px;height:100%;border:0;border-radius:0;font-size:16px;display:flex;align-items:center;justify-content:center;padding:0;margin:0;background:0 0;color:var(--text);transition:background-color .2s;border-right:1px solid rgba(128,128,128,.1)}.mobile-toolbar .btn-icon:last-child{border-right:none}.mobile-toolbar .btn-icon:active{background-color:rgba(67,97,238,.2)}.mobile-toolbar .btn-icon.active{color:var(--primary-color);background-color:rgba(67,97,238,.1)}}.select-all-options{display:none;position:fixed;bottom:calc(var(--mobile-toolbar-height) + 10px);left:50%;transform:translateX(-50%);background:var(--panel);border:1px solid var(--border);border-radius:var(--border-radius);box-shadow:0-4px 20px rgba(0,0,0,.2);padding:10px;z-index:1003;animation:slideUp .3s ease}.select-all-options.active{display:flex;gap:10px}.select-option-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:15px 20px;background:var(--background);border:1px solid var(--border);border-radius:var(--border-radius);color:var(--text);cursor:pointer;transition:all .2s ease;min-width:80px;gap:8px}.select-option-btn:hover,.select-option-btn:active{background:var(--hover);border-color:var(--primary-color)}.select-option-btn i{font-size:20px}.select-option-btn span{font-size:.85rem}@keyframes slideUp{0%{transform:translateX(-50%) translateY(20px);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}@media (max-width:480px){.mobile-toolbar .btn-icon{min-width:44px;font-size:14px}.select-all-options{left:10px;right:10px;transform:none}.select-option-btn{padding:12px 15px;min-width:70px}.select-option-btn i{font-size:18px}.select-option-btn span{font-size:.75rem}}@media (max-width:768px){.mobile-toolbar::after{content:"";position:absolute;right:0;top:0;bottom:0;width:20px;background:linear-gradient(to right,transparent,var(--panel));pointer-events:none;opacity:.8}}@keyframes slideIn{0%{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0;transform:translateY(10px)}}@keyframes spin{to{transform:rotate(360deg)}}.loading-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.7);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:2000}.spinner{width:60px;height:60px;position:relative}.spinner::before,.spinner::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;border:3px solid transparent}.spinner::before{border-top-color:var(--primary-color);animation:spin 1s linear infinite}.spinner::after{border-bottom-color:var(--secondary-color);animation:spin 1.5s linear infinite reverse}.dropzone{border:3px dashed var(--primary-color);background-color:rgba(76,201,240,.1);position:relative}.dropzone::before{content:"Drop files here";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.2rem;font-weight:600;color:var(--primary-color);pointer-events:none}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--panel)}::-webkit-scrollbar-thumb{background:var(--secondary-color);border-radius:5px;border:2px solid var(--panel)}::-webkit-scrollbar-thumb:hover{background:var(--primary-color)}.outline-item{padding:8px;cursor:pointer;border-radius:var(--border-radius);margin-bottom:4px;transition:all .2s ease}.outline-item:hover{background-color:rgba(67,97,238,.1);transform:translateX(4px)}.outline-item-header{display:flex;align-items:center}.outline-item-icon{margin-right:10px;width:20px;text-align:center;color:var(--primary-color)}.outline-item-content{margin-left:30px}.outline-h1{font-weight:700;font-size:16px}.outline-h2{font-weight:700;font-size:15px;margin-left:15px}.outline-h3{font-weight:700;font-size:14px;margin-left:30px}.outline-h4{font-weight:700;font-size:13px;margin-left:45px}.outline-h5,.outline-h6{font-weight:700;font-size:12px;margin-left:60px}.shortcuts-table{width:100%;border-collapse:collapse}.shortcuts-table tr{border-bottom:1px solid var(--border)}.shortcuts-table tr:hover{background-color:rgba(67,97,238,.05)}.shortcuts-table td{padding:10px}@supports (padding-top:env(safe-area-inset-top)){#header{padding-top:max(10px,env(safe-area-inset-top))}.mobile-toolbar{padding-bottom:max(8px,env(safe-area-inset-bottom))}#sidebar{padding-left:max(0px,env(safe-area-inset-left))}}.shortcuts-table kbd{background-color:var(--panel);border:1px solid var(--border);border-radius:4px;padding:3px 6px;font-family:"Consolas","Monaco","Courier New",monospace;font-size:.9em;box-shadow:0 2px 0 var(--border)}.projects-list{max-height:400px;overflow-y:auto}.project-item{display:flex;justify-content:space-between;align-items:center;padding:12px;border-radius:var(--border-radius);margin-bottom:8px;border:1px solid var(--border);cursor:pointer;transition:all .2s ease}.project-item:hover{background-color:rgba(67,97,238,.05);border-color:var(--primary-color);transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,.1)}.project-name{font-weight:600;margin-bottom:4px}.project-date{font-size:.85rem;opacity:.7}.validation-success{text-align:center;padding:20px;color:var(--accent-success);font-weight:500}.context-menu{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}@media (max-width:1024px){.context-menu-item{padding:12px 16px;min-height:44px;display:flex;align-items:center}.context-menu{min-width:200px;font-size:16px}}.explorer-item.long-pressing{background-color:rgba(67,97,238,.1);transition:background-color .2s ease}.checkbox{display:flex;align-items:center;margin-bottom:10px}.checkbox input[type=checkbox]{margin-right:10px;width:16px;height:16px;cursor:pointer}.checkbox label{cursor:pointer;user-select:none}.auto-save-indicator{position:fixed;top:10px;right:10px;padding:6px 12px;background-color:var(--accent-success);color:#fff;border-radius:var(--border-radius);font-size:.85rem;opacity:0;transition:opacity .3s ease;pointer-events:none}.auto-save-indicator.show{opacity:1}:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}button:focus-visible{outline-offset:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.tab-name-input{background:var(--background)!important;color:var(--text)!important;border:2px solid var(--primary-color)!important;border-radius:4px!important;padding:2px 6px!important;font-size:.9rem!important;width:100%!important;outline:0!important;box-shadow:0 2px 8px rgba(67,97,238,.3)!important}.tab-name-input:focus{border-color:var(--secondary-color)!important;box-shadow:0 2px 12px rgba(67,97,238,.4)!important}.mobile-toolbar-menu{display:none;position:fixed;top:var(--mobile-header-height);left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:1002;overflow-y:auto;animation:fadeIn .3s ease}.mobile-toolbar-menu.active{display:block}.mobile-toolbar-menu-content{background:var(--panel);border-bottom:1px solid var(--border);max-height:calc(100vh - var(--mobile-header-height));overflow-y:auto;padding-bottom:20px;animation:slideDown .3s ease}.toolbar-section{border-bottom:1px solid var(--border);padding:15px}.toolbar-section:last-child{border-bottom:none}.toolbar-section h4{margin:0 0 10px 0;font-size:.9rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.toolbar-buttons{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}.toolbar-menu-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:15px 10px;background:var(--background);border:1px solid var(--border);border-radius:var(--border-radius);color:var(--text);cursor:pointer;transition:all .2s ease;min-height:70px;gap:8px}.toolbar-menu-btn:hover,.toolbar-menu-btn:active{background:var(--hover);border-color:var(--primary-color)}.toolbar-menu-btn i{font-size:20px;color:var(--primary-color)}.toolbar-menu-btn span{font-size:.75rem;text-align:center}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideDown{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}@media (max-width:480px){.toolbar-buttons{grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px}.toolbar-menu-btn{padding:12px 8px;min-height:60px}.toolbar-menu-btn i{font-size:18px}.toolbar-menu-btn span{font-size:.7rem}}@media screen and (max-height:500px) and (orientation:landscape){.toolbar-section{padding:10px}.toolbar-section h4{margin-bottom:5px}.toolbar-menu-btn{min-height:50px;padding:8px}}@media (min-width:768px) and (max-width:1024px){.toolbar-buttons{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.toolbar-menu-btn{min-height:80px}.toolbar-menu-btn i{font-size:24px}.toolbar-menu-btn span{font-size:.85rem}}@media (min-width:1025px){.mobile-toolbar-menu{display:none!important}}@media (max-width:1024px){:root{--mobile-header-height:50px;--mobile-toolbar-height:50px;--footer-height:0}body{height:100vh;overflow:hidden}.app-container{height:100vh;display:flex;flex-direction:column}#header{position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--mobile-header-height);background:var(--header);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 10px}#toolbar{display:none!important}.header-top{width:100%;display:flex;justify-content:space-between;align-items:center}.header-actions{display:none!important}#btn-mobile-menu{display:block!important;font-size:20px}.app-title{font-size:1.1rem;display:flex;align-items:center;gap:8px}.app-title span{display:inline-block}#editor-container,#preview-container{position:fixed;top:var(--mobile-header-height);left:0;right:0;bottom:var(--mobile-toolbar-height);overflow:hidden}.app-container:not(.preview-active) #editor-container{display:flex;z-index:10}.app-container:not(.preview-active) #preview-container{display:none!important}.app-container.preview-active #editor-container{display:none!important}.app-container.preview-active #preview-container{display:flex!important;z-index:10}#footer{display:none!important}#sidebar{position:fixed;height:calc(100vh - var(--mobile-header-height));top:var(--mobile-header-height);left:0;z-index:1001;box-shadow:5px 0 15px rgba(0,0,0,.3);transform:translateX(-100%);transition:transform .3s ease;width:min(80vw,300px);background-color:var(--panel)}#sidebar.mobile-open{transform:translateX(0)}.mobile-toolbar{display:flex!important;position:fixed;bottom:0;left:0;right:0;background-color:var(--panel);border-top:1px solid var(--border);height:var(--mobile-toolbar-height);padding:0;z-index:999;box-shadow:0-2px 10px rgba(0,0,0,.1)}.mobile-toolbar .btn-icon{flex:1;height:100%;border:0;border-radius:0;font-size:18px;display:flex;align-items:center;justify-content:center;padding:0;margin:0;background:0 0;color:var(--text);transition:background-color .2s}.mobile-toolbar .btn-icon:active{background-color:rgba(67,97,238,.2)}.mobile-toolbar .btn-icon.active{color:var(--primary-color);background-color:rgba(67,97,238,.1)}.sidebar-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.5);z-index:1000;display:none;backdrop-filter:blur(2px)}#sidebar.mobile-open~.sidebar-overlay{display:block}.tab-bar{padding:5px;overflow-x:auto;-webkit-overflow-scrolling:touch}.tab{min-width:100px;max-width:150px;padding:8px 12px;font-size:.85rem}.file-explorer-actions{display:flex;flex-wrap:wrap;gap:5px;padding:10px}.file-explorer-actions .btn{flex:1;min-width:calc(50% - 2.5px);font-size:.85rem;padding:8px 5px}.preview-toolbar{flex-wrap:wrap;padding:5px;gap:5px}.device-selection{display:none!important}.preview-actions{width:100%;justify-content:space-between}.toast-container{top:calc(var(--mobile-header-height) + 10px);bottom:auto;left:10px;right:10px}}@media (max-width:480px){:root{--mobile-header-height:45px;--mobile-toolbar-height:45px}.app-title{font-size:1rem}.app-title span{display:none}.mobile-toolbar .btn-icon{font-size:16px}.file-explorer-actions .btn{font-size:.75rem;padding:6px 4px}.modal{margin:10px;max-height:calc(100vh - 20px)}}@media screen and (max-height:500px) and (orientation:landscape){:root{--mobile-header-height:40px;--mobile-toolbar-height:40px}#header{padding:0 8px}.app-title{font-size:.9rem}.mobile-toolbar .btn-icon{font-size:16px}.tab{padding:6px 10px;font-size:.8rem}}@media (min-width:768px) and (max-width:1024px) and (orientation:portrait){:root{--mobile-header-height:60px;--mobile-toolbar-height:60px}.app-title span{display:inline-block!important}.mobile-toolbar .btn-icon{font-size:22px}#sidebar{width:min(50vw,400px)}}@media (min-width:1025px){.mobile-toolbar{display:none!important}#toolbar{display:flex!important}}@media (max-width:768px){.preview-checkbox-label{font-size:.75rem;padding:0 5px}.preview-checkbox-label span{display:inline-block}#live-preview-checkbox{width:14px;height:14px}}.modal-overlay{z-index:2000}.context-menu{z-index:2001}#loading-overlay{z-index:3000}@media (max-width:1024px){::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:rgba(128,128,128,.3);border-radius:3px}}#btn-mobile-menu.active{color:var(--primary-color);background:rgba(67,97,238,.1)}@media print{body{background:#fff;color:#000}#header,#footer,#sidebar,#toolbar,.preview-toolbar,.tab-bar{display:none!important}#editor-container{grid-column:1/-1;margin:0}.editor-instance{position:static!important;display:block!important}}@media (prefers-contrast:high){:root{--primary-color:#0066ff;--secondary-color:#0052cc;--border:#000}}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@supports (-webkit-touch-callout:none){.app-container{height:100vh}#editor-container,#preview-container,#sidebar{height:100%}}.minify-modal-redesigned{max-width:720px;width:90%;max-height:90vh;border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 24px 48px -12px rgba(0,0,0,.18)}.theme-dark .minify-modal-redesigned{background:#1e1e1e}.minify-header{background:linear-gradient(135deg,#4285f4 0,#1a73e8 100%);color:#fff;padding:0;border-bottom:none}.minify-header-content{display:flex;align-items:center;gap:16px;padding:24px}.minify-icon-wrapper{width:48px;height:48px;background:rgba(255,255,255,.2);border-radius:12px;display:flex;align-items:center;justify-content:center}.minify-icon{color:#fff}.minify-title-section{flex:1}.minify-header .modal-title{margin:0;font-size:24px;font-weight:500;color:#fff}.minify-subtitle{margin:4px 0 0 0;font-size:14px;opacity:.9;font-weight:400}.minify-close{background:0 0;border:0;color:#fff;padding:8px;cursor:pointer;border-radius:50%;transition:background-color .2s;margin-right:16px}.minify-close:hover{background-color:rgba(255,255,255,.1)}.minify-body{padding:24px;overflow-y:auto;max-height:calc(90vh - 200px)}.minify-info-card{background:#f8f9fa;border-radius:12px;padding:16px;display:flex;align-items:center;gap:16px;margin-bottom:24px}.theme-dark .minify-info-card{background:#2d2d2d}.info-card-icon{width:40px;height:40px;background:#e8f0fe;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#1a73e8}.theme-dark .info-card-icon{background:#1a73e8;color:#fff}.info-card-content{flex:1}.info-label{font-size:12px;color:#5f6368;margin-bottom:2px}.theme-dark .info-label{color:#9aa0a6}.info-value{font-size:16px;font-weight:500;color:#202124}.theme-dark .info-value{color:#e8eaed}.minify-presets{margin-bottom:24px}.preset-label{font-size:14px;font-weight:500;color:#5f6368;margin-bottom:12px}.theme-dark .preset-label{color:#9aa0a6}.preset-pills{display:flex;gap:8px}.preset-pill{padding:8px 16px;border:1px solid #dadce0;border-radius:20px;background:#fff;color:#5f6368;font-size:14px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:6px}.theme-dark .preset-pill{background:#2d2d2d;border-color:#5f6368;color:#e8eaed}.preset-pill svg{opacity:.6}.preset-pill:hover{background:#f8f9fa;border-color:#1a73e8;color:#1a73e8}.theme-dark .preset-pill:hover{background:#3c4043}.preset-pill-active{background:#e8f0fe;border-color:#1a73e8;color:#1a73e8}.theme-dark .preset-pill-active{background:#1a73e8;color:#fff}.preset-pill-active svg{opacity:1}.minify-options-container{margin-bottom:24px}.options-section-card{background:#fff;border:1px solid #dadce0;border-radius:16px;overflow:hidden}.theme-dark .options-section-card{background:#2d2d2d;border-color:#5f6368}.section-header{display:flex;align-items:center;gap:12px;padding:20px;border-bottom:1px solid #e0e0e0}.theme-dark .section-header{border-bottom-color:#5f6368}.section-icon{color:#1a73e8}.section-title{margin:0;font-size:18px;font-weight:500;color:#202124}.theme-dark .section-title{color:#e8eaed}.options-tabs{display:flex;background:#f8f9fa;border-bottom:1px solid #e0e0e0}.theme-dark .options-tabs{background:#1e1e1e;border-bottom-color:#5f6368}.option-tab{flex:1;padding:12px 16px;border:0;background:0 0;color:#fff;font-size:18px;font-weight:500;cursor:pointer;transition:all .2s;position:relative}.option-tab:hover{color:#202124;background:rgba(0,0,0,.04)}.theme-dark .option-tab:hover{color:#e8eaed;background:rgba(255,255,255,.04)}.option-tab-active{color:#1a73e8}.option-tab-active::after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:#1a73e8;border-radius:3px 3px 0 0}.options-content{padding:20px}.options-panel{display:none}.options-panel-active{display:block}.minify-option{display:flex;align-items:flex-start;padding:12px 0;cursor:pointer;transition:background-color .2s}.minify-option:hover{background-color:rgba(0,0,0,.02);margin:0-12px;padding:12px 12px;border-radius:8px}.theme-dark .minify-option:hover{background-color:rgba(255,255,255,.04)}.minify-option input[type=checkbox]{width:18px;height:18px;margin-right:12px;margin-top:2px;cursor:pointer;accent-color:#1a73e8}.option-content{flex:1}.option-text{display:block;font-size:14px;font-weight:500;color:#202124;margin-bottom:2px}.theme-dark .option-text{color:#e8eaed}.option-desc{display:block;font-size:12px;color:#5f6368}.theme-dark .option-desc{color:#9aa0a6}.css-info-message{background:#e8f0fe;border-radius:12px;padding:16px;display:flex;align-items:flex-start;gap:12px;margin-bottom:20px}.theme-dark .css-info-message{background:rgba(26,115,232,.2)}.css-info-message svg{color:#1a73e8;flex-shrink:0;margin-top:2px}.css-info-message p{margin:0;font-size:14px;color:#202124}.theme-dark .css-info-message p{color:#e8eaed}.minify-option-single{padding:16px 0}.backup-option{display:flex;align-items:center;padding:16px;background:#f8f9fa;border-radius:12px;cursor:pointer;transition:background-color .2s;margin-bottom:24px}.theme-dark .backup-option{background:#2d2d2d}.backup-option:hover{background:#e8eaed}.theme-dark .backup-option:hover{background:#3c4043}.backup-option input[type=checkbox]{width:18px;height:18px;margin-right:12px;cursor:pointer;accent-color:#1a73e8}.backup-content{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:500;color:#202124}.theme-dark .backup-content{color:#e8eaed}.backup-content svg{color:#5f6368}.minify-preview-card{background:linear-gradient(135deg,#f8f9fa 0,#e8eaed 100%);border-radius:16px;padding:20px;margin-bottom:24px}.theme-dark .minify-preview-card{background:linear-gradient(135deg,#2d2d2d 0,#1e1e1e 100%)}.preview-header{display:flex;align-items:center;gap:8px;margin-bottom:16px;font-size:14px;font-weight:500;color:#5f6368}.theme-dark .preview-header{color:#9aa0a6}.size-stats{display:flex;align-items:center;justify-content:space-around;margin-bottom:16px;gap:20px}.size-item{text-align:center;flex:1}.size-item:last-child{background:rgba(52,168,83,.1);padding:12px;border-radius:12px}.theme-dark .size-item:last-child{background:rgba(52,168,83,.15)}.size-label{display:block;font-size:12px;color:#5f6368;margin-bottom:4px}.theme-dark .size-label{color:#9aa0a6}.size-value{display:block;font-size:20px;font-weight:600;color:#202124}.theme-dark .size-value{color:#e8eaed}.size-item:last-child .size-value{color:#34a853}.size-arrow{display:none}.reduction-badge{color:#fff;padding:6px 16px;border-radius:4px;font-size:24px;font-weight:700;text-align:center}.minify-footer{background:#f8f9fa;border-top:1px solid #e0e0e0;padding:16px 24px;display:flex;justify-content:flex-end;gap:8px}.theme-dark .minify-footer{background:#1e1e1e;border-top-color:#5f6368}.minify-btn-secondary{background:0 0;color:#5f6368;border:1px solid #dadce0;padding:10px 24px;border-radius:20px;font-weight:500;transition:all .2s}.theme-dark .minify-btn-secondary{border-color:#5f6368;color:#e8eaed}.minify-btn-secondary:hover{background:#f8f9fa;border-color:#5f6368}.theme-dark .minify-btn-secondary:hover{background:#3c4043}.minify-btn-preview{background:#fff;color:#1a73e8;border:1px solid #1a73e8;padding:10px 24px;border-radius:20px;font-weight:500;display:flex;align-items:center;gap:6px;transition:all .2s}.theme-dark .minify-btn-preview{background:0 0;color:#8ab4f8;border-color:#8ab4f8}.minify-btn-preview:hover{background:#e8f0fe}.theme-dark .minify-btn-preview:hover{background:rgba(138,180,248,.1)}.minify-btn-primary{background:#1a73e8;color:#fff;border:0;padding:10px 32px;border-radius:20px;font-weight:500;display:flex;align-items:center;gap:6px;transition:all .2s}.minify-btn-primary:hover{background:#1765cc;box-shadow:0 1px 2px 0 rgba(26,115,232,.45)}@media (max-width:600px){.minify-modal-redesigned{width:100%;height:100%;max-height:100vh;border-radius:0}.minify-body{max-height:calc(100vh - 200px)}.preset-pills{flex-wrap:wrap}.options-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch}}.minify-modal-redesigned{animation:slideUp .3s ease-out}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.obfuscate-modal-redesigned{max-width:900px;width:95vw;max-height:90vh;overflow-y:auto}.obfuscate-header{background:linear-gradient(135deg,var(--primary-color),#5a67d8);color:#fff;border-radius:var(--border-radius) var(--border-radius)0 0}.obfuscate-header-content{display:flex;align-items:center;gap:15px}.obfuscate-icon-wrapper{padding:12px;background:rgba(255,255,255,.2);border-radius:50%}.obfuscate-icon{color:#fff}.obfuscate-title-section h3{margin:0;font-size:1.5rem;font-weight:600}.obfuscate-subtitle{margin:5px 0 0 0;opacity:.9;font-size:.9rem}.obfuscate-close{color:#fff;background:0 0;border:0;padding:8px;border-radius:50%;transition:background-color .2s ease}.obfuscate-close:hover{background:rgba(255,255,255,.2)}.obfuscate-body{padding:25px}.obfuscate-info-card{display:flex;align-items:center;gap:15px;padding:20px;background:var(--panel);border-radius:var(--border-radius);margin-bottom:25px;border:1px solid var(--border)}.info-card-icon{padding:12px;background:var(--primary-color);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center}.info-label{font-size:.85rem;color:var(--text);opacity:.7;margin-bottom:5px}.info-value{font-size:1.1rem;font-weight:600;color:var(--text)}.obfuscate-presets{margin-bottom:25px}.preset-label{font-size:1rem;font-weight:600;color:var(--text);margin-bottom:15px}.preset-pills{display:flex;gap:12px;flex-wrap:wrap}.preset-pill{display:flex;align-items:center;gap:8px;padding:12px 20px;border:2px solid var(--border);background:var(--panel);color:var(--text);border-radius:25px;cursor:pointer;transition:all .3s ease;font-size:.9rem;font-weight:500}.preset-pill:hover{border-color:var(--primary-color);background:rgba(67,97,238,.1);transform:translateY(-2px)}.preset-pill-active{background:var(--primary-color);color:#fff;border-color:var(--primary-color);box-shadow:0 4px 12px rgba(67,97,238,.3)}.options-section-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--border-radius);overflow:hidden;margin-bottom:25px}.section-header{display:flex;align-items:center;gap:12px;padding:20px;background:var(--background);border-bottom:1px solid var(--border)}.section-icon{color:var(--primary-color)}.section-title{margin:0;font-size:1.1rem;font-weight:600;color:var(--text)}.options-tabs{display:flex;background:var(--background);border-bottom:1px solid var(--border);overflow-x:auto}.option-tab{padding:15px 25px;background:0 0;border:0;color:var(--text);cursor:pointer;transition:all .2s ease;white-space:nowrap;border-bottom:3px solid transparent;font-size:.9rem;font-weight:500}.option-tab:hover{background:rgba(67,97,238,.1)}.option-tab-active{color:var(--primary-color);border-bottom-color:var(--primary-color);background:rgba(67,97,238,.05)}.options-content{padding:20px}.options-panel{display:none;animation:fadeIn .3s ease}.options-panel-active{display:block}.obfuscate-option{display:flex;align-items:flex-start;gap:15px;padding:15px;border:1px solid var(--border);border-radius:var(--border-radius);transition:all .2s ease;margin-bottom:12px;cursor:pointer}.obfuscate-option:hover{background:rgba(67,97,238,.05);border-color:var(--primary-color)}.obfuscate-option input[type=checkbox]{margin:2px 0 0 0;transform:scale(1.2)}.option-content{flex:1}.option-text{font-weight:600;color:var(--text);display:block;margin-bottom:5px;font-size:.95rem}.option-desc{color:var(--text);opacity:.7;font-size:.85rem;line-height:1.4}.option-input-group,.option-select-group{margin-top:15px;padding-left:30px}.option-slider-group{margin-top:15px;padding-left:30px}.option-slider-group label{display:block;margin-bottom:10px;font-weight:500;color:var(--text)}.slider{width:100%;height:6px;border-radius:3px;background:var(--border);outline:0;-webkit-appearance:none}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--primary-color);cursor:pointer}.slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--primary-color);cursor:pointer;border:0}.backup-option{display:flex;align-items:center;gap:15px;padding:20px;background:var(--panel);border:1px solid var(--border);border-radius:var(--border-radius);margin-bottom:25px;cursor:pointer;transition:all .2s ease}.backup-option:hover{background:rgba(67,97,238,.05);border-color:var(--primary-color)}.backup-option input[type=checkbox]{transform:scale(1.2)}.backup-content{display:flex;align-items:center;gap:12px;color:var(--text);font-weight:500}.obfuscate-preview-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--border-radius);padding:20px}.preview-header{display:flex;align-items:center;gap:12px;margin-bottom:20px;color:var(--text);font-weight:600}.size-stats{display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:20px}.size-item{text-align:center}.size-label{display:block;font-size:.85rem;color:var(--text);opacity:.7;margin-bottom:8px}.size-value{display:block;font-size:1.1rem;font-weight:600;color:var(--text)}.size-arrow{color:var(--primary-color);opacity:.7}.protection-level{text-align:center;padding:12px;background:var(--background);border-radius:var(--border-radius);font-weight:600;color:var(--primary-color)}@media (max-width:768px){.footer-toggle{bottom:80px!important;right:15px!important;width:45px!important;height:45px!important;z-index:1002!important}.mobile-toolbar{position:fixed;bottom:0;left:0;right:0;height:60px;background:rgba(0,0,0,.9);backdrop-filter:blur(10px);z-index:1001;display:flex;align-items:center;justify-content:space-around;padding:0 10px}.mobile-toolbar-menu.active~.footer-toggle{display:none!important}}.obfuscate-footer{padding:20px 25px;background:var(--background);border-top:1px solid var(--border);display:flex;gap:15px;justify-content:flex-end}.obfuscate-btn-secondary{background:var(--panel);color:var(--text);border:1px solid var(--border)}.obfuscate-btn-preview{background:var(--panel);color:var(--primary-color);border:1px solid var(--primary-color);display:flex;align-items:center;gap:8px}.obfuscate-btn-preview:hover{background:rgba(67,97,238,.1)}.obfuscate-btn-primary{background:var(--primary-color);color:#fff;border:1px solid var(--primary-color);display:flex;align-items:center;gap:8px}.obfuscate-btn-primary:hover{background:#5a67d8}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (max-width:768px){.obfuscate-modal-redesigned{width:98vw;max-height:95vh}.obfuscate-body{padding:20px}.preset-pills{justify-content:center}.size-stats{flex-direction:column;gap:15px}.size-arrow{transform:rotate(90deg)}.obfuscate-footer{flex-direction:column}.options-tabs{overflow-x:scroll}}.preset-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}.preset-pill{display:flex;align-items:center;gap:6px;padding:8px 12px;background:var(--panel);border:2px solid var(--border);border-radius:6px;cursor:pointer;transition:all .2s ease;font-size:.9rem;font-weight:500;color:var(--text);min-width:80px;justify-content:center}.preset-pill:hover{background:var(--background);border-color:var(--primary-color);transform:translateY(-1px);box-shadow:0 2px 8px rgba(67,97,238,.15)}.preset-pill-active{background:var(--primary-color)!important;color:#fff!important;border-color:var(--primary-color)!important;box-shadow:0 2px 8px rgba(67,97,238,.3)}.preset-pill-active:hover{background:var(--secondary-color)!important;border-color:var(--secondary-color)!important;transform:translateY(-1px)}.preset-pill svg{flex-shrink:0}#obfuscate-preset-custom{background:linear-gradient(135deg,var(--panel) 0%,rgba(67,97,238,.05) 100%);border:2px solid var(--border);position:relative}#obfuscate-preset-custom:hover{background:linear-gradient(135deg,var(--background) 0%,rgba(67,97,238,.1) 100%);border-color:var(--primary-color)}#obfuscate-preset-custom.preset-pill-active{background:linear-gradient(135deg,var(--primary-color) 0%,var(--secondary-color) 100%)!important;color:#fff!important;border-color:var(--primary-color)!important}#obfuscate-preset-custom.preset-pill-active::before{content:"";position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;background:linear-gradient(45deg,var(--primary-color),var(--accent-color),var(--primary-color));border-radius:8px;z-index:-1;animation:customPresetGlow 2s ease-in-out infinite}@keyframes customPresetGlow{0%,to{opacity:.6;transform:scale(1)}50%{opacity:.8;transform:scale(1.02)}}@media (max-width:480px){.preset-pills{gap:6px}.preset-pill{padding:6px 10px;font-size:.8rem;min-width:70px}.preset-pill svg{width:12px;height:12px}}.obfuscate-options-container.custom-active{border-left:3px solid var(--primary-color);padding-left:17px;background:linear-gradient(90deg,rgba(67,97,238,.02)0,transparent 100%)}.custom-settings-indicator{display:inline-flex;align-items:center;gap:4px;font-size:.75rem;color:var(--primary-color);background:rgba(67,97,238,.1);padding:2px 6px;border-radius:3px;margin-left:8px}.custom-settings-indicator svg{width:12px;height:12px}.responsive-design-container{position:fixed;top:0;left:0;width:100vw;height:100vh;background:linear-gradient(135deg,#667eea 0,#764ba2 100%);z-index:9999;display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;overflow:hidden}.responsive-toolbar{background:rgba(255,255,255,.98);backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid rgba(0,0,0,.08);padding:12px 20px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;box-shadow:0 4px 20px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.05);transition:all .3s ease;min-height:auto;flex-shrink:0}.responsive-brand{display:flex;align-items:center;gap:8px;font-weight:700;color:#4361ee;font-size:16px;text-shadow:0 1px 2px rgba(67,97,238,.1);flex-shrink:0}.responsive-brand i{font-size:20px;background:linear-gradient(135deg,#4361ee,#7209b7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.responsive-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;flex:1;min-width:0}.device-presets-wrapper{position:relative;min-width:240px;flex-shrink:0}.device-selector{width:100%;padding:8px 35px 8px 12px;border:2px solid rgba(67,97,238,.1);border-radius:8px;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);font-size:13px;font-weight:600;color:#333;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);appearance:none;box-shadow:0 2px 8px rgba(67,97,238,.08),inset 0 1px 2px rgba(255,255,255,.5)}.device-selector:hover{border-color:rgba(67,97,238,.3);box-shadow:0 4px 16px rgba(67,97,238,.12),inset 0 1px 2px rgba(255,255,255,.5)}.device-selector:focus{outline:0;border-color:#4361ee;box-shadow:0 0 0 3px rgba(67,97,238,.15),0 4px 16px rgba(67,97,238,.12)}.dropdown-icon{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#666;pointer-events:none;transition:transform .3s ease;font-size:12px}.device-selector:focus+.dropdown-icon{transform:translateY(-50%) rotate(180deg)}.size-inputs{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);padding:4px;border-radius:8px;border:2px solid rgba(67,97,238,.1);box-shadow:0 2px 8px rgba(67,97,238,.08),inset 0 1px 2px rgba(255,255,255,.5);transition:all .3s ease;flex-shrink:0}.size-inputs:hover{border-color:rgba(67,97,238,.2);box-shadow:0 4px 12px rgba(67,97,238,.1),inset 0 1px 2px rgba(255,255,255,.5)}.input-group{position:relative;display:flex;align-items:center;background:rgba(255,255,255,.7);border-radius:6px;padding:2px;transition:background .2s ease}.input-group:hover{background:rgba(255,255,255,.9)}.input-group input{width:65px;padding:6px 4px 6px 8px;border:0;background:0 0;font-size:13px;font-weight:700;text-align:center;color:#333;transition:all .2s ease}.input-group input:focus{outline:0;background:rgba(67,97,238,.05);border-radius:4px;color:#4361ee}.input-group label{font-size:9px;color:#666;font-weight:700;margin-left:-12px;text-transform:uppercase;letter-spacing:.5px}.input-separator{color:#ccc;font-weight:900;font-size:14px;margin:0 4px}.btn-apply{background:linear-gradient(135deg,#4361ee,#7209b7);color:#fff;border:0;padding:6px 10px;border-radius:6px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 3px 12px rgba(67,97,238,.3),inset 0 1px 2px rgba(255,255,255,.2)}.btn-apply:hover{background:linear-gradient(135deg,#3651d4,#6308a5);transform:translateY(-1px);box-shadow:0 6px 20px rgba(67,97,238,.4),inset 0 1px 2px rgba(255,255,255,.2)}.device-actions{display:flex;gap:8px;flex-shrink:0}.action-btn{width:36px;height:36px;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border:2px solid rgba(67,97,238,.1);border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#666;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px rgba(67,97,238,.08),inset 0 1px 2px rgba(255,255,255,.5);font-size:14px}.action-btn:hover{background:#fff;border-color:#4361ee;color:#4361ee;transform:translateY(-2px);box-shadow:0 6px 20px rgba(67,97,238,.15),inset 0 1px 2px rgba(255,255,255,.5)}.action-btn.close-btn:hover{background:linear-gradient(135deg,#ff4757,#ff3742);border-color:#ff4757;color:#fff;box-shadow:0 6px 20px rgba(255,71,87,.3),inset 0 1px 2px rgba(255,255,255,.2)}.responsive-status{display:flex;align-items:center;gap:12px;flex-shrink:0}.size-display{background:rgba(255,255,255,.9);backdrop-filter:blur(10px);padding:8px 12px;border-radius:8px;border:2px solid rgba(67,97,238,.1);text-align:center;box-shadow:0 2px 8px rgba(67,97,238,.08),inset 0 1px 2px rgba(255,255,255,.5);transition:all .3s ease;min-width:120px}.size-display:hover{border-color:rgba(67,97,238,.2);transform:translateY(-1px)}.size-display span{display:block;font-family:"SF Mono","Monaco","Cascadia Code",monospace;font-weight:700}#current-size-display{font-size:14px;color:#333;background:linear-gradient(135deg,#4361ee,#7209b7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.device-type{font-size:10px;color:#666;text-transform:uppercase;letter-spacing:1px;font-weight:600;margin-top:2px}.zoom-controls{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);padding:4px;border-radius:8px;border:2px solid rgba(67,97,238,.1);box-shadow:0 2px 8px rgba(67,97,238,.08),inset 0 1px 2px rgba(255,255,255,.5);flex-shrink:0}.zoom-btn{padding:4px 8px;background:0 0;border:0;border-radius:4px;font-size:11px;font-weight:700;color:#666;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);min-width:35px}.zoom-btn:hover{background:rgba(67,97,238,.1);color:#4361ee}.zoom-btn.active{background:linear-gradient(135deg,#4361ee,#7209b7);color:#fff;box-shadow:0 2px 8px rgba(67,97,238,.3),inset 0 1px 2px rgba(255,255,255,.2)}.zoom-slider-wrapper{display:flex;align-items:center;gap:8px;margin-left:8px;padding-left:8px;border-left:1px solid rgba(67,97,238,.1)}#responsive-zoom{width:80px;height:4px;background:rgba(67,97,238,.1);border-radius:2px;outline:0;appearance:none;cursor:pointer;transition:all .2s ease}#responsive-zoom:hover{background:rgba(67,97,238,.2)}#responsive-zoom::-webkit-slider-thumb{appearance:none;width:16px;height:16px;background:linear-gradient(135deg,#4361ee,#7209b7);border-radius:50%;cursor:pointer;box-shadow:0 2px 8px rgba(67,97,238,.3),inset 0 1px 2px rgba(255,255,255,.3);transition:all .2s ease}#responsive-zoom::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 4px 12px rgba(67,97,238,.4),inset 0 1px 2px rgba(255,255,255,.3)}#zoom-display{font-size:11px;font-weight:700;color:#4361ee;min-width:35px;text-align:center;font-family:"SF Mono","Monaco",monospace}.responsive-actions{display:flex;gap:8px;flex-shrink:0}.responsive-preview-area{flex:1;display:flex;justify-content:center;align-items:center;padding:20px;overflow:auto;position:relative;min-height:0;background:radial-gradient(circle at 25% 25%,rgba(255,255,255,.08)0,transparent 60%),radial-gradient(circle at 75% 75%,rgba(255,255,255,.08)0,transparent 60%);scroll-behavior:smooth;min-width:100%;min-height:100%}.preview-background{width:fit-content;height:fit-content;min-width:100%;min-height:100%;display:flex;justify-content:center;align-items:center;position:relative;padding:50px;box-sizing:border-box;overflow:visible}.responsive-frame-container{background:#1a1a1a;border-radius:16px;overflow:hidden;position:relative;transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 20px 40px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.1),inset 0 1px 2px rgba(255,255,255,.05);transform-origin:center center;width:fit-content;height:fit-content;flex-shrink:0;cursor:grab;display:flex;flex-direction:column}.responsive-frame-container:active{cursor:grabbing}.responsive-frame-container.mobile{border-radius:28px;background:linear-gradient(145deg,#000,#1a1a1a);padding:35px 20px 20px 20px;box-shadow:0 25px 50px rgba(0,0,0,.4),0 0 0 2px rgba(255,255,255,.1),inset 0 1px 3px rgba(255,255,255,.1);overflow:hidden}.responsive-frame-container.tablet{border-radius:20px;background:linear-gradient(145deg,#2a2a2a,#1a1a1a);padding:25px 15px 15px 15px;box-shadow:0 22px 44px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.15),inset 0 1px 3px rgba(255,255,255,.1);overflow:hidden}.device-chrome{position:absolute;top:0;left:0;right:0;height:35px;background:linear-gradient(180deg,#000 0,#111 100%);z-index:10;display:none;align-items:center;justify-content:center;border-radius:28px 28px 0 0}.responsive-frame-container.mobile .device-chrome{display:flex}.device-notch{width:120px;height:22px;background:linear-gradient(180deg,#000 0,#111 100%);border-radius:0 0 11px 11px;position:absolute;top:0;left:50%;transform:translateX(-50%);box-shadow:inset 0-1px 2px rgba(255,255,255,.1)}.device-camera{width:8px;height:8px;background:radial-gradient(circle,#333 30%,#000 70%);border-radius:50%;position:absolute;top:13px;left:50%;transform:translateX(-30px);box-shadow:0 1px 2px rgba(0,0,0,.5),inset 0 1px 1px rgba(255,255,255,.1)}.device-speaker{width:40px;height:3px;background:linear-gradient(90deg,#222 0,#333 50%,#222 100%);border-radius:2px;position:absolute;top:16px;left:50%;transform:translateX(20px);box-shadow:inset 0 1px 1px rgba(0,0,0,.5)}.responsive-iframe{border:0;display:block;background:#fff;border-radius:0;box-sizing:border-box;width:var(--iframe-width, 100%);height:var(--iframe-height, 100%);margin:0;padding:0;overflow:auto;min-width:var(--iframe-width, 100%);min-height:var(--iframe-height, 100%);max-width:var(--iframe-width, 100%);max-height:var(--iframe-height, 100%);transform:scale(1);transform-origin:top left;position:relative}.responsive-frame-container.mobile .responsive-iframe{border-radius:0 0 18px 18px}.responsive-frame-container.tablet .responsive-iframe{border-radius:0 0 12px 12px}.responsive-iframe::-webkit-scrollbar{width:12px;height:12px}.responsive-iframe::-webkit-scrollbar-track{background:#f1f1f1;border-radius:6px}.responsive-iframe::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:6px;border:2px solid #f1f1f1}.responsive-iframe::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.responsive-iframe::-webkit-scrollbar-corner{background:#f1f1f1}.responsive-iframe{scrollbar-width:auto;scrollbar-color:#c1c1c1 #f1f1f1}.iframe-wrapper{width:100%;height:100%;overflow:hidden;position:relative;display:flex;flex-direction:column}.responsive-iframe[srcdoc]{zoom:1}.zoom-info{position:absolute;top:20px;right:20px;background:rgba(0,0,0,.8);color:#fff;padding:6px 12px;border-radius:16px;font-size:11px;font-weight:600;font-family:monospace;opacity:0;transform:translateY(-10px);transition:all .3s ease;pointer-events:none;z-index:1000}.zoom-info.show{opacity:1;transform:translateY(0)}@media (max-width:1200px){.responsive-toolbar{flex-direction:column;align-items:stretch;gap:12px;padding:12px 16px}.responsive-brand{justify-content:center;margin-bottom:8px}.responsive-controls{justify-content:center;flex-wrap:wrap}.device-presets-wrapper{min-width:200px}.responsive-status{justify-content:center;flex-wrap:wrap}.responsive-actions{justify-content:center}}@media (max-width:768px){.responsive-toolbar{padding:10px 12px}.responsive-preview-area{padding:15px 8px}.responsive-controls{flex-direction:column;align-items:stretch;gap:10px}.device-presets-wrapper{min-width:auto}.size-inputs{justify-content:center}.input-separator{display:none}.zoom-controls{flex-wrap:wrap;justify-content:center;gap:8px;padding:8px}.zoom-slider-wrapper{border-left:none;border-top:1px solid rgba(67,97,238,.1);padding-left:0;padding-top:8px;margin-left:0;margin-top:6px;width:100%;justify-content:center}.device-actions,.responsive-actions{justify-content:center}.responsive-status{flex-direction:column;gap:8px}}@media (max-width:480px){.responsive-toolbar{padding:8px 10px}.responsive-preview-area{padding:10px 5px}.zoom-controls{flex-direction:column;align-items:center}.size-inputs{flex-direction:column;gap:8px;padding:8px}.responsive-brand{font-size:14px}.action-btn{width:32px;height:32px;font-size:12px}}.responsive-design-container *{box-sizing:border-box}.responsive-frame-container[style*=transform]{position:relative}html{scroll-behavior:smooth}.responsive-iframe[src=""]{background:linear-gradient(90deg,rgba(255,255,255,.1)0,rgba(255,255,255,.2) 50%,rgba(255,255,255,.1) 100%);background-size:200% 100%;animation:loading-shimmer 2s infinite}@keyframes loading-shimmer{0%{background-position:-200%0}to{background-position:200%0}}.responsive-preview-area:focus{outline:3px solid rgba(67,97,238,.4);outline-offset:-3px}@media (prefers-contrast:high){.responsive-toolbar{border-bottom:2px solid #000}.device-selector,.size-inputs,.action-btn,.size-display,.zoom-controls{border-color:#000}}.responsive-preview-area::-webkit-scrollbar{width:12px;height:12px}.responsive-preview-area::-webkit-scrollbar-track{background:rgba(255,255,255,.1);border-radius:6px;margin:4px}.responsive-preview-area::-webkit-scrollbar-thumb{background:rgba(255,255,255,.4);border-radius:6px;border:2px solid transparent;background-clip:content-box;transition:all .3s ease}.responsive-preview-area::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.6);background-clip:content-box}.responsive-preview-area::-webkit-scrollbar-corner{background:0 0}.responsive-preview-area::before{content:"";position:absolute;top:0;left:0;right:0;height:20px;background:linear-gradient(180deg,rgba(0,0,0,.1)0,transparent 100%);pointer-events:none;z-index:100;opacity:0;transition:opacity .3s ease}.responsive-preview-area::after{content:"";position:absolute;bottom:0;left:0;right:0;height:20px;background:linear-gradient(0deg,rgba(0,0,0,.1)0,transparent 100%);pointer-events:none;z-index:100;opacity:0;transition:opacity .3s ease}.responsive-preview-area:hover::before,.responsive-preview-area:hover::after{opacity:1}.zoom-scale-container{transform-origin:center center;transition:transform .4s cubic-bezier(.4,0,.2,1);width:fit-content;height:fit-content;margin:auto;position:relative}.responsive-frame-container{margin:60px auto}.zoom-10 .preview-background{padding:20px}.zoom-25 .preview-background{padding:30px}.zoom-50 .preview-background{padding:40px}.zoom-75 .preview-background{padding:50px}.zoom-100 .preview-background{padding:50px}.zoom-125 .preview-background{padding:60px}.zoom-150 .preview-background{padding:80px}.zoom-175 .preview-background{padding:100px}.zoom-200 .preview-background{padding:120px}.scroll-hint{position:absolute;background:rgba(0,0,0,.7);color:#fff;padding:8px 16px;border-radius:20px;font-size:12px;font-weight:600;z-index:1001;opacity:0;transform:translateY(-10px);transition:all .3s ease;pointer-events:none}.scroll-hint.show{opacity:1;transform:translateY(0)}.scroll-hint.top{top:30px;left:50%;transform:translateX(-50%) translateY(-10px)}.scroll-hint.top.show{transform:translateX(-50%) translateY(0)}.scroll-hint.bottom{bottom:30px;left:50%;transform:translateX(-50%) translateY(10px)}.scroll-hint.bottom.show{transform:translateX(-50%) translateY(0)}.scroll-hint.left{left:30px;top:50%;transform:translateY(-50%) translateX(-10px)}.scroll-hint.left.show{transform:translateY(-50%) translateX(0)}.scroll-hint.right{right:30px;top:50%;transform:translateY(-50%) translateX(10px)}.scroll-hint.right.show{transform:translateY(-50%) translateX(0)}.responsive-design-container{position:fixed;top:0;left:0;width:100vw;height:100vh;background:linear-gradient(135deg,#667eea 0,#764ba2 100%);z-index:9999;display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;overflow:hidden}.responsive-toolbar{background:rgba(255,255,255,.98);backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid rgba(0,0,0,.08);padding:12px 20px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;box-shadow:0 4px 20px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.05);transition:all .3s ease;min-height:auto;flex-shrink:0}.responsive-brand{display:flex;align-items:center;gap:8px;font-weight:700;color:#4361ee;font-size:16px;text-shadow:0 1px 2px rgba(67,97,238,.1);flex-shrink:0}.responsive-brand i{font-size:20px;background:linear-gradient(135deg,#4361ee,#7209b7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.responsive-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;flex:1;min-width:0}.device-presets-wrapper{position:relative;min-width:240px;flex-shrink:0}.device-selector{width:100%;padding:8px 35px 8px 12px;border:2px solid rgba(67,97,238,.1);border-radius:8px;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);font-size:13px;font-weight:600;color:#333;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);appearance:none;box-shadow:0 2px 8px rgba(67,97,238,.08),inset 0 1px 2px rgba(255,255,255,.5)}.device-selector:hover{border-color:rgba(67,97,238,.3);box-shadow:0 4px 16px rgba(67,97,238,.12),inset 0 1px 2px rgba(255,255,255,.5)}.device-selector:focus{outline:0;border-color:#4361ee;box-shadow:0 0 0 3px rgba(67,97,238,.15),0 4px 16px rgba(67,97,238,.12)}.dropdown-icon{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#666;pointer-events:none;transition:transform .3s ease;font-size:12px}.device-selector:focus+.dropdown-icon{transform:translateY(-50%) rotate(180deg)}.size-inputs{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);padding:4px;border-radius:8px;border:2px solid rgba(67,97,238,.1);box-shadow:0 2px 8px rgba(67,97,238,.08),inset 0 1px 2px rgba(255,255,255,.5);transition:all .3s ease;flex-shrink:0}.size-inputs:hover{border-color:rgba(67,97,238,.2);box-shadow:0 4px 12px rgba(67,97,238,.1),inset 0 1px 2px rgba(255,255,255,.5)}.input-group{position:relative;display:flex;align-items:center;background:rgba(255,255,255,.7);border-radius:6px;padding:2px;transition:background .2s ease}.input-group:hover{background:rgba(255,255,255,.9)}.input-group input{width:65px;padding:6px 4px 6px 8px;border:0;background:0 0;font-size:13px;font-weight:700;text-align:center;color:#333;transition:all .2s ease}.input-group input:focus{outline:0;background:rgba(67,97,238,.05);border-radius:4px;color:#4361ee}.input-group label{font-size:9px;color:#666;font-weight:700;margin-left:-12px;text-transform:uppercase;letter-spacing:.5px}.input-separator{color:#ccc;font-weight:900;font-size:14px;margin:0 4px}.btn-apply{background:linear-gradient(135deg,#4361ee,#7209b7);color:#fff;border:0;padding:6px 10px;border-radius:6px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 3px 12px rgba(67,97,238,.3),inset 0 1px 2px rgba(255,255,255,.2)}.btn-apply:hover{background:linear-gradient(135deg,#3651d4,#6308a5);transform:translateY(-1px);box-shadow:0 6px 20px rgba(67,97,238,.4),inset 0 1px 2px rgba(255,255,255,.2)}.device-actions{display:flex;gap:8px;flex-shrink:0}.action-btn{width:36px;height:36px;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border:2px solid rgba(67,97,238,.1);border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#666;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px rgba(67,97,238,.08),inset 0 1px 2px rgba(255,255,255,.5);font-size:14px}.action-btn:hover{background:#fff;border-color:#4361ee;color:#4361ee;transform:translateY(-2px);box-shadow:0 6px 20px rgba(67,97,238,.15),inset 0 1px 2px rgba(255,255,255,.5)}.action-btn.close-btn:hover{background:linear-gradient(135deg,#ff4757,#ff3742);border-color:#ff4757;color:#fff;box-shadow:0 6px 20px rgba(255,71,87,.3),inset 0 1px 2px rgba(255,255,255,.2)}.responsive-status{display:flex;align-items:center;gap:12px;flex-shrink:0}.size-display{background:rgba(255,255,255,.9);backdrop-filter:blur(10px);padding:8px 12px;border-radius:8px;border:2px solid rgba(67,97,238,.1);text-align:center;box-shadow:0 2px 8px rgba(67,97,238,.08),inset 0 1px 2px rgba(255,255,255,.5);transition:all .3s ease;min-width:120px}.size-display:hover{border-color:rgba(67,97,238,.2);transform:translateY(-1px)}.size-display span{display:block;font-family:"SF Mono","Monaco","Cascadia Code",monospace;font-weight:700}#current-size-display{font-size:14px;color:#333;background:linear-gradient(135deg,#4361ee,#7209b7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.device-type{font-size:10px;color:#666;text-transform:uppercase;letter-spacing:1px;font-weight:600;margin-top:2px}.zoom-controls{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);padding:4px;border-radius:8px;border:2px solid rgba(67,97,238,.1);box-shadow:0 2px 8px rgba(67,97,238,.08),inset 0 1px 2px rgba(255,255,255,.5);flex-shrink:0}.zoom-btn{padding:4px 8px;background:0 0;border:0;border-radius:4px;font-size:11px;font-weight:700;color:#666;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);min-width:35px}.zoom-btn:hover{background:rgba(67,97,238,.1);color:#4361ee}.zoom-btn.active{background:linear-gradient(135deg,#4361ee,#7209b7);color:#fff;box-shadow:0 2px 8px rgba(67,97,238,.3),inset 0 1px 2px rgba(255,255,255,.2)}.zoom-slider-wrapper{display:flex;align-items:center;gap:8px;margin-left:8px;padding-left:8px;border-left:1px solid rgba(67,97,238,.1)}#responsive-zoom{width:80px;height:4px;background:rgba(67,97,238,.1);border-radius:2px;outline:0;appearance:none;cursor:pointer;transition:all .2s ease}#responsive-zoom:hover{background:rgba(67,97,238,.2)}#responsive-zoom::-webkit-slider-thumb{appearance:none;width:16px;height:16px;background:linear-gradient(135deg,#4361ee,#7209b7);border-radius:50%;cursor:pointer;box-shadow:0 2px 8px rgba(67,97,238,.3),inset 0 1px 2px rgba(255,255,255,.3);transition:all .2s ease}#responsive-zoom::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 4px 12px rgba(67,97,238,.4),inset 0 1px 2px rgba(255,255,255,.3)}#zoom-display{font-size:11px;font-weight:700;color:#4361ee;min-width:35px;text-align:center;font-family:"SF Mono","Monaco",monospace}.responsive-actions{display:flex;gap:8px;flex-shrink:0}.responsive-preview-area{flex:1;display:flex;justify-content:center;align-items:center;padding:20px;overflow:auto;position:relative;min-height:0;background:radial-gradient(circle at 25% 25%,rgba(255,255,255,.08)0,transparent 60%),radial-gradient(circle at 75% 75%,rgba(255,255,255,.08)0,transparent 60%);scroll-behavior:smooth;min-width:100%;min-height:100%}.preview-background{width:fit-content;height:fit-content;min-width:100%;min-height:100%;display:flex;justify-content:center;align-items:center;position:relative;padding:50px;box-sizing:border-box;overflow:visible}.responsive-frame-container{background:#1a1a1a;border-radius:16px;overflow:hidden;position:relative;transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 20px 40px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.1),inset 0 1px 2px rgba(255,255,255,.05);transform-origin:center center;width:fit-content;height:fit-content;flex-shrink:0;cursor:grab;display:flex;flex-direction:column}.responsive-frame-container:active{cursor:grabbing}.responsive-frame-container.mobile{border-radius:28px;background:linear-gradient(145deg,#000,#1a1a1a);padding:35px 20px 20px 20px;box-shadow:0 25px 50px rgba(0,0,0,.4),0 0 0 2px rgba(255,255,255,.1),inset 0 1px 3px rgba(255,255,255,.1);overflow:hidden}.responsive-frame-container.tablet{border-radius:20px;background:linear-gradient(145deg,#2a2a2a,#1a1a1a);padding:25px 15px 15px 15px;box-shadow:0 22px 44px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.15),inset 0 1px 3px rgba(255,255,255,.1);overflow:hidden}.device-chrome{position:absolute;top:0;left:0;right:0;height:35px;background:linear-gradient(180deg,#000 0,#111 100%);z-index:10;display:none;align-items:center;justify-content:center;border-radius:28px 28px 0 0}.responsive-frame-container.mobile .device-chrome{display:flex}.device-notch{width:120px;height:22px;background:linear-gradient(180deg,#000 0,#111 100%);border-radius:0 0 11px 11px;position:absolute;top:0;left:50%;transform:translateX(-50%);box-shadow:inset 0-1px 2px rgba(255,255,255,.1)}.device-camera{width:8px;height:8px;background:radial-gradient(circle,#333 30%,#000 70%);border-radius:50%;position:absolute;top:13px;left:50%;transform:translateX(-30px);box-shadow:0 1px 2px rgba(0,0,0,.5),inset 0 1px 1px rgba(255,255,255,.1)}.device-speaker{width:40px;height:3px;background:linear-gradient(90deg,#222 0,#333 50%,#222 100%);border-radius:2px;position:absolute;top:16px;left:50%;transform:translateX(20px);box-shadow:inset 0 1px 1px rgba(0,0,0,.5)}.responsive-iframe{border:0;display:block;background:#fff;border-radius:0;box-sizing:border-box;width:var(--iframe-width, 100%);height:var(--iframe-height, 100%);margin:0;padding:0;overflow:auto;min-width:var(--iframe-width, 100%);min-height:var(--iframe-height, 100%);max-width:var(--iframe-width, 100%);max-height:var(--iframe-height, 100%);transform:scale(1);transform-origin:top left;position:relative}.responsive-frame-container.mobile .responsive-iframe{border-radius:0 0 18px 18px}.responsive-frame-container.tablet .responsive-iframe{border-radius:0 0 12px 12px}.responsive-iframe::-webkit-scrollbar{width:12px;height:12px}.responsive-iframe::-webkit-scrollbar-track{background:#f1f1f1;border-radius:6px}.responsive-iframe::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:6px;border:2px solid #f1f1f1}.responsive-iframe::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.responsive-iframe::-webkit-scrollbar-corner{background:#f1f1f1}.responsive-iframe{scrollbar-width:auto;scrollbar-color:#c1c1c1 #f1f1f1}.iframe-wrapper{width:100%;height:100%;overflow:hidden;position:relative;display:flex;flex-direction:column}.responsive-iframe[srcdoc]{zoom:1}.zoom-info{position:absolute;top:20px;right:20px;background:rgba(0,0,0,.8);color:#fff;padding:6px 12px;border-radius:16px;font-size:11px;font-weight:600;font-family:monospace;opacity:0;transform:translateY(-10px);transition:all .3s ease;pointer-events:none;z-index:1000}.zoom-info.show{opacity:1;transform:translateY(0)}@media (max-width:1200px){.responsive-toolbar{flex-direction:column;align-items:stretch;gap:12px;padding:12px 16px}.responsive-brand{justify-content:center;margin-bottom:8px}.responsive-controls{justify-content:center;flex-wrap:wrap}.device-presets-wrapper{min-width:200px}.responsive-status{justify-content:center;flex-wrap:wrap}.responsive-actions{justify-content:center}}@media (max-width:768px){.responsive-toolbar{padding:10px 12px}.responsive-preview-area{padding:15px 8px}.responsive-controls{flex-direction:column;align-items:stretch;gap:10px}.device-presets-wrapper{min-width:auto}.size-inputs{justify-content:center}.input-separator{display:none}.zoom-controls{flex-wrap:wrap;justify-content:center;gap:8px;padding:8px}.zoom-slider-wrapper{border-left:none;border-top:1px solid rgba(67,97,238,.1);padding-left:0;padding-top:8px;margin-left:0;margin-top:6px;width:100%;justify-content:center}.device-actions,.responsive-actions{justify-content:center}.responsive-status{flex-direction:column;gap:8px}}@media (max-width:480px){.responsive-toolbar{padding:8px 10px}.responsive-preview-area{padding:10px 5px}.zoom-controls{flex-direction:column;align-items:center}.size-inputs{flex-direction:column;gap:8px;padding:8px}.responsive-brand{font-size:14px}.action-btn{width:32px;height:32px;font-size:12px}}.responsive-design-container *{box-sizing:border-box}.responsive-frame-container[style*=transform]{position:relative}html{scroll-behavior:smooth}.responsive-iframe[src=""]{background:linear-gradient(90deg,rgba(255,255,255,.1)0,rgba(255,255,255,.2) 50%,rgba(255,255,255,.1) 100%);background-size:200% 100%;animation:loading-shimmer 2s infinite}@keyframes loading-shimmer{0%{background-position:-200%0}to{background-position:200%0}}.responsive-preview-area:focus{outline:3px solid rgba(67,97,238,.4);outline-offset:-3px}@media (prefers-contrast:high){.responsive-toolbar{border-bottom:2px solid #000}.device-selector,.size-inputs,.action-btn,.size-display,.zoom-controls{border-color:#000}}.responsive-preview-area::-webkit-scrollbar{width:12px;height:12px}.responsive-preview-area::-webkit-scrollbar-track{background:rgba(255,255,255,.1);border-radius:6px;margin:4px}.responsive-preview-area::-webkit-scrollbar-thumb{background:rgba(255,255,255,.4);border-radius:6px;border:2px solid transparent;background-clip:content-box;transition:all .3s ease}.responsive-preview-area::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.6);background-clip:content-box}.responsive-preview-area::-webkit-scrollbar-corner{background:0 0}.responsive-preview-area::before{content:"";position:absolute;top:0;left:0;right:0;height:20px;background:linear-gradient(180deg,rgba(0,0,0,.1)0,transparent 100%);pointer-events:none;z-index:100;opacity:0;transition:opacity .3s ease}.responsive-preview-area::after{content:"";position:absolute;bottom:0;left:0;right:0;height:20px;background:linear-gradient(0deg,rgba(0,0,0,.1)0,transparent 100%);pointer-events:none;z-index:100;opacity:0;transition:opacity .3s ease}.responsive-preview-area:hover::before,.responsive-preview-area:hover::after{opacity:1}.zoom-scale-container{transform-origin:center center;transition:transform .4s cubic-bezier(.4,0,.2,1);width:fit-content;height:fit-content;margin:auto;position:relative}.responsive-frame-container{margin:60px auto;position:relative;z-index:1}.responsive-frame-container[style*="scale(2)"],.responsive-frame-container[style*="scale(1.75)"],.responsive-frame-container[style*="scale(1.5)"],.responsive-frame-container[style*="scale(1.25)"]{margin:100px auto}.responsive-frame-container[style*="scale(0.75)"],.responsive-frame-container[style*="scale(0.5)"],.responsive-frame-container[style*="scale(0.25)"]{margin:40px auto}.zoom-10 .preview-background{padding:20px;min-width:150%;min-height:150%}.zoom-25 .preview-background{padding:30px;min-width:130%;min-height:130%}.zoom-50 .preview-background{padding:40px;min-width:120%;min-height:120%}.zoom-75 .preview-background{padding:50px;min-width:110%;min-height:110%}.zoom-100 .preview-background{padding:50px;min-width:100%;min-height:100%}.zoom-125 .preview-background{padding:80px;min-width:200%;min-height:200%}.zoom-150 .preview-background{padding:120px;min-width:250%;min-height:250%}.zoom-175 .preview-background{padding:160px;min-width:300%;min-height:300%}.zoom-200 .preview-background{padding:200px;min-width:350%;min-height:350%}.iframe-container{width:100%;height:100%;overflow:hidden;display:flex;position:relative}.responsive-iframe[srcdoc*=html],.responsive-iframe[src]{object-fit:contain;object-position:center center}.scroll-hint{position:absolute;background:rgba(0,0,0,.7);color:#fff;padding:8px 16px;border-radius:20px;font-size:12px;font-weight:600;z-index:1001;opacity:0;transform:translateY(-10px);transition:all .3s ease;pointer-events:none}.scroll-hint.show{opacity:1;transform:translateY(0)}.scroll-hint.top{top:30px;left:50%;transform:translateX(-50%) translateY(-10px)}.scroll-hint.top.show{transform:translateX(-50%) translateY(0)}.scroll-hint.bottom{bottom:30px;left:50%;transform:translateX(-50%) translateY(10px)}.scroll-hint.bottom.show{transform:translateX(-50%) translateY(0)}.scroll-hint.left{left:30px;top:50%;transform:translateY(-50%) translateX(-10px)}.scroll-hint.left.show{transform:translateY(-50%) translateX(0)}.scroll-hint.right{right:30px;top:50%;transform:translateY(-50%) translateX(10px)}.scroll-hint.right.show{transform:translateY(-50%) translateX(0)}.btn-tutorial{background:linear-gradient(135deg,#667eea 0,#764ba2 100%);color:#fff!important;border:0;padding:10px 16px;border-radius:8px;font-weight:600;transition:all .3s ease;position:relative;overflow:hidden;box-shadow:0 4px 15px rgba(102,126,234,.3);text-decoration:none;display:inline-flex;align-items:center;gap:8px}.btn-tutorial:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(102,126,234,.5);text-decoration:none;color:#fff!important}.btn-tutorial::before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.btn-tutorial:hover::before{left:100%}.tutorial-pulse{animation:tutorial-pulse 2s infinite}@keyframes tutorial-pulse{0%{box-shadow:0 4px 15px rgba(102,126,234,.3)}50%{box-shadow:0 4px 25px rgba(102,126,234,.6)}to{box-shadow:0 4px 15px rgba(102,126,234,.3)}}#btn-responsive-mode{width:auto!important;height:auto!important;display:inline-flex!important;align-items:center;justify-content:center;gap:8px;padding:8px 16px!important;background:linear-gradient(to bottom,#f5f5f5 0,#f1f1f1 50%,#e6e6e6 51%,#d4d4d4 100%);border:1px solid #c6c6c6;border-radius:2px;color:#333;font-family:arial,sans-serif;font-size:13px;font-weight:700;text-shadow:0 1px 0#fff;box-shadow:0 1px 1px rgba(0,0,0,.1);cursor:pointer;transition:all .1s ease;white-space:nowrap;overflow:visible}#btn-responsive-mode:hover{background:linear-gradient(to bottom,#f8f8f8 0,#f4f4f4 50%,#e9e9e9 51%,#d7d7d7 100%);border-color:#b0b0b0;box-shadow:0 1px 2px rgba(0,0,0,.15)}#btn-responsive-mode:active{background:linear-gradient(to bottom,#e8e8e8 0,#e4e4e4 50%,#d9d9d9 51%,#c7c7c7 100%);border-color:#a0a0a0;box-shadow:inset 0 1px 2px rgba(0,0,0,.1);transform:none}#btn-responsive-mode .btn-text{display:inline-block;font-size:inherit;font-weight:inherit;color:inherit;white-space:nowrap}#btn-responsive-mode i{font-size:14px;color:#666;flex-shrink:0}#btn-responsive-mode::after{content:"►";font-size:12px;color:#666;margin-left:2px;transition:transform .1s ease;flex-shrink:0}#btn-responsive-mode:hover::after{transform:translateX(2px)}#btn-responsive-mode.btn-icon{width:auto!important;height:auto!important;padding:8px 16px!important;background:linear-gradient(to bottom,#f5f5f5 0,#f1f1f1 50%,#e6e6e6 51%,#d4d4d4 100%)!important}.unsaved-indicator{position:fixed;top:10px;right:10px;background:#ffc107;color:#212529;padding:8px 12px;border-radius:6px;font-size:14px;font-weight:600;box-shadow:0 2px 8px rgba(0,0,0,.2);z-index:9999;opacity:0;transform:translateY(-10px);transition:all .3s ease}.unsaved-indicator.show{opacity:1;transform:translateY(0)}.tab.modified{position:relative}.tab.modified::after{content:"●";color:#ff6b6b;font-size:12px;position:absolute;top:2px;right:20px;animation:modifiedPulse 1.5s ease-in-out infinite}.tab.active.modified::after{color:var(--primary-color);font-size:14px;animation:activeModifiedPulse 1.5s ease-in-out infinite}@keyframes modifiedPulse{0%,to{opacity:.6}50%{opacity:1}}@keyframes activeModifiedPulse{0%,to{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.2)}}.tab-bar{background:var(--panel);border-bottom:2px solid var(--border);position:relative}.tab-bar::before{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--border) 0%,var(--primary-color) 50%,var(--border) 100%);opacity:.3}.new-tab-button{opacity:.5;transition:all .3s ease}.new-tab-button:hover{opacity:.8;transform:scale(1.05)}.tab-content{position:relative}.editor-instance{opacity:.95;transition:opacity .3s ease}.editor-instance.active{opacity:1}.format-modal-redesigned{max-width:700px;width:90vw;max-height:90vh;overflow-y:auto}.format-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:25px 30px;border-radius:12px 12px 0 0;display:flex;align-items:center;justify-content:space-between}.format-header-content{display:flex;align-items:center;gap:15px}.format-icon-wrapper{width:50px;height:50px;background:rgba(255,255,255,.2);border-radius:12px;display:flex;align-items:center;justify-content:center}.format-icon{color:#fff}.format-title-section h3{margin:0;font-size:1.5rem;font-weight:600}.format-subtitle{margin:5px 0 0 0;opacity:.9;font-size:.95rem}.format-close{background:rgba(255,255,255,.2);border:0;color:#fff;width:36px;height:36px;border-radius:8px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.format-close:hover{background:rgba(255,255,255,.3)}.format-body{padding:30px}.format-option{display:flex;align-items:flex-start;gap:12px;padding:15px;margin-bottom:12px;background:var(--panel, #f8f9fa);border:1px solid var(--border, #e9ecef);border-radius:8px;cursor:pointer;transition:all .2s ease}.format-option:hover{background:rgba(67,97,238,.05);border-color:rgba(67,97,238,.2)}.format-option input[type=checkbox]{margin:0;transform:scale(1.2)}.option-content{flex:1}.option-text{font-weight:600;color:var(--text, #333);display:block;margin-bottom:4px}.option-desc{font-size:.85rem;color:var(--text-secondary, #666);opacity:.8}.format-footer{padding:20px 30px;background:var(--panel, #f8f9fa);border-radius:0 0 12px 12px;display:flex;gap:12px;justify-content:flex-end}.format-btn-secondary{background:var(--background, #fff);color:var(--text, #333);border:1px solid var(--border, #ddd)}.format-btn-preview{background:#17a2b8;color:#fff;border:0}.format-btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:0}.format-btn-preview:hover{background:#138496}.format-btn-primary:hover{background:linear-gradient(135deg,#5a6fd8,#6a4190)}.theme-dark .format-option{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}.theme-dark .format-option:hover{background:rgba(67,97,238,.1);border-color:rgba(67,97,238,.3)}.theme-dark .option-text{color:#fff}.theme-dark .option-desc{color:#ccc}.format-range-options{margin-top:20px;padding:15px;background:rgba(102,126,234,.05);border-radius:8px;border:1px solid rgba(102,126,234,.1)}.theme-dark .format-range-options{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}.option-content{display:flex;flex-direction:column;gap:4px}.option-desc{font-size:.85rem;opacity:.7;line-height:1.3}.form-group{margin-bottom:15px}.form-group label{display:block;margin-bottom:5px;font-weight:600;color:var(--text)}.form-control{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:4px;background:var(--background);color:var(--text);font-size:14px}.form-text{font-size:.8rem;color:var(--text);opacity:.7;margin-top:4px;display:block}.preset-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.preset-pill{display:flex;align-items:center;gap:6px;padding:8px 12px;background:var(--panel);border:1px solid var(--border);border-radius:20px;cursor:pointer;transition:all .2s ease;font-size:.85rem;font-weight:500}.preset-pill:hover{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.preset-pill-active{background:var(--primary-color)!important;color:#fff!important;border-color:var(--primary-color)!important}.preset-pill svg{width:14px;height:14px}.options-tabs{display:flex;margin-bottom:20px;border-bottom:1px solid var(--border)}.option-tab{padding:10px 16px;background:0 0;border:0;cursor:pointer;transition:all .2s ease;position:relative;color:var(--text);opacity:.7}.option-tab-active{opacity:1;color:var(--primary-color)}.option-tab-active::after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--primary-color)}.options-panel{display:none}.options-panel-active{display:block}.format-option{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid rgba(0,0,0,.05);cursor:pointer}.theme-dark .format-option{border-bottom-color:rgba(255,255,255,.05)}.format-option:last-child{border-bottom:none}.format-option input[type=checkbox]{margin:0;flex-shrink:0;margin-top:2px}.format-option:hover{background:rgba(102,126,234,.05);margin:0-15px;padding-left:15px;padding-right:15px;border-radius:4px}.theme-dark .format-option:hover{background:rgba(255,255,255,.05)}@media (max-width:768px){.preset-pills{justify-content:center}.preset-pill{font-size:.8rem;padding:6px 10px}.options-tabs{overflow-x:auto;white-space:nowrap}.option-tab{flex-shrink:0;padding:8px 12px;font-size:.9rem}}.format-preview-container{margin:20px 0;border:1px solid var(--border);border-radius:var(--border-radius);background:var(--panel);display:none}.format-preview-header{padding:12px 16px;border-bottom:1px solid var(--border);background:var(--background);display:flex;align-items:center;justify-content:space-between;font-weight:600;color:var(--text)}.format-preview-tabs{display:flex;gap:8px}.format-preview-tab{padding:6px 12px;border:1px solid var(--border);border-radius:4px;background:var(--panel);color:var(--text);cursor:pointer;font-size:.85rem;transition:all .2s ease}.format-preview-tab.active{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.format-preview-content{padding:16px;max-height:300px;overflow-y:auto}.format-preview-code{background:var(--background);border:1px solid var(--border);border-radius:4px;padding:12px;font-family:"Courier New",Courier,monospace;font-size:.85rem;line-height:1.4;color:var(--text);white-space:pre-wrap;overflow-x:auto;min-height:100px;max-height:200px}.format-stats{display:flex;gap:20px;margin-top:12px;font-size:.85rem;color:var(--text-secondary, var(--text))}.format-stat{display:flex;align-items:center;gap:6px}.format-stat i{color:var(--primary-color)}
  

/* Enhanced checkboxes - using theme variables */
.format-option input[type="checkbox"],
.minify-option input[type="checkbox"],
.obfuscate-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    margin-right: 12px;
    flex-shrink: 0;
    accent-color: var(--primary-color);
    transition: transform 0.2s ease;
}

.format-option input[type="checkbox"]:hover,
.minify-option input[type="checkbox"]:hover,
.obfuscate-option input[type="checkbox"]:hover {
    transform: scale(1.08);
}

/* Enhanced option labels - respects theme colors */
.format-option label,
.minify-option label,
.obfuscate-option label {
    transition: all 0.2s ease;
}

.format-option:hover,
.minify-option:hover,
.obfuscate-option:hover {
    background: rgba(67, 97, 238, 0.05);
    border-color: var(--primary-color);
    transform: translateX(2px);
}

/* Dark theme hover states */
.theme-dark .format-option:hover,
.theme-dark .minify-option:hover,
.theme-dark .obfuscate-option:hover {
    background: rgba(76, 201, 240, 0.1);
    border-color: var(--primary-color);
}

/* Checked state feedback - using theme text color */
.format-option input[type="checkbox"]:checked ~ .option-content .option-text,
.minify-option input[type="checkbox"]:checked ~ .option-content .option-text,
.obfuscate-option input[type="checkbox"]:checked ~ .option-content .option-text {
    color: var(--primary-color);
    font-weight: 600;
}

/* Enhanced tabs - using existing variables */
.option-tab {
    transition: all 0.2s ease;
}

.option-tab:hover:not(.option-tab-active) {
    background: var(--panel);
    color: var(--primary-color);
}

/* Enhanced preset pills - using theme variables */
.preset-pill {
    transition: all 0.25s ease;
}

.preset-pill:hover:not(.preset-pill-active) {
    background: var(--panel);
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.theme-dark .preset-pill:hover:not(.preset-pill-active) {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.preset-pill.preset-pill-active {
    transform: translateY(0);
}

/* Enhanced section headers */
.section-header {
    padding-bottom: 12px;
    border-bottom: 2px solid var(--border);
}

.section-icon {
    color: var(--primary-color);
}

/* Enhanced info cards - using theme variables */
.format-info-card,
.minify-info-card,
.obfuscate-info-card {
    background: var(--panel);
    border: 2px solid var(--border);
    transition: all 0.2s ease;
}

.format-info-card:hover,
.minify-info-card:hover,
.obfuscate-info-card:hover {
    border-color: var(--primary-color);
}

.info-card-icon {
    background: var(--background);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.theme-dark .info-card-icon {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.info-card-icon svg {
    color: var(--primary-color);
}

/* Enhanced form controls - using theme variables */
.form-control:hover {
    border-color: var(--primary-color);
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
}

.theme-dark .form-control:focus {
    box-shadow: 0 0 0 3px rgba(76, 201, 240, 0.15);
}

/* Enhanced backup option - using accent colors */
.backup-option {
    background: rgba(255, 209, 102, 0.1);
    border: 2px solid var(--accent-warning);
}

.theme-dark .backup-option {
    background: rgba(255, 209, 102, 0.05);
}

/* Enhanced size analysis - using accent colors */
.minify-preview-card,
.obfuscate-preview-card {
    background: rgba(6, 214, 160, 0.05);
    border: 2px solid var(--accent-success);
}

.theme-dark .minify-preview-card,
.theme-dark .obfuscate-preview-card {
    background: rgba(6, 214, 160, 0.08);
}

.size-item {
    background: var(--background);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.theme-dark .size-item {
    background: var(--panel);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.reduction-badge,
.protection-level {
    background: var(--background);
    color: var(--accent-success);
    box-shadow: 0 2px 8px rgba(6, 214, 160, 0.2);
}

.theme-dark .reduction-badge,
.theme-dark .protection-level {
    background: var(--panel);
}

/* Enhanced modal buttons - using theme variables */
.format-btn-primary:hover,
.minify-btn-primary:hover,
.obfuscate-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.theme-dark .format-btn-primary:hover,
.theme-dark .minify-btn-primary:hover,
.theme-dark .obfuscate-btn-primary:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.format-btn-preview,
.minify-btn-preview,
.obfuscate-btn-preview {
    transition: all 0.2s ease;
}

.format-btn-preview:hover,
.minify-btn-preview:hover,
.obfuscate-btn-preview:hover {
    transform: translateY(-1px);
}

.format-btn-secondary:hover,
.minify-btn-secondary:hover,
.obfuscate-btn-secondary:hover {
    background: var(--panel);
}

/* Focus indicators for accessibility */
.format-option input[type="checkbox"]:focus,
.minify-option input[type="checkbox"]:focus,
.obfuscate-option input[type="checkbox"]:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Option input/select groups */
.option-input-group,
.option-select-group {
    background: var(--panel);
    border-left: 3px solid var(--primary-color);
}

/* CSS info message */
.css-info-message {
    background: rgba(67, 97, 238, 0.05);
    border: 1px solid var(--primary-color);
}

.theme-dark .css-info-message {
    background: rgba(76, 201, 240, 0.08);
}

.css-info-message svg {
    color: var(--primary-color);
}

.css-info-message p {
    color: var(--text);
}

/* Responsive improvements */
@media (max-width: 768px) {
    .format-option input[type="checkbox"],
    .minify-option input[type="checkbox"],
    .obfuscate-option input[type="checkbox"] {
        width: 20px;
        height: 20px;
    }
}
/* ===================================
   MINIFY MODAL UI ENHANCEMENTS
   - Compact header like formatter modal
   - Better footer layout without cut-off buttons
   - No scrolling in options section
   - Clean, professional design
   =================================== */

/* HEADER IMPROVEMENTS - More Compact */
.minify-modal-redesigned {
    max-width: 720px;
    width: 90%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.minify-header {
    padding: 0;
    min-height: auto;
    flex-shrink: 0;
}

.minify-header-content {
    padding: 16px 20px; /* Reduced from 24px */
    gap: 12px;
}

.minify-icon-wrapper {
    width: 40px; /* Reduced from 48px */
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}

.minify-header .modal-title {
    font-size: 20px; /* Reduced from 24px */
    margin: 0;
}

.minify-subtitle {
    font-size: 13px; /* Reduced from 14px */
    margin: 2px 0 0 0;
}

/* BODY IMPROVEMENTS - Remove internal scrolling */
.minify-body {
    padding: 20px 24px;
    overflow-y: auto;
    max-height: calc(90vh - 180px); /* Account for compact header and footer */
    flex: 1;
    min-height: 0;
}

/* INFO CARD - More Compact */
.minify-info-card {
    padding: 12px 16px; /* Reduced from 16px */
    margin-bottom: 20px;
}

.info-card-icon {
    width: 36px; /* Reduced from 40px */
    height: 36px;
}

/* PRESETS - More Compact */
.minify-presets {
    margin-bottom: 20px;
}

.preset-label {
    font-size: 13px;
    margin-bottom: 10px;
}

.preset-pills {
    gap: 8px;
}

.preset-pill {
    padding: 6px 12px; /* Reduced from 8px 16px */
    font-size: 13px;
}

/* OPTIONS CONTAINER - Remove scrolling, better layout */
.minify-options-container {
    margin-bottom: 20px;
}

.options-section-card {
    overflow: visible; /* Remove overflow from card */
}

.section-header {
    padding: 16px; /* Reduced from 20px */
}

.section-title {
    font-size: 16px; /* Reduced from 18px */
}

/* TABS - More Compact */
.options-tabs {
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.theme-dark .options-tabs {
    background: #1e1e1e;
    border-bottom-color: #5f6368;
}

.option-tab {
    padding: 10px 14px; /* Reduced from 12px 16px */
    font-size: 13px; /* Reduced from 14px */
    flex-shrink: 0;
}

/* OPTIONS CONTENT - Remove internal scrolling */
.options-content {
    padding: 16px; /* Reduced from 20px */
    max-height: 320px; /* Set maximum height */
    overflow-y: auto; /* Add scrolling here instead */
    overflow-x: hidden;
}

/* Scrollbar styling for options content */
.options-content::-webkit-scrollbar {
    width: 6px;
}

.options-content::-webkit-scrollbar-track {
    background: transparent;
}

.options-content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.theme-dark .options-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}

.options-content::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

.theme-dark .options-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* OPTIONS - More Compact */
.minify-option {
    padding: 10px 0; /* Reduced from 12px 0 */
}

.minify-option input[type="checkbox"] {
    width: 16px; /* Reduced from 18px */
    height: 16px;
    margin-right: 10px;
}

.option-text {
    font-size: 13px; /* Reduced from 14px */
}

.option-desc {
    font-size: 11px; /* Reduced from 12px */
}

/* CSS INFO MESSAGE - More Compact */
.css-info-message {
    padding: 12px; /* Reduced from 16px */
    margin-bottom: 16px;
}

.css-info-message p {
    font-size: 13px;
}

/* BACKUP OPTION - More Compact */
.backup-option {
    padding: 12px; /* Reduced from 16px */
    margin-bottom: 20px;
}

.backup-option input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

.backup-content {
    font-size: 13px;
}

/* PREVIEW CARD - More Compact */
.minify-preview-card {
    padding: 16px; /* Reduced from 20px */
    margin-bottom: 20px;
}

.preview-header {
    margin-bottom: 12px;
    font-size: 13px;
}

.size-label {
    font-size: 11px;
}

.size-value {
    font-size: 18px; /* Reduced from 20px */
}

.reduction-badge {
    font-size: 20px; /* Reduced from 24px */
    padding: 4px 12px;
}

/* FOOTER IMPROVEMENTS - Proper Layout Like Formatter */
.minify-footer {
    background: #f8f9fa;
    border-top: 1px solid #e0e0e0;
    padding: 14px 20px; /* Reduced from 16px 24px */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    min-height: 60px; /* Ensure minimum height */
}

.theme-dark .minify-footer {
    background: #1e1e1e;
    border-top-color: #5f6368;
}

.minify-btn-secondary,
.minify-btn-preview,
.minify-btn-primary {
    padding: 8px 20px; /* Reduced from 10px 24px */
    border-radius: 20px;
    font-weight: 500;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.minify-btn-secondary {
    background: transparent;
    color: #5f6368;
    border: 1px solid #dadce0;
}

.theme-dark .minify-btn-secondary {
    border-color: #5f6368;
    color: #e8eaed;
}

.minify-btn-preview {
    background: #fff;
    color: #1a73e8;
    border: 1px solid #1a73e8;
}

.theme-dark .minify-btn-preview {
    background: transparent;
    color: #8ab4f8;
    border-color: #8ab4f8;
}

.minify-btn-primary {
    background: #1a73e8;
    color: #fff;
    border: none;
    padding: 8px 24px; /* Slightly wider for primary */
}

.minify-btn-primary svg,
.minify-btn-preview svg {
    width: 16px;
    height: 16px;
}

/* RESPONSIVE IMPROVEMENTS */
@media (max-width: 600px) {
    .minify-modal-redesigned {
        width: 100%;
        height: 100%;
        max-height: 100vh;
        border-radius: 0;
    }

    .minify-body {
        max-height: calc(100vh - 160px);
    }

    .minify-footer {
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px 16px;
    }

    .minify-btn-secondary,
    .minify-btn-preview,
    .minify-btn-primary {
        flex: 1 1 auto;
        min-width: 100px;
        justify-content: center;
    }

    .options-tabs {
        overflow-x: auto;
    }
}

/* ENSURE NO DOUBLE SCROLLBARS */
.minify-options-group {
    max-height: none !important; /* Remove any max-height */
    overflow: visible !important; /* Remove any overflow */
    padding-right: 0 !important;
}

/* Specific fixes for different panels */
.options-panel {
    overflow: visible;
}

/* Remove any conflicting scrollbar rules */
.minify-options-group::-webkit-scrollbar {
    display: none !important;
}

/* ANIMATION */
.minify-modal-redesigned {
    animation: slideUpSmooth 0.3s ease-out;
}

@keyframes slideUpSmooth {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Dark theme specific adjustments */
.theme-dark .minify-modal-redesigned {
    background: #1e1e1e;
}

.theme-dark .minify-info-card {
    background: #2d2d2d;
}

.theme-dark .info-card-icon {
    background: #1a73e8;
    color: #fff;
}

.theme-dark .info-label {
    color: #9aa0a6;
}

.theme-dark .info-value {
    color: #e8eaed;
}

.theme-dark .preset-label {
    color: #9aa0a6;
}

.theme-dark .preset-pill {
    background: #2d2d2d;
    border-color: #5f6368;
    color: #e8eaed;
}

.theme-dark .preset-pill:hover {
    background: #3c4043;
}

.theme-dark .preset-pill-active {
    background: #1a73e8;
    color: #fff;
}

.theme-dark .options-section-card {
    background: #2d2d2d;
    border-color: #5f6368;
}

.theme-dark .section-header {
    border-bottom-color: #5f6368;
}

.theme-dark .section-title {
    color: #e8eaed;
}

.theme-dark .option-text {
    color: #e8eaed;
}

.theme-dark .option-desc {
    color: #9aa0a6;
}

.theme-dark .css-info-message {
    background: rgba(26, 115, 232, 0.2);
}

.theme-dark .css-info-message p {
    color: #e8eaed;
}

.theme-dark .backup-option {
    background: #2d2d2d;
}

.theme-dark .backup-option:hover {
    background: #3c4043;
}

.theme-dark .backup-content {
    color: #e8eaed;
}

.theme-dark .minify-preview-card {
    background: linear-gradient(135deg, #2d2d2d 0%, #1e1e1e 100%);
}

.theme-dark .preview-header {
    color: #9aa0a6;
}

.theme-dark .size-label {
    color: #9aa0a6;
}

.theme-dark .size-value {
    color: #e8eaed;
}

/* ================================================
   SEO-ENHANCED SECTIONS STYLES
   ================================================ */

/* FAQ Section */
.seo-faq {
  max-width: 900px;
  margin: 60px auto;
  padding: 0 20px;
}

.seo-faq h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 40px;
  color: var(--text);
}

.faq-container {
  max-width: 100%;
}

.faq-item {
  margin-bottom: 15px;
  border: 2px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  background: var(--panel);
}

.faq-item:hover {
  border-color: var(--primary-color);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

.faq-question {
  padding: 20px 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 15px;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--text);
  transition: all 0.3s ease;
  user-select: none;
}

.faq-question:hover {
  background: var(--primary-color);
  color: #fff;
}

.faq-icon {
  font-size: 0.9rem;
  transition: transform 0.3s ease;
  color: var(--primary-color);
  flex-shrink: 0;
}

.faq-question:hover .faq-icon {
  color: #fff;
}

.faq-item.active .faq-icon {
  transform: rotate(90deg);
}

.faq-answer {
  padding: 0 24px;
  background: var(--background);
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-item.active .faq-answer {
  padding: 24px;
  max-height: 1000px;
}

.faq-answer p {
  margin: 0;
  line-height: 1.7;
  color: var(--text);
}

/* Comparison Section */
.seo-comparison {
  max-width: 1200px;
  margin: 60px auto;
  padding: 0 20px;
}

.seo-comparison h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 30px;
  color: var(--text);
}

.comparison-intro {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 40px;
  font-size: 1.1rem;
  color: var(--text-secondary);
}

.comparison-table-container {
  overflow-x: auto;
  margin: 40px 0;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel);
  min-width: 600px;
}

.comparison-table thead {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: #fff;
}

.comparison-table th {
  padding: 18px 16px;
  text-align: left;
  font-weight: 600;
  font-size: 1rem;
}

.comparison-table th:first-child {
  border-top-left-radius: 12px;
}

.comparison-table th:last-child {
  border-top-right-radius: 12px;
}

.comparison-table td {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

.comparison-table tbody tr:hover {
  background: rgba(102, 126, 234, 0.05);
}

.comparison-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 12px;
}

.comparison-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 12px;
}

.feature-yes {
  color: var(--accent-success);
  font-weight: 600;
}

.feature-no {
  color: var(--accent-danger);
  font-weight: 600;
}

.feature-partial {
  color: var(--accent-warning);
  font-weight: 600;
}

.comparison-summary {
  margin-top: 50px;
  padding: 30px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
  border-radius: 12px;
  border-left: 4px solid var(--primary-color);
}

.comparison-summary h3 {
  color: var(--primary-color);
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 1.5rem;
}

.comparison-summary ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.comparison-summary li {
  padding: 12px 0;
  padding-left: 30px;
  position: relative;
  line-height: 1.6;
  color: var(--text);
}

.comparison-summary li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent-success);
  font-weight: bold;
  font-size: 1.2rem;
}

.comparison-summary strong {
  color: var(--primary-color);
}

/* Detailed Features Section */
.seo-detailed-features {
  max-width: 1100px;
  margin: 60px auto;
  padding: 0 20px;
}

.seo-detailed-features h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 50px;
  color: var(--text);
}

.feature-category {
  margin-bottom: 40px;
  padding: 30px;
  background: var(--panel);
  border-radius: 12px;
  border-left: 4px solid var(--primary-color);
  transition: all 0.3s ease;
}

.feature-category:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.15);
}

.feature-category h3 {
  color: var(--primary-color);
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 1.4rem;
}

.feature-category ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-category li {
  padding: 10px 0;
  padding-left: 28px;
  position: relative;
  line-height: 1.6;
  color: var(--text);
}

.feature-category li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--primary-color);
  font-size: 1.2rem;
}

.feature-category strong {
  color: var(--text);
  font-weight: 600;
}

/* Getting Started Section */
.seo-getting-started {
  max-width: 1000px;
  margin: 60px auto;
  padding: 0 20px;
}

.seo-getting-started h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 50px;
  color: var(--text);
}

.steps-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.step-item {
  display: flex;
  align-items: flex-start;
  gap: 25px;
  padding: 25px;
  background: var(--panel);
  border-radius: 12px;
  border: 2px solid var(--border);
  transition: all 0.3s ease;
}

.step-item:hover {
  border-color: var(--primary-color);
  transform: translateX(10px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.15);
}

.step-number {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
}

.step-content h3 {
  margin: 0 0 10px 0;
  color: var(--text);
  font-size: 1.3rem;
}

.step-content p {
  margin: 0;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Responsive Design */
@media (max-width: 768px) {
  .seo-faq h2,
  .seo-comparison h2,
  .seo-detailed-features h2,
  .seo-getting-started h2 {
    font-size: 1.6rem;
  }

  .faq-question {
    font-size: 1rem;
    padding: 16px 18px;
  }

  .comparison-table th,
  .comparison-table td {
    padding: 12px 10px;
    font-size: 0.9rem;
  }

  .comparison-summary {
    padding: 20px;
  }

  .feature-category {
    padding: 20px;
  }

  .step-item {
    flex-direction: column;
    padding: 20px;
  }

  .step-number {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
}

@media (max-width: 480px) {
  .seo-faq h2,
  .seo-comparison h2,
  .seo-detailed-features h2,
  .seo-getting-started h2 {
    font-size: 1.4rem;
    margin-bottom: 30px;
  }

  .comparison-table th,
  .comparison-table td {
    padding: 10px 8px;
    font-size: 0.85rem;
  }

  .comparison-summary li,
  .feature-category li {
    font-size: 0.95rem;
  }
}

/* Reduce CLS by keeping the main app in the layout while the launcher overlays it */
.app-container {
  display: grid !important;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.app-container.app-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.995);
}

.app-container.app-visible {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

/* ========================================
   CSS Updates for Landing Cards Fix
   Add this to your main stylesheet
   ======================================== */

/* Landing Card - Make entire card clickable with nested link */
.landing-card {
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Ensure the anchor inside the title is styled properly */
.landing-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

/* Create a stretched pseudo-element to make entire card clickable */
.landing-card-title a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

/* Hover effects for the card */
.landing-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* Underline the title text on hover */
.landing-card:hover .landing-card-title a {
  text-decoration: underline;
  color: var(--primary-color, #4361ee);
}

/* Ensure other card elements are accessible */
.landing-card-icon,
.landing-card-text {
  position: relative;
  z-index: 0;
  pointer-events: none; /* They shouldn't interfere with the stretched link */
}

/* Focus state for accessibility */
.landing-card-title a:focus {
  outline: 2px solid var(--primary-color, #4361ee);
  outline-offset: 2px;
}

/* Responsive layout enhancements across desktop, tablet, and mobile */
:root {
  --sidebar-width: clamp(220px, 20vw, 320px);
  --header-height: clamp(80px, 8vh, 120px);
  --content-gap: clamp(8px, 1.5vw, 20px);
  --toolbar-height: clamp(40px, 5vh, 54px);
}

.app-container,
#sidebar,
#header,
#editor-container,
#preview-container,
.preview-frame-container,
#preview-frame {
  transition: all var(--transition-speed) ease;
}

.header-top,
#toolbar,
.preview-toolbar,
.status-bar {
  gap: var(--content-gap);
}

@media (min-width: 1440px) {
  :root {
    --sidebar-width: clamp(280px, 22vw, 360px);
  }

  #header {
    padding: 14px 18px;
  }

  .app-title {
    font-size: 1.45rem;
  }

  .header-actions .btn,
  .toolbar-group .btn,
  .btn {
    padding: 8px 16px;
    font-size: 0.95rem;
  }

  .tab {
    max-width: 240px;
    font-size: 1rem;
  }

  .tab-close {
    font-size: 16px;
  }

  .btn-icon {
    width: 38px;
    height: 38px;
  }

  .status-item i,
  .preview-actions i,
  .toolbar-group i {
    font-size: 15px;
  }

  .device-btn {
    font-size: 0.95rem;
  }

  .sidebar-tab {
    font-size: 0.98rem;
  }

  .item-icon {
    font-size: 17px;
  }
}

@media (min-width: 1800px) {
  :root {
    --sidebar-width: clamp(320px, 20vw, 420px);
  }

  .app-container.split-screen {
    grid-template-columns: var(--sidebar-width) minmax(0, 1.1fr) minmax(0, 0.9fr);
  }

  #preview-frame {
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);
  }

  #header {
    padding: 16px 22px;
  }

  #toolbar {
    gap: 10px;
  }

  .header-actions .btn,
  .toolbar-group .btn,
  .btn {
    padding: 10px 18px;
    font-size: 1rem;
  }

  .btn-icon {
    width: 42px;
    height: 42px;
  }

  .app-title {
    font-size: 1.55rem;
  }

  .tab {
    min-width: 140px;
    max-width: 260px;
    font-size: 1.05rem;
  }

  .status-item i,
  .preview-actions i,
  .toolbar-group i {
    font-size: 16px;
  }

  .sidebar-tab,
  .item-name {
    font-size: 1rem;
  }

  .item-icon {
    font-size: 18px;
  }
}

@media (min-width: 2000px) {
  .app-container {
    grid-template-columns: var(--sidebar-width) minmax(0, 1.1fr);
  }

  .btn-icon {
    width: 46px;
    height: 46px;
  }

  .tab-bar {
    height: 48px;
  }

  .preview-toolbar {
    min-height: 48px;
  }
}

@media (max-width: 1200px) {
  #toolbar {
    row-gap: 6px;
  }

  .toolbar-group {
    padding: 0 6px;
  }

  .tab {
    min-width: 100px;
    max-width: 180px;
  }
}

@media (max-width: 900px) {
  #header {
    padding: 8px 10px;
  }

  .header-top {
    flex-wrap: wrap;
  }

  .app-title {
    font-size: 1.1rem;
  }

  #toolbar {
    justify-content: space-between;
  }

  .toolbar-group {
    flex-wrap: wrap;
    border-right: none;
    gap: 6px;
  }

  .status-left,
  .status-right {
    gap: 12px;
  }
}

@media (max-width: 640px) {
  .header-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .header-actions .btn {
    font-size: 0.85rem;
    padding: 6px 10px;
  }

  .tab {
    min-width: 90px;
    max-width: 150px;
    font-size: 0.85rem;
  }

  .preview-toolbar,
  #footer {
    padding: 6px 8px;
  }

  .status-left,
  .status-right {
    flex-wrap: wrap;
    gap: 8px;
  }
}

@media (max-width: 360px) {
  .app-title {
    font-size: 1rem;
  }

  .header-actions .btn {
    padding: 5px 8px;
  }

  .preview-actions {
    gap: 6px;
  }

  .device-btn {
    padding: 5px 8px;
  }
}