/* ====================================
   CSS VARIABLES - THEMES
   ==================================== */

:root {
    /* Dark Theme */
    --bg-primary: #1e1e1e;
    --bg-secondary: #2a2a2a;
    --bg-tertiary: #353535;
    --bg-hover: #404040;
    
    --text-primary: #e0e0e0;
    --text-secondary: #a0a0a0;
    --text-disabled: #606060;
    
    --border-color: #404040;
    --divider-color: #303030;
    
    /* Light Info Box */
    --light-info-bg: #272727;
    
    /* Default Accent - Blue */
    --accent-color: #a0a0a0;
    --accent-hover: #b5b5b5;
    --accent-active: #8a8a8a;
    --accent-dim: rgba(160, 160, 160, 0.2);
    --output-color: #a0a0a0;
    
    
    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
    
    /* Layout */
    --border-radius: 8px;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 24px;
}

/* Light Theme */
[data-theme="light"] {
    --bg-primary: #f5f5f5;
    --bg-secondary: #e8e8e8;
    --bg-tertiary: #d0d0d0;
    --bg-hover: #c0c0c0;
    
    --text-primary: #1e1e1e;
    --text-secondary: #606060;
    --text-disabled: #a0a0a0;
    
    --border-color: #c0c0c0;
    --divider-color: #d8d8d8;
    
    /* Light Info Box */
    --light-info-bg: #dcdcdc;
    
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* ---- Light mode: TomSelect overrides ---- */
[data-theme="light"] .ts-dropdown {
    background-color: #e8e8e8 !important;
    border-color: #b0b0b0 !important;
}
[data-theme="light"] .ts-dropdown .option {
    background-color: #e8e8e8 !important;
    color: #1e1e1e !important;
}
[data-theme="light"] .ts-dropdown .option:hover,
[data-theme="light"] .ts-dropdown .option.active {
    background-color: #d0d0d0 !important;
    color: #1e1e1e !important;
}
[data-theme="light"] .ts-dropdown .option.selected {
    background-color: var(--accent-dim) !important;
    color: var(--accent-color) !important;
}
[data-theme="light"] .ts-dropdown .optgroup-header {
    background-color: #d0d0d0 !important;
    color: #606060 !important;
    border-bottom-color: #b0b0b0 !important;
}
[data-theme="light"] .ts-wrapper .ts-control {
    border-color: #b0b0b0 !important;
}
[data-theme="light"] .ts-wrapper .ts-control > .item {
    color: #1e1e1e !important;
}
[data-theme="light"] .camera-setup .ts-wrapper .ts-control > .item {
    color: var(--output-color) !important;
}
[data-theme="light"] .modify-container .ts-wrapper .ts-control > .item {
    color: var(--output-color) !important;
}
[data-theme="light"] .ts-dropdown-content::-webkit-scrollbar-track {
    background-color: #e0e0e0;
}
[data-theme="light"] .ts-dropdown-content::-webkit-scrollbar {
    background-color: #e0e0e0;
}
[data-theme="light"] .ts-dropdown-content::-webkit-scrollbar-thumb {
    background-color: #b0b0b0;
}
[data-theme="light"] .ts-dropdown-content::-webkit-scrollbar-thumb:hover {
    background-color: #909090;
}

/* Force dark theme button to stay dark in light mode */
[data-theme="light"] .theme-btn[data-theme="dark"] {
    background-color: #2a2a2a;
    color: #e0e0e0;
    border-color: #404040;
}

[data-theme="light"] .theme-btn[data-theme="dark"]:hover {
    background-color: #353535;
    border-color: var(--accent-color);
}

[data-theme="light"] .theme-btn[data-theme="dark"].active {
    background-color: #353535;
    border-color: var(--accent-color);
    color: var(--accent-color);
}

/* Accent Colors */
[data-accent="red"] {
    --accent-color: #e53935 !important;
    --accent-hover: #ef5350 !important;
    --accent-active: #c62828 !important;
    --accent-dim: rgba(229, 57, 53, 0.2) !important;
    --output-color: #e53935 !important;
}

[data-accent="orange"] {
    --accent-color: #f5a623 !important;
    --accent-hover: #f7b851 !important;
    --accent-active: #d89520 !important;
    --accent-dim: rgba(245, 166, 35, 0.2) !important;
    --output-color: #f5a623 !important;
}

[data-accent="green"] {
    --accent-color: #43a047 !important;
    --accent-hover: #66bb6a !important;
    --accent-active: #2e7d32 !important;
    --accent-dim: rgba(67, 160, 71, 0.2) !important;
    --output-color: #43a047 !important;
}

[data-accent="blue"] {
    --accent-color: #1e88e5 !important;
    --accent-hover: #42a5f5 !important;
    --accent-active: #1565c0 !important;
    --accent-dim: rgba(30, 136, 229, 0.2) !important;
    --output-color: #1e88e5 !important;
}

[data-accent="purple"] {
    --accent-color: #8e24aa !important;
    --accent-hover: #ab47bc !important;
    --accent-active: #6a1b9a !important;
    --accent-dim: rgba(142, 36, 170, 0.2) !important;
    --output-color: #8e24aa !important;
}

[data-accent="gray"] {
    --accent-color: #a0a0a0 !important;
    --accent-hover: #b5b5b5 !important;
    --accent-active: #8a8a8a !important;
    --accent-dim: rgba(160, 160, 160, 0.2) !important;
    --output-color: #a0a0a0 !important;
}

/* ====================================
   RESET & BASE STYLES
   ==================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.5;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Hide scrollbar but keep functionality */
html {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

html::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

body {
    padding: var(--spacing-xl);
    padding-bottom: 120px; /* Initial value, updated dynamically by JS */
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height — respects mobile browser chrome */
    transition: padding-bottom 0.3s ease;
}

/* ====================================
   EDIT LAYOUT & SETTINGS BUTTONS
   ==================================== */

/* Floating Add Button - FIRST */
.add-button-container {
    position: fixed;
    top: var(--spacing-lg);
    left: var(--spacing-lg);
    z-index: 1003;
}

.floating-add-button {
    width: 40px;
    height: 40px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
}

.floating-add-button:hover {
    background-color: var(--accent-color);
    color: var(--bg-primary);
    box-shadow: var(--shadow-md);
    transform: scale(1.05);
}

.add-options-menu {
    position: absolute;
    left: 48px; /* To the right of the button */
    top: 0;
    display: none;
    flex-direction: column;
    gap: 8px;
}

/* KRITICKÁ OPRAVA: Hover funguje na celém containeru + menu */
.add-button-container:hover .add-options-menu,
.add-options-menu:hover {
    display: flex;
}

/* Invisible bridge between button and menu */
.add-button-container::after {
    content: '';
    position: absolute;
    left: 40px;
    top: 0;
    width: 8px;
    height: 40px; /* Only cover the add button height */
    background: transparent;
}

.add-option-btn {
    height: 40px;
    padding: 0 12px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: var(--shadow-sm);
}

.add-option-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.add-option-btn:hover {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--bg-primary);
    box-shadow: var(--shadow-md);
}

/* Edit Layout Button - SECOND */
.edit-layout-button {
    position: fixed;
    top: calc(var(--spacing-lg) + 48px);
    left: var(--spacing-lg);
    width: 40px;
    height: 40px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 1001;
    box-shadow: var(--shadow-sm);
}

.edit-layout-button:hover {
    background-color: var(--accent-color);
    color: var(--bg-primary);
    box-shadow: var(--shadow-md);
    transform: scale(1.05);
}

/* Reset Button - THIRD */
.reset-app-button {
    position: fixed;
    top: calc(var(--spacing-lg) + 96px);
    left: var(--spacing-lg);
    width: 40px;
    height: 40px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 1002;
    box-shadow: var(--shadow-sm);
}

.reset-app-button:hover {
    background-color: var(--accent-color);
    color: var(--bg-primary);
    box-shadow: var(--shadow-md);
    transform: scale(1.05);
}

/* Export/Import Button - FOURTH */
.export-import-button {
    position: fixed;
    top: calc(var(--spacing-lg) + 144px);
    left: var(--spacing-lg);
    width: 40px;
    height: 40px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 1001;
    box-shadow: var(--shadow-sm);
}

.export-import-button:hover {
    background-color: var(--accent-color);
    color: var(--bg-primary);
    box-shadow: var(--shadow-md);
    transform: scale(1.05);
}

/* Settings Button - FIFTH */
.settings-button {
    position: fixed;
    top: calc(var(--spacing-lg) + 192px);
    left: var(--spacing-lg);
    width: 40px;
    height: 40px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 1000;
    box-shadow: var(--shadow-sm);
}

/* Hub Button - SIXTH */
.hub-button {
    position: fixed;
    top: calc(var(--spacing-lg) + 240px);
    left: var(--spacing-lg);
    width: 40px;
    height: 40px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 1000;
    box-shadow: var(--shadow-sm);
}

.hub-button:hover {
    background-color: var(--accent-color);
    color: var(--bg-primary);
    box-shadow: var(--shadow-md);
    transform: scale(1.05);
}

/* Announcements History Button - Above Fullscreen */
/* Bottom Fixed Buttons - always visible, positioned relative to viewport bottom */
.bottom-fixed-buttons {
    position: fixed;
    bottom: 0;
    left: var(--spacing-lg);
    z-index: 1001;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    transition: padding-bottom 0.25s ease;
}

.announcements-history-button {
    position: relative;
    width: 40px;
    height: 40px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
}

.announcements-history-button:hover {
    background-color: var(--accent-color);
    color: var(--bg-primary);
    box-shadow: var(--shadow-md);
}

/* Fullscreen Button */
.fullscreen-button {
    position: relative;
    width: 40px;
    height: 40px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
}

.fullscreen-button:hover {
    background-color: var(--accent-color);
    color: var(--bg-primary);
    box-shadow: var(--shadow-md);
}

/* Detach/Float Button - top-right of result bar */
.result-detach-button {
    position: absolute;
    top: 6px;
    right: 20px;
    width: 28px;
    height: 28px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 1001;
    opacity: 0.5;
    padding: 0;
}

.result-detach-button:hover {
    opacity: 1;
    color: var(--accent-color);
    border-color: var(--border-color);
    background-color: var(--bg-primary);
}

/* Floating Result Window — matches fp-panel design */
.result-float-window {
    position: fixed;
    z-index: 2001;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
    user-select: none;
    overflow: hidden;
    font-size: 13px;
}

.result-float-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px 6px 12px;
    background: var(--bg-tertiary, var(--bg-secondary));
    cursor: grab;
    user-select: none;
    border-bottom: 1px solid var(--border-color);
}

.result-float-header:active {
    cursor: grabbing;
}

.result-float-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.result-float-close {
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    flex-shrink: 0;
    margin-left: 4px;
    font-size: 16px;
    line-height: 1;
    padding: 0;
    transition: all 0.15s ease;
}

.result-float-close:hover {
    background: var(--bg-hover, rgba(255,255,255,0.08));
    color: var(--text-primary);
}

.result-float-body {
    display: grid;
    grid-template-columns: repeat(3, minmax(80px, 1fr));
    gap: 8px 12px;
    padding: 12px 20px;
}

.result-float-item {
    text-align: center;
    min-width: 70px;
}

.result-float-item .result-label {
    font-size: 9px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 2px;
}

.result-float-item .result-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--output-color);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.result-float-item .aperture-fraction {
    font-size: 9px;
    bottom: 7px;
}

/* Ambient section inside float — on top, animated */
.result-float-ambient {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 12px;
    border-bottom: 1px solid transparent;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: -8px; /* Cancel out the grid row gap when hidden */
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.3s ease, border-color 0.3s ease, margin-bottom 0.3s ease;
}

.result-float-ambient.show {
    max-height: 80px;
    padding-bottom: 10px;
    margin-bottom: 0;
    opacity: 1;
    border-bottom-color: var(--border-color);
}

.result-float-ambient .result-float-item .result-value {
    font-size: 18px;
}

/* Result float window color tint */
.result-float-window.has-color-tint {
    border-color: rgba(var(--rf-tint-color), 0.45);
    box-shadow: 0 2px 16px rgba(var(--rf-tint-color), 0.25), 0 2px 12px rgba(0, 0, 0, 0.2);
}

.result-float-window.has-color-tint .result-float-header {
    background: linear-gradient(
        135deg,
        rgba(var(--rf-tint-color), 0.18) 0%,
        rgba(var(--rf-tint-color), 0.08) 100%
    );
    border-bottom-color: rgba(var(--rf-tint-color), 0.25);
}

.result-float-window.has-color-tint .result-float-body {
    background: linear-gradient(
        180deg,
        rgba(var(--rf-tint-color), 0.10) 0%,
        rgba(var(--rf-tint-color), 0.04) 100%
    );
}

.result-float-window.has-color-tint .result-float-item .result-label {
    color: rgba(var(--rf-tint-color), 0.85);
    text-shadow: 0 0 8px rgba(var(--rf-tint-color), 0.2);
}

.result-float-window.has-color-tint .result-float-ambient.show {
    border-bottom-color: rgba(var(--rf-tint-color), 0.2);
}

#block-result.detached {
    display: none !important;
}

body.no-select, body.no-select * {
    user-select: none !important;
}

.settings-button:hover {
    background-color: var(--accent-color);
    color: var(--bg-primary);
    box-shadow: var(--shadow-md);
    transform: scale(1.05);
}

/* ---- Tooltips for side buttons (JS-rendered) ---- */
.tooltip-el {
    position: fixed;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    border: 1px solid var(--border-color);
    z-index: 10020;
    display: flex;
    align-items: center;
    gap: 6px;
}
.tooltip-el.visible {
    opacity: 1;
}

/* Keyboard shortcut badge — shared by tooltips and context menus */
.tooltip-kbd,
.ctx-shortcut {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 10px;
    line-height: 1;
    min-width: 18px;
    padding: 2px 5px;
    border-radius: 4px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    box-shadow: 0 1px 0 var(--border-color);
    margin-left: auto;
}

/* Tooltip kbd inherits muted look relative to tooltip text */
.tooltip-kbd {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}
[data-theme="light"] .tooltip-kbd {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

/* ====================================
   MODAL
   ==================================== */

.modal {
    display: none;
    position: fixed;
    z-index: 2500;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    /* Flexbox for centering */
    justify-content: center;
    align-items: center;
    padding: 16px;
}

/* Stacked modals - higher z-index, lighter background */
.modal.stacked {
    z-index: 2600;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

/* Add light modal needs higher z-index when stacked (above manage library) */
#addLightModal.stacked {
    z-index: 2650;
}

/* Confirm dialog needs even higher z-index */
#customConfirmModal.stacked {
    z-index: 2700;
}

.modal.stacked .modal-content {
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

/* When modal is shown, use flex display */
.modal[style*="display: block"] {
    display: flex !important;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.modal-content {
    background-color: var(--bg-secondary);
    margin: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    animation: slideDown 0.3s ease forwards;
    transform: translateY(0);
}

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

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

/* Modal closing animation */
.modal.closing {
    animation: fadeOut 0.2s ease forwards;
}

.modal.closing .modal-content {
    animation: slideUp 0.2s ease forwards;
}

.modal-header {
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}

.close {
    color: var(--text-secondary);
    font-size: 28px;
    font-weight: 300;
    cursor: pointer;
    transition: color 0.2s ease;
    line-height: 0.8;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-top: -2px;
}

.close:hover {
    color: var(--accent-color);
}

.modal-body {
    padding: var(--spacing-xl);
}

.settings-section {
    margin-bottom: var(--spacing-xl);
}

.settings-section:last-child {
    margin-bottom: 0;
}

/* Settings Section Header - Tab style like library toggle */
.settings-section-header {
    border-bottom: 1px solid var(--border-color);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
}

.settings-section-header span {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

/* Legacy h3 support */
.settings-section h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-md);
}

/* Theme Options */
.theme-options {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
}

.theme-btn {
    padding: var(--spacing-md) var(--spacing-lg);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    min-width: 100px;
}

.theme-btn:hover {
    background-color: var(--bg-hover);
    border-color: var(--accent-color);
}

.theme-btn.active {
    border-color: var(--accent-color);
    background-color: var(--bg-hover);
    color: var(--accent-color);
    font-weight: 600;
}

.theme-btn.active::before {
    content: '✓';
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    font-weight: bold;
}

.theme-preview {
    display: none;
}

/* Color Options */
.color-options {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
}

.color-btn {
    width: 40px;
    height: 40px;
    background-color: transparent;
    border: 2px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    position: relative;
    padding: 4px;
}

.color-btn:hover {
    transform: scale(1.1);
}

.color-btn.active {
    border-color: currentColor;
}

.color-btn.active::after {
    content: '✓';
    position: absolute;
    color: var(--bg-secondary);
    font-size: 14px;
    font-weight: bold;
}

/* Set border color based on data-color for hover and active */
.color-btn[data-color="red"]:hover,
.color-btn[data-color="red"].active {
    border-color: #e53935;
}

.color-btn[data-color="orange"]:hover,
.color-btn[data-color="orange"].active {
    border-color: #f5a623;
}

.color-btn[data-color="green"]:hover,
.color-btn[data-color="green"].active {
    border-color: #43a047;
}

.color-btn[data-color="blue"]:hover,
.color-btn[data-color="blue"].active {
    border-color: #1e88e5;
}

.color-btn[data-color="purple"]:hover,
.color-btn[data-color="purple"].active {
    border-color: #8e24aa;
}

.color-btn[data-color="gray"]:hover,
.color-btn[data-color="gray"].active {
    border-color: #a0a0a0;
}

.color-preview {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.red-preview { background-color: #e53935; }
.orange-preview { background-color: #f5a623; }
.green-preview { background-color: #43a047; }
.blue-preview { background-color: #1e88e5; }
.purple-preview { background-color: #8e24aa; }
.gray-preview { background-color: #a0a0a0; }

/* Quantity Compensation */
.quantity-compensation-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

.quantity-compensation-row input {
    width: 80px;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    transition: border-color 0.2s ease;
}

.quantity-compensation-row input:hover {
    border-color: var(--accent-color);
}

.quantity-compensation-row input:focus {
    outline: none;
    border-color: var(--accent-color);
}

.quantity-hint {
    font-size: 11px;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.4;
    max-width: 280px;
}

/* App Setting sub-label */
.app-setting-row {
    margin-bottom: var(--spacing-sm);
}

.app-setting-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Condensed Mode Toggle */
.condensed-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--spacing-lg);
}

.condensed-toggle-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.condensed-toggle-hint {
    font-size: 11px;
    color: var(--text-disabled);
}

.condensed-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}

.condensed-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.condensed-switch-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 22px;
    transition: all 0.2s ease;
}

.condensed-switch-slider::before {
    content: '';
    position: absolute;
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: var(--text-secondary);
    border-radius: 50%;
    transition: all 0.2s ease;
}

.condensed-switch input:checked + .condensed-switch-slider {
    background-color: var(--accent-dim);
    border-color: var(--accent-color);
}

.condensed-switch input:checked + .condensed-switch-slider::before {
    transform: translateX(18px);
    background-color: var(--accent-color);
}

/* Units Settings */
.units-settings {
    display: flex;
    flex-direction: row;
    gap: 30px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Small screens: Transmission unit row moves below and centers */
@media (max-width: 400px) {
    .units-settings {
        gap: 20px;
    }
    .units-settings .unit-toggle-row:last-child {
        flex-basis: 100%;
        align-items: center;
    }
}

.unit-toggle-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.unit-label {
    font-size: 10px;
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.unit-toggle-switch {
    display: flex;
    gap: 3px;
}

.unit-toggle-btn {
    padding: 4px 8px;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 36px;
    text-align: center;
}

.unit-toggle-btn:hover:not(.active) {
    background-color: var(--bg-hover);
    border-color: var(--accent-color);
    color: var(--text-primary);
}

.unit-toggle-btn.active {
    border-color: var(--accent-color);
    background-color: var(--bg-hover);
    color: var(--accent-color);
    font-weight: 600;
}

/* Edit Layout Button */
.edit-layout-btn {
    width: 100%;
    padding: var(--spacing-lg);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.edit-layout-btn svg {
    transition: all 0.2s ease;
}

.edit-layout-btn:hover {
    background-color: var(--bg-hover);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.edit-layout-btn:hover svg {
    fill: var(--accent-color);
}

/* Modal Buttons */
.confirm-btn,
.cancel-btn {
    padding: var(--spacing-md) var(--spacing-xl);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.confirm-btn {
    background-color: var(--accent-color);
    color: var(--bg-primary);
    border-color: var(--accent-color);
}

.confirm-btn:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
    box-shadow: var(--shadow-sm);
}

.cancel-btn {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.cancel-btn:hover {
    background-color: var(--bg-hover);
    border-color: var(--accent-color);
}

/* ====================================
   EXPORT/IMPORT MODAL
   ==================================== */

.export-import-modal {
    max-width: 600px;
}

.export-import-body {
    display: flex;
    gap: 0;
}

.export-section,
.import-section {
    flex: 1;
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.export-section h3,
.import-section h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.section-description {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

.export-import-divider {
    width: 1px;
    background-color: var(--border-color);
    margin: var(--spacing-md) 0;
}

/* Export Buttons */
.export-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xl);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
}

.export-btn:hover {
    background-color: var(--accent-color);
    color: var(--bg-primary);
    border-color: var(--accent-color);
}

.export-btn svg {
    flex-shrink: 0;
}

/* Export PDF Row */
.export-pdf-row {
    display: flex;
    gap: 0;
    align-items: stretch;
    margin-top: var(--spacing-sm);
    width: 100%;
}

.export-pdf-row .export-btn {
    flex: 1;
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    border-right: none;
}

.pdf-settings-btn {
    width: 44px;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.pdf-settings-btn:hover {
    background-color: var(--accent-color);
    color: var(--bg-primary);
    border-color: var(--accent-color);
}

/* PDF Settings Modal */
.pdf-settings-modal {
    max-width: 450px;
}

.pdf-settings-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.pdf-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.pdf-form-group label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pdf-form-group input,
.pdf-form-group textarea {
    padding: var(--spacing-md);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    transition: all 0.2s ease;
}

.pdf-form-group input:hover,
.pdf-form-group textarea:hover {
    border-color: var(--accent-color);
}

.pdf-form-group input:focus,
.pdf-form-group textarea:focus {
    outline: none;
    border-color: var(--accent-color);
}

.pdf-form-group input::placeholder,
.pdf-form-group textarea::placeholder {
    color: var(--text-disabled);
}

.pdf-form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.pdf-settings-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: flex-end;
    margin-top: var(--spacing-xl);
}

.reset-pdf-btn {
    margin-right: auto;
    padding: var(--spacing-md) var(--spacing-lg);
    background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.reset-pdf-btn:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

/* Drop Zone */
.drop-zone {
    width: 100%;
    min-height: 160px;
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: var(--bg-tertiary);
    position: relative;
}

.drop-zone:hover {
    border-color: var(--accent-color);
    background-color: var(--accent-dim);
}

.drop-zone.drag-over {
    border-color: var(--accent-color);
    background-color: var(--accent-dim);
    border-style: solid;
}

.drop-zone-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-lg);
}

.drop-zone-content svg {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
    transition: all 0.2s ease;
}

.drop-zone:hover .drop-zone-content svg {
    color: var(--accent-color);
}

.drop-zone-text {
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.drop-zone-subtext {
    font-size: 12px;
    color: var(--text-secondary);
}

/* File Selected State */
.file-selected {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    background-color: var(--accent-dim);
    border-radius: var(--border-radius);
    width: 100%;
    max-width: 220px;
    min-width: 0;
}

.file-selected svg {
    color: var(--accent-color);
    flex-shrink: 0;
}

.file-name {
    flex: 1;
    font-size: 13px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.remove-file-btn {
    width: 24px;
    height: 24px;
    background-color: transparent;
    border: none;
    border-radius: 50%;
    color: var(--text-secondary);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.remove-file-btn:hover {
    background-color: var(--bg-hover);
    color: var(--accent-color);
}

/* Import Button */
.import-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xl);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    max-width: 180px;
    margin-top: var(--spacing-md);
}

.import-btn:hover:not(:disabled) {
    background-color: var(--accent-color);
    color: var(--bg-primary);
    border-color: var(--accent-color);
}

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

.import-btn svg {
    flex-shrink: 0;
}

/* Mobile Responsive */
@media (max-width: 500px) {
    .export-import-body {
        flex-direction: column;
    }
    
    .export-import-divider {
        width: 100%;
        height: 1px;
        margin: var(--spacing-md) 0;
    }
    
    .export-section,
    .import-section {
        padding: var(--spacing-md);
    }
}

/* ====================================
   LAYOUT CONTROLS
   ==================================== */

.layout-controls {
    position: fixed;
    top: var(--spacing-lg);
    right: var(--spacing-lg);
    display: flex;
    gap: var(--spacing-sm);
    z-index: 1000;
}

.save-layout-btn,
.cancel-layout-btn {
    padding: var(--spacing-md) var(--spacing-lg);
    border: none;
    border-radius: var(--border-radius);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
}

.save-layout-btn {
    background-color: var(--accent-color);
    color: var(--bg-primary);
}

.save-layout-btn:hover {
    background-color: var(--accent-hover);
    box-shadow: var(--shadow-md);
}

.cancel-layout-btn {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.cancel-layout-btn:hover {
    background-color: var(--bg-hover);
}

/* ====================================
   MAIN CONTAINER
   ==================================== */

.main-container {
    max-width: 800px;
    margin: 0 auto;
}

/* ====================================
   BLOCKS
   ==================================== */

.block {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
    overflow: visible;
    max-width: 100%;
}

.block.block-selected {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 1px var(--accent-color), var(--shadow-sm);
}

/* Prevent text selection when multi-selecting blocks */
.block.block-selected {
    user-select: none;
    -webkit-user-select: none;
}

/* Block color tint mode (full-block coloring) */
.block.has-color-tint {
    border-color: rgba(var(--block-tint-color), 0.35);
    box-shadow: 0 0 8px rgba(var(--block-tint-color), 0.15), var(--shadow-sm);
}

.block.has-color-tint .block-header {
    background: linear-gradient(
        135deg,
        rgba(var(--block-tint-color), 0.18) 0%,
        rgba(var(--block-tint-color), 0.06) 100%
    );
}

.block.has-color-tint .block-content {
    background: linear-gradient(
        180deg,
        rgba(var(--block-tint-color), 0.07) 0%,
        rgba(var(--block-tint-color), 0.02) 100%
    );
}

.block.has-color-tint .block-header .block-title,
.block.has-color-tint .block-header .block-subtitle {
    text-shadow: 0 0 8px rgba(var(--block-tint-color), 0.15);
}

.block.has-color-tint.block-selected {
    border-color: rgba(var(--block-tint-color), 0.6);
    box-shadow: 0 0 0 1px rgba(var(--block-tint-color), 0.6), 0 0 12px rgba(var(--block-tint-color), 0.2);
}

/* Block header should clip content */
.block-header {
    overflow: hidden;
}

/* Don't change shadow on hover in normal mode */

/* Block Wrapper for side-by-side layout */
.block-wrapper {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    overflow: visible;
}

.block-wrapper > .block {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

/* Draggable State */
.draggable {
    cursor: default;
    outline: 2px dashed transparent;
    outline-offset: -1px;
    transition: outline-color 0.3s ease, opacity 0.3s ease;
}

.draggable.editing {
    opacity: 0.9;
    outline-color: var(--accent-color);
    cursor: grab;
    transition: outline-color 0.3s ease, opacity 0.3s ease, background-color 0.2s ease;
}

.draggable.editing:hover {
    opacity: 1;
    background-color: var(--accent-dim);
}

.draggable.editing .block-handle {
    cursor: grab;
    pointer-events: auto;
}

.draggable.editing .block-handle:active {
    cursor: grabbing;
}

/* Disable ALL interactions in editing mode except dragging */
.draggable.editing .block-content {
    pointer-events: none;
}

.draggable.editing button {
    pointer-events: none;
    cursor: grab;
}

.draggable.editing select,
.draggable.editing input,
.draggable.editing .slider,
.draggable.editing .editable {
    pointer-events: none;
    cursor: grab;
}

.draggable.editing .tab-btn {
    pointer-events: none;
    cursor: grab;
}

.draggable.editing .light-title,
.draggable.editing .diffusion-title,
.draggable.editing h3 {
    pointer-events: none;
    cursor: grab;
}

.draggable.editing .block-header {
    pointer-events: none;
    cursor: grab;
}

.draggable.editing .block-handle * {
    cursor: grab;
}

/* Block wrapper in editing mode - allow blocks inside to be grabbed */
.block-wrapper {
    position: relative;
}

.block-wrapper > .block.draggable.editing {
    position: relative;
    z-index: 10; /* Ensure blocks are above wrapper for drag operations */
}

.dragging,
.draggable.editing.dragging {
    opacity: 0 !important;
    pointer-events: none;
}

/* Prevent text selection during layout drag */
body.layout-dragging,
body.layout-dragging * {
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* Drag over indicators - soft elliptical glow at drop edge */
.drag-over {
    /* no outline — we use the ::before glow only */
}

.drag-over::before {
    display: none;
}

.drag-over-top,
.drag-over-bottom,
.drag-over-left,
.drag-over-right {
    position: relative;
}

.drag-over-top::before,
.drag-over-bottom::before,
.drag-over-left::before,
.drag-over-right::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 100;
    pointer-events: none;
    border-radius: inherit;
    transition: opacity 0.15s ease;
}

/* Top: elliptical glow hugging top edge */
.drag-over-top::before {
    background: radial-gradient(ellipse 70% 50% at 50% 0%, var(--accent-color) 0%, transparent 70%);
    opacity: 0.40;
}

/* Bottom: elliptical glow hugging bottom edge */
.drag-over-bottom::before {
    background: radial-gradient(ellipse 70% 50% at 50% 100%, var(--accent-color) 0%, transparent 70%);
    opacity: 0.40;
}

/* Left: elliptical glow hugging left edge */
.drag-over-left::before {
    background: radial-gradient(ellipse 50% 70% at 0% 50%, var(--accent-color) 0%, transparent 70%);
    opacity: 0.40;
}

/* Right: elliptical glow hugging right edge */
.drag-over-right::before {
    background: radial-gradient(ellipse 50% 70% at 100% 50%, var(--accent-color) 0%, transparent 70%);
    opacity: 0.40;
}

.block-wrapper {
    position: relative;
}

.block {
    position: relative;
}

/* Block Handle */
.block-handle {
    user-select: none;
}

/* Only show grab cursor in editing mode */
.draggable.editing .block-handle {
    cursor: grab;
}

.draggable.editing .block-handle:active {
    cursor: grabbing;
}

/* Block Header */
.block-header {
    padding: var(--spacing-md) var(--spacing-lg);
    background-color: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    position: relative; /* Důležité pro absolutní pozicování overlay */
}

/* Left-side container (buttons + title) — must shrink so title truncates */
.block-header > div:first-child {
    flex: 1;
    overflow: hidden;
    min-width: 0;
}

/* Right-side container (AMBIENT / RESET / DELETE) — never shrink */
.block-header > div:last-child {
    flex-shrink: 0;
    margin-left: 8px;
}

/* Title Edit Overlay */
.title-edit-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    background-color: var(--bg-tertiary);
    z-index: 100;
}

.block.has-color-tint .title-edit-overlay {
    background: linear-gradient(
        135deg,
        rgba(var(--block-tint-color), 0.22) 0%,
        rgba(var(--block-tint-color), 0.10) 100%
    ), var(--bg-tertiary);
}

.title-edit-input {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    background: var(--bg-hover);
    border: 1px solid var(--accent-color);
    border-radius: 4px;
    padding: 6px 10px;
    color: var(--text-primary);
    outline: none;
    max-width: 300px;
}

.title-edit-input:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px var(--accent-dim);
}

.block-header h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Only override for gray accent in light mode - gray on light bg is hard to read */
[data-theme="light"][data-accent="gray"] .block-header h3 {
    color: var(--text-secondary);
}

.block-header h3.ambient-title {
    color: var(--accent-color);
}

[data-theme="light"][data-accent="gray"] .block-header h3.ambient-title {
    color: var(--text-secondary);
}

.block-header h3.light-title,
.block-header h3.diffusion-title {
    cursor: pointer;
    transition: opacity 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
}

/* Fade-out gradient only when text is actually overflowing */
.block-header h3.light-title.title-overflow,
.block-header h3.diffusion-title.title-overflow {
    mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
}

.block-header h3.light-title:hover,
.block-header h3.diffusion-title:hover {
    opacity: 0.8;
}

/* Ambient Button */
.ambient-button {
    padding: 6px 12px;
    background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.5px;
}

.ambient-button:hover {
    background-color: var(--bg-hover);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.ambient-button.active {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--bg-primary);
}

.ambient-button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* Affects Button (for diffusions) */
.affects-button {
    padding: 6px 12px;
    background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.5px;
}

.affects-button:hover {
    background-color: var(--bg-hover);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.affects-button.active {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--bg-primary);
}

/* Reset Button */
.reset-button {
    padding: 6px 12px;
    background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.5px;
}

.reset-button:hover {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--bg-primary);
}

/* Delete Button */
.delete-button {
    padding: 6px 12px;
    background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.5;
}

.delete-button:hover {
    background-color: #ff4a4a;
    border-color: #ff4a4a;
    color: white;
    opacity: 1;
}

/* Compact button styles (when in wrapper) */
.reset-button.compact,
.delete-button.compact {
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.reset-button.compact svg,
.delete-button.compact svg {
    flex-shrink: 0;
}

/* Add Inline Button (+ button in header) */
.add-inline-button {
    width: 28px;
    height: 28px;
    padding: 0;
    background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.add-inline-button:hover {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--bg-primary);
    transform: scale(1.05);
}

.add-inline-button svg {
    width: 14px;
    height: 14px;
}

/* Toggle Disable Button */
.toggle-disable-button {
    width: 28px;
    height: 28px;
    padding: 0;
    background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.toggle-disable-button:hover {
    background-color: var(--bg-hover);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.toggle-disable-button.disabled {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-disabled);
}

.toggle-disable-button.disabled:hover {
    background-color: var(--bg-hover);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.toggle-disable-button svg {
    width: 14px;
    height: 14px;
}

/* Disabled Block State */
.block.block-disabled {
    opacity: 0.5;
}

.block.block-disabled .block-content {
    pointer-events: none;
    filter: grayscale(70%);
}

.block.block-disabled .block-header h3 {
    color: var(--text-disabled);
}

.block.block-disabled .reset-button,
.block.block-disabled .delete-button,
.block.block-disabled .ambient-button,
.block.block-disabled .affects-button {
    opacity: 0.5;
    pointer-events: none;
}

.block.block-disabled .toggle-disable-button,
.block.block-disabled .add-inline-button {
    opacity: 1;
    pointer-events: auto;
}

/* Minimize Button */
.minimize-button {
    display: none;
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 12px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
    white-space: nowrap;
}

.block-handle {
    position: relative;
    z-index: 2;
}

.block-handle::after {
    content: '';
    position: absolute;
    bottom: -14px;
    left: 0;
    right: 0;
    height: 14px;
}

.block-handle:hover .minimize-button {
    display: block;
}

.minimize-button:hover {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--bg-primary);
}

/* Minimized Block State */
.block .block-content {
    max-height: 1000px;
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, padding 0.3s ease-in-out;
}

.block.block-minimized .block-content {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.block.block-minimized {
    min-height: auto;
}

.block.block-minimized .block-handle {
    border-bottom: none;
}

/* Don't show minimize in editing mode */
.draggable.editing .minimize-button {
    display: none !important;
}

/* Block Content base styles */
.block-content {
    padding: var(--spacing-lg);
    position: relative;
    z-index: 1;
}

/* Allow overflow for dropdowns when not minimized */
.block:not(.block-minimized) .block-content {
    overflow: visible;
}

/* Tab content needs overflow visible for Tom Select dropdown */
.tab-content {
    overflow: visible;
    position: relative;
}

.tab-content.active {
    overflow: visible;
}

/* ====================================
   CAMERA SETUP
   ==================================== */

.camera-setup-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
}

.camera-setup {
    display: flex;
    flex-direction: column;
}

.camera-setup-full {
    grid-column: 1 / -1;
}

.camera-setup label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.camera-setup select {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--output-color);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    appearance: none;
    transition: all 0.2s ease;
}

.camera-setup select:hover {
    background-color: var(--bg-hover);
    border-color: var(--accent-color);
}

.camera-setup select:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: none;
}

/* Camera TomSelect overrides */
.camera-setup .ts-wrapper {
    width: 100%;
}

.camera-setup .ts-wrapper .ts-control {
    background-color: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 4px !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
    min-height: unset !important;
    cursor: pointer !important;
    transition: all 0.2s ease;
    box-shadow: none !important;
}

.camera-setup .ts-wrapper .ts-control > .item {
    color: var(--output-color) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.camera-setup .ts-wrapper .ts-control::after {
    content: '';
    display: block;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--text-secondary);
    pointer-events: none;
}

.camera-setup .ts-wrapper.dropdown-active .ts-control::after {
    border-top: none;
    border-bottom: 5px solid var(--accent-color);
}

.camera-setup .ts-wrapper .ts-control:hover {
    background-color: var(--bg-hover) !important;
    border-color: var(--accent-color) !important;
}

.camera-setup .ts-wrapper.focus .ts-control {
    border-color: var(--accent-color) !important;
    box-shadow: none !important;
}

.camera-setup .ts-wrapper .ts-control > input {
    display: none !important;
}

.camera-setup .ts-dropdown {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 4px !important;
    box-shadow: var(--shadow-lg) !important;
    margin-top: 4px !important;
}

.camera-setup .ts-dropdown .option,
.camera-setup-full .ts-dropdown .option,
body > .ts-dropdown .option {
    color: var(--text-primary) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 8px 12px !important;
    transition: background-color 0.15s ease;
}

.camera-setup .ts-dropdown .option:hover,
.camera-setup .ts-dropdown .option.active,
.camera-setup-full .ts-dropdown .option:hover,
.camera-setup-full .ts-dropdown .option.active {
    background-color: var(--bg-hover) !important;
    color: var(--output-color) !important;
}

.camera-setup .ts-dropdown .option.selected {
    background-color: var(--accent-dim) !important;
    color: var(--accent-color) !important;
}

/* ND filter inside filter-setup wrapper */
.filter-setup .ts-wrapper {
    flex: 1;
    width: 100%;
}

.filter-setup .ts-wrapper .ts-control {
    background-color: var(--bg-hover) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 4px !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
    min-height: unset !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

.filter-setup .ts-wrapper .ts-control > .item {
    color: var(--output-color) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.filter-setup .ts-wrapper .ts-control::after {
    content: '';
    display: block;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--text-secondary);
    pointer-events: none;
}

.filter-setup .ts-wrapper.dropdown-active .ts-control::after {
    border-top: none;
    border-bottom: 5px solid var(--accent-color);
}

.filter-setup .ts-wrapper .ts-control:hover {
    border-color: var(--accent-color) !important;
}

.filter-setup .ts-wrapper .ts-control > input {
    display: none !important;
}

/* Filter Setup */
.filter-setup {
    width: 100%;
    display: flex;
    align-items: center;
    background-color: var(--bg-tertiary);
    border-radius: 4px;
    padding: var(--spacing-sm);
}

.filter-setup select {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--bg-hover);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--output-color);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    appearance: none;
    transition: all 0.2s ease;
}

.filter-setup select:hover {
    border-color: var(--accent-color);
}

/* ====================================
   LIGHT SETUP
   ==================================== */

.light-setup label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-xs);
}

.light-setup span.editable {
    color: var(--output-color);
    font-size: 14px;
    margin-left: var(--spacing-sm);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 3px;
    transition: background-color 0.2s ease;
    text-transform: none; /* Hodnota (např. "1.0m") nemá být uppercase */
}

.light-setup span.editable:hover {
    background-color: var(--accent-dim);
}

/* Inline editable input - matches span.editable dimensions to prevent layout shift */
.editable-inline-input {
    width: 60px;
    font-size: 14px;
    font-family: inherit;
    color: var(--output-color);
    background: var(--bg-tertiary);
    border: 1px solid var(--accent-color);
    border-radius: 3px;
    padding: 0 4px;
    margin: 0;
    box-sizing: border-box;
    height: 1.3em;
    line-height: 1.3em;
    vertical-align: baseline;
    outline: none;
    -moz-appearance: textfield;
}
.editable-inline-input::-webkit-outer-spin-button,
.editable-inline-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Slider */
.slider {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: var(--bg-tertiary);
    outline: none;
    margin-bottom: var(--spacing-lg);
    -webkit-appearance: none;
    appearance: none;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--output-color);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
}

.slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: var(--shadow-md);
}

.slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--output-color);
    cursor: pointer;
    border: none;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
}

.slider::-moz-range-thumb:hover {
    transform: scale(1.2);
    box-shadow: var(--shadow-md);
}

/* ====================================
   TABS
   ==================================== */

.tab-container {
    border-bottom: 1px solid var(--border-color);
    margin-bottom: var(--spacing-md);
}

.tab-buttons {
    display: flex;
    gap: var(--spacing-xs);
    overflow-x: auto;
}

.tab-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.tab-btn:hover {
    color: var(--text-primary);
    background-color: var(--bg-hover);
}

.tab-btn.active {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}

/* Tab Content */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Light Info - Subtle inline version */
.light-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    margin-top: 0;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 11px;
    color: var(--text-secondary);
    opacity: 0.8;
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 4px 4px;
    background-color: var(--light-info-bg);
}

.light-info .light-info-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.light-info .light-info-item .label {
    color: var(--text-disabled);
    font-weight: 500;
}

.light-info .light-info-item .value {
    color: var(--text-secondary);
    font-weight: 600;
}

.light-info .light-info-separator {
    color: var(--text-disabled);
    margin: 0 var(--spacing-sm);
}

/* Modify Options */
.modify-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.modify-container label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex: 0 0 auto;
    min-width: 100px;
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-md);
}

.modify-container select {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--bg-hover);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--output-color);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    appearance: none;
    transition: all 0.2s ease;
}

.modify-container select:hover {
    border-color: var(--accent-color);
}

/* Categories Container - New Dynamic System */
.categories-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.category-group {
    display: flex;
    align-items: center;
    background-color: var(--bg-tertiary);
    border-radius: 4px;
    padding: var(--spacing-sm);
}

.category-group label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex: 0 0 120px;
    min-width: 120px;
    max-width: 120px;
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-md);
}

select.category-select {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--bg-hover);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--output-color);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    appearance: none;
    transition: all 0.2s ease;
    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='%23a0a0a0' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
}

select.category-select:hover {
    border-color: var(--accent-color);
}

select.category-select:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: none;
}

/* Reset when TomSelect copies .category-select class onto .ts-wrapper div */
.ts-wrapper.category-select {
    border: none !important;
    padding: 0 !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Global TomSelect focus fix */
.ts-wrapper.focus .ts-control {
    box-shadow: none !important;
    outline: none !important;
}

.ts-wrapper .ts-control {
    outline: none !important;
}

/* ====================================
   MODIFY CONTAINER & CATEGORY - TOMSELECT
   ==================================== */

.modify-container .ts-wrapper {
    flex: 1;
    width: 100%;
}

.modify-container .ts-wrapper .ts-control {
    background-color: var(--bg-hover) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 4px !important;
    padding: 4px var(--spacing-md) !important;
    min-height: unset !important;
    height: auto !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
    transition: all 0.2s ease;
    box-shadow: none !important;
}

.modify-container .ts-wrapper .ts-control > .item {
    color: var(--output-color) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}

.modify-container .ts-wrapper .ts-control::after {
    content: '';
    display: block;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--text-secondary);
    pointer-events: none;
}

.modify-container .ts-wrapper.dropdown-active .ts-control::after {
    border-top: none;
    border-bottom: 5px solid var(--accent-color);
}

.modify-container .ts-wrapper .ts-control:hover {
    border-color: var(--accent-color) !important;
}

.modify-container .ts-wrapper.focus .ts-control {
    border-color: var(--accent-color) !important;
    box-shadow: none !important;
}

.modify-container .ts-wrapper .ts-control > input {
    display: none !important;
}

.category-group .ts-wrapper {
    flex: 1;
    width: 100%;
}

.category-group .ts-wrapper .ts-control {
    background-color: var(--bg-hover) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 4px !important;
    padding: 4px var(--spacing-md) !important;
    min-height: unset !important;
    height: auto !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
    transition: all 0.2s ease;
    box-shadow: none !important;
    background-image: none !important;
}

.category-group .ts-wrapper .ts-control > .item {
    color: var(--output-color) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}

.category-group .ts-wrapper .ts-control::after {
    content: '';
    display: block;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--text-secondary);
    pointer-events: none;
}

.category-group .ts-wrapper.dropdown-active .ts-control::after {
    border-top: none;
    border-bottom: 5px solid var(--accent-color);
}

.category-group .ts-wrapper .ts-control:hover {
    border-color: var(--accent-color) !important;
}

.category-group .ts-wrapper.focus .ts-control {
    border-color: var(--accent-color) !important;
    box-shadow: none !important;
}

.category-group .ts-wrapper .ts-control > input {
    display: none !important;
}

/* ====================================
   INPUT GROUPS
   ==================================== */

.input-group {
    display: flex;
    align-items: center;
    background-color: var(--bg-tertiary);
    border-radius: 4px;
    padding: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    margin-bottom: 0;
    overflow: hidden;
    min-width: 0;
}

.input-group label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 100px;
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-xl);
    flex-shrink: 0;
}

.input-group input {
    flex: 1;
    min-width: 0;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--bg-hover);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--output-color);
    font-size: 16px;
    font-weight: 600;
    transition: all 0.2s ease;
}

/* Specific styling for quantity containers in tungsten/hmi/led/bulbs tabs */
/* Make them match modify-container alignment exactly */
.input-group[id*="-tungsten-quantity-container"],
.input-group[id*="-hmi-quantity-container"],
.input-group[id*="-led-quantity-container"],
.input-group[id*="-bulbs-quantity-container"] {
    padding: var(--spacing-sm) !important;
    margin-top: var(--spacing-sm) !important;
    margin-bottom: 0 !important;
}

.input-group[id*="-tungsten-quantity-container"] label,
.input-group[id*="-hmi-quantity-container"] label,
.input-group[id*="-led-quantity-container"] label,
.input-group[id*="-bulbs-quantity-container"] label {
    min-width: 100px !important;
    padding-left: var(--spacing-sm) !important;
    padding-right: var(--spacing-md) !important;
}

.input-group[id*="-tungsten-quantity-container"] input,
.input-group[id*="-hmi-quantity-container"] input,
.input-group[id*="-led-quantity-container"] input,
.input-group[id*="-bulbs-quantity-container"] input {
    flex: 1 !important;
    margin: 0 !important;
}

.input-group input:hover {
    border-color: var(--accent-color);
}

.input-group input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px var(--accent-dim);
}

/* ====================================
   DIFFUSION LINKED-TO (scoped diffusion)
   ==================================== */

/* Full-width row below the tab content. Hidden dynamically when diffusion is set to AMBIENT. */
.diffusion-linked-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
    background-color: var(--bg-tertiary);
    border-radius: 4px;
    padding: var(--spacing-sm);
}

.diffusion-linked-group .diffusion-linked-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 100px;
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-xl);
    flex-shrink: 0;
}

/* Make the TomSelect wrapper fill the remaining space and match input styling */
.diffusion-linked-group .ts-wrapper {
    flex: 1;
    min-width: 0;
}

.diffusion-linked-group .ts-wrapper .ts-control {
    background-color: var(--bg-hover) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 4px !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
    font-size: 14px;
    font-weight: 600;
    color: var(--output-color);
    min-height: 36px;
    transition: all 0.2s ease;
}

.diffusion-linked-group .ts-wrapper .ts-control > .item {
    color: var(--output-color) !important;
    font-weight: 600;
}

.diffusion-linked-group .ts-wrapper .ts-control:hover {
    border-color: var(--accent-color) !important;
}

.diffusion-linked-group .ts-wrapper.focus .ts-control,
.diffusion-linked-group .ts-wrapper.dropdown-active .ts-control {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 3px var(--accent-dim) !important;
}

/* Sublabel showing the underlying light model (e.g. "SkyPanel X") next to the custom name */
.diffusion-linked-sublabel {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.85em;
    margin-left: 6px;
    opacity: 0.75;
}

/* In the selected item (chip), the sublabel sits on the same line and should stay subtle */
.diffusion-linked-group .ts-wrapper .ts-control > .item .diffusion-linked-sublabel {
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
}

/* Remove spinner */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

/* ====================================
   CONTAINER BLOCKS & ADD BUTTONS
   ==================================== */

#lightsContainer,
#diffusionsContainer {
    background-color: transparent;
    border: none;
    box-shadow: none;
    margin-bottom: var(--spacing-lg);
    padding: 0;
}

#lightsContainer:hover,
#diffusionsContainer:hover {
    box-shadow: none;
}

/* Individual light/diffusion items within containers */
.light-block-item,
.diffusion-block-item {
    margin-bottom: var(--spacing-lg);
}

.add-block-btn {
    width: 100%;
    padding: var(--spacing-lg);
    background-color: var(--bg-secondary);
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    transition: all 0.2s ease;
}

.add-block-btn:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

/* ====================================
   RESULT BLOCK - FIXED AT BOTTOM
   ==================================== */

#block-result {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    z-index: 999;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.15);
    background-color: var(--bg-secondary);
    outline: none;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

#block-result.block-selected {
    border-color: var(--border-color);
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.15);
}

/* Result bar color tint (docked) */
#block-result.has-color-tint {
    border-top-color: rgba(var(--rf-tint-color), 0.45);
    box-shadow: 0 -2px 12px rgba(var(--rf-tint-color), 0.2), 0 -2px 6px rgba(0, 0, 0, 0.15);
    background: linear-gradient(
        180deg,
        rgba(var(--rf-tint-color), 0.10) 0%,
        rgba(var(--rf-tint-color), 0.04) 100%
    ), var(--bg-secondary);
}

#block-result.has-color-tint .result-label {
    color: rgba(var(--rf-tint-color), 0.85);
    text-shadow: 0 0 8px rgba(var(--rf-tint-color), 0.2);
}

#block-result.has-color-tint .ambient-result-panel.show {
    border-bottom-color: rgba(var(--rf-tint-color), 0.2);
}

.ambient-result-panel {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    padding: 0 var(--spacing-lg);
    max-width: 800px;
    margin: 0 auto;
    border-bottom: 1px solid transparent;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.3s ease, border-color 0.3s ease;
}

.ambient-result-panel.show {
    max-height: 100px;
    padding: var(--spacing-md) var(--spacing-lg);
    opacity: 1;
    border-bottom-color: var(--border-color);
}

.ambient-mode {
    display: none;
}

.ambient-result-item {
    text-align: center;
}

.result-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    max-width: 800px;
    margin: 0 auto;
}

.result-item {
    text-align: center;
}

.result-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-sm);
}

.result-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--output-color);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.aperture-fraction {
    font-size: 12px;
    position: relative;
    bottom: 10px;
    left: 2px;
    color: var(--output-color);
    opacity: 0.8;
}

/* ====================================
   CONDENSED MODE (user toggle)
   ==================================== */

body.condensed-mode .block {
    margin-bottom: 10px;
}

body.condensed-mode .block-wrapper > .block {
    margin-bottom: 0;
}

body.condensed-mode .block-header {
    padding: 8px 10px;
}

body.condensed-mode .block-content {
    padding: 10px;
}

body.condensed-mode .block-wrapper {
    gap: 8px;
    margin-bottom: 10px;
}

body.condensed-mode .slider {
    margin-bottom: 10px;
}

body.condensed-mode .camera-setup label,
body.condensed-mode .light-setup label {
    margin-bottom: 2px;
    font-size: 10px;
}

body.condensed-mode .camera-setup select {
    padding: 6px 8px;
    font-size: 14px;
}

body.condensed-mode .camera-setup .ts-wrapper .ts-control {
    padding: 6px 8px !important;
    font-size: 14px;
}

body.condensed-mode .tab-container {
    margin-bottom: 8px;
}

body.condensed-mode .tab-btn {
    padding: 6px 8px;
    font-size: 12px;
}

body.condensed-mode .light-setup span.editable {
    font-size: 13px;
}

body.condensed-mode .block-header h3 {
    font-size: 12px;
}

body.condensed-mode .ambient-button {
    padding: 4px 8px;
    font-size: 10px;
}

/* ====================================
   RESPONSIVE DESIGN
   ==================================== */

@media (max-width: 960px) {
    body {
        padding: var(--spacing-md);
        padding-bottom: 120px; /* Initial value, updated dynamically by JS */
        padding-left: 64px; /* Space for side menu (buttons 40px + 12px left + 12px gap) */
    }
    
    .add-button-container {
        top: var(--spacing-md);
        left: var(--spacing-md);
    }
    
    .edit-layout-button {
        top: calc(var(--spacing-md) + 48px);
        left: var(--spacing-md);
    }
    
    .reset-app-button {
        top: calc(var(--spacing-md) + 96px);
        left: var(--spacing-md);
    }
    
    .export-import-button {
        top: calc(var(--spacing-md) + 144px);
        left: var(--spacing-md);
    }
    
    .settings-button {
        top: calc(var(--spacing-md) + 192px);
        left: var(--spacing-md);
    }
    
    .hub-button {
        top: calc(var(--spacing-md) + 240px);
        left: var(--spacing-md);
    }
    
    .bottom-fixed-buttons {
        left: var(--spacing-md);
    }
    
    /* Keep menu to the right on mobile too */
    .add-options-menu {
        left: 48px;
        top: 0;
    }
    
    /* Keep the invisible bridge on mobile too */
    .add-button-container::after {
        content: '';
        position: absolute;
        left: 40px;
        top: 0;
        width: 8px;
        height: 40px;
        background: transparent;
    }
    
    .layout-controls {
        top: var(--spacing-md);
        right: var(--spacing-md);
        flex-direction: column;
    }
    
    .modal-content {
        width: calc(100% - 32px);
        margin: 0;
        max-height: calc(100vh - 32px);
    }
    
    /* KEEP camera setup horizontal - removed this line that was forcing single column */
    /* .camera-setup-grid {
        grid-template-columns: 1fr;
    } */
    
    /* KEEP result values horizontal on mobile */
    .result-container {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-sm);
        padding: var(--spacing-md);
    }
    
    .result-label {
        font-size: 10px;
    }
    
    .result-value {
        font-size: 20px;
    }
    
    .color-options {
        flex-wrap: wrap;
    }
}

@media (max-width: 900px) {
    /* Hide Edit Layout button on mobile */
    .edit-layout-button {
        display: none;
    }

    /* Hide Floor Plan button on mobile */
    .floorplan-toggle-button {
        display: none;
    }

    /* Hide Fullscreen button on mobile */
    .fullscreen-button {
        display: none;
    }

    /* Hide Result detach/float button on mobile */
    .result-detach-button {
        display: none !important;
    }

    /* Hide tooltips on mobile */
    .tooltip-el {
        display: none !important;
    }
    
    /* Move Reset button up to fill the gap */
    .reset-app-button {
        top: calc(var(--spacing-md) + 48px);
    }
    
    /* Move Export/Import button up */
    .export-import-button {
        top: calc(var(--spacing-md) + 96px);
    }
    
    /* Move Settings button up */
    .settings-button {
        top: calc(var(--spacing-md) + 144px);
    }
    
    /* Move Hub button up */
    .hub-button {
        top: calc(var(--spacing-md) + 192px);
    }
}

@media (max-width: 900px) {
    /* Hide Edit Layout button in settings modal too */
    .edit-layout-btn {
        display: none !important;
    }

    /* ---- Condensed blocks for mobile ---- */
    .block {
        margin-bottom: 10px;
    }

    .block-header {
        padding: 8px 10px;
    }

    .block-content {
        padding: 10px;
    }

    .block-wrapper {
        flex-direction: column;
        gap: 8px;
        margin-bottom: 10px;
    }

    /* Fix category-group label overflow on mobile */
    .category-group {
        flex-wrap: wrap;
    }

    .category-group label {
        flex: 0 0 auto;
        min-width: auto;
        max-width: 100%;
    }

    /* Fix modify-container label overflow on mobile */
    .modify-container label {
        min-width: auto;
    }

    /* Fix input-group overflow on mobile */
    .input-group label {
        min-width: 70px;
        padding-right: var(--spacing-sm);
    }

    /* Settings modal: compact spacing */
    .settings-section {
        margin-bottom: var(--spacing-md);
    }

    .modal-body {
        padding: var(--spacing-md);
    }

    .color-options {
        gap: var(--spacing-sm);
        flex-wrap: nowrap;
    }

    .color-btn {
        width: 34px;
        height: 34px;
    }

    /* PDF Settings buttons - compact on mobile */
    .pdf-settings-actions {
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }

    .pdf-settings-actions .cancel-btn,
    .pdf-settings-actions .confirm-btn,
    .pdf-settings-actions .reset-pdf-btn {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 12px;
    }

    .pdf-settings-actions .confirm-btn,
    .pdf-settings-actions .cancel-btn {
        flex: 1;
        min-width: 0;
        text-align: center;
    }

    .slider {
        margin-bottom: 10px;
    }

    .camera-setup label {
        margin-bottom: 2px;
        font-size: 9px;
        letter-spacing: 0.3px;
    }

    .light-setup label {
        margin-bottom: 2px;
        font-size: 10px;
    }

    .camera-setup select {
        padding: 6px 8px;
        font-size: 14px;
    }

    .camera-setup .ts-wrapper .ts-control {
        padding: 6px 8px !important;
        font-size: 14px;
    }

    .tab-container {
        margin-bottom: 8px;
    }

    .tab-btn {
        padding: 6px 8px;
        font-size: 12px;
    }

    .light-setup span.editable {
        font-size: 13px;
    }

    .block-header h3 {
        font-size: 12px;
    }

    .ambient-button {
        padding: 4px 8px;
        font-size: 10px;
    }

    .light-info {
        flex-wrap: wrap;
    }

    /* Hide entire Custom Library section on mobile */
    #settingsCustomLibrary {
        display: none !important;
    }

    /* Hide condensed mode toggle on mobile (always condensed) */
    .condensed-toggle-row {
        display: none !important;
    }

    /* Smaller block titles on mobile (!important needed to override condensed-mode) */
    .block-header h3.light-title,
    .block-header h3.diffusion-title,
    .block-header h3.ambient-title {
        font-size: 9px !important;
    }

    /* Hide inline add (+) button in block headers on mobile */
    .add-inline-button {
        display: none !important;
    }
}

@media (max-width: 480px) {
    body {
        padding-left: 64px; /* Consistent gap: buttons 40px + 12px left + 12px gap */
    }
    
    .result-value {
        font-size: 18px;
    }
    
    .result-label {
        font-size: 9px;
    }
    
    .aperture-fraction {
        font-size: 10px;
        bottom: 8px;
    }
    
    .light-info {
        flex-wrap: wrap;
    }
}

/* ====================================
   TOM SELECT OVERRIDES
   ==================================== */

.ts-wrapper {
    position: relative;
}

.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: 4px;
    transition: all 0.2s ease;
}

/* Remove bottom border-radius when light-info follows */
.ts-wrapper:has(+ .light-info[style*="flex"]) .ts-control,
.ts-wrapper:has(+ .light-info:not([style*="none"])) .ts-control {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.ts-wrapper.single .ts-control:hover,
.ts-wrapper.multi .ts-control:hover {
    border-color: var(--accent-color);
}

.ts-wrapper.focus .ts-control {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px var(--accent-dim);
}

.ts-dropdown {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-lg);
    border-radius: 4px;
    margin-top: 4px;
    position: absolute !important;
    z-index: 10000 !important;
}

/* Dropup variant - opens above the control */
.ts-dropdown.ts-dropup {
    margin-top: 0;
    margin-bottom: 4px;
    box-shadow: 0 -4px 12px -2px rgba(0, 0, 0, 0.3);
}

/* Tom Select - Optgroup headers (category dividers) */
.ts-dropdown .optgroup-header {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 6px var(--spacing-md) !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--border-color) !important;
    border-top: none !important;
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Separator between optgroups - thin line on top */
.ts-dropdown .optgroup .option {
    padding-left: var(--spacing-xl);
}

/* Tom Select dropdown list items */
.ts-dropdown .option {
    color: var(--text-primary);
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--bg-secondary) !important;
}

/* Light option with right-aligned watt info */
.ts-dropdown .light-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
}

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

.ts-dropdown .light-watt {
    flex-shrink: 0;
    color: var(--text-secondary);
    font-size: 0.85em;
    font-variant-numeric: tabular-nums;
}

.ts-dropdown .light-custom {
    color: var(--accent-color);
}

/* Light option in selected input field - absolute positioned watt */
.ts-wrapper.single .ts-control {
    position: relative;
}

.ts-wrapper.single .ts-control .item .light-option {
    display: inline;
}

.ts-wrapper.single .ts-control .item .light-watt {
    position: absolute;
    right: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 0.85em;
    font-variant-numeric: tabular-nums;
}

.ts-wrapper.single .ts-control .item .light-custom {
    color: var(--accent-color);
}

/* Hide watt when input is focused */
.ts-wrapper.single.focus .ts-control .item .light-watt {
    display: none;
}

/* Hover state in list */
.ts-dropdown .option:hover,
.ts-dropdown .option.active {
    background-color: var(--bg-hover) !important;
    color: var(--text-primary);
}

/* Selected/current item in list */
.ts-dropdown .option.selected {
    background-color: var(--accent-dim) !important;
    color: var(--accent-color);
}

.ts-dropdown-content {
    max-height: 200px !important;
    overflow-y: auto;
    box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.25) !important;
    border: 1px solid var(--border-color) !important;
}

.ts-dropup .ts-dropdown-content {
    box-shadow: 0 -4px 8px -2px rgba(0, 0, 0, 0.25) !important;
}

/* Scrollbar styling for dropdown - thin and subtle */
.ts-dropdown-content::-webkit-scrollbar-track {
    background-color: var(--bg-secondary);
}

.ts-dropdown-content::-webkit-scrollbar {
    width: 5px;
    background-color: var(--bg-secondary);
}

.ts-dropdown-content::-webkit-scrollbar-thumb {
    background-color: var(--bg-hover);
    border-radius: 3px;
}

.ts-dropdown-content::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-disabled);
}

/* ====================================
   ANIMATIONS
   ==================================== */

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.pulse {
    animation: pulse 2s infinite;
}

/* CRITICAL - Quantity container overrides - MUST be at end of file */
.input-group[id$="-tungsten-quantity-container"],
.input-group[id$="-hmi-quantity-container"],
.input-group[id$="-led-quantity-container"],
.input-group[id$="-bulbs-quantity-container"] {
    padding: 8px !important;
}

.input-group[id$="-tungsten-quantity-container"] label,
.input-group[id$="-hmi-quantity-container"] label,
.input-group[id$="-led-quantity-container"] label,
.input-group[id$="-bulbs-quantity-container"] label {
    min-width: 100px !important;
    padding-left: 8px !important;
    padding-right: 12px !important;
}

.input-group[id$="-tungsten-quantity-container"] input,
.input-group[id$="-hmi-quantity-container"] input,
.input-group[id$="-led-quantity-container"] input,
.input-group[id$="-bulbs-quantity-container"] input {
    flex: 1 !important;
    margin: 0 !important;
}
/* AGGRESSIVE FIX - Force quantity containers to match modify-container */
.input-group[id$="-tungsten-quantity-container"] label,
.input-group[id$="-hmi-quantity-container"] label,
.input-group[id$="-led-quantity-container"] label,
.input-group[id$="-bulbs-quantity-container"] label {
    min-width: 100px !important;
    max-width: 120px !important;
    flex-shrink: 0 !important;
    padding-left: 8px !important;
    padding-right: 12px !important;
}

.input-group[id$="-tungsten-quantity-container"] input,
.input-group[id$="-hmi-quantity-container"] input,
.input-group[id$="-led-quantity-container"] input,
.input-group[id$="-bulbs-quantity-container"] input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
}

/* FORCE FULL WIDTH on quantity containers */
.input-group[id$="-tungsten-quantity-container"],
.input-group[id$="-hmi-quantity-container"],
.input-group[id$="-led-quantity-container"],
.input-group[id$="-bulbs-quantity-container"] {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ====================================
   ADD LIGHT TO LIBRARY MODAL
   ==================================== */

.modal-content.add-light-modal {
    max-width: 550px;
    max-height: 70vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-content.add-light-modal .modal-body {
    display: flex;
    flex-direction: column;
    padding: 0;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.add-light-form-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--spacing-xl);
    padding-bottom: var(--spacing-md);
    min-height: 0; /* Important for flex shrinking */
}

/* Scrollbar styling - thin and subtle */
.add-light-form-scroll {
    overflow-y: scroll;
}

.add-light-form-scroll::-webkit-scrollbar-track {
    background-color: var(--bg-primary);
}

.add-light-form-scroll::-webkit-scrollbar {
    width: 5px;
    background-color: var(--bg-primary);
}

.add-light-form-scroll::-webkit-scrollbar-thumb {
    background-color: var(--bg-hover);
    border-radius: 3px;
}

.add-light-form-scroll::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-disabled);
}

.add-light-modal .add-light-actions {
    padding: var(--spacing-lg) var(--spacing-xl);
    margin-top: 0;
    flex-shrink: 0;
    background: var(--bg-secondary);
}

.add-light-form {
    display: flex;
    flex-direction: column;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-lg);
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-group label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-group input[type="text"],
.form-group input[type="number"] {
    width: 100%;
    box-sizing: border-box;
    padding: var(--spacing-md);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    transition: all 0.2s ease;
}

.form-group select {
    width: 100%;
    padding: var(--spacing-md);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primaryr);
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: all 0.2s ease;
}

.form-group select:hover {
    border-color: var(--accent-color);
}

.form-group input[type="text"]:focus,
.form-group input[type="number"]:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--accent-color);
}

.form-group input[type="text"]:hover,
.form-group input[type="number"]:hover {
    border-color: var(--accent-color);
}

.form-group input::placeholder {
    color: var(--text-disabled);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.form-row.form-row-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.form-row .form-group {
    margin-bottom: 0;
    min-width: 0;
}

/* Tag badges in light selects */
.light-tag-badge {
    display: inline-flex;
    align-items: center;
    font-size: 9px;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 3px;
    vertical-align: middle;
    margin-left: 4px;
    line-height: 1;
    position: relative;
    top: -1px;
}
.light-tag-new {
    background-color: rgba(74,255,154,0.15);
    color: #4aff9a;
    border: 1px solid rgba(74,255,154,0.3);
}
.light-tag-measured {
    background-color: var(--accent-dim, rgba(30,136,229,0.15));
    color: var(--accent-color, #1e88e5);
    border: 1px solid currentColor;
    border-color: color-mix(in srgb, var(--accent-color, #1e88e5) 50%, transparent);
}

/* Toggle Categories Button - styled like add-category-btn */
.toggle-categories-btn {
    width: 100%;
    padding: var(--spacing-md);
    background-color: transparent;
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    transition: all 0.2s ease;
    margin-bottom: var(--spacing-lg);
}

.toggle-categories-btn:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background-color: var(--accent-dim);
}

.toggle-categories-btn.active {
    border-style: solid;
    border-color: var(--accent-color);
    color: var(--accent-color);
    background-color: var(--accent-dim);
}

.toggle-categories-btn svg {
    transition: transform 0.2s ease;
}

.toggle-categories-btn.active svg {
    transform: rotate(45deg);
}

/* Categories Section */
.categories-section {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
}

.categories-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.category-item {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
}

.category-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.category-header input {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.category-header input:hover {
    border-color: var(--accent-color);
}

.category-header input:focus {
    outline: none;
    border-color: var(--accent-color);
}

.category-header input::placeholder {
    color: var(--text-disabled);
}

/* Empty category name warning */
.category-header input.empty-warning,
#categoriesList .category-name.empty-warning {
    border-color: #ff6b6b !important;
    background-color: rgba(255, 107, 107, 0.1);
    animation: shake 0.3s ease;
}

.category-header input.empty-warning::placeholder,
#categoriesList .category-name.empty-warning::placeholder {
    color: #ff6b6b;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.remove-category-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    opacity: 0.6;
}

.remove-category-btn:hover {
    background-color: #ff4a4a;
    border-color: #ff4a4a;
    color: white;
    opacity: 1;
}

.category-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-left: 0;
}

.option-row {
    display: grid;
    grid-template-columns: 1fr 1fr 28px;
    gap: var(--spacing-sm);
    align-items: center;
}

.option-row input {
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font-size: 13px;
    transition: all 0.2s ease;
}

.option-row input:hover {
    border-color: var(--accent-color);
}

.option-row input:focus {
    outline: none;
    border-color: var(--accent-color);
}

.option-row input::placeholder {
    color: var(--text-disabled);
}

.remove-option-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    opacity: 0.6;
}

.remove-option-btn:hover {
    background-color: #ff4a4a;
    border-color: #ff4a4a;
    color: white;
    opacity: 1;
}

.add-option-row {
    margin-top: var(--spacing-xs);
}

.add-option-link {
    background: none;
    border: none;
    color: var(--accent-color);
    font-size: 12px;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.add-option-link:hover {
    text-decoration: underline;
}

.add-category-btn {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--bg-secondary);
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    transition: all 0.2s ease;
}

.add-category-btn:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background-color: var(--accent-dim);
}

.form-info {
    padding: var(--spacing-sm);
    background-color: var(--bg-tertiary);
    border-radius: 4px;
}

.form-info p {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
}

.add-light-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: flex-end;
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
}

/* Library Type Toggle - Tab Style */
.library-type-toggle {
    display: flex;
    gap: 0;
    margin-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
}

.library-type-toggle.manage-toggle {
    margin-bottom: var(--spacing-lg);
}

.library-type-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: -1px;
}

.library-type-btn:hover {
    color: var(--text-primary);
}

.library-type-btn.active {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}

.library-type-btn svg {
    flex-shrink: 0;
}

.form-hint {
    display: block;
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* ====================================
   MANAGE CUSTOM LIGHTS MODAL
   ==================================== */

.manage-lights-modal {
    max-width: 600px;
}

.custom-lights-list {
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: var(--spacing-lg);
}

.no-lights-message {
    text-align: center;
    color: var(--text-secondary);
    padding: var(--spacing-xl);
}

.custom-light-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-sm);
}

.custom-light-info {
    flex: 1;
}

.custom-light-name {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.custom-light-details {
    font-size: 12px;
    color: var(--text-secondary);
}

.custom-light-actions {
    display: flex;
    gap: var(--spacing-xs);
}

.delete-light-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.5;
}

.delete-light-btn:hover {
    background-color: #ff4a4a;
    border-color: #ff4a4a;
    color: white;
    opacity: 1;
}

.manage-lights-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
}

.export-custom-btn,
.import-custom-btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    transition: all 0.2s ease;
}

.export-custom-btn:hover,
.import-custom-btn:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.export-custom-btn svg,
.import-custom-btn svg {
    flex-shrink: 0;
}

/* Settings buttons row - side by side */
.settings-buttons-row {
    display: flex;
    gap: var(--spacing-md);
}

.settings-buttons-row .edit-layout-btn {
    flex: 1;
}

/* Edit light button */
.edit-light-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.edit-light-btn:hover {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--bg-primary);
}

/* Duplicate light button */
.duplicate-light-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.5;
}

.duplicate-light-btn:hover {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--bg-primary);
    opacity: 1;
}

@media (max-width: 480px) {
    .form-row {
        grid-template-columns: 1fr;
    }
    .form-row.form-row-4 {
        grid-template-columns: 1fr 1fr;
    }
    
    .option-row {
        grid-template-columns: 1fr 80px auto;
    }
}

/* ====================================
   CUSTOM TOAST NOTIFICATION
   ==================================== */

.custom-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-md) var(--spacing-xl);
    color: var(--text-primary);
    font-size: 14px;
    box-shadow: var(--shadow-sm);
    z-index: 3000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.custom-toast.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* ====================================
   CUSTOM CONFIRM DIALOG
   ==================================== */

.custom-confirm-modal {
    max-width: 400px;
}

.custom-confirm-modal .modal-body p {
    color: var(--text-primary);
    line-height: 1.6;
    margin-bottom: var(--spacing-xl);
}

.confirm-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: flex-end;
}

/* Delete action button in confirm dialog - same style as confirm button */
.delete-action-btn {
    padding: var(--spacing-md) var(--spacing-xl);
    background-color: var(--accent-color);
    border: 1px solid var(--accent-color);
    border-radius: var(--border-radius);
    color: var(--bg-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.delete-action-btn:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
    box-shadow: var(--shadow-sm);
}

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

/* Modal scrollbar styling - thin and subtle */
.modal-content::-webkit-scrollbar-track {
    background-color: var(--bg-primary);
}

.modal-content::-webkit-scrollbar {
    width: 5px;
    background-color: var(--bg-primary);
}

.modal-content::-webkit-scrollbar-thumb {
    background-color: var(--bg-hover);
    border-radius: 3px;
}

.modal-content::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-disabled);
}

/* Custom lights list scrollbar - thin and subtle (same as modal-content) */
.custom-lights-list {
    overflow-y: auto;
}

.custom-lights-list::-webkit-scrollbar-track {
    background-color: var(--bg-primary);
}

.custom-lights-list::-webkit-scrollbar {
    width: 5px;
    background-color: var(--bg-primary);
}

.custom-lights-list::-webkit-scrollbar-thumb {
    background-color: var(--bg-hover);
    border-radius: 3px;
}

.custom-lights-list::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-disabled);
}

/* ====================================
   NESTED MODAL STYLES
   ==================================== */
.nested-modal {
    z-index: 2750;
}

.nested-modal .modal-content {
    max-width: 420px;
    max-height: 60vh;
    display: flex;
    flex-direction: column;
}

.nested-modal .modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--spacing-lg);
    min-height: 0;
}

.nested-modal .modal-footer {
    padding: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
}

/* ====================================
   ADVANCED CATEGORY OPTIONS (Simple/Distance/Nested)
   ==================================== */
.option-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.option-type-toggle { 
    display: flex; 
    gap: 2px; 
    background: var(--bg-tertiary);
    border-radius: 4px;
    padding: 2px;
    width: fit-content;
    margin-left: 0;
}

.option-type-btn {
    padding: 4px 8px;
    font-size: 10px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.15s ease;
}

.option-type-btn:hover { 
    color: var(--text-primary); 
}

.option-type-btn.active { 
    background: var(--accent-color); 
    color: var(--bg-primary);
}

.option-inputs-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}

.option-row .option-name {
    flex-shrink: 0;
    width: 120px;
    padding: var(--spacing-sm);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font-size: 13px;
}

.option-row .option-name:focus {
    outline: none;
    border-color: var(--accent-color);
}

.option-value-container {
    flex: 1;
    min-width: 150px;
}

.simple-value-input { 
    display: block;
    width: 100%;
    padding: var(--spacing-sm);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font-size: 13px;
}

.simple-value-input:focus {
    outline: none;
    border-color: var(--accent-color);
}

.distance-table-input { 
    display: none; 
}

.option-row.distance-mode .simple-value-input { 
    display: none; 
}

.option-row.distance-mode .distance-table-input { 
    display: block; 
}

.distance-points { 
    display: flex; 
    flex-direction: column; 
    gap: 4px;
}

.distance-point {
    display: flex;
    align-items: center;
    gap: 4px;
}

.distance-point input {
    padding: 4px 6px;
    font-size: 11px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    color: var(--text-primary);
}

.distance-point .point-distance {
    width: 50px;
}

.distance-point .point-factor {
    width: 90px;
}

.distance-point input:focus {
    outline: none;
    border-color: var(--accent-color);
}

.distance-point span {
    font-size: 10px;
    color: var(--text-secondary);
}

.distance-point .remove-point-btn {
    padding: 2px 6px;
    font-size: 12px;
    background: transparent;
    border: none;
    color: var(--text-disabled);
    cursor: pointer;
}

.distance-point .remove-point-btn:hover { 
    color: var(--error-color, #ff6b6b); 
}

.add-point-btn {
    padding: 3px 8px;
    font-size: 10px;
    background: transparent;
    border: 1px dashed var(--border-color);
    border-radius: 3px;
    color: var(--text-secondary);
    cursor: pointer;
    margin-top: 4px;
    width: fit-content;
}

.add-point-btn:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.option-row .remove-option-btn {
    padding: 2px 6px;
    font-size: 14px;
    background: transparent;
    border: none;
    color: var(--text-disabled);
    cursor: pointer;
    flex-shrink: 0;
    align-self: center;
}

.option-row .remove-option-btn:hover {
    color: var(--error-color, #ff6b6b);
}

/* Nested category indicator */
.nested-indicator {
    display: none;
}

.option-row.nested-mode .simple-value-input,
.option-row.nested-mode .distance-table-input {
    display: none !important;
}

.option-row.nested-mode .nested-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 11px;
    color: var(--text-secondary);
}

.option-row.nested-mode .nested-indicator .edit-nested-btn {
    padding: 4px 10px;
    font-size: 10px;
    background: var(--accent-color);
    border: none;
    border-radius: 3px;
    color: var(--bg-primary);
    cursor: pointer;
}

.option-row.nested-mode .nested-indicator .nested-count {
    color: var(--accent-color);
    font-weight: 600;
}

/* Nested modal option row style overrides */
.nested-modal .option-type-toggle {
    margin-left: 0;
}

.nested-modal .option-row {
    margin-bottom: 16px;
}

.nested-modal .option-row:last-child {
    margin-bottom: 0;
}

.nested-modal .option-name[readonly] {
    pointer-events: none;
    border-color: transparent !important;
    background: var(--bg-tertiary) !important;
}

/* ====================================
   AMBIENT PRESETS STYLES
   ==================================== */
.ambient-presets-container {
    max-height: 200px;
    overflow-y: auto;
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

.ambient-presets-container::-webkit-scrollbar-track {
    background-color: var(--bg-secondary);
    border-radius: 3px;
}

.ambient-presets-container::-webkit-scrollbar {
    width: 5px;
    background-color: var(--bg-secondary);
}

.ambient-presets-container::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 3px;
}

.ambient-presets-container::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-disabled);
}

.ambient-presets-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ambient-preset-btn {
    padding: 6px 12px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.ambient-preset-btn:hover:not(.active) {
    background-color: var(--bg-hover);
    border-color: var(--accent-color);
    color: var(--text-primary);
}

.ambient-preset-btn.active {
    border-color: var(--accent-color);
    background-color: var(--accent-dim);
    color: var(--accent-color);
    font-weight: 600;
}

/* Divider in ambient presets grid */
.ambient-preset-divider {
    flex-basis: 100%;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent);
    margin: var(--spacing-xs) 0;
}

.ambient-presets-label {
    font-size: 10px;
    color: var(--text-disabled);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-xs);
}

/* Hide ambient presets when there are none */
.ambient-presets-container:empty {
    display: none;
}

.ambient-presets-container.hidden {
    display: none;
}

/* ====================================
   DIFFUSION DISTANCE PRESETS
   ==================================== */

/* Distance preset buttons container (under tom-select in preset tab) */
.diff-dist-presets-container {
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

.diff-dist-presets-container.hidden {
    display: none;
}

.diff-dist-presets-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.diff-dist-preset-btn {
    padding: 6px 12px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.diff-dist-preset-btn:hover:not(.active) {
    background-color: var(--bg-hover);
    border-color: var(--accent-color);
    color: var(--text-primary);
}

.diff-dist-preset-btn.active {
    border-color: var(--accent-color);
    background-color: var(--accent-dim);
    color: var(--accent-color);
    font-weight: 600;
}

/* Custom tab distance presets section */
.diff-dist-custom-section {
    margin-top: var(--spacing-md);
}

.diff-dist-add-btn {
    padding: 5px 10px;
    font-size: 10px;
    background: transparent;
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    text-align: center;
}

.diff-dist-add-btn:hover,
.diff-dist-add-btn.active {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.diff-dist-add-btn.active {
    border-style: solid;
    background: var(--accent-dim, rgba(99,102,241,0.1));
}

.diff-dist-editor {
    margin-top: var(--spacing-sm);
}

.diff-dist-editor.hidden {
    display: none;
}

.diff-dist-rows,
.diff-dist-rows-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.diff-dist-row {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
}

.diff-dist-row .dd-label {
    width: 100px;
    padding: 4px 6px;
    font-size: 11px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    color: var(--text-primary);
    transition: border-color 0.2s ease;
}

.diff-dist-row input.dd-label:hover {
    border-color: var(--accent-color);
}

 .diff-dist-row input.dd-label::placeholder {
    color: var(--text-disabled);
}

.diff-dist-row .dd-arrow {
    font-size: 10px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.diff-dist-row .dd-value {
    width: 70px;
    padding: 4px 6px;
    font-size: 11px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    color: var(--text-primary);
    transition: border-color 0.2s ease;
}

.diff-dist-row input.dd-value:hover {
    border-color: var(--accent-color);
}

.diff-dist-row input.dd-value::placeholder {
    color: var(--text-disabled);
}

.diff-dist-row input:focus {
    outline: none;
    border-color: var(--accent-color);
}

.diff-dist-row .dd-remove-btn {
    padding: 2px 6px;
    font-size: 14px;
    background: transparent;
    border: none;
    color: var(--text-disabled);
    cursor: pointer;
    flex-shrink: 0;
}

.diff-dist-row .dd-remove-btn:hover {
    color: var(--error-color, #ff6b6b);
}

.diff-dist-add-point-btn {
    padding: 3px 8px;
    font-size: 10px;
    background: transparent;
    border: 1px dashed var(--border-color);
    border-radius: 3px;
    color: var(--text-secondary);
    cursor: pointer;
    margin: 4px auto 0;
    width: fit-content;
    display: block;
}

.diff-dist-add-point-btn:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

/* Custom diffusion form (Add to Library modal) distance section */
.custom-diff-dist-section {
    margin-top: 12px;
    border-top: 1px solid var(--border-color);
    padding-top: 12px;
    text-align: center;
}

.custom-diff-dist-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.custom-diff-dist-header label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.custom-diff-dist-toggle-btn {
    padding: 4px 10px;
    font-size: 10px;
    background: transparent;
    border: 1px dashed var(--border-color);
    border-radius: 3px;
    color: var(--text-secondary);
    cursor: pointer;
}

.custom-diff-dist-toggle-btn:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.custom-diff-dist-toggle-btn.active {
    border-style: solid;
    border-color: var(--accent-color);
    color: var(--accent-color);
    background: var(--accent-dim, rgba(99,102,241,0.1));
}

/* Floorplan diffusion distance presets */
.fp-diff-dist-presets {
    padding: 6px 8px;
    margin: 0 0 2px 0;
}

/* Floorplan panel range input fix - prevent pointer passthrough during drag */
.fp-panel {
    isolation: isolate;
    z-index: 50 !important;
    position: absolute;
}
.fp-panel input[type="range"] {
    position: relative;
    z-index: 10;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: auto !important;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background: var(--bg-tertiary, #1a1a2e);
    height: 6px;
    border-radius: 3px;
    outline: none;
    margin: 8px 0;
}
.fp-panel input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--output-color, #6366f1);
    cursor: pointer;
    border: 2px solid var(--bg-primary, #0a0a1a);
    box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.fp-panel input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--output-color, #6366f1);
    cursor: pointer;
    border: 2px solid var(--bg-primary, #0a0a1a);
    box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.fp-panel input[type="range"]::-moz-range-track {
    background: var(--bg-tertiary, #1a1a2e);
    height: 6px;
    border-radius: 3px;
    border: none;
}
.fp-panel-body {
    position: relative;
    z-index: 1;
    pointer-events: auto !important;
}
#fpCanvas {
    z-index: 0 !important;
}
/* Block canvas pointer events while a panel slider is being dragged */
#fpCanvas.slider-active {
    pointer-events: none !important;
}

.fp-diff-dist-presets.hidden {
    display: none;
}

.fp-diff-dist-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.fp-diff-dist-btn {
    padding: 4px 10px;
    background-color: var(--bg-secondary, #1a1a2e);
    border: 1px solid var(--border-color, #2a2a4a);
    border-radius: 4px;
    color: var(--text-secondary, #8888aa);
    font-size: 10px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.fp-diff-dist-btn:hover:not(.active) {
    background-color: var(--bg-hover, #252545);
    border-color: var(--accent-color, #6366f1);
    color: var(--text-primary, #e0e0e0);
}

.fp-diff-dist-btn.active {
    border-color: var(--accent-color, #6366f1);
    background-color: var(--accent-dim, rgba(99,102,241,0.15));
    color: var(--accent-color, #6366f1);
    font-weight: 600;
}

/* ====================================
   ANNOUNCEMENT MODAL
   ==================================== */

.announcement-modal {
    max-width: 600px;
    max-height: 80vh;
}

.announcement-body {
    padding: var(--spacing-xl) !important;
}

.announcement-content {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.7;
}

.announcement-content h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 var(--spacing-sm);
    color: var(--text-primary);
}

.announcement-content ul,
.announcement-content ol {
    padding-left: 20px;
    margin: var(--spacing-sm) 0;
}

.announcement-content li {
    margin-bottom: var(--spacing-xs);
}

.announcement-content p {
    margin-bottom: var(--spacing-sm);
}

.announcement-content a {
    color: var(--accent-color);
    text-decoration: underline;
}

.announcement-content img {
    max-width: 100%;
    border-radius: 6px;
    margin: var(--spacing-sm) 0;
}

.announcement-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-xl) var(--spacing-lg);
    border-top: 1px solid var(--border-color);
    flex-wrap: wrap;
    gap: 10px;
}

/* Small screens: stack announcement footer vertically */
@media (max-width: 400px) {
    .announcement-footer {
        flex-direction: column;
        align-items: stretch;
        padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
        gap: 10px;
    }
    .announcement-meta {
        justify-content: center;
        text-align: center;
        flex-wrap: wrap;
    }
    .announcement-footer .confirm-btn {
        width: 100%;
        text-align: center;
    }
}

.announcement-date {
    font-size: 11px;
    color: var(--text-disabled);
}

.announcement-meta {
    display: flex;
    align-items: center;
}

.announcement-author {
    font-size: 11px;
    color: var(--text-disabled);
}

/* Announcements History Modal */
.announcements-history-modal {
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.announcements-history-body {
    overflow-y: auto;
    padding: 0 !important;
}

.announcements-history-body::-webkit-scrollbar {
    width: 5px;
}
.announcements-history-body::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}
.announcements-history-body::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.announcement-history-item {
    padding: var(--spacing-xl);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.announcement-history-item.visible {
    opacity: 1;
    transform: translateY(0);
}

.announcement-history-item + .announcement-history-item {
    border-top: 1px solid var(--border-color);
}

.announcement-history-item .announcement-history-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.announcement-history-item .announcement-content {
    margin-bottom: var(--spacing-md);
}

.announcement-history-item .announcement-history-meta {
    display: flex;
    align-items: center;
    font-size: 11px;
    color: var(--text-disabled);
}

.announcements-history-empty {
    padding: var(--spacing-xl);
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
}

/* ====================================
   COLOR TAG SYSTEM
   ==================================== */

/* Color stripe at top of block header */
.block-header .color-tag-stripe {
    position: absolute;
    top: 2px;
    left: 0;
    right: 0;
    height: 3px;
    margin: 0 auto;
    width: calc(100% - 10px);
    border-radius: var(--border-radius);
    z-index: 10;
    pointer-events: none;
    transition: background-color 0.2s ease;
}

/* Context menu for color selection */
.block-context-menu {
    position: fixed;
    z-index: 10050;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    display: none;
    min-width: 200px;
}

.block-context-menu.visible {
    display: block;
    animation: colorMenuFadeIn 0.06s ease;
}

@keyframes colorMenuFadeIn {
    from { opacity: 0; transform: scale(0.97); }
    to { opacity: 1; transform: scale(1); }
}

/* Context menu items */
.ctx-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-primary);
    transition: background 0.1s ease;
    user-select: none;
}

.ctx-menu-item:hover {
    background: var(--bg-hover);
}

.ctx-menu-item svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.ctx-menu-item:hover svg {
    opacity: 1;
}

.ctx-menu-item.ctx-disabled {
    opacity: 0.35;
    pointer-events: none;
    cursor: default;
}

.ctx-menu-divider {
    height: 1px;
    background: var(--border-color);
    margin: 4px 8px;
}

.ctx-menu-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    padding: 4px 12px 4px;
}

/* Color tag swatches (inside context menu) */
.block-context-menu .color-tag-swatches {
    display: flex;
    gap: 4px;
    padding: 4px 8px 6px;
    align-items: center;
}

.color-tag-swatch {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease;
    position: relative;
    flex-shrink: 0;
    padding: 3px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.color-tag-swatch .swatch-fill {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.color-tag-swatch:hover {
    transform: scale(1.1);
    border-color: var(--swatch-color, var(--text-primary));
}

.color-tag-swatch.active {
    border-color: var(--swatch-color, var(--text-primary));
}

/* "No color" swatch */
.color-tag-swatch.no-color {
    background: transparent;
    border-color: var(--border-color);
}

.color-tag-swatch.no-color .swatch-fill {
    background: var(--bg-tertiary);
    position: relative;
}

.color-tag-swatch.no-color .swatch-fill::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 2px;
    background: var(--text-secondary);
    border-radius: 1px;
    transform: translate(-50%, -50%) rotate(-45deg);
}

.color-tag-swatch.no-color:hover {
    border-color: var(--text-primary);
}

/* Custom color picker wrapper */
.color-tag-custom-wrapper {
    position: relative;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    padding: 3px;
    box-sizing: border-box;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.color-tag-custom-swatch {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.color-tag-custom-swatch svg {
    width: 10px;
    height: 10px;
    fill: var(--text-secondary);
    flex-shrink: 0;
}

.color-tag-custom-wrapper:hover {
    transform: scale(1.1);
    border-color: var(--text-primary);
}

.color-tag-custom-wrapper:hover .color-tag-custom-swatch svg {
    fill: var(--text-primary);
}

.color-tag-custom-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border-radius: 50%;
}

/* Tint mode toggle in context menu */
.ctx-tint-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 12px;
    margin-top: 2px;
}

.ctx-tint-toggle .ctx-tint-label {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 500;
}

.ctx-tint-switch {
    position: relative;
    width: 32px;
    height: 18px;
    background: var(--border-color);
    border-radius: 9px;
    cursor: pointer;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.ctx-tint-switch.active {
    background: var(--accent-color);
}

.ctx-tint-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.ctx-tint-switch.active::after {
    transform: translateX(14px);
}

/* ====================================
   COMPARISON SYSTEM STYLES
   ==================================== */

/* Comparison pending state - static colored border */
.block.comparison-pending {
    --pending-color: var(--accent-color);
    box-shadow: 0 0 0 2px var(--pending-color), 0 0 12px color-mix(in srgb, var(--pending-color) 25%, transparent);
}

/* Group members highlighted when pending block has a color tag */
.block.comparison-pending-group {
    --pending-color: var(--accent-color);
    box-shadow: 0 0 0 2px var(--pending-color);
}

/* In-comparison border — looks like block-selected (1px outline) */
.block.in-comparison {
    border-color: var(--comparison-border-color, var(--accent-color));
    box-shadow: 0 0 0 1px var(--comparison-border-color, var(--accent-color)), var(--shadow-sm);
}

/* Tint mode in comparison — same look */
.block.has-color-tint.in-comparison {
    border-color: var(--comparison-border-color, var(--accent-color));
    box-shadow: 0 0 0 1px var(--comparison-border-color, var(--accent-color)), var(--shadow-sm);
}

/* Active side (selected) in comparison — thicker 2px outline */
.block.block-selected.in-comparison,
.block.has-color-tint.block-selected.in-comparison {
    box-shadow: 0 0 0 2px var(--comparison-border-color, var(--accent-color)), 0 0 8px color-mix(in srgb, var(--comparison-border-color, var(--accent-color)) 25%, transparent);
    border-color: var(--comparison-border-color, var(--accent-color));
}

/* ====================================
   LOADING OVERLAY
   ==================================== */

/* ====================================
   LOGIN SCREEN
   ==================================== */

.login-screen {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--bg-primary);
    z-index: 99998;
    align-items: center;
    justify-content: center;
}

.login-box {
    text-align: center;
    width: 100%;
    max-width: 320px;
    padding: var(--spacing-xl);
}

.login-logo {
    height: 24px;
    margin-bottom: 40px;
    opacity: 0.85;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.login-field {
    margin-bottom: var(--spacing-md);
    text-align: left;
}

.login-field label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-xs);
}

.login-field input:not(.otp-input) {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-md);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.login-field input:not(.otp-input):hover {
    border-color: var(--accent-color);
}

.login-field input:not(.otp-input):focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: none;
}

.login-field input:not(.otp-input)::placeholder {
    color: var(--text-disabled);
}

.login-error {
    display: none;
    font-size: 12px;
    color: #ff6b6b;
    margin-bottom: var(--spacing-md);
    text-align: left;
    animation: loginErrorIn 0.3s ease both;
}

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

.login-resend-link {
    display: inline-block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--accent-color);
    text-decoration: underline;
    cursor: pointer;
    transition: color 0.2s ease;
}

.login-resend-link:hover {
    color: var(--accent-hover);
}

.login-forgot {
    text-align: center;
    margin-top: var(--spacing-sm);
}

.login-forgot a {
    font-size: 12px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.login-forgot a:hover {
    color: var(--accent-color);
    text-decoration: underline;
}

/* Forgot Password Modal */
.forgot-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

.forgot-modal-overlay.closing {
    animation: fadeOut 0.2s ease forwards;
}

.forgot-modal {
    background: var(--bg-secondary, #2a2a2a);
    border: 1px solid var(--border-color, #3a3a3a);
    border-radius: 12px;
    padding: 32px;
    width: 100%;
    max-width: 360px;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    animation: forgotSlideIn 0.3s ease forwards;
}

.forgot-modal.closing {
    animation: forgotSlideOut 0.2s ease forwards;
}

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

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

.forgot-modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    color: var(--text-secondary, #888);
    font-size: 22px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    transition: color 0.2s ease;
}

.forgot-modal-close:hover {
    color: var(--text-primary, #fff);
}

.forgot-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary, #fff);
    margin: 0 0 6px 0;
}

.forgot-desc {
    font-size: 13px;
    color: var(--text-secondary, #999);
    margin: 0 0 20px 0;
    line-height: 1.5;
}

.forgot-desc strong {
    color: var(--text-primary, #fff);
    font-weight: 600;
}

.forgot-step .login-field {
    margin-bottom: var(--spacing-md, 12px);
}

.forgot-step .login-btn {
    margin-top: var(--spacing-sm, 8px);
}

.forgot-step .login-error {
    margin-bottom: var(--spacing-sm, 8px);
}

.forgot-step-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: var(--spacing-sm, 8px);
}

.forgot-step-actions .login-btn {
    margin-top: 0;
    flex: 1;
}

.forgot-link-btn {
    background: none;
    border: none;
    color: var(--text-secondary, #888);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    padding: 4px 0;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.forgot-link-btn:hover:not(:disabled) {
    color: var(--accent-color, #d4a843);
}

.forgot-link-btn:disabled {
    opacity: 0.5;
    cursor: default;
    color: var(--text-secondary, #888);
}

.forgot-success-icon {
    color: #51cf66;
    margin-bottom: 16px;
}

.forgot-success-icon svg {
    display: block;
}

/* OTP Code Input — uses ID + !important to override any injected styles */
.forgot-otp-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-xs);
}

.forgot-otp-autofill {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
}

#otp-container,
#hub-otp-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    margin-bottom: var(--spacing-md, 12px);
}

#otp-container .otp-input,
#hub-otp-container .otp-input {
    display: block !important;
    width: 0 !important;
    min-width: 0 !important;
    flex: 1 1 0% !important;
    height: 48px !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    color: var(--text-primary, #fff) !important;
    background-color: var(--bg-tertiary, #333) !important;
    border: 1px solid var(--border-color, #3a3a3a) !important;
    border-radius: var(--border-radius, 6px) !important;
    outline: none !important;
    transition: border-color 0.2s ease, background-color 0.2s ease !important;
    caret-color: var(--accent-color, #d4a843) !important;
    box-sizing: border-box !important;
    -moz-appearance: textfield !important;
    -webkit-appearance: none !important;
}

#otp-container .otp-input::-webkit-outer-spin-button,
#otp-container .otp-input::-webkit-inner-spin-button,
#hub-otp-container .otp-input::-webkit-outer-spin-button,
#hub-otp-container .otp-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

#otp-container .otp-input:hover,
#hub-otp-container .otp-input:hover {
    border-color: var(--accent-color, #d4a843) !important;
    background-color: var(--bg-hover, #383838) !important;
}

#otp-container .otp-input:focus,
#hub-otp-container .otp-input:focus {
    border-color: var(--accent-color, #d4a843) !important;
    box-shadow: none !important;
    background-color: var(--bg-hover, #383838) !important;
}

/* Resend code link (appears inline under error) */
.forgot-resend-link {
    font-size: 12px;
    color: var(--accent-color, #d4a843);
    text-decoration: none;
    margin-bottom: var(--spacing-md, 12px);
    display: block;
    transition: color 0.2s ease;
}

.forgot-resend-link:hover {
    color: var(--accent-hover, #e0b94e);
    text-decoration: underline;
}

.login-btn {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-xl);
    background-color: var(--accent-color);
    color: var(--bg-primary);
    border: 1px solid var(--accent-color);
    border-radius: var(--border-radius);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: var(--spacing-xs);
}

.login-btn:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
    box-shadow: var(--accent-hover);
}

.login-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.login-signup-link {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: var(--spacing-lg);
}

.login-signup-link a {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 500;
}

.login-signup-link a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

/* ====================================
   LOADING OVERLAY
   ==================================== */

.loading-overlay {
    display: none;
    position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease;
}

.loading-overlay.fade-out {
    opacity: 0;
    pointer-events: none;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid transparent;
    border-top-color: var(--accent-color, #1e88e5);
    border-radius: 50%;
    animation: loadingSpin 0.8s linear infinite;
    /* Force compositor layer so animation survives main-thread work */
    will-change: transform;
    transform: translateZ(0);
}

@keyframes loadingSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ====================================
   HUB BUTTON - SIXTH (below Settings)
   ==================================== */

/* ====================================
   EXPOSIMETER HUB OVERLAY
   ==================================== */

.expo-hub-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg-primary);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.expo-hub-overlay.visible {
    opacity: 1;
}

.expo-hub-overlay.closing {
    opacity: 0;
    pointer-events: none;
}

.expo-hub-container {
    width: 100%;
    max-width: 380px;
    padding: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    position: relative;
}

.expo-hub-close {
    position: fixed;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    line-height: 1;
}

.expo-hub-close:hover {
    background: var(--accent-color);
    color: var(--bg-primary);
    border-color: var(--accent-color);
}

.expo-hub-logo {
    height: 22px;
    opacity: 0.7;
    margin-bottom: 8px;
}

/* User card */
.expo-hub-card {
    width: 100%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 16px;
}

.expo-hub-user-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.expo-hub-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent-color);
    color: var(--bg-primary);
    font-weight: 700;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.expo-hub-user-info {
    overflow: hidden;
}

.expo-hub-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.expo-hub-email {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

/* Plan card */
.expo-hub-plan-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.expo-hub-plan-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.expo-hub-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 2px 8px;
    border-radius: 3px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    vertical-align: middle;
}

.expo-hub-badge-trial {
    background: rgba(255, 167, 38, 0.15);
    color: #ffa726;
}

.expo-hub-badge-active {
    background: rgba(102, 187, 106, 0.15);
    color: #66bb6a;
}

.expo-hub-plan-trial {
    font-size: 12px;
    color: #ffa726;
    margin-top: 8px;
}

/* Actions */
.expo-hub-actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.expo-hub-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    box-sizing: border-box;
}

.expo-hub-btn:hover {
    background: var(--bg-hover);
    border-color: var(--accent-color);
    color: var(--text-primary);
}

.expo-hub-btn svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.expo-hub-btn:hover svg {
    opacity: 1;
}

.expo-hub-btn-logout {
    color: #ff6b6b;
    border-color: rgba(255, 107, 107, 0.2);
}

.expo-hub-btn-logout:hover {
    background: rgba(255, 107, 107, 0.1);
    border-color: rgba(255, 107, 107, 0.4);
    color: #ff6b6b;
}

.expo-hub-btn-logout svg {
    stroke: #ff6b6b;
}

/* Footer */
.expo-hub-footer {
    font-size: 11px;
    color: var(--text-disabled);
    margin-top: 8px;
}

/* ---- Hub skeleton loaders ---- */
@keyframes expo-hub-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.expo-hub-skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-tertiary) 25%,
        rgba(255,255,255,0.06) 50%,
        var(--bg-tertiary) 75%
    );
    background-size: 200% 100%;
    animation: expo-hub-shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
    color: transparent !important;
    pointer-events: none;
    user-select: none;
    overflow: hidden;
}

.expo-hub-skeleton * {
    visibility: hidden;
}

.expo-hub-avatar.expo-hub-skeleton {
    border-radius: 50%;
    color: transparent !important;
}

.expo-hub-name.expo-hub-skeleton {
    width: 110px;
    height: 20px;
    display: inline-block;
}

.expo-hub-email.expo-hub-skeleton {
    width: 160px;
    height: 17px;
    display: inline-block;
    margin-top: 2px;
}

.expo-hub-plan-name.expo-hub-skeleton {
    width: 130px;
    height: 21px;
}

/* ---- Hub responsive ---- */
@media (max-width: 480px) {
    .expo-hub-container {
        padding: var(--spacing-md);
        max-width: 100%;
    }
}

/* ====================================
   LANDSCAPE ORIENTATION WARNING (mobile)
   ==================================== */

.landscape-warning {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: var(--bg-primary, #1e1e1e);
    justify-content: center;
    align-items: center;
    text-align: center;
}

.landscape-warning-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 24px;
}

.landscape-warning-content svg {
    color: var(--text-secondary, #a0a0a0);
    opacity: 0.6;
    animation: landscapeRotateHint 2s ease-in-out infinite;
}

@keyframes landscapeRotateHint {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-90deg); }
    75% { transform: rotate(-90deg); }
}

.landscape-warning-content p {
    color: var(--text-secondary, #a0a0a0);
    font-size: 15px;
    font-weight: 500;
    max-width: 220px;
    line-height: 1.5;
}

/* Show landscape warning only on small screens in landscape */
@media (max-width: 900px) and (orientation: landscape) {
    .landscape-warning {
        display: flex;
    }

    #app-wrapper {
        display: none !important;
    }
}

/* ====================================
   MOBILE WARNING BANNER
   ==================================== */

.mobile-warning-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    pointer-events: none;
    overflow: hidden;
}

.mobile-warning-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 20px 36px;
    background: rgba(30, 30, 30, 0.70);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    backdrop-filter: blur(20px) saturate(1.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    pointer-events: auto;
    transform: translateY(-100%);
    animation: mobileWarningSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.6s;
    opacity: 0;
}

/* Light theme override */
[data-theme="light"] .mobile-warning-inner {
    background: rgba(245, 245, 245, 0.70);
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

/* Soft fade-out gradient at the bottom */
.mobile-warning-inner::after {
    content: '';
    position: absolute;
    bottom: -40px;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(
        to bottom,
        rgba(30, 30, 30, 0.55),
        transparent
    );
    pointer-events: none;
}

[data-theme="light"] .mobile-warning-inner::after {
    background: linear-gradient(
        to bottom,
        rgba(245, 245, 245, 0.55),
        transparent
    );
}

@keyframes mobileWarningSlideIn {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.mobile-warning-banner.hiding .mobile-warning-inner {
    animation: mobileWarningSlideOut 0.3s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

@keyframes mobileWarningSlideOut {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(-100%);
        opacity: 0;
    }
}

.mobile-warning-close {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary, #a0a0a0);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.mobile-warning-close:hover,
.mobile-warning-close:active {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary, #e0e0e0);
}

[data-theme="light"] .mobile-warning-close:hover,
[data-theme="light"] .mobile-warning-close:active {
    background: rgba(0, 0, 0, 0.06);
}

.mobile-warning-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.mobile-warning-icon {
    color: var(--accent-color, #a0a0a0);
    opacity: 0.7;
}

.mobile-warning-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary, #e0e0e0);
    letter-spacing: 0.01em;
}

.mobile-warning-text {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-secondary, #a0a0a0);
    line-height: 1.5;
}

/* ====================================
   PWA STANDALONE MODE TWEAKS
   ==================================== */

@media (display-mode: standalone) {
    body {
        /* Extra top padding for iOS status bar in standalone mode */
        padding-top: calc(var(--spacing-xl) + env(safe-area-inset-top, 0px));
    }

    /* Push all fixed top-left buttons down by safe-area-inset-top */
    .add-button-container {
        top: calc(var(--spacing-lg) + env(safe-area-inset-top, 0px));
    }
    .edit-layout-button {
        top: calc(var(--spacing-lg) + 48px + env(safe-area-inset-top, 0px));
    }
    .reset-app-button {
        top: calc(var(--spacing-lg) + 96px + env(safe-area-inset-top, 0px));
    }
    .export-import-button {
        top: calc(var(--spacing-lg) + 144px + env(safe-area-inset-top, 0px));
    }
    .settings-button {
        top: calc(var(--spacing-lg) + 192px + env(safe-area-inset-top, 0px));
    }
    .hub-button {
        top: calc(var(--spacing-lg) + 240px + env(safe-area-inset-top, 0px));
    }

    /* Push fixed top-right button down */
    .floorplan-toggle-button {
        top: calc(var(--spacing-lg) + env(safe-area-inset-top, 0px));
    }

    /* Layout controls bar */
    .layout-controls {
        top: calc(env(safe-area-inset-top, 0px) + 8px);
    }

    /* Hub close button */
    .expo-hub-close {
        top: calc(12px + env(safe-area-inset-top, 0px));
    }

    /* Mobile warning banner — offset for status bar in standalone mode */
    .mobile-warning-inner {
        padding-top: calc(32px + env(safe-area-inset-top, 0px));
    }
    .mobile-warning-close {
        top: calc(10px + env(safe-area-inset-top, 0px));
    }

    /* Hide fullscreen button in PWA — already running fullscreen */
    .fullscreen-button {
        display: none;
    }
}

/* Standalone + mobile: correct positions (Edit Layout hidden, tighter spacing) */
@media (max-width: 900px) and (display-mode: standalone) {
    body {
        padding-top: calc(var(--spacing-md) + env(safe-area-inset-top, 0px));
    }
    .add-button-container {
        top: calc(var(--spacing-md) + env(safe-area-inset-top, 0px));
    }
    .reset-app-button {
        top: calc(var(--spacing-md) + 48px + env(safe-area-inset-top, 0px));
    }
    .export-import-button {
        top: calc(var(--spacing-md) + 96px + env(safe-area-inset-top, 0px));
    }
    .settings-button {
        top: calc(var(--spacing-md) + 144px + env(safe-area-inset-top, 0px));
    }
    .hub-button {
        top: calc(var(--spacing-md) + 192px + env(safe-area-inset-top, 0px));
    }
}

/* ====================================
   TOUCH DEVICE OVERRIDES
   Prevent :hover from causing double-tap on touch screens.
   The .touch-device class is set by JS on touch-capable devices.
   ==================================== */

/* --- Add-options-menu: tap toggle instead of hover --- */
.touch-device .add-button-container:hover .add-options-menu {
    display: none;
}

.touch-device .add-button-container .add-options-menu.touch-open {
    display: flex !important;
}

/* --- Remove scale transforms on hover (main cause of double-tap) --- */
.touch-device .floating-add-button:hover,
.touch-device .edit-layout-button:hover,
.touch-device .reset-app-button:hover,
.touch-device .export-import-button:hover,
.touch-device .settings-button:hover,
.touch-device .hub-button:hover,
.touch-device .announcements-history-button:hover,
.touch-device .fullscreen-button:hover,
.touch-device .add-inline-button:hover {
    transform: none;
}

/* --- Side buttons: remove background/color hover change --- */
.touch-device .floating-add-button:hover {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

.touch-device .add-option-btn:hover {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

.touch-device .edit-layout-button:hover,
.touch-device .reset-app-button:hover,
.touch-device .export-import-button:hover {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

.touch-device .settings-button:hover,
.touch-device .hub-button:hover,
.touch-device .announcements-history-button:hover,
.touch-device .fullscreen-button:hover {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

/* --- Tab buttons & toggle buttons: remove hover color --- */
.touch-device .tab-btn:hover {
    color: var(--text-primary);
    border-bottom-color: transparent;
}

.touch-device .unit-toggle-btn:hover:not(.active) {
    background-color: transparent;
    color: var(--text-secondary);
}

/* --- Modal & form buttons: remove hover effects --- */
.touch-device .confirm-btn:hover {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    box-shadow: none;
}

.touch-device .cancel-btn:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
}

.touch-device .export-btn:hover,
.touch-device .import-btn:hover:not(:disabled) {
    box-shadow: none;
    transform: none;
}

/* --- Block header buttons --- */
.touch-device .reset-button:hover,
.touch-device .delete-button:hover,
.touch-device .ambient-button:hover,
.touch-device .affects-button:hover,
.touch-device .minimize-button:hover {
    color: var(--text-secondary);
    background-color: transparent;
}

/* --- Color buttons: remove scale --- */
.touch-device .color-btn:hover {
    transform: none;
}

/* --- Provide :active feedback instead (brief flash on tap) --- */
.touch-device .floating-add-button:active,
.touch-device .edit-layout-button:active,
.touch-device .reset-app-button:active,
.touch-device .export-import-button:active,
.touch-device .settings-button:active,
.touch-device .hub-button:active,
.touch-device .announcements-history-button:active,
.touch-device .fullscreen-button:active {
    background-color: var(--accent-color);
    color: var(--bg-primary);
}

.touch-device .add-option-btn:active {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--bg-primary);
}

.touch-device .tab-btn:active {
    color: var(--accent-color);
}

.touch-device .confirm-btn:active {
    background-color: var(--accent-hover);
}

.touch-device .cancel-btn:active {
    background-color: var(--bg-hover);
}

.touch-device .reset-button:active,
.touch-device .delete-button:active,
.touch-device .ambient-button:active,
.touch-device .affects-button:active {
    color: var(--accent-color);
}

/* --- Disable webkit tap highlight (we use :active instead) --- */
.touch-device * {
    -webkit-tap-highlight-color: transparent;
}

/* --- Prevent text selection on touch (long-press, drag, etc.) --- */
.touch-device body {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Re-enable drag capability for blocks in layout editing mode
   (user-select: none on body can block HTML5 drag on hybrid touch+mouse devices) */
.touch-device .draggable.editing {
    -webkit-user-select: auto;
    user-select: auto;
    -webkit-user-drag: element;
}

/* Re-enable selection for inputs/textareas where user needs to type/select */
.touch-device input,
.touch-device textarea,
.touch-device select,
.touch-device [contenteditable="true"] {
    -webkit-user-select: text;
    user-select: text;
}

/* --- Hide tooltips on touch devices (prevents sticky tooltips after tap) --- */
.touch-device .tooltip-el {
    display: none !important;
}

/* --- Ensure reliable tap on toggle/ambient/affects buttons --- */
.touch-device .toggle-disable-button,
.touch-device .ambient-button,
.touch-device .affects-button {
    touch-action: manipulation;
}

/* --- Editable spans: remove hover underline, use active --- */
.touch-device .light-setup span.editable:hover {
    text-decoration: none;
    color: var(--accent-color);
}

.touch-device .light-setup span.editable:active {
    text-decoration: underline;
}

/* --- Minimize button: always visible on touch (hidden behind :hover on desktop) --- */
.touch-device .minimize-button {
    display: block;
}

.touch-device .draggable.editing .minimize-button {
    display: none !important;
}

/* --- Drop zone: remove hover effect --- */
.touch-device .drop-zone:hover {
    border-color: var(--border-color);
    background-color: transparent;
}

/* --- Stable viewport height for mobile browser chrome ---
   Uses --stable-vh set by JS to prevent UI jumping when address bar shows/hides */
.touch-device .bottom-fixed-buttons {
    bottom: calc(var(--stable-vh, 100vh) - var(--stable-vh, 100vh)); /* fallback: 0 */
}

.touch-device body {
    min-height: var(--stable-vh, 100dvh);
}

.touch-device .fp-overlay {
    height: var(--stable-vh, 100dvh);
}