/* Enhanced panel.css for ✨ Gmail Genie ✨ v1.2.1 - Crystal Clear UI & Pro Animations */

/* :root variables are set by content.js based on the selected theme */

/* --- High Contrast Overrides --- */
body.gap-high-contrast {
    --panel-bg-rgb: 0,0,0; --panel-alpha-val: 1; --panel-text: #ffffff; --panel-border: #f0f0f0;
    --input-bg: #151515; --input-border: #f0f0f0; --input-text: #ffffff;
    --primary-color: #ffff00; --secondary-color: #00ddff; --progress-color: #ff00ff;
    --button-text: #000000;
    --button-text-on-dark: #ffffff;
    --button-hover-bg: #e0e000; --button-secondary-hover-bg: rgba(0, 221, 255, 0.3);
    --error-color: #ff6060; --success-color: #60ff60; --warning-color: #ffff60;
    --link-color: var(--primary-color); --scrollbar-thumb: #f0f0f0; --scrollbar-track: #222;
    --primary-color-rgb: 255,255,0; --error-rgb: 255,96,96; --warning-color-rgb:255,255,96; --success-color-rgb:96,255,96; --secondary-color-rgb:0,221,255;
    --panel-text-rgb: 255,255,255;
    --gg-gradient-start: var(--primary-color); --gg-gradient-end: var(--secondary-color); --gg-shadow-color: rgba(255,255,255,0.4);
    --card-bg: rgba(10,10,10,0.95); --card-header-bg: rgba(255,255,0,0.08); --card-border: #e0e0e0;
    --modal-content-bg: #000; --modal-header-bg: rgba(255,255,0,0.12); --modal-footer-bg: rgba(10,10,10,0.8);
    --aurora-opacity: 0 !important;
    color-scheme: dark;
}

body.gap-high-contrast #gap-panel {
    border: 1.5px solid #f0f0f0 !important;
    backdrop-filter: none !important;
    background-color: black !important;
    background-image: none !important;
}

body.gap-high-contrast .gap-modal { z-index: 2147483647 !important; }

body.gap-high-contrast .gap-modal-content {
    border: 1px solid #f0f0f0 !important;
    backdrop-filter: none !important;
    background-color: black !important;
    color: #fff !important;
}

body.gap-high-contrast #gap-panel-background-effects { display: none !important; }

body.gap-high-contrast .gap-modal-content p,
body.gap-high-contrast .gap-modal-content label,
body.gap-high-contrast .gap-modal-content small,
body.gap-high-contrast .gap-modal-content li,
body.gap-high-contrast .gap-modal-content h1,
body.gap-high-contrast .gap-modal-content h2,
body.gap-high-contrast .gap-modal-content h3,
body.gap-high-contrast .gap-modal-content .filename-display,
body.gap-high-contrast .gap-modal-content #gap-setting-panel-alpha-value {
    color: #ffffff !important;
}

body.gap-high-contrast .gap-modal-content a { color: var(--link-color) !important; }
body.gap-high-contrast .gap-modal-content hr { border-top-color: #f0f0f0 !important; background-color: #f0f0f0 !important; }

body.gap-high-contrast .gap-modal-content textarea::placeholder,
body.gap-high-contrast .gap-modal-content input::placeholder {
    color: rgba(255,255,255,0.7) !important;
}

body.gap-high-contrast .gap-modal-content input[type="checkbox"] {
    border-color: #fff !important;
}

body.gap-high-contrast .gap-modal-content input[type="checkbox"]:checked {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

body.gap-high-contrast .gap-modal-content input[type="checkbox"]:checked::before {
    color: #000 !important;
}

body.gap-high-contrast .gap-modal-content select,
body.gap-high-contrast .gap-modal-content select option {
    color: #ffffff !important;
    background-color: var(--input-bg) !important;
}

body.gap-high-contrast .gap-modal-content .gap-btn { color: var(--button-text) !important; }

body.gap-high-contrast .gap-modal-content .gap-btn.primary-btn,
body.gap-high-contrast .gap-modal-content .gap-btn.secondary-btn.active {
    background: var(--primary-color) !important; color: var(--button-text) !important;
}

body.gap-high-contrast .gap-modal-content .gap-btn.secondary-btn {
    background: var(--secondary-color) !important;
    color: var(--button-text) !important;
    border-color: var(--button-text) !important;
}

body.gap-high-contrast .gap-modal-content .gap-btn.error-btn {
    background: var(--error-color) !important;
    color: #000 !important;
}

body.gap-high-contrast .gap-modal-content .gap-btn.success-btn {
    background: var(--success-color) !important;
    color: #000 !important;
}


/* --- AGGRESSIVE RESET --- */
#gap-panel, #gap-panel div, #gap-panel span, #gap-panel applet, #gap-panel object, #gap-panel iframe,
#gap-panel h1, #gap-panel h2, #gap-panel h3, #gap-panel h4, #gap-panel h5, #gap-panel h6, #gap-panel p, #gap-panel blockquote, #gap-panel pre,
#gap-panel a, #gap-panel abbr, #gap-panel acronym, #gap-panel address, #gap-panel big, #gap-panel cite, #gap-panel code,
#gap-panel del, #gap-panel dfn, #gap-panel em, #gap-panel img, #gap-panel ins, #gap-panel kbd, #gap-panel q, #gap-panel s, #gap-panel samp,
#gap-panel small, #gap-panel strike, #gap-panel strong, #gap-panel sub, #gap-panel sup, #gap-panel tt, #gap-panel var,
#gap-panel b, #gap-panel u, #gap-panel i, #gap-panel center,
#gap-panel dl, #gap-panel dt, #gap-panel dd, #gap-panel ol, #gap-panel ul, #gap-panel li,
#gap-panel fieldset, #gap-panel form, #gap-panel label, #gap-panel legend,
#gap-panel table, #gap-panel caption, #gap-panel tbody, #gap-panel tfoot, #gap-panel thead, #gap-panel tr, #gap-panel th, #gap-panel td,
#gap-panel article, #gap-panel aside, #gap-panel canvas, #gap-panel details, #gap-panel embed,
#gap-panel figure, #gap-panel figcaption, #gap-panel footer, #gap-panel header, #gap-panel hgroup,
#gap-panel menu, #gap-panel nav, #gap-panel output, #gap-panel ruby, #gap-panel section, #gap-panel summary,
#gap-panel time, #gap-panel mark, #gap-panel audio, #gap-panel video, #gap-panel button, #gap-panel input, #gap-panel select, #gap-panel textarea {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
    background: transparent;
    color: inherit;
    text-decoration: none;
    list-style: none;
    /* Crystal Clear Text Rendering */
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
    font-variant-ligatures: none !important;
}

#gap-panel article, #gap-panel aside, #gap-panel details, #gap-panel figcaption, #gap-panel figure,
#gap-panel footer, #gap-panel header, #gap-panel hgroup, #gap-panel menu, #gap-panel nav, #gap-panel section {
    display: block;
}

/* --- END OF AGGRESSIVE RESET --- */

.gap-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-style: normal;
    vertical-align: -0.15em;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Base Styles for Panel and Modals */
#gap-panel, .gap-modal, .gap-login-modal-overlay {
    font-family: var(--panel-font-family-val, 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif) !important;
    font-size: var(--panel-font-size-val, 14px) !important;
    line-height: 1.6 !important;
    color: rgb(var(--panel-text-rgb)) !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
    font-feature-settings: "kern" 1, "liga" 0 !important;
}

/* Panel Container - Enhanced Crystal Clear */
#gap-panel {
    position: fixed !important;
    top: 50% !important;
    right: var(--spacing-unit-val) !important;
    /* [FIX] Set initial off-screen state, to be overridden by JS for entry animation */
    transform: translateY(-50%) translateX(120%) !important;
    width: var(--panel-width-val) !important;
    max-height: var(--panel-max-height-val) !important;
    height: var(--panel-max-height-val) !important;

    /* Crystal Clear Background */
    background-color: rgba(var(--panel-bg-rgb), var(--panel-alpha-val)) !important;
    background-image: url('chrome-extension://__MSG_@@extension_id__/wallpaper.png');
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    /* Enhanced Border and Shadow */
    border: 1px solid var(--panel-border) !important;
    border-radius: var(--border-radius-val) !important;
    box-shadow:
        0 20px 60px rgba(0,0,0,0.15),
        0 8px 25px rgba(0,0,0,0.1),
        0 2px 8px rgba(0,0,0,0.08),
        inset 0 1px 0 rgba(255,255,255,0.1),
        inset 0 0 0 1px rgba(var(--panel-text-rgb),0.05) !important;

    /* Crystal Clear Backdrop Filter */
    backdrop-filter: blur(20px) saturate(180%) brightness(110%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(110%) !important;

    display: flex !important;
    flex-direction: column !important;
    z-index: 2147483646 !important;
    overflow: hidden !important;
    opacity: 0;
    /* [FIX] Transition managed by JS now for reliability */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#gap-tabs button[role="tab"]::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 15%;
    right: 15%;
    height: 4px;
    background: linear-gradient(90deg,
        var(--primary-color) 0%,
        var(--secondary-color) 100%);
    transform: scaleX(0);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    border-radius: 2px 2px 0 0;
    box-shadow: 0 -2px 8px rgba(var(--primary-color-rgb), 0.4) !important;
}

#gap-tabs button[role="tab"]:hover {
    color: var(--primary-color) !important;
    background: rgba(var(--primary-color-rgb), 0.08) !important;
    transform: translateY(-2px) !important;
}

#gap-tabs button[role="tab"]:hover::before {
    opacity: 1;
}

#gap-tabs button[role="tab"].active {
    color: var(--primary-color) !important;
    background: linear-gradient(180deg,
        rgba(var(--primary-color-rgb), 0.12) 0%,
        rgba(var(--primary-color-rgb), 0.06) 100%) !important;
    font-weight: 700 !important;
    transform: translateY(-2px) !important;
}

#gap-tabs button[role="tab"].active::before {
    opacity: 1;
}

#gap-tabs button[role="tab"].active::after {
    transform: scaleX(1);
}

#gap-tabs button[role="tab"] .gap-tab-icon {
    font-size: 1.1em;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

#gap-tabs button[role="tab"]:hover .gap-tab-icon,
#gap-tabs button[role="tab"].active .gap-tab-icon {
    transform: scale(1.1) rotate(5deg) !important;
}

/* Content Area - Enhanced */
#gap-panel #gap-panel-content-wrapper {
    flex-grow: 1;
    overflow-y: auto;
    background: linear-gradient(180deg,
        rgba(var(--panel-bg-rgb),0.15) 0%,
        rgba(var(--panel-bg-rgb),0.05) 20%,
        transparent 40%);
    position: relative;
}

#gap-panel #gap-panel-content-wrapper::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 30px;
    background: linear-gradient(180deg,
        rgba(var(--primary-color-rgb), 0.05) 0%,
        transparent 100%);
    pointer-events: none;
}

#gap-panel #gap-panel-content-scrollarea {
    padding: calc(var(--spacing-unit-val) * 1.4) !important;
    position: relative;
}

#gap-panel #gap-content > .tab {
    display: none;
    flex-direction: column;
    gap: calc(var(--spacing-unit-val) * 1.6);
    opacity: 0;
    transform: translateY(20px);
    animation: gapTabFadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

#gap-panel #gap-content > .tab.active {
    display: flex;
}

@keyframes gapTabFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Modern Card - Crystal Clear Enhancement */
#gap-panel .gap-section.modern-card {
    background: rgba(var(--card-bg-rgb, var(--panel-bg-rgb)), 0.6) !important;
    backdrop-filter: blur(20px) saturate(150%) !important;
    border: 1px solid rgba(var(--card-border-rgb, var(--panel-text-rgb)), 0.15) !important;
    border-radius: calc(var(--border-radius-val) * 0.9) !important;
    box-shadow:
        0 8px 32px rgba(0,0,0,0.12),
        0 2px 8px rgba(0,0,0,0.08),
        inset 0 1px 0 rgba(255,255,255,0.1) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    margin-bottom: calc(var(--spacing-unit-val) * 1.4);
    position: relative;
    overflow: hidden;
}

#gap-panel .gap-section.modern-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg,
        rgba(255,255,255,0.1) 0%,
        rgba(255,255,255,0.05) 50%,
        rgba(255,255,255,0.1) 100%);
    opacity: 0;
    transition: opacity 0.4s ease !important;
    pointer-events: none;
}

#gap-panel .gap-section.modern-card:last-child {
    margin-bottom: 0;
}

#gap-panel .gap-section.modern-card:hover {
    transform: translateY(-4px) scale(1.02) !important;
    box-shadow:
        0 16px 48px rgba(0,0,0,0.15),
        0 4px 16px rgba(0,0,0,0.12),
        0 0 0 1px rgba(var(--primary-color-rgb), 0.2),
        inset 0 1px 0 rgba(255,255,255,0.15) !important;
}

#gap-panel .gap-section.modern-card:hover::before {
    opacity: 1;
}

#gap-panel .modern-card-header {
    padding: calc(var(--spacing-unit-val) * 1.2) calc(var(--spacing-unit-val) * 1.6) !important;
    font-weight: 700 !important;
    font-size: 1em !important;
    color: var(--primary-color) !important;
    background: linear-gradient(135deg,
        rgba(var(--card-header-bg-rgb, var(--primary-color-rgb)), 0.1) 0%,
        rgba(var(--card-header-bg-rgb, var(--primary-color-rgb)), 0.05) 100%) !important;
    border-bottom: 1px solid rgba(var(--card-border-rgb, var(--panel-text-rgb)), 0.12) !important;
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit-val) * 0.7) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
    position: relative;
}

#gap-panel .modern-card-header::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--primary-color), var(--secondary-color));
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.5) !important;
}

#gap-panel .modern-card-header .gap-icon {
    color: inherit !important;
    font-size: 1.2em !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)) !important;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

#gap-panel .modern-card-header:hover .gap-icon {
    transform: scale(1.1) rotate(5deg) !important;
}

#gap-panel .modern-card-content {
    padding: calc(var(--spacing-unit-val) * 1.5) !important;
    position: relative;
}

#gap-panel .modern-card-content.no-padding-top { padding-top: 0 !important; }
#gap-panel .modern-card-content.no-margin-bottom { margin-bottom: 0 !important; }

/* Collapsible Sections - Enhanced */
#gap-panel .gap-section.modern-collapsible {
    margin-bottom: calc(var(--spacing-unit-val) * 1.4);
    border-radius: calc(var(--border-radius-val) * 0.9) !important;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#gap-panel .gap-section.modern-collapsible:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.12) !important;
    transform: translateY(-2px) !important;
}

#gap-panel .gap-section.modern-collapsible summary {
    display: flex;
    align-items: center;
    padding: calc(var(--spacing-unit-val) * 1.1) calc(var(--spacing-unit-val) * 1.5) !important;
    font-size: 0.95em !important;
    font-weight: 600;
    color: color-mix(in srgb, rgb(var(--panel-text-rgb)) 80%, transparent) !important;
    background: linear-gradient(135deg,
        rgba(var(--card-header-bg-rgb, var(--primary-color-rgb)), 0.08) 0%,
        rgba(var(--card-header-bg-rgb, var(--primary-color-rgb)), 0.04) 100%) !important;
    backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid rgba(var(--card-border-rgb, var(--panel-text-rgb)), 0.1) !important;
    cursor: pointer;
    list-style: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-radius: calc(var(--border-radius-val) * 0.9) calc(var(--border-radius-val) * 0.9) 0 0;
    position: relative;
    overflow: hidden;
}

#gap-panel .gap-section.modern-collapsible summary::before {
    content: '▶';
    display: inline-block;
    color: var(--primary-color) !important;
    font-size: 0.85em;
    margin-right: calc(var(--spacing-unit-val) * 0.7);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    transform-origin: center;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2)) !important;
}

#gap-panel .gap-section.modern-collapsible summary::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--primary-color-rgb), 0.05) 50%,
        transparent 100%);
    transform: translateX(-100%);
    transition: transform 0.6s ease !important;
}

#gap-panel .gap-section.modern-collapsible[open] summary {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background: linear-gradient(135deg,
        rgba(var(--primary-color-rgb), 0.12) 0%,
        rgba(var(--primary-color-rgb), 0.08) 100%) !important;
}

#gap-panel .gap-section.modern-collapsible summary:hover {
    background: linear-gradient(135deg,
        rgba(var(--primary-color-rgb), 0.15) 0%,
        rgba(var(--primary-color-rgb), 0.08) 100%) !important;
    color: var(--primary-color) !important;
    transform: translateX(4px) !important;
}

#gap-panel .gap-section.modern-collapsible summary:hover::after {
    transform: translateX(100%);
}

#gap-panel .gap-section.modern-collapsible[open] summary::before {
    transform: rotate(90deg);
}

#gap-panel .gap-section.modern-collapsible .section-content {
    padding: calc(var(--spacing-unit-val) * 1.4) !important;
    background: rgba(var(--card-bg-rgb, var(--panel-bg-rgb)), 0.4) !important;
    backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(var(--card-border-rgb, var(--panel-text-rgb)), 0.08);
    border-top: none;
    border-radius: 0 0 calc(var(--border-radius-val) * 0.9) calc(var(--border-radius-val) * 0.9);
    animation: expandContent 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes expandContent {
    from {
        opacity: 0;
        transform: translateY(-10px);
        max-height: 0;
    }
    to {
        opacity: 1;
        transform: translateY(0);
        max-height: 1000px;
    }
}

#gap-panel .gap-section.sub-section.modern-collapsible {
    margin-top: calc(var(--spacing-unit-val) * 1.2);
    margin-bottom: 0;
}

#gap-panel .gap-section.sub-section.modern-collapsible summary {
    font-size: 0.9em !important;
    background: linear-gradient(135deg,
        rgba(var(--primary-color-rgb), 0.06) 0%,
        rgba(var(--primary-color-rgb), 0.03) 100%) !important;
    padding: calc(var(--spacing-unit-val) * 0.85) calc(var(--spacing-unit-val) * 1.25) !important;
}

#gap-panel .gap-section.sub-section.modern-collapsible .section-content {
    background: rgba(var(--panel-bg-rgb), 0.2) !important;
    padding: calc(var(--spacing-unit-val) * 1.2) !important;
    border: 1px solid rgba(var(--primary-color-rgb), 0.08);
    border-top: none;
}

/* Forms & Inputs - Crystal Clear Enhancement */
#gap-panel .settings-grid, .gap-modal-content .settings-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: calc(var(--spacing-unit-val) * 1.1) calc(var(--spacing-unit-val) * 1.5) !important;
}

#gap-panel .settings-grid label, .gap-modal-content .settings-grid label {
    font-size: 0.88em !important;
    font-weight: 600 !important;
    color: color-mix(in srgb, rgb(var(--panel-text-rgb)) 90%, transparent) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
}

#gap-panel input[type="text"], #gap-panel input[type="number"], #gap-panel input[type="email"], #gap-panel input[type="url"],
#gap-panel input[type="datetime-local"], #gap-panel input[type="date"], #gap-panel input[type="file"],
#gap-panel select, #gap-panel textarea, #gap-panel .gap-editor-container,
.gap-modal-content input[type="text"], .gap-modal-content input[type="number"], .gap-modal-content input[type="email"], .gap-modal-content input[type="url"],
.gap-modal-content input[type="datetime-local"], .gap-modal-content input[type="date"], .gap-modal-content input[type="file"],
.gap-modal-content select, .gap-modal-content textarea, .gap-modal-content .gap-editor-container,
.gap-login-modal-content input[type="text"], .gap-login-modal-content input[type="password"] {
    width: 100%;
    padding: calc(var(--spacing-unit-val) * 0.9) calc(var(--spacing-unit-val) * 1.2) !important;
    border-radius: calc(var(--border-radius-val) * 0.5) !important;
    font-size: 0.95em !important;
    font-weight: 500 !important;
    background: rgba(var(--input-bg-rgb, var(--panel-bg-rgb)), 0.6) !important;
    backdrop-filter: blur(15px) !important;
    border: 1.5px solid rgba(var(--input-border-rgb, var(--panel-text-rgb)), 0.15) !important;
    color: var(--input-text) !important;
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.06),
        0 1px 0 rgba(255,255,255,0.1) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
}

#gap-panel input:focus, #gap-panel select:focus, #gap-panel textarea:focus, #gap-panel .gap-editor-container:focus-within,
.gap-modal-content input:focus, .gap-modal-content select:focus, .gap-modal-content textarea:focus, .gap-modal-content .gap-editor-container:focus-within,
.gap-login-modal-content input:focus {
    border-color: var(--primary-color) !important;
    background: rgba(var(--input-bg-rgb, var(--panel-bg-rgb)), 0.8) !important;
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.04),
        0 0 0 4px rgba(var(--primary-color-rgb), 0.15),
        0 8px 25px rgba(var(--primary-color-rgb), 0.1),
        0 2px 8px rgba(0,0,0,0.08) !important;
    outline: none !important;
    transform: translateY(-1px) scale(1.01) !important;
}

#gap-panel ::placeholder, .gap-modal-content ::placeholder, .gap-login-modal-content ::placeholder {
    color: color-mix(in srgb, rgb(var(--panel-text-rgb)) 55%, transparent) !important;
    opacity: 1;
    font-weight: 400 !important;
}

#gap-panel .input-error, .gap-modal-content .input-error {
    border-color: var(--error-color) !important;
    box-shadow:
        inset 0 2px 4px rgba(var(--error-rgb), 0.1),
        0 0 0 4px rgba(var(--error-rgb), 0.2),
        0 8px 25px rgba(var(--error-rgb), 0.15) !important;
    background: color-mix(in srgb, var(--input-bg) 90%, var(--error-color) 10%) !important;
}

#gap-panel .input-error:focus, .gap-modal-content .input-error:focus {
    border-color: color-mix(in srgb, var(--error-color) 80%, black 15%) !important;
    box-shadow:
        inset 0 2px 4px rgba(var(--error-rgb), 0.12),
        0 0 0 5px rgba(var(--error-rgb), 0.25),
        0 10px 30px rgba(var(--error-rgb), 0.2) !important;
    transform: translateY(-1px) scale(1.01) !important;
}

.gap-modal-content input[type="checkbox"]:checked::before {
    color: rgb(var(--button-text)) !important;
}

body.theme-skylineGlow .gap-btn.success-btn,
body.theme-skylineGlow .gap-btn.warning-btn {
    color: #ffffff !important;
}

body.theme-skylineGlow .gap-modal-content input[type="checkbox"]:checked::before {
    color: #fff;
}

#gap-panel .form-row {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit-val) * 0.9);
}

#gap-panel .input-with-unit {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit-val) * 0.6);
}

#gap-panel .input-with-unit input { flex-grow: 1; }

#gap-panel .unit-text {
    font-size: 0.9em;
    opacity: 0.8;
    font-weight: 500;
}

/* Buttons - Crystal Clear Enhancement */
#gap-panel .gap-btn, .gap-modal-content .gap-btn, .gap-login-modal-content .gap-btn {
    padding: calc(var(--spacing-unit-val) * 0.9) calc(var(--spacing-unit-val) * 1.8) !important;
    font-size: 0.92em !important;
    font-weight: 700 !important;
    border-radius: calc(var(--border-radius-val) * 0.6) !important;
    letter-spacing: 0.5px !important;
    box-shadow:
        0 4px 12px rgba(0,0,0,0.1),
        0 1px 3px rgba(0,0,0,0.06),
        inset 0 1px 0 rgba(255,255,255,0.2) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform, box-shadow;
    cursor: pointer;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit-val)*0.6);
    position: relative;
    overflow: hidden;
}

#gap-panel .gap-btn::before,
.gap-modal-content .gap-btn::before,
.gap-login-modal-content .gap-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -100%; right: 0; bottom: 0;
    background: linear-gradient(90deg,
        transparent,
        rgba(255,255,255,0.2),
        transparent);
    transition: left 0.6s ease !important;
}

#gap-panel .gap-btn:hover::before,
.gap-modal-content .gap-btn:hover::before,
.gap-login-modal-content .gap-btn:hover::before {
    left: 100%;
}

#gap-panel .gap-btn:active, .gap-modal-content .gap-btn:active, .gap-login-modal-content .gap-btn:active {
    transform: translateY(1px) scale(0.98) !important;
    box-shadow:
        0 2px 6px rgba(0,0,0,0.12),
        inset 0 1px 0 rgba(255,255,255,0.1) !important;
}

#gap-panel .gap-btn.primary-btn, .gap-modal-content .gap-btn.primary-btn, .gap-login-modal-content .gap-btn.primary-btn {
    background: linear-gradient(135deg,
        var(--primary-color) 0%,
        color-mix(in srgb, var(--primary-color) 85%, var(--secondary-color) 15%) 50%,
        color-mix(in srgb, var(--primary-color) 75%, var(--progress-color) 25%) 100%) !important;
    color: rgb(var(--button-text)) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
    border: none !important;
    box-shadow:
        0 6px 20px rgba(var(--primary-color-rgb), 0.3),
        0 2px 6px rgba(0,0,0,0.1),
        inset 0 1px 0 rgba(255,255,255,0.3) !important;
}

#gap-panel .gap-btn.primary-btn:hover, .gap-modal-content .gap-btn.primary-btn:hover, .gap-login-modal-content .gap-btn.primary-btn:hover {
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow:
        0 10px 30px rgba(var(--primary-color-rgb), 0.4),
        0 4px 12px rgba(0,0,0,0.15),
        inset 0 1px 0 rgba(255,255,255,0.4) !important;
    filter: brightness(110%) saturate(110%) !important;
}

#gap-panel .gap-btn.secondary-btn, .gap-modal-content .gap-btn.secondary-btn {
    background: rgba(var(--card-bg-rgb, var(--panel-bg-rgb)), 0.6) !important;
    backdrop-filter: blur(15px) !important;
    color: var(--primary-color) !important;
    border: 1.5px solid rgba(var(--primary-color-rgb), 0.3) !important;
    box-shadow:
        0 4px 12px rgba(0,0,0,0.08),
        inset 0 1px 0 rgba(255,255,255,0.1) !important;
}

#gap-panel .gap-btn.secondary-btn:hover, .gap-modal-content .gap-btn.secondary-btn:hover {
    background: rgba(var(--primary-color-rgb), 0.1) !important;
    border-color: var(--primary-color) !important;
    color: color-mix(in srgb, var(--primary-color) 90%, white 10%) !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow:
        0 8px 25px rgba(var(--primary-color-rgb), 0.2),
        0 2px 8px rgba(0,0,0,0.1),
        inset 0 1px 0 rgba(255,255,255,0.15) !important;
}

#gap-panel .gap-btn.error-btn, .gap-modal-content .gap-btn.error-btn {
    background: linear-gradient(135deg,
        var(--error-color) 0%,
        color-mix(in srgb, var(--error-color) 85%, #ff8a80) 100%) !important;
    color: #FFF !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
    border: none !important;
    box-shadow:
        0 6px 20px rgba(var(--error-rgb), 0.3),
        inset 0 1px 0 rgba(255,255,255,0.2) !important;
}

#gap-panel .gap-btn.error-btn:hover, .gap-modal-content .gap-btn.error-btn:hover {
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow:
        0 10px 30px rgba(var(--error-rgb), 0.4),
        inset 0 1px 0 rgba(255,255,255,0.3) !important;
    filter: brightness(110%) saturate(110%) !important;
}

#gap-panel .gap-btn.success-btn, .gap-modal-content .gap-btn.success-btn {
    background: linear-gradient(135deg,
        var(--success-color) 0%,
        color-mix(in srgb, var(--success-color) 85%, #81c784) 100%) !important;
    color: #FFF !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
    border: none !important;
    box-shadow:
        0 6px 20px rgba(var(--success-color-rgb), 0.3),
        inset 0 1px 0 rgba(255,255,255,0.2) !important;
}

#gap-panel .gap-btn.success-btn:hover, .gap-modal-content .gap-btn.success-btn:hover {
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow:
        0 10px 30px rgba(var(--success-color-rgb), 0.4),
        inset 0 1px 0 rgba(255,255,255,0.3) !important;
    filter: brightness(110%) saturate(110%) !important;
}

#gap-panel .gap-btn.btn-sm, .gap-modal-content .gap-btn.btn-sm {
    padding: calc(var(--spacing-unit-val) * 0.6) calc(var(--spacing-unit-val) * 1.3) !important;
    font-size: 0.84em !important;
}

#gap-panel .gap-btn.full-width, .gap-modal-content .gap-btn.full-width {
    width: 100%;
}

#gap-panel .button-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: calc(var(--spacing-unit-val) * 0.8);
}

#gap-panel .gap-btn:disabled,
.gap-modal-content .gap-btn:disabled,
.gap-login-modal-content .gap-btn:disabled {
    opacity: 0.5 !important;
    filter: grayscale(70%) brightness(0.9) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    transform: none !important;
    background: rgba(var(--panel-text-rgb), 0.1) !important;
    color: rgba(var(--panel-text-rgb), 0.4) !important;
    border: 1px solid rgba(var(--panel-text-rgb), 0.2) !important;
    cursor: not-allowed !important;
    backdrop-filter: blur(5px) !important;
}

#gap-panel .gap-btn:disabled .gap-icon,
.gap-modal-content .gap-btn:disabled .gap-icon {
    color: rgba(var(--panel-text-rgb), 0.4) !important;
}

#gap-panel .gap-btn.primary-btn:disabled,
.gap-modal-content .gap-btn.primary-btn:disabled {
    background: rgba(var(--secondary-color-rgb), 0.2) !important;
    color: rgba(var(--panel-text-rgb), 0.5) !important;
    border: 1px solid rgba(var(--secondary-color-rgb), 0.3) !important;
}

#gap-panel .gap-btn.primary-btn:disabled .gap-icon,
.gap-modal-content .gap-btn.primary-btn:disabled .gap-icon {
     color: rgba(var(--panel-text-rgb), 0.5) !important;
}

/* Modals - Crystal Clear Enhancement */
.gap-modal {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7) !important;
    backdrop-filter: blur(8px) saturate(150%) !important;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2147483647;
    animation: gapModalFadeInBackground 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes gapModalFadeInBackground {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
    to {
        opacity: 1;
        backdrop-filter: blur(8px) saturate(150%);
    }
}

.gap-modal-content {
    background: rgba(var(--modal-content-bg-rgb, var(--panel-bg-rgb)), 0.95) !important;
    backdrop-filter: blur(25px) saturate(180%) brightness(110%) !important;
    border-radius: calc(var(--border-radius-val) * 1) !important;
    box-shadow:
        0 25px 80px rgba(0,0,0,0.3),
        0 10px 30px rgba(0,0,0,0.2),
        0 0 0 1px rgba(255,255,255,0.1),
        inset 0 1px 0 rgba(255,255,255,0.2) !important;
    color: rgb(var(--panel-text-rgb)) !important;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: gapModalContentEntrance 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    border: 1px solid rgba(var(--panel-text-rgb), 0.15) !important;
    overflow: hidden;
    position: relative;
}

.gap-modal-content::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg,
        rgba(255,255,255,0.1) 0%,
        rgba(255,255,255,0.05) 50%,
        rgba(255,255,255,0.1) 100%);
    opacity: 0;
    transition: opacity 0.4s ease !important;
    pointer-events: none;
}

.gap-modal-content:hover::before {
    opacity: 1;
}

.gap-modal-content.narrow { width: min(90vw, 450px); }
.gap-modal-content.wide { width: min(90vw, 720px); }

.modal-header {
    padding: calc(var(--spacing-unit-val) * 1.3) calc(var(--spacing-unit-val) * 1.8) !important;
    background: linear-gradient(135deg,
        rgba(var(--modal-header-bg-rgb, var(--primary-color-rgb)), 0.1) 0%,
        rgba(var(--modal-header-bg-rgb, var(--primary-color-rgb)), 0.05) 100%);
    border-bottom: 1px solid rgba(var(--panel-text-rgb), 0.12);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    position: relative;
}

.modal-header::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--primary-color), var(--secondary-color));
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 15px rgba(var(--primary-color-rgb), 0.6) !important;
}

.modal-header.no-border { border-bottom: none; }
.modal-header.justify-end { justify-content: flex-end; }

.modal-header h3, .modal-header h2 {
    font-size: 1.15em !important;
    font-weight: 700 !important;
    color: color-mix(in srgb, rgb(var(--panel-text-rgb)) 95%, transparent) !important;
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit-val)*0.7);
    text-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}

.modal-header .gap-icon {
    color: var(--primary-color) !important;
    filter: drop-shadow(0 2px 4px rgba(var(--primary-color-rgb), 0.3)) !important;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.modal-header .gap-icon:hover {
    transform: scale(1.1) rotate(5deg) !important;
}

.modal-header .close-modal-btn {
    font-size: 1.6em;
    color: color-mix(in srgb, var(--secondary-color) 80%, transparent);
    background: rgba(255,255,255,0.1) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    border-radius: 50% !important;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.modal-header .close-modal-btn:hover {
    color: var(--primary-color) !important;
    background: rgba(var(--primary-color-rgb), 0.15) !important;
    transform: scale(1.1) rotate(90deg) !important;
    box-shadow: 0 4px 15px rgba(var(--primary-color-rgb), 0.3) !important;
}

.modal-body {
    padding: calc(var(--spacing-unit-val) * 1.6) !important;
    overflow-y: auto;
    flex-grow: 1;
    position: relative;
}

.modal-body.no-padding-top { padding-top: 0; }
.modal-body.text-center { text-align: center; }

.modal-actions {
    padding: calc(var(--spacing-unit-val) * 1.2) calc(var(--spacing-unit-val) * 1.8) !important;
    background: linear-gradient(180deg,
        rgba(var(--modal-footer-bg-rgb, var(--panel-bg-rgb)), 0.8) 0%,
        rgba(var(--modal-footer-bg-rgb, var(--panel-bg-rgb)), 0.9) 100%);
    backdrop-filter: blur(15px) !important;
    border-top: 1px solid rgba(var(--panel-text-rgb), 0.1);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: calc(var(--spacing-unit-val) * 0.9);
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

.modal-actions.space-between { justify-content: space-between; }

/* Template List - Enhanced */
#gap-panel .tmpl-list {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit-val)*0.7);
    padding-right: calc(var(--spacing-unit-val)*0.7);
}

#gap-panel .tmpl-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: calc(var(--spacing-unit-val)*0.8) calc(var(--spacing-unit-val)*1.2) !important;
    background: rgba(var(--panel-text-rgb), 0.04) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(var(--panel-text-rgb), 0.08) !important;
    border-radius: calc(var(--border-radius-val)*0.5) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
    overflow: hidden;
}

#gap-panel .tmpl-item::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--primary-color), var(--secondary-color));
    transform: scaleY(0);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

#gap-panel .tmpl-item:hover {
    transform: translateX(6px) scale(1.02) !important;
    box-shadow:
        0 8px 25px rgba(var(--primary-color-rgb),0.15),
        0 2px 8px rgba(0,0,0,0.1),
        0 0 0 1px rgba(var(--primary-color-rgb),0.2) !important;
    background: color-mix(in srgb, var(--card-bg) 85%, var(--primary-color) 15%) !important;
    border-color: rgba(var(--primary-color-rgb), 0.3) !important;
}

#gap-panel .tmpl-item:hover::before {
    transform: scaleY(1);
}

#gap-panel .tmpl-content {
    flex-grow: 1;
    overflow: hidden;
    margin-right: calc(var(--spacing-unit-val)*0.6);
}

#gap-panel .tmpl-text {
    font-size: 0.9em;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: color-mix(in srgb, rgb(var(--panel-text-rgb)) 90%, transparent) !important;
}

#gap-panel .tmpl-actions {
    display: flex;
    gap: calc(var(--spacing-unit-val)*0.4);
}

#gap-panel .tmpl-actions .gap-icon-btn {
    font-size: 1em;
    padding: calc(var(--spacing-unit-val)*0.4);
    background: rgba(var(--panel-text-rgb), 0.08) !important;
    border: 1px solid rgba(var(--panel-text-rgb), 0.15) !important;
    border-radius: 50% !important;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    color: color-mix(in srgb, rgb(var(--panel-text-rgb)) 70%, transparent) !important;
}

#gap-panel .tmpl-actions .gap-icon-btn:hover {
    background: rgba(var(--primary-color-rgb), 0.15) !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
    transform: scale(1.1) !important;
}

#gap-panel .tmpl-empty {
    text-align: center;
    padding: calc(var(--spacing-unit-val) * 1.5);
    opacity: 0.6;
    font-style: italic;
    color: color-mix(in srgb, rgb(var(--panel-text-rgb)) 60%, transparent) !important;
}

/* Log & Info Tab - Enhanced */
#gap-panel #tab-log-info .gap-sub-tabs {
    display: flex;
    justify-content: space-around;
    background: linear-gradient(180deg,
        rgba(var(--panel-bg-rgb), 0.2) 0%,
        rgba(var(--panel-bg-rgb), 0.1) 100%);
    backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid rgba(var(--panel-text-rgb), 0.1);
    margin-bottom: calc(var(--spacing-unit-val)*1.2);
    border-radius: calc(var(--border-radius-val) * 0.5) calc(var(--border-radius-val) * 0.5) 0 0;
}

#gap-panel #tab-log-info .gap-sub-tab-btn {
    flex-grow: 1;
    text-align: center;
    padding: calc(var(--spacing-unit-val)*0.9) calc(var(--spacing-unit-val)*1.2);
    font-size: 0.88em;
    font-weight: 600;
    color: color-mix(in srgb, rgb(var(--panel-text-rgb)) 75%, transparent);
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit-val)*0.5);
    border-bottom: 3px solid transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
    overflow: hidden;
}

#gap-panel #tab-log-info .gap-sub-tab-btn::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg,
        rgba(var(--primary-color-rgb), 0.08) 0%,
        transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease !important;
}

#gap-panel #tab-log-info .gap-sub-tab-btn:hover {
    color: var(--primary-color);
    background: rgba(var(--primary-color-rgb),0.08);
    transform: translateY(-2px) !important;
}

#gap-panel #tab-log-info .gap-sub-tab-btn:hover::before {
    opacity: 1;
}

#gap-panel #tab-log-info .gap-sub-tab-btn.active {
    color: var(--primary-color);
    font-weight: 700;
    border-bottom-color: var(--primary-color);
    background: rgba(var(--primary-color-rgb),0.12);
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(var(--primary-color-rgb), 0.2) !important;
}

#gap-panel #tab-log-info .gap-sub-tab-btn.active::before {
    opacity: 1;
}

#gap-panel #tab-log-info .gap-sub-tab-content { display: none; }
#gap-panel #tab-log-info .gap-sub-tab-content.active {
    display: block;
    animation: gapTabFadeIn 0.4s ease-out forwards;
}

#gap-panel #tab-log-info .static-content-tab .modern-card-content {
    line-height: 1.8;
}

#gap-panel #tab-log-info .static-content-tab h4 {
    font-size: 1.12em;
    font-weight: 700;
    margin: calc(var(--spacing-unit-val) * 1.2) 0 calc(var(--spacing-unit-val)*0.7);
    color: var(--primary-color);
    text-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}

#gap-panel #tab-log-info .static-content-tab h5 {
    font-size: 1.02em;
    font-weight: 600;
    margin: calc(var(--spacing-unit-val)*1) 0 calc(var(--spacing-unit-val)*0.4);
    color: color-mix(in srgb, var(--primary-color) 85%, rgb(var(--panel-text-rgb)) 15%) !important;
}

#gap-panel #tab-log-info .static-content-tab p.guide-item-detail {
    margin-left: calc(var(--spacing-unit-val)*0.7);
    margin-bottom: calc(var(--spacing-unit-val)*0.8);
    font-size: 0.92em;
    opacity: 0.95;
    line-height: 1.6;
}

#gap-panel #tab-log-info .full-height-log-parent {
    display: flex;
    flex-direction: column;
    min-height: 320px;
}

#gap-panel #tab-log-info #gap-status-log-container.full-height-log {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

#gap-panel #tab-log-info .status-log-box {
    flex-grow: 1;
    height: 290px;
    max-height: 380px;
    overflow-y: auto;
    background: rgba(var(--input-bg-rgb, var(--panel-bg-rgb)), 0.6) !important;
    backdrop-filter: blur(15px) !important;
    border: 1.5px solid rgba(var(--input-border-rgb, var(--panel-text-rgb)), 0.15) !important;
    border-radius: calc(var(--border-radius-val)*0.5);
    padding: calc(var(--spacing-unit-val)*0.9);
    font-size: 0.82em;
    margin-bottom: calc(var(--spacing-unit-val)*0.8);
    box-shadow:
        inset 0 2px 6px rgba(0,0,0,0.08),
        0 2px 8px rgba(0,0,0,0.06) !important;
}

.log-entry {
    display: flex;
    margin-bottom: 5px;
    font-family: 'Fira Code', 'SF Mono', Monaco, 'Cascadia Code', monospace;
    line-height: 1.6;
    padding: 2px 4px;
    border-radius: 3px;
    transition: background-color 0.2s ease !important;
}

.log-entry:hover {
    background: rgba(var(--panel-text-rgb), 0.05) !important;
}

.log-time {
    color: var(--secondary-color);
    margin-right: 8px;
    white-space: nowrap;
    font-weight: 500;
    opacity: 0.9;
}

.log-icon {
    margin-right: 6px;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.2)) !important;
}

.log-message {
    word-break: break-word;
    font-weight: 500;
}

.log-info .log-message { color: inherit; }

.log-success .log-message {
    color: var(--success-color);
    font-weight: 600;
}

.log-warning .log-message {
    color: var(--warning-color);
    font-weight: 600;
}

.log-error .log-message {
    color: var(--error-color);
    font-weight: 600;
}

.log-debug .log-message {
    opacity: 0.75;
    font-style: italic;
}

.log-empty-placeholder {
    text-align: center;
    opacity: 0.6;
    padding: calc(var(--spacing-unit-val) * 1.5);
    font-style: italic;
    color: color-mix(in srgb, rgb(var(--panel-text-rgb)) 60%, transparent) !important;
}

/* Footer - Enhanced */
#gap-panel #gap-footer {
    padding: calc(var(--spacing-unit-val) * 1) calc(var(--spacing-unit-val) * 1.2) !important;
    background: linear-gradient(180deg,
        rgba(var(--panel-bg-rgb),0.5) 0%,
        rgba(var(--panel-bg-rgb),0.7) 100%) !important;
    backdrop-filter: blur(15px) !important;
    font-size: 0.78em !important;
    opacity: 0.9 !important;
    text-align: center;
    border-top: 1px solid rgba(var(--panel-text-rgb), 0.1);
    flex-shrink: 0;
    position: relative;
}

#gap-panel #gap-footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--primary-color-rgb), 0.3) 50%,
        transparent 100%);
}

#gap-panel #gap-footer #gap-branding {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: calc(var(--spacing-unit-val)*0.7);
}

#gap-panel #gap-footer .gap-link {
    font-weight: 600;
    color: var(--link-color);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding: 2px 4px;
    border-radius: 3px;
}

#gap-panel #gap-footer .gap-link:hover {
    color: color-mix(in srgb, var(--link-color) 85%, white 15%) !important;
    background: rgba(var(--primary-color-rgb), 0.1) !important;
    transform: translateY(-1px) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}

/* Scrollbar Styling - Enhanced */
#gap-panel ::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.status-log-box::-webkit-scrollbar {
    width: 12px !important;
    height: 12px !important;
}

#gap-panel ::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track,
.status-log-box::-webkit-scrollbar-track {
    background: rgba(var(--scrollbar-track-rgb, var(--panel-text-rgb)), 0.05) !important;
    border-radius: calc(var(--border-radius-val)*0.6) !important;
}

#gap-panel ::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,
.status-log-box::-webkit-scrollbar-thumb {
    background: rgba(var(--scrollbar-thumb-rgb, var(--primary-color-rgb)), 0.4) !important;
    border-radius: calc(var(--border-radius-val)*0.6) !important;
    border: 3px solid rgba(var(--scrollbar-track-rgb, var(--panel-text-rgb)), 0.05) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#gap-panel ::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover,
.status-log-box::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--scrollbar-thumb-rgb, var(--primary-color-rgb)), 0.7) !important;
    transform: scale(1.1) !important;
}

#gap-panel *, .modal-body *, .status-log-box * {
    scrollbar-color: rgba(var(--scrollbar-thumb-rgb, var(--primary-color-rgb)), 0.4) rgba(var(--scrollbar-track-rgb, var(--panel-text-rgb)), 0.05) !important;
    scrollbar-width: thin !important;
}

/* [FIX] Simplified & Robust Animations */
@keyframes gapPanelEntrance {
    from {
        opacity: 0;
        transform: translateY(-50%) translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

@keyframes gapPanelExit {
    from {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
    to {
        opacity: 0;
        transform: translateY(-50%) translateX(50px);
        visibility: hidden;
    }
}

@keyframes gapModalContentEntrance {
    0% {
        transform: scale(0.9) translateY(20px);
        opacity: 0;
    }
    100% {
        transform: scale(1) translateY(0px);
        opacity: 1;
    }
}

/* Enhanced Aurora Background - Improved Performance */
#gap-panel-background-effects {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    overflow: hidden;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    will-change: transform;
}

#gap-panel-background-effects::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%; right: -50%; bottom: -50%;
    background: radial-gradient(circle at 25% 25%,
        rgba(var(--aurora-color-1, var(--primary-color-rgb)), 0.08) 0%,
        transparent 50%),
    radial-gradient(circle at 75% 25%,
        rgba(var(--aurora-color-2, var(--secondary-color-rgb)), 0.08) 0%,
        transparent 50%),
    radial-gradient(circle at 50% 75%,
        rgba(var(--aurora-color-3, var(--progress-color-rgb)), 0.06) 0%,
        transparent 50%),
    radial-gradient(circle at 25% 75%,
        rgba(var(--aurora-color-4, var(--primary-color-rgb)), 0.08) 0%,
        transparent 50%),
    linear-gradient(135deg,
        rgba(var(--primary-color-rgb), 0.03) 0%,
        rgba(var(--secondary-color-rgb), 0.03) 25%,
        rgba(var(--progress-color-rgb), 0.03) 50%,
        rgba(var(--primary-color-rgb), 0.03) 75%,
        rgba(var(--secondary-color-rgb), 0.03) 100%);
    background-size: 300% 300%, 250% 250%, 400% 400%, 350% 350%, 200% 200%;
    animation:
        aurora-animation-1 25s ease-in-out infinite,
        aurora-animation-2 20s ease-in-out infinite reverse,
        aurora-animation-3 30s ease-in-out infinite,
        aurora-animation-4 22s ease-in-out infinite reverse,
        aurora-base 15s linear infinite;
    opacity: var(--aurora-opacity, 0.6);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: background-position, opacity;
    filter: blur(1px);
}

@keyframes aurora-animation-1 {
    0%, 100% { background-position: 0% 50%, 100% 50%, 50% 0%, 0% 100%, 0% 0%; }
    25% { background-position: 100% 0%, 0% 100%, 100% 50%, 50% 0%, 25% 25%; }
    50% { background-position: 50% 100%, 50% 0%, 0% 100%, 100% 50%, 50% 50%; }
    75% { background-position: 0% 50%, 100% 100%, 50% 50%, 0% 0%, 75% 75%; }
}

@keyframes aurora-animation-2 {
    0%, 100% { background-position: 100% 0%, 0% 100%, 100% 100%, 50% 50%, 100% 0%; }
    33% { background-position: 0% 100%, 100% 0%, 50% 0%, 100% 100%, 0% 100%; }
    66% { background-position: 50% 50%, 50% 50%, 0% 100%, 0% 0%, 50% 50%; }
}

@keyframes aurora-animation-3 {
    0%, 100% { background-position: 50% 0%, 50% 100%, 0% 50%, 100% 50%, 0% 100%; }
    20% { background-position: 100% 25%, 0% 75%, 75% 0%, 25% 100%, 100% 0%; }
    40% { background-position: 25% 100%, 75% 0%, 100% 75%, 0% 25%, 50% 50%; }
    60% { background-position: 75% 50%, 25% 50%, 50% 100%, 50% 0%, 0% 100%; }
    80% { background-position: 0% 75%, 100% 25%, 25% 50%, 75% 50%, 100% 50%; }
}

@keyframes aurora-animation-4 {
    0%, 100% { background-position: 100% 100%, 0% 0%, 50% 50%, 100% 0%, 50% 100%; }
    30% { background-position: 25% 25%, 75% 75%, 0% 100%, 50% 50%, 100% 0%; }
    70% { background-position: 75% 0%, 25% 100%, 100% 25%, 0% 75%, 0% 50%; }
}

@keyframes aurora-base {
    0% { background-position: 0% 0%, 100% 100%, 50% 0%, 0% 100%, 0% 50%; }
    25% { background-position: 100% 0%, 0% 100%, 100% 50%, 50% 0%, 25% 75%; }
    50% { background-position: 100% 100%, 0% 0%, 0% 100%, 100% 50%, 75% 25%; }
    75% { background-position: 0% 100%, 100% 0%, 50% 50%, 0% 0%, 50% 100%; }
    100% { background-position: 0% 0%, 100% 100%, 50% 0%, 0% 100%, 0% 50%; }
}

/* Particle Effect Enhancement */
#gap-panel-background-effects::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image:
        radial-gradient(circle at 20% 80%, rgba(255,255,255,0.1) 1px, transparent 1px),
        radial-gradient(circle at 80% 20%, rgba(255,255,255,0.08) 1px, transparent 1px),
        radial-gradient(circle at 40% 40%, rgba(var(--primary-color-rgb),0.12) 1px, transparent 1px),
        radial-gradient(circle at 60% 80%, rgba(255,255,255,0.06) 1px, transparent 1px),
        radial-gradient(circle at 90% 70%, rgba(var(--secondary-color-rgb),0.1) 1px, transparent 1px);
    background-size: 150px 150px, 200px 200px, 100px 100px, 180px 180px, 120px 120px;
    animation:
        particles-float-1 40s linear infinite,
        particles-float-2 35s linear infinite reverse,
        particles-float-3 50s linear infinite,
        particles-float-4 45s linear infinite reverse,
        particles-float-5 30s linear infinite;
    opacity: 0.4;
    mix-blend-mode: overlay;
    will-change: background-position;
}

@keyframes particles-float-1 {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

@keyframes particles-float-2 {
    0% { background-position: 100% 0%; }
    100% { background-position: 0% 100%; }
}

@keyframes particles-float-3 {
    0% { background-position: 50% 0%; }
    100% { background-position: 50% 100%; }
}

@keyframes particles-float-4 {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

@keyframes particles-float-5 {
    0% { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
}

/* Enhanced Login Modal */
.gap-login-modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(10, 10, 20, 0.85) !important;
    backdrop-filter: blur(12px) saturate(150%) brightness(70%) !important;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2147483647;
    animation: gapModalFadeInBackground 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.gap-login-modal-content {
    background: rgba(var(--modal-content-bg-rgb, 25, 25, 35), 0.95) !important;
    backdrop-filter: blur(25px) saturate(180%) brightness(110%) !important;
    color: rgb(var(--panel-text-rgb, 220, 220, 230));
    padding: calc(var(--spacing-unit-val, 12px) * 3);
    border-radius: calc(var(--border-radius-val, 18px) * 1.2);
    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.4),
        0 10px 30px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255,255,255,0.1),
        inset 0 1px 0 rgba(255,255,255,0.2) !important;
    width: 450px;
    max-width: 90%;
    text-align: center;
    border: 1px solid rgba(var(--panel-text-rgb, 80, 80, 90), 0.2) !important;
    animation: gapModalContentEntrance 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    position: relative;
    overflow: hidden;
}

.gap-login-modal-content::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg,
        rgba(255,255,255,0.08) 0%,
        rgba(255,255,255,0.04) 50%,
        rgba(255,255,255,0.08) 100%);
    opacity: 0;
    transition: opacity 0.4s ease !important;
    pointer-events: none;
}

.gap-login-modal-content:hover::before {
    opacity: 1;
}

.gap-login-modal-content h2 {
    margin: 0 0 calc(var(--spacing-unit-val, 12px) * 0.8) 0;
    font-size: 1.8em;
    font-weight: 700;
    color: var(--primary-color, #8A63D2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}

.gap-login-modal-content .gg-logo-icon {
    height: 1.6em;
    width: 1.6em;
    filter: drop-shadow(0 4px 8px rgba(var(--primary-color-rgb), 0.4)) !important;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.gap-login-modal-content .gg-logo-icon:hover {
    transform: scale(1.1) rotate(10deg) !important;
}

.gap-login-modal-content p {
    margin-bottom: calc(var(--spacing-unit-val, 12px) * 2.5);
    font-size: 1.05em;
    opacity: 0.85;
    line-height: 1.6;
    font-weight: 500;
}

.gap-form-group {
    margin-bottom: calc(var(--spacing-unit-val, 12px) * 1.8);
    text-align: left;
}

.gap-form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: calc(var(--spacing-unit-val, 12px) * 0.7);
    font-size: 0.95em;
    opacity: 0.95;
    color: color-mix(in srgb, rgb(var(--panel-text-rgb)) 90%, transparent) !important;
}

#gap-login-button {
    width: 100%;
    padding: calc(var(--spacing-unit-val, 12px) * 1.2) !important;
    font-size: 1.1em !important;
    font-weight: 700 !important;
    margin-top: calc(var(--spacing-unit-val, 12px) * 1);
    margin-bottom: calc(var(--spacing-unit-val, 12px) * 1.5);
    border-radius: calc(var(--border-radius-val, 18px) * 0.7) !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.gap-login-message-area {
    margin-top: calc(var(--spacing-unit-val, 12px) * 1.2);
    margin-bottom: calc(var(--spacing-unit-val, 12px) * 1.2);
    padding: calc(var(--spacing-unit-val, 12px) * 1);
    border-radius: calc(var(--border-radius-val, 18px) * 0.6);
    font-size: 0.98em;
    min-height: 1.8em;
    text-align: center;
    font-weight: 600;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.gap-login-message-area.info {
    background: rgba(var(--primary-color-rgb, 0,123,255), 0.15) !important;
    color: var(--primary-color);
    border-color: rgba(var(--primary-color-rgb, 0,123,255), 0.4) !important;
    box-shadow: 0 4px 15px rgba(var(--primary-color-rgb), 0.2) !important;
}

.gap-login-message-area.success {
    background: rgba(var(--success-color-rgb, 40,167,69), 0.15) !important;
    color: var(--success-color);
    border-color: rgba(var(--success-color-rgb, 40,167,69), 0.4) !important;
    box-shadow: 0 4px 15px rgba(var(--success-color-rgb), 0.2) !important;
}

.gap-login-message-area.error {
    background: rgba(var(--error-rgb, 220,53,69), 0.15) !important;
    color: var(--error-color);
    border-color: rgba(var(--error-rgb, 220,53,69), 0.4) !important;
    box-shadow: 0 4px 15px rgba(var(--error-rgb), 0.2) !important;
}

.gap-login-api-key-note {
    font-size: 0.85em;
    opacity: 0.75;
    margin-top: calc(var(--spacing-unit-val, 12px) * 2);
    line-height: 1.5;
    font-weight: 400;
    color: color-mix(in srgb, rgb(var(--panel-text-rgb)) 70%, transparent) !important;
}

/* Welcome Modal Icon */
#welcome-icon {
    display: block;
    margin: 0 auto calc(var(--spacing-unit-val, 12px) * 1.5) auto;
    width: 90px;
    height: 90px;
    border-radius: 25px;
    box-shadow:
        0 8px 30px rgba(var(--primary-color-rgb), 0.4),
        0 2px 8px rgba(0,0,0,0.2) !important;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    filter: brightness(110%) saturate(110%) !important;
}

#welcome-icon:hover {
    transform: scale(1.05) rotate(5deg) !important;
    box-shadow:
        0 12px 40px rgba(var(--primary-color-rgb), 0.5),
        0 4px 12px rgba(0,0,0,0.3) !important;
}

/* [FIX] Enhanced Editor Styles */
#gap-panel .gap-editor-container {
    position: relative;
    border: 1.5px solid rgba(var(--input-border-rgb, var(--panel-text-rgb)), 0.15) !important;
    border-radius: calc(var(--border-radius-val)*0.6) !important;
    overflow: hidden;
    background: rgba(var(--input-bg-rgb, var(--panel-bg-rgb)), 0.6) !important;
    backdrop-filter: blur(15px) !important;
    box-shadow:
        inset 0 2px 6px rgba(0,0,0,0.08),
        0 2px 8px rgba(0,0,0,0.06) !important;
}

#gap-panel .gap-editor-toolbar {
    padding: calc(var(--spacing-unit-val)*0.7);
    background: linear-gradient(180deg,
        rgba(var(--input-bg-rgb, var(--panel-bg-rgb)), 0.9) 0%,
        rgba(var(--input-bg-rgb, var(--panel-bg-rgb)), 0.7) 100%) !important;
    backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid rgba(var(--input-border-rgb, var(--panel-text-rgb)), 0.12) !important;
    display: flex;
    flex-direction: column; /* Stack main tools and selects */
    gap: calc(var(--spacing-unit-val)*0.6);
}

/* [NEW] Container for tool groups */
#gap-panel .gap-editor-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing-unit-val)*0.4);
}

#gap-panel .gap-editor-toolbar button,
#gap-panel .gap-editor-toolbar .gap-editor-color-wrapper {
    padding: calc(var(--spacing-unit-val)*0.4) calc(var(--spacing-unit-val)*0.7);
    font-size: 0.88em;
    background: rgba(var(--panel-text-rgb), 0.08) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(var(--panel-text-rgb), 0.15) !important;
    border-radius: calc(var(--border-radius-val)*0.35) !important;
    color: inherit;
    cursor: pointer;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-weight: 500;
}

/* [NEW] Style for selects in the toolbar */
#gap-panel .gap-editor-toolbar select {
    flex: 1; /* Make selects take up available space */
    min-width: 100px;
    padding: calc(var(--spacing-unit-val)*0.4) calc(var(--spacing-unit-val)*0.7);
    font-size: 0.82em;
    background: rgba(var(--panel-text-rgb), 0.08) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(var(--panel-text-rgb), 0.15) !important;
    border-radius: calc(var(--border-radius-val)*0.3) !important;
    color: inherit;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* [FIX] Dropdown option colors */
#gap-panel .gap-editor-toolbar select option {
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
}


#gap-panel .gap-editor-toolbar button:hover,
#gap-panel .gap-editor-toolbar select:hover,
#gap-panel .gap-editor-toolbar .gap-editor-color-wrapper:hover {
    background: rgba(var(--primary-color-rgb), 0.15) !important;
    border-color: rgba(var(--primary-color-rgb), 0.4) !important;
    transform: translateY(-1px) scale(1.02) !important;
    box-shadow: 0 4px 12px rgba(var(--primary-color-rgb), 0.2) !important;
}

#gap-panel .gap-editor-toolbar .toolbar-divider {
    width: 1px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(var(--input-border-rgb, var(--panel-text-rgb)), 0.3) 50%,
        transparent 100%) !important;
    margin: calc(var(--spacing-unit-val)*0.3) calc(var(--spacing-unit-val)*0.5);
}

#gap-panel .gap-editor-toolbar .gap-editor-color-wrapper {
    padding: 0;
    display: inline-flex;
    align-items: center;
}

#gap-panel .gap-editor-toolbar .gap-editor-color-label {
    display: inline-flex;
    align-items: center;
    padding: calc(var(--spacing-unit-val)*0.4) calc(var(--spacing-unit-val)*0.7);
}

#gap-panel .gap-editor-toolbar .color-preview-box {
    width: 1.2em;
    height: 1.2em;
    border: 1.5px solid rgba(var(--panel-text-rgb), 0.3) !important;
    margin-left: 6px;
    border-radius: 4px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

#gap-panel .gap-editor-toolbar .color-preview-box:hover {
    transform: scale(1.1) !important;
}


#gap-panel .gap-editor {
    min-height: 140px;
    max-height: 280px;
    overflow-y: auto;
    padding: calc(var(--spacing-unit-val)*1.2);
    background: rgba(var(--input-bg-rgb, var(--panel-bg-rgb)), 0.4) !important;
    color: var(--input-text);
    line-height: 1.6;
    font-weight: 500;
    font-size: 0.95em;
}

#gap-panel .gap-editor:focus {
    outline: none;
    background: rgba(var(--input-bg-rgb, var(--panel-bg-rgb)), 0.6) !important;
}

#gap-panel .gap-editor ::selection {
    background: rgba(var(--primary-color-rgb), 0.3) !important;
    color: var(--button-text);
}

/* General Helper classes - Enhanced */
.hidden { display: none !important; }

.description-text {
    font-size: 0.87em;
    opacity: 0.85;
    display: block;
    margin-top: calc(var(--spacing-unit-val) * 0.4);
    line-height: 1.5;
    font-weight: 500;
}

.gap-infobox {
    padding: calc(var(--spacing-unit-val) * 1.2);
    border-radius: calc(var(--border-radius-val) * 0.5);
    margin: calc(var(--spacing-unit-val) * 1.2) 0;
    font-size: 0.9em;
    backdrop-filter: blur(10px) !important;
    border: 1.5px solid transparent !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
    overflow: hidden;
}

.gap-infobox::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    border-radius: 0 2px 2px 0;
    transition: width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.gap-infobox:hover {
    transform: translateX(4px) scale(1.01) !important;
}

.gap-infobox:hover::before {
    width: 6px;
}

.gap-infobox.warning {
    background: rgba(var(--warning-color-rgb), 0.12) !important;
    border-color: rgba(var(--warning-color-rgb), 0.4) !important;
    color: var(--warning-color);
    box-shadow: 0 4px 15px rgba(var(--warning-color-rgb), 0.15) !important;
}

.gap-infobox.warning::before {
    background: linear-gradient(180deg, var(--warning-color), color-mix(in srgb, var(--warning-color) 70%, orange 30%)) !important;
    box-shadow: 0 0 10px rgba(var(--warning-color-rgb), 0.5) !important;
}

.gap-infobox.warning strong .gap-icon {
    color: var(--warning-color) !important;
    filter: drop-shadow(0 1px 2px rgba(var(--warning-color-rgb), 0.3)) !important;
}

/* [FIX] Additional Modal Customizations */
.modal-body .settings-grid.modal-settings-grid {
    grid-template-columns: minmax(160px, auto) 1fr !important; /* Simplified grid */
    align-items: center;
    gap: calc(var(--spacing-unit-val) * 1.2) calc(var(--spacing-unit-val) * 1.6) !important;
}

.modal-body .settings-grid.modal-settings-grid > label {
    text-align: left;
    white-space: nowrap;
    font-weight: 600;
}

/* [FIX] Ensure select dropdowns and other inputs are visible */
.modal-body .settings-grid.modal-settings-grid select,
.modal-body .settings-grid.modal-settings-grid input,
.modal-body .settings-grid.modal-settings-grid .local-wallpaper-controls {
    grid-column: 2 / -1; /* Span to the end */
    background-color: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    color: var(--input-text) !important;
    padding: 8px 12px;
    border-radius: 6px;
}

/* [FIX] Style dropdown options */
.modal-body .settings-grid.modal-settings-grid select option {
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
}

.modal-body .settings-grid.modal-settings-grid > input[type="checkbox"] {
    justify-self: start;
    margin-left: 0;
    transform: scale(1.1);
}

.modal-body .settings-grid.modal-settings-grid > span#gap-setting-panel-alpha-value {
    justify-self: start;
    white-space: nowrap;
    font-weight: 600;
}

.modal-body .settings-grid.modal-settings-grid .local-wallpaper-controls {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit-val) * 0.7);
    grid-column: 1 / -1; /* Make wallpaper control take full width */
    margin-top: 8px;
}

.modal-body .settings-grid.modal-settings-grid .local-wallpaper-controls input[type="file"] {
    flex-grow: 1;
}

.modal-body .settings-grid.modal-settings-grid .filename-display {
    font-size: 0.87em;
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
    display: inline-block;
    vertical-align: middle;
    font-weight: 500;
    color: color-mix(in srgb, rgb(var(--panel-text-rgb)) 80%, transparent) !important;
}

.modal-body .settings-grid.modal-settings-grid #gap-remove-local-wallpaper-btn {
    padding: calc(var(--spacing-unit-val)*0.7) calc(var(--spacing-unit-val)*1.1) !important;
    margin-left: calc(var(--spacing-unit-val) * 1.2);
    align-self: center;
}

/* Bulk Recipient Error Display Styles - Enhanced */
.gap-modal-content .modal-body .gap-bulk-errors-display {
    margin-top: calc(var(--spacing-unit-val) * 1.3);
    padding: calc(var(--spacing-unit-val) * 1.1);
    border: 1.5px solid rgba(var(--error-rgb), 0.4);
    background: rgba(var(--error-rgb), 0.12);
    border-radius: calc(var(--border-radius-val) * 0.5);
    max-height: 150px;
    overflow-y: auto;
}

.gap-modal-content .modal-body .gap-bulk-errors-display .error-summary {
    font-weight: 700;
    color: var(--error-color);
    margin-bottom: calc(var(--spacing-unit-val) * 0.6);
}

.gap-modal-content .modal-body .gap-bulk-errors-display #gap-bulk-error-list {
    list-style-type: disc;
    padding-left: calc(var(--spacing-unit-val) * 1.8);
    font-size: 0.9em;
}

/* Panel Header - Enhanced */
#gap-panel #gap-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: calc(var(--spacing-unit-val) * 1) calc(var(--spacing-unit-val) * 1.2) !important;
    background: linear-gradient(145deg,
        var(--gg-gradient-start),
        color-mix(in srgb, var(--gg-gradient-start) 70%, var(--gg-gradient-end) 30%),
        var(--gg-gradient-end)) !important;
    background-size: 200% 200% !important;
    animation: gradientShift 8s ease-in-out infinite !important;

    color: #ffffff !important;
    border-bottom: 1px solid rgba(255,255,255,0.15) !important;
    box-shadow:
        0 4px 20px rgba(var(--primary-color-rgb),0.3),
        0 1px 0 rgba(255,255,255,0.2) inset !important;
    flex-shrink: 0 !important;
    user-select: none !important;
    position: relative;
    z-index: 10;
    gap: calc(var(--spacing-unit-val) * 0.5);
    overflow: hidden !important;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

#gap-panel #gap-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(145deg,
        rgba(255,255,255,0.1) 0%,
        rgba(255,255,255,0.05) 50%,
        rgba(255,255,255,0.1) 100%);
    opacity: 0;
    transition: opacity 0.3s ease !important;
    pointer-events: none;
}

#gap-panel #gap-header:hover::before {
    opacity: 1;
}

#gap-header-main-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-grow: 1;
}

#gap-panel #gap-header-title {
    font-size: calc(var(--header-font-size-val) * 1.12) !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    color: inherit !important;
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit-val)*0.8);
    text-shadow: 0 2px 4px rgba(0,0,0,0.25) !important;
    font-feature-settings: "kern" 1 !important;
}

#gap-panel #gap-header-title .gg-logo-icon {
    height: 1.6em;
    width: 1.6em;
    vertical-align: middle;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.4)) !important;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

#gap-panel #gap-header-title .gg-logo-icon:hover {
    transform: scale(1.1) rotate(5deg) !important;
}

#gap-header-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

#gap-panel #gap-username-display {
    font-size: 0.75em;
    font-weight: 600;
    opacity: 0.95;
    background: rgba(0,0,0,0.2) !important;
    padding: 3px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.15) !important;
    white-space: nowrap;
    color: #fff;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#gap-panel #gap-expiry-display {
    font-size: 0.75em;
    font-weight: 600;
    opacity: 0.95;
    background: rgba(0,0,0,0.2) !important;
    padding: 3px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.15) !important;
    white-space: nowrap;
    color: #fff;
}

#gap-panel #gap-header-controls {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit-val) * 0.3);
    flex-shrink: 0;
}

#gap-panel #gap-header-controls .gap-icon-btn {
    color: rgba(255,255,255,0.9) !important;
    background: rgba(255,255,255,0.1) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    font-size: 1.3em;
    padding: calc(var(--spacing-unit-val)*0.5);
    border-radius: 50%;
    line-height: 1;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    position: relative;
    overflow: hidden;
}

#gap-panel #gap-header-controls .gap-icon-btn::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 0; height: 0;
    background: rgba(255,255,255,0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease !important;
}

#gap-panel #gap-header-controls .gap-icon-btn:hover {
    background: rgba(255,255,255,0.25) !important;
    color: #ffffff !important;
    transform: scale(1.15) translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.3) !important;
}

#gap-panel #gap-header-controls .gap-icon-btn:hover::before {
    width: 100%; height: 100%;
}

#gap-panel #gap-header-controls .gap-icon-btn:active {
    transform: scale(1.05) translateY(0) !important;
}

/* [NEW] Modern Progress Bar */
#gap-progress-bar {
    padding: calc(var(--spacing-unit-val) * 1) calc(var(--spacing-unit-val) * 1.8) !important;
    background: rgba(var(--panel-bg-rgb), 0.7);
    backdrop-filter: blur(10px) !important;
    flex-shrink: 0;
}

.gap-progress-bar-container {
    width: 100%;
    height: 10px;
    background-color: rgba(var(--panel-text-rgb), 0.1);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: calc(var(--spacing-unit-val) * 0.6);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

.gap-progress-bar-fill {
    width: 0%;
    height: 100%;
    border-radius: 10px;
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    transition: width 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
}

#gap-progress-details {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 0.82em !important;
    color: rgb(var(--panel-text-rgb)) !important;
    font-weight: 600 !important;
    opacity: 0.95 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}

#gap-progress-counts .gap-icon {
    font-size: 1em !important;
    margin-right: 2px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2)) !important;
}

/* Tabs - Enhanced with Modern Animations */
#gap-tabs {
    display: flex !important;
    background: linear-gradient(180deg,
        rgba(var(--panel-bg-rgb), 0.3) 0%,
        rgba(var(--panel-bg-rgb), 0.15) 100%) !important;
    backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid rgba(var(--panel-border-rgb, 255,255,255), 0.1) !important;
    flex-shrink: 0 !important;
    padding: 0 calc(var(--spacing-unit-val) * 0.5);
    position: relative;
}

#gap-tabs::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--primary-color-rgb), 0.3) 50%,
        transparent 100%);
}

#gap-tabs button[role="tab"] {
    flex-grow: 1 !important;
    padding: calc(var(--spacing-unit-val)*1) calc(var(--spacing-unit-val)*1.2) !important;
    background: transparent !important;
    border: none !important;
    color: color-mix(in srgb, rgb(var(--panel-text-rgb)) 70%, transparent) !important;
    font-size: 0.9em !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit-val)*0.5);
    position: relative;
    border-radius: calc(var(--border-radius-val) * 0.4) calc(var(--border-radius-val) * 0.4) 0 0;
    margin-top: calc(var(--spacing-unit-val) * 0.2);
    overflow: hidden;
}

#gap-tabs button[role="tab"]::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg,
        rgba(var(--primary-color-rgb), 0.05) 0%,
        transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease !important;
}

/* Range Input Styling - Enhanced */
#gap-panel input[type="range"], .gap-modal-content input[type="range"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    height: 8px !important;
    border-radius: calc(var(--border-radius-val) * 0.4) !important;
    background: linear-gradient(90deg,
        rgba(var(--panel-text-rgb), 0.1) 0%,
        rgba(var(--panel-text-rgb), 0.15) 100%) !important;
    outline: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer;
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.1),
        0 1px 0 rgba(255,255,255,0.1) !important;
}

#gap-panel input[type="range"]:hover, .gap-modal-content input[type="range"]:hover {
    background: linear-gradient(90deg,
        rgba(var(--primary-color-rgb), 0.15) 0%,
        rgba(var(--primary-color-rgb), 0.25) 100%) !important;
}

#gap-panel input[type="range"]::-webkit-slider-thumb, .gap-modal-content input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    height: 20px !important;
    width: 20px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg,
        var(--primary-color) 0%,
        var(--secondary-color) 100%) !important;
    cursor: pointer !important;
    box-shadow:
        0 4px 12px rgba(var(--primary-color-rgb), 0.4),
        0 0 0 4px rgba(255,255,255,0.2),
        inset 0 1px 0 rgba(255,255,255,0.3) !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

#gap-panel input[type="range"]::-webkit-slider-thumb:hover, .gap-modal-content input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2) !important;
    box-shadow:
        0 6px 20px rgba(var(--primary-color-rgb), 0.6),
        0 0 0 6px rgba(255,255,255,0.3),
        inset 0 1px 0 rgba(255,255,255,0.4) !important;
}

#gap-panel input[type="range"]::-moz-range-thumb, .gap-modal-content input[type="range"]::-moz-range-thumb {
    height: 20px !important;
    width: 20px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg,
        var(--primary-color) 0%,
        var(--secondary-color) 100%) !important;
    cursor: pointer !important;
    border: none !important;
    box-shadow:
        0 4px 12px rgba(var(--primary-color-rgb), 0.4),
        0 0 0 4px rgba(255,255,255,0.2) !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Checkbox Styling - Enhanced */
#gap-panel input[type="checkbox"], .gap-modal-content input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    border: 2px solid rgba(var(--input-border-rgb, var(--panel-text-rgb)), 0.3) !important;
    border-radius: calc(var(--border-radius-val) * 0.3) !important;
    background: rgba(var(--input-bg-rgb, var(--panel-bg-rgb)), 0.6) !important;
    backdrop-filter: blur(10px) !important;
    position: relative !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.08),
        0 1px 0 rgba(255,255,255,0.1) !important;
}

#gap-panel input[type="checkbox"]:hover, .gap-modal-content input[type="checkbox"]:hover {
    border-color: var(--primary-color) !important;
    background: rgba(var(--primary-color-rgb), 0.1) !important;
    transform: scale(1.05) !important;
}

#gap-panel input[type="checkbox"]:checked, .gap-modal-content input[type="checkbox"]:checked {
    background: linear-gradient(135deg,
        var(--primary-color) 0%,
        var(--secondary-color) 100%) !important;
    border-color: var(--primary-color) !important;
    box-shadow:
        0 4px 12px rgba(var(--primary-color-rgb), 0.3),
        inset 0 1px 0 rgba(255,255,255,0.3) !important;
}

#gap-panel input[type="checkbox"]:checked::before, .gap-modal-content input[type="checkbox"]:checked::before {
    content: '✓' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: rgb(var(--button-text-rgb, 255,255,255)) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}

/* File Input Styling - Enhanced */
#gap-panel input[type="file"], .gap-modal-content input[type="file"] {
    font-size: 0.9em !important;
    font-weight: 500 !important;
    cursor: pointer !important;
}

#gap-panel input[type="file"]::file-selector-button, .gap-modal-content input[type="file"]::file-selector-button {
    padding: calc(var(--spacing-unit-val) * 0.6) calc(var(--spacing-unit-val) * 1.2) !important;
    margin-right: calc(var(--spacing-unit-val) * 0.8) !important;
    border: 1px solid rgba(var(--primary-color-rgb), 0.3) !important;
    border-radius: calc(var(--border-radius-val) * 0.4) !important;
    background: rgba(var(--primary-color-rgb), 0.1) !important;
    color: var(--primary-color) !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#gap-panel input[type="file"]::file-selector-button:hover, .gap-modal-content input[type="file"]::file-selector-button:hover {
    background: rgba(var(--primary-color-rgb), 0.2) !important;
    border-color: var(--primary-color) !important;
    transform: translateY(-1px) scale(1.02) !important;
}

/* Tooltip Styling - Enhanced */
.gap-tooltip {
    position: relative !important;
    display: inline-block !important;
}

.gap-tooltip .gap-tooltip-text {
    visibility: hidden !important;
    width: 200px !important;
    background: rgba(var(--panel-bg-rgb), 0.95) !important;
    backdrop-filter: blur(20px) saturate(150%) !important;
    color: rgb(var(--panel-text-rgb)) !important;
    text-align: center !important;
    border-radius: calc(var(--border-radius-val) * 0.5) !important;
    padding: calc(var(--spacing-unit-val) * 0.8) calc(var(--spacing-unit-val) * 1) !important;
    position: absolute !important;
    z-index: 2147483647 !important;
    bottom: 125% !important;
    left: 50% !important;
    margin-left: -100px !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    font-size: 0.85em !important;
    font-weight: 500 !important;
    border: 1px solid rgba(var(--panel-text-rgb), 0.15) !important;
    box-shadow:
        0 8px 32px rgba(0,0,0,0.2),
        0 0 0 1px rgba(255,255,255,0.1) !important;
    transform: translateY(10px) scale(0.9) !important;
}

.gap-tooltip .gap-tooltip-text::after {
    content: "" !important;
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    margin-left: -5px !important;
    border-width: 5px !important;
    border-style: solid !important;
    border-color: rgba(var(--panel-bg-rgb), 0.95) transparent transparent transparent !important;
}

.gap-tooltip:hover .gap-tooltip-text {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
}

/* Loading Spinner - Enhanced */
.gap-loading-spinner {
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    border: 3px solid rgba(var(--primary-color-rgb), 0.3) !important;
    border-radius: 50% !important;
    border-top-color: var(--primary-color) !important;
    animation: gapSpinAnimation 1s ease-in-out infinite !important;
}

.gap-loading-spinner.large {
    width: 40px !important;
    height: 40px !important;
    border-width: 4px !important;
}

@keyframes gapSpinAnimation {
    to {
        transform: rotate(360deg) !important;
    }
}

/* Notification Styles - Enhanced */
.gap-notification {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    background: rgba(var(--panel-bg-rgb), 0.95) !important;
    backdrop-filter: blur(20px) saturate(150%) !important;
    color: rgb(var(--panel-text-rgb)) !important;
    padding: calc(var(--spacing-unit-val) * 1.2) calc(var(--spacing-unit-val) * 1.6) !important;
    border-radius: calc(var(--border-radius-val) * 0.8) !important;
    box-shadow:
        0 20px 60px rgba(0,0,0,0.15),
        0 8px 25px rgba(0,0,0,0.1),
        0 0 0 1px rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(var(--panel-text-rgb), 0.15) !important;
    z-index: 2147483647 !important;
    min-width: 300px !important;
    max-width: 400px !important;
    font-size: 0.9em !important;
    font-weight: 500 !important;
    transform: translateX(120%) !important;
    opacity: 0 !important;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.gap-notification.show {
    transform: translateX(0) !important;
    opacity: 1 !important;
}

.gap-notification.success {
    border-left: 4px solid var(--success-color) !important;
}

.gap-notification.error {
    border-left: 4px solid var(--error-color) !important;
}

.gap-notification.warning {
    border-left: 4px solid var(--warning-color) !important;
}

.gap-notification.info {
    border-left: 4px solid var(--primary-color) !important;
}

/* Panel positioning for different sides */
body.gap-panel-side-left #gap-panel {
    left: var(--spacing-unit-val) !important;
    right: auto !important;
    transform: translateY(-50%) translateX(-120%) !important;
}

body.gap-panel-side-left #gap-panel.gap-panel-visible {
    transform: translateY(-50%) translateX(0) !important;
}


/* Responsive Design - Mobile Optimization */
@media screen and (max-width: 768px) {
    #gap-panel {
        width: calc(100vw - calc(var(--spacing-unit-val) * 2)) !important;
        max-width: 400px !important;
        right: calc(var(--spacing-unit-val) * 0.5) !important;
    }

    .gap-modal-content {
        width: calc(100vw - 40px) !important;
        max-width: none !important;
        margin: 20px !important;
    }

    .gap-modal-content.narrow,
    .gap-modal-content.wide {
        width: calc(100vw - 40px) !important;
    }

    #gap-panel .button-grid {
        grid-template-columns: 1fr !important;
    }

    #gap-panel #gap-header-title {
        font-size: calc(var(--header-font-size-val) * 1) !important;
    }

    #gap-panel #gap-username-display {
        max-width: 80px !important;
    }
}

/* Print Styles */
@media print {
    #gap-panel,
    .gap-modal,
    .gap-login-modal-overlay,
    .gap-notification {
        display: none !important;
    }
}

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

    #gap-panel-background-effects,
    #gap-panel-background-effects::before,
    #gap-panel-background-effects::after {
        animation: none !important;
    }
}

/* Focus styles for keyboard navigation */
#gap-panel *:focus,
.gap-modal-content *:focus {
    outline: 2px solid var(--primary-color) !important;
    outline-offset: 2px !important;
}

#gap-panel button:focus-visible,
.gap-modal-content button:focus-visible {
    outline: 2px solid var(--primary-color) !important;
    outline-offset: 2px !important;
    box-shadow:
        0 0 0 4px rgba(var(--primary-color-rgb), 0.2),
        0 4px 12px rgba(0,0,0,0.1) !important;
}

/* Performance optimizations */
#gap-panel,
.gap-modal,
.gap-login-modal-overlay {
    contain: layout style paint !important;
}

#gap-panel-background-effects {
    will-change: background-position !important;
    transform: translateZ(0) !important;
}

/* End of enhanced panel.css */