/* ==========================================================================
   Novaryn AI Financial — Design System
   Inter variable font, neutral zinc palette, refined accent blue
   ========================================================================== */

/* --------------------------------------------------------------------------
   Inter Variable Font
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Inter';
    src: url('/fonts/inter/inter-variable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   Design Tokens — Dark Theme (default)
   -------------------------------------------------------------------------- */
:root,
:root[data-theme="dark"] {
    /* Backgrounds — neutral zinc scale, warm near-black */
    --bg-primary:    #09090b;
    --bg-secondary:  #111113;
    --bg-card:       #1e1e22;
    --bg-tertiary:   #252528;
    --bg-elevated:   #2a2a2e;
    --bg-hover:      #2e2e32;
    --bg-overlay:    rgba(0, 0, 0, 0.6);

    /* Nav bar — dark navy tint */
    --nav-bg:        #0d1b2a;
    --nav-text:      #fafafa;
    --nav-text-dim:  #a1a1aa;
    --nav-border:    #1a2a3a;

    /* Accent — refined, desaturated blue */
    --accent-primary:   #3b82f6;
    --accent-hover:     #2563eb;
    --accent-muted:     rgba(59, 130, 246, 0.12);
    --accent-ring:      rgba(59, 130, 246, 0.3);

    /* Semantic colors */
    --color-success:       #22c55e;
    --color-success-muted: rgba(34, 197, 94, 0.12);
    --color-warning:       #eab308;
    --color-warning-muted: rgba(234, 179, 8, 0.12);
    --color-danger:        #ef4444;
    --color-danger-muted:  rgba(239, 68, 68, 0.12);
    --color-purple:        #8b5cf6;
    --color-purple-muted:  rgba(139, 92, 246, 0.12);
    --color-cyan:          #06b6d4;

    /* Financial */
    --color-gain: #22c55e;
    --color-loss: #ef4444;

    /* Gradients — removed; solid accent only */
    --gradient-brand:   var(--accent-primary);
    --gradient-success: var(--color-success);
    --gradient-danger:  var(--color-danger);

    /* Text */
    --text-primary:   #fafafa;
    --text-secondary: #a1a1aa;
    --text-muted:     #71717a;
    --text-inverse:   #09090b;

    /* Borders */
    --border-default: #27272a;
    --border-subtle:  #1e1e22;
    --border-strong:  #3f3f46;

    /* Shadows */
    --shadow-sm:       0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md:       0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg:       0 8px 24px rgba(0, 0, 0, 0.6);
    --shadow-glow:     none;
    --shadow-dropdown: 0 8px 32px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.04);

    /* Radius */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   14px;
    --radius-xl:   20px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast:   120ms ease;
    --transition-normal: 200ms ease;

    /* Nav height — consumed by layout */
    --nav-height: 60px;

    /* Legacy aliases (keep pages that reference these working) */
    --bg-hover-alpha: var(--accent-muted);
    --accent-secondary: #2563eb;
    --accent-success: var(--color-success);
    --accent-warning: var(--color-warning);
    --accent-danger:  var(--color-danger);
}

/* --------------------------------------------------------------------------
   Design Tokens — Light Theme
   -------------------------------------------------------------------------- */
:root[data-theme="light"] {
    --bg-primary:    #f0f2f5;
    --bg-secondary:  #ffffff;
    --bg-card:       #ffffff;
    --bg-tertiary:   #f4f4f5;
    --bg-elevated:   #f4f4f5;
    --bg-hover:      #e4e4e7;
    --bg-overlay:    rgba(0, 0, 0, 0.4);

    /* Nav bar — deep navy */
    --nav-bg:        #0c2340;
    --nav-text:      #ffffff;
    --nav-text-dim:  rgba(255, 255, 255, 0.65);
    --nav-border:    rgba(255, 255, 255, 0.1);

    --accent-primary:   #2563eb;
    --accent-hover:     #1d4ed8;
    --accent-muted:     rgba(37, 99, 235, 0.08);
    --accent-ring:      rgba(37, 99, 235, 0.25);

    --color-success:       #16a34a;
    --color-success-muted: rgba(22, 163, 74, 0.08);
    --color-warning:       #ca8a04;
    --color-warning-muted: rgba(202, 138, 4, 0.08);
    --color-danger:        #dc2626;
    --color-danger-muted:  rgba(220, 38, 38, 0.08);
    --color-purple:        #7c3aed;
    --color-purple-muted:  rgba(124, 58, 237, 0.08);
    --color-cyan:          #0891b2;

    --color-gain: #16a34a;
    --color-loss: #dc2626;

    --gradient-brand:   var(--accent-primary);
    --gradient-success: var(--color-success);
    --gradient-danger:  var(--color-danger);

    --text-primary:   #09090b;
    --text-secondary: #52525b;
    --text-muted:     #a1a1aa;
    --text-inverse:   #fafafa;

    --border-default: #e4e4e7;
    --border-subtle:  #f4f4f5;
    --border-strong:  #d4d4d8;

    --shadow-sm:       0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md:       0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg:       0 8px 24px rgba(0, 0, 0, 0.14);
    --shadow-glow:     none;
    --shadow-dropdown: 0 8px 32px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06);

    --accent-secondary: #1d4ed8;
    --accent-success: var(--color-success);
    --accent-warning: var(--color-warning);
    --accent-danger:  var(--color-danger);
}

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

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 0.75rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

h1 { font-size: 2rem;     font-weight: 700; }
h2 { font-size: 1.625rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.0625rem; }
h5 { font-size: 0.9375rem; }
h6 { font-size: 0.875rem; }

p { margin: 0 0 1rem; color: var(--text-secondary); }

a {
    color: var(--accent-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover { color: var(--accent-hover); }

small { font-size: 0.8125rem; }

code {
    font-family: 'SF Mono', 'Fira Code', 'Fira Mono', monospace;
    font-size: 0.875em;
    background: var(--bg-tertiary);
    padding: 0.1em 0.35em;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
}

hr {
    border: none;
    border-top: 1px solid var(--border-default);
    margin: 1.5rem 0;
}

/* --------------------------------------------------------------------------
   Bootstrap Variable Bridge
   -------------------------------------------------------------------------- */
:root {
    --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --bs-body-font-size: 0.9375rem;
    --bs-body-color: var(--text-primary);
    --bs-body-bg: var(--bg-primary);
    --bs-border-radius: var(--radius-md);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-lg: var(--radius-lg);
    --bs-border-color: var(--border-default);
    --bs-link-color: var(--accent-primary);
    --bs-link-hover-color: var(--accent-hover);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    padding: 0.5rem 1.125rem;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    transition: background-color var(--transition-fast),
                border-color var(--transition-fast),
                color var(--transition-fast),
                box-shadow var(--transition-fast);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    line-height: 1.5;
}

.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-ring);
}

.btn-primary {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #fff;
}

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

.btn-success {
    background-color: var(--color-success);
    border-color: var(--color-success);
    color: #fff;
}
.btn-success:hover {
    background-color: color-mix(in srgb, var(--color-success) 85%, black);
    border-color: color-mix(in srgb, var(--color-success) 85%, black);
    color: #fff;
}

.btn-danger {
    background-color: var(--color-danger);
    border-color: var(--color-danger);
    color: #fff;
}
.btn-danger:hover {
    background-color: color-mix(in srgb, var(--color-danger) 85%, black);
    border-color: color-mix(in srgb, var(--color-danger) 85%, black);
    color: #fff;
}

.btn-warning {
    background-color: var(--color-warning);
    border-color: var(--color-warning);
    color: #09090b;
}

.btn-outline-primary {
    background-color: transparent;
    border-color: var(--border-strong);
    color: var(--text-primary);
}
.btn-outline-primary:hover {
    background-color: var(--bg-elevated);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.btn-outline-secondary {
    background-color: transparent;
    border-color: var(--border-default);
    color: var(--text-secondary);
}
.btn-outline-secondary:hover {
    background-color: var(--bg-elevated);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

.btn-outline-danger {
    background-color: transparent;
    border-color: var(--border-default);
    color: var(--color-danger);
}
.btn-outline-danger:hover {
    background-color: var(--color-danger-muted);
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.btn-sm {
    font-size: 0.8125rem;
    padding: 0.3125rem 0.75rem;
    border-radius: var(--radius-sm);
}

.btn-lg {
    font-size: 1rem;
    padding: 0.6875rem 1.5rem;
    border-radius: var(--radius-lg);
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: none;
    transition: border-color var(--transition-fast);
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--border-default);
    padding: 1.125rem 1.5rem;
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.card-body { padding: 1.5rem; }

.card-footer {
    background-color: transparent;
    border-top: 1px solid var(--border-default);
    padding: 1rem 1.5rem;
}

/* --------------------------------------------------------------------------
   Form Controls
   -------------------------------------------------------------------------- */
.form-control,
.form-select {
    font-family: inherit;
    font-size: 0.9375rem;
    color: var(--text-primary);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 0.5625rem 0.875rem;
    height: 42px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    line-height: 1.5;
}

.form-control::placeholder { color: var(--text-muted); }

.form-control:focus,
.form-select:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-ring);
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.form-control:disabled,
.form-select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

textarea.form-control {
    height: auto;
    min-height: 100px;
    resize: vertical;
}

.form-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.375rem;
    letter-spacing: -0.005em;
}

.form-text {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.form-check-input {
    background-color: var(--bg-elevated);
    border-color: var(--border-strong);
}

.form-check-input:checked {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
}

.form-check-input:focus { box-shadow: 0 0 0 3px var(--accent-ring); }

.input-group-text {
    background-color: var(--bg-elevated);
    border-color: var(--border-default);
    color: var(--text-secondary);
    font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
.table {
    color: var(--text-primary);
    font-size: 0.9375rem;
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(255,255,255,0.02);
    --bs-table-hover-bg: var(--bg-elevated);
    --bs-table-border-color: var(--border-default);
    --bs-table-color: var(--text-primary);
    --bs-table-striped-color: var(--text-primary);
    --bs-table-hover-color: var(--text-primary);
    margin-bottom: 0;
}

.table th {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0;
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid var(--border-default);
    white-space: nowrap;
    text-transform: none;
}

.table td {
    padding: 0.75rem 0.875rem;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
    color: var(--text-primary);
}

.table tbody tr:last-child td { border-bottom: none; }
.table-sm th, .table-sm td { padding: 0.5rem 0.75rem; }

/* --------------------------------------------------------------------------
   Badges
   -------------------------------------------------------------------------- */
.badge {
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0;
    padding: 0.25em 0.6em;
    border-radius: var(--radius-full);
    line-height: 1.4;
}

.badge.bg-primary, .badge.text-bg-primary {
    background-color: var(--accent-muted) !important;
    color: var(--accent-primary) !important;
}
.badge.bg-success, .badge.text-bg-success {
    background-color: var(--color-success-muted) !important;
    color: var(--color-success) !important;
}
.badge.bg-danger, .badge.text-bg-danger {
    background-color: var(--color-danger-muted) !important;
    color: var(--color-danger) !important;
}
.badge.bg-warning, .badge.text-bg-warning {
    background-color: var(--color-warning-muted) !important;
    color: var(--color-warning) !important;
}
.badge.bg-secondary, .badge.text-bg-secondary {
    background-color: var(--bg-elevated) !important;
    color: var(--text-secondary) !important;
}
.badge.bg-info, .badge.text-bg-info {
    background-color: var(--color-purple-muted) !important;
    color: var(--color-purple) !important;
}

/* --------------------------------------------------------------------------
   Alerts
   -------------------------------------------------------------------------- */
.alert {
    font-size: 0.9375rem;
    border-radius: var(--radius-md);
    padding: 0.875rem 1.125rem;
    border-width: 1px;
}

.alert-primary {
    background-color: var(--accent-muted);
    border-color: rgba(59, 130, 246, 0.25);
    color: var(--text-primary);
}
.alert-success {
    background-color: var(--color-success-muted);
    border-color: rgba(34, 197, 94, 0.25);
    color: var(--text-primary);
}
.alert-danger {
    background-color: var(--color-danger-muted);
    border-color: rgba(239, 68, 68, 0.25);
    color: var(--text-primary);
}
.alert-warning {
    background-color: var(--color-warning-muted);
    border-color: rgba(234, 179, 8, 0.25);
    color: var(--text-primary);
}
.alert-info {
    background-color: var(--color-purple-muted);
    border-color: rgba(139, 92, 246, 0.25);
    color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   Dropdowns
   -------------------------------------------------------------------------- */
.dropdown-menu {
    background-color: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-dropdown);
    padding: 0.375rem;
    font-size: 0.9375rem;
    min-width: 180px;
}

.dropdown-item {
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
    font-size: 0.9375rem;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}
.dropdown-item.active {
    background-color: var(--accent-muted);
    color: var(--accent-primary);
}
.dropdown-divider {
    border-top-color: var(--border-default);
    margin: 0.25rem 0;
}
.dropdown-header {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    padding: 0.375rem 0.75rem 0.25rem;
}

/* --------------------------------------------------------------------------
   Modals
   -------------------------------------------------------------------------- */
.modal-content {
    background-color: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    color: var(--text-primary);
}
.modal-header {
    border-bottom: 1px solid var(--border-default);
    padding: 1.25rem 1.5rem;
}
.modal-title {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.modal-body { padding: 1.5rem; }
.modal-footer {
    border-top: 1px solid var(--border-default);
    padding: 1rem 1.5rem;
}
.btn-close { opacity: 0.5; }
:root[data-theme="dark"] .btn-close { filter: invert(1); }
.btn-close:hover { opacity: 1; }

/* --------------------------------------------------------------------------
   Nav Tabs / Pills
   -------------------------------------------------------------------------- */
.nav-tabs {
    border-bottom: 1px solid var(--border-default);
    gap: 0.125rem;
}
.nav-tabs .nav-link {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-muted);
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.625rem 0.875rem;
    border-radius: 0;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.nav-tabs .nav-link:hover {
    color: var(--text-primary);
    border-bottom-color: var(--border-strong);
    background: transparent;
}
.nav-tabs .nav-link.active {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
    background: transparent;
    font-weight: 600;
}
.nav-pills .nav-link {
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    padding: 0.4375rem 0.875rem;
    font-weight: 500;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
.nav-pills .nav-link:hover { background-color: var(--bg-elevated); color: var(--text-primary); }
.nav-pills .nav-link.active { background-color: var(--accent-muted); color: var(--accent-primary); }

/* --------------------------------------------------------------------------
   List Groups
   -------------------------------------------------------------------------- */
.list-group-item {
    background-color: var(--bg-card);
    border-color: var(--border-default);
    color: var(--text-primary);
    font-size: 0.9375rem;
    padding: 0.75rem 1rem;
    transition: background-color var(--transition-fast);
}
.list-group-item:hover { background-color: var(--bg-elevated); }
.list-group-item.active {
    background-color: var(--accent-muted);
    border-color: var(--border-default);
    color: var(--accent-primary);
}

/* --------------------------------------------------------------------------
   Progress
   -------------------------------------------------------------------------- */
.progress {
    background-color: var(--bg-elevated);
    border-radius: var(--radius-full);
    height: 6px;
}
.progress-bar {
    background-color: var(--accent-primary);
    border-radius: var(--radius-full);
}

/* --------------------------------------------------------------------------
   Scrollbar
   -------------------------------------------------------------------------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-elevated); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--bg-hover); }

/* --------------------------------------------------------------------------
   Selection
   -------------------------------------------------------------------------- */
::selection {
    background-color: var(--accent-muted);
    color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   Page Header
   -------------------------------------------------------------------------- */
.page-header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-default);
}
.page-header h1 { margin-bottom: 0.25rem; font-size: 1.625rem; }
.page-subtitle { color: var(--text-muted); font-size: 0.9375rem; margin: 0; }

/* --------------------------------------------------------------------------
   Stat Cards
   -------------------------------------------------------------------------- */
.stat-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: border-color var(--transition-fast);
}
.stat-card:hover { border-color: var(--border-strong); }

.stat-card-link { display: block; text-decoration: none; }
.stat-card-link:hover { border-color: var(--accent-primary); }

.stat-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}
.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 0.25rem;
}
.stat-meta { font-size: 0.8125rem; color: var(--text-muted); }

/* --------------------------------------------------------------------------
   Financial Utilities
   -------------------------------------------------------------------------- */
.text-gain,  .text-positive { color: var(--color-gain) !important; }
.text-loss,  .text-negative { color: var(--color-loss) !important; }
.font-mono {
    font-family: 'SF Mono', 'Fira Code', 'Fira Mono', monospace;
    font-size: 0.875em;
}

/* --------------------------------------------------------------------------
   Status Dot
   -------------------------------------------------------------------------- */
.status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--text-muted);
    flex-shrink: 0;
}
.status-dot.live, .status-dot.success {
    background-color: var(--color-success);
    animation: pulse-dot 2.5s ease-in-out infinite;
}
.status-dot.warning { background-color: var(--color-warning); }
.status-dot.danger  { background-color: var(--color-danger); }

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.35; }
}

/* --------------------------------------------------------------------------
   Skeleton
   -------------------------------------------------------------------------- */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-elevated) 25%,
        var(--bg-hover) 50%,
        var(--bg-elevated) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.6s ease-in-out infinite;
    border-radius: var(--radius-md);
}

@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* --------------------------------------------------------------------------
   Empty States
   -------------------------------------------------------------------------- */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    color: var(--text-muted);
}
.empty-state-icon { width: 48px; height: 48px; opacity: 0.3; margin-bottom: 1.25rem; }
.empty-state h3 { font-size: 1rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.5rem; }
.empty-state p { font-size: 0.9375rem; color: var(--text-muted); max-width: 320px; margin: 0 auto; }

/* --------------------------------------------------------------------------
   Chart Panel
   -------------------------------------------------------------------------- */
.chart-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

/* --------------------------------------------------------------------------
   Sparklines
   -------------------------------------------------------------------------- */
.sparkline { display: inline-block; vertical-align: middle; width: 80px; height: 28px; }
.sparkline-up   polyline { stroke: var(--color-gain); }
.sparkline-down polyline { stroke: var(--color-loss); }
.sparkline-flat polyline { stroke: var(--text-muted); }

/* --------------------------------------------------------------------------
   Spinner
   -------------------------------------------------------------------------- */
.spinner-border { color: var(--accent-primary); }

/* --------------------------------------------------------------------------
   Validation
   -------------------------------------------------------------------------- */
.valid-feedback   { color: var(--color-success); font-size: 0.8125rem; }
.invalid-feedback { color: var(--color-danger);  font-size: 0.8125rem; }
.form-control.is-invalid { border-color: var(--color-danger); }
.form-control.is-valid   { border-color: var(--color-success); }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2); }
.form-control.is-valid:focus   { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2); }
.validation-message    { color: var(--color-danger); font-size: 0.8125rem; margin-top: 0.25rem; }
.field-validation-error { color: var(--color-danger); font-size: 0.8125rem; }

/* --------------------------------------------------------------------------
   Utility Overrides
   -------------------------------------------------------------------------- */
.text-muted     { color: var(--text-muted)     !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-success   { color: var(--color-success)  !important; }
.text-danger    { color: var(--color-danger)   !important; }
.text-warning   { color: var(--color-warning)  !important; }
.text-info      { color: var(--color-cyan)     !important; }
.border         { border-color: var(--border-default) !important; }
.border-top     { border-top-color: var(--border-default) !important; }
.border-bottom  { border-bottom-color: var(--border-default) !important; }

/* --------------------------------------------------------------------------
   Auth Pages (MinimalLayout)
   -------------------------------------------------------------------------- */
.auth-page {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background-color: var(--bg-primary);
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    box-shadow: var(--shadow-lg);
}

.auth-logo {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 2rem;
    justify-content: center;
    text-decoration: none;
}

.auth-logo-icon {
    width: 36px;
    height: 36px;
    background-color: var(--accent-primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.auth-logo-icon svg { color: #fff; width: 20px; height: 20px; }

.auth-logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.auth-logo-name { font-size: 1rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; }
.auth-logo-sub  { font-size: 0.75rem; color: var(--text-muted); }

.auth-title    { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.025em; color: var(--text-primary); margin-bottom: 0.25rem; }
.auth-subtitle { font-size: 0.9375rem; color: var(--text-muted); margin-bottom: 1.75rem; }

.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin: 1.25rem 0;
    color: var(--text-muted);
    font-size: 0.8125rem;
}
.auth-divider::before, .auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--border-default);
}

.auth-social-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 0.5625rem 1rem;
    height: 42px;
    background-color: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.auth-social-btn:hover {
    background-color: var(--bg-hover);
    border-color: var(--border-strong);
    color: var(--text-primary);
}
.auth-social-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.auth-footer { margin-top: 1.5rem; text-align: center; font-size: 0.9375rem; color: var(--text-muted); }
.auth-footer a { color: var(--accent-primary); font-weight: 500; }

/* Light mode: add shadow lift so cards pop off the gray background */
:root[data-theme="light"] .card,
:root[data-theme="light"] .stat-card,
:root[data-theme="light"] .chart-panel,
:root[data-theme="light"] .auth-card {
    box-shadow: var(--shadow-sm);
}