@import url('./design-tokens.css');
/* ===== PANELS ===== */
/* Panel components: Scenery Settings, History, AI Suggestions */

@import url('./design-tokens.css');

/* ==================== Scenery Settings Panel ==================== */
.scenery-settings-panel {
    position: fixed;
    /* Position will be set by JavaScript on first show */
    display: flex;
    flex-direction: column;
    transform: scale(0.95);
    width: 950px !important;
    max-width: 95vw !important;
    height: auto !important;
    max-height: 92vh !important;
    background: var(--glass-bg-darker) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-xl);
    backdrop-filter: blur(var(--glass-blur-lg));
    -webkit-backdrop-filter: blur(var(--glass-blur-lg));
    z-index: var(--z-dropdown);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-normal) ease, transform var(--transition-normal) ease;
}

.scenery-settings-panel[style*="display: block"],
.scenery-settings-panel[style*="display: flex"] {
    opacity: 1;
    transform: scale(1);
    pointer-events: all;
}

.scenery-settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-5) !important;
    background: var(--glass-bg-dark) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    font-size: var(--text-lg) !important;
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    cursor: move;
    user-select: none;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    flex-shrink: 0;
}

.scenery-settings-header .header-title {
    flex: 1;
    color: var(--text-primary);
    font-size: var(--text-base);
    letter-spacing: 0.5px;
    text-align: left;
    margin-right: auto;
    padding-left: 4px;
}

.scenery-settings-header .controls {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.scenery-settings-header .close-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast) ease;
}

.scenery-settings-header .close-btn:hover {
    background: var(--glass-bg-light);
    color: var(--text-primary);
}

.scenery-settings-content {
    padding: 15px 25px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--space-3);
    max-height: calc(92vh - 80px);
    overflow-y: auto;
    overflow-x: hidden;
}

/* Theme overrides for Scenery Settings Panel (centralized here) */
body[data-theme="dark"] .scenery-settings-panel {
    background: linear-gradient(180deg, rgba(15,16,28,0.72), rgba(15,16,28,0.45)) !important;
    border-color: rgba(255,255,255,0.12) !important;
}

body[data-theme="dark"] .scenery-settings-header {
    background: linear-gradient(180deg, rgba(100, 116, 255, 0.18), rgba(99, 102, 241, 0.08)) !important;
    border-bottom-color: rgba(255,255,255,0.12) !important;
}

body[data-theme="neon"] .scenery-settings-panel,
body[data-theme="solar"] .scenery-settings-panel {
    background: linear-gradient(180deg, rgba(20,10,30,0.75), rgba(20,10,30,0.5)) !important;
    border-color: rgba(255,255,255,0.14) !important;
}

body[data-theme="neon"] .scenery-settings-header,
body[data-theme="solar"] .scenery-settings-header {
    background: linear-gradient(180deg, color-mix(in oklab, var(--acc) 22%, transparent), rgba(0,0,0,0.06)) !important;
    border-bottom-color: rgba(255,255,255,0.14) !important;
}

/* Visual Mode Toggle Buttons */
.visual-mode-toggle {
    margin-bottom: 15px;
    padding: 10px;
    background: var(--glass-bg-light);
    border-radius: var(--radius-md);
}

.visual-mode-toggle label {
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
}

.visual-mode-toggle .toggle-group {
    display: flex;
    gap: 10px;
}

.visual-mode-btn {
    flex: 1;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255,255,255,0.2);
    background: var(--glass-bg-light);
    color: #aaa;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
}

.visual-mode-btn:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
}

.visual-mode-btn.active {
    background: linear-gradient(135deg, rgba(100,180,255,0.25), rgba(80,140,220,0.15));
    border-color: rgba(100,180,255,0.5);
    color: #fff;
    box-shadow: 0 0 12px rgba(100,180,255,0.2);
}

.visual-mode-btn.active[data-mode="enhanced"] {
    background: linear-gradient(135deg, rgba(255,180,100,0.25), rgba(220,140,80,0.15));
    border-color: rgba(255,180,100,0.5);
    box-shadow: 0 0 12px rgba(255,180,100,0.2);
}

/* Audio Settings Panel - Kompaktere Version */
#audio-settings-panel {
    width: 24vw;
    max-width: 380px;
}

.setting-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.setting-row label {
    font-size: 10px;
    font-weight: 500;
    color: rgba(232, 236, 241, 0.85);
    letter-spacing: 0.3px;
}

.setting-row select {
    background-color: rgba(70, 85, 120, 0.95); /* Significantly brighter for better visibility */
    background-image:
        linear-gradient(135deg, rgba(70, 85, 120, 0.9) 0%, rgba(85, 100, 140, 0.95) 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%2379d3ff' stroke='%2379d3ff' stroke-width='1.5' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-position: 0 0, right 10px center;
    background-size: 100% 100%, 14px 14px;
    border: 1.5px solid rgba(121, 211, 255, 0.55); /* More prominent border */
    border-radius: var(--radius-md);
    padding: 10px 36px 10px 14px; /* Increased padding */
    color: #ffffff;
    font-size: 14px; /* Slightly larger text */
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.25s ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    min-width: 0;
    width: 100%;

    /* Shadow for depth */
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.setting-row select:hover {
    background-color: rgba(85, 100, 140, 0.98);
    background-image:
        linear-gradient(135deg, rgba(85, 100, 140, 0.95) 0%, rgba(95, 110, 155, 1) 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%2379d3ff' stroke='%2379d3ff' stroke-width='1.5' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-position: 0 0, right 10px center;
    background-size: 100% 100%, 14px 14px;
    border-color: rgba(121, 211, 255, 0.75);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(121, 211, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.setting-row select:focus {
    outline: none;
    border-color: rgba(121, 211, 255, 0.95);
    background-color: rgba(85, 100, 140, 1);
    background-image:
        linear-gradient(135deg, rgba(85, 100, 140, 1) 0%, rgba(95, 110, 155, 1) 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%2379d3ff' stroke='%2379d3ff' stroke-width='1.5' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-position: 0 0, right 10px center;
    background-size: 100% 100%, 14px 14px;
    box-shadow:
        0 0 0 3px rgba(121, 211, 255, 0.3),
        0 4px 16px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Dropdown-Optionen Styling */
.setting-row select option {
    background: rgba(15, 19, 32, 0.98);
    color: #e8ecf1;
    padding: 10px;
    max-width: 100%; /* Prevent options from being wider than dropdown */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Design Preset dropdown: visually separate non-selectable group headers */
.setting-row select option.preset-header {
    background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
    color: rgba(200,200,200,0.95);
    font-weight: 700;
    padding: 8px 10px;
    border-top: 1px solid rgba(255,255,255,0.03);
}

.setting-row select option.preset-item {
    background: rgba(15, 19, 32, 0.98);
    color: #e8ecf1;
    padding: 8px 10px;
}

/* Make sure disabled header is visually clear and not selectable on supporting browsers */
.setting-row select option.preset-header[disabled] {
    cursor: default;
    opacity: 0.95;
}

/* ==================== Scenery Settings Panel (migrated from legacy styles.css) ==================== */
/* Superseded by definition at top of file - Consolidated Header */

.scenery-settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px !important;
    background: linear-gradient(180deg, rgba(15, 19, 32, 0.85), rgba(15, 19, 32, 0.8)) !important;
    border-bottom: 1px solid rgba(255,255,255,0.12) !important;
    font-size: 1.1rem !important;
    font-weight: 600;
    color: #e8ecf1;
    cursor: move;
    user-select: none;
    border-radius: 14px 14px 0 0;
    flex-shrink: 0;
}

.scenery-settings-header .header-title {
    flex: 1;
    color: #fff;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    text-align: left;
    margin-right: auto;
    padding-left: 4px;
}

.scenery-settings-header .controls {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.scenery-settings-header .close-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-xs);
    transition: all 0.2s ease;
}

.scenery-settings-header .close-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

/* Superseded by definition at top of file */
.scenery-settings-content-legacy {
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: calc(82vh - 60px);
    overflow-y: auto;
    overflow-x: hidden;
}

/* Audio Settings Panel - compact variant */
#audio-settings-panel {
    width: 24vw;
    max-width: 380px;
}

.setting-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.setting-row label {
    font-size: 10px;
    font-weight: 500;
    color: rgba(232, 236, 241, 0.85);
    letter-spacing: 0.3px;
}

.setting-row select {
    background-color: rgba(15, 19, 32, 0.6);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2379d3ff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px 12px;
    border: 1px solid rgba(121, 211, 255, 0.2);
    border-radius: var(--radius-sm);
    padding: 6px 28px 6px 8px;
    color: #e8ecf1;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.setting-row select:hover {
    background-color: rgba(15, 19, 32, 0.95);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2379d3ff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px 12px;
    border-color: rgba(121, 211, 255, 0.4);
}

.setting-row select:focus {
    outline: none;
    border-color: rgba(121, 211, 255, 0.6);
    box-shadow: 0 0 0 3px rgba(121, 211, 255, 0.1);
    background-color: rgba(15, 19, 32, 0.95);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2379d3ff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px 12px;
}

/* Dropdown options styling */
.setting-row select option {
    background: rgba(15, 19, 32, 0.98);
    color: #e8ecf1;
    padding: 8px 10px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* optgroup label styling */
.setting-row select optgroup {
    color: #e8ecf1;
    background: rgba(15, 19, 32, 0.98);
    font-weight: 600;
    max-width: 100%;
}

/* Some browsers render optgroup labels as disabled options */
.setting-row select option[disabled] {
    color: #e8ecf1;
    background: rgba(15, 19, 32, 0.98);
    font-weight: 700;
    max-width: 100%;
}

.setting-row select option[data-level] {
    padding-left: 14px;
}

/* Ensure optgroup labels and disabled options remain high-contrast in the live CSS bundle */
.setting-row select optgroup {
    color: #e8ecf1;
    background: rgba(15, 19, 32, 0.98);
    font-weight: 600;
}

.setting-row select option[disabled] {
    color: #e8ecf1;
    background: rgba(15, 19, 32, 0.98);
    font-weight: 700;
}

.setting-row select option[data-level] {
    padding-left: 14px;
}

.setting-row.checkbox-row {
    flex-direction: row;
    align-items: center;
}

.setting-row.checkbox-row label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.setting-row.checkbox-row input[type="checkbox"] {
    appearance: none;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(121, 211, 255, 0.3);
    border-radius: 3px;
    background: var(--glass-bg-light);
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.setting-row.checkbox-row input[type="checkbox"]:hover {
    border-color: rgba(121, 211, 255, 0.5);
    background: var(--glass-bg-light);
}

.setting-row.checkbox-row input[type="checkbox"]:checked {
    background: linear-gradient(135deg, #50c878, #3ea65e);
    border-color: #50c878;
    box-shadow: 0 0 8px rgba(80, 200, 120, 0.4);
}

.setting-row.checkbox-row input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #0f1320;
    font-size: 10px;
    font-weight: bold;
}

.setting-row.checkbox-row span {
    font-size: 11px;
    color: rgba(232, 236, 241, 0.9);
}

/* Collapsible Sections */
.settings-section {
    border: 1px solid rgba(121, 211, 255, 0.15);
    border-radius: var(--radius-md);
    background: rgba(15, 19, 32, 0.3);
    overflow: hidden;
    transition: all 0.3s ease;
    margin-bottom: 2px;
}

.settings-section:hover {
    border-color: rgba(121, 211, 255, 0.3);
    background: rgba(15, 19, 32, 0.4);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.section-header {
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 700;
    color: #79d3ff;
    cursor: pointer;
    user-select: none;
    background: rgba(121, 211, 255, 0.1);
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    transition: all 0.2s ease;
    border-bottom: 1px solid rgba(121, 211, 255, 0.15);
    letter-spacing: 0.3px;
}

.section-header:hover {
    background: rgba(121, 211, 255, 0.15);
    color: #8ee0ff;
    border-bottom-color: rgba(121, 211, 255, 0.3);
}

/* === What's New: history panel migrated from legacy styles.css === */
.wn-history-panel {
    margin-top:12px;
    position:relative;
    border:1px solid var(--glass-brd);
    background:rgba(0,0,0,0.35);
    border-radius:14px;
    padding:10px 12px 12px;
    backdrop-filter:blur(6px);
    animation: wnPanelIn .35s ease;
}
.wn-history-panel-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 2px 6px;
    border-bottom:1px solid rgba(255,255,255,0.08);
    margin-bottom:8px;
}
.wn-history-panel-head .title { font-size:12px; font-weight:600; letter-spacing:.75px; text-transform:uppercase; opacity:.85; }
.wn-history-panel-head .close { background:none; border:none; color:#fff; cursor:pointer; font-size:14px; padding:4px 6px; border-radius:6px; transition: background .2s; }
.wn-history-panel-head .close:hover { background:rgba(255,255,255,0.12); }

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

/* Attach tags row inside each release card (already migrated elsewhere) */

.section-header::before {
    content: '▶';
    font-size: 9px;
    transition: transform 0.3s ease;
    display: inline-block;
}

.settings-section[open] .section-header::before {
    transform: rotate(90deg);
}

.section-content {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: rgba(0, 0, 0, 0.25);
}

/* Grid layout for Knowledge Graph subsections (2-column) */
.subsections-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    width: 100%;
}

@media (max-width: 1000px) {
    .subsections-grid {
        grid-template-columns: 1fr;
    }
}

/* Grid layout for top sections (Scenery + Visual & Rotation + Camera) */
.top-sections-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

/* Responsive: 1 column on small screens */
@media (max-width: 900px) {
    .top-sections-grid {
        grid-template-columns: 1fr;
    }
}

/* For nested sections (Knowledge Graph subsections), use single column */
.settings-section .settings-section .section-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Slider Rows - Kompakte Version */
.setting-row.slider-row {
    display: grid;
    grid-template-columns: 130px 1fr 50px;
    gap: var(--spacing-sm);
    align-items: center;
    padding: 2px 0;
}

.setting-row.slider-row label {
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.setting-row.slider-row input[type="range"] {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--glass-bg-light); /* Heller für Sichtbarkeit auf dunklem Grund */
    border: 1px solid rgba(121, 211, 255, 0.4); /* Klare Führungslinie (Accent Color) */
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
    margin: 10px 0; /* Mehr Platz für die Kugeln */
}

.setting-row.slider-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #b0fbb0, #50c878 40%, #2e8b57 70%, #1a4d2e);
    cursor: pointer;
    border: 2px solid #ffffff;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.5),
        0 0 10px rgba(80, 200, 120, 0.3),
        inset -2px -2px 4px rgba(0, 0, 0, 0.4),
        inset 2px 2px 4px rgba(255, 255, 255, 0.5);
    position: relative;
    z-index: 2;
    margin-top: -7px; /* Zentrierung auf dem 6px Track (20px / 2 - 6px / 2 = 7px) */
}

.setting-row.slider-row input[type="range"]::-webkit-slider-thumb:hover {
    background: radial-gradient(circle at 35% 35%, #c8ffc8, #6ee085 40%, #3ea65e 70%, #2a6f43);
    transform: scale(1.1);
    box-shadow:
        0 6px 15px rgba(80, 200, 120, 0.6),
        0 0 20px rgba(80, 200, 120, 0.4),
        inset -2px -2px 4px rgba(0, 0, 0, 0.4),
        inset 2px 2px 4px rgba(255, 255, 255, 0.6);
}

.setting-row.slider-row input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #b0fbb0, #50c878 40%, #2e8b57 70%, #1a4d2e);
    cursor: pointer;
    border: 2px solid #ffffff;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.5),
        0 0 10px rgba(80, 200, 120, 0.3),
        inset -2px -2px 4px rgba(0, 0, 0, 0.4),
        inset 2px 2px 4px rgba(255, 255, 255, 0.5);
}

.setting-row.slider-row input[type="range"]::-moz-range-thumb:hover {
    background: radial-gradient(circle at 35% 35%, #c8ffc8, #6ee085 40%, #3ea65e 70%, #2a6f43);
    transform: scale(1.15) translateY(-1px);
    box-shadow:
        0 6px 14px rgba(80, 200, 120, 0.5),
        0 0 15px rgba(80, 200, 120, 0.3),
        inset -2px -2px 4px rgba(0, 0, 0, 0.3),
        inset 2px 2px 4px rgba(255, 255, 255, 0.6);
}

.slider-value {
    min-width: 45px;
    text-align: right;
    font-size: 10px;
    font-weight: 600;
    color: #79d3ff;
    font-variant-numeric: tabular-nums;
    background: rgba(121, 211, 255, 0.08);
    padding: 3px 6px;
    border-radius: var(--radius-xs);
    border: 1px solid rgba(121, 211, 255, 0.15);
}

/* Reset Camera Button */
.reset-camera-button {
    padding: 6px 12px;
    font-size: 11px;
    background: rgba(121, 211, 255, 0.1);
    border: 1px solid rgba(121, 211, 255, 0.3);
    border-radius: var(--radius-sm);
    color: rgba(121, 211, 255, 0.9);
    cursor: pointer;
    transition: all 0.25s ease;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.reset-camera-button:hover {
    background: rgba(121, 211, 255, 0.2);
    border-color: rgba(121, 211, 255, 0.5);
    color: #79d3ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(121, 211, 255, 0.3);
}

.reset-camera-button:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(121, 211, 255, 0.15);
}

/* Scrollbar styling for Settings Panel */


.scenery-settings-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-xs);
}

.scenery-settings-content::-webkit-scrollbar-thumb {
    background: rgba(121, 211, 255, 0.3);
    border-radius: var(--radius-xs);
    transition: background 0.2s ease;
}

.scenery-settings-content::-webkit-scrollbar-thumb:hover {
    background: rgba(121, 211, 255, 0.5);
}

/* === What's New: 3D History Button & Panel === */
.wn-history-bar { margin-top:10px; display:flex; justify-content:flex-end; }
.wn-history-3d {
    position:relative; cursor:pointer; border:none; outline:none; font-size:11px; letter-spacing:.5px;
    padding:10px 18px 12px; color:#fff; text-transform:uppercase; font-weight:600; background:linear-gradient(145deg,#1b2233,#101521);
    border-radius:14px; box-shadow: inset 0 2px 4px rgba(255,255,255,0.06), 0 6px 18px -6px rgba(0,0,0,0.6), 0 2px 0 0 #06080c, 0 0 0 1px rgba(255,255,255,0.08);
    transition: transform .25s cubic-bezier(.25,.8,.3,1), box-shadow .25s; perspective:600px;
}
.wn-history-3d::before { content:""; position:absolute; inset:0; border-radius:14px; background:radial-gradient(circle at 30% 20%,rgba(255,255,255,0.15),transparent 60%); mix-blend-mode:overlay; pointer-events:none; }
.wn-history-3d:hover { transform:translateY(-3px); box-shadow: inset 0 2px 4px rgba(255,255,255,0.08), 0 12px 26px -10px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.14); }
.wn-history-3d:active { transform:translateY(1px); }
.wn-history-3d[aria-expanded="true"] { background:linear-gradient(145deg,#243049,#121b29); box-shadow: inset 0 3px 6px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.2); }

.wn-history-panel { margin-top:12px; position:relative; border:1px solid var(--glass-brd); background:rgba(0,0,0,0.35); border-radius:14px; padding:10px 12px 12px; backdrop-filter:blur(6px); animation: wnPanelIn .35s ease; }
@keyframes wnPanelIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
.wn-history-panel-head { display:flex; align-items:center; justify-content:space-between; padding:0 2px 6px; border-bottom:1px solid rgba(255,255,255,0.08); margin-bottom:8px; }
.wn-history-panel-head .title { font-size:12px; font-weight:600; letter-spacing:.75px; text-transform:uppercase; opacity:.85; }
.wn-history-panel-head .close { background:none; border:none; color:#fff; cursor:pointer; font-size:14px; padding:4px 6px; border-radius:6px; transition: background .2s; }
.wn-history-panel-head .close:hover { background:rgba(255,255,255,0.12); }
.wn-history-scroll { max-height:300px; overflow:auto; padding-right:6px; scrollbar-width:thin; }

.wn-history-scroll::-webkit-scrollbar-track { background:rgba(0,0,0,0.2); border-radius:4px; }
.wn-history-scroll::-webkit-scrollbar-thumb { background:rgba(121,211,255,0.3); border-radius:4px; transition:background .2s ease; }
.wn-history-scroll::-webkit-scrollbar-thumb:hover { background:rgba(121,211,255,0.5); }

/* Release History (What's New) */
.wn-history { margin-top: 12px; }
.wn-history > summary { cursor: pointer; font-weight: 600; list-style: none; }
.wn-history[open] > summary { color: var(--acc); }
.wn-history-inner { margin-top: 8px; max-height: 480px; overflow-y: auto; padding-right:8px; }
.wn-rel { border:1px solid var(--glass-brd); border-radius:6px; padding:8px 10px; margin-bottom:10px; background:rgba(0,0,0,0.25); backdrop-filter:blur(4px); }
.wn-rel.current { border-color: var(--acc); box-shadow:0 0 0 1px color-mix(in oklab, var(--acc) 65%, transparent); }
.wn-rel h4 { margin:0 0 4px; font-size:13px; display:flex; gap:8px; align-items:center; }
.wn-rel h4 .ver { font-weight:700; }
.wn-rel h4 .date { font-weight:400; opacity:.75; }
.wn-rel h4 .days { font-weight:400; font-size:11px; background:rgba(255,255,255,0.1); padding:2px 6px; border-radius:12px; }
.wn-rel ul { margin:0 0 6px 18px; padding:0; }
.wn-rel ul li { margin:2px 0; }
.wn-rel .md { font-size:12px; line-height:1.4; margin-top:4px; }
.wn-rel .md h3 { font-size:12px; margin:6px 0 4px; }
.wn-rel .md code { background:rgba(0,0,0,0.35); padding:1px 4px; border-radius:4px; font-family: var(--font-mono, monospace); font-size:11px; }
.wn-rel .md strong { font-weight:600; }
.wn-rel .badge-new { background:#ff3b30; color:#fff; font-size:10px; padding:2px 6px; border-radius:10px; }

/* Subtle highlight line styling */
.whats-new .wn-list { margin:6px 0 4px; padding-left:14px; }
.whats-new .wn-list li.tag-row { list-style:none; margin:6px 0 2px; padding-left:0; }
.whats-new .wn-list li.wn-hl { list-style:disc; margin:4px 0 8px 18px; font-size:14px; line-height:1.4; font-weight:600; padding-left:0; }
.whats-new .wn-list li.wn-hl .hl-line { display:inline; }
.whats-new .wn-list li .hl-key { color: var(--acc); font-weight:500; letter-spacing:.25px; }
.whats-new .wn-list li .hl-sep { opacity:.5; padding:0 2px; }
.whats-new .wn-list li .hl-text { opacity:.85; }
/* History list highlights */
.wn-rel .tag-row { list-style:none; }
.wn-rel ul li.wn-hl { list-style:disc; margin:4px 0 4px 18px; padding:0; font-size:12.5px; font-weight:600; }
.wn-rel ul li.wn-hl .hl-key { color: var(--acc); font-weight:500; }
.wn-rel ul li.wn-hl .hl-sep { opacity:.45; padding:0 2px; }
.wn-rel ul li.wn-hl .hl-text { opacity:.8; }

/* Category badges for highlights & changes */
.hl-wrap, .chg-wrap { display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; }
.cat-badge { display:inline-block; font-size:9px; line-height:1; padding:3px 6px 4px; border-radius:8px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; background: var(--glass-bg-light); color:rgba(255,255,255,0.7); box-shadow:0 0 0 1px rgba(255,255,255,0.12); }
/* Category color themes */
.cat-nf .cat-badge { background:linear-gradient(90deg,#1e3c72,#2a5298); color:#b9dcff; box-shadow:0 0 0 1px rgba(120,180,255,0.35); }
.cat-fix .cat-badge { background:linear-gradient(90deg,#5a1d1d,#932828); color:#ffc9c9; box-shadow:0 0 0 1px rgba(255,120,120,0.35); }
.cat-ux .cat-badge { background:linear-gradient(90deg,#3b2f13,#a6781c); color:#ffe7b0; box-shadow:0 0 0 1px rgba(255,200,120,0.3); }
.cat-imp .cat-badge { background:linear-gradient(90deg,#123524,#1e7c4a); color:#b4ffd6; box-shadow:0 0 0 1px rgba(120,255,180,0.35); }
.cat-perf .cat-badge { background:linear-gradient(90deg,#102b3d,#165875); color:#b2edff; box-shadow:0 0 0 1px rgba(100,210,255,0.35); }
.cat-sec .cat-badge { background:linear-gradient(90deg,#222844,#3b4d89); color:#c2d8ff; box-shadow:0 0 0 1px rgba(140,180,255,0.35); }
.cat-ref .cat-badge { background:linear-gradient(90deg,#2e2e2e,#555); color:#e0e0e0; box-shadow:0 0 0 1px rgba(180,180,180,0.3); }
.cat-dep .cat-badge { background:linear-gradient(90deg,#3a2a18,#6a5334); color:#f5d9b4; box-shadow:0 0 0 1px rgba(230,190,120,0.35); }
.cat-rem .cat-badge { background:linear-gradient(90deg,#401a2a,#7a2f4d); color:#ffc0dd; box-shadow:0 0 0 1px rgba(255,140,200,0.35); }
.cat-docs .cat-badge { background:linear-gradient(90deg,#1e3a3a,#2d6d6d); color:#b9f7f7; box-shadow:0 0 0 1px rgba(140,230,230,0.35); }

/* Slight spacing refinement for list items with badges */
li.wn-hl .cat-badge, li.wn-chg .cat-badge { margin-left:2px; }

/* ================================================
   AI SUGGESTIONS UI (Step 1.4)
   ================================================ */

/* AI Suggestions Button in Table Controls */
.ai-suggestions-btn {
    border-color: rgba(156, 39, 176, 0.7) !important;
    background: linear-gradient(180deg, rgba(186, 104, 200, 0.55) 0%, rgba(156, 39, 176, 0.40) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 3px 0 rgba(0, 0, 0, 0.25),
        0 6px 12px rgba(0, 0, 0, 0.25);
    text-shadow: 0 1px 0 rgba(0,0,0,0.35);
}

.ai-suggestions-btn:hover {
    background: linear-gradient(180deg, rgba(186, 104, 200, 0.65) 0%, rgba(156, 39, 176, 0.50) 100%) !important;
}

.ai-suggestions-btn:active {
    box-shadow:
        inset 0 2px 0 rgba(0, 0, 0, 0.18),
        0 2px 0 rgba(0, 0, 0, 0.28),
        0 4px 10px rgba(0, 0, 0, 0.22);
}

.ai-suggestions-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* AI Suggestions Modal */
.ai-suggestions-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-dropdown);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

.ai-suggestions-modal.hidden {
    display: none;
}

.ai-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(var(--glass-blur-md));
}

.ai-modal-content {
    position: relative;
    width: 900px;
    max-width: 95vw;
    max-height: 85vh;
    background: linear-gradient(180deg, rgba(30, 30, 45, 0.98), rgba(20, 20, 35, 0.98));
    border: 1px solid rgba(186, 104, 200, 0.3);
    border-radius: var(--radius-xl);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease;
}

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

/* Modal Header */
.ai-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--glass-border);
    background: linear-gradient(180deg, rgba(186, 104, 200, 0.15), rgba(156, 39, 176, 0.08));
}

.ai-modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
}

.ai-modal-close {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--glass-border-light);
    border-radius: var(--radius-md);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ai-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: var(--glass-border-strong);
}

/* Modal Stats Row */
.ai-modal-stats {
    display: flex;
    gap: 2rem;
    padding: 1rem 2rem;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid var(--glass-border);
}

.ai-modal-stats .stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ai-modal-stats .stat-label {
    font-size: 0.8rem;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ai-modal-stats .stat-value {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--acc);
}

/* Modal Body (Scrollable Cards) */
.ai-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Scrollbar Styling */


.ai-modal-body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-xs);
}

.ai-modal-body::-webkit-scrollbar-thumb {
    background: rgba(186, 104, 200, 0.5);
    border-radius: var(--radius-xs);
}

.ai-modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(186, 104, 200, 0.7);
}

/* Suggestion Card */
.ai-suggestion-card {
    background: linear-gradient(135deg, rgba(186, 104, 200, 0.08), rgba(156, 39, 176, 0.05));
    border: 1px solid rgba(186, 104, 200, 0.3);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    transition: all 0.2s ease;
}

.ai-suggestion-card:hover {
    border-color: rgba(186, 104, 200, 0.5);
    box-shadow: 0 4px 16px rgba(186, 104, 200, 0.2);
    transform: translateY(-2px);
}

.ai-suggestion-card.unselected {
    opacity: 0.4;
    background: rgba(100, 100, 100, 0.1);
    border-color: var(--glass-border);
}

/* Duplicate Entity Card */
.ai-suggestion-card.duplicate-entity {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.08), rgba(255, 152, 0, 0.05));
    border: 1px solid rgba(255, 193, 7, 0.4);
    opacity: 0.6;
}

.ai-suggestion-card.duplicate-entity:hover {
    border-color: rgba(255, 193, 7, 0.6);
    box-shadow: 0 4px 16px rgba(255, 193, 7, 0.2);
}

.ai-duplicate-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: rgba(255, 193, 7, 0.2);
    border: 1px solid rgba(255, 193, 7, 0.4);
    border-radius: var(--radius-xs);
    font-size: 0.75rem;
    font-weight: 600;
    color: #ffc107;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Card Header */
.ai-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.ai-card-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #ba68c8;
}

.ai-card-title {
    flex: 1;
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: #fff;
}

.ai-card-badges {
    display: flex;
    gap: 0.5rem;
}

.ai-card-importance,
.ai-card-confidentiality {
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
}

.ai-card-importance.importance-high {
    background: rgba(76, 175, 80, 0.2);
    color: #81c784;
}

.ai-card-importance.importance-medium {
    background: rgba(255, 152, 0, 0.2);
    color: #ffb74d;
}

.ai-card-importance.importance-low {
    background: rgba(158, 158, 158, 0.2);
    color: #bdbdbd;
}

.ai-card-confidentiality.confidentiality-high {
    background: rgba(244, 67, 54, 0.2);
    color: #ef5350;
}

.ai-card-confidentiality.confidentiality-medium {
    background: rgba(255, 152, 0, 0.2);
    color: #ffb74d;
}

.ai-card-confidentiality.confidentiality-low {
    background: rgba(100, 181, 246, 0.2);
    color: #64b5f6;
}

/* Card Meta */
.ai-card-meta {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    opacity: 0.8;
}

.ai-card-level {
    color: #64b5f6;
}

.ai-card-parent {
    color: #ba68c8;
}

/* Card Description */
.ai-card-description {
    margin: 0 0 0.75rem 0;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
}

/* Card Reasoning */
.ai-card-reasoning {
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.3);
    border-left: 3px solid rgba(186, 104, 200, 0.5);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

.ai-card-reasoning strong {
    color: var(--acc);
}

/* Card Tags */
.ai-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ai-tag {
    padding: 0.25rem 0.75rem;
    background: rgba(100, 181, 246, 0.15);
    border: 1px solid rgba(100, 181, 246, 0.3);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: #64b5f6;
}

/* Modal Footer */
.ai-modal-footer {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    padding: 1.5rem 2rem;
    border-top: 1px solid var(--glass-border);
    background: rgba(0, 0, 0, 0.2);
}

.ai-btn {
    padding: 0.75rem 2rem;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.ai-btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--glass-border-light);
    color: #fff;
}

.ai-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--glass-border-strong);
}

.ai-btn-primary {
    background: linear-gradient(135deg, #ba68c8, #9c27b0);
    border-color: rgba(186, 104, 200, 0.5);
    color: #fff;
    box-shadow: 0 4px 12px rgba(156, 39, 176, 0.3);
}

.ai-btn-primary:hover {
    background: linear-gradient(135deg, #ce93d8, #ba68c8);
    box-shadow: 0 6px 16px rgba(156, 39, 176, 0.4);
    transform: translateY(-2px);
}

.ai-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* AI Configuration Dialog */
.ai-config-dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 11000; /* Above suggestions modal */
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

.ai-config-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(var(--glass-blur-md));
}

.ai-config-content {
    position: relative;
    width: 500px;
    max-width: 90vw;
    background: linear-gradient(180deg, rgba(30, 30, 45, 0.98), rgba(20, 20, 35, 0.98));
    border: 1px solid rgba(186, 104, 200, 0.4);
    border-radius: var(--radius-xl);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    animation: scaleIn 0.2s ease;
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.ai-config-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--glass-border);
    background: linear-gradient(180deg, rgba(186, 104, 200, 0.15), rgba(156, 39, 176, 0.08));
}

.ai-config-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
}

.ai-config-close {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--glass-border-light);
    border-radius: var(--radius-md);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ai-config-close:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: var(--glass-border-strong);
}

.ai-config-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.ai-config-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ai-config-field label {
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.3px;
}

.ai-config-field select,
.ai-config-field input[type="number"] {
    padding: 0.75rem 1rem;
    background: var(--glass-bg-light);
    border: 1px solid var(--glass-border-light);
    border-radius: var(--radius-md);
    color: #fff;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.ai-config-field select:focus,
.ai-config-field input[type="number"]:focus {
    outline: none;
    border-color: rgba(186, 104, 200, 0.6);
    background: var(--glass-bg-light);
    box-shadow: 0 0 0 3px rgba(186, 104, 200, 0.15);
}

.ai-config-field select option {
    background: #1e1e2d;
    color: #fff;
}

.ai-config-field input[type="number"] {
    width: 100px;
}

.ai-config-hint {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0.25rem;
}

.ai-config-footer {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--glass-border);
    background: rgba(0, 0, 0, 0.2);
}

.ai-config-cancel,
.ai-config-generate {
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.ai-config-cancel {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--glass-border-light);
    color: #fff;
}

.ai-config-cancel:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--glass-border-strong);
}

.ai-config-generate {
    background: linear-gradient(135deg, #ba68c8, #9c27b0);
    border-color: rgba(186, 104, 200, 0.5);
    color: #fff;
    box-shadow: 0 4px 12px rgba(156, 39, 176, 0.3);
}

.ai-config-generate:hover {
    background: linear-gradient(135deg, #ce93d8, #ba68c8);
    box-shadow: 0 6px 16px rgba(156, 39, 176, 0.4);
    transform: translateY(-2px);
}

/* ==================== Settings Tabs Navigation ==================== */
.settings-tabs-nav {
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
    align-items: center;
}

.settings-tab-btn {
    flex: 1;
    padding: 14px 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, 0.6);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.settings-tab-btn:hover {
    background: var(--glass-bg-light);
    color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.15);
}

.settings-tab-btn.active {
    background: rgba(121, 211, 255, 0.15);
    border-color: rgba(121, 211, 255, 0.45);
    color: #79d3ff;
    box-shadow:
        0 2px 6px rgba(121, 211, 255, 0.2),
        inset 0 -1px 0 rgba(121, 211, 255, 0.5);
}

/* Settings Save Button */
.settings-save-btn {
    flex: none;
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(80,200,120,0.3), rgba(50,150,80,0.2));
    border: 1px solid rgba(80,200,120,0.4);
    border-radius: var(--radius-sm);
    color: #90ee90;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.settings-save-btn:hover {
    background: linear-gradient(135deg, rgba(80,200,120,0.5), rgba(50,150,80,0.35));
    border-color: rgba(80,200,120,0.6);
    box-shadow: 0 2px 8px rgba(80,200,120,0.3);
    transform: translateY(-1px);
}

.settings-save-btn.saved {
    background: linear-gradient(135deg, rgba(80,200,120,0.6), rgba(50,150,80,0.5));
    animation: saveFlash 0.5s ease;
}

@keyframes saveFlash {
    0%, 100% { box-shadow: 0 0 0 rgba(80,200,120,0); }
    50% { box-shadow: 0 0 15px rgba(80,200,120,0.5); }
}

/* Tab Panel Visibility */
.settings-tab-panel {
    display: none;
}

.settings-tab-panel.active {
    display: block;
}