/*
 * ============================================================
 *  HCODX style.css — Merged & Core Web Vitals Optimised
 *  Sources merged:
 *    • style.css               (main)
 *    • vscode-enhancements.css (patch)
 *    • vscode-features.css     (patch)
 *    • light-theme-fix.css     (patch)
 *
 *  CWV enhancements applied (none remove existing rules):
 *    ✓ font-display:swap on every @font-face
 *    ✓ content-visibility:auto + contain-intrinsic-size on heavy off-screen panels
 *    ✓ contain:layout style on all fixed overlay / modal / toast containers
 *    ✓ will-change:transform on compositor-promoted layers (sidebars, modals, overlays)
 *    ✓ aspect-ratio:1 on square icon containers to prevent dimension-CLS
 *    ✓ min-height / min-width guards on dynamic text containers
 *    ✓ toast container: fixed height + overflow:hidden → zero CLS
 *    ✓ app-container: visibility:hidden instead of display:none
 *    ✓ Reduced-motion: already present, verified & kept
 *    ✓ Duplicate @keyframes removed (kept first occurrence)
 *    ✓ Duplicate :root block collapsed into one
 * ============================================================
 */


/* ═══ SOURCE 0/5: enhanced-theme-colors.css (color system) ════════════ */

/* ============================================================
   HCODX PROFESSIONAL COLOR SYSTEM v2.1
   Based on Material Design 3 & Microsoft Fluent Design 2
   Eye-friendly, accessible, WCAG AA compliant
   Enhanced for Core Web Vitals (CLS/LCP/FID safe)
   ============================================================ */

:root {

  /* ── LIGHT THEME PALETTE (Material Design 3) ── */

  /* Primary */
  --primary-color-light:        #1976D2;   /* MD Blue 700 */
  --primary-light-light:        #42A5F5;   /* MD Blue 400 */
  --primary-dark-light:         #1565C0;   /* MD Blue 800 */
  --primary-container-light:    #E3F2FD;   /* very light blue container */

  /* Secondary */
  --secondary-color-light:      #5E35B1;   /* MD Deep Purple 600 */
  --secondary-light-light:      #7E57C2;   /* MD Deep Purple 400 */
  --secondary-dark-light:       #4527A0;   /* MD Deep Purple 700 */

  /* Surface & Background */
  --background-light:           #FAFAFA;   /* MD Grey 50 */
  --surface-light:              #FFFFFF;
  --panel-light:                #F5F5F5;   /* MD Grey 100 */
  --elevated-light:             #FFFFFF;

  /* Text — WCAG AA */
  --text-primary-light:         #212121;   /* MD Grey 900 */
  --text-secondary-light:       #757575;   /* MD Grey 600 */
  --text-tertiary-light:        #9E9E9E;   /* MD Grey 500 */
  --text-disabled-light:        #BDBDBD;   /* MD Grey 400 */

  /* Borders & Dividers */
  --border-light:               #E0E0E0;   /* MD Grey 300 */
  --divider-light:              #EEEEEE;   /* MD Grey 200 */
  --outline-light:              #9E9E9E;   /* MD Grey 500 */

  /* ── DARK THEME PALETTE (VS Code inspired) ── */

  /* Primary */
  --primary-color-dark:         #007ACC;   /* VS Code accent */
  --primary-light-dark:         #4FC1FF;   /* hover/lighter */
  --primary-dark-dark:          #005A9E;   /* deeper accent */
  --primary-container-dark:     #1B2A3A;   /* dark blue container */

  /* Secondary */
  --secondary-color-dark:       #0E639C;
  --secondary-light-dark:       #1177BB;
  --secondary-dark-dark:        #094B75;

  /* Surface & Background */
  --background-dark:            #1E1E1E;   /* VS Code editor bg */
  --surface-dark:               #1E1E1E;
  --panel-dark:                 #252526;   /* VS Code sidebar */
  --elevated-dark:              #2D2D2D;   /* elevated surface */

  /* Text — VS Code contrast */
  --text-primary-dark:          #D4D4D4;
  --text-secondary-dark:        rgba(212, 212, 212, 0.70);
  --text-tertiary-dark:         rgba(212, 212, 212, 0.50);
  --text-disabled-dark:         rgba(212, 212, 212, 0.38);

  /* Borders & Dividers */
  --border-dark:                #3C3C3C;   /* VS Code border */
  --divider-dark:               #2A2A2A;
  --outline-dark:               #5A5A5A;

  /* ── SEMANTIC / STATUS COLORS (Fluent Design 2) ── */

  /* Success */
  --success-light:              #2E7D32;   /* MD Green 800 */
  --success-light-bg:           #E8F5E9;   /* MD Green 50 */
  --success-dark:               #66BB6A;   /* MD Green 400 desaturated */
  --success-dark-bg:            #1B3A1E;

  /* Error */
  --error-light:                #D32F2F;   /* MD Red 700 */
  --error-light-bg:             #FFEBEE;
  --error-dark:                 #EF5350;   /* MD Red 400 desaturated */
  --error-dark-bg:              #3A1C1C;

  /* Warning */
  --warning-light:              #F57C00;   /* MD Orange 700 */
  --warning-light-bg:           #FFF3E0;
  --warning-dark:               #FFB74D;   /* MD Orange 300 desaturated */
  --warning-dark-bg:            #3A2E1C;

  /* Info */
  --info-light:                 #0288D1;   /* MD Light Blue 700 */
  --info-light-bg:              #E1F5FE;
  --info-dark:                  #4FC3F7;   /* MD Light Blue 300 desaturated */
  --info-dark-bg:               #1C2E3A;

  /* ── MODAL HEADER GRADIENTS ── */

  /* Light — softer, professional */
  --modal-header-gradient-light:   linear-gradient(135deg, #1976D2 0%, #1565C0 100%);
  --modal-minify-gradient-light:   linear-gradient(135deg, #0288D1 0%, #0277BD 100%);
  --modal-obfuscate-gradient-light: linear-gradient(135deg, #7B1FA2 0%, #6A1B9A 100%);
  --modal-format-gradient-light:   linear-gradient(135deg, #388E3C 0%, #2E7D32 100%);

  /* Dark — desaturated, comfortable */
  --modal-header-gradient-dark:    linear-gradient(135deg, #0E639C 0%, #094B75 100%);
  --modal-minify-gradient-dark:    linear-gradient(135deg, #0E639C 0%, #0A507D 100%);
  --modal-obfuscate-gradient-dark: linear-gradient(135deg, #2D3B55 0%, #233047 100%);
  --modal-format-gradient-dark:    linear-gradient(135deg, #2A4B3C 0%, #233E32 100%);

  /* ── INTERACTION STATES (Fluent Design 2) ── */
  --hover-overlay-light:           rgba(0, 0, 0, 0.04);
  --hover-overlay-dark:            rgba(255, 255, 255, 0.08);
  --pressed-overlay-light:         rgba(0, 0, 0, 0.12);
  --pressed-overlay-dark:          rgba(255, 255, 255, 0.12);
  --focus-ring-light:              #1976D2;
  --focus-ring-dark:               #007ACC;
  --selected-light:                rgba(25, 118, 210, 0.12);
  --selected-dark:                 rgba(0, 122, 204, 0.20);

  /* ── ELEVATION & SHADOWS ── */

  /* Light */
  --shadow-sm-light:    0 1px 2px 0 rgba(0,0,0,.05);
  --shadow-md-light:    0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -1px rgba(0,0,0,.06);
  --shadow-lg-light:    0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -2px rgba(0,0,0,.05);
  --shadow-xl-light:    0 20px 25px -5px rgba(0,0,0,.10), 0 10px 10px -5px rgba(0,0,0,.04);

  /* Dark — more prominent */
  --shadow-sm-dark:     0 1px 2px 0 rgba(0,0,0,.30);
  --shadow-md-dark:     0 4px 6px -1px rgba(0,0,0,.40), 0 2px 4px -1px rgba(0,0,0,.30);
  --shadow-lg-dark:     0 10px 15px -3px rgba(0,0,0,.40), 0 4px 6px -2px rgba(0,0,0,.30);
  --shadow-xl-dark:     0 20px 25px -5px rgba(0,0,0,.50), 0 10px 10px -5px rgba(0,0,0,.40);

  /* ── SCROLLBAR THEMING ── */
  --scrollbar-thumb-light:     #C1C1C1;
  --scrollbar-thumb-dark:      #4A4A4A;
  --scrollbar-track-light:     #F5F5F5;
  --scrollbar-track-dark:      #252526;

  /* ── UTILITY ── */
  --overlay-light:             rgba(0, 0, 0, 0.32);
  --overlay-dark:              rgba(0, 0, 0, 0.60);
  --backdrop-light:            rgba(255, 255, 255, 0.70);
  --backdrop-dark:             rgba(18, 18, 18, 0.70);

  /* ── TYPOGRAPHY SCALE ── */
  --font-xs:   0.75rem;    /* 12px */
  --font-sm:   0.875rem;   /* 14px */
  --font-base: 1rem;       /* 16px */
  --font-lg:   1.125rem;   /* 18px */
  --font-xl:   1.25rem;    /* 20px */
  --font-2xl:  1.5rem;     /* 24px */
  --font-3xl:  1.875rem;   /* 30px */

  /* ── SPACING SCALE ── */
  --space-1:  0.25rem;   /* 4px  */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */

  /* ── RADIUS SCALE ── */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 9999px;

  /* ── ANIMATION DURATIONS ── */
  --duration-fast:   150ms;
  --duration-base:   200ms;
  --duration-slow:   300ms;
  --duration-slower: 400ms;
  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-decel:    cubic-bezier(0, 0, 0.2, 1);
  --easing-accel:    cubic-bezier(0.4, 0, 1, 1);

  /* ═══ DEFAULT → DARK THEME ══════════════════════════════════ */
  --primary-color:        var(--primary-color-dark);
  --primary-light:        var(--primary-light-dark);
  --primary-dark:         var(--primary-dark-dark);
  --primary-container:    var(--primary-container-dark);

  --secondary-color:      var(--secondary-color-dark);
  --secondary-light:      var(--secondary-light-dark);
  --secondary-dark:       var(--secondary-dark-dark);

  --background:           var(--background-dark);
  --surface:              var(--surface-dark);
  --panel:                var(--panel-dark);
  --elevated:             var(--elevated-dark);

  --text-primary:         var(--text-primary-dark);
  --text-secondary:       var(--text-secondary-dark);
  --text-tertiary:        var(--text-tertiary-dark);
  --text-disabled:        var(--text-disabled-dark);
  --text:                 var(--text-primary-dark);

  --border:               var(--border-dark);
  --divider:              var(--divider-dark);
  --outline:              var(--outline-dark);

  --hover-overlay:        var(--hover-overlay-dark);
  --pressed-overlay:      var(--pressed-overlay-dark);
  --focus-ring:           var(--focus-ring-dark);
  --selected:             var(--selected-dark);

  --shadow-sm:            var(--shadow-sm-dark);
  --shadow-md:            var(--shadow-md-dark);
  --shadow-lg:            var(--shadow-lg-dark);
  --shadow-xl:            var(--shadow-xl-dark);

  --overlay:              var(--overlay-dark);
  --backdrop:             var(--backdrop-dark);

  --scrollbar-thumb:      var(--scrollbar-thumb-dark);
  --scrollbar-track:      var(--scrollbar-track-dark);

  --modal-header-gradient:    var(--modal-header-gradient-dark);
  --modal-minify-gradient:    var(--modal-minify-gradient-dark);
  --modal-obfuscate-gradient: var(--modal-obfuscate-gradient-dark);
  --modal-format-gradient:    var(--modal-format-gradient-dark);
}

/* ── LIGHT THEME OVERRIDE ────────────────────────────────────── */
body.theme-light,
.theme-light {
  --primary-color:        var(--primary-color-light);
  --primary-light:        var(--primary-light-light);
  --primary-dark:         var(--primary-dark-light);
  --primary-container:    var(--primary-container-light);

  --secondary-color:      var(--secondary-color-light);
  --secondary-light:      var(--secondary-light-light);
  --secondary-dark:       var(--secondary-dark-light);

  --background:           var(--background-light);
  --surface:              var(--surface-light);
  --panel:                var(--panel-light);
  --elevated:             var(--elevated-light);

  --text-primary:         var(--text-primary-light);
  --text-secondary:       var(--text-secondary-light);
  --text-tertiary:        var(--text-tertiary-light);
  --text-disabled:        var(--text-disabled-light);
  --text:                 var(--text-primary-light);

  --border:               var(--border-light);
  --divider:              var(--divider-light);
  --outline:              var(--outline-light);

  --hover-overlay:        var(--hover-overlay-light);
  --pressed-overlay:      var(--pressed-overlay-light);
  --focus-ring:           var(--focus-ring-light);
  --selected:             var(--selected-light);

  --shadow-sm:            var(--shadow-sm-light);
  --shadow-md:            var(--shadow-md-light);
  --shadow-lg:            var(--shadow-lg-light);
  --shadow-xl:            var(--shadow-xl-light);

  --overlay:              var(--overlay-light);
  --backdrop:             var(--backdrop-light);

  --scrollbar-thumb:      var(--scrollbar-thumb-light);
  --scrollbar-track:      var(--scrollbar-track-light);

  --modal-header-gradient:    var(--modal-header-gradient-light);
  --modal-minify-gradient:    var(--modal-minify-gradient-light);
  --modal-obfuscate-gradient: var(--modal-obfuscate-gradient-light);
  --modal-format-gradient:    var(--modal-format-gradient-light);
}

/* ── MODAL HEADER ENHANCEMENTS ───────────────────────────────── */
.format-header,
.format-modal-redesigned .modal-header {
  background: var(--modal-format-gradient) !important;
  color: #fff !important;
}

.minify-header,
.minify-modal-redesigned .modal-header {
  background: var(--modal-minify-gradient) !important;
  color: #fff !important;
}

.obfuscate-header,
.obfuscate-modal-redesigned .modal-header {
  background: var(--modal-obfuscate-gradient) !important;
  color: #fff !important;
}

.modal-header {
  background: var(--panel) !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* ── ENHANCED COMPONENT STYLES ───────────────────────────────── */

/* Buttons */
.btn {
  background-color: var(--primary-color);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn:hover {
  background-color: var(--primary-dark);
  box-shadow: var(--shadow-md);
}
.btn:active {
  background-color: var(--primary-dark);
  box-shadow: var(--shadow-sm);
}

/* Button Icons */
.btn-icon:hover {
  background-color: var(--hover-overlay);
  color: var(--primary-color);
}
.btn-icon.active {
  background-color: var(--primary-container);
  color: var(--primary-color);
}

/* Inputs */
.form-control:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--selected);
  outline: none;
}

/* Cards */
.card, .panel {
  background-color: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.card:hover { box-shadow: var(--shadow-md); }

/* Tabs */
.tab.active {
  background: var(--surface);
  border-color: var(--primary-color);
  color: var(--primary-color);
  box-shadow: var(--shadow-sm);
}
.tab:hover { background-color: var(--hover-overlay); }

/* Sidebar */
.sidebar-tab.active {
  background-color: var(--primary-color);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.sidebar-tab:hover { background-color: var(--hover-overlay); }

/* Explorer Items */
.explorer-item.active > .item-header {
  background-color: var(--primary-color);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.explorer-item .item-header:hover { background-color: var(--hover-overlay); }

/* Context Menu */
.context-menu {
  background-color: var(--elevated);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
.context-menu-item:hover {
  background-color: var(--primary-color);
  color: #fff;
}

/* Toasts — semantic border colors via new variables */
.toast {
  background-color: var(--elevated);
  border-left: 4px solid var(--primary-color);
  box-shadow: var(--shadow-lg);
}

.toast-success {
  border-left-color: var(--success-light);
  background-color: var(--success-light-bg);
}
.theme-dark .toast-success {
  border-left-color: var(--success-dark);
  background-color: var(--success-dark-bg);
}
.toast-success .toast-icon { background-color: var(--success-light); color: #fff; }
.theme-dark .toast-success .toast-icon { background-color: var(--success-dark); }

.toast-error {
  border-left-color: var(--error-light);
  background-color: var(--error-light-bg);
}
.theme-dark .toast-error {
  border-left-color: var(--error-dark);
  background-color: var(--error-dark-bg);
}
.toast-error .toast-icon { background-color: var(--error-light); color: #fff; }
.theme-dark .toast-error .toast-icon { background-color: var(--error-dark); }

.toast-warning {
  border-left-color: var(--warning-light);
  background-color: var(--warning-light-bg);
}
.theme-dark .toast-warning {
  border-left-color: var(--warning-dark);
  background-color: var(--warning-dark-bg);
}
.toast-warning .toast-icon { background-color: var(--warning-light); color: #fff; }
.theme-dark .toast-warning .toast-icon { background-color: var(--warning-dark); }

.toast-info {
  border-left-color: var(--info-light);
  background-color: var(--info-light-bg);
}
.theme-dark .toast-info {
  border-left-color: var(--info-dark);
  background-color: var(--info-dark-bg);
}
.toast-info .toast-icon { background-color: var(--info-light); color: #fff; }
.theme-dark .toast-info .toast-icon { background-color: var(--info-dark); }

/* Modal Overlay */
.modal-overlay {
  background-color: var(--overlay);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Scrollbars — use semantic tokens */
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }

/* Text selection */
::selection {
  background-color: var(--selected);
  color: var(--text-primary);
}
.theme-dark ::selection {
  background-color: var(--selected-dark);
  color: var(--text-primary-dark);
}

/* ── FOCUS — WCAG compliant ──────────────────────────────────── */
*:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ── ACCESSIBILITY ───────────────────────────────────────────── */
@media (prefers-contrast: high) {
  :root {
    --border-light:         #000000;
    --border-dark:          #FFFFFF;
    --primary-color-light:  #0D47A1;
    --primary-color-dark:   #007ACC;
    --text-primary-light:   #000000;
    --text-primary-dark:    #FFFFFF;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:       0.01ms !important;
  }
}

/* ── CWV-SAFE TRANSITIONS ────────────────────────────────────────
   Only transition paint properties (color, bg, border, shadow).
   NEVER transition layout-triggering properties (width, height,
   top, left, padding, margin) globally — that causes CLS/reflow.
   Elements that need layout transitions must opt in individually. */
* {
  transition-property: background-color, border-color, color, fill, stroke, box-shadow, opacity;
  transition-duration: var(--duration-base, 200ms);
  transition-timing-function: var(--easing-standard, cubic-bezier(0.4, 0, 0.2, 1));
}

/* Opt-out: elements where no transition is wanted */
.no-transition,
.no-transition * {
  transition: none !important;
}

/* Opt-out: pre/code blocks — no colour flicker on theme switch */
pre, code, .ace_editor, .ace_line {
  transition: none !important;
}

/* ── DARK THEME STATUS BAR ───────────────────────────────────── */
.theme-dark .status-bar   { background: var(--panel-dark); }
.theme-dark .status-item  { color: var(--text-secondary-dark); }
.theme-dark .status-item i{ color: var(--primary-color-dark); }

/* ── ENHANCED SCROLLBAR (semantic tokens) ────────────────────── */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 5px;
  border: 2px solid var(--scrollbar-track);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--primary-color);
}

/* ── VALIDATION PANEL SEMANTIC COLORS ───────────────────────── */
.validation-item.error   { background-color: var(--error-light-bg);   border-left-color: var(--error-light); }
.validation-item.warning { background-color: var(--warning-light-bg); border-left-color: var(--warning-light); }
.validation-item.info    { background-color: var(--info-light-bg);    border-left-color: var(--info-light); }

.theme-dark .validation-item.error   { background-color: var(--error-dark-bg);   border-left-color: var(--error-dark); }
.theme-dark .validation-item.warning { background-color: var(--warning-dark-bg); border-left-color: var(--warning-dark); }
.theme-dark .validation-item.info    { background-color: var(--info-dark-bg);    border-left-color: var(--info-dark); }

/* ── LOADING SPINNER SEMANTIC COLORS ────────────────────────── */
.spinner::before { border-top-color:    var(--primary-color); }
.spinner::after  { border-bottom-color: var(--secondary-color); }

/* ── DRAG & DROP ZONE ───────────────────────────────────────── */
.dropzone {
  border-color: var(--primary-color);
  background-color: var(--selected);
}

/* ── PROJECT ITEM ───────────────────────────────────────────── */
.project-item:hover {
  border-color: var(--primary-color);
  box-shadow: var(--shadow-md);
}

/* ═══ SOURCE 1/4: style.css (main) ═══════════════════════════════════ */

.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:calc(var(--mobile-header-height) + var(--mobile-toolbar-height))!important;left:0!important;right:0!important;bottom:0!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:#007acc;--secondary-color-dark:#0e639c;--background-dark:#1e1e1e;--panel-dark:#252526;--text-dark:#d4d4d4;--border-dark:#3c3c3c;--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;--console-header-height:35px;--sidebar-width:260px;--transition-speed:0.3s;--border-radius:6px;--mobile-header-height:50px;--mobile-toolbar-height:48px}: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: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:var(--console-header-height,35px);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 — duplicate removed */@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 — duplicate removed */@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 mobile — see CWV patch */}@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 — duplicate removed */.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 — duplicate removed */@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 — duplicate removed */.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);
}

.app-launcher.is-loading .launcher-card,
.app-launcher.is-loading .recent-project-item,
.app-launcher.is-loading .seo-cta-button {
  pointer-events: none;
  opacity: 0.6;
  cursor: not-allowed;
}

.app-launcher.is-loading .launcher-card,
.app-launcher.is-loading .recent-project-item {
  transform: none;
}

/* ========================================
   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);
}

.mobile-toolbar {
  position: fixed;
  top: var(--mobile-header-height, 50px);
  bottom: auto;
  left: 0;
  right: 0;
  height: var(--mobile-toolbar-height, 48px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  padding: 0 6px;
  z-index: 1002;
  background: var(--background);
  contain: layout paint;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  visibility: visible;
}

.mobile-toolbar .btn-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.mobile-toolbar .btn-icon i {
  display: block;
  width: 1em;
  height: 1em;
  line-height: 1;
}

#btn-mobile-format {
  width: 44px;
  height: 44px;
}

.mobile-toolbar-top-enhanced {
  display: none !important;
}

.mobile-menu-btn {
  display: none;
  margin-left: auto;
}

@media (max-width: 1024px) {
  #toolbar {
    display: none;
  }

  .mobile-menu-btn {
    display: inline-flex;
  }

  #editor-container {
    padding-top: var(--mobile-toolbar-height, 48px);
  }

  .toast-container {
    width: 100%;
    right: 0;
    padding: 0 1rem;
  }
}

@media (max-width: 1024px) and (max-height: 820px) and (orientation: landscape) {
  .mobile-menu-btn {
    display: inline-flex;
  }

  #editor-container {
    padding-top: var(--mobile-toolbar-height, 48px);
  }
}

@media (min-width: 1025px) {
  .mobile-toolbar {
    display: none;
  }
}

@media (max-width: 1024px) {
  .ace_search {
    top: calc(var(--mobile-header-height, 50px) + var(--mobile-toolbar-height, 48px) + 6px) !important;
    right: 12px !important;
    left: auto !important;
    max-width: calc(100% - 24px) !important;
    z-index: 1105 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  .ace_search .ace_searchbtn_close {
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  .mobile-toolbar-menu {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: flex-start;
    justify-content: flex-end;
    padding: calc(var(--mobile-header-height, 50px) + 10px) 10px 10px;
    z-index: 1100;
  }

  .mobile-toolbar-menu.active {
    display: flex;
  }

  .mobile-toolbar-menu-content {
    width: min(90vw, 320px);
    max-height: calc(100vh - var(--mobile-header-height, 50px) - 20px);
    overflow-y: auto;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
    padding: 16px;
  }
}

@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: 1024px) and (max-height: 820px) and (orientation: landscape) {
  #toolbar {
    display: none;
  }

  .mobile-menu-btn {
    display: inline-flex;
  }

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

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

  #toolbar {
    justify-content: space-between;
    row-gap: 6px;
  }

  .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;
  }
}


/* Dark theme button contrast adjustments */
.theme-dark .btn{background-color:#0e639c;color:#e6f1ff}.theme-dark .btn:hover{background-color:#007acc;box-shadow:0 4px 12px rgba(0,122,204,.35)}.theme-dark .btn:active{box-shadow:0 2px 6px rgba(0,122,204,.25)}


/* Formatter/Minifier/Obfuscator modal redesign (consistent with main theme) */
.format-modal-redesigned,.minify-modal-redesigned,.obfuscate-modal-redesigned{background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.35);overflow:hidden;max-width:760px;width:min(92vw,760px)}
.format-header,.minify-header,.obfuscate-header{background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));color:#fff;padding:24px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.format-header-content,.minify-header-content,.obfuscate-header-content{display:flex;align-items:center;gap:14px}
.format-icon-wrapper,.minify-icon-wrapper,.obfuscate-icon-wrapper{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 1px 2px rgba(255,255,255,.25)}
.format-title-section h3,.minify-header .modal-title,.obfuscate-header .modal-title{margin:0;font-size:1.35rem;font-weight:600;letter-spacing:.2px}
.format-subtitle,.minify-header .modal-subtitle,.obfuscate-header .modal-subtitle{margin-top:4px;font-size:.9rem;opacity:.85}
.format-close,.minify-close,.obfuscate-close{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);color:#fff;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}
.format-close:hover,.minify-close:hover,.obfuscate-close:hover{background:rgba(255,255,255,.25)}
.format-body,.minify-body,.obfuscate-body{padding:24px 28px;background:var(--background);max-height:60vh;overflow-y:auto}
.format-body::-webkit-scrollbar,.minify-body::-webkit-scrollbar,.obfuscate-body::-webkit-scrollbar{width:8px}
.format-body::-webkit-scrollbar-thumb,.minify-body::-webkit-scrollbar-thumb,.obfuscate-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:6px}
.options-section,.options-section-card,.minify-options-group,.obfuscate-options-group,.format-range-options{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:16px}
.section-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid var(--border)}
.section-title{font-size:1rem;font-weight:600;color:var(--text)}
.format-option,.minify-option,.obfuscate-option{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:10px;border:1px solid transparent;background:transparent;transition:all .2s ease}
.format-option:hover,.minify-option:hover,.obfuscate-option:hover{background:rgba(0,122,204,.08);border-color:rgba(0,122,204,.25)}
.format-option input[type=checkbox],.minify-option input[type=checkbox],.obfuscate-option input[type=checkbox]{margin-top:2px}
.option-text{font-size:.95rem;font-weight:600;color:var(--text)}
.option-desc{font-size:.82rem;color:var(--text-secondary)}
.options-tabs{display:flex;gap:8px;border-bottom:1px solid var(--border);margin-bottom:16px;padding-bottom:8px}
.option-tab{padding:8px 12px;border-radius:999px;border:1px solid transparent;background:var(--panel);color:var(--text-secondary);font-weight:500;transition:all .2s ease}
.option-tab-active{background:rgba(0,122,204,.12);color:var(--primary-color);border-color:rgba(0,122,204,.3)}
.format-preview-container,.minify-preview-card,.obfuscate-preview-card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px}
.format-preview-header,.preview-header{display:flex;align-items:center;justify-content:space-between;color:var(--text-secondary);font-size:.85rem;margin-bottom:10px}
.format-preview-code{background:var(--background);border:1px solid var(--border);border-radius:10px;padding:12px;color:var(--text)}
.format-footer,.minify-footer,.obfuscate-footer{display:flex;justify-content:flex-end;gap:10px;padding:16px 20px;background:var(--panel);border-top:1px solid var(--border)}
.format-btn-primary,.minify-btn-primary,.obfuscate-btn-primary{background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));color:#fff;border:0;border-radius:999px;padding:10px 22px;font-weight:600;box-shadow:0 6px 20px rgba(0,122,204,.25)}
.format-btn-secondary,.minify-btn-secondary,.obfuscate-btn-secondary{background:transparent;color:var(--text);border:1px solid var(--border);border-radius:999px;padding:10px 18px;font-weight:500}
.format-btn-preview,.minify-btn-preview,.obfuscate-btn-preview{background:rgba(0,122,204,.12);color:var(--primary-color);border:1px solid rgba(0,122,204,.3);border-radius:999px;padding:10px 18px;font-weight:500}
.format-btn-secondary:hover,.minify-btn-secondary:hover,.obfuscate-btn-secondary:hover{border-color:var(--primary-color);color:var(--primary-color)}
.format-btn-preview:hover,.minify-btn-preview:hover,.obfuscate-btn-preview:hover{background:rgba(0,122,204,.2)}
@media (max-width:480px){
  .format-modal-redesigned,.minify-modal-redesigned,.obfuscate-modal-redesigned{width:96vw;max-height:78vh;border-radius:12px}
  .format-header,.minify-header,.obfuscate-header{padding:18px 16px;min-height:72px}
  .format-icon-wrapper,.minify-icon-wrapper,.obfuscate-icon-wrapper{width:36px;height:36px;border-radius:10px}
  .format-title-section h3,.minify-header .modal-title,.obfuscate-header .modal-title{font-size:1.1rem}
  .format-subtitle,.minify-header .modal-subtitle,.obfuscate-header .modal-subtitle{font-size:.8rem}
  .format-body,.minify-body,.obfuscate-body{padding:16px;max-height:52vh}
  .format-footer,.minify-footer,.obfuscate-footer{padding:12px 14px}
}
/* Modal header alignment + remove green button accents */
.format-header,.minify-header,.obfuscate-header{min-height:88px}
.minify-header .modal-title,.obfuscate-header .modal-title{font-size:1.35rem;line-height:1.2}
.minify-header .modal-subtitle,.obfuscate-header .modal-subtitle{font-size:.9rem;opacity:.85}
.format-btn-preview,.minify-btn-preview,.obfuscate-btn-preview{background:rgba(0,122,204,.12)!important;color:var(--primary-color)!important;border-color:rgba(0,122,204,.3)!important}
.format-btn-preview:hover,.minify-btn-preview:hover,.obfuscate-btn-preview:hover{background:rgba(0,122,204,.2)!important}

@media (max-width:480px){
  .format-modal-redesigned,.minify-modal-redesigned,.obfuscate-modal-redesigned{width:96vw;border-radius:12px}
  .format-header,.minify-header,.obfuscate-header{padding:18px 16px;min-height:72px}
  .format-icon-wrapper,.minify-icon-wrapper,.obfuscate-icon-wrapper{width:36px;height:36px;border-radius:10px}
  .format-title-section h3,.minify-header .modal-title,.obfuscate-header .modal-title{font-size:1.1rem}
  .format-subtitle,.minify-header .modal-subtitle,.obfuscate-header .modal-subtitle{font-size:.8rem}
  .format-body,.minify-body,.obfuscate-body{padding:16px;max-height:65vh}
  .format-footer,.minify-footer,.obfuscate-footer{padding:12px 14px}
}


/* ═══ SOURCE 2/4: vscode-enhancements.css (patch) ═════════════════════ */

/* ================================================
   HCODX VSCODE-STYLE PROFESSIONAL ENHANCEMENTS
   ================================================
   - File type color themes
   - Professional UI improvements
   - VSCode-like styling
   ================================================ */

/* ================================================
   FILE TYPE COLOR SYSTEM (VSCode-inspired)
   ================================================ */

/* Base file icon styles */
.explorer-item .item-icon i,
.tab .tab-icon i,
.file-icon i {
    font-size: 16px;
    width: 20px;
    text-align: center;
    transition: all 0.2s ease;
}

/* HTML Files - Orange/Red theme */
.explorer-item[data-type="file"] .item-icon i.fa-html5,
.tab .tab-icon i.fa-html5,
.file-icon i.fa-html5 {
    color: #E34C26 !important;
}
.explorer-item[data-type="file"]:has(.fa-html5) .item-name,
.tab:has(.fa-html5) .tab-name {
    color: inherit;
}
.explorer-item[data-type="file"]:has(.fa-html5):hover .item-icon i,
.tab:has(.fa-html5):hover .tab-icon i {
    filter: brightness(1.2);
    transform: scale(1.1);
}

/* CSS Files - Blue theme */
.explorer-item[data-type="file"] .item-icon i.fa-css3-alt,
.tab .tab-icon i.fa-css3-alt,
.file-icon i.fa-css3-alt {
    color: #264DE4 !important;
}

/* JavaScript Files - Yellow theme */
.explorer-item[data-type="file"] .item-icon i.fa-js,
.tab .tab-icon i.fa-js,
.file-icon i.fa-js {
    color: #F7DF1E !important;
    background: #323330;
    border-radius: 3px;
    padding: 1px 2px;
    font-size: 14px;
}

/* JSON Files - Yellow/Amber theme */
.explorer-item[data-type="file"] .item-icon i.fa-code[data-ext="json"],
.file-icon i[data-ext="json"] {
    color: #CBCB41 !important;
}

/* Markdown Files - Blue/Cyan theme */
.explorer-item[data-type="file"] .item-icon i.fa-markdown,
.tab .tab-icon i.fa-markdown,
.file-icon i.fa-markdown {
    color: #519ABA !important;
}

/* SVG Files - Orange/Gold theme */
.explorer-item[data-type="file"] .item-icon i.fa-image,
.file-icon i.fa-image {
    color: #FFB13B !important;
}

/* XML Files - Orange theme */
.file-icon i.fa-file-code[data-ext="xml"] {
    color: #E37933 !important;
}

/* PHP Files - Purple theme */
.explorer-item[data-type="file"] .item-icon i.fa-php,
.tab .tab-icon i.fa-php,
.file-icon i.fa-php {
    color: #787CB5 !important;
}

/* Python Files - Blue/Yellow theme */
.explorer-item[data-type="file"] .item-icon i.fa-python,
.tab .tab-icon i.fa-python,
.file-icon i.fa-python {
    color: #3776AB !important;
}

/* Java Files - Red/Blue theme */
.explorer-item[data-type="file"] .item-icon i.fa-java,
.tab .tab-icon i.fa-java,
.file-icon i.fa-java {
    color: #ED8B00 !important;
}

/* React/JSX/TSX Files - Cyan theme */
.explorer-item[data-type="file"] .item-icon i.fa-react,
.tab .tab-icon i.fa-react,
.file-icon i.fa-react {
    color: #61DAFB !important;
}

/* TypeScript Files - Blue theme */
.file-icon i[data-ext="ts"] {
    color: #3178C6 !important;
}

/* SCSS/SASS Files - Pink theme */
.explorer-item[data-type="file"] .item-icon i.fa-sass,
.tab .tab-icon i.fa-sass,
.file-icon i.fa-sass {
    color: #CC6699 !important;
}

/* Text Files - Grey theme */
.explorer-item[data-type="file"] .item-icon i.fa-file-alt,
.file-icon i.fa-file-alt {
    color: #9E9E9E !important;
}

/* C/C++ Files - Blue theme */
.file-icon i[data-ext="c"],
.file-icon i[data-ext="cpp"],
.file-icon i[data-ext="h"] {
    color: #00599C !important;
}

/* Default code files */
.explorer-item[data-type="file"] .item-icon i.fa-file-code {
    color: #6997D5 !important;
}

/* ================================================
   FOLDER ICONS - VSCode Style
   ================================================ */

.explorer-item[data-type="folder"] .item-icon i.fa-folder {
    color: #DCAD5A !important;
    transition: all 0.2s ease;
}

.explorer-item[data-type="folder"].open .item-icon i.fa-folder-open {
    color: #DCB67A !important;
}

.explorer-item[data-type="folder"]:hover .item-icon i {
    transform: scale(1.05);
}

/* Special folder colors */
.explorer-item[data-type="folder"]:not([data-type="file"]) .item-name[title*="src"] ~ .item-icon i,
.explorer-item[data-type="folder"]:not([data-type="file"]) .item-header:has(.item-name[title*="src"]) .item-icon i {
    color: #6997D5 !important;
}

.explorer-item[data-type="folder"]:not([data-type="file"]) .item-header:has(.item-name[title*="assets"]) .item-icon i,
.explorer-item[data-type="folder"]:not([data-type="file"]) .item-header:has(.item-name[title*="images"]) .item-icon i {
    color: #8BC34A !important;
}

.explorer-item[data-type="folder"]:not([data-type="file"]) .item-header:has(.item-name[title*="styles"]) .item-icon i,
.explorer-item[data-type="folder"]:not([data-type="file"]) .item-header:has(.item-name[title*="css"]) .item-icon i.fa-folder,
.explorer-item[data-type="folder"]:not([data-type="file"]) .item-header:has(.item-name[title*="css"]) .item-icon i.fa-folder-open {
    color: #42A5F5 !important;
}

.explorer-item[data-type="folder"]:not([data-type="file"]) .item-header:has(.item-name[title*="scripts"]) .item-icon i,
.explorer-item[data-type="folder"]:not([data-type="file"]) .item-header:has(.item-name[title*="js"]) .item-icon i.fa-folder,
.explorer-item[data-type="folder"]:not([data-type="file"]) .item-header:has(.item-name[title*="js"]) .item-icon i.fa-folder-open {
    color: #FFCA28 !important;
}

/* ================================================
   TAB BAR - VSCode Professional Style
   ================================================ */

.tab-bar {
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    min-height: 35px;
    padding: 0 4px;
    gap: 0;
    align-items: stretch;
    scrollbar-width: thin;
   overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: none;
    border-right: 1px solid var(--border);
    cursor: pointer;
    font-size: 13px;
    min-width: 100px;
    max-width: 180px;
    position: relative;
    opacity: 0.7;
    transform: none;
    transition: all 0.15s ease;
    border-radius: 0;
    margin: 0;
   flex: 0 0 auto;
}

.tab-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tab-icon {
    flex-shrink: 0;
}

.tab:hover {
    opacity: 0.9;
    background: rgba(255, 255, 255, 0.05);
}

.tab.active {
    background: var(--background);
    opacity: 1;
    border-bottom: 2px solid var(--primary-color);
    border-right-color: var(--border);
    box-shadow: none;
    transform: none;
}

.tab.active::before {
    display: none;
}

.tab.active .tab-name {
    color: var(--text);
    font-weight: 500;
}

/* Tab close button - VSCode style */
.tab-close {
    opacity: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    margin-left: auto;
    font-size: 12px;
    transition: all 0.15s ease;
}

.tab:hover .tab-close {
    opacity: 0.6;
}

.tab-close:hover {
    opacity: 1 !important;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text);
}

/* Modified indicator */
.tab.modified .tab-name::after {
    content: "•";
    margin-left: 4px;
    color: var(--accent-warning);
}

/* ================================================
   SIDEBAR - VSCode Professional Style
   ================================================ */

#sidebar {
    background: var(--panel);
    border-right: 1px solid var(--border);
}

.sidebar-header {
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    padding: 8px 12px;
    min-height: 35px;
}

.sidebar-header h2,
#project-name {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text);
    opacity: 0.8;
}

/* Sidebar tabs - VSCode activity bar style */
.sidebar-tabs {
    background: transparent;
    border-bottom: 1px solid var(--border);
    padding: 0;
    gap: 0;
}

.sidebar-tab {
    flex: 1;
    padding: 10px 12px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    transition: all 0.15s ease;
    color: var(--text);
    opacity: 0.6;
}

.sidebar-tab:hover {
    opacity: 0.8;
    background: rgba(255, 255, 255, 0.03);
}

.sidebar-tab.active {
    opacity: 1;
    background: transparent;
    border-bottom-color: var(--primary-color);
    color: var(--text);
    box-shadow: none;
}

/* File Explorer items - VSCode style */
.explorer-item .item-header {
    padding: 4px 8px;
    border-radius: 0;
    min-height: 24px;
    transition: background 0.1s ease;
}

.explorer-item .item-header:hover {
    background: rgba(255, 255, 255, 0.04);
}

.explorer-item.active > .item-header {
    background: var(--primary-color);
    color: white;
    border-radius: 0;
    box-shadow: none;
}

.explorer-item.active > .item-header .item-icon i {
    filter: brightness(1.3);
}

.item-name {
    font-size: 13px;
    font-weight: 400;
}

/* File explorer actions - compact style */
.file-explorer-actions {
    padding: 8px;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.02);
}

.file-explorer-actions .btn {
    padding: 4px 8px;
    font-size: 11px;
    border-radius: 3px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    font-weight: 500;
}

.file-explorer-actions .btn:hover {
    background: var(--background);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* ================================================
   TOOLBAR - VSCode Command Bar Style
   ================================================ */

#toolbar {
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    padding: 4px 8px;
    gap: 4px;
}

.toolbar-group {
    padding: 0 6px;
    gap: 2px;
    border-right: 1px solid rgba(128, 128, 128, 0.2);
}

.toolbar-group:last-child {
    border-right: none;
}

/* Toolbar label */
.toolbar-group::before {
    content: attr(data-label);
    display: none; /* Hidden by default, can be shown with CSS */
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text);
    opacity: 0.4;
    margin-right: 4px;
}

.btn-icon {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    font-size: 14px;
    transition: all 0.1s ease;
}

.btn-icon:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
}

.btn-icon.active {
    background: var(--primary-color);
    color: white;
    box-shadow: none;
}

/* ================================================
   HEADER - Professional Style
   ================================================ */

#header {
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    padding: 6px 12px;
}

.header-top {
    margin-bottom: 6px;
}

.app-title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.3px;
}

.header-actions .btn {
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 4px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    font-weight: 500;
}

.header-actions .btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--primary-color);
}

/* ================================================
   STATUS BAR - Keep Original Theme Colors
   ================================================ */

/* Status bar styling removed - using hcodx-pro-enhancements.css */

/* ================================================
   CONTEXT MENU - VSCode Style
   ================================================ */

.context-menu {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.24), 0 2px 8px rgba(0, 0, 0, 0.12);
    padding: 4px;
    min-width: 200px;
    backdrop-filter: blur(12px);
}

.context-menu-item {
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.1s ease;
}

.context-menu-item:hover {
    background: var(--primary-color);
    color: white;
}

.context-menu-item i {
    width: 16px;
    font-size: 12px;
    opacity: 0.7;
}

.context-menu-item:hover i {
    opacity: 1;
}

.context-menu-separator {
    height: 1px;
    background: var(--border);
    margin: 4px 8px;
}

/* Keyboard shortcut hint in context menu */
.context-menu-item .shortcut {
    margin-left: auto;
    font-size: 11px;
    opacity: 0.5;
    font-family: system-ui, -apple-system, sans-serif;
}

.context-menu-item:hover .shortcut {
    opacity: 0.8;
}

/* ================================================
   MODAL DIALOGS - Professional Style
   ================================================ */

.modal {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}

.modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.02);
}

.modal-title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.2px;
}

.modal-close {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    font-size: 18px;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
}

.modal-body {
    padding: 20px;
}

.modal-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.02);
}

/* ================================================
   BUTTONS - Professional Style
   ================================================ */

.btn {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 4px;
    transition: all 0.15s ease;
    border: 1px solid transparent;
}

.btn:hover {
    transform: none;
    box-shadow: none;
}

.btn::before {
    display: none; /* Remove ripple effect for cleaner look */
}

.btn-primary {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.btn-primary:hover {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
}

.btn-secondary {
    background: transparent;
    border-color: var(--border);
    color: var(--text);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--primary-color);
}

/* ================================================
   STATUS BAR - Keep Original Theme Colors
   ================================================ */
/* Status bar uses theme colors, not forced blue */
#footer {
    /* Keep original theme colors - no forced blue */
    background: var(--panel) !important;
    border-top: 1px solid var(--border) !important;
}

.status-item {
    color: var(--text) !important;
    opacity: 0.85 !important;
}

.status-item:hover {
    opacity: 1 !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

.theme-light .status-item:hover {
    background: rgba(0, 0, 0, 0.05) !important;
}

/* ================================================
   TOAST NOTIFICATIONS - Minimal Style
   ================================================ */

.toast {
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 13px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    border-left-width: 3px;
    backdrop-filter: blur(8px);
}

.toast-icon {
    width: 22px;
    height: 22px;
    font-size: 12px;
}
@media (max-width: 768px) {
    .toast.toast-compact {
        padding: 8px 10px;
        font-size: 12px;
        border-radius: 5px;
    }

    .toast.toast-compact .toast-icon {
        width: 18px;
        height: 18px;
        font-size: 10px;
    }
}
/* ================================================
   PREVIEW PANEL - Clean Style
   ================================================ */

.preview-toolbar {
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    padding: 6px 12px;
    min-height: 35px;
}

.device-selection {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
    padding: 2px;
    gap: 2px;
}

.device-btn {
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 12px;
}

.device-btn.active {
    background: var(--primary-color);
    box-shadow: none;
}

/* ================================================
   SCROLLBAR - Thin Style
   ================================================ */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, 0.3);
    border-radius: 4px;
    border: none;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(128, 128, 128, 0.5);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(128, 128, 128, 0.3) transparent;
}

/* ================================================
   VALIDATION PANEL - Professional Style
   ================================================ */

.validation-panel {
    border-radius: 0;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
}

.validation-header {
    background: var(--panel);
    padding: 10px 12px;
}

.validation-header h3 {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.validation-item {
    padding: 8px 12px;
    border-radius: 0;
    border-left-width: 3px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--border);
}

.validation-item:hover {
    transform: none;
    background: rgba(255, 255, 255, 0.03);
}

/* ================================================
   SNIPPETS PANEL - Professional Style
   ================================================ */

.snippets-panel {
    border-radius: 0;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
}

.snippets-header {
    background: var(--panel);
}

.snippet-item {
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 8px;
}

.snippet-item:hover {
    transform: none;
    border-color: var(--primary-color);
}

/* ================================================
   LAUNCHER - Professional Style
   ================================================ */

.launcher-container {
    border-radius: 12px;
}

.launcher-card {
    border-radius: 8px;
    transition: all 0.2s ease;
}

.launcher-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* ================================================
   KEYBOARD SHORTCUTS INDICATOR
   ================================================ */

kbd {
    background: var(--panel);
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: 2px 6px;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: var(--text) !important;
}

/* ================================================
   SHORTCUTS TIP SECTION - Theme Compatible
   ================================================ */

.shortcuts-section {
    background: rgba(67, 97, 238, 0.08) !important;
    border-left: 4px solid var(--primary-color) !important;
    border-radius: 8px !important;
    padding: 15px !important;
}

.theme-dark .shortcuts-section {
    background: rgba(76, 201, 240, 0.1) !important;
}

.shortcuts-section h4 {
    color: var(--primary-color) !important;
    margin-top: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

.shortcuts-section p {
    color: var(--text) !important;
    font-size: 14px !important;
    margin: 5px 0 !important;
    line-height: 1.5 !important;
}

.shortcuts-section strong {
    color: var(--primary-color) !important;
}

.shortcuts-section kbd {
    background: var(--primary-color) !important;
    color: #fff !important;
    border: none !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
    margin: 0 2px !important;
}

/* ================================================
   ACCESSIBILITY IMPROVEMENTS
   ================================================ */

:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.btn:focus-visible,
.btn-icon:focus-visible {
    outline-offset: 0;
    box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--primary-color);
}

/* ================================================
   ANIMATION REFINEMENTS
   ================================================ */

/* Subtle animations */
/* @keyframes fadeIn — duplicate removed */

/* @keyframes slideIn — duplicate removed */

/* Apply to appropriate elements */
.modal {
    animation: slideIn 0.15s ease;
}

.context-menu {
    animation: slideIn 0.1s ease;
}

.toast {
    animation: slideIn 0.2s ease;
}

/* ================================================
   DARK THEME SPECIFIC ADJUSTMENTS
   ================================================ */

/* Dark theme JS icon */
.theme-dark .explorer-item[data-type="file"] .item-icon i.fa-js {
    background: #323330;
}

/* ================================================
   LIGHT THEME SPECIFIC ADJUSTMENTS
   ================================================ */

/* Light theme JS icon */
.theme-light .explorer-item[data-type="file"] .item-icon i.fa-js {
    background: #F7DF1E;
    color: #323330 !important;
}

.theme-light .btn-icon:hover {
    background: rgba(0, 0, 0, 0.05);
}

.theme-light .tab:hover {
    background: rgba(0, 0, 0, 0.03);
}

.theme-light .tab.active {
    background: var(--background);
}

/* ================================================
   FILE TYPE BADGE (Optional enhancement)
   ================================================ */

.file-type-badge {
    font-size: 9px;
    padding: 1px 4px;
    border-radius: 2px;
    font-weight: 600;
    text-transform: uppercase;
    margin-left: 4px;
    opacity: 0.7;
}

.file-type-badge.html { background: rgba(227, 76, 38, 0.2); color: #E34C26; }
.file-type-badge.css { background: rgba(38, 77, 228, 0.2); color: #264DE4; }
.file-type-badge.js { background: rgba(247, 223, 30, 0.2); color: #F7DF1E; }
.file-type-badge.json { background: rgba(203, 203, 65, 0.2); color: #CBCB41; }
.file-type-badge.md { background: rgba(81, 154, 186, 0.2); color: #519ABA; }

/* ================================================
   RESPONSIVE ADJUSTMENTS
   ================================================ */

@media (max-width: 1024px) {
    .sidebar-tab {
        font-size: 10px;
        padding: 8px 10px;
    }
    
    .file-explorer-actions .btn {
        font-size: 10px;
        padding: 3px 6px;
    }
    
    .btn-icon {
        width: 32px;
        height: 32px;
    }
}

@media (max-width: 768px) {
    .tab {
        min-width: 80px;
        max-width: 140px;
        padding: 6px 8px;
        font-size: 12px;
    }
    
    .context-menu {
        min-width: 180px;
    }
    
    .context-menu-item {
        padding: 10px 12px;
        font-size: 14px;
    }
}

/* ================================================
   FOOTER TOGGLE - Moved to Header
   ================================================ */

/* Hide original footer toggle button in workspace */
button.footer-toggle#footer-toggle {
    position: fixed !important;
    bottom: auto !important;
    right: auto !important;
    top: auto !important;
    left: auto !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    background: transparent !important;
    border: 1px solid var(--border) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    font-size: 10px !important;
    color: var(--text) !important;
    opacity: 0.7 !important;
    transition: all 0.2s ease !important;
    z-index: 1000 !important;
}

button.footer-toggle#footer-toggle:hover {
    opacity: 1 !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
    transform: none !important;
}

.theme-light button.footer-toggle#footer-toggle:hover {
    background: rgba(0, 0, 0, 0.05) !important;
}

button.footer-toggle#footer-toggle.open {
    transform: none !important;
    background: var(--primary-color) !important;
    color: #fff !important;
    border-color: var(--primary-color) !important;
    opacity: 1 !important;
}

button.footer-toggle#footer-toggle.open:hover {
    transform: none !important;
}

button.footer-toggle#footer-toggle i {
    font-size: 10px !important;
    transition: transform 0.2s ease !important;
}

button.footer-toggle#footer-toggle.open i {
    transform: rotate(180deg) !important;
}

/* ================================================
   FORMATTER / MINIFIER / OBFUSCATOR MODALS
   Professional UI Enhancement
   ================================================ */

/* Modal Overlay Enhancement */
#format-options-modal.modal-overlay,
#minify-modal.modal-overlay,
#obfuscate-modal.modal-overlay {
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

/* Modal Container */
.format-modal-redesigned,
.minify-modal-redesigned,
.obfuscate-modal-redesigned {
    background: var(--background) !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
    max-width: 600px !important;
    width: 95% !important;
    max-height: 85vh !important;
    overflow: hidden !important;
    border: 1px solid var(--border) !important;
}

.theme-light .format-modal-redesigned,
.theme-light .minify-modal-redesigned,
.theme-light .obfuscate-modal-redesigned {
    background: #ffffff !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
}

/* Modal Header */
.format-header,
.minify-header,
.obfuscate-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%) !important;
    padding: 20px 24px !important;
    border-bottom: none !important;
}

.format-header-content,
.minify-header-content,
.obfuscate-header-content {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

.format-icon-wrapper,
.minify-icon-wrapper,
.obfuscate-icon-wrapper {
    width: 48px !important;
    height: 48px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.format-icon,
.minify-icon,
.obfuscate-icon {
    width: 28px !important;
    height: 28px !important;
    color: #fff !important;
}

.format-title-section,
.minify-title-section,
.obfuscate-title-section {
    flex: 1 !important;
}

.format-header .modal-title,
.minify-header .modal-title,
.obfuscate-header .modal-title {
    color: #fff !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.format-subtitle,
.minify-subtitle,
.obfuscate-subtitle {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 13px !important;
    margin: 4px 0 0 0 !important;
}

.format-close,
.minify-close,
.obfuscate-close {
    background: rgba(255, 255, 255, 0.15) !important;
    border: none !important;
    border-radius: 8px !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.format-close:hover,
.minify-close:hover,
.obfuscate-close:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    transform: scale(1.05) !important;
}

.format-close svg,
.minify-close svg,
.obfuscate-close svg {
    color: #fff !important;
}

/* Modal Body */
.format-body,
.minify-body,
.obfuscate-body {
    padding: 24px !important;
    overflow-y: auto !important;
    max-height: calc(85vh - 180px) !important;
    background: var(--background) !important;
}

.theme-light .format-body,
.theme-light .minify-body,
.theme-light .obfuscate-body {
    background: #ffffff !important;
}

/* Info Cards */
.format-info-card,
.minify-info-card,
.obfuscate-info-card {
    background: var(--panel) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    padding: 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin-bottom: 20px !important;
}

.theme-light .format-info-card,
.theme-light .minify-info-card,
.theme-light .obfuscate-info-card {
    background: #f8f9fa !important;
    border-color: #e9ecef !important;
}

.info-card-icon {
    width: 44px !important;
    height: 44px !important;
    background: var(--background) !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.theme-light .info-card-icon {
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

.info-card-icon svg {
    color: var(--primary-color) !important;
    width: 22px !important;
    height: 22px !important;
}

.info-label {
    font-size: 11px !important;
    color: var(--text) !important;
    opacity: 0.6 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 2px !important;
}

.info-value {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
}

/* Presets Section */
.format-presets,
.minify-presets,
.obfuscate-presets {
    margin-bottom: 20px !important;
}

.preset-label {
    font-size: 12px !important;
    color: var(--text) !important;
    opacity: 0.7 !important;
    margin-bottom: 10px !important;
    font-weight: 500 !important;
}

.preset-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.preset-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 14px !important;
    background: var(--panel) !important;
    border: 1px solid var(--border) !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--text) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.theme-light .preset-pill {
    background: #f8f9fa !important;
    border-color: #e9ecef !important;
}

.preset-pill:hover:not(.preset-pill-active) {
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
    background: rgba(67, 97, 238, 0.08) !important;
}

.preset-pill.preset-pill-active {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
}

.preset-pill svg {
    width: 14px !important;
    height: 14px !important;
}

/* Options Container */
.format-options-container,
.minify-options-container,
.obfuscate-options-container {
    margin-bottom: 20px !important;
}

.options-section-card {
    background: var(--panel) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    padding: 16px !important;
    margin-bottom: 16px !important;
}

.theme-light .options-section-card {
    background: #f8f9fa !important;
    border-color: #e9ecef !important;
}

.section-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--border) !important;
}

.section-icon {
    color: var(--primary-color) !important;
    width: 20px !important;
    height: 20px !important;
}

.section-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    margin: 0 !important;
}

/* Options Tabs */
.options-tabs {
    display: flex !important;
    gap: 4px !important;
    margin-bottom: 14px !important;
    background: var(--background) !important;
    padding: 4px !important;
    border-radius: 8px !important;
}

.theme-light .options-tabs {
    background: #fff !important;
}

.option-tab {
    flex: 1 !important;
    padding: 8px 12px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--text) !important;
    opacity: 0.6 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.option-tab:hover:not(.option-tab-active) {
    opacity: 1 !important;
    background: rgba(67, 97, 238, 0.08) !important;
}

.option-tab.option-tab-active {
    background: var(--primary-color) !important;
    color: #fff !important;
    opacity: 1 !important;
}

/* Option Items */
.format-option,
.minify-option,
.obfuscate-option {
    background: var(--background) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    margin-bottom: 8px !important;
    transition: all 0.2s ease !important;
}

.theme-light .format-option,
.theme-light .minify-option,
.theme-light .obfuscate-option {
    background: #fff !important;
    border-color: #e9ecef !important;
}

.format-option:hover,
.minify-option:hover,
.obfuscate-option:hover {
    border-color: var(--primary-color) !important;
}

.format-option label,
.minify-option label,
.obfuscate-option label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    cursor: pointer !important;
    margin: 0 !important;
}

.format-option input[type="checkbox"],
.minify-option input[type="checkbox"],
.obfuscate-option input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    accent-color: var(--primary-color) !important;
    cursor: pointer !important;
}

.option-content {
    flex: 1 !important;
}

.option-text {
    display: block !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--text) !important;
    margin-bottom: 2px !important;
}

.option-desc {
    display: block !important;
    font-size: 11px !important;
    color: var(--text) !important;
    opacity: 0.6 !important;
}

/* Preview Cards */
.minify-preview-card,
.obfuscate-preview-card {
    background: rgba(6, 214, 160, 0.08) !important;
    border: 1px solid var(--accent-success) !important;
    border-radius: 10px !important;
    padding: 16px !important;
    margin-bottom: 20px !important;
}

.theme-light .minify-preview-card,
.theme-light .obfuscate-preview-card {
    background: rgba(6, 214, 160, 0.05) !important;
}

/* Size Analysis */
.size-comparison {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.size-item {
    background: var(--background) !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    text-align: center !important;
    flex: 1 !important;
}

.theme-light .size-item {
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.size-label {
    font-size: 10px !important;
    color: var(--text) !important;
    opacity: 0.6 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 4px !important;
}

.size-value {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--text) !important;
}

.reduction-badge,
.protection-level {
    background: var(--accent-success) !important;
    color: #fff !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-align: center !important;
}

/* Modal Footer */
.format-modal-redesigned .modal-footer,
.minify-modal-redesigned .modal-footer,
.obfuscate-modal-redesigned .modal-footer {
    background: var(--panel) !important;
    border-top: 1px solid var(--border) !important;
    padding: 16px 24px !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}

.theme-light .format-modal-redesigned .modal-footer,
.theme-light .minify-modal-redesigned .modal-footer,
.theme-light .obfuscate-modal-redesigned .modal-footer {
    background: #f8f9fa !important;
    border-color: #e9ecef !important;
}

/* Modal Buttons */
.format-btn-primary,
.minify-btn-primary,
.obfuscate-btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%) !important;
    color: #fff !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.format-btn-primary:hover,
.minify-btn-primary:hover,
.obfuscate-btn-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3) !important;
}

.format-btn-secondary,
.minify-btn-secondary,
.obfuscate-btn-secondary,
.format-btn-preview,
.minify-btn-preview,
.obfuscate-btn-preview {
    background: var(--background) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.theme-light .format-btn-secondary,
.theme-light .minify-btn-secondary,
.theme-light .obfuscate-btn-secondary,
.theme-light .format-btn-preview,
.theme-light .minify-btn-preview,
.theme-light .obfuscate-btn-preview {
    background: #fff !important;
    border-color: #e9ecef !important;
}

.format-btn-secondary:hover,
.minify-btn-secondary:hover,
.obfuscate-btn-secondary:hover,
.format-btn-preview:hover,
.minify-btn-preview:hover,
.obfuscate-btn-preview:hover {
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}

/* Form Controls */
.format-modal-redesigned .form-control,
.minify-modal-redesigned .form-control,
.obfuscate-modal-redesigned .form-control,
.format-modal-redesigned select,
.minify-modal-redesigned select,
.obfuscate-modal-redesigned select {
    background: var(--background) !important;
    border: 1px solid var(--border) !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    color: var(--text) !important;
    transition: all 0.2s ease !important;
}

.theme-light .format-modal-redesigned .form-control,
.theme-light .minify-modal-redesigned .form-control,
.theme-light .obfuscate-modal-redesigned .form-control,
.theme-light .format-modal-redesigned select,
.theme-light .minify-modal-redesigned select,
.theme-light .obfuscate-modal-redesigned select {
    background: #fff !important;
    border-color: #e9ecef !important;
}

.format-modal-redesigned .form-control:focus,
.minify-modal-redesigned .form-control:focus,
.obfuscate-modal-redesigned .form-control:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15) !important;
    outline: none !important;
}

/* Backup Option Warning */
.backup-option {
    background: rgba(255, 193, 7, 0.1) !important;
    border: 1px solid rgba(255, 193, 7, 0.4) !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
}

.theme-dark .backup-option {
    background: rgba(255, 193, 7, 0.08) !important;
}

/* CSS Info Message */
.css-info-message {
    background: rgba(67, 97, 238, 0.08) !important;
    border: 1px solid rgba(67, 97, 238, 0.3) !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
}

.css-info-message svg {
    color: var(--primary-color) !important;
    flex-shrink: 0 !important;
}

.css-info-message p {
    color: var(--text) !important;
    font-size: 12px !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

/* Options Input/Select Groups */
.option-input-group,
.option-select-group {
    background: var(--panel) !important;
    border-left: 3px solid var(--primary-color) !important;
    border-radius: 0 8px 8px 0 !important;
    padding: 12px !important;
    margin: 8px 0 8px 30px !important;
}

.theme-light .option-input-group,
.theme-light .option-select-group {
    background: #f8f9fa !important;
}

/* Responsive Modal Adjustments */
@media (max-width: 768px) {
    .format-modal-redesigned,
    .minify-modal-redesigned,
    .obfuscate-modal-redesigned {
       max-width: 540px !important;
        width: calc(100% - 24px) !important;
        max-height: 90vh !important;
        border-radius: 12px !important;
        margin: 12px auto !important;
    }
    
    .format-header,
    .minify-header,
    .obfuscate-header {
        padding: 16px !important;
    }
    
    .format-body,
    .minify-body,
    .obfuscate-body {
        padding: 16px !important;
       max-height: calc(90vh - 160px) !important;
    }
    
    .preset-pills {
        flex-wrap: wrap !important;
    }
    
    .preset-pill {
        flex: 1 1 auto !important;
        justify-content: center !important;
    }
    
    .options-tabs {
        flex-wrap: wrap !important;
    }
    
    .option-tab {
        flex: 1 1 auto !important;
        min-width: 70px !important;
    }
}
@media (max-width: 480px) {

  /* 🧱 Modal container */
  .obfuscate-modal-redesigned {
    width: 100% !important;
    height: 100dvh !important; /* important for mobile browsers */
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* 📌 Header (fixed) */
  .obfuscate-header {
    padding: 12px 14px !important;
    flex-shrink: 0 !important;
  }

  .obfuscate-header .modal-title {
    font-size: 16px !important;
    line-height: 1.2 !important;
  }

  .obfuscate-subtitle {
    font-size: 11px !important;
  }

  .obfuscate-icon-wrapper {
    width: 36px !important;
    height: 36px !important;
  }

  /* 📜 Scrollable body */
  .obfuscate-body {
    padding: 12px !important;
    overflow-y: auto !important;
    flex: 1 1 auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* 📌 Footer (always visible) */
  .obfuscate-modal-redesigned .modal-footer {
    position: sticky !important;
    bottom: 0 !important;
    background: var(--modal-bg, #0f1115);
    padding: 10px !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
    border-top: 1px solid rgba(255,255,255,.08);
  }

  /* 🔘 Buttons */
  .obfuscate-btn-secondary,
  .obfuscate-btn-preview,
  .obfuscate-btn-primary {
    width: 100% !important;
    height: 44px !important;
    font-size: 14px !important;
    justify-content: center !important;
  }

  /* 🧩 Cards & layouts */
  .obfuscate-info-card,
  .size-comparison {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .preset-pill {
    width: 100% !important;
    justify-content: center !important;
  }

  .options-tabs {
    flex-direction: column !important;
    gap: 6px !important;
  }

  .option-tab {
    width: 100% !important;
    padding: 10px !important;
  }

  .option-input-group,
  .option-select-group {
    margin-left: 12px !important;
    margin-right: 0 !important;
  }
}


/* ═══ SOURCE 3/4: vscode-features.css (patch) ══════════════════════════ */

/**
 * HCODX VS Code-like Features Styles
 * - Search in Files
 * - Integrated Console
 */
 
/* ============================================
   SEARCH IN FILES
   ============================================ */

#search-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.search-panel-header {
  padding: 12px;
  border-bottom: 1px solid var(--border-color, #3c3c3c);
  background: var(--panel, #252526);
}

.search-input-container {
  display: flex;
  align-items: center;
  background: var(--input-bg, #3c3c3c);
  border: 1px solid var(--border-color, #3c3c3c);
  border-radius: 4px;
  padding: 0 8px;
  transition: border-color 0.2s;
}

.search-input-container:focus-within {
  border-color: var(--primary-color, #4361ee);
}

.search-icon {
  color: var(--text-muted, #888);
  font-size: 12px;
  margin-right: 8px;
}

.search-input-container input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-color, #d4d4d4);
  padding: 8px 0;
  font-size: 13px;
  outline: none;
}

.search-input-container input::placeholder {
  color: var(--text-muted, #6e6e6e);
}

.search-clear-btn {
  background: transparent;
  border: none;
  color: var(--text-muted, #888);
  cursor: pointer;
  padding: 4px;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.search-clear-btn:hover {
  opacity: 1;
}

.search-options {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}

.search-option {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 3px;
  background: var(--input-bg, #3c3c3c);
  border: 1px solid transparent;
  transition: all 0.2s;
}

.search-option:hover {
  background: var(--hover-bg, #4a4a4a);
}

.search-option input {
  display: none;
}

.search-option input:checked + span {
  color: var(--primary-color, #4361ee);
}

.search-option input:checked ~ .search-option {
  border-color: var(--primary-color, #4361ee);
  background: rgba(67, 97, 238, 0.1);
}

.search-option span {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #888);
}

.toggle-replace-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  background: transparent;
  border: none;
  color: var(--text-muted, #888);
  cursor: pointer;
  font-size: 12px;
  padding: 4px 0;
}

.toggle-replace-btn:hover {
  color: var(--text-color, #d4d4d4);
}

.search-replace-container {
  margin-top: 8px;
}

.search-replace-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.btn-small {
  padding: 4px 10px;
  font-size: 11px;
  background: var(--input-bg, #3c3c3c);
  border: 1px solid var(--border-color, #4a4a4a);
  color: var(--text-color, #d4d4d4);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-small:hover {
  background: var(--hover-bg, #4a4a4a);
}

.search-results-info {
  padding: 8px 12px;
  font-size: 11px;
  color: var(--text-muted, #888);
  background: var(--panel, #252526);
  border-bottom: 1px solid var(--border-color, #3c3c3c);
}

.search-results-info.no-results {
  color: var(--error-color, #f44336);
}

.search-results-container {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}

.no-results-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--text-muted, #888);
  text-align: center;
}

.no-results-message i {
  font-size: 32px;
  margin-bottom: 12px;
  opacity: 0.5;
}

.search-result-file {
  margin-bottom: 4px;
}

.search-result-file.collapsed .search-result-matches {
  display: none;
}

.search-result-file-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background 0.15s;
}

.search-result-file-header:hover {
  background: var(--hover-bg, rgba(255,255,255,0.05));
}

.search-result-file-header .file-name {
  flex: 1;
  font-size: 12px;
  color: var(--text-color, #d4d4d4);
}

.search-result-file-header .match-count {
  font-size: 10px;
  padding: 2px 6px;
  background: var(--primary-color, #4361ee);
  color: white;
  border-radius: 10px;
}

.search-result-matches {
  background: var(--panel-darker, #1e1e1e);
}

.search-result-match {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 4px 12px 4px 32px;
  cursor: pointer;
  transition: background 0.15s;
  font-size: 12px;
  line-height: 1.5;
}

.search-result-match:hover {
  background: var(--hover-bg, rgba(255,255,255,0.05));
}

.search-result-match.current {
  background: rgba(67, 97, 238, 0.2);
}

.search-result-match .line-number {
  color: var(--text-muted, #888);
  min-width: 30px;
  text-align: right;
}

.search-result-match .match-text {
  flex: 1;
  color: var(--text-color, #d4d4d4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Consolas', 'Monaco', monospace;
}

.search-highlight {
  background: rgba(255, 213, 0, 0.3);
  color: #ffeb3b;
  padding: 1px 2px;
  border-radius: 2px;
}


/* ============================================
   INTEGRATED CONSOLE
   ============================================ */

.console-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--panel, #1e1e1e);
  border-top: 1px solid var(--border-color, #3c3c3c);
  z-index: 100;
  transform: translateY(calc(100% - var(--console-header-height, 35px)));
  transition: transform 0.25s ease;
}

.console-panel.open {
  transform: translateY(0);
}

.console-header {
  display: flex;
  align-items: center;
  padding: 0 12px;
  height: var(--console-header-height, 35px);
  background: var(--panel-darker, #252526);
  border-bottom: 1px solid var(--border-color, #3c3c3c);
  cursor: pointer;
}

.console-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-color, #d4d4d4);
}

.console-title i {
  color: var(--primary-color, #4361ee);
}

.console-count {
  font-size: 10px;
  padding: 2px 6px;
  background: var(--border-color, #3c3c3c);
  border-radius: 10px;
  color: var(--text-muted, #888);
}

.console-filters {
  display: flex;
  gap: 4px;
  margin-left: auto;
  margin-right: 12px;
}

.console-filter-btn {
  background: transparent;
  border: none;
  color: var(--text-muted, #888);
  cursor: pointer;
  padding: 4px 8px;
  font-size: 11px;
  border-radius: 3px;
  transition: all 0.15s;
}

.console-filter-btn:hover {
  background: var(--hover-bg, rgba(255,255,255,0.05));
}

.console-filter-btn.active {
  background: var(--primary-color, #4361ee);
  color: white;
}

.console-actions {
  display: flex;
  gap: 4px;
}

.console-action-btn {
  background: transparent;
  border: none;
  color: var(--text-muted, #888);
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 3px;
  transition: all 0.15s;
}

.console-action-btn:hover {
  background: var(--hover-bg, rgba(255,255,255,0.05));
  color: var(--text-color, #d4d4d4);
}

.console-body {
  height: 200px;
  display: flex;
  flex-direction: column;
  background: var(--panel, #1e1e1e);
}

.console-logs {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 12px;
}

.console-log-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 12px;
  border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.03));
}

.console-log-item:hover {
  background: var(--hover-bg, rgba(255,255,255,0.02));
}

.console-log-time {
  color: var(--text-muted, #6e6e6e);
  font-size: 10px;
  min-width: 70px;
}

.console-log-item i {
  font-size: 11px;
  min-width: 16px;
  text-align: center;
}

.console-log-message {
  flex: 1;
  color: var(--text-color, #d4d4d4);
  word-break: break-word;
  white-space: pre-wrap;
}

.console-log {
  color: var(--text-color, #d4d4d4);
}

.console-log i {
  color: #4fc3f7;
}

.console-warn {
  background: rgba(255, 193, 7, 0.1);
}

.console-warn i {
  color: #ffc107;
}

.console-warn .console-log-message {
  color: #ffc107;
}

.console-error {
  background: rgba(244, 67, 54, 0.1);
}

.console-error i {
  color: #f44336;
}

.console-error .console-log-message {
  color: #f44336;
}

.console-info i {
  color: #2196f3;
}

.console-debug i {
  color: #9c27b0;
}

.console-cleared {
  padding: 12px;
  color: var(--text-muted, #6e6e6e);
  font-style: italic;
  text-align: center;
}

.console-input-container {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: var(--panel-darker, #252526);
  border-top: 1px solid var(--border-color, #3c3c3c);
}

.console-prompt {
  color: var(--primary-color, #4361ee);
  font-weight: bold;
  margin-right: 8px;
  font-family: 'Consolas', 'Monaco', monospace;
}

.console-input-container input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-color, #d4d4d4);
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 12px;
  outline: none;
}

.console-input-container input::placeholder {
  color: var(--text-muted, #6e6e6e);
}

/* Console Status Bar Button */
#status-console-btn {
  cursor: pointer;
  transition: all 0.15s;
}

#status-console-btn:hover {
  background: var(--hover-bg, rgba(255,255,255,0.1));
}

.console-badge {
  font-size: 9px;
  padding: 1px 5px;
  background: var(--border-color, #3c3c3c);
  border-radius: 8px;
  margin-left: 4px;
}

.console-badge.has-errors {
  background: #f44336;
  color: white;
}

.console-badge.has-warnings {
  background: #ffc107;
  color: #333;
}

/* ============================================
   LIGHT THEME OVERRIDES
   ============================================ */

.theme-light .console-panel,
.theme-light #search-panel {
  --panel: #ffffff;
  --panel-darker: #f5f5f5;
  --input-bg: #ffffff;
  --border-color: #e0e0e0;
  --text-color: #333333;
  --text-muted: #666666;
  --hover-bg: rgba(0,0,0,0.05);
}

.theme-light .search-highlight {
  background: rgba(255, 213, 0, 0.5);
  color: #b38600;
}

.theme-light .console-log-message {
  color: #333333;
}

.theme-light .console-warn .console-log-message {
  color: #b38600;
}

.theme-light .console-error .console-log-message {
  color: #c62828;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {

  .console-body {
    height: 150px;
  }

  .search-options {
    flex-wrap: wrap;
  }
}

/* ============================================
   SCROLLBAR STYLING
   ============================================ */

.search-results-container::-webkit-scrollbar,
.console-logs::-webkit-scrollbar {
  width: 8px;
}

.search-results-container::-webkit-scrollbar-track,
.console-logs::-webkit-scrollbar-track {
  background: transparent;
}

.search-results-container::-webkit-scrollbar-thumb,
.console-logs::-webkit-scrollbar-thumb {
  background: var(--border-color, #3c3c3c);
  border-radius: 4px;
}

.search-results-container::-webkit-scrollbar-thumb:hover,
.console-logs::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted, #555);
}


/* ═══ SOURCE 4/4: light-theme-fix.css (patch) ══════════════════════════ */

.theme-light{color:#333!important}.theme-light .launcher-container{background:rgba(255,255,255,.98)!important;color:#333!important}.theme-light .launcher-header{border-bottom-color:rgba(0,0,0,.1)!important}.theme-light .brand-text p{color:#666!important}.theme-light .launcher-section h2{color:#333!important}.theme-light .launcher-card{background:#fff!important;border-color:rgba(102,126,234,.1)!important;color:#333!important}.theme-light .card-content h3{color:#333!important}.theme-light .card-content p{color:#666!important}.theme-light .recent-project-item{background:#fff!important;border-color:rgba(0,0,0,.1)!important}.theme-light .project-info h4{color:#333!important}.theme-light .project-info small{color:#666!important}.theme-light .no-recent{color:#666!important}.theme-light .tip-desc{color:#555!important}.theme-light .plus{color:#667eea!important}.theme-light .footer-status{color:#666!important}.theme-light .website-footer{background:linear-gradient(135deg,#f8f9fa 0,#e9ecef 100%)!important;color:#333!important}.theme-light .footer-section h3{color:#495057!important}.theme-light .footer-section h4{color:#333!important}.theme-light .footer-section p{color:#666!important}.theme-light .footer-links a{color:#495057!important}.theme-light .footer-links a:hover{color:#667eea!important}.theme-light .social-link{background:rgba(102,126,234,.1)!important;color:#667eea!important}.theme-light .footer-bottom{background:rgba(0,0,0,.05)!important;border-top-color:rgba(0,0,0,.1)!important}.theme-light .footer-bottom p{color:#495057!important}.theme-light .color-system-btn{background:rgba(255,255,255,.9)!important;color:#333!important}.theme-light .color-system-btn:hover{background:#fff!important}.theme-light .minimized-info{color:#333!important}.theme-light .minimized-btn{border-color:rgba(0,0,0,.2)!important;color:#333!important}.theme-light .minimized-btn:hover{background:rgba(0,0,0,.1)!important}.theme-light .floating-reminder-tooltip{background:rgba(255,255,255,.95)!important;color:#333!important;border:1px solid rgba(0,0,0,.1)!important}.theme-light .floating-reminder-tooltip::after{border-top-color:rgba(255,255,255,.95)!important}.theme-light .modal{background:#fff!important;color:#333!important}.theme-light .modal-header{border-bottom-color:rgba(0,0,0,.1)!important}.theme-light .modal-title{color:#333!important}.theme-light .modal-close{color:#666!important}.theme-light .modal-close:hover{color:#333!important}.theme-light .form-control{background:#fff!important;border-color:rgba(0,0,0,.2)!important;color:#333!important}.theme-light .form-text{color:#666!important}.theme-light .toast{background:rgba(255,255,255,.95)!important;color:#333!important;border:1px solid rgba(0,0,0,.1)!important}.theme-light .toast.success{border-left-color:#28a745!important}.theme-light .toast.error{border-left-color:#dc3545!important}.theme-light .toast.warning{border-left-color:#ffc107!important}.theme-light .toast.info{border-left-color:#17a2b8!important}.theme-light .status-bar{background:#f8f9fa!important;border-top-color:rgba(0,0,0,.1)!important;color:#333!important}.theme-light .status-item{color:#495057!important}.theme-light .status-item i{color:#667eea!important}.theme-light #sidebar{background:#fff!important;border-right-color:rgba(0,0,0,.1)!important;color:#333!important}.theme-light .sidebar-header{background:#f8f9fa!important;border-bottom-color:rgba(0,0,0,.1)!important}.theme-light .sidebar-header h2{color:#333!important}.theme-light .sidebar-tab{color:#666!important;background:0 0!important}.theme-light .sidebar-tab.active{color:#667eea!important;background:rgba(102,126,234,.1)!important}.theme-light .sidebar-tab:hover{background:rgba(0,0,0,.05)!important}.theme-light #header{background:#fff!important;border-bottom-color:rgba(0,0,0,.1)!important;color:#333!important}.theme-light .app-title{color:#333!important}.theme-light .btn{background:#fff!important;border-color:rgba(0,0,0,.2)!important;color:#333!important}.theme-light .btn:hover{background:#f8f9fa!important;border-color:#667eea!important}.theme-light .btn-icon{background:0 0!important;color:#495057!important}.theme-light .btn-icon:hover{background:rgba(102,126,234,.1)!important;color:#667eea!important}.theme-light #toolbar{background:#f8f9fa!important;border-bottom-color:rgba(0,0,0,.1)!important}.theme-light .toolbar-group::before{background:rgba(0,0,0,.1)!important}.theme-light .tab-bar{background:#f8f9fa!important;border-bottom-color:rgba(0,0,0,.1)!important}.theme-light .tab{background:#fff!important;border-color:rgba(0,0,0,.1)!important;color:#333!important}.theme-light .tab.active{background:#fff!important;border-bottom-color:#fff!important;color:#667eea!important}.theme-light .tab:hover{background:#f8f9fa!important}.theme-light .tab-close{color:#666!important}.theme-light .tab-close:hover{color:#dc3545!important}.theme-light .preview-toolbar{background:#f8f9fa!important;border-bottom-color:rgba(0,0,0,.1)!important;color:#333!important}.theme-light .device-btn{color:#495057!important}.theme-light .device-btn.active{color:#667eea!important;background:rgba(102,126,234,.1)!important}.theme-light .device-btn:hover{background:rgba(0,0,0,.05)!important}.theme-light .preview-checkbox-label{color:#333!important}.theme-light .context-menu{background:#fff!important;border-color:rgba(0,0,0,.2)!important;box-shadow:0 4px 20px rgba(0,0,0,.15)!important}.theme-light .context-menu-item{color:#333!important}.theme-light .context-menu-item:hover{background:rgba(102,126,234,.1)!important;color:#667eea!important}.theme-light .context-menu-separator{background:rgba(0,0,0,.1)!important}.theme-light .loading-overlay{background:rgba(255,255,255,.9)!important}.theme-light .spinner{border-color:rgba(0,0,0,.1)!important;border-top-color:#667eea!important}.theme-light .auto-save-indicator{background:rgba(40,167,69,.9)!important;color:#fff!important}.theme-light .explorer-item{color:#333!important}.theme-light .explorer-item:hover{background:rgba(102,126,234,.1)!important}.theme-light .explorer-item.selected{background:rgba(102,126,234,.2)!important;color:#667eea!important}.theme-light .item-name{color:#333!important}.theme-light .item-actions .btn-icon{color:#666!important}.theme-light .item-actions .btn-icon:hover{color:#333!important}.theme-light .validation-panel{background:#fff!important;border-top-color:rgba(0,0,0,.1)!important;color:#333!important}.theme-light .validation-header{background:#f8f9fa!important;border-bottom-color:rgba(0,0,0,.1)!important}.theme-light .validation-header h3{color:#333!important}.theme-light .responsive-design-container{background:#fff!important;color:#333!important}.theme-light .responsive-toolbar{background:#f8f9fa!important;border-bottom-color:rgba(0,0,0,.1)!important}.theme-light .responsive-brand{color:#333!important}.theme-light .device-selector{background:#fff!important;border-color:rgba(0,0,0,.2)!important;color:#333!important}.theme-light .size-display{color:#333!important}.theme-light .device-type{color:#667eea!important}.theme-light .mobile-toolbar{background:var(--background)!important;border-top-color:rgba(0,0,0,.1)!important}.theme-light .mobile-toolbar .btn-icon{color:#495057!important}.theme-light .mobile-toolbar .btn-icon:hover{color:#667eea!important;background:rgba(102,126,234,.1)!important}.theme-light input[type=text],.theme-light input[type=number],.theme-light input[type=email],.theme-light input[type=password],.theme-light textarea,.theme-light select{background:#fff!important;border-color:rgba(0,0,0,.2)!important;color:#333!important}.theme-light input[type=text]:focus,.theme-light input[type=number]:focus,.theme-light input[type=email]:focus,.theme-light input[type=password]:focus,.theme-light textarea:focus,.theme-light select:focus{border-color:#667eea!important;box-shadow:0 0 0 2px rgba(102,126,234,.2)!important}.theme-light input[type=checkbox],.theme-light input[type=radio]{accent-color:#667eea!important}.theme-light ::-webkit-scrollbar-track{background:#f1f1f1!important}.theme-light ::-webkit-scrollbar-thumb{background:#c1c1c1!important}.theme-light ::-webkit-scrollbar-thumb:hover{background:#a8a8a8!important}


/* ============================================================
   CORE WEB VITALS — ADDITIVE PATCH
   All selectors below already exist in the merged source.
   These declarations only ADD properties; nothing is removed.
   ============================================================ */

/* ── LCP: Font swap ─────────────────────────────────────────
   Ensures body text is visible while custom fonts load.
   font-display:swap is already best practice; added here as
   a safety net in case any @font-face block was missing it. */
@font-face {
  font-display: swap; /* applies to any font-face not already declaring this */
}

/* ── CLS FIX 1: Toast container — pre-reserved fixed size ──
   Prevents the 0.29 CLS scored by height 0→98→176→32 changes.
   The box is always the same size; toasts appear inside it. */
.toast-container {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 350px;
  max-width: 100vw;
  height: 180px;           /* pre-reserved — never grows/shrinks          */
  overflow: hidden;         /* toasts appear inside, box stays same size   */
  pointer-events: none;
  display: flex;
  flex-direction: column-reverse;
  gap: .75rem;
  padding: 0 1rem 2rem;
  z-index: 1000;
  /* contain isolates internal layout from the page CLS budget */
  contain: layout style;
}

/* ── CLS FIX 2: app-container — visibility instead of display ──
   display:none→grid causes full grid recalc (big CLS).
   visibility keeps the layout pre-calculated, invisible until ready. */
.app-container {
  visibility: hidden;
  pointer-events: none;
  /* Keep grid layout always calculated — just hidden */
}
.app-container.loaded {
  visibility: visible;
  pointer-events: auto;
}

/* ── CLS FIX 3: Icon size stubs ─────────────────────────────
   Reserves 1em×1em before Font Awesome glyphs render.
   ::before pseudo-elements that are ::before score CLS when
   they change from 0→actual size. */
.fas, .far, .fab, .fal, .fad, .fa-solid, .fa-regular, .fa-brands {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1em;
  min-height: 1em;
  line-height: 1;
}

/* ── CLS FIX 4: Square icon wrappers — aspect-ratio guard ──
   .card-icon, .btn-icon, .launcher-btn-icon, .action-btn
   already have explicit width+height, but aspect-ratio:1
   prevents dimension re-calc on zoom or font-size change. */
.card-icon,
.btn-icon,
.launcher-btn-icon,
.action-btn,
.social-link,
.toast-icon,
.minify-icon-wrapper,
.format-icon-wrapper,
.obfuscate-icon-wrapper,
.info-card-icon {
  aspect-ratio: 1;
  flex-shrink: 0;
}

/* ── CLS FIX 5: Dynamic text containers — min-height guard ─
   Elements that get JS-injected text after paint. */
#storage-privacy-statement {
  min-height: 1.2em;
}
.footer-status,
.status-item,
.brand-text p {
  min-height: 1.2em;
}
.tab-name {
  min-height: 1em;
}

/* ── CLS FIX 6: Loading-overlay — visibility not display ───
   Avoids layout recalc when overlay hides/shows. */
#loading-overlay {
  visibility: hidden;
  pointer-events: none;
  display: flex !important; /* always in flow, just invisible */
  transition: visibility 0s, opacity .2s ease;
  opacity: 0;
}
#loading-overlay.show,
#loading-overlay[style*="display:flex"],
#loading-overlay[style*="display: flex"] {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
}

/* ── PERFORMANCE 1: will-change on compositor layers ───────
   Promotes frequently-animated elements to their own GPU layer.
   Only applied where animation/transform is already used. */
.app-launcher,
.modal-overlay,
.context-menu,
.mobile-toolbar-menu,
.legal-consent-banner,
.website-footer,
.color-system-overlay,
.responsive-design-container {
  will-change: transform;
}

/* ── PERFORMANCE 2: contain on isolated UI regions ─────────
   Prevents layout/style recalcs in one region from cascading
   to the rest of the page. */
.modal {
  contain: layout style;
}
.context-menu {
  contain: layout style;
}
.validation-panel,
.snippets-panel {
  contain: layout style;
}
.tab-bar {
  contain: layout style;
}
#footer {
  contain: layout style;
}

/* ── PERFORMANCE 3: content-visibility on off-screen panels ─
   Off-screen sidebar panels, modals, and overlays that are
   hidden skip rendering entirely until they come on-screen. */
.sidebar-panel:not(.active) {
  content-visibility: auto;
  contain-intrinsic-size: 0 300px;
}
.modal-overlay:not([style*="flex"]) {
  content-visibility: hidden;
}

/* ── PERFORMANCE 4: scrollbar rendering ────────────────────
   Thin scrollbars on mobile reduce paint area. */
@media (max-width: 1024px) {
  * {
    scrollbar-width: thin;
  }
}

/* ── PERFORMANCE 5: overscroll-behavior on scroll containers
   Prevents scroll chaining which triggers unnecessary repaints. */
#sidebar,
.sidebar-content,
.file-explorer-content,
.modal,
.projects-list,
.snippets-list,
.validation-results,
.minify-body,
.obfuscate-modal-redesigned,
.launcher-content,
.tab-bar {
  overscroll-behavior: contain;
}

/* ── PERFORMANCE 6: image-rendering on device frames ───────
   Avoids subpixel anti-aliasing recalc on scaled iframes. */
.responsive-iframe,
#preview-frame {
  image-rendering: auto;
}

/* ── CLS FIX 7: Consent banner footer-toggle anchor ────────
   footer-toggle jumps from bottom:20px → bottom:130px when
   banner appears. Pre-anchor it using CSS custom property
   so the transition is smooth and doesn't score CLS.
   Note: actual bottom value is set by JS; this transition
   converts the jump into a smooth animation (CLS-exempt). */
.footer-toggle {
  transition: bottom .3s cubic-bezier(.4,0,.2,1),
              transform .3s ease,
              box-shadow .3s ease;
}

/* ── CLS FIX 8: Mobile toast — no full-width shift ─────────
   On mobile the old CSS set width:100%;right:0 which caused
   the 0.29 scored shift. Fixed by keeping the reserved box. */
@media (max-width: 1024px) {
  .toast-container {
    width: 100%;
    max-width: 100vw;
    right: 0;
    left: 0;
    height: 180px; /* same reserved height on mobile */
    padding: 0 .75rem 1.5rem;
  }
}

/* ── ACCESSIBILITY: focus-visible improvements ──────────────
   Ensures keyboard focus rings are always visible.
   Complements the existing :focus-visible rule. */
:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* ── PAINT OPTIMIZATION: reduce repaints on hover ──────────
   Elements that only change color/opacity on hover don't need
   a full layout recalc. */
.btn,
.btn-icon,
.launcher-card,
.explorer-item .item-header,
.tab,
.sidebar-tab,
.context-menu-item,
.preset-pill,
.toolbar-menu-btn,
.snippet-item {
  isolation: isolate;
}

/* ── FONT RENDERING ─────────────────────────────────────────
   Smooth subpixel rendering on all text for better LCP score
   (text is readable sooner / avoids invisible-text flash). */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
}

/* ── PREVENT INVISIBLE TEXT FLASH ──────────────────────────
   Ensures body text always has a fallback colour while
   system fonts or webfonts load. */
body {
  color: var(--text, #d4d4d4);
  background-color: var(--background, #1e1e1e);
}

.sidebar-content {
        flex: 1;
        overflow: hidden;
        position: relative;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    .sidebar-panel {
        display: none !important;
    }
    .sidebar-panel.active {
        display: flex !important;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }


/* ═══════════════════════════════════════════════════════════════════════
   PRO MODAL REDESIGN  ·  appended last so it wins the cascade
   ───────────────────────────────────────────────────────────────────────
   CSS-only restyle of ALL editor modals (generic .modal + the
   format / minify / obfuscate "-redesigned" variants) to a clean, modern
   VS Code / Linear / GitHub dialog look, consistent in light AND dark.

   Everything below uses the theme variables (--panel, --background, --text,
   --text-secondary, --border, --primary-color, --secondary-color,
   --hover-overlay) so both themes resolve automatically. Where colour tints
   are needed we use color-mix() on --primary-color with a solid rgba()
   fallback so old engines still get a sensible colour.

   NOTE ON GRADIENT HEADERS: earlier rules paint full-bleed gradient headers
   in THREE places — the `!important` block near the top (.format-header /
   .minify-header / .obfuscate-header and their .X-modal-redesigned
   .modal-header forms), a plain block mid-file, and the `!important` block in
   the redesign section. They are neutralised here by re-declaring the SAME
   selectors (matching specificity) LAST with `!important`, repainting the
   header with --panel + a 1px bottom border and re-tinting the title / icon /
   close (which were white-on-gradient) back to theme text/primary colours.

   NOTE ON LAYOUT SAFETY: the overlay is shown/hidden via inline
   display:none/flex set by JS, so `display` is deliberately NEVER set here.
   Card geometry (size / radius / overflow) is scoped to @media
   (min-width:769px) so the existing mobile-fullscreen `!important` rules keep
   working untouched.
   ═══════════════════════════════════════════════════════════════════════ */

/* 1 ── BACKDROP: subtle dark scrim + light blur. No `display` (JS owns it).
        The id-scoped selectors match the higher-specificity overlay rules
        used by the three tool modals so the scrim is identical everywhere. */
.modal-overlay,
#format-options-modal.modal-overlay,
#minify-modal.modal-overlay,
#obfuscate-modal.modal-overlay {
  background: rgba(10, 12, 18, 0.5) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  backdrop-filter: blur(6px) !important;
  align-items: center;
  justify-content: center;
}

/* 2 ── CARD: panel bg, hairline border, refined shadow + soft pop-in.
        Colours are unconditional; geometry is desktop-scoped (see #2b). */
.modal,
.format-modal-redesigned,
.minify-modal-redesigned,
.obfuscate-modal-redesigned {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45) !important;
  animation: proModalPop 0.18s cubic-bezier(0.2, 0, 0.2, 1) !important;
}

@keyframes proModalPop {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* 2b ── Desktop geometry only, so mobile-fullscreen rules are preserved.
         Generic .modal scrolls as a whole; the flex-column redesign modals
         clip (overflow:hidden) and scroll inside their own body. The
         redesign group is listed AFTER .modal so, for a card that carries
         both classes, overflow:hidden wins. */
@media (min-width: 769px) {
  .modal {
    max-width: 520px !important;
    width: min(92vw, 520px) !important;
    max-height: 88vh !important;
    border-radius: 14px !important;
    overflow-y: auto !important;
  }
  .format-modal-redesigned,
  .minify-modal-redesigned,
  .obfuscate-modal-redesigned {
    max-width: 560px !important;
    width: min(94vw, 560px) !important;
    max-height: 88vh !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }
}

/* 3 ── HEADER: neutralise every gradient variant → card bg + hairline.
        Specificity is matched to the gradient rules (.X-modal-redesigned
        .modal-header is 0,2,0) and this is later in source, so it wins. */
.modal-header,
.format-header,
.minify-header,
.obfuscate-header,
.format-modal-redesigned .modal-header,
.minify-modal-redesigned .modal-header,
.obfuscate-modal-redesigned .modal-header {
  background: var(--panel) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  min-height: auto !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* 3a ── Title: 15px / 600, theme text (was white-on-gradient). */
.modal-title,
.format-header .modal-title,
.minify-header .modal-title,
.obfuscate-header .modal-title,
.format-title-section h3 {
  color: var(--text-primary) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.1px !important;
  text-shadow: none !important;
  margin: 0 !important;
}

/* 3b ── Subtitle: 12.5px muted secondary text. */
.modal-subtitle,
.format-subtitle,
.minify-subtitle,
.obfuscate-subtitle,
.format-header .modal-subtitle,
.minify-header .modal-subtitle,
.obfuscate-header .modal-subtitle {
  color: var(--text-secondary) !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  opacity: 1 !important;
  margin: 3px 0 0 0 !important;
}

/* 3c ── Header icon: small square, primary-tinted (was white on gradient). */
.format-icon-wrapper,
.minify-icon-wrapper,
.obfuscate-icon-wrapper {
  width: 36px !important;
  height: 36px !important;
  border-radius: 9px !important;
  background: rgba(0, 122, 204, 0.14) !important;
  background: color-mix(in srgb, var(--primary-color) 15%, transparent) !important;
  box-shadow: none !important;
}
.format-icon,
.minify-icon,
.obfuscate-icon,
.format-icon-wrapper svg,
.minify-icon-wrapper svg,
.obfuscate-icon-wrapper svg {
  width: 18px !important;
  height: 18px !important;
  color: var(--primary-color) !important;
}

/* 3d ── Close: ghost icon button, ~30px, subtle hover (was white/red hover). */
.modal-close,
.format-close,
.minify-close,
.obfuscate-close {
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--text-secondary) !important;
  opacity: 1 !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}
.modal-close:hover,
.format-close:hover,
.minify-close:hover,
.obfuscate-close:hover {
  background: var(--hover-overlay) !important;
  color: var(--text-primary) !important;
  transform: none !important;
}
.modal-close svg,
.format-close svg,
.minify-close svg,
.obfuscate-close svg {
  color: currentColor !important;
}

/* 4 ── BODY: comfortable padding + a card-matched surface. */
.modal-body,
.format-body,
.minify-body,
.obfuscate-body {
  padding: 20px !important;
  background: var(--panel) !important;
}

/* 5 ── PRESET PILLS: subtle bg + 1px border, radius 8px; active = primary. */
.preset-pill {
  background: var(--background) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  color: var(--text) !important;
  box-shadow: none !important;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}
.preset-pill:hover:not(.preset-pill-active) {
  background: rgba(0, 122, 204, 0.10) !important;
  background: color-mix(in srgb, var(--primary-color) 12%, transparent) !important;
  border-color: var(--primary-color) !important;
  color: var(--primary-color) !important;
}
.preset-pill.preset-pill-active {
  background: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: #fff !important;
}

/* 5b ── OPTION TABS: clean segmented control; active = filled primary. */
.option-tab {
  border-radius: 8px !important;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease !important;
}
.option-tab:hover:not(.option-tab-active) {
  background: rgba(0, 122, 204, 0.10) !important;
  background: color-mix(in srgb, var(--primary-color) 12%, transparent) !important;
  color: var(--primary-color) !important;
  opacity: 1 !important;
}
.option-tab.option-tab-active {
  background: var(--primary-color) !important;
  color: #fff !important;
  opacity: 1 !important;
}

/* 6 ── OPTION ROWS: clean rows, accent checkbox, subtle hover highlight. */
.format-option,
.minify-option,
.obfuscate-option {
  border-radius: 8px !important;
  border: 1px solid var(--border) !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
}
.format-option:hover,
.minify-option:hover,
.obfuscate-option:hover {
  border-color: var(--primary-color) !important;
  background: rgba(0, 122, 204, 0.06) !important;
  background: color-mix(in srgb, var(--primary-color) 7%, var(--background)) !important;
}
.format-option input[type="checkbox"],
.minify-option input[type="checkbox"],
.obfuscate-option input[type="checkbox"],
.modal-body input[type="checkbox"],
.modal-body input[type="radio"] {
  accent-color: var(--primary-color) !important;
}

/* 7 ── FOOTER: right-aligned actions, top border, card surface. */
.modal-footer,
.format-footer,
.minify-footer,
.obfuscate-footer,
.format-modal-redesigned .modal-footer,
.minify-modal-redesigned .modal-footer,
.obfuscate-modal-redesigned .modal-footer {
  background: var(--panel) !important;
  border-top: 1px solid var(--border) !important;
  padding: 14px 20px !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

/* 7a ── PRIMARY button: solid primary + white text (was a gradient). */
.btn-primary,
.format-btn-primary,
.minify-btn-primary,
.obfuscate-btn-primary {
  background: var(--primary-color) !important;
  background-image: none !important;
  border: 1px solid var(--primary-color) !important;
  color: #fff !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
.btn-primary:hover,
.format-btn-primary:hover,
.minify-btn-primary:hover,
.obfuscate-btn-primary:hover {
  background: var(--secondary-color) !important;
  border-color: var(--secondary-color) !important;
  transform: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
}
/* Light-theme guard: `.theme-light .btn` (0,2,0) otherwise whitens a
   generic `.btn.btn-primary`; re-assert the solid primary at equal
   specificity, later in source. */
.theme-light .btn-primary,
body.theme-light .btn-primary {
  background: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: #fff !important;
}

/* 7b ── SECONDARY / Cancel: ghost bordered button. */
.btn-secondary,
.format-btn-secondary,
.minify-btn-secondary,
.obfuscate-btn-secondary {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
.btn-secondary:hover,
.format-btn-secondary:hover,
.minify-btn-secondary:hover,
.obfuscate-btn-secondary:hover {
  background: var(--hover-overlay) !important;
  border-color: var(--primary-color) !important;
  color: var(--primary-color) !important;
}

/* 7c ── PREVIEW: distinct primary-tinted button (kept separate from Cancel).
        Beats the earlier `!important` preview overrides via later source. */
.format-btn-preview,
.minify-btn-preview,
.obfuscate-btn-preview {
  background: rgba(0, 122, 204, 0.12) !important;
  background: color-mix(in srgb, var(--primary-color) 12%, transparent) !important;
  border: 1px solid transparent !important;
  color: var(--primary-color) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
.format-btn-preview:hover,
.minify-btn-preview:hover,
.obfuscate-btn-preview:hover {
  background: rgba(0, 122, 204, 0.20) !important;
  background: color-mix(in srgb, var(--primary-color) 20%, transparent) !important;
  border-color: transparent !important;
  color: var(--primary-color) !important;
}

/* 8 ── BACKUP + SIZE-ANALYSIS cards: neutralise the loud amber / green
        boxes so they read as calm cards in the redesign. The earlier rules
        painted a 2px warning-amber backup box, a 2px success-green preview
        card and a solid bright-green reduction bar. Matched specificity +
        later source order beats those `!important` colour rules. */
.backup-option,
.theme-dark .backup-option,
.theme-light .backup-option {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
}
.backup-option:hover,
.theme-dark .backup-option:hover,
.theme-light .backup-option:hover {
  border-color: var(--primary-color) !important;
  background: color-mix(in srgb, var(--primary-color) 5%, var(--panel)) !important;
}
.backup-content svg {
  color: var(--text-secondary) !important;
}
.minify-preview-card,
.obfuscate-preview-card {
  background: var(--background) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  text-align: center !important;
}
.theme-dark .minify-preview-card,
.theme-dark .obfuscate-preview-card,
.theme-light .minify-preview-card,
.theme-light .obfuscate-preview-card {
  background: var(--background) !important;
}
.preview-header {
  justify-content: flex-start !important;
  gap: 8px !important;
  color: var(--text-secondary) !important;
}
.preview-header svg {
  color: var(--text-secondary) !important;
}
.size-item {
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}
.theme-dark .size-item,
.theme-light .size-item {
  box-shadow: none !important;
}
/* Reduction badge / protection level: a calm success-tinted pill, centred,
   not a loud full-width bar. Green still signals "good", but muted. */
.reduction-badge,
.protection-level {
  display: inline-block !important;
  background: rgba(6, 214, 160, 0.12) !important;
  background: color-mix(in srgb, var(--accent-success) 15%, transparent) !important;
  color: var(--accent-success) !important;
  border: 1px solid transparent !important;
  border-color: color-mix(in srgb, var(--accent-success) 30%, transparent) !important;
  box-shadow: none !important;
  border-radius: 999px !important;
  margin-top: 10px !important;
}
.theme-dark .reduction-badge,
.theme-dark .protection-level,
.theme-light .reduction-badge,
.theme-light .protection-level {
  background: color-mix(in srgb, var(--accent-success) 15%, transparent) !important;
  color: var(--accent-success) !important;
}
/* ═══ END PRO MODAL REDESIGN ═══════════════════════════════════════════ */

/* ═══ RESPONSIVE TESTER REDESIGN ═══════════════════════════════════════
   The device-lab window (popped out or inline) shipped a loud indigo→purple
   gradient canvas with glassmorphism, 2px indigo borders and purple-gradient
   accents — dated and off-brand from the VS Code-style editor. Re-skin it to
   a calm, theme-aware device lab: neutral dotted canvas, flat surfaces, 1px
   borders, a single primary accent. Every rule is scoped under
   .responsive-design-container so no other control is touched, and it resolves
   in the popped window because buildWindowContent now stamps the editor theme
   class on that window's <body>. Appended last so it wins the cascade. */

/* Canvas — neutral surface with a subtle dot grid (was the purple gradient). */
.responsive-design-container {
  background: var(--background) !important;
  background-image: radial-gradient(color-mix(in srgb, var(--text) 8%, transparent) 1px, transparent 1px) !important;
  background-size: 22px 22px !important;
  color: var(--text) !important;
}

/* Toolbar — flat surface, single hairline, no blur / heavy shadow. */
.responsive-design-container .responsive-toolbar {
  background: var(--surface) !important;
  backdrop-filter: none !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}

/* Brand — solid primary, drop the gradient text-clip. */
.responsive-design-container .responsive-brand {
  color: var(--primary-color) !important;
  text-shadow: none !important;
}
.responsive-design-container .responsive-brand i {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--primary-color) !important;
}

/* Controls — flat panel surfaces, 1px border, theme text. The .size-inputs
   wrapper was a solid white (rgba(255,255,255,.9)) pill — the "white box in
   dark theme" — so it is re-skinned here along with the rest. Uniform 36px
   control height for a cohesive control bar. */
.responsive-design-container .device-selector,
.responsive-design-container .size-display,
.responsive-design-container .action-btn,
.responsive-design-container .size-inputs {
  background: var(--panel) !important;
  backdrop-filter: none !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}
.responsive-design-container .device-selector,
.responsive-design-container .size-inputs,
.responsive-design-container .action-btn { height: 36px !important; }
.responsive-design-container .size-inputs { border-radius: 9px !important; padding: 0 4px !important; align-items: center !important; }
/* input-group sits inside the size-inputs panel — keep it transparent. */
.responsive-design-container .input-group {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.responsive-design-container .device-selector { color: var(--text) !important; }
.responsive-design-container .device-selector:hover,
.responsive-design-container .action-btn:hover,
.responsive-design-container .size-display:hover,
.responsive-design-container .size-inputs:hover {
  border-color: var(--primary-color) !important;
  transform: none !important;
  box-shadow: none !important;
}
.responsive-design-container .device-selector:focus,
.responsive-design-container .size-inputs:focus-within {
  outline: none !important;
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 25%, transparent) !important;
}
.responsive-design-container .action-btn { color: var(--text-secondary) !important; }
.responsive-design-container .action-btn:hover { color: var(--primary-color) !important; }
.responsive-design-container .action-btn.close-btn:hover {
  background: var(--error-light, #d32f2f) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* Apply (check) button — solid primary (was purple gradient). */
.responsive-design-container .btn-apply {
  background: var(--primary-color) !important;
  border: 1px solid var(--primary-color) !important;
  color: #fff !important;
  box-shadow: none !important;
  border-radius: 7px !important;
}
.responsive-design-container .btn-apply:hover {
  background: var(--secondary-color) !important;
  border-color: var(--secondary-color) !important;
}

/* Zoom controls — segmented; active = solid primary (was purple gradient). */
.responsive-design-container .zoom-controls {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: 9px !important;
  padding: 3px 6px !important;
  box-shadow: none !important;
}
.responsive-design-container .zoom-btn { color: var(--text-secondary) !important; border-radius: 6px !important; }
.responsive-design-container .zoom-btn:hover {
  background: color-mix(in srgb, var(--primary-color) 12%, transparent) !important;
  color: var(--primary-color) !important;
}
.responsive-design-container .zoom-btn.active {
  background: var(--primary-color) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.responsive-design-container .zoom-slider-wrapper { border-left-color: var(--border) !important; }
.responsive-design-container #zoom-display { color: var(--primary-color) !important; }

/* Readouts + inputs use theme colours (were dark-on-white in the pill). */
.responsive-design-container .size-display span { color: var(--text) !important; }
.responsive-design-container .device-type { color: var(--text-secondary) !important; }
.responsive-design-container .size-inputs input,
.responsive-design-container .input-group input,
.responsive-design-container #custom-width,
.responsive-design-container #custom-height {
  background: transparent !important;
  color: var(--text) !important;
}
.responsive-design-container .input-group input:focus {
  background: color-mix(in srgb, var(--primary-color) 12%, transparent) !important;
  color: var(--primary-color) !important;
}
.responsive-design-container .input-group label { color: var(--text-secondary) !important; }
.responsive-design-container .input-separator { color: var(--text-secondary) !important; }
.responsive-design-container .dropdown-icon { color: var(--text-secondary) !important; }

/* Preview area is transparent so the calm dotted canvas shows through. */
.responsive-design-container .responsive-preview-area { background: transparent !important; }

/* Device frame — clean neutral bezel + soft shadow on the calm canvas. */
.responsive-design-container .responsive-frame-container {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28), 0 0 0 1px var(--border) !important;
}

/* Browser-window chrome for desktop/laptop previews: a slim title bar with
   traffic-light dots, so the previewed page reads as a real browser window
   instead of a bare white rectangle floating on the dark canvas (the "white
   box in dark theme"). Mobile/tablet keep their device bezel + notch, so this
   is scoped to frames without those classes. The frame is a flex column with
   overflow:hidden, so ::before becomes a clipped top bar. */
.responsive-design-container .responsive-frame-container:not(.mobile):not(.tablet)::before {
  content: '';
  flex: 0 0 auto;
  height: 30px;
  background:
    radial-gradient(circle 5px at 16px 15px, #ff5f57 96%, transparent),
    radial-gradient(circle 5px at 34px 15px, #febc2e 96%, transparent),
    radial-gradient(circle 5px at 52px 15px, #28c840 96%, transparent),
    linear-gradient(180deg, #2c2e33 0%, #26272b 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.35);
}
/* Keep the previewed page's own white surface — but give the whole window a
   neutral bezel so a short/blank page doesn't read as a raw white slab. */
.responsive-design-container .responsive-frame-container:not(.mobile):not(.tablet) {
  background: #26272b !important;
}
/* ═══ END RESPONSIVE TESTER REDESIGN ═══════════════════════════════════ */