/**
 * FREDgraphs - Styles
 * Datawrapper-inspired design with clean, professional aesthetics
 */

/* ================================
   CSS Variables
   ================================ */
:root {
    /* Colors */
    --color-primary: #0066b3;
    --color-primary-dark: #004d87;
    --color-secondary: #666666;
    --color-success: #28a745;
    --color-error: #dc3545;
    --color-warning: #ffc107;

    /* Text colors */
    --text-primary: #1a1a1a;
    --text-secondary: #666666;
    --text-tertiary: #999999;
    --text-muted: #aaaaaa;

    /* Background colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;
    --bg-hover: #f0f0f0;

    /* Border colors */
    --border-color: #dee2e6;
    --border-light: #e9ecef;

    /* Chart colors */
    --chart-line-1: #0066b3;
    --chart-line-2: #d12244;
    --chart-line-3: #007f3e;
    --chart-gridline: #e0e0e0;
    --chart-axis: #333333;

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* Typography */
    --font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-base: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 22px;
    --font-size-xxl: 28px;

    /* Borders */
    --border-radius: 4px;
    --border-radius-lg: 8px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;

    /* Layout */
    --sidebar-width: 280px;
    --panel-data-width: 300px;
    --panel-elements-width: 260px;
    --header-height: 56px;
}

/* ================================
   Reset & Base
   ================================ */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--text-primary);
    background: var(--bg-secondary);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* ================================
   Layout
   ================================ */
.app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
    padding: 0 var(--spacing-lg);
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.app-title-wrap {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.app-title-link {
    text-decoration: none;
    color: inherit;
}

.app-title {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-primary);
    cursor: pointer;
}

.app-version {
    font-size: 11px;
    color: var(--text-tertiary);
    font-weight: 400;
    user-select: none;
    cursor: default;
    opacity: 0.7;
    transition: opacity 0.15s;
}
.app-version:hover {
    opacity: 1;
}
.app-version:empty {
    display: none;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.api-status {
    font-size: var(--font-size-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.api-status.ready {
    background: #d4edda;
    color: #155724;
}

.api-status.error {
    background: #f8d7da;
    color: #721c24;
}

.app-main {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ================================
   Panel 1: Data Collection
   ================================ */
.panel-data-collection {
    width: var(--panel-data-width);
    background: var(--bg-primary);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex-shrink: 0;
}

/* ================================
   Panel 2: Element Settings (right panel)
   ================================ */
.panel-elements {
    width: var(--panel-elements-width);
    background: var(--bg-primary);
    border-left: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex-shrink: 0;
    order: 10;
}

.element-settings-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
    text-align: center;
}

.element-settings-empty p {
    margin: 0;
}

.panel-header {
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 2px solid var(--border-color);
    flex-shrink: 0;
    background: var(--bg-secondary);
}

.panel-header .panel-title {
    margin-bottom: 0;
}

/* ================================
   Data Source Toggle
   ================================ */
.data-source-toggle {
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 2px solid var(--border-color);
    flex-shrink: 0;
}

.data-source-select {
    width: 100%;
    padding: var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    font-weight: 500;
    background: var(--bg-primary);
    cursor: pointer;
}

.data-source-select:focus {
    outline: none;
    border-color: var(--color-primary);
}

.data-source-view {
    display: none;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
}

.data-source-view.active {
    display: flex;
}

/* ================================
   BLS Data Panel
   ================================ */

.bls-browser-panel {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: 40vh;
    min-height: 80px;
    border-bottom: 1px solid var(--border-color);
}

.bls-browser-header {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xs);
    transition: background var(--transition-fast);
}

.bls-browser-panel.collapsed {
    max-height: 38px;
    min-height: 0;
}

.bls-browser-panel.collapsed .bls-browser-header {
    border-bottom: none;
    cursor: pointer;
}

.bls-browser-panel.collapsed .bls-browser-header:hover {
    background: var(--bg-tertiary);
}

.bls-browser-selected-label {
    font-size: var(--font-size-sm);
    font-weight: 400;
    color: var(--color-primary);
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.bls-browser-expand-hint {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    text-transform: none;
    letter-spacing: 0;
    flex-shrink: 0;
}

.bls-survey-browser {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* Survey catalogue — collapsible categories */
.bls-cat-group {
    margin-bottom: 0;
}

.bls-cat-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    padding: 7px var(--spacing-md);
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    user-select: none;
    transition: background var(--transition-fast);
}

.bls-cat-label:hover {
    background: var(--bg-tertiary);
}

.bls-cat-chevron {
    flex-shrink: 0;
    color: var(--text-tertiary);
    transition: transform var(--transition-fast);
    transform: rotate(-90deg);
}

.bls-cat-group.bls-cat-expanded .bls-cat-chevron {
    transform: rotate(0deg);
}

.bls-cat-surveys {
    display: none;
}

.bls-cat-group.bls-cat-expanded .bls-cat-surveys {
    display: block;
}

.bls-survey-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px var(--spacing-md);
    cursor: pointer;
    transition: background var(--transition-fast);
    border-bottom: 1px solid var(--border-light);
    gap: var(--spacing-xs);
}

.bls-survey-item:hover {
    background: var(--bg-hover);
}

.bls-survey-item.selected {
    background: #e8f0fa;
    border-left: 3px solid var(--color-primary);
    padding-left: calc(var(--spacing-md) - 3px);
}

.bls-survey-label {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    line-height: 1.3;
    flex: 1;
    min-width: 0;
}

.bls-survey-id {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-tertiary);
    font-family: 'Courier New', Courier, monospace;
    flex-shrink: 0;
}

.bls-badge-large {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-primary);
    background: #dceeff;
    border-radius: 3px;
    padding: 1px 4px;
    margin-left: 4px;
    vertical-align: middle;
}

.bls-config-panel {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.bls-survey-header {
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.bls-survey-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.bls-survey-meta {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-top: 2px;
}

.bls-dimensions-wrap {
    border-bottom: 1px solid var(--border-light);
}

.bls-dimensions-label {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    padding: var(--spacing-xs) var(--spacing-md) 0;
    font-style: italic;
}

.bls-dimensions {
    padding: var(--spacing-xs) var(--spacing-md) var(--spacing-sm);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.bls-dim-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bls-dim-label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
}

.bls-dim-select {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
}

.bls-dim-select:focus {
    outline: none;
    border-color: var(--color-primary);
}

.bls-dim-seasonal .bls-seasonal-checks {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 2px;
}

.bls-seasonal-check-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    cursor: pointer;
    color: var(--text-primary);
}

.bls-seasonal-check-label input[type="checkbox"] {
    accent-color: var(--color-primary);
    cursor: pointer;
}

option.bls-dim-unavail {
    color: var(--text-muted);
}

.bls-filter-search-wrap {
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--border-light);
}

.bls-filter-search {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    box-sizing: border-box;
}

.bls-filter-search:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 102, 179, 0.15);
}

.bls-series-results {
    overflow-y: auto;
    flex: 1;
}

.bls-truncated {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    padding: var(--spacing-xs) var(--spacing-md);
    background: #fffbe6;
    border-bottom: 1px solid #ffe082;
}

.bls-hint {
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.bls-loading {
    padding: var(--spacing-md);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    text-align: center;
}

.bls-error {
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--color-error);
    font-size: var(--font-size-sm);
}

.bls-direct-panel {
    padding: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

.bls-direct-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
}

.bls-direct-row {
    display: flex;
    gap: var(--spacing-xs);
    align-items: center;
}

.bls-series-id-input {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    font-family: 'Courier New', Courier, monospace;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.bls-series-id-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 102, 179, 0.15);
}

.bls-direct-hint {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: var(--spacing-xs);
}

.bls-direct-hint a {
    color: var(--color-primary);
}

/* ================================
   IMF Data Panel
   ================================ */

.imf-browser-panel {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: 40vh;
    min-height: 80px;
    border-bottom: 1px solid var(--border-color);
}

.imf-browser-panel.collapsed {
    max-height: 38px;
    min-height: 0;
}

.imf-browser-panel.collapsed .imf-search-wrap {
    border-bottom: none;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.imf-browser-panel.collapsed .imf-search-wrap:hover {
    background: var(--bg-tertiary);
}

.imf-browser-panel.collapsed .imf-indicator-browser {
    display: none;
}

.imf-search-wrap {
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.imf-search-wrap input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    box-sizing: border-box;
}

.imf-search-wrap input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 102, 179, 0.15);
}

.imf-indicator-browser {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.imf-ds-section {
    border-bottom: 1px solid var(--border-light);
}

.imf-ds-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 8px var(--spacing-md);
    cursor: pointer;
    transition: background var(--transition-fast);
    user-select: none;
}

.imf-ds-header:hover {
    background: var(--bg-hover);
}

.imf-ds-chevron {
    flex-shrink: 0;
    color: var(--text-tertiary);
    transition: transform var(--transition-fast);
    transform: rotate(-90deg);
}

.imf-ds-section.imf-ds-expanded .imf-ds-chevron {
    transform: rotate(0deg);
}

.imf-ds-name {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
}

.imf-flagship-badge {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #b45309;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 3px;
    padding: 1px 5px;
    flex-shrink: 0;
}

.imf-ds-count {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    background: var(--bg-tertiary);
    border-radius: 10px;
    padding: 1px 6px;
    flex-shrink: 0;
}

.imf-ds-desc {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    padding: 0 var(--spacing-md) var(--spacing-xs) calc(var(--spacing-md) + 16px);
    line-height: 1.4;
    display: none;
}

.imf-ds-section.imf-ds-expanded .imf-ds-desc {
    display: block;
}

.imf-ds-indicators {
    display: none;
    border-top: 1px solid var(--border-light);
    background: var(--bg-secondary);
}

.imf-ds-section.imf-ds-expanded .imf-ds-indicators {
    display: block;
}

.imf-indicator-item {
    padding: 6px var(--spacing-md) 6px calc(var(--spacing-md) + 16px);
    cursor: pointer;
    border-bottom: 1px solid var(--border-light);
    transition: background var(--transition-fast);
}

.imf-indicator-item:last-child {
    border-bottom: none;
}

.imf-indicator-item:hover {
    background: var(--bg-hover);
}

.imf-indicator-item.selected {
    background: #e8f0fa;
    border-left: 3px solid var(--color-primary);
    padding-left: calc(var(--spacing-md) + 16px - 3px);
}

.imf-ind-label {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    line-height: 1.3;
}

.imf-ind-meta {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin-top: 2px;
}

.imf-config-panel {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: var(--spacing-md);
}

.imf-ind-selected-header {
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-color);
}

.imf-ind-selected-label {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.imf-ind-selected-unit {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-top: 3px;
}

.imf-ind-selected-ds {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin-top: 3px;
    font-family: 'Courier New', Courier, monospace;
}

.imf-ind-selected-desc {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-top: var(--spacing-xs);
    line-height: 1.5;
}

.imf-group-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: var(--spacing-sm);
}

.imf-chip {
    font-size: 11px;
    font-weight: 500;
    padding: 3px 10px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
    line-height: 1.4;
}

.imf-chip:hover {
    background: var(--bg-hover);
    border-color: var(--color-primary);
}

.imf-chip.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.imf-chip-clear {
    color: var(--text-secondary);
    border-style: dashed;
}

.imf-chip-clear:hover {
    color: var(--color-error);
    border-color: var(--color-error);
    background: #fff5f5;
}

.imf-section-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.imf-country-search {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
    box-sizing: border-box;
}

.imf-country-search:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 102, 179, 0.15);
}

.imf-country-list {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--bg-primary);
}

.imf-country-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: background 0.1s;
}

.imf-country-item:hover {
    background: var(--bg-secondary);
}

.imf-country-item input[type="checkbox"] {
    flex-shrink: 0;
}

.imf-latest-only-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    cursor: pointer;
    margin-top: var(--spacing-sm);
    padding: 4px 0;
}
.imf-latest-only-label input[type="checkbox"] {
    accent-color: var(--color-primary);
    cursor: pointer;
}

.imf-fetch-btn {
    margin-top: var(--spacing-md);
}

.imf-country-section {
    margin-bottom: var(--spacing-sm);
}

.imf-loading {
    padding: var(--spacing-md);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    text-align: center;
}

.imf-hint {
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.imf-error {
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--color-error);
    font-size: var(--font-size-sm);
}

/* ================================
   OECD Data Panel
   ================================ */
.oecd-config-panel {
    padding: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

.oecd-dataset-header {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-color);
    line-height: 1.3;
}

.oecd-info-icon {
    display: inline-flex;
    align-items: center;
    color: var(--text-secondary);
    cursor: help;
    vertical-align: middle;
    margin-left: 5px;
    opacity: 0.55;
    transition: opacity 0.15s;
}

.oecd-info-icon:hover {
    opacity: 0.9;
}

.oecd-option-group {
    margin-bottom: var(--spacing-sm);
}

.oecd-dim-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 3px;
}

.oecd-dim-select {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    background: var(--bg-primary);
}

.oecd-dim-select:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* Adjustment checkboxes */
.oecd-adjustment-checks {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.oecd-adj-check-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    cursor: pointer;
}
.oecd-adj-check-label input[type="checkbox"] {
    width: auto;
    margin: 0;
    cursor: pointer;
}

/* Multi-select country picker */
.oecd-multiselect {
}

.oecd-multiselect-btn {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    background: var(--bg-primary);
    cursor: pointer;
    text-align: left;
    color: var(--text-primary);
}

.oecd-multiselect-btn:hover {
    border-color: var(--color-primary);
}

.oecd-multiselect-dropdown {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    max-height: 260px;
    display: flex;
    flex-direction: column;
}

.oecd-multiselect-search {
    padding: 6px 8px;
    border: none;
    border-bottom: 1px solid var(--border-color);
    font-size: var(--font-size-sm);
    outline: none;
    flex-shrink: 0;
}

.oecd-multiselect-actions {
    padding: 4px 8px;
    font-size: 11px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.oecd-ms-action {
    color: var(--color-primary);
    text-decoration: none;
    margin-right: 8px;
}

.oecd-ms-action:hover {
    text-decoration: underline;
}

.oecd-multiselect-list {
    overflow-y: auto;
    max-height: 220px;
    padding: 4px 0;
}

.oecd-ms-item {
    display: flex;
    align-items: center;
    padding: 2px 8px;
    cursor: pointer;
    font-size: var(--font-size-sm);
    gap: 5px;
}

.oecd-ms-item:hover {
    background: var(--bg-hover);
}

.oecd-ms-item input[type="checkbox"] {
    margin: 0;
    flex-shrink: 0;
}

.oecd-ms-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Time range inputs */
.oecd-time-range {
    margin-bottom: var(--spacing-sm);
}

.oecd-time-inputs {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
}

.oecd-time-inputs label {
    color: var(--text-secondary);
    font-weight: 500;
}

.oecd-year-input {
    width: 70px;
    padding: 4px 6px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
}

.oecd-year-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.oecd-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    cursor: pointer;
    color: var(--text-primary);
}

.oecd-checkbox-label input[type="checkbox"] {
    margin: 0;
}

/* Fetch button */
.oecd-fetch-btn {
    margin-top: var(--spacing-md) !important;
}

.oecd-cascading-indicator {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-style: italic;
    padding: 4px 0;
}
.oecd-cascading-warning {
    color: #b8860b;
}

/* Status messages */
.oecd-loading {
    padding: var(--spacing-md);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    text-align: center;
}

.oecd-hint {
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.oecd-error {
    padding: var(--spacing-sm) var(--spacing-md);
    color: #d32f2f;
    font-size: var(--font-size-sm);
}

/* Search result highlight for OECD */
.oecd-result.selected {
    background-color: rgba(0, 102, 179, 0.08);
    border-left: 3px solid var(--color-primary);
}

/* OECD Topic Tree */
.oecd-topic-tree {
    font-size: var(--font-size-sm);
}

.oecd-topic-node {
    border-bottom: 1px solid var(--border-color);
}

.oecd-topic-node:last-child {
    border-bottom: none;
}

.oecd-topic-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 6px;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s;
}

.oecd-topic-header:hover {
    background-color: var(--bg-secondary);
}

.oecd-topic-arrow {
    font-size: 9px;
    color: var(--text-secondary);
    transition: transform 0.2s;
    flex-shrink: 0;
    width: 12px;
    text-align: center;
}

.oecd-topic-node.expanded > .oecd-topic-header .oecd-topic-arrow {
    transform: rotate(90deg);
}

.oecd-topic-name {
    flex: 1;
    min-width: 0;
}

.oecd-topic-count {
    font-size: 11px;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border-radius: 10px;
    padding: 1px 7px;
    flex-shrink: 0;
}

.oecd-topic-lvl-0 {
    font-weight: 600;
    font-size: 13px;
}

.oecd-topic-lvl-1 {
    font-size: 12.5px;
    padding-left: 16px;
}

.oecd-topic-lvl-2 {
    font-size: 12px;
    padding-left: 28px;
}

.oecd-topic-lvl-3 {
    font-size: 11.5px;
    padding-left: 40px;
}

.oecd-topic-children {
    display: none;
}

.oecd-topic-node.expanded > .oecd-topic-children {
    display: block;
}

.oecd-topic-df {
    padding: 6px 8px 6px 28px;
    cursor: pointer;
    transition: background-color 0.15s;
    border-top: 1px solid var(--border-color);
}

.oecd-topic-lvl-1 ~ .oecd-topic-children .oecd-topic-df {
    padding-left: 40px;
}

.oecd-topic-lvl-2 ~ .oecd-topic-children .oecd-topic-df {
    padding-left: 52px;
}

.oecd-topic-df:hover {
    background-color: var(--bg-secondary);
}

.oecd-topic-df.selected {
    background-color: rgba(0, 102, 179, 0.08);
    border-left: 3px solid var(--color-primary);
}

.oecd-topic-df-name {
    font-size: 12px;
    color: var(--text-primary);
}

.oecd-search-divider {
    padding: 8px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-top: 2px solid var(--border-color);
    margin-top: 4px;
}

/* ================================
   Paste Data Panel
   ================================ */
.paste-panel {
    padding: var(--spacing-md);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.paste-instructions {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0 0 var(--spacing-sm) 0;
    line-height: 1.4;
}

.paste-textarea {
    flex: 1;
    min-height: 200px;
    padding: var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: var(--font-size-sm);
    line-height: 1.4;
    resize: none;
    outline: none;
    transition: border-color var(--transition-fast);
}

.paste-textarea:focus {
    border-color: var(--color-primary);
}

.paste-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-sm);
}

.paste-preview-area {
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-sm);
    max-height: 200px;
    overflow-y: auto;
}

.paste-preview-area .error-message {
    color: var(--color-error);
    padding: var(--spacing-sm);
    background: #fff5f5;
    border-radius: var(--border-radius);
}

.paste-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-xs);
    font-family: 'Consolas', monospace;
}

.paste-preview-table th {
    background: var(--bg-secondary);
    font-weight: 600;
    text-align: left;
    padding: 3px 6px;
    border: 1px solid var(--border-light);
}

.paste-preview-table td {
    padding: 2px 6px;
    border: 1px solid var(--border-light);
    text-align: right;
}

.paste-preview-table td:first-child {
    text-align: left;
}

.paste-row-count {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin-top: var(--spacing-xs);
}

/* Column type indicators in paste/upload preview */
.paste-type-row td {
    text-align: center;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: none;
    border-bottom: 1px solid var(--border-light);
}

.paste-type-badge.paste-type-number {
    color: #2563eb;
    background: #eff6ff;
}

.paste-type-badge.paste-type-date {
    color: #7c3aed;
    background: #f5f3ff;
}

.paste-type-badge.paste-type-text {
    color: #6b7280;
    background: #f9fafb;
}

.paste-type-toggle {
    cursor: pointer;
}

.paste-type-toggle:hover {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
    border-radius: 2px;
}

.paste-col-text {
    color: var(--text-tertiary);
    font-style: italic;
}

.paste-transform-btn {
    display: block;
    width: 100%;
    margin-top: var(--spacing-sm);
    padding: 6px 12px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: #7c3aed;
    background: #f5f3ff;
    border: 1px solid #c4b5fd;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: center;
    transition: background 0.15s, border-color 0.15s;
}

.paste-transform-btn:hover {
    background: #ede9fe;
    border-color: #a78bfa;
}

.paste-warnings {
    margin-top: var(--spacing-xs);
    padding: 4px 8px;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
}

.paste-warning {
    color: #92400e;
    margin: 2px 0;
}

.paste-warning::before {
    content: '\26A0  ';
}

.paste-row-warning {
    background: #fef9ee;
}

.paste-row-warning td {
    color: #92400e;
    font-style: italic;
}

/* ================================
   Upload / Import Panel
   ================================ */
.upload-panel {
    padding: var(--spacing-md);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.upload-drop-zone {
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg) var(--spacing-md);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
}

.upload-drop-zone:hover {
    border-color: var(--color-primary);
    background: rgba(59, 130, 246, 0.03);
}

.upload-drop-zone.drag-over {
    border-color: var(--color-primary);
    background: rgba(59, 130, 246, 0.08);
    border-style: solid;
}

.upload-drop-icon {
    color: var(--text-tertiary);
    line-height: 1;
}

.upload-drop-zone.drag-over .upload-drop-icon {
    color: var(--color-primary);
}

.upload-drop-text {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
}

.upload-drop-subtext {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.upload-formats-text {
    margin: var(--spacing-xs) 0 0;
    font-size: 10px;
    color: var(--text-tertiary);
}

.upload-sheets-section {
    padding-top: var(--spacing-xs);
    border-top: 1px solid var(--border-light);
}

.upload-section-label {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
}

.upload-sheets-row {
    display: flex;
    gap: var(--spacing-xs);
}

.upload-sheets-input {
    flex: 1;
    padding: 5px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-xs);
    outline: none;
    transition: border-color var(--transition-fast);
}

.upload-sheets-input:focus {
    border-color: var(--color-primary);
}

.upload-sheets-hint {
    margin: 3px 0 0;
    font-size: 10px;
    color: var(--text-tertiary);
}

.upload-status {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius);
    font-size: var(--font-size-xs);
    line-height: 1.4;
}

.upload-status-info {
    background: #eff6ff;
    color: #1e40af;
}

.upload-status-success {
    background: #f0fdf4;
    color: #166534;
}

.upload-status-error {
    background: #fff5f5;
    color: var(--color-error);
}

.upload-sheet-selector {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.upload-sheet-select {
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-xs);
}

/* ================================
   Elements List (horizontal columns below chart)
   ================================ */
.elements-list {
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0;
    flex-shrink: 0;
    margin-top: var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
}

.elements-list .empty-message {
    padding: var(--spacing-sm);
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

/* Each group is a vertical column: pill on top, items below */
.elements-group {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    border-right: 1px solid var(--border-light);
}

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

/* Tab pill at top of each column */
.elements-tab {
    background: var(--bg-secondary);
    border: none;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 5px 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-fast);
    text-align: left;
}

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

/* Items container below the tab */
.elements-group-items {
    overflow-y: auto;
    max-height: 180px;
}

.elements-group-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    cursor: default;
    user-select: none;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-light);
}

.elements-group-header.collapsible {
    cursor: pointer;
    user-select: none;
}

.elements-group-header.collapsible:hover {
    background: var(--bg-hover);
}

.elements-group-header .elements-group-count {
    margin-left: auto;
}

.elements-group-add-btn {
    background: none;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 4px;
    color: var(--text-secondary, #666);
    cursor: pointer;
    padding: 1px 4px;
    margin-left: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.elements-group-add-btn:hover {
    background: var(--bg-hover, #f0f0f0);
    color: var(--color-primary, #4285f4);
    border-color: var(--color-primary, #4285f4);
}

.context-btn-icon {
    background: none;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 3px;
    color: var(--text-secondary, #666);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.context-btn-icon:hover {
    background: var(--bg-hover, #f0f0f0);
}
.context-btn-icon.active {
    background: var(--color-primary, #4285f4);
    color: #fff;
    border-color: var(--color-primary, #4285f4);
}

.scatter-obs-item:hover {
    background: var(--bg-hover, #f5f5f5);
}

.group-disclosure-triangle {
    font-size: 8px;
    flex-shrink: 0;
    transition: transform 0.15s ease;
    display: inline-block;
    color: var(--text-tertiary);
}

.elements-group:not(.collapsed) > .elements-group-header .group-disclosure-triangle {
    transform: rotate(90deg);
}

/* (collapsed state no longer used — groups are always-visible columns) */

.elements-group-count {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 10px;
    font-weight: 400;
}

.element-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    cursor: pointer;
    transition: all var(--transition-fast);
    border-left: 3px solid transparent;
    min-height: 26px;
    font-size: var(--font-size-xs);
}

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

.element-item.selected {
    background: rgba(255, 230, 0, 0.18);
    box-shadow: 0 0 0 3px rgba(255, 210, 0, 0.35);
    border-left-color: rgba(200, 170, 0, 0.5);
}

.element-item[draggable="true"] {
    cursor: grab;
}

.element-item.dragging {
    opacity: 0.4;
    cursor: grabbing;
}

.element-item.drag-over-above {
    box-shadow: 0 -2px 0 0 var(--color-primary);
}

.element-item.drag-over-below {
    box-shadow: 0 2px 0 0 var(--color-primary);
}

.element-item-hidden {
    opacity: 0.4;
}

.element-item-hidden .element-item-label {
    text-decoration: line-through;
}

.element-item-hidden .element-action-btn.hide-series {
    opacity: 1;
}

.element-item-swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

.element-item-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    font-weight: 700;
}

.element-item-label {
    flex: 1;
    font-size: var(--font-size-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.element-item-toggle {
    flex-shrink: 0;
    margin-left: auto;
}

.element-item-actions {
    display: none;
    gap: 2px;
    flex-shrink: 0;
}

.element-item:hover .element-item-actions {
    display: flex;
}

.element-action-btn {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    cursor: pointer;
    color: var(--text-tertiary);
    padding: 0;
    transition: all var(--transition-fast);
}

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

.element-action-btn.delete:hover {
    color: var(--color-error);
    border-color: var(--color-error);
}

/* ================================
   Element Detail Pane (in right settings panel)
   ================================ */
.element-detail-pane {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--bg-primary);
    display: none;
}

.element-detail-pane.active {
    display: block;
}

/* Hide empty message when a detail pane is active — toggled by JS */
.panel-elements.has-selection .element-settings-empty {
    display: none;
}

#series-inline-detail.element-detail-pane {
    border-top: none;
}

.element-detail-pane .inline-editor-header {
    padding: 6px var(--spacing-md);
    background: var(--bg-tertiary);
    font-size: var(--font-size-xs);
    font-weight: 600;
    border-bottom: 1px solid var(--border-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}

.element-detail-pane .inline-editor-title {
    font-weight: 600;
}

.element-detail-pane .inline-editor-info {
    margin-left: 4px;
    font-size: 13px;
    color: var(--text-tertiary);
    cursor: help;
    opacity: 0.6;
}

.element-detail-pane .inline-editor-info:hover {
    opacity: 1;
}

/* Override popup chrome when rendered inline */
.element-detail-pane .context-popup-header {
    display: none;
}

.element-detail-pane .line-context-menu,
.element-detail-pane .axis-context-menu,
.element-detail-pane .arrow-editor-popup,
.element-detail-pane .zone-editor-popup,
.element-detail-pane .image-editor-popup {
    position: static !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    background: transparent !important;
}

/* Hide close buttons, duplicate/delete in inline editors (panel has its own) */
.element-detail-pane .context-popup-close {
    display: none;
}

.element-detail-pane .arrow-editor-header,
.element-detail-pane .zone-editor-header,
.element-detail-pane .image-editor-header {
    display: none;
}

/* Compact sections for settings panel */
.element-detail-pane .context-section {
    padding: var(--spacing-xs) var(--spacing-sm);
}

.element-detail-pane .context-row {
    flex-wrap: wrap;
}

/* Color picker dropdown needs to escape panel overflow */
.element-detail-pane .color-palette-dropdown {
    z-index: 2100;
    position: fixed;
}

/* Titles & Captions inline editor */
.titles-item {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-bottom: 1px solid var(--border-light);
}

.titles-item:last-child {
    border-bottom: none;
}

.titles-item-focused {
    background: rgba(255, 230, 0, 0.1);
}

.titles-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.titles-item-label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-secondary);
}

.titles-edit-btn {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 1px 6px;
    font-size: 12px;
    line-height: 1;
}

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

.titles-item-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

.titles-size-input {
    width: 42px;
    padding: 2px 4px;
    font-size: var(--font-size-xs);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    text-align: center;
}

.titles-size-unit {
    font-size: 10px;
    color: var(--text-tertiary);
    margin-right: 4px;
}

.titles-color-swatch {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    flex-shrink: 0;
}

.titles-color-swatch:hover {
    box-shadow: 0 0 0 2px var(--color-primary);
}

/* Footnote section headers */
.footnote-section-header {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-secondary);
    padding: 6px 8px 3px;
    margin-top: 4px;
    border-top: 1px solid var(--border-light);
}

.footnote-section-header:first-child {
    border-top: none;
    margin-top: 0;
}

/* ================================
   Shared Panel Styles
   ================================ */
.panel {
    padding: var(--spacing-md);
    border-bottom: 2px solid var(--border-color);
}

.panel:last-child {
    border-bottom: none;
}

.panel-title {
    margin: 0 0 var(--spacing-md) 0;
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}

/* Options panel — collapsible */
.options-panel {
    border-top: 2px solid var(--border-color);
    background: var(--bg-secondary);
}

.options-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    margin-bottom: 0;
}
.options-toggle:hover { color: var(--color-primary); }

.options-chevron {
    margin-left: auto;
    font-size: 10px;
    transition: transform var(--transition-fast, 0.15s ease);
    color: var(--text-secondary);
}
.options-panel:not(.collapsed) .options-chevron { transform: rotate(90deg); }

.options-body {
    margin-top: var(--spacing-md);
    overflow: hidden;
}
.options-panel.collapsed .options-body { display: none; }

/* Indicator dot when options are active but panel is collapsed */
.options-toggle .options-active-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary);
    flex-shrink: 0;
    display: none;
}
.options-panel.collapsed .options-active-dot { display: inline-block; }

/* ================================
   Search Panel
   ================================ */
.search-input-wrapper {
    display: flex;
    gap: var(--spacing-xs);
}

.search-input-wrapper input {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    outline: none;
    transition: border-color var(--transition-fast);
}

.search-input-wrapper input:focus {
    border-color: var(--color-primary);
}

.fred-links-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--spacing-xs);
}

.fred-browse-link {
    font-size: var(--font-size-xs);
    color: var(--color-primary);
    cursor: pointer;
    text-decoration: none;
}

.fred-browse-link:hover {
    text-decoration: underline;
    color: var(--color-primary-dark);
}

.example-btn {
    display: inline-block;
    margin-top: 0;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    cursor: pointer;
    text-decoration: none;
}

.example-btn:hover {
    text-decoration: underline;
    color: var(--color-primary-dark);
}

.search-results {
    margin-top: var(--spacing-md);
    max-height: 300px;
    overflow-y: auto;
}

.search-result-item {
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.search-result-item:hover {
    background: var(--bg-hover);
    border-color: var(--color-primary);
}

.search-result-item.selected {
    background: #e8f0fa;
    border-color: var(--color-primary);
}

.result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xs);
}

.result-id {
    font-weight: 600;
    color: var(--color-primary);
    font-size: var(--font-size-sm);
}

.result-frequency {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 3px;
}

.result-nsa-badge {
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: #d32f2f;
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 0.5px;
}

.search-result-item.nsa-warning {
    border-color: #ef9a9a;
}

.search-result-item.nsa-warning:hover {
    border-color: #d32f2f;
}

.result-title {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.3;
}

.loading-indicator {
    padding: var(--spacing-md);
    text-align: center;
    color: var(--text-secondary);
}

.error-message {
    padding: var(--spacing-md);
    color: var(--color-error);
    font-size: var(--font-size-sm);
}

.empty-message {
    padding: var(--spacing-md);
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
    text-align: center;
}

/* ================================
   Options Panel
   ================================ */
.option-group {
    margin-bottom: var(--spacing-md);
}

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

.option-group label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
}

.option-group select,
.option-group input[type="number"],
.option-group input[type="date"] {
    width: 100%;
    padding: var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    background: var(--bg-primary);
    outline: none;
    transition: border-color var(--transition-fast);
}

.option-group select:focus,
.option-group input:focus {
    border-color: var(--color-primary);
}

.ref-date-custom {
    margin-top: var(--spacing-xs);
}

.smoothing-row {
    display: flex;
    gap: var(--spacing-xs);
    align-items: center;
}

.smoothing-row select {
    flex: 1;
    min-width: 0;
}

.ma-window-inline {
    display: flex;
    gap: var(--spacing-xs);
    align-items: center;
    white-space: nowrap;
}

.ma-window-inline input {
    width: 52px;
    text-align: center;
}

.ma-unit {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.hp-lambda-label {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

#hp-lambda {
    width: 72px;
    text-align: center;
}

.units-hint {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin-top: 3px;
    line-height: 1.3;
    font-style: italic;
}

.units-hint:empty {
    display: none;
}

.option-divider {
    height: 1px;
    background: var(--border-light);
    margin: var(--spacing-md) 0;
}

.natural-units-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: 400;
}

.natural-units-inline input[type="checkbox"] {
    width: auto;
    margin: 0;
    cursor: pointer;
}

/* ================================
   Series Panel
   ================================ */
.series-list {
    margin-bottom: var(--spacing-md);
}

.series-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-xs);
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 2px solid transparent;
}

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

.series-item.active {
    background: #e3f2fd;
    border-color: var(--color-primary);
}

/* Editing series indicator / dropdown */
.editing-series-indicator {
    font-weight: 400;
    font-size: var(--font-size-xs);
    color: var(--color-primary);
    text-transform: none;
    letter-spacing: normal;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.editing-series-prefix {
    pointer-events: none;
}

.editing-series-select {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-primary);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 3px;
    padding: 1px 4px;
    cursor: pointer;
    max-width: 140px;
    text-overflow: ellipsis;
    user-select: auto;
    pointer-events: auto;
    position: relative;
    z-index: 1;
}

.editing-series-select:hover {
    border-color: var(--color-primary);
}

.editing-series-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
}


.series-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    flex-shrink: 0;
}

.series-id {
    flex: 1;
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.series-remove {
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0 4px;
    transition: color var(--transition-fast);
}

.series-remove:hover {
    color: var(--color-error);
}

.add-series-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

/* ================================
   Buttons
   ================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    outline: none;
}

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

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

.btn-primary:hover:not(:disabled) {
    background: var(--color-primary-dark);
}

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

.btn-secondary:hover:not(:disabled) {
    background: var(--bg-tertiary);
}

.btn-block {
    width: 100%;
}

.btn-sm {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
}

/* Export Dropdown */
.export-dropdown-wrapper {
    position: relative;
}

.export-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 160px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    z-index: 1000;
    padding: var(--spacing-xs) 0;
}

.export-dropdown-menu.open {
    display: block;
}

.export-dropdown-label {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.export-dropdown-item {
    display: block;
    padding: var(--spacing-xs) var(--spacing-md);
    color: var(--text-primary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    cursor: pointer;
    white-space: nowrap;
}

.export-dropdown-item:hover {
    background: var(--bg-hover);
    color: var(--color-primary);
}

.export-dropdown-divider {
    height: 1px;
    background: var(--border-color);
    margin: var(--spacing-xs) 0;
}

.btn-icon {
    background: none;
    border: none;
    padding: var(--spacing-sm);
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--border-radius);
    transition: all var(--transition-fast);
}

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

.btn-header {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid transparent;
    padding: 5px 12px;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--border-radius);
    font-size: 13px;
    transition: all var(--transition-fast);
}

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

.btn-export {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
    padding: var(--spacing-sm) var(--spacing-lg);
}

.btn-export:hover:not(:disabled) {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

.btn-export .btn-icon {
    font-weight: 700;
    background: none;
    padding: 0;
}

.btn-export .btn-label {
    font-size: var(--font-size-xs);
    opacity: 0.8;
}

.btn-gif {
    flex-direction: column;
    padding: var(--spacing-sm);
}

/* ================================
   Chart Area
   ================================ */
.chart-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--spacing-lg);
    overflow-x: hidden;
    overflow-y: auto;
    font-family: var(--font-family);
}

.chart-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: auto;
    transition: width 0.2s ease, height 0.2s ease;
}

.chart-title-area {
    padding: var(--spacing-md) var(--spacing-lg) var(--spacing-xs) var(--spacing-lg);
    background: transparent;
    font-family: var(--font-family);
}

.chart-title {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-primary);
    cursor: pointer;
    transition: color var(--transition-fast);
    overflow-wrap: break-word;
    word-wrap: break-word;
    /* Match SVG <text> line-height used in the export pipeline
       (export.js: titleLineHeight = titleSize * 1.3) so the live
       chart and the captured PNG agree on title height. Otherwise
       the chart-group is translated by the (taller) HTML measurement
       and a gap appears above the plot in social/PNG exports. */
    line-height: 1.3;
}

.chart-title:hover {
    color: var(--color-primary);
}

.chart-title span[style*="background-color"],
.chart-description span[style*="background-color"] {
    padding: 1px 2px;
    border-radius: 2px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.chart-description {
    margin: 0;
    font-size: 17px;
    color: var(--text-primary);
    cursor: pointer;
    transition: color var(--transition-fast);
    overflow-wrap: break-word;
    word-wrap: break-word;
    /* Match SVG <text> line-height in the export pipeline (1.3) */
    line-height: 1.3;
}

.chart-description:not(:empty) {
    margin: var(--spacing-xs) 0 0 0;
}

.chart-description:hover {
    color: var(--color-primary);
}

.chart-subtitle {
    margin: var(--spacing-xs) 0 0 0;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: color var(--transition-fast);
    /* Match SVG <text> line-height in the export pipeline (1.3) so
       the live chart and captured PNG agree on subtitle height. */
    line-height: 1.3;
}

.chart-subtitle:hover {
    color: var(--color-primary);
}

.chart-subtitle-split {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    /* padding-left/right set dynamically by TitleManager to align with Y1/Y2 axes */
    /* Negative margins compensate for parent .chart-title-area padding */
    margin-left: calc(-1 * var(--spacing-lg));
    margin-right: calc(-1 * var(--spacing-lg));
    width: calc(100% + 2 * var(--spacing-lg));
}

.chart-subtitle-split .subtitle-left {
    text-align: left;
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chart-subtitle-split .subtitle-right {
    text-align: right;
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Lift overflow constraints when editing a split subtitle span */
.chart-subtitle-split .subtitle-left[contenteditable="true"],
.chart-subtitle-split .subtitle-right[contenteditable="true"] {
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
}

/* Series Info Tooltip (appears above footer on FRED link hover) */
.series-info-tooltip {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
    padding: var(--spacing-md);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: var(--text-primary);
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 4px;
    pointer-events: none;
}

.series-info-tooltip.visible {
    display: block;
}

.series-info-tooltip .tooltip-header {
    font-weight: 700;
    font-size: var(--font-size-md);
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
}

.series-info-tooltip .tooltip-meta {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

.series-info-tooltip .tooltip-units {
    color: var(--text-secondary);
    font-style: italic;
    margin-bottom: var(--spacing-sm);
}

.series-info-tooltip .tooltip-notes {
    color: var(--text-secondary);
    border-top: 1px solid var(--border-light);
    padding-top: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    white-space: pre-wrap;
    word-wrap: break-word;
}

.series-info-tooltip .tooltip-notes a {
    color: var(--color-primary);
    text-decoration: none;
}

.series-info-tooltip .tooltip-notes a:hover {
    text-decoration: underline;
}

/* FRED series link hover indicator */
.fred-series-link-item {
    cursor: pointer;
    border-bottom: 1px dotted transparent;
    transition: border-color 0.15s;
}

.fred-series-link-item:hover {
    border-bottom-color: var(--color-primary);
}

.chart-title-area {
    position: relative;
}

.main-chart {
    flex: 1;
    min-height: 300px;
    /* No padding here - chart has internal margins and annotations need 1:1 coordinate mapping */
}

.chart-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-tertiary);
    font-size: var(--font-size-lg);
}

/* ================================
   Chart Footer with Attribution
   ================================ */
.chart-footer {
    padding: var(--spacing-sm) var(--spacing-lg);
    background: transparent;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    line-height: 1.6;
    flex-shrink: 0;
}

.chart-attribution {
    display: inline;
}

.attribution-item {
    white-space: normal;
}

.attribution-item a,
.footnote-link {
    color: var(--color-primary);
    text-decoration: none;
    cursor: pointer;
}

.attribution-item a:hover,
.footnote-link:hover {
    text-decoration: underline;
}

.attribution-separator {
    color: var(--text-tertiary);
    margin: 0 2px;
}

.footnote-link.disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* ================================
   Series Notes (under navigator)
   ================================ */
.series-notes {
    font-size: 11px;
    color: #666;
    line-height: 1.4;
    max-height: 120px;
    overflow-y: auto;
    padding: var(--spacing-sm) var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.series-notes strong {
    color: #333;
}

.series-notes:empty {
    display: none;
}

.series-notes a {
    color: var(--color-primary);
    text-decoration: none;
}

.series-notes a:hover {
    text-decoration: underline;
}


/* ================================
   Time Range Controls
   ================================ */
.time-range-controls {
    padding: var(--spacing-xs) var(--spacing-lg);
}

.range-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

.range-buttons {
    display: flex;
    gap: var(--spacing-xs);
    align-items: center;
    white-space: nowrap;
}

.range-separator {
    width: 1px;
    height: 24px;
    background: var(--border-color);
    margin: 0 var(--spacing-xs);
    flex-shrink: 0;
}

.date-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-right: var(--spacing-xs);
}

.range-btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.range-btn:hover {
    background: var(--bg-hover);
}

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

.date-range-inputs {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.date-input {
    padding: 2px 4px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    width: 105px;
}

.date-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* Custom month picker popup */
.month-picker-popup {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 8px;
    width: 200px;
    font-size: var(--font-size-sm);
}

.month-picker-year-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-bottom: 8px;
}

.month-picker-nav {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    padding: 2px 6px;
    font-size: 10px;
    color: var(--text-secondary);
    line-height: 1;
}

.month-picker-nav:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.month-picker-year-input {
    width: 60px;
    text-align: center;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 2px 4px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    -moz-appearance: textfield;
}

.month-picker-year-input::-webkit-inner-spin-button,
.month-picker-year-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.month-picker-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
}

.month-picker-btn {
    background: none;
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    padding: 5px 2px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-primary);
    text-align: center;
}

.month-picker-btn:hover {
    background: var(--bg-hover);
    border-color: var(--border-color);
}

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

.recession-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.recession-toggle input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.recession-label {
    white-space: nowrap;
}

.recession-toggle:hover {
    color: var(--text-primary);
}

.navigator-chart {
    height: 70px;
    padding: var(--spacing-sm) var(--spacing-lg);
}

/* Footer content inside SVG foreignObject */
.chart-footer-inner {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    line-height: 1.6;
    font-family: var(--font-family);
}

.chart-caption {
    margin: 0;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color var(--transition-fast);
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.chart-caption:not(:empty) {
    margin: 0 0 var(--spacing-xs) 0;
}

.chart-caption:hover {
    color: var(--color-primary);
}

.chart-source {
    display: inline;
    cursor: pointer;
    transition: color var(--transition-fast);
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.chart-source:hover {
    color: var(--color-primary);
}

.chart-actions-bar {
    padding: var(--spacing-xs) var(--spacing-lg);
    text-align: right;
}

.chart-actions {
    display: inline;
}

/* ================================
   Export Panel
   ================================ */
.export-panel {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-md);
    margin-top: var(--spacing-md);
    background: var(--bg-primary);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
}

.export-options {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-end;
}

.export-options .option-group {
    margin-bottom: 0;
}

.export-options select {
    width: auto;
    min-width: 140px;
}

.dimension-inputs {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.dimension-inputs input {
    width: 70px;
    text-align: center;
}

.dimension-inputs span {
    color: var(--text-tertiary);
}

.export-buttons {
    display: flex;
    gap: var(--spacing-sm);
    margin-left: auto;
}

/* ================================
   D3 Chart Styling
   ================================ */
.chart-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.chart-line {
    fill: none;
    /* stroke-width is set dynamically by JS (per-series lineWidth) */
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Yellow highlighter halo for selected elements */
.chart-line.series-selected,
.chart-line-outline.series-selected,
.chart-area.series-selected,
.chart-bar.series-selected,
.marker-shape.series-selected,
.series-endpoint.series-selected {
    filter: drop-shadow(0 0 10px rgba(255, 255, 0, 0.9)) drop-shadow(0 0 5px rgba(255, 255, 0, 0.8)) drop-shadow(0 0 2px rgba(255, 255, 0, 1));
}

/* Histogram bars */
.histogram-bar {
    transition: fill-opacity 0.15s ease;
}
.histogram-bar:hover {
    fill-opacity: 1 !important;
}
.histogram-label {
    pointer-events: none;
    user-select: none;
}
.kde-curve {
    pointer-events: none;
}

/* X-axis title */
.x-axis-title {
    transition: fill 0.15s ease;
}
.x-axis-title:hover {
    fill: var(--color-primary) !important;
}

/* Histogram tooltip */
.histogram-tooltip {
    font-family: var(--font-family);
    line-height: 1.4;
}

/* Scatterplot tooltip */
.scatter-tooltip {
    font-family: var(--font-family);
    line-height: 1.4;
}

/* Scatterplot point labels */
.scatter-label {
    pointer-events: none;
    user-select: none;
}

/* Scatterplot fit line */
.scatter-fit-line {
    pointer-events: none;
}

/* Scatterplot settings section in context menu */
.scatterplot-settings-section {
    border-top: 1px solid var(--border-color, #e0e0e0);
    padding-top: 4px;
    margin-top: 4px;
}

/* ── Pie / Donut chart ──────────────────────────────────────── */
.pie-slice {
    transition: opacity 0.15s ease;
}

.pie-leader-line {
    pointer-events: none;
}

.pie-label {
    pointer-events: none;
    user-select: none;
}

.pie-center-text {
    pointer-events: none;
    user-select: none;
}

.pie-tooltip {
    font-family: var(--font-family);
    line-height: 1.4;
}

.pie-legend text {
    pointer-events: none;
    user-select: none;
}

/* Pie context menu slice list */
.pie-slice-entry:hover {
    background: var(--bg-hover, rgba(0,0,0,0.04));
}

.pie-slice-entry.pie-slice-hidden .pie-slice-color-swatch {
    opacity: 0.3;
}

/* Editable/draggable pie labels */
.pie-label-overlay {
    cursor: grab;
}

.pie-label-overlay:hover {
    outline: 1px dashed rgba(0,0,0,0.2);
    outline-offset: 2px;
}

.pie-label-overlay:active {
    cursor: grabbing;
}

/* ── Horizontal Bar Chart ─────────────────────────── */
.hbar-tooltip {
    position: fixed;
    z-index: 10000;
    background: rgba(30, 30, 30, 0.92);
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    display: none;
    font-family: var(--font-family);
    line-height: 1.4;
}

.hbar-bar {
    transition: opacity 0.15s ease;
}

.hbar-bar:hover {
    opacity: 0.8;
}

/* Editable hbar labels: show dashed outline on hover */
.hbar-label-overlay:hover {
    outline: 1px dashed rgba(0,0,0,0.2);
    outline-offset: 2px;
}

.hbar-separator {
    pointer-events: none;
}

.hbar-bg {
    pointer-events: none;
}

/* Yellow highlighter halo for selected axes */
.x-axis.axis-selected,
.y-axis.axis-selected,
.y2-axis.axis-selected {
    filter: drop-shadow(0 0 10px rgba(255, 255, 0, 0.9)) drop-shadow(0 0 5px rgba(255, 255, 0, 0.8)) drop-shadow(0 0 2px rgba(255, 255, 0, 1));
}

.x-axis,
.y-axis,
.y2-axis {
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
}

.x-axis path,
.y-axis path,
.y2-axis path {
    stroke: var(--chart-axis);
}

.x-axis line,
.y-axis line,
.y2-axis line {
    stroke: var(--chart-axis);
}

.x-axis text,
.y-axis text,
.y2-axis text {
    fill: var(--text-secondary);
}

.y-grid line,
.x-grid line {
    stroke: var(--chart-gridline);
    stroke-dasharray: 2, 2;
}

.y-grid path,
.x-grid path {
    stroke: none;
}

/* Hover elements */
.hover-line {
    stroke: var(--text-tertiary);
    stroke-width: 1;
    stroke-dasharray: 3, 3;
}

.hover-circle {
    stroke: white;
    stroke-width: 2;
}

.tooltip-background {
    fill: var(--text-primary);
    opacity: 0.9;
}

.tooltip-date,
.tooltip-value {
    fill: white;
    font-size: var(--font-size-sm);
}

.tooltip-value {
    font-weight: 600;
}

/* Navigator styling */
.navigator-svg {
    width: 100%;
}

.navigator-area {
    opacity: 0.3;
}

.navigator-x-axis text {
    font-size: var(--font-size-xs);
    fill: var(--text-tertiary);
}

.navigator-x-axis path,
.navigator-x-axis line {
    stroke: var(--border-color);
}

.brush .selection {
    fill: var(--color-primary);
    fill-opacity: 0.2;
    stroke: var(--color-primary);
}

.brush .handle {
    fill: var(--text-secondary);
}

/* ================================
   Color Picker
   ================================ */
.color-picker-container {
    margin-top: var(--spacing-sm);
}

.color-picker-inline {
    display: inline-block;
}

.color-palette-picker {
    position: relative;
}

.color-swatch-btn {
    width: 36px;
    height: 36px;
    padding: 4px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--bg-primary);
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

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

.swatch-preview {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 2px;
}

.color-palette-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    min-width: 220px;
    padding: var(--spacing-md);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    margin-top: var(--spacing-xs);
}

.color-palette-dropdown.open {
    display: block;
}

.color-picker-close {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    background: none;
    border: none;
    font-size: 20px;
    color: var(--text-tertiary);
    cursor: pointer;
    line-height: 1;
}

.color-picker-close:hover {
    color: var(--text-primary);
}

.palette-section {
    margin-bottom: var(--spacing-md);
}

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

.palette-label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: var(--spacing-sm);
}

.palette-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.color-option {
    width: 32px;
    height: 32px;
    padding: 3px;
    border: 2px solid transparent;
    border-radius: var(--border-radius);
    background: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}

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

.color-option.selected {
    border-color: var(--text-primary);
}

.color-option span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 2px;
}

.variants-section {
    padding: var(--spacing-sm);
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-md);
}

.variants-grid {
    display: flex;
    gap: 4px;
}

.shade-option {
    flex: 1;
    height: 28px;
    padding: 2px;
    border: 2px solid transparent;
    border-radius: var(--border-radius);
    background: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.shade-option:hover {
    transform: scale(1.05);
}

.shade-option.selected {
    border-color: var(--text-primary);
}

.shade-option span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 2px;
}

.custom-color-row {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.custom-color-input {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
}

.hex-input {
    flex: 1;
    padding: var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    font-family: monospace;
}

/* Opacity Slider */
.opacity-section {
    padding-top: var(--spacing-sm);
}

.opacity-row {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.opacity-slider {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(to right, transparent, var(--color-primary));
    border-radius: 3px;
    cursor: pointer;
}

.opacity-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: var(--bg-primary);
    border: 2px solid var(--color-primary);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.opacity-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: var(--bg-primary);
    border: 2px solid var(--color-primary);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.opacity-value {
    min-width: 40px;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    text-align: right;
}

/* ================================
   Rich Text Editor
   ================================ */
.text-editor-popup {
    position: fixed;
    z-index: 2000;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    min-width: 300px;
    max-width: 500px;
}

.text-editor-toolbar {
    display: flex;
    gap: 2px;
    padding: var(--spacing-sm);
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
    flex-wrap: wrap;
}

/* Floating toolbar for inline editing */
.floating-text-toolbar {
    position: fixed;
    z-index: 2000;
    display: flex;
    gap: 2px;
    padding: var(--spacing-sm);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    flex-wrap: wrap;
}

.text-editor-toolbar button,
.floating-text-toolbar button {
    width: 28px;
    height: 28px;
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-base);
    font-weight: 600;
    transition: all var(--transition-fast);
}

.text-editor-toolbar button:hover,
.floating-text-toolbar button:hover {
    background: var(--bg-hover);
    border-color: var(--border-color);
}

.text-editor-toolbar button.active,
.floating-text-toolbar button.active {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

.icon-bold {
    font-weight: 700;
}

.icon-italic {
    font-style: italic;
}

.toolbar-separator {
    width: 1px;
    height: 20px;
    background: var(--border-color);
    margin: 0 var(--spacing-xs);
    align-self: center;
}

.toolbar-font-size-combo {
    position: relative;
    display: flex;
    align-items: center;
}

.toolbar-font-size-input {
    width: 50px;
    height: 26px;
    padding: 2px var(--spacing-xs);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    font-size: var(--font-size-xs);
    text-align: center;
}

.toolbar-font-size-dropdown-btn {
    width: 20px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-left: none;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    background: var(--bg-secondary);
    font-size: 8px;
    cursor: pointer;
}

.toolbar-font-size-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 2px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    z-index: 100;
    max-height: 240px;
    overflow-y: auto;
}

.toolbar-font-size-dropdown.open {
    display: block;
}

.font-size-option {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
    cursor: pointer;
    text-align: center;
}

.font-size-option:hover {
    background: var(--bg-secondary);
}

.toolbar-color-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.toolbar-color-input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.toolbar-color-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.color-icon.text-color {
    font-size: var(--font-size-base);
    font-weight: 700;
    border-bottom: 3px solid #1a1a1a;
    padding-bottom: 1px;
}

.color-icon.bg-color {
    font-size: var(--font-size-base);
    font-weight: 700;
    background: #ffff00;
    padding: 2px 4px;
}

/* Alignment toggle button */
.toolbar-align-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toolbar-align-btn:hover {
    background: var(--bg-hover);
    border-color: var(--border-color);
}

.align-icon {
    font-size: 16px;
    color: var(--text-primary);
}

.toolbar-align-btn svg {
    display: block;
    color: var(--text-secondary);
}

.toolbar-align-btn:hover svg {
    color: var(--text-primary);
}

/* Outline toggle button */
.toolbar-outline-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toolbar-outline-btn:hover {
    background: var(--bg-hover);
    border-color: var(--border-color);
}

.toolbar-outline-btn svg {
    display: block;
    color: var(--text-secondary);
}

.toolbar-outline-btn:hover svg {
    color: var(--text-primary);
}

.toolbar-outline-btn.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
}

.toolbar-outline-btn.active svg {
    color: white;
}

.text-editor-input-wrapper {
    padding: var(--spacing-sm);
}

.text-editor-input {
    min-height: 40px;
    padding: var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-family: var(--font-family);
    font-size: var(--font-size-lg);
    outline: none;
}

.text-editor-input:focus {
    border-color: var(--color-primary);
}

/* Inline editing indicators — shown when text elements are contentEditable */
.chart-title[contenteditable="true"],
.chart-description[contenteditable="true"],
.chart-subtitle[contenteditable="true"],
.chart-subtitle-split .subtitle-left[contenteditable="true"],
.chart-subtitle-split .subtitle-right[contenteditable="true"],
.chart-caption[contenteditable="true"],
.chart-source[contenteditable="true"] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--border-radius);
    cursor: text;
    user-select: text;
    min-height: 1em;
}

/* Placeholder text for empty contentEditable elements */
.chart-title[contenteditable="true"]:empty::before,
.chart-description[contenteditable="true"]:empty::before,
.chart-caption[contenteditable="true"]:empty::before,
.context-input[contenteditable="true"][data-placeholder]:empty::before {
    content: attr(data-placeholder);
    color: #bbb;
    font-style: italic;
    font-weight: 400;
    pointer-events: none;
}

/* Suppress hover color change during editing */
.chart-title[contenteditable="true"]:hover,
.chart-description[contenteditable="true"]:hover,
.chart-subtitle[contenteditable="true"]:hover,
.chart-subtitle-split .subtitle-left[contenteditable="true"]:hover,
.chart-subtitle-split .subtitle-right[contenteditable="true"]:hover,
.chart-caption[contenteditable="true"]:hover,
.chart-source[contenteditable="true"]:hover {
    color: inherit;
}

.annotation-text[contenteditable="true"],
.zone-label-content[contenteditable="true"],
.chart-label-overlay[contenteditable="true"] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    cursor: text;
    user-select: text;
}

/* Label overlays — for labels rendered as HTML inside SVG foreignObject */
.chart-label-overlay {
    pointer-events: auto;
    cursor: default;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Annotation Controls in Rich Text Editor Popup */
.annotation-controls-section {
    padding: var(--spacing-sm) var(--spacing-md);
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
    border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
}

.annotation-controls-section .control-row {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.annotation-controls-section .control-row:last-child {
    margin-bottom: 0;
}

.annotation-controls-section label {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    display: block;
    margin-bottom: 4px;
}

/* Anchor and offset on same row */
.anchor-offset-row {
    display: flex;
    gap: var(--spacing-lg);
}

.coords-section,
.anchor-section,
.offset-section {
    display: flex;
    flex-direction: column;
}

/* Coordinates display */
.coords-display {
    font-size: var(--font-size-xs);
    line-height: 1.4;
}

.coord-row {
    display: flex;
    gap: 4px;
}

.coord-label {
    color: var(--text-tertiary);
    min-width: 36px;
}

.coord-value {
    color: var(--text-primary);
    font-family: var(--font-mono, monospace);
}

.coord-input {
    width: 90px;
    height: 22px;
    padding: 2px 4px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-xs);
    font-family: var(--font-mono, monospace);
    color: var(--text-primary);
}

.coord-input:focus {
    border-color: var(--color-primary);
    outline: none;
}

.offset-inputs-stacked {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.offset-input-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.offset-input-row span {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    min-width: 14px;
}

.annotation-controls-section .offset-input {
    width: 50px;
    height: 24px;
    padding: 2px var(--spacing-xs);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-xs);
    text-align: center;
}

.annotation-controls-section .actions-row {
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px dashed var(--border-color);
}

.annotation-action-btn {
    flex: 1;
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--bg-primary);
    font-size: var(--font-size-xs);
    cursor: pointer;
    transition: all var(--transition-fast);
}

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

.annotation-action-btn.delete-btn {
    color: var(--color-error);
}

.annotation-action-btn.delete-btn:hover {
    background: #fef2f2;
    border-color: var(--color-error);
}

/* ================================
   Loading Overlay
   ================================ */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 3000;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.loading-text {
    margin-top: var(--spacing-md);
    color: var(--text-secondary);
    font-size: var(--font-size-base);
}

/* ================================
   Modal
   ================================ */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
}

.modal-content {
    background: var(--bg-primary);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    min-width: 300px;
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: visible;
}

.modal-content h3 {
    margin: 0 0 var(--spacing-lg) 0;
    font-size: var(--font-size-lg);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.modal-header h3 {
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-tertiary);
    cursor: pointer;
    line-height: 1;
}

.modal-close:hover {
    color: var(--text-primary);
}

.modal-body {
    margin-bottom: var(--spacing-lg);
    overflow: visible;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
}

/* Settings Modal - Compact */
.modal-settings {
    width: 540px;
    padding: var(--spacing-lg);
    overflow: visible;
    display: flex;
    flex-direction: column;
    max-height: 85vh;
}

.modal-settings .modal-body {
    overflow-y: auto;
    overflow-x: visible;
    flex: 1;
    min-height: 0;
}

.modal-settings .modal-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--border-color, #e0e0e0);
    padding-top: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.modal-settings .settings-row {
    position: relative;
}

.modal-settings .color-picker-inline {
    position: relative;
}

.modal-settings .color-palette-dropdown {
    z-index: 3001;
}

.settings-compact .settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--border-light);
}

.settings-compact .settings-row:last-child {
    border-bottom: none;
}

.setting-preview {
    flex: 1;
    min-width: 120px;
}

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

/* Toggle buttons for bold, italic, alignment */
.btn-toggle {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--bg-primary);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

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

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

.setting-input-xs {
    width: 50px;
    padding: var(--spacing-xs);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    text-align: center;
}

.setting-input-sm {
    width: 100px;
    padding: var(--spacing-xs);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
}

.setting-input-md {
    width: 140px;
    padding: var(--spacing-xs);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
}

.setting-input-lg {
    width: 180px;
    padding: var(--spacing-xs);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
}

.setting-slider {
    width: 100px;
}

.settings-divider {
    height: 1px;
    background: var(--border-color);
    margin: var(--spacing-md) 0;
}

.theme-row {
    gap: var(--spacing-sm);
}

.theme-row label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* Embed Modal */
.embed-textarea {
    width: 100%;
    padding: var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-family: monospace;
    font-size: var(--font-size-sm);
    resize: vertical;
    margin-bottom: var(--spacing-md);
}

.progress-bar {
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: var(--spacing-md);
}

.progress-fill {
    height: 100%;
    background: var(--color-primary);
    transition: width var(--transition-normal);
}

#gif-status {
    margin-bottom: var(--spacing-lg);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

/* ================================
   Responsive
   ================================ */
@media (max-width: 1024px) {
    .panel-data-collection {
        width: 240px;
    }

    .panel-elements {
        width: 200px;
    }

    .export-panel {
        flex-wrap: wrap;
    }

    .range-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .date-range-inputs {
        margin-top: var(--spacing-sm);
    }
}

@media (max-width: 768px) {
    .app-main {
        flex-direction: column;
    }

    .panel-data-collection,
    .panel-elements {
        width: 100%;
        max-height: 30vh;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }

    .chart-area {
        padding: var(--spacing-md);
    }

    .export-panel {
        flex-direction: column;
        align-items: stretch;
    }

    .export-buttons {
        margin-left: 0;
        justify-content: center;
    }

    .chart-footer {
        text-align: center;
    }
}

/* ================================
   Annotations
   ================================ */
.annotations-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
}

.annotation-wrapper {
    position: absolute;
    pointer-events: auto;
    cursor: move;
    user-select: none;
}

.annotation-wrapper.selected {
    outline: 2px dashed var(--color-primary);
    outline-offset: 2px;
    box-shadow: 0 0 12px 6px rgba(255, 255, 0, 0.6), 0 0 4px 2px rgba(255, 255, 0, 0.8);
    background-color: rgba(255, 255, 0, 0.15);
}

.annotation-text {
    min-width: 50px;
    min-height: 20px;
    white-space: pre-wrap;
    word-wrap: break-word;
    outline: none;
}

.annotation-text span[style*="background-color"] {
    padding: 1px 2px;
    border-radius: 2px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.annotation-text:focus {
    outline: none;
    cursor: text;
}

.annotation-text[contenteditable="true"] {
    cursor: text;
    user-select: text;
}

/* Resize handles */
.annotation-resize-handle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    border: 1px solid white;
    border-radius: 2px;
    z-index: 10;
}

.resize-nw { top: -4px; left: -4px; cursor: nw-resize; }
.resize-n { top: -4px; left: 50%; margin-left: -4px; cursor: n-resize; }
.resize-ne { top: -4px; right: -4px; cursor: ne-resize; }
.resize-e { top: 50%; right: -4px; margin-top: -4px; cursor: e-resize; }
.resize-se { bottom: -4px; right: -4px; cursor: se-resize; }
.resize-s { bottom: -4px; left: 50%; margin-left: -4px; cursor: s-resize; }
.resize-sw { bottom: -4px; left: -4px; cursor: sw-resize; }
.resize-w { top: 50%; left: -4px; margin-top: -4px; cursor: w-resize; }

/* Chart Toolbar */
.chart-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius);
    width: 100%;
}

.toolbar-spacer {
    flex: 1;
}

.toolbar-font-scale {
    display: flex;
    align-items: center;
    gap: 2px;
}

.toolbar-font-scale-label {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    min-width: 36px;
    text-align: center;
    user-select: none;
    cursor: default;
}

.toolbar-chart-type {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    position: relative;
}



/* Chart type picker popup */
.chart-type-popup {
    position: fixed;
    z-index: 3000;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
    padding: 4px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    width: 200px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.12s ease, transform 0.12s ease;
    pointer-events: none;
}

.chart-type-popup.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.chart-type-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border: none;
    border-radius: var(--border-radius);
    background: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s ease;
    position: relative;
}

.chart-type-option:hover {
    background: var(--bg-hover);
}

.chart-type-option.active {
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.chart-type-option.active::after {
    content: '';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background: var(--color-primary);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}

.chart-type-preview {
    width: 36px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 4px;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
}

.chart-type-option.active .chart-type-preview {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 6%, var(--bg-secondary));
}

.chart-type-preview svg {
    width: 100%;
    height: 100%;
}

.chart-type-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.chart-type-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
}

.chart-type-desc {
    font-size: 10px;
    color: var(--text-tertiary);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.toolbar-aspect-ratio {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.toolbar-select {
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-xs);
    background: var(--bg-primary);
    color: var(--text-secondary);
    cursor: pointer;
}

.toolbar-select:focus {
    border-color: var(--color-primary);
    outline: none;
}

.toolbar-custom-dims {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.toolbar-dim-input {
    width: 60px;
    padding: 3px 6px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-xs);
    background: var(--bg-primary);
}

.toolbar-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--bg-primary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

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

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

.toolbar-icon {
    font-size: 16px;
    font-weight: 700;
    font-family: Georgia, serif;
}

/* ================================
   Tab Bar
   ================================ */
.tab-bar {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 4px var(--spacing-md) 0;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    min-height: 34px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    flex-shrink: 0;
    margin-bottom: var(--spacing-sm);
}

.tab-list {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.tab-list::-webkit-scrollbar {
    display: none;
}

.tab-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px 4px 12px;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    cursor: pointer;
    border: 1px solid var(--border-light);
    border-bottom: none;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    background: var(--bg-tertiary);
    white-space: nowrap;
    transition: background var(--transition-fast), color var(--transition-fast);
    user-select: none;
    position: relative;
    max-width: 200px;
}

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

.tab-item.active {
    background: var(--bg-primary);
    color: var(--text-primary);
    border-color: var(--border-color);
    font-weight: 500;
    /* Overlap the tab-bar bottom border so it looks connected */
    margin-bottom: -1px;
    padding-bottom: 5px;
}

.tab-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 160px;
    min-width: 0;
}

.tab-close {
    display: none;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    border-radius: 2px;
    flex-shrink: 0;
}

.tab-item:hover .tab-close,
.tab-item.active .tab-close {
    display: flex;
}

.tab-close:hover {
    background: var(--color-error);
    color: white;
}

.tab-add {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-left: 2px;
    padding: 0;
    border: 1px solid var(--border-light);
    border-bottom: none;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
    align-self: flex-end;
}

.tab-add:hover {
    background: var(--bg-hover);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.tab-add.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.tab-rename-input {
    width: 120px;
    min-width: 60px;
    padding: 1px 4px;
    border: 1px solid var(--color-primary);
    border-radius: 2px;
    font-size: var(--font-size-sm);
    font-family: var(--font-family);
    color: var(--text-primary);
    background: var(--bg-primary);
    outline: none;
}

.tab-dragging {
    opacity: 0.4;
    cursor: grabbing;
}

.tab-drag-over {
    border-left: 2px solid var(--color-primary);
    margin-left: -2px;
}

/* Selected tab highlight */
.tab-item.tab-selected {
    background: #e8f0fe;
    color: var(--color-primary);
    border-color: var(--color-primary);
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

/* Selection strip — appears to the right of tabs when 2+ are selected */
.tab-selection-strip {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-left: auto;
    padding: 0 var(--spacing-sm);
    border-left: 1px solid var(--border-color);
    flex-shrink: 0;
}

.tab-selection-count {
    font-size: var(--font-size-xs);
    color: var(--color-primary);
    font-weight: 500;
    white-space: nowrap;
}

.tab-selection-hint {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    white-space: nowrap;
    opacity: 0.8;
}

.tab-clear-selection-btn {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: var(--border-radius);
    white-space: nowrap;
}

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

/* ================================
   Bulk Edit Modal
   ================================ */
.modal-tab-bulk-edit {
    width: 560px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.tbe-header-text h3 {
    margin: 0 0 2px;
}

.tbe-subhead {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin: 0;
}

.tbe-skip-note {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius);
    padding: 6px 10px;
    margin-bottom: var(--spacing-sm);
}

.tbe-footer {
    justify-content: flex-end;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.tbe-warning {
    font-size: var(--font-size-xs);
    color: var(--color-warning, #b45309);
    flex: 1;
    min-width: 0;
}

/* Inline color palette picker – compact variant used to replace native inputs */
.color-palette-picker--inline {
    display: inline-block;
    vertical-align: middle;
}
.color-palette-picker--inline .color-swatch-btn {
    width: 28px;
    height: 24px;
    padding: 3px;
}
/* Inside settings rows, context rows, brand-swatch editors */
.setting-controls .color-palette-picker--inline,
.context-row .color-palette-picker--inline,
.brand-swatch-editor .color-palette-picker--inline {
    flex-shrink: 0;
}

.setting-inline-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    cursor: pointer;
}

/* Annotation mode cursor */
.main-chart.annotation-mode {
    cursor: crosshair;
}

/* Arrow mode cursor */
.main-chart.arrow-mode {
    cursor: crosshair;
}

.main-chart.arrow-mode-end {
    cursor: crosshair;
}

/* Arrow SVG styles */
.arrows-layer .arrow-element {
    cursor: pointer;
}

.arrows-layer .arrow-element.selected .arrow-path {
    stroke-dasharray: none;
    filter: drop-shadow(0 0 10px rgba(255, 255, 0, 0.9)) drop-shadow(0 0 5px rgba(255, 255, 0, 0.8)) drop-shadow(0 0 2px rgba(255, 255, 0, 1));
}

.arrows-layer .arrow-handle {
    cursor: move;
    transition: filter var(--transition-fast);
}

.arrows-layer .arrow-handle:hover {
    filter: drop-shadow(0 0 3px rgba(0, 102, 179, 0.6));
}

.arrows-layer .arrow-label {
    pointer-events: auto;
    cursor: text;
}

/* Arrow Editor Popup */
.arrow-editor-popup {
    position: fixed;
    z-index: 2000;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    min-width: 300px;
    max-width: 360px;
    font-size: var(--font-size-sm);
}

.arrow-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
    font-weight: 600;
    cursor: move;
    user-select: none;
}

.arrow-editor-close {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: var(--text-tertiary);
    padding: 0;
    line-height: 1;
}

.arrow-editor-close:hover {
    color: var(--text-primary);
}

.arrow-editor-section {
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--border-light);
}

.arrow-editor-section:last-of-type {
    border-bottom: none;
}

.arrow-editor-section-title {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: var(--spacing-xs);
    letter-spacing: 0.5px;
}

.arrow-editor-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
    flex-wrap: wrap;
}

.arrow-editor-row:last-child {
    margin-bottom: 0;
}

.arrow-editor-label {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    min-width: 40px;
}

.arrow-editor-input {
    width: 55px;
    padding: 4px 6px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-xs);
    text-align: center;
    background: var(--bg-primary);
}

.arrow-editor-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.arrow-editor-input.arrow-date-input {
    width: 85px;
}

.arrow-editor-select {
    flex: 1;
    min-width: 80px;
    padding: 4px 6px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-xs);
    background: var(--bg-primary);
    cursor: pointer;
}

.arrow-editor-select:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* Arrowhead Picker (custom dropdown with SVG previews) */
.arrowhead-picker {
    position: relative;
    flex: 1;
    min-width: 80px;
}

.arrowhead-picker-selected {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-xs);
    background: var(--bg-primary);
    cursor: pointer;
    user-select: none;
}

.arrowhead-picker-selected:hover {
    border-color: var(--color-primary);
}

.arrowhead-picker.open .arrowhead-picker-selected {
    border-color: var(--color-primary);
}

.arrowhead-picker-caret {
    margin-left: auto;
    font-size: 8px;
    opacity: 0.5;
}

.arrowhead-picker-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin-top: 2px;
    max-height: 200px;
    overflow-y: auto;
}

.arrowhead-picker.open .arrowhead-picker-dropdown {
    display: block;
}

.arrowhead-picker-option {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    font-size: var(--font-size-xs);
    cursor: pointer;
    white-space: nowrap;
}

.arrowhead-picker-option:hover {
    background: var(--bg-hover);
}

.arrowhead-picker-option.selected {
    background: var(--bg-selected, var(--bg-hover));
    font-weight: 600;
}

/* Match Line Color Checkbox */
.arrow-editor-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}

.arrow-editor-checkbox-label input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--color-primary);
}

.arrow-editor-checkbox-label span {
    line-height: 1;
}

/* Curve Amount Slider */
.curve-amount-slider {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border-color);
    border-radius: 2px;
    cursor: pointer;
}

.curve-amount-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: var(--color-primary);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.curve-amount-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: var(--color-primary);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.curve-amount-value {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    min-width: 35px;
    text-align: right;
}

/* Label Position Radio Buttons */
.label-position-group {
    display: flex;
    gap: 4px;
}

.label-position-btn {
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--bg-primary);
    font-size: var(--font-size-xs);
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--text-secondary);
}

.label-position-btn:hover {
    border-color: var(--color-primary);
    color: var(--text-primary);
}

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

/* Label Toggle Buttons (new style) */
.label-toggle-group {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.label-toggle-btn {
    padding: 4px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--bg-primary);
    font-size: var(--font-size-xs);
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--text-secondary);
}

.label-toggle-btn:hover {
    border-color: var(--color-primary);
    color: var(--text-primary);
}

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

.label-toggle-btn.both-btn {
    margin-left: 8px;
    border-left-width: 2px;
}

/* Label Items List */
.label-items-row {
    flex-direction: column;
    gap: 6px;
    padding-top: 8px;
}

.label-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.label-item:hover {
    background: var(--bg-tertiary);
}

.label-item-pos {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 50px;
}

.label-item-text {
    flex: 1;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.label-edit-btn {
    padding: 2px 6px;
    border: none;
    border-radius: var(--border-radius);
    background: var(--color-primary);
    color: white;
    font-size: 12px;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.label-edit-btn:hover {
    background: var(--color-primary-dark);
}

/* Arrow Editor Actions */
.arrow-editor-actions {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-secondary);
    border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
}

.arrow-editor-btn {
    flex: 1;
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--bg-primary);
    font-size: var(--font-size-xs);
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--text-secondary);
}

.arrow-editor-btn:hover {
    border-color: var(--color-primary);
    color: var(--text-primary);
}

.arrow-editor-btn.delete-btn:hover {
    border-color: var(--color-danger, #d12244);
    color: var(--color-danger, #d12244);
}

/* Arrow color picker container */
.arrow-color-picker {
    display: inline-flex;
    align-items: center;
}

.arrow-color-picker .color-picker-button {
    width: 24px;
    height: 24px;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    cursor: pointer;
}

.arrow-color-picker input[type="color"] {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
}

/* ===========================================
   ZONES (Shaded Regions & Reference Lines)
   =========================================== */

.zones-layer {
    pointer-events: auto;
}

.zone-element {
    cursor: pointer;
    transition: opacity 150ms ease;
}

.zone-element:hover {
    filter: brightness(0.95);
}

.zone-element.selected .zone-shade,
.zone-element.selected .zone-line {
    stroke: #0066b3 !important;
    stroke-width: 2 !important;
    stroke-dasharray: 5,5 !important;
    filter: drop-shadow(0 0 10px rgba(255, 255, 0, 0.9)) drop-shadow(0 0 5px rgba(255, 255, 0, 0.8)) drop-shadow(0 0 2px rgba(255, 255, 0, 1));
}

.zone-line {
    stroke-linecap: round;
}

.zone-shade {
    shape-rendering: crispEdges;
}

.zone-hit-area {
    fill: transparent;
    stroke: transparent;
    stroke-width: 20;
    cursor: pointer;
}

.zone-label {
    pointer-events: auto;
    cursor: text;
}

.zone-label-wrapper {
    pointer-events: auto;
    cursor: pointer;
}

.zone-label-wrapper:hover .zone-label-content {
    outline: 1px dashed rgba(0, 102, 179, 0.4);
    outline-offset: 2px;
}

.zone-label-wrapper.selected .zone-label-content {
    box-shadow: 0 0 12px 6px rgba(255, 255, 0, 0.6), 0 0 4px 2px rgba(255, 255, 0, 0.8);
    background-color: rgba(255, 255, 0, 0.15);
}

.zone-handle {
    fill: #0066b3;
    stroke: white;
    stroke-width: 2;
    cursor: move;
    pointer-events: all;
}

.main-chart.zone-mode {
    cursor: crosshair;
}

/* Zone Editor Popup */
.zone-editor-popup {
    position: fixed;
    z-index: 1500;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    min-width: 280px;
    max-width: 320px;
    font-size: var(--font-size-sm);
}

.zone-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    background: var(--bg-secondary);
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}

.zone-editor-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0;
    line-height: 1;
}

.zone-editor-close:hover {
    color: var(--text-primary);
}

/* Zone Type Selector */
.zone-type-selector {
    display: flex;
    gap: 4px;
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

.zone-type-btn {
    flex: 1;
    padding: 6px 4px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    cursor: pointer;
    font-size: 11px;
    text-align: center;
    border-radius: var(--border-radius);
    transition: all 150ms ease;
}

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

.zone-type-btn:hover:not(.active) {
    background: var(--bg-secondary);
}

.zone-editor-section {
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--border-light);
}

.zone-editor-section:last-of-type {
    border-bottom: none;
}

.zone-editor-section-title {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-xs);
}

.zone-editor-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
    flex-wrap: wrap;
}

.zone-editor-row:last-child {
    margin-bottom: 0;
}

.zone-editor-label {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    min-width: 45px;
}

.zone-editor-input {
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-xs);
    width: 70px;
}

.zone-editor-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.zone-date-input {
    width: 90px;
}

.zone-label-text {
    flex: 1;
    width: auto;
}

.zone-editor-select {
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-xs);
    background: var(--bg-primary);
    cursor: pointer;
}

.zone-editor-select:focus {
    outline: none;
    border-color: var(--color-primary);
}

.zone-editor-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: var(--font-size-xs);
}

.zone-editor-checkbox-label input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
}

/* Zone Label Position Grid */
.zone-label-position-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 4px;
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    width: 60px;
}

.position-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--border-color);
    cursor: pointer;
    transition: all 150ms ease;
}

.position-dot:hover {
    background: var(--color-primary-light, #4d9fd6);
}

.position-dot.active {
    background: var(--color-primary);
}

/* Zone Style Buttons */
.zone-style-btn {
    width: 26px;
    height: 26px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    cursor: pointer;
    font-size: 12px;
    border-radius: var(--border-radius);
    transition: all 150ms ease;
}

.zone-style-btn:hover {
    border-color: var(--color-primary);
}

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

.zone-label-options {
    margin-top: var(--spacing-xs);
}

.zone-editor-actions {
    display: flex;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

.zone-editor-btn {
    flex: 1;
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    cursor: pointer;
    font-size: var(--font-size-xs);
    border-radius: var(--border-radius);
    transition: all 150ms ease;
}

.zone-editor-btn:hover {
    border-color: var(--color-primary);
    color: var(--text-primary);
}

.zone-editor-btn.delete-btn:hover {
    border-color: var(--color-danger, #d12244);
    color: var(--color-danger, #d12244);
}

/* Zone color picker container */
.zone-color-picker {
    display: inline-flex;
    align-items: center;
}

.zone-color-picker .color-picker-button {
    width: 24px;
    height: 24px;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    cursor: pointer;
}

.zone-color-picker input[type="color"] {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
}

/* Zone Preview */
.zone-preview {
    pointer-events: none;
}

/* Annotation Context Menu */
.annotation-context-menu {
    position: fixed;
    z-index: 2000;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-sm);
    min-width: 200px;
}

.context-menu-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.context-menu-row label {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    min-width: 45px;
}

.context-menu-row select,
.context-menu-row input {
    flex: 1;
    padding: var(--spacing-xs);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-xs);
    background: var(--bg-primary);
}

.context-offset-inputs {
    display: flex;
    gap: 4px;
    align-items: center;
    flex: 1;
}

.context-offset-inputs input {
    width: 45px;
    text-align: center;
}

.context-offset-inputs span {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.context-menu-divider {
    height: 1px;
    background: var(--border-light);
    margin: var(--spacing-sm) 0;
}

.context-menu-actions {
    display: flex;
    gap: var(--spacing-xs);
    justify-content: flex-end;
}

.context-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--bg-primary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

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

.context-btn-danger:hover {
    background: #fef2f2;
    border-color: var(--color-error);
    color: var(--color-error);
}

/* Anchor Grid - Visual 3x3 selector */
.anchor-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    width: 54px;
    height: 54px;
    padding: 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

.anchor-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--border-color);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.anchor-dot:hover {
    background: var(--color-primary);
    transform: scale(1.2);
}

.anchor-dot.active {
    background: var(--text-primary);
    box-shadow: 0 0 0 4px #ffeb3b, 0 0 0 5px #ffc107;
}

/* Anchor Indicator on Annotation */
.annotation-anchor-indicator {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--text-primary);
    border: 2px solid white;
    border-radius: 50%;
    pointer-events: none;
    z-index: 5;
    box-shadow: 0 0 0 4px #ffeb3b, 0 0 0 5px #ffc107;
}

.annotation-wrapper:not(.selected) .annotation-anchor-indicator {
    display: none;
}

/* ===========================================
   Hand-Drawn Mode Styles
   =========================================== */

/* Toolbar button with text label */
.toolbar-btn-text {
    width: auto;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 500;
}

.toolbar-btn-label {
    white-space: nowrap;
}

.toolbar-separator {
    width: 1px;
    height: 24px;
    background: #dee2e6;
    margin: 0 4px;
}

/* Hand-drawn button active state */
#tool-handdrawn.active {
    background: #0066b3;
    color: white;
    border-color: #0066b3;
}

#tool-handdrawn.active:hover {
    background: #0052a3;
}

/* Hand-drawn parameter controls (inline in toolbar) */
.handdrawn-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-left: 4px;
    border-left: 1px solid #dee2e6;
    margin-left: 2px;
}

.handdrawn-control {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.handdrawn-control label {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 500;
}

.handdrawn-control input[type="range"] {
    width: 70px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: #ddd;
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.handdrawn-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-primary);
    cursor: pointer;
}

.handdrawn-value {
    font-size: 11px;
    color: var(--text-tertiary);
    min-width: 22px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.handdrawn-toggle {
    transform: scale(0.8);
    margin: 0;
}

/* Hand-drawn mode body class - font uses CSS variable */
body.hand-drawn-mode {
    --handdrawn-font: 'Gloria Hallelujah', cursive;
}

body.hand-drawn-mode .chart-title,
body.hand-drawn-mode .chart-description,
body.hand-drawn-mode .chart-subtitle,
body.hand-drawn-mode .chart-caption,
body.hand-drawn-mode .series-notes,
body.hand-drawn-mode .chart-footer,
body.hand-drawn-mode .chart-footer-inner,
body.hand-drawn-mode .chart-source,
body.hand-drawn-mode .chart-attribution,
body.hand-drawn-mode .source-attribution,
body.hand-drawn-mode .x-axis text,
body.hand-drawn-mode .x-axis-title,
body.hand-drawn-mode .y-axis text,
body.hand-drawn-mode .y2-axis text,
body.hand-drawn-mode .tick text,
body.hand-drawn-mode .legend text,
body.hand-drawn-mode .scatter-label,
body.hand-drawn-mode .annotation-text,
body.hand-drawn-mode .zone-label,
body.hand-drawn-mode .zone-label-content,
body.hand-drawn-mode .arrow-label,
body.hand-drawn-mode .line-label,
body.hand-drawn-mode .marker-label-overlay {
    font-family: var(--handdrawn-font) !important;
}

/* Hand-drawn font selector styling */
.handdrawn-font-select {
    min-width: 180px;
}

.handdrawn-font-select option[value="Gloria Hallelujah"] { font-family: 'Gloria Hallelujah', cursive; }
.handdrawn-font-select option[value="Caveat"] { font-family: 'Caveat', cursive; }
.handdrawn-font-select option[value="Gaegu"] { font-family: 'Gaegu', cursive; }
.handdrawn-font-select option[value="Indie Flower"] { font-family: 'Indie Flower', cursive; }
.handdrawn-font-select option[value="Patrick Hand"] { font-family: 'Patrick Hand', cursive; }
.handdrawn-font-select option[value="Permanent Marker"] { font-family: 'Permanent Marker', cursive; }
.handdrawn-font-select option[value="Rock Salt"] { font-family: 'Rock Salt', cursive; }

/* Hand-drawn tick text inherits font-size from the axis group,
   which is controlled by the font scale system (_fs). Do not
   hardcode a font-size here or it will override font scaling. */

/* Hand-drawn mode rough layer */
.rough-layer {
    pointer-events: none;
}

/* Hide original elements when hand-drawn layer is active */
body.hand-drawn-mode .chart-svg .chart-line {
    /* opacity controlled by JS */
}

/* Hand-drawn mode paper texture effect (optional, subtle) */
body.hand-drawn-mode .main-chart {
    background:
        linear-gradient(to bottom,
            rgba(255, 253, 248, 0.3) 0%,
            rgba(255, 253, 248, 0) 100%
        );
}

/* Hand-drawn indicator in chart */
body.hand-drawn-mode .chart-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.02;
    mix-blend-mode: multiply;
}

/* ===========================================
   IMAGES (Picture Overlays) - SVG Based
   =========================================== */

/* SVG images visual layer - rendered at the BACK (first child) */
.images-layer {
    /* SVG group element - contains only the visual image elements */
    pointer-events: none; /* No interaction on visual layer */
}

/* SVG images front visual layer - rendered AFTER chart elements, BEFORE interaction */
.images-front-layer {
    /* SVG group element - contains images that should appear in front of chart */
    pointer-events: none; /* No interaction on visual layer */
}

/* SVG images interaction layer - rendered on TOP for click handling */
.images-interaction-layer {
    /* SVG group element - contains hit areas and selection UI */
}

/* Visual image group - no interaction */
.image-visual {
    pointer-events: none;
}

/* SVG image element group (in interaction layer) */
.image-element {
    cursor: move;
}

.image-element .chart-image {
    /* Cursor set in JS, filters applied via style attribute */
}

.image-element .image-hit-area {
    /* Invisible hit area for easier selection */
    cursor: move;
}

.image-element .image-selection-outline {
    /* Selection border - styled via SVG attributes */
    filter: drop-shadow(0 0 10px rgba(255, 255, 0, 0.9)) drop-shadow(0 0 5px rgba(255, 255, 0, 0.8)) drop-shadow(0 0 2px rgba(255, 255, 0, 1));
}

/* SVG image resize handles - styled via SVG attributes */
.image-element .image-resize-handle {
    /* Cursor and color set via SVG attributes */
}

/* Image Upload Dialog */
.image-upload-dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
}

.image-upload-content {
    background: var(--bg-primary);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    width: 400px;
    max-width: 90vw;
}

.image-upload-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
}

.image-upload-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-tertiary);
    line-height: 1;
}

.image-upload-close:hover {
    color: var(--text-primary);
}

.image-upload-body {
    padding: var(--spacing-lg);
}

.image-upload-dropzone {
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--text-secondary);
}

.image-upload-dropzone:hover,
.image-upload-dropzone.dragover {
    border-color: var(--color-primary);
    background: rgba(0, 102, 179, 0.05);
}

.image-upload-dropzone svg {
    color: var(--text-tertiary);
    margin-bottom: var(--spacing-sm);
}

.image-upload-dropzone p {
    margin: 0 0 var(--spacing-xs) 0;
}

.image-upload-dropzone .upload-hint {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.image-paste-section {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-light);
    text-align: center;
}

.image-paste-section p {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* Image Editor Popup */
.image-editor-popup {
    position: fixed;
    z-index: 2000;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    min-width: 280px;
    max-width: 320px;
    font-size: var(--font-size-sm);
}

.image-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    background: var(--bg-secondary);
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
    cursor: move;
    user-select: none;
}

.image-editor-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0;
    line-height: 1;
}

.image-editor-close:hover {
    color: var(--text-primary);
}

.image-editor-section {
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--border-light);
}

.image-editor-section:last-of-type {
    border-bottom: none;
}

.image-editor-section-title {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: var(--spacing-xs);
    letter-spacing: 0.5px;
}

.image-editor-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
    flex-wrap: wrap;
}

.image-editor-row:last-child {
    margin-bottom: 0;
}

.image-editor-label {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    min-width: 70px;
}

.image-editor-input {
    width: 60px;
    padding: 4px 6px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-xs);
    text-align: center;
    background: var(--bg-primary);
}

.image-editor-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* Date input needs specific width */
.image-editor-input.image-editor-date,
.image-editor-input[type="date"] {
    width: 115px;
}

/* Y coordinate input */
.image-editor-input.image-editor-y {
    width: 70px;
}

/* Position row - fit X and Y on one line */
.image-position-row {
    flex-wrap: nowrap;
}

/* Image Anchor Grid */
.image-anchor-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 4px;
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    width: 54px;
}

.image-anchor-grid .anchor-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--border-color);
    cursor: pointer;
    transition: all 150ms ease;
}

.image-anchor-grid .anchor-dot:hover {
    background: var(--color-primary-light, #4d9fd6);
    transform: scale(1.1);
}

.image-anchor-grid .anchor-dot.active {
    background: var(--color-primary);
    box-shadow: 0 0 0 2px white, 0 0 0 3px var(--color-primary);
}

/* Scale/Opacity Sliders */
.image-scale-slider,
.image-opacity-slider {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border-color);
    border-radius: 2px;
    cursor: pointer;
}

.image-scale-slider::-webkit-slider-thumb,
.image-opacity-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: var(--color-primary);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.image-scale-slider::-moz-range-thumb,
.image-opacity-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: var(--color-primary);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.scale-value,
.opacity-value {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    min-width: 35px;
    text-align: right;
}

.offset-label {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

/* Filter Buttons */
.filter-buttons {
    display: flex;
    gap: 4px;
}

.filter-btn {
    padding: 4px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--bg-primary);
    font-size: var(--font-size-xs);
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--text-secondary);
}

.filter-btn:hover {
    border-color: var(--color-primary);
    color: var(--text-primary);
}

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

/* Layer Buttons */
.layer-buttons {
    gap: var(--spacing-xs);
}

.layer-btn {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--bg-primary);
    font-size: var(--font-size-xs);
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--text-secondary);
}

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

.layer-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--bg-secondary);
}

.layer-status {
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    font-weight: 500;
    padding: 2px 8px;
    background: rgba(0, 102, 179, 0.1);
    border-radius: var(--border-radius);
}

/* Image Editor Actions */
.image-editor-actions {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-secondary);
    border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
}

.image-editor-btn {
    flex: 1;
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--bg-primary);
    font-size: var(--font-size-xs);
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--text-secondary);
}

.image-editor-btn:hover {
    border-color: var(--color-primary);
    color: var(--text-primary);
}

.image-editor-btn.delete-btn:hover {
    border-color: var(--color-error);
    color: var(--color-error);
    background: #fef2f2;
}

/* ================================
   Context Popup (Axis & Line Menus)
   ================================ */
.context-popup {
    position: fixed;
    z-index: 2000;
    background: var(--bg-primary);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    min-width: 280px;
    max-width: 320px;
    font-size: var(--font-size-sm);
    user-select: none;
    overflow: visible;
}

.context-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-secondary);
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
    font-weight: 600;
    font-size: var(--font-size-base);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}

.context-popup-close {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: var(--text-tertiary);
    padding: 0 4px;
    line-height: 1;
}

.context-popup-close:hover {
    color: var(--text-primary);
}

.context-popup-body {
    padding: var(--spacing-sm) 0;
    overflow: visible;
}

/* Ensure color picker dropdowns in context popups are visible and above everything */
.context-popup .color-palette-picker {
    position: relative;
}

.context-popup .color-palette-dropdown {
    z-index: 2100;
}

/* Label margin slider in axis popup */
.context-slider {
    flex: 1;
    min-width: 80px;
    cursor: pointer;
}

/* Label selection overlay */
.chart-label-selection {
    outline: 2px dashed var(--color-primary, #0066b3);
    outline-offset: 2px;
    box-sizing: border-box;
}

/* Context Blocks — top-level grouping (e.g. "Axis", "Display") */
.context-block {
    margin-bottom: var(--spacing-xs);
}

.context-block-title {
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-primary);
    letter-spacing: 0.8px;
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-xs);
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 0;
}

/* Context Sections */
.context-section {
    padding: var(--spacing-xs) var(--spacing-md);
    border-bottom: 1px solid var(--border-light);
}

.context-section:last-child {
    border-bottom: none;
}

.context-section-title {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: var(--spacing-xs);
    letter-spacing: 0.5px;
    padding-top: var(--spacing-xs);
}

/* Narrow label for compact rows (e.g. From / To on one line) */
.context-label-narrow {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    flex-shrink: 0;
}

/* Compact range input — fits two on one row with labels */
.context-input-range {
    width: 60px;
    min-width: 40px;
    flex: 1 1 60px;
}

/* Axis range override styling — red text when user has overridden auto */
.axis-range-override {
    color: #c0392b !important;
    font-weight: 600;
}

/* Auto checkbox label (inline checkbox + text) */
.axis-range-auto-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}

.axis-range-auto-label input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

/* Context Rows */
.context-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: 6px;
}

.context-row:last-child {
    margin-bottom: var(--spacing-xs);
}

.context-label {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    min-width: 80px;
    flex-shrink: 0;
}

/* Context Inputs */
.context-input {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-xs);
    color: var(--text-primary);
    background: var(--bg-primary);
}

.context-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.context-input-sm {
    max-width: 70px;
}

.context-input-xs {
    max-width: 52px;
}

.context-input.mixed-value::placeholder {
    color: #999;
    font-style: italic;
}

.context-unit {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    flex-shrink: 0;
}

/* Context Select */
.context-select {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-xs);
    color: var(--text-primary);
    background: var(--bg-primary);
    cursor: pointer;
}

.context-select:focus {
    outline: none;
    border-color: var(--color-primary);
}

.context-select-sm {
    flex: 0 0 auto;
    max-width: 90px;
}

/* Context Segmented Control */
.context-segmented {
    display: inline-flex;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.context-seg-btn {
    padding: 3px 10px;
    font-size: var(--font-size-xs);
    border: none;
    background: var(--bg-primary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-fast);
}

.context-seg-btn + .context-seg-btn {
    border-left: 1px solid var(--border-color);
}

.context-seg-btn.active {
    background: var(--color-primary);
    color: white;
}

/* Context Style Buttons (Bold/Italic) */
.context-style-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.context-style-btn:hover {
    border-color: var(--text-tertiary);
}

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

/* Chart Type Toggle (Line/Bar) */
.context-type-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 14px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    transition: background 0.15s, color 0.15s;
}
.context-type-btn:first-child {
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    border-right: none;
}
.context-type-btn:last-child {
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
}
.context-type-btn.active {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}
.context-type-btn:hover:not(.active) {
    background: var(--bg-hover);
}

/* Radio Button Group (On/Off/Auto segmented control) */
.context-radio-btn {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    transition: background 0.15s, color 0.15s;
    user-select: none;
}
.context-radio-btn input[type="radio"] {
    display: none;
}
.context-radio-btn:first-child {
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    border-right: none;
}
.context-radio-btn:last-child {
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
}
.context-radio-btn:not(:first-child):not(:last-child) {
    border-right: none;
}
.context-radio-btn.active {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}
.context-radio-btn:hover:not(.active) {
    background: var(--bg-hover);
}

/* Context Pattern Buttons (Gridline patterns) */
.context-pattern-group {
    display: inline-flex;
    gap: 4px;
}

.context-pattern-btn {
    width: 32px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--bg-primary);
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.context-pattern-btn:hover {
    border-color: var(--text-tertiary);
}

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

.context-pattern-btn svg {
    display: block;
}

/* Context Textarea */
.context-textarea {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-xs);
    font-family: monospace;
    color: var(--text-primary);
    background: var(--bg-primary);
    resize: vertical;
    min-height: 50px;
}

.context-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.context-hint {
    font-size: 10px;
    color: var(--text-tertiary);
    margin-top: 2px;
}

.context-info-icon {
    position: relative;
    display: inline-block;
    cursor: help;
    margin-left: 2px;
    vertical-align: middle;
}

.context-info-trigger {
    color: var(--text-tertiary);
    display: inline-block;
    vertical-align: middle;
}

.context-info-icon:hover .context-info-trigger {
    color: var(--color-primary);
}

.context-info-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-primary, #1a1a2e);
    color: var(--text-primary, #e0e0e0);
    border: 1px solid var(--border-color, #333);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 11px;
    line-height: 1.5;
    white-space: nowrap;
    z-index: 10000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    pointer-events: none;
}

.context-info-icon:hover .context-info-tooltip {
    display: block;
}

/* Context Toggle Switch */
.context-toggle {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}

.context-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--border-color);
    border-radius: 20px;
    transition: var(--transition-fast);
}

.toggle-slider::before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: var(--transition-fast);
}

.context-toggle input:checked + .toggle-slider {
    background-color: var(--color-primary);
}

.context-toggle input:checked + .toggle-slider::before {
    transform: translateX(16px);
}

.context-toggle-label {
    font-size: 12px;
    color: var(--text-secondary, #666);
    margin-left: 4px;
}

/* Context Range (Slider) */
.context-range {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border-color);
    border-radius: 2px;
    outline: none;
}

.context-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-primary);
    cursor: pointer;
}

.context-range-value {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    min-width: 32px;
    text-align: right;
}

/* Context Color Slot */
.context-color-slot {
    flex: 1;
}

.context-color-slot .color-picker-container {
    display: inline-flex;
}

/* Minor tick marks in chart */
.minor-tick {
    shape-rendering: crispEdges;
}

/* Chart line hit area for easier right-clicking */
.chart-line-hitarea {
    pointer-events: stroke;
}

/* Series endpoint circle */
.series-endpoint {
    pointer-events: none;
}

/* Line Context Menu - Shape Selector Buttons */
.context-shape-group {
    display: inline-flex;
    gap: 3px;
    flex-wrap: wrap;
}

.context-shape-btn {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--bg-primary);
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.context-shape-btn:hover {
    border-color: var(--text-tertiary);
}

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

.context-shape-btn svg {
    display: block;
}

/* Context subsection (e.g. marker labels inside markers section) */
.context-subsection {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border-light);
}

/* Marker shapes and labels in chart SVG */
.marker-shape {
    cursor: pointer;
}

/* Area fill paths */
.chart-area {
    cursor: pointer;
}

/* White outline behind line */
.chart-line-outline {
    pointer-events: none;
}

/* Inline checkbox label (for First/Last/Data, Name/Value/Date) */
.context-checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}

.context-checkbox-inline input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--color-primary);
}

.context-checkbox-inline input[type="checkbox"]:disabled + span {
    opacity: 0.5;
}

/* Line context menu scrollable body for smaller screens */
.line-context-menu .context-popup-body {
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    overflow-x: hidden;
}

/* Ensure rows inside the line menu don't overflow */
.line-context-menu .context-row {
    flex-wrap: wrap;
}

/* Section heading previews */
.line-preview-svg,
.symbol-preview-svg,
.fill-preview-block,
.label-preview-text {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

/* Color picker dropdown in line menu: render above/outside the popup */
.line-context-menu .color-palette-dropdown {
    z-index: 3000;
    position: fixed;
}

/* ===== Settings Modal Tabs ===== */
.settings-tabs {
    display: flex;
    border-bottom: 2px solid #e0e0e0;
    padding: 0 20px;
    margin: -4px -20px 0;
    flex-wrap: wrap;
}

.settings-tab {
    padding: 8px 12px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 12px;
    color: #666;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.settings-tab:hover {
    color: #333;
}

.settings-tab.active {
    color: #0066b3;
    border-bottom-color: #0066b3;
    font-weight: 500;
}

.settings-tab-content {
    display: none;
    max-height: 60vh;
    overflow-y: auto;
}

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

/* Section labels within settings tabs */
.settings-section-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #999;
    padding: 10px 0 4px;
    border-top: 1px solid var(--border-light);
    margin-top: 4px;
}

.settings-section-label:first-child {
    border-top: none;
    margin-top: 0;
    padding-top: 4px;
}

/* Inline SVG previews in settings labels */
.preview-inline-svg {
    vertical-align: middle;
    margin-left: 4px;
}

.preview-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 2px;
    border: 1px solid #ccc;
    vertical-align: middle;
    margin-left: 4px;
}

.settings-section-label .preview-inline-svg,
.settings-section-label .preview-swatch {
    margin-left: 6px;
}

/* Theme row styling */
.theme-row label {
    font-size: 13px;
    color: var(--text-secondary);
}

/* Inline label within setting controls */
.setting-inline-label {
    font-size: 12px;
    color: #666;
    white-space: nowrap;
}

/* Inline checkbox within settings */
.setting-inline-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #555;
    cursor: pointer;
    user-select: none;
}

.setting-inline-checkbox input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--color-primary);
}

/* Settings utility classes */
.setting-unit {
    font-size: 11px;
    color: #999;
    white-space: nowrap;
}

.setting-slider-value {
    font-size: 12px;
    min-width: 28px;
    text-align: right;
    white-space: nowrap;
}

.setting-hint {
    font-size: 10px;
    color: var(--text-tertiary, #aaa);
}

.setting-controls-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

.settings-row-stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--border-light);
}

.settings-row-stack:last-child {
    border-bottom: none;
}

.settings-row-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.settings-row-label {
    font-weight: 500;
    font-size: 13px;
    margin-bottom: 4px;
}

.prompt-hint {
    font-size: 11px;
    color: var(--text-secondary, #666);
    margin: 4px 0 0;
}

/* Scaling tab — radio options */
.settings-hint {
    font-size: 12px;
    color: var(--text-secondary, #666);
    margin: 2px 0 8px;
    line-height: 1.45;
}
.settings-hint code {
    font-size: 11px;
    background: var(--bg-tertiary, #f0f0f0);
    padding: 1px 4px;
    border-radius: 3px;
}
.scaling-radio-option {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    margin: 4px 0;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.scaling-radio-option:hover {
    background: var(--bg-secondary, #f7f7f7);
}
.scaling-radio-option:has(input:checked) {
    background: var(--bg-secondary, #f0f5ff);
    border-color: var(--color-primary, #0066b3);
}
.scaling-radio-option input[type="radio"] {
    margin-top: 3px;
    flex-shrink: 0;
}
.scaling-radio-label {
    font-size: 13px;
    line-height: 1.4;
}
.scaling-radio-label strong {
    color: var(--text-primary, #1a1a1a);
}
.scaling-radio-desc {
    font-size: 11px;
    color: var(--text-secondary, #888);
}

/* Footer order list (Footer settings tab) */
.footer-order-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0;
}
.footer-order-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 4px;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.footer-order-item:hover {
    background: var(--bg-secondary, #f5f5f5);
}
.footer-order-item.footer-order-dragging {
    opacity: 0.4;
}
.footer-order-item.footer-order-dragover {
    border-color: var(--color-primary, #2196f3);
    background: rgba(33, 150, 243, 0.08);
}
.footer-order-grip {
    cursor: grab;
    color: var(--text-secondary, #999);
    font-size: 12px;
    line-height: 1;
    padding: 2px;
    user-select: none;
}
.footer-order-grip:active {
    cursor: grabbing;
}
.footer-order-arrows {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.footer-order-arrows button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 8px;
    line-height: 1;
    padding: 1px 4px;
    color: var(--text-secondary, #888);
    border-radius: 2px;
}
.footer-order-arrows button:hover {
    background: var(--color-primary, #2196f3);
    color: #fff;
}
.footer-order-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-primary, #333);
    cursor: pointer;
    user-select: none;
    flex: 1;
}
.footer-order-label input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--color-primary);
}

/* Brand palette picker */
.brand-palette-picker {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0;
}

.brand-palette-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: 2px solid var(--border-color, #dee2e6);
    border-radius: 6px;
    padding: 10px 14px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    background: var(--bg-primary, #fff);
}

.brand-palette-card:hover {
    border-color: var(--color-primary);
}

.brand-palette-card.active {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 102, 179, 0.2);
}

.brand-palette-card-header {
    display: flex;
    align-items: center;
    gap: 6px;
}

.brand-palette-card-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary, #1a1a1a);
    flex: 1;
    min-width: 0;
}

.brand-palette-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 3px;
    color: var(--text-secondary, #666);
    transition: background 0.15s, color 0.15s;
}

.brand-palette-action-btn:hover {
    background: var(--bg-secondary, #f0f0f0);
    color: var(--text-primary, #1a1a1a);
}

.brand-palette-delete-btn:hover {
    color: #d12244;
    background: rgba(209, 34, 68, 0.1);
}

.brand-palette-card-swatches {
    display: flex;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.brand-palette-card.active .brand-palette-card-swatches {
    margin-bottom: 14px;
}

.brand-palette-card-swatch {
    flex: 1;
    height: 24px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    position: relative;
}

.brand-palette-card.active .brand-palette-card-swatch {
    height: 32px;
}

/* Hex label shown beneath each swatch on the active palette */
.brand-swatch-hex-label {
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    font-family: monospace;
    color: var(--text-secondary, #888);
    white-space: nowrap;
    pointer-events: none;
}

.brand-palette-card-swatch.editable {
    cursor: crosshair;
    transition: transform 0.1s;
}

.brand-palette-card-swatch.editable:hover {
    transform: scaleY(1.25);
    z-index: 1;
}

/* "+" swatch to add a color to a custom palette */
.brand-palette-add-color {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary, #f5f5f5) !important;
    border: 1px dashed var(--border-color, #ccc) !important;
    color: var(--text-secondary, #888);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    max-width: 28px;
    flex: 0 0 28px;
}

.brand-palette-add-color:hover {
    background: var(--bg-tertiary, #e8e8e8) !important;
    color: var(--text-primary, #333);
}

/* "New Palette" card */
.brand-palette-add-card {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-style: dashed;
    color: var(--text-secondary, #888);
    font-size: 12px;
    padding: 8px 14px;
}

.brand-palette-add-card:hover {
    color: var(--color-primary);
}

.brand-palette-add-icon {
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
}

/* Inline swatch editor (color + hex input + remove) */
.brand-swatch-editor {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #ccc);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 20;
    white-space: nowrap;
}

/* brand-swatch-color-input is now a .color-palette-picker--inline wrapper */
.brand-swatch-color-input .color-swatch-btn {
    width: 28px;
    height: 28px;
    padding: 3px;
}

.brand-swatch-hex-input {
    width: 80px;
    height: 28px;
    font-size: 14px;
    font-family: monospace;
    text-align: center;
    padding: 2px 6px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #1a1a1a);
}

.brand-swatch-remove-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 2px 4px;
    color: var(--text-secondary, #999);
}

.brand-swatch-remove-btn:hover {
    color: #d12244;
}

/* ===== Color Order Picker ===== */
.color-order-picker {
    padding: 4px 0 8px;
}

.color-order-default-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-primary, #333);
    cursor: pointer;
    margin-bottom: 8px;
}

.color-order-default-check {
    margin: 0;
}

.color-order-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 0 0;
}

.color-order-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.color-order-row-label {
    font-size: 11px;
    color: var(--text-secondary, #888);
    min-width: 56px;
    text-align: right;
    flex-shrink: 0;
}

.color-order-slots {
    display: flex;
    gap: 4px;
    align-items: center;
}

.color-order-swatch {
    width: 26px;
    height: 26px;
    border-radius: 4px;
    border: 2px solid rgba(0,0,0,0.12);
    cursor: pointer;
    padding: 0;
    position: relative;
    transition: transform 0.1s, border-color 0.15s;
}

.color-order-swatch:hover {
    transform: scale(1.15);
    border-color: rgba(0,0,0,0.3);
}

/* Dropdown for picking a palette color (fixed-positioned, appended to body) */
.color-order-dropdown {
    position: fixed;
    display: flex;
    gap: 3px;
    padding: 5px 6px;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #ccc);
    border-radius: 6px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.18);
    z-index: 10000;
    white-space: nowrap;
}

.color-order-dropdown-opt {
    width: 22px;
    height: 22px;
    border-radius: 3px;
    border: 2px solid transparent;
    padding: 0;
    cursor: pointer;
    transition: transform 0.1s, border-color 0.15s;
}

.color-order-dropdown-opt:hover {
    transform: scale(1.2);
    border-color: rgba(0,0,0,0.3);
}

.color-order-dropdown-opt.selected {
    border-color: var(--color-primary, #0066b3);
    box-shadow: 0 0 0 1px var(--color-primary, #0066b3);
}

/* Color palette editor in settings */
.color-palette-editor {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding: 4px 0;
}

.palette-swatch-editable {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    border: 2px solid transparent;
    cursor: pointer;
    position: relative;
    transition: border-color 0.15s, transform 0.1s;
}

.palette-swatch-editable:hover {
    border-color: #333;
    transform: scale(1.1);
}

.palette-swatch-editable.editing {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 102, 179, 0.3);
}

.palette-swatch-input {
    position: absolute;
    bottom: -24px;
    left: 50%;
    transform: translateX(-50%);
    width: 72px;
    font-size: 10px;
    text-align: center;
    padding: 2px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #fff;
    z-index: 10;
    display: none;
}

.palette-swatch-editable.editing .palette-swatch-input {
    display: block;
}

/* ===== Caption Prompt ===== */
.caption-prompt-textarea {
    width: 100%;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 13px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    resize: vertical;
    line-height: 1.5;
    box-sizing: border-box;
}

.caption-prompt-textarea:focus {
    border-color: #0066b3;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 102, 179, 0.15);
}

.prompt-hint {
    font-size: 12px;
    color: #888;
    margin-top: 8px;
    line-height: 1.4;
}

/* ===== Caption Suggestions Modal ===== */
.modal-caption {
    max-width: 560px;
}

.caption-suggestions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.caption-suggestion {
    padding: 12px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
    line-height: 1.4;
    background: #fff;
    text-align: left;
    width: 100%;
    transition: all 0.15s;
}

.caption-suggestion:hover {
    border-color: #0066b3;
    background: #f0f7ff;
}

.caption-suggestion:active {
    background: #e0efff;
}

/* ===== Caption Loading Overlay ===== */
.caption-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100;
    gap: 12px;
}

.caption-loading-overlay p {
    font-size: 14px;
    color: #666;
    margin: 0;
}

.caption-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #e0e0e0;
    border-top-color: #0066b3;
    border-radius: 50%;
    animation: caption-spin 0.8s linear infinite;
}

@keyframes caption-spin {
    to { transform: rotate(360deg); }
}

/* ===== Critique Popup ===== */
.critique-popup {
    position: fixed;
    z-index: 2000;
    width: 440px;
    max-height: 70vh;
    background: white;
    border: 1px solid #d0d0d0;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    display: flex;
    flex-direction: column;
    font-size: 12px;
    line-height: 1.4;
}

.critique-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    border-bottom: 1px solid #e8e8e8;
    flex-shrink: 0;
}

.critique-tabs {
    display: flex;
    gap: 4px;
}

.critique-tab {
    padding: 3px 10px;
    border: none;
    background: none;
    font-size: 11px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s;
}

.critique-tab:hover { background: #f0f0f0; color: #333; }
.critique-tab.active { background: #e8f0fe; color: #0066b3; }

.critique-popup-close {
    border: none;
    background: none;
    font-size: 16px;
    cursor: pointer;
    color: #999;
    padding: 0 4px;
    line-height: 1;
}

.critique-popup-close:hover { color: #333; }

.critique-popup-body {
    overflow-y: auto;
    padding: 8px 12px;
    flex: 1 1 auto;
    min-height: 60px;
}

/* Compact text styles */
.critique-text p,
.critique-history-text p {
    margin: 0 0 4px 0;
    line-height: 1.4;
    color: #333;
}

.critique-text .critique-list,
.critique-history-text .critique-list {
    margin: 0 0 4px 0;
    padding-left: 18px;
    list-style: disc;
}

.critique-text .critique-list li,
.critique-history-text .critique-list li {
    margin-bottom: 2px;
    line-height: 1.4;
    color: #333;
    padding-left: 2px;
}

.critique-text .critique-heading {
    font-weight: 600;
    color: #222;
    margin: 6px 0 2px 0;
    font-size: 12px;
}

.critique-text strong { color: #111; }

.critique-empty {
    color: #999;
    font-style: italic;
    text-align: center;
    padding: 16px 0;
}

.critique-loading-inline {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 0;
}

.critique-loading-inline span {
    color: #666;
    font-size: 12px;
}

/* History items */
.critique-history-item {
    border-bottom: 1px solid #f0f0f0;
    padding: 6px 0;
}

.critique-history-item:last-child { border-bottom: none; }

.critique-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
}

.critique-history-time { font-size: 10px; color: #999; }
.critique-history-num { font-size: 10px; color: #bbb; font-weight: 500; }

.critique-history-text { font-size: 11px; }
.critique-history-text p { color: #555; }
.critique-history-text .critique-list li { color: #555; font-size: 11px; }
.critique-history-text .critique-heading { font-size: 11px; }

/* ===== Colored Series Labels in Titles ===== */
.series-color-label {
    color: white;
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: 600;
}

/* ===== Data Editor ===== */

.modal-data-editor {
    width: 85vw;
    max-width: 1200px;
    height: 80vh;
    max-height: 800px;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-data-editor .modal-header {
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0;
}

.data-editor-header-actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-left: auto;
    margin-right: var(--spacing-lg);
    flex-wrap: wrap;
}

.data-editor-header-actions .btn-sm {
    padding: 4px 10px;
    font-size: var(--font-size-xs);
    border-radius: var(--border-radius);
    cursor: pointer;
}

.data-editor-body {
    flex: 1;
    overflow: hidden;
    margin-bottom: 0;
}

.data-editor-scroll-container {
    height: 100%;
    overflow: auto;
}

/* Table styles */
.data-editor-table {
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--font-size-sm);
    font-family: 'Roboto Mono', 'Consolas', 'Courier New', monospace;
    table-layout: auto;
}

.data-editor-table th,
.data-editor-table td {
    border-right: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    padding: 3px 5px;
    text-align: right;
    white-space: nowrap;
    height: 26px;
    line-height: 20px;
}

.data-editor-table th:first-child,
.data-editor-table td:first-child {
    border-left: 1px solid var(--border-light);
}

.data-editor-table thead tr:first-child th {
    border-top: none;
}

.data-editor-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* Header cells */
.de-header-cell {
    background: var(--bg-secondary);
    font-weight: 600;
    font-size: var(--font-size-xs);
    text-align: center;
    cursor: pointer;
    user-select: none;
    white-space: normal;
    word-break: break-word;
    transition: background var(--transition-fast);
    border-top-width: 3px !important;
    border-top-style: solid !important;
}

.de-header-cell:hover {
    background: var(--bg-hover);
}

.de-header-cell {
    position: relative;
    padding-top: 20px;
}

.de-col-delete-btn {
    position: absolute;
    top: 2px;
    left: 22px;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-tertiary);
    font-size: 14px;
    line-height: 16px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
}

.de-header-cell:hover .de-col-delete-btn {
    opacity: 1;
}

.de-col-delete-btn:hover {
    background: var(--color-error);
    color: #fff;
}

.de-col-hide-btn {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.de-header-cell:hover .de-col-hide-btn,
.de-col-hide-btn.de-col-hiding {
    opacity: 1;
}

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

.de-col-hide-btn.de-col-hiding {
    color: var(--color-warning, #e6a700);
}

.de-date-col {
    width: 90px;
    min-width: 90px;
    text-align: left;
    border-top-color: var(--text-tertiary) !important;
}

.de-series-col {
    max-width: 160px;
}

/* Drag-to-reorder columns */
.de-header-cell[draggable="true"] {
    cursor: grab;
}

.de-header-cell.de-col-dragging {
    opacity: 0.4;
    cursor: grabbing;
}

.de-header-cell.de-col-drag-over-left {
    box-shadow: inset 3px 0 0 0 var(--color-primary);
}

.de-header-cell.de-col-drag-over-right {
    box-shadow: inset -3px 0 0 0 var(--color-primary);
}

.de-date-cell {
    text-align: left;
    font-weight: 400;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
}

.data-editor-table.de-wrap-text .de-date-cell {
    white-space: normal;
    word-break: break-word;
    height: auto;
    min-height: 26px;
    overflow: visible;
    text-overflow: clip;
}

/* Type icons in headers */
.de-type-icon {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 10px;
    opacity: 0.5;
}

.de-type-icon-clickable {
    cursor: pointer;
    border-radius: 3px;
    padding: 1px 3px;
    margin-left: -3px;
    transition: opacity 0.15s, background 0.15s;
}

.de-type-icon-clickable:hover {
    opacity: 1;
    background: var(--bg-hover, rgba(0,0,0,0.08));
}

/* Column type dropdown menu */
.de-type-menu {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    min-width: 200px;
    padding: 4px 0;
    overflow: hidden;
}

.de-type-menu-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: 7px 12px;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.3;
    transition: background 0.1s;
}

.de-type-menu-item:hover {
    background: var(--bg-hover, rgba(0,0,0,0.06));
}

.de-type-menu-label {
    font-weight: 500;
}

.de-type-menu-desc {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 1px;
}

.de-header-name {
    font-size: var(--font-size-xs);
    font-weight: 600;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
}

.de-header-edit-btn {
    display: inline-block;
    font-size: 9px;
    opacity: 0;
    margin-left: 3px;
    cursor: pointer;
    color: var(--color-primary);
    transition: opacity 0.15s;
}

.de-header-cell:hover .de-header-edit-btn {
    opacity: 0.7;
}

.de-header-edit-btn:hover {
    opacity: 1 !important;
    text-decoration: underline;
}

/* Format row (prepend/append) */
.de-format-row {
    background: var(--bg-secondary);
}

.de-format-cell {
    text-align: center;
    padding: 2px 4px !important;
    height: 24px !important;
    font-size: 11px;
    border-top: none !important;
    background: var(--bg-secondary);
}

.de-format-cell-label {
    color: var(--text-tertiary);
    font-size: 10px;
    font-style: italic;
    cursor: default;
}

.de-format-input {
    width: 28px;
    padding: 1px 3px;
    border: 1px solid var(--border-light);
    border-radius: 3px;
    font-size: 11px;
    font-family: inherit;
    text-align: center;
    background: var(--bg-primary);
    color: var(--text-primary);
    outline: none;
}

.de-format-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
}

.de-format-input::placeholder {
    color: var(--text-muted, #ccc);
    font-style: italic;
}

/* Value cells */
.de-value-cell {
    font-variant-numeric: tabular-nums;
}

.de-cell[contenteditable="true"]:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
    background: #fffde7;
}

/* Hidden column styling */
.de-col-hidden {
    opacity: 0.3;
    background: var(--bg-secondary) !important;
}

.de-header-cell.de-col-hidden {
    opacity: 0.45;
    text-decoration: line-through;
}

/* Error flash on invalid input */
.de-cell-error {
    background: #ffebee !important;
    outline: 2px solid #e53935 !important;
}

/* Row hover */
.data-editor-table tbody tr:hover {
    background: rgba(0, 0, 0, 0.03);
}

/* Alternating row colors */
.data-editor-table tbody tr:nth-child(even) {
    background: var(--bg-secondary);
}
.data-editor-table tbody tr:nth-child(even):hover {
    background: rgba(0, 0, 0, 0.03);
}

/* Scrollbar styling */
.data-editor-scroll-container::-webkit-scrollbar {
    width: 8px;
}
.data-editor-scroll-container::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}
.data-editor-scroll-container::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}
.data-editor-scroll-container::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

/* ================================
   Formula Dialog
   ================================ */
.formula-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3100;
}

.formula-dialog {
    background: var(--bg-primary);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    width: 560px;
    max-width: 90vw;
    max-height: 85vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

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

.formula-dialog-header h3 {
    margin: 0;
    font-size: var(--font-size-lg);
}

.formula-dialog-close {
    background: none;
    border: none;
    font-size: 22px;
    color: var(--text-tertiary);
    cursor: pointer;
    line-height: 1;
}

.formula-dialog-close:hover {
    color: var(--text-primary);
}

.formula-dialog-body {
    padding: var(--spacing-lg);
    flex: 1;
}

.formula-field {
    margin-bottom: var(--spacing-md);
}

.formula-field label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
}

.formula-stata-hint {
    font-weight: 400;
    color: var(--text-tertiary);
    font-size: var(--font-size-xs);
}

.formula-name-input,
.formula-expression-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    transition: border-color var(--transition-fast);
}

.formula-expression-input {
    font-family: 'Roboto Mono', 'Consolas', 'Courier New', monospace;
    font-size: var(--font-size-sm);
    padding-right: 30px;
}

.formula-name-input:focus,
.formula-expression-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 102, 179, 0.15);
}

.formula-input-wrapper {
    position: relative;
}

.formula-error-indicator {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #e53935;
    font-weight: 700;
    font-size: 16px;
}

.formula-expression-input.has-error {
    border-color: #e53935;
}

.formula-series-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
}

.formula-series-label {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-right: 2px;
}

.formula-series-btn {
    padding: 2px 8px;
    font-size: 11px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    background: var(--bg-secondary);
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    color: var(--text-primary);
    transition: background 0.15s, box-shadow 0.15s;
    line-height: 1.4;
}

.formula-series-btn:hover {
    background: var(--bg-tertiary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

.formula-error-message {
    color: #e53935;
    font-size: var(--font-size-xs);
    margin-top: var(--spacing-xs);
    padding: 4px 8px;
    background: #fff5f5;
    border-radius: var(--border-radius);
    border-left: 3px solid #e53935;
}

.formula-preview {
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-light);
}

.formula-preview-label {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin-bottom: 4px;
}

.formula-preview-values {
    font-family: 'Roboto Mono', 'Consolas', monospace;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    min-height: 20px;
    word-break: break-all;
}

.formula-reference {
    margin-bottom: var(--spacing-sm);
}

.formula-reference summary {
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    cursor: pointer;
    user-select: none;
    font-weight: 500;
}

.formula-reference summary:hover {
    text-decoration: underline;
}

.formula-reference-content {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    font-size: var(--font-size-xs);
    line-height: 1.7;
}

.formula-ref-section {
    margin-bottom: 4px;
}

.formula-ref-section strong {
    color: var(--text-secondary);
}

.formula-ref-section code {
    font-family: 'Roboto Mono', 'Consolas', monospace;
    font-size: 11px;
    background: var(--bg-primary);
    padding: 0 3px;
    border-radius: 2px;
}

.formula-ref-series {
    font-family: 'Roboto Mono', 'Consolas', monospace;
    color: var(--color-primary);
}

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

/* Formula indicators in data editor */
.de-formula-indicator {
    font-size: 10px;
    font-family: 'Roboto Mono', 'Consolas', monospace;
    color: var(--color-primary);
    font-weight: 400;
    margin-top: 2px;
    opacity: 0.8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.de-formula-badge {
    display: inline-block;
    font-size: 9px;
    padding: 1px 5px;
    background: var(--color-primary);
    color: white;
    border-radius: 3px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background 0.15s;
}

.de-formula-badge:hover {
    background: var(--color-primary-dark);
}

.de-formula-cell {
    color: var(--text-tertiary);
    cursor: default;
    background: var(--bg-secondary) !important;
}

.de-formula-cell:focus {
    outline: none !important;
    background: var(--bg-secondary) !important;
}

.de-text-cell {
    color: var(--text-tertiary);
    font-style: italic;
    cursor: default;
    background: var(--bg-secondary) !important;
    font-size: var(--font-size-xs);
    overflow: hidden;
    text-overflow: ellipsis;
}

.data-editor-table.de-wrap-text .de-text-cell {
    white-space: normal;
    word-break: break-word;
    height: auto;
    min-height: 26px;
    overflow: visible;
    text-overflow: clip;
}

.de-text-cell:focus {
    outline: none !important;
    background: var(--bg-secondary) !important;
}

/* ================================
   Save / Load Feature
   ================================ */

/* Save/Open buttons panel in left sidebar */
.save-load-panel {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 2px solid var(--border-color);
    background: var(--bg-secondary);
}

.save-load-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Data Stale Warning Bar */
.data-stale-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 4px;
    margin: 0 0 8px 0;
    font-size: 12px;
    color: #6d4c00;
}

.data-stale-bar svg {
    color: #f9a825;
}

#data-stale-message {
    flex: 1;
}

.data-stale-bar .btn {
    flex-shrink: 0;
}

.data-stale-dismiss {
    background: none;
    border: none;
    font-size: 18px;
    color: #6d4c00;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    opacity: 0.6;
}

.data-stale-dismiss:hover {
    opacity: 1;
}

/* Graph Browser Modal */
.modal-graph-browser {
    width: 720px;
    max-width: 90vw;
}

.modal-graph-browser .modal-header {
    display: flex;
    align-items: center;
    gap: 16px;
}

.modal-graph-browser .modal-header h3 {
    margin: 0;
    white-space: nowrap;
}

.graph-search-wrapper {
    flex: 1;
    position: relative;
}

.graph-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    pointer-events: none;
}

.graph-search-input {
    width: 100%;
    padding: 8px 12px 8px 34px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 13px;
    font-family: var(--font-family);
    outline: none;
    box-sizing: border-box;
}

.graph-search-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 102, 179, 0.15);
}

.modal-graph-browser .modal-body {
    max-height: 60vh;
    overflow-y: auto;
    margin-bottom: 0;
}

/* Graph Grid */
.graph-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.graph-card {
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: all 150ms ease;
    background: var(--bg-primary);
}

.graph-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.graph-card-thumb {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.graph-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.graph-card-no-thumb {
    color: var(--text-tertiary);
    font-size: 12px;
}

.graph-card-info {
    padding: 10px 12px;
}

.graph-card-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.graph-card-date {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 2px;
}

.graph-card-delete {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 4px 6px;
    cursor: pointer;
    color: var(--text-secondary);
    opacity: 0;
    transition: opacity 150ms ease, color 150ms ease;
    line-height: 1;
}

.graph-card:hover .graph-card-delete {
    opacity: 1;
}

.graph-card-delete:hover {
    color: var(--color-error);
    border-color: var(--color-error);
}

/* Save Graph Modal */
.modal-save-graph {
    width: 400px;
}

.save-graph-title-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 14px;
    font-family: var(--font-family);
    outline: none;
    box-sizing: border-box;
}

.save-graph-title-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 102, 179, 0.15);
}

/* Loading/error messages in graph grid */
.graph-grid .loading-message,
.graph-grid .error-message {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 16px;
    color: var(--text-tertiary);
    font-size: 13px;
}

.graph-grid .error-message {
    color: var(--color-error);
}

/* ================================
   Graph Manager (Full-Page File Browser)
   ================================ */
.graph-manager-view {
    flex: 1;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    background: var(--bg-secondary);
}

/* ── Sidebar ── */
.gm-sidebar {
    width: 200px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    border-right: 1px solid var(--border-color, #dee2e6);
    overflow-y: auto;
}
.gm-sidebar-header {
    padding: 14px 16px 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-tertiary);
}
.gm-folder-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 8px;
}
.gm-sidebar-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary);
    transition: background 0.12s;
    user-select: none;
}
.gm-sidebar-item:hover {
    background: var(--bg-hover, #f0f0f0);
}
.gm-sidebar-item.gm-sidebar-active {
    background: #e8f0fe;
    color: var(--color-primary);
    font-weight: 500;
}
.gm-sidebar-item.gm-drop-target {
    background: #e8f0fe;
    box-shadow: inset 0 0 0 2px rgba(0, 102, 179, 0.3);
}
.gm-sidebar-item.gm-sidebar-nested {
    padding-left: 30px;
    font-size: 12px;
}
.gm-sidebar-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.gm-sidebar-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gm-sidebar-badge {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--text-tertiary);
    min-width: 16px;
    text-align: right;
}
.gm-sidebar-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px;
    padding: 7px 10px;
    border: 1px dashed var(--border-color, #dee2e6);
    border-radius: 5px;
    background: none;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-secondary);
    transition: all 0.12s;
}
.gm-sidebar-btn:hover {
    background: var(--bg-hover, #f0f0f0);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* ── Main area ── */
.gm-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: var(--spacing-lg);
}

.gm-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.gm-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
}

.gm-breadcrumb-item {
    color: var(--text-primary);
}
.gm-breadcrumb-item.gm-breadcrumb-link {
    color: var(--color-primary);
    cursor: pointer;
}
.gm-breadcrumb-item.gm-breadcrumb-link:hover {
    text-decoration: underline;
}

.gm-breadcrumb-sep {
    color: var(--text-tertiary);
    margin: 0 4px;
}

.gm-header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.gm-search-wrapper {
    position: relative;
}
.gm-search-wrapper svg {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    pointer-events: none;
}
.gm-search-wrapper input {
    padding: 6px 10px 6px 30px;
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 4px;
    font-size: 13px;
    width: 220px;
    background: var(--bg-primary);
}
.gm-search-wrapper input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.gm-content {
    flex: 1;
    overflow-y: auto;
    columns: 220px;
    column-gap: 16px;
    padding: 4px;
}
.gm-content > .gm-graph-card,
.gm-content > .gm-folder-card {
    break-inside: avoid;
    margin-bottom: 16px;
    width: 100%;
}

.gm-loading, .gm-error, .gm-empty {
    column-span: all;
    text-align: center;
    padding: 48px 16px;
    color: var(--text-tertiary);
    font-size: 14px;
}
.gm-error {
    color: var(--color-error);
}

/* Folder cards */
.gm-folder-card {
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 8px;
    padding: 16px;
    cursor: pointer;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    position: relative;
}
.gm-folder-card:hover {
    border-color: var(--color-primary);
    background: #f0f7ff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.gm-folder-card.gm-drop-target {
    border-color: var(--color-primary);
    background: #e8f0fe;
    box-shadow: 0 0 0 2px rgba(0, 102, 179, 0.3);
}

.gm-folder-icon {
    flex-shrink: 0;
}

.gm-folder-info {
    flex: 1;
    min-width: 0;
}
.gm-folder-name {
    font-weight: 500;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gm-folder-count {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 2px;
}

/* View toggle button */
.gm-view-toggle {
    background: none;
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 6px;
    padding: 5px 7px;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.gm-view-toggle:hover {
    background: var(--bg-secondary);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Tree view (content override) */
.gm-content.gm-content-tree {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.gm-tree {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.gm-tree-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s;
    user-select: none;
}
.gm-tree-row:hover {
    background: var(--bg-secondary, #f5f6f8);
}
.gm-tree-folder > .gm-tree-label {
    font-weight: 600;
}
.gm-tree-graph > .gm-tree-label {
    font-weight: 400;
}
.gm-tree-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: transform 0.15s ease;
    color: var(--text-tertiary);
}
.gm-tree-chevron.gm-tree-expanded {
    transform: rotate(90deg);
}
.gm-tree-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.gm-tree-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}
.gm-tree-count {
    font-size: 11px;
    color: var(--text-tertiary);
    white-space: nowrap;
    margin-left: auto;
}
.gm-tree-date {
    font-size: 11px;
    color: var(--text-tertiary);
    white-space: nowrap;
    margin-left: auto;
}
.gm-tree-thumb {
    width: 40px;
    height: 25px;
    border-radius: 3px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-secondary);
}
.gm-tree-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gm-tree-empty {
    color: var(--text-tertiary);
    font-style: italic;
    font-size: 12px;
    cursor: default;
}
.gm-tree-empty:hover {
    background: none;
}
.gm-tree-row.gm-drop-target {
    background: #e8f0fe;
    box-shadow: inset 0 0 0 2px rgba(0, 102, 179, 0.3);
}
.gm-tree-row.gm-dragging {
    opacity: 0.5;
}

/* Graph cards */
.gm-graph-card {
    position: relative;
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: var(--bg-primary);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.gm-graph-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.gm-graph-card.gm-dragging {
    opacity: 0.5;
}

.gm-new-graph-card {
    border-style: dashed;
    cursor: pointer;
}
.gm-new-graph-card:hover {
    border-color: var(--color-primary);
    background: var(--bg-hover, #f8f9fa);
}
.gm-new-graph-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gm-graph-thumb {
    width: 100%;
    overflow: hidden;
    background: #ffffff;
}
.gm-graph-thumb img {
    width: 100%;
    height: auto;
    display: block;
}
.gm-no-thumb,
.gm-new-graph-thumb {
    width: 100%;
    aspect-ratio: 16 / 10;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    font-size: 12px;
}

.gm-graph-info {
    padding: 10px 12px;
}
.gm-graph-title {
    font-weight: 500;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary);
}
.gm-graph-date {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 2px;
}

/* Card menu button (three dots) */
.gm-card-menu-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
    color: var(--text-secondary);
    z-index: 2;
}
.gm-graph-card:hover .gm-card-menu-btn,
.gm-folder-card:hover .gm-card-menu-btn {
    opacity: 1;
}
.gm-card-menu-btn:hover {
    background: var(--bg-tertiary);
}

/* Context menu */
.gm-context-menu {
    background: var(--bg-primary);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    min-width: 160px;
    padding: 4px 0;
    overflow: hidden;
}
.gm-menu-item {
    display: block;
    width: 100%;
    padding: 8px 16px;
    border: none;
    background: none;
    text-align: left;
    font-size: 13px;
    cursor: pointer;
    color: var(--text-primary);
}
.gm-menu-item:hover {
    background: var(--bg-hover, #f0f0f0);
}
.gm-menu-danger {
    color: var(--color-error);
}
.gm-menu-danger:hover {
    background: #fef2f2;
}
.gm-menu-divider {
    height: 1px;
    background: var(--border-color, #dee2e6);
    margin: 4px 0;
}

/* Move dialog overlay */
.gm-move-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3500;
}
.gm-move-dialog {
    background: var(--bg-primary);
    border-radius: 8px;
    padding: 20px;
    min-width: 280px;
    max-width: 400px;
    max-height: 60vh;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.gm-move-dialog h4 {
    margin: 0 0 12px;
    font-size: 16px;
}
.gm-move-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: none;
    cursor: pointer;
    font-size: 13px;
    margin-bottom: 4px;
}
.gm-move-item:hover {
    background: var(--bg-hover, #f0f0f0);
    border-color: var(--border-color, #dee2e6);
}
.gm-move-current {
    background: #e8f0fe;
    border-color: var(--color-primary);
    pointer-events: none;
    opacity: 0.6;
}

/* ================================
   Themes Grid (Settings Modal)
   ================================ */
.themes-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.theme-name-prompt {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
    padding: 10px;
    background: var(--bg-secondary);
    border-radius: 6px;
}
.theme-name-prompt input {
    flex: 1;
}

.themes-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    max-height: 300px;
    overflow-y: auto;
}

.theme-card {
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 6px;
    padding: 10px;
    cursor: pointer;
    transition: border-color 0.15s;
    position: relative;
}
.theme-card:hover {
    border-color: var(--color-primary);
}

.theme-card-name {
    font-weight: 500;
    font-size: 13px;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 24px;
}

.theme-card-fonts {
    font-size: 11px;
    color: var(--color-secondary, #666);
    margin-top: 2px;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.theme-card-preview {
    display: flex;
    gap: 4px;
    align-items: center;
}

.theme-color-swatch {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.theme-card-bg {
    width: 24px;
    height: 18px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
    margin-right: 4px;
}

.theme-card-actions {
    display: flex;
    gap: 4px;
    margin-top: 8px;
}
.theme-card-actions .btn {
    font-size: 11px;
    padding: 2px 8px;
}

.theme-card-delete {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--text-tertiary);
    border-radius: 3px;
    opacity: 0;
    transition: opacity 0.15s;
}
.theme-card:hover .theme-card-delete {
    opacity: 1;
}
.theme-card-delete:hover {
    color: var(--color-error);
    background: #fef2f2;
}

.themes-loading, .themes-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 24px;
    color: var(--text-tertiary);
    font-size: 13px;
}

/* ================================
   Toast Notifications
   ================================ */
#toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 400px;
    pointer-events: none;
}

.toast {
    background: var(--bg-primary);
    border-left: 4px solid var(--color-primary);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 16px 20px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    animation: slideInUp 0.3s ease-out;
    pointer-events: auto;
    max-width: 100%;
    word-wrap: break-word;
}

.toast.toast-error {
    border-left-color: var(--color-error);
}

.toast.toast-warning {
    border-left-color: var(--color-warning);
}

.toast.toast-success {
    border-left-color: var(--color-success);
}

.toast.toast-info {
    border-left-color: var(--color-primary);
}

.toast-icon {
    flex-shrink: 0;
    font-size: 20px;
    line-height: 1;
    margin-top: 2px;
}

.toast-error .toast-icon {
    color: var(--color-error);
}

.toast-warning .toast-icon {
    color: var(--color-warning);
}

.toast-success .toast-icon {
    color: var(--color-success);
}

.toast-info .toast-icon {
    color: var(--color-primary);
}

.toast-content {
    flex: 1;
    min-width: 0;
}

.toast-title {
    font-weight: 500;
    font-size: 14px;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.toast-message {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}

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

.toast-action-btn {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    padding: 4px 12px;
    font-size: 12px;
    color: var(--color-primary);
    cursor: pointer;
    transition: all 0.2s;
}

.toast-action-btn:hover {
    background: var(--bg-hover);
}

.toast-close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.toast-close:hover {
    opacity: 1;
}

.toast.toast-hiding {
    animation: slideOutDown 0.3s ease-in forwards;
}

@keyframes slideInUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

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

/* ================================
   World Bank Data Panel
   ================================ */

.wb-browser-panel {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: 40vh;
    min-height: 80px;
    border-bottom: 1px solid var(--border-color);
}

.wb-browser-panel.collapsed {
    max-height: 38px;
    min-height: 0;
}

.wb-browser-panel.collapsed .wb-search-wrap {
    border-bottom: none;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.wb-browser-panel.collapsed .wb-search-wrap:hover {
    background: var(--bg-tertiary);
}

.wb-browser-panel.collapsed .wb-indicator-browser {
    display: none;
}

.wb-search-wrap {
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Filter bar: topic (primary) + source (secondary) — beneath the search input */
.wb-filter-bar {
    display: flex;
    gap: 4px;
    align-items: center;
}

.wb-filter-select {
    padding: 3px 5px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-xs);
    background: var(--bg-primary);
    color: var(--text-primary);
    min-width: 0;
}

.wb-filter-select:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* Topic filter gets more space — it's the primary organizational axis */
.wb-topic-filter-select {
    flex: 3;
}

/* Source selector gets less space — most users stay on WDI */
.wb-source-filter-select {
    flex: 2;
    color: var(--text-secondary);
}

.wb-search-input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    box-sizing: border-box;
}

.wb-search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 102, 179, 0.15);
}

.wb-indicator-browser {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* Popular indicators section */
.wb-popular-section {
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.wb-popular-title {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    padding: 6px var(--spacing-md) 2px;
}

.wb-popular-badge {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #b45309;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 3px;
    padding: 1px 5px;
    margin-left: 5px;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Topic tree */
.wb-topic-section {
    border-bottom: 1px solid var(--border-light);
}

.wb-topic-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 8px var(--spacing-md);
    cursor: pointer;
    transition: background var(--transition-fast);
    user-select: none;
}

.wb-topic-header:hover {
    background: var(--bg-hover);
}

.wb-topic-chevron {
    flex-shrink: 0;
    color: var(--text-tertiary);
    transition: transform var(--transition-fast);
    transform: rotate(-90deg);
}

.wb-topic-section.wb-topic-expanded .wb-topic-chevron {
    transform: rotate(0deg);
}

.wb-topic-name {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
}

.wb-topic-count {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    background: var(--bg-tertiary);
    border-radius: 10px;
    padding: 1px 6px;
    flex-shrink: 0;
}

.wb-topic-indicators {
    display: none;
    border-top: 1px solid var(--border-light);
    background: var(--bg-secondary);
}

.wb-topic-section.wb-topic-expanded .wb-topic-indicators {
    display: block;
}

/* Indicator items */
.wb-indicator-item {
    padding: 6px var(--spacing-md) 6px calc(var(--spacing-md) + 16px);
    cursor: pointer;
    border-bottom: 1px solid var(--border-light);
    transition: background var(--transition-fast);
}

.wb-indicator-item:last-child {
    border-bottom: none;
}

.wb-indicator-item:hover {
    background: var(--bg-hover);
}

.wb-indicator-item.selected {
    background: #e8f0fa;
    border-left: 3px solid var(--color-primary);
    padding-left: calc(var(--spacing-md) + 16px - 3px);
}

/* Popular section items have less indent */
.wb-popular-section .wb-indicator-item {
    padding-left: var(--spacing-md);
}

.wb-popular-section .wb-indicator-item.selected {
    padding-left: calc(var(--spacing-md) - 3px);
}

.wb-ind-label {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    line-height: 1.3;
}

.wb-ind-code {
    font-size: 10px;
    color: var(--text-tertiary);
    font-family: 'Courier New', Courier, monospace;
    margin-top: 1px;
}

.wb-ind-desc {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin-top: 2px;
    line-height: 1.4;
}

/* Config panel (country picker) */
.wb-config-panel {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: var(--spacing-md);
}

.wb-ind-selected-header {
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-color);
}

.wb-ind-selected-label {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.wb-ind-selected-meta {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin-top: 3px;
    font-family: 'Courier New', Courier, monospace;
}

.wb-ind-selected-source {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin-top: 2px;
}

.wb-ind-selected-desc {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-top: var(--spacing-xs);
    line-height: 1.5;
}

.wb-country-section {
    margin-bottom: var(--spacing-sm);
}

.wb-section-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.wb-group-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: var(--spacing-sm);
}

.wb-chip {
    font-size: 11px;
    font-weight: 500;
    padding: 3px 10px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
    line-height: 1.4;
}

.wb-chip:hover {
    background: var(--bg-hover);
    border-color: var(--color-primary);
}

.wb-chip.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.wb-chip-clear {
    color: var(--text-secondary);
    border-style: dashed;
}

.wb-chip-clear:hover {
    color: var(--color-error);
    border-color: var(--color-error);
    background: #fff5f5;
}

.wb-country-search {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
    box-sizing: border-box;
}

.wb-country-search:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 102, 179, 0.15);
}

.wb-country-list {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--bg-primary);
}

.wb-country-region {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    background: var(--bg-tertiary);
    padding: 4px 8px 3px;
    border-bottom: 1px solid var(--border-light);
    position: sticky;
    top: 0;
}

.wb-country-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: background 0.1s;
}

.wb-country-item:hover {
    background: var(--bg-secondary);
}

.wb-country-item input[type="checkbox"] {
    flex-shrink: 0;
    accent-color: var(--color-primary);
}

.wb-country-code {
    font-size: 10px;
    color: var(--text-tertiary);
    font-family: 'Courier New', Courier, monospace;
    margin-left: auto;
    flex-shrink: 0;
}

.wb-latest-only-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    cursor: pointer;
    margin-top: var(--spacing-sm);
    padding: 4px 0;
}

.wb-latest-only-label input[type="checkbox"] {
    accent-color: var(--color-primary);
    cursor: pointer;
}

.wb-fetch-btn {
    margin-top: var(--spacing-md);
}

.wb-loading {
    padding: var(--spacing-md);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    text-align: center;
}

.wb-hint {
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.wb-error {
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--color-error);
    font-size: var(--font-size-sm);
}

/* ================================
   ALFRED (Archival FRED) Panel
   ================================ */

/* Search panel (collapsible after series selection) */

.alfred-browser-panel {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: 40vh;
    min-height: 80px;
    border-bottom: 1px solid var(--border-color);
}

.alfred-browser-panel.collapsed {
    max-height: 40px;
    min-height: 40px;
}

.alfred-browser-panel.collapsed .alfred-search-wrap,
.alfred-browser-panel.collapsed .alfred-search-results {
    display: none;
}

.alfred-browser-panel.collapsed .alfred-browser-header {
    cursor: pointer;
}

.alfred-browser-panel.collapsed .alfred-browser-header:hover {
    background: var(--bg-hover);
}

.alfred-browser-panel.collapsed .alfred-selected-label {
    display: inline;
}

.alfred-browser-header {
    font-size: var(--font-size-sm);
    font-weight: 600;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.alfred-selected-label {
    display: none;
    font-weight: 400;
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alfred-search-wrap {
    padding: var(--spacing-sm) var(--spacing-md);
}

.alfred-search-results {
    flex: 1;
    overflow-y: auto;
    padding: 0 var(--spacing-md);
}

.alfred-search-result {
    padding: var(--spacing-sm) var(--spacing-sm);
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
}

.alfred-search-result:hover {
    background: var(--bg-hover);
}

.alfred-search-result.selected {
    background: #e8f0fa;
    border-left: 3px solid var(--color-primary);
}

.alfred-result-title {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.3;
}

.alfred-result-meta {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin-top: 2px;
}

/* Config panel (vintage selector) */

.alfred-config-panel {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: var(--spacing-md);
}

.alfred-series-header {
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-color);
}

.alfred-series-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.alfred-series-meta {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin-top: 3px;
}

.alfred-change-btn {
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    cursor: pointer;
    padding: 2px 0;
    margin-top: 4px;
}

.alfred-change-btn:hover {
    text-decoration: underline;
}

/* Transformations panel (collapsible) */

.alfred-options-panel {
    margin-bottom: var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

.alfred-options-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    color: var(--text-primary);
    user-select: none;
}

.alfred-options-toggle:hover {
    background: var(--bg-hover);
}

.alfred-options-chevron {
    font-size: 10px;
    color: var(--text-tertiary);
}

.alfred-options-body {
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

.alfred-options-panel.collapsed .alfred-options-body {
    display: none;
}

.alfred-option-group {
    margin-bottom: var(--spacing-sm);
}

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

.alfred-option-group label {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 2px;
}

.alfred-select {
    width: 100%;
    padding: 4px var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
}

.alfred-section-label {
    display: inline;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
}

/* Quick presets + Last X vintages */

.alfred-presets {
    margin-bottom: var(--spacing-md);
}

.alfred-preset-row {
    margin-bottom: var(--spacing-xs);
}

.alfred-preset-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: var(--spacing-xs);
}

.alfred-lastx-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: var(--spacing-sm);
}

.alfred-lastx-input {
    width: 48px;
    padding: 3px 6px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    text-align: center;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.alfred-chip {
    padding: 3px 10px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    cursor: pointer;
    transition: all 0.15s;
}

.alfred-chip:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.alfred-chip.active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* Observation period filter */

.alfred-filter-section {
    margin-bottom: var(--spacing-md);
}

.alfred-obs-filter {
    width: 100%;
    padding: 4px var(--spacing-sm);
    margin-top: var(--spacing-xs);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
}

.alfred-graph-rev-btn {
    display: block;
    width: 100%;
    margin-top: var(--spacing-xs);
    text-align: center;
}

.alfred-graph-rev-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Browse vintages (year-grouped, multi-select) */

.alfred-browse-section {
    margin-bottom: var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

.alfred-browse-toggle {
    padding: var(--spacing-sm);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.alfred-browse-toggle:hover {
    background: var(--bg-hover);
}

.alfred-browse-chevron {
    display: inline-block;
    width: 14px;
    font-size: 10px;
    color: var(--text-tertiary);
}

.alfred-browse-count {
    color: var(--text-tertiary);
    font-weight: 400;
}

.alfred-select-hint {
    font-size: 10px;
    color: var(--text-tertiary);
    padding: 0 var(--spacing-sm) var(--spacing-xs);
    font-style: italic;
}

.alfred-browse-body {
    max-height: 300px;
    overflow-y: auto;
    border-top: 1px solid var(--border-color);
}

.alfred-vintage-item {
    padding: 3px var(--spacing-sm);
    font-size: var(--font-size-xs);
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    user-select: none;
}

.alfred-vintage-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.alfred-vintage-item.selected {
    background: rgba(0, 102, 179, 0.12);
    color: var(--color-primary);
    font-weight: 500;
}

.alfred-vintage-date-text {
    white-space: nowrap;
}

.alfred-vintage-annotation {
    color: var(--text-tertiary);
    font-size: 10px;
    margin-left: 4px;
    white-space: nowrap;
}

.alfred-vintage-item.selected .alfred-vintage-annotation {
    color: var(--color-primary);
    opacity: 0.7;
}

/* Selection summary bar */

.alfred-selection-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
    background: rgba(0, 102, 179, 0.06);
    border-radius: var(--border-radius);
    font-size: var(--font-size-xs);
    color: var(--color-primary);
}

.alfred-clear-btn {
    background: none;
    border: none;
    color: var(--text-tertiary);
    font-size: var(--font-size-xs);
    cursor: pointer;
    padding: 2px 6px;
}

.alfred-clear-btn:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Add button */

.alfred-add-btn {
    margin-top: var(--spacing-sm);
}

/* Feedback states */

.alfred-loading {
    padding: var(--spacing-lg);
    text-align: center;
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
}

.alfred-error {
    padding: var(--spacing-md);
    color: var(--color-error, #ef4444);
    font-size: var(--font-size-sm);
}

.alfred-hint {
    padding: var(--spacing-md);
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
    text-align: center;
}

/* ===== Logo Library (Settings Modal) ===== */
.logo-library-container {
    width: 100%;
}
.logo-library-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}
.logo-library-item {
    position: relative;
    width: 72px;
    text-align: center;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 6px;
    padding: 4px;
    transition: border-color 0.15s;
}
.logo-library-item:hover {
    border-color: var(--color-primary, #0066b3);
    background: var(--bg-tertiary, #f5f5f5);
}
.logo-library-thumb {
    width: 60px;
    height: 40px;
    object-fit: contain;
    display: block;
    margin: 0 auto 2px;
}
.logo-library-thumb-empty {
    width: 60px;
    height: 40px;
    background: var(--bg-tertiary, #f0f0f0);
    border: 1px dashed var(--border-color, #ccc);
    border-radius: 3px;
    margin: 0 auto 2px;
}
.logo-library-name {
    display: block;
    font-size: 10px;
    color: var(--text-secondary, #666);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 64px;
}
.logo-library-delete {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: var(--color-error, #ef4444);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.logo-library-item:hover .logo-library-delete {
    display: flex;
}
.logo-library-empty {
    color: var(--text-tertiary, #999);
    font-size: 12px;
    padding: 8px 0;
}
.logo-library-actions {
    margin-top: 4px;
}
.logo-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}
.logo-upload-btn:hover {
    background: var(--bg-tertiary, #f0f0f0);
}

/* ── Financial Data Source Panel ──────────────────────────────────────────── */

/* Mode toggle: Time Series / Futures Curve */
.fin-mode-toggle {
    display: flex;
    gap: 0;
    margin-bottom: 10px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--border-color, #ddd);
}
.fin-mode-btn {
    flex: 1;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 500;
    background: var(--bg-secondary, #f5f5f5);
    border: none;
    cursor: pointer;
    color: var(--text-secondary, #666);
    transition: background 0.15s, color 0.15s;
}
.fin-mode-btn + .fin-mode-btn {
    border-left: 1px solid var(--border-color, #ddd);
}
.fin-mode-btn.active {
    background: var(--accent-color, #2563eb);
    color: #fff;
}
.fin-mode-btn:hover:not(.active) {
    background: var(--bg-tertiary, #ebebeb);
}

.fin-label {
    font-size: 11px;
    color: var(--text-secondary, #888);
    white-space: nowrap;
}

/* Search wrapper (reuse existing search-input-wrapper inside fin panel) */
.fin-search-wrap {
    margin-bottom: 8px;
}

/* Catalog browser */
.fin-catalog {
    overflow-y: auto;
    max-height: 300px;
    border: 1px solid var(--border-color, #e8e8e8);
    border-radius: 4px;
    background: var(--bg-primary, #fff);
}

.fin-cat-group {
    border-bottom: 1px solid var(--border-color, #eeeeee);
}
.fin-cat-group:last-child { border-bottom: none; }

.fin-cat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary, #333);
    cursor: pointer;
    background: var(--bg-secondary, #fafafa);
    user-select: none;
}
.fin-cat-header:hover { background: var(--bg-tertiary, #f0f0f0); }
.fin-cat-chevron { font-size: 10px; color: var(--text-secondary, #999); }

.fin-cat-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 5px 12px;
    cursor: pointer;
    transition: background 0.1s;
}
.fin-cat-item:hover   { background: var(--bg-tertiary, #f0f4ff); }
.fin-cat-item.selected { background: var(--accent-light, #eff6ff); }

.fin-cat-symbol {
    font-size: 11px;
    font-weight: 600;
    font-family: monospace;
    color: var(--accent-color, #2563eb);
    min-width: 72px;
}
.fin-cat-name {
    font-size: 11px;
    color: var(--text-secondary, #666);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fin-cat-note {
    font-size: 10px;
    color: var(--text-tertiary, #aaa);
    padding: 3px 12px 6px;
    font-style: italic;
}

/* Search results */
.fin-search-results-header {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary, #888);
    padding: 6px 10px;
    background: var(--bg-secondary, #fafafa);
    border-bottom: 1px solid var(--border-color, #eee);
}
.fin-searching {
    font-size: 12px;
    color: var(--text-secondary, #888);
    padding: 12px;
    text-align: center;
}
.fin-back-link {
    font-size: 11px;
    padding: 8px 12px;
    border-top: 1px solid var(--border-color, #eee);
}
.fin-back-link a { color: var(--accent-color, #2563eb); text-decoration: none; }
.fin-back-link a:hover { text-decoration: underline; }
.fin-error-text { color: var(--error-color, #dc2626) !important; }

/* Config panel */
.fin-config-panel {
    margin-top: 6px;
}
.fin-config-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    background: var(--bg-secondary, #f5f5f5);
    border-radius: 4px 4px 0 0;
    border: 1px solid var(--border-color, #ddd);
    border-bottom: none;
    margin-bottom: 0;
}
.fin-config-symbol {
    font-size: 13px;
    font-weight: 700;
    font-family: monospace;
    color: var(--accent-color, #2563eb);
}
.fin-config-name {
    font-size: 11px;
    color: var(--text-secondary, #666);
}

/* Futures contract picker */
.fin-contract-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 0 4px;
}
.fin-contract-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-primary, #333);
    cursor: pointer;
}
.fin-contract-check input[type="checkbox"] {
    margin: 0;
}

/* Range buttons */
.fin-range-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 0 4px;
}
.fin-range-btn {
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 4px;
    background: var(--bg-secondary, #f5f5f5);
    color: var(--text-secondary, #666);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.fin-range-btn:hover { background: var(--bg-tertiary, #ebebeb); border-color: #bbb; }
.fin-range-btn.active {
    background: var(--accent-color, #2563eb);
    border-color: var(--accent-color, #2563eb);
    color: #fff;
}

/* Interval selector */
.fin-interval-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0 8px;
}
.fin-interval-select {
    flex: 1;
    font-size: 12px;
    padding: 4px 6px;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 4px;
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #333);
}

/* Add to chart button */
.fin-add-btn {
    width: 100%;
    margin-top: 4px;
}

/* Error message */
.fin-error {
    font-size: 11px;
    color: var(--error-color, #dc2626);
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 4px;
    padding: 6px 8px;
    margin-bottom: 8px;
}

/* Futures curve panel */
.fin-curve-section {
    margin-bottom: 10px;
}
.fin-curve-select {
    width: 100%;
    font-size: 12px;
    padding: 5px 8px;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 4px;
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #333);
    margin-top: 4px;
}
.fin-hint {
    font-size: 10px;
    color: var(--text-tertiary, #aaa);
    font-weight: 400;
}
.fin-curve-snapshots {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
    margin-bottom: 6px;
}
.fin-curve-snapshot-row {
    display: flex;
    gap: 4px;
    align-items: center;
}
.fin-curve-date {
    flex: 1;
    font-size: 12px;
    padding: 4px 6px;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 4px;
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #333);
}
.fin-curve-remove-btn {
    padding: 3px 7px;
    font-size: 12px;
    background: none;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-secondary, #888);
}
.fin-curve-remove-btn:hover { background: #fee2e2; border-color: #fca5a5; color: #dc2626; }

.fin-quickpick-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
}
.fin-quickpick-btn {
    font-size: 11px;
    padding: 3px 8px;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 999px;
    background: var(--bg-secondary, #f5f5f5);
    color: var(--text-secondary, #555);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}
.fin-quickpick-btn:hover {
    background: var(--color-primary, #2563eb);
    border-color: var(--color-primary, #2563eb);
    color: #fff;
}

/* Intraday day-boundary separator (rendered in chart.js) */
.fin-day-sep {
    pointer-events: none;
    shape-rendering: crispEdges;
}


/* ===== Feedback Modal ===== */
.modal-feedback {
    width: 480px;
}

.feedback-tabs {
    display: flex;
    border-bottom: 2px solid #e0e0e0;
    padding: 0 20px;
    margin-bottom: 0;
}

.feedback-tab {
    padding: 8px 14px;
    border: none;
    background: none;
    color: var(--text-secondary, #666);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-size: 13px;
    transition: color 0.15s;
}

.feedback-tab:hover {
    color: var(--text-primary, #333);
}

.feedback-tab.active {
    color: var(--color-primary, #0066b3);
    border-bottom-color: var(--color-primary, #0066b3);
    font-weight: 500;
}

.feedback-tab-content {
    display: none;
}

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

.feedback-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 50vh;
    overflow-y: auto;
}

.feedback-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--border-color, #eee);
}

.feedback-item:last-child {
    border-bottom: none;
}

.feedback-item input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
    cursor: pointer;
}

.feedback-item-text {
    flex: 1;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-primary, #333);
    word-break: break-word;
}

.feedback-item.done .feedback-item-text {
    text-decoration: line-through;
    color: var(--text-tertiary, #999);
}

.feedback-item-delete {
    background: none;
    border: none;
    color: var(--text-tertiary, #bbb);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0 2px;
    flex-shrink: 0;
    visibility: hidden;
}

.feedback-item:hover .feedback-item-delete {
    visibility: visible;
}

.feedback-item-delete:hover {
    color: #e53e3e;
}

.feedback-add-row {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color, #eee);
}

.feedback-add-row input[type="text"] {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--border-color, #ddd);
    border-radius: var(--border-radius, 4px);
    font-size: 13px;
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #333);
}

.feedback-add-row input[type="text"]:focus {
    outline: none;
    border-color: var(--color-primary, #0066b3);
}

.feedback-empty {
    text-align: center;
    color: var(--text-tertiary, #999);
    font-size: 13px;
    padding: 24px 0;
}

/* (By Group is now a tab in elements-list — no extra panel CSS needed) */

/* =====================================================
   Shapes module — toolbar picker + editor
   ===================================================== */

/* Active state on the shapes toolbar button (shares look with arrow's active state) */
#tool-shapes.active {
    background: var(--bg-selected, var(--bg-hover));
    color: var(--color-primary);
}

/* Cursor while a shape is being placed */
.chart-area.shapes-mode,
#main-chart.shapes-mode,
.shapes-mode {
    cursor: crosshair !important;
}
.shapes-mode * { cursor: crosshair !important; }

/* Picker dropdown (appears below the toolbar Shapes button) */
.shapes-picker-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 1500;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg, 0 6px 18px rgba(0, 0, 0, 0.18));
    padding: 4px 0;
    min-width: 180px;
    max-height: 360px;
    overflow-y: auto;
}

.shape-picker-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    cursor: pointer;
    font-size: var(--font-size-xs, 12px);
    color: var(--text-primary);
    user-select: none;
    white-space: nowrap;
}

.shape-picker-option:hover {
    background: var(--bg-hover);
}

.shape-picker-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    color: var(--text-secondary, #555);
    flex: 0 0 22px;
}

.shape-picker-label {
    flex: 1;
}

/* Shape editor popup — borrows arrow editor styles via shared classnames,
   but adds a few specific tweaks */
.shape-editor-popup {
    /* inherits .arrow-editor-popup (set via combined classes in shapes.js) */
}

.shape-editor-section {
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--border-light);
}
.shape-editor-section:last-of-type { border-bottom: none; }

.shape-editor-section-title {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: var(--spacing-xs);
    letter-spacing: 0.5px;
}

.shape-editor-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
    flex-wrap: nowrap;
}
.shape-editor-row:last-child { margin-bottom: 0; }

.shape-editor-label {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    min-width: 56px;
    flex: 0 0 auto;
}

/* The first section (Type dropdown) sits flush under the inline header
   without its own section title. */
.shape-editor-section.shape-editor-section-flush {
    padding-top: var(--spacing-xs);
}

/* Position-section row label: a touch wider so "Bottom" / "Start Y" fit */
.shape-pos-row-label { min-width: 60px; }

.shape-editor-input {
    width: 60px;
    padding: 4px 6px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-xs);
    text-align: center;
    background: var(--bg-primary);
}
.shape-editor-input:focus { outline: none; border-color: var(--color-primary); }

/* Position-and-size inputs grow to fill the remaining row width so they
   never wrap onto a new line in the narrow inline pane. */
.shape-editor-input.shape-pos-input {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    padding-left: 8px;
}

/* Block-arrow direction: 4 small icon buttons in a single row */
.shape-direction-row {
    gap: 4px;
    justify-content: flex-start;
}
.shape-direction-btn {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-secondary);
    border-radius: var(--border-radius);
    cursor: pointer;
}
.shape-direction-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.shape-direction-btn.active {
    background: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
}
.shape-direction-btn.active:hover { background: var(--color-primary); }

/* Label section preview + buttons */
.shape-label-preview {
    flex: 1;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.shape-editor-row .shape-label-edit-btn,
.shape-editor-row .shape-label-clear-btn {
    flex: initial;
    padding: 4px 10px;
}
.shape-editor-row .shape-label-clear-btn { color: var(--color-danger, #c0392b); }

/* Editable shape labels overlaid on the chart */
.shape-labels-layer .shape-label {
    border-radius: 2px;
}
.shape-labels-layer .shape-label:hover {
    outline: 1px dashed rgba(0, 102, 179, 0.5);
}

.shape-editor-select {
    flex: 1;
    min-width: 80px;
    padding: 4px 6px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-xs);
    background: var(--bg-primary);
    cursor: pointer;
}
.shape-editor-select:focus { outline: none; border-color: var(--color-primary); }

.shape-color-picker {
    display: inline-flex;
    align-items: center;
}

.shape-rotation-slider,
.shape-corner-slider,
.shape-arrow-head-slider,
.shape-arrow-shaft-slider {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border-color);
    border-radius: 2px;
    cursor: pointer;
    min-width: 0;
}
.shape-rotation-slider::-webkit-slider-thumb,
.shape-corner-slider::-webkit-slider-thumb,
.shape-arrow-head-slider::-webkit-slider-thumb,
.shape-arrow-shaft-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: var(--color-primary);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.shape-rotation-value,
.shape-corner-value,
.shape-arrow-head-value,
.shape-arrow-shaft-value {
    min-width: 38px;
    text-align: right;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.shape-editor-actions {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-top: 1px solid var(--border-light);
    background: var(--bg-secondary);
    border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
}
.shape-editor-btn {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--bg-primary);
    font-size: var(--font-size-xs);
    cursor: pointer;
}
.shape-editor-btn:hover { background: var(--bg-hover); }
.shape-editor-btn.delete-btn { color: var(--color-danger, #c0392b); }
.shape-editor-btn.delete-btn:hover { background: rgba(192, 57, 43, 0.08); }

/* Shape elements in the chart SVG */
.shape-element.selected .shape-fill {
    /* Slight emphasis when selected (also gets handles) */
    filter: drop-shadow(0 0 1px rgba(0, 102, 179, 0.5));
}
.shape-handle { pointer-events: all; }

/* Inline-editor positioning rules (mirror arrow-editor inside element-detail-pane) */
.element-detail-pane .shape-editor-popup,
.element-detail-pane .shape-editor-section {
    position: static;
    box-shadow: none;
    border: none;
    border-radius: 0;
}