/* ================================================
   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"] .item-name[title*="src"] ~ .item-icon i,
.explorer-item[data-type="folder"] .item-header:has(.item-name[title*="src"]) .item-icon i {
    color: #6997D5 !important;
}

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

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

.explorer-item[data-type="folder"] .item-header:has(.item-name[title*="scripts"]) .item-icon i,
.explorer-item[data-type="folder"] .item-header:has(.item-name[title*="js"]) .item-icon i {
    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;
}

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

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

/* ================================================
   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 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from { 
        opacity: 0;
        transform: translateY(-4px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

/* 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: 100% !important;
        width: 100% !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
    }
    
    .format-header,
    .minify-header,
    .obfuscate-header {
        padding: 16px !important;
    }
    
    .format-body,
    .minify-body,
    .obfuscate-body {
        padding: 16px !important;
        max-height: calc(100vh - 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;
    }
}