/* ═══════════════════════════════════════════════════════════════════
   AURORA THEME — Financial Aurora gradient and glass morphism aesthetic
   Extracted from prototypes for production use
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   CSS VARIABLES — Aurora color system with light/dark modes
   ═══════════════════════════════════════════════════════════════════ */

:root[data-theme="light"] {
    /* Backgrounds - Light aurora */
    --aurora-bg-primary: #f8f9ff;
    --aurora-bg-secondary: #ffffff;
    --aurora-bg-tertiary: #f0f4ff;

    /* Aurora gradients */
    --aurora-1: linear-gradient(135deg, #f8f9ff 0%, #e8f0ff 50%, #f0f4ff 100%);
    --aurora-2: linear-gradient(45deg, rgba(0, 212, 255, 0.05) 0%, rgba(138, 43, 226, 0.05) 100%);
    --aurora-glow: radial-gradient(ellipse at center, rgba(0, 150, 255, 0.08) 0%, transparent 70%);

    /* Glass morphism */
    --aurora-glass-bg: rgba(255, 255, 255, 0.9);
    --aurora-glass-border: rgba(0, 0, 0, 0.1);
    --aurora-glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);

    /* Modal */
    --aurora-modal-bg: rgba(255, 255, 255, 0.92);
    --aurora-modal-overlay: rgba(0, 0, 0, 0.4);
    --aurora-modal-border: rgba(0, 0, 0, 0.1);
    --aurora-modal-close-border: rgba(0, 0, 0, 0.15);
    --aurora-modal-close-bg: rgba(0, 0, 0, 0.05);
    --aurora-modal-close-color: rgba(0, 0, 0, 0.5);
    --aurora-modal-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05) inset;
    --aurora-modal-scrollbar-track: rgba(0, 0, 0, 0.05);
    --aurora-modal-scrollbar-thumb: rgba(0, 0, 0, 0.15);
    --aurora-modal-scrollbar-thumb-hover: rgba(0, 0, 0, 0.25);

    /* Text colors */
    --aurora-text-primary: #1a1f4a;
    --aurora-text-secondary: #4a5578;
    --aurora-text-muted: #8891ad;

    /* Accent colors */
    --aurora-accent-positive: #00c878;
    --aurora-accent-negative: #d42f62;
    --aurora-accent-info: #0096cc;
    --aurora-accent-warning: #ff9500;

    /* Button text — primary btn has a theme-invariant gradient bg, so text must
       stay dark in both modes (not flip via --aurora-text-primary). #315 */
    --aurora-btn-primary-text: #0a0e27;

    /* Shadows & Glows */
    --aurora-glow-positive: 0 0 20px rgba(0, 200, 120, 0.2);
    --aurora-glow-negative: 0 0 20px rgba(212, 47, 98, 0.2);
    --aurora-glow-info: 0 0 20px rgba(0, 150, 204, 0.2);
}

:root[data-theme="dark"] {
    /* Backgrounds - Aurora gradient mesh */
    --aurora-bg-primary: #0a0e27;
    --aurora-bg-secondary: #0f1435;
    --aurora-bg-tertiary: #1a1f4a;

    /* Aurora gradients - enhanced contrast */
    --aurora-1: linear-gradient(135deg, #0a0e27 0%, #1a1f4a 50%, #0f1435 100%);
    --aurora-2: linear-gradient(45deg, rgba(0, 212, 255, 0.15) 0%, rgba(138, 43, 226, 0.15) 100%);
    --aurora-glow: radial-gradient(ellipse at center, rgba(0, 212, 255, 0.2) 0%, transparent 70%);

    /* Glass morphism */
    --aurora-glass-bg: rgba(26, 31, 74, 0.7);
    --aurora-glass-border: rgba(255, 255, 255, 0.1);
    --aurora-glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);

    /* Modal */
    --aurora-modal-bg: rgba(26, 31, 74, 0.85);
    --aurora-modal-overlay: rgba(10, 14, 39, 0.8);
    --aurora-modal-border: rgba(0, 255, 163, 0.2);
    --aurora-modal-close-border: rgba(255, 255, 255, 0.1);
    --aurora-modal-close-bg: rgba(255, 255, 255, 0.05);
    --aurora-modal-close-color: rgba(255, 255, 255, 0.6);
    --aurora-modal-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05) inset, 0 0 60px rgba(0, 212, 255, 0.15);
    --aurora-modal-scrollbar-track: rgba(255, 255, 255, 0.05);
    --aurora-modal-scrollbar-thumb: rgba(0, 255, 163, 0.3);
    --aurora-modal-scrollbar-thumb-hover: rgba(0, 255, 163, 0.5);

    /* Text colors */
    --aurora-text-primary: #ffffff;
    --aurora-text-secondary: #a8b2d1;
    --aurora-text-muted: #8891ad;

    /* Accent colors */
    --aurora-accent-positive: #00ffa3;
    --aurora-accent-negative: #d9306a;
    --aurora-accent-info: #00d4ff;
    --aurora-accent-warning: #ffd93d;

    /* Button text — same value in both themes; gradient bg is theme-invariant (#315) */
    --aurora-btn-primary-text: #0a0e27;

    /* Shadows & Glows - enhanced */
    --aurora-glow-positive: 0 0 20px rgba(0, 255, 163, 0.4), 0 0 40px rgba(0, 255, 163, 0.2);
    --aurora-glow-negative: 0 0 20px rgba(217, 48, 106, 0.4), 0 0 40px rgba(217, 48, 106, 0.2);
    --aurora-glow-info: 0 0 20px rgba(0, 212, 255, 0.4), 0 0 40px rgba(0, 212, 255, 0.2);
}

/* ═══════════════════════════════════════════════════════════════════
   AURORA BACKGROUND ANIMATIONS
   ═══════════════════════════════════════════════════════════════════ */

.aurora-body {
    background: var(--aurora-1);
    position: relative;
    overflow-x: hidden;
}

/* Aurora gradient animation - enhanced visibility */
.aurora-body::before {
    content: '';
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: var(--aurora-2);
    animation: aurora-shift 15s ease-in-out infinite alternate;
    z-index: -1;
    opacity: 0.8;
}

@keyframes aurora-shift {
    0% { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(5%, 5%) rotate(3deg); }
}

/* Constellation dots - enhanced visibility */
.aurora-body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(2px 2px at 20% 30%, white, transparent),
        radial-gradient(2px 2px at 60% 70%, white, transparent),
        radial-gradient(1px 1px at 50% 50%, white, transparent),
        radial-gradient(1px 1px at 80% 10%, white, transparent),
        radial-gradient(2px 2px at 90% 60%, white, transparent),
        radial-gradient(1px 1px at 33% 80%, white, transparent),
        radial-gradient(1px 1px at 15% 60%, white, transparent),
        radial-gradient(2px 2px at 45% 20%, white, transparent),
        radial-gradient(1px 1px at 70% 85%, white, transparent),
        radial-gradient(1px 1px at 25% 45%, white, transparent);
    background-size: 200% 200%;
    background-position: 0 0, 40% 60%, 130% 270%, 70% 100%, 300% 300%, 150% 200%, 85% 45%, 210% 130%, 340% 240%, 110% 175%;
    opacity: 0.4;
    z-index: -1;
    animation: twinkle 3s ease-in-out infinite;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.7; }
}

/* ═══════════════════════════════════════════════════════════════════
   AURORA CARDS & CONTAINERS
   ═══════════════════════════════════════════════════════════════════ */

.aurora-card {
    background: var(--aurora-glass-bg);
    border: 1px solid var(--aurora-glass-border);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    box-shadow: var(--aurora-glass-shadow);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Filter cards need visible overflow for dropdowns and higher z-index */
#filter-bar {
    overflow: visible !important;
    position: relative !important;
    z-index: 100 !important;
}

#rec-filter-panel {
    overflow: visible !important;
}

.aurora-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: var(--aurora-glow);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.aurora-card:hover {
    transform: translateY(-4px);
    border-color: var(--aurora-accent-info);
}

.aurora-card:hover::before {
    opacity: 1;
}

/* Stat cards for KPIs */
.aurora-stat-card {
    background: var(--aurora-glass-bg);
    border: 1px solid var(--aurora-glass-border);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    box-shadow: var(--aurora-glass-shadow);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.aurora-stat-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: var(--aurora-glow);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.aurora-stat-card:hover {
    transform: translateY(-4px);
    border-color: var(--aurora-accent-info);
}

.aurora-stat-card:hover::before {
    opacity: 1;
}

/* Warning state for over-allocated hero card */
.aurora-stat-card-warning {
    background: rgba(255, 59, 48, 0.08);
    border-color: rgba(255, 59, 48, 0.25);
}

.aurora-stat-card-warning:hover {
    border-color: rgba(255, 59, 48, 0.4);
}

.aurora-stat-label {
    font-size: 0.8125rem;
    color: var(--aurora-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.aurora-stat-value {
    font-family: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--aurora-text-primary);
    margin-bottom: 0.5rem;
}

.aurora-stat-sublabel {
    font-size: 0.8125rem;
    color: var(--aurora-text-secondary);
}

.aurora-stat-value.positive {
    color: var(--aurora-accent-positive);
    text-shadow: var(--aurora-glow-positive);
}

.aurora-stat-value.negative {
    color: var(--aurora-accent-negative);
    text-shadow: var(--aurora-glow-negative);
}

.aurora-stat-change {
    font-size: 0.875rem;
    color: var(--aurora-text-muted);
}

/* Hero card for dashboard net worth */
.aurora-hero-card {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.06) 0%, rgba(0, 255, 163, 0.04) 50%, rgba(138, 43, 226, 0.04) 100%);
    border: 1px solid rgba(0, 212, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 2rem 2.5rem;
    box-shadow: var(--aurora-glass-shadow);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.aurora-hero-card::before {
    content: '';
    position: absolute;
    top: -100%;
    right: -50%;
    width: 200%;
    height: 300%;
    background: radial-gradient(ellipse at 30% 50%, rgba(0, 255, 163, 0.06) 0%, transparent 60%);
    pointer-events: none;
}

.aurora-hero-value {
    font-family: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--aurora-accent-positive);
    text-shadow: var(--aurora-glow-positive);
}

.aurora-hero-label {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--aurora-text-muted);
    margin-bottom: 0.5rem;
}

.aurora-hero-sub {
    font-size: 0.9375rem;
    color: var(--aurora-text-secondary);
    margin-top: 0.375rem;
}

.aurora-hero-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.aurora-hero-breakdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: var(--aurora-text-secondary);
}

.aurora-hero-breakdown-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.aurora-hero-breakdown-value {
    font-family: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--aurora-text-primary);
    margin-left: auto;
    min-width: 5rem;
    text-align: right;
}

/* Dashboard widget cards — unified internal structure */
.aurora-widget-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.aurora-widget-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.aurora-widget-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--aurora-text-secondary);
}

.aurora-widget-badge {
    margin-left: auto;
    font-family: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.aurora-widget-value {
    font-family: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--aurora-text-primary);
}

.aurora-widget-sub {
    font-size: 0.875rem;
    color: var(--aurora-text-muted);
    margin-top: 0.25rem;
}

/* Chart cards */
.aurora-chart-card {
    background: var(--aurora-glass-bg);
    border: 1px solid var(--aurora-glass-border);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    box-shadow: var(--aurora-glass-shadow);
}

.aurora-chart-title {
    font-size: 1.125rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    color: var(--aurora-text-primary);
}

.aurora-chart-container {
    position: relative;
    height: 300px;
}

/* ═══════════════════════════════════════════════════════════════════
   AURORA NAVIGATION
   ═══════════════════════════════════════════════════════════════════ */

.aurora-nav-tabs {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
}

.aurora-nav-tab {
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: 1px solid var(--aurora-glass-border);
    color: var(--aurora-text-secondary);
    text-decoration: none;
    border-radius: 12px;
    transition: all 0.3s ease;
    font-size: 0.9375rem;
}

.aurora-nav-tab:hover {
    background: var(--aurora-glass-bg);
    backdrop-filter: blur(10px);
}

.aurora-nav-tab.active {
    background: var(--aurora-glass-bg);
    backdrop-filter: blur(10px);
    border-color: var(--aurora-accent-info);
    color: var(--aurora-text-primary);
}

/* ═══════════════════════════════════════════════════════════════════
   AURORA BUTTONS
   ═══════════════════════════════════════════════════════════════════ */

.aurora-btn {
    background: var(--aurora-glass-bg);
    border: 1px solid var(--aurora-glass-border);
    backdrop-filter: blur(10px);
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    color: var(--aurora-text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    font-weight: 500;
}

.aurora-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--aurora-glass-shadow);
}

.aurora-btn-primary {
    background: var(--aurora-accent-info);
    border-color: var(--aurora-accent-info);
    color: white;
}

.aurora-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--aurora-glow-info);
}

/* ═══════════════════════════════════════════════════════════════════
   AURORA TRANSACTIONS & LISTS
   ═══════════════════════════════════════════════════════════════════ */

.aurora-transaction-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

:root[data-theme="dark"] .aurora-transaction-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

:root[data-theme="light"] .aurora-transaction-item {
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.aurora-transaction-item:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(4px);
}

:root[data-theme="light"] .aurora-transaction-item:hover {
    background: rgba(0, 0, 0, 0.03);
}

.aurora-transaction-merchant {
    font-weight: 500;
    color: var(--aurora-text-primary);
}

.aurora-transaction-category {
    font-size: 0.875rem;
    color: var(--aurora-text-secondary);
}

.aurora-transaction-amount {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', sans-serif;
    font-weight: 500;
    font-size: 1rem;
    color: var(--aurora-text-primary);
}

.aurora-transaction-amount.positive {
    color: var(--aurora-accent-positive);
}

.aurora-transaction-amount.negative {
    color: var(--aurora-text-primary);
}

/* ═══════════════════════════════════════════════════════════════════
   AURORA BADGES
   ═══════════════════════════════════════════════════════════════════ */

.aurora-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    backdrop-filter: blur(10px);
}

.aurora-badge-weekly {
    background: rgba(0, 212, 255, 0.15);
    color: var(--aurora-accent-info);
    border: 1px solid rgba(0, 212, 255, 0.3);
}

.aurora-badge-monthly {
    background: rgba(0, 200, 120, 0.15);
    color: var(--aurora-accent-positive);
    border: 1px solid rgba(0, 200, 120, 0.3);
}

.aurora-badge-yearly {
    background: rgba(255, 153, 0, 0.15);
    color: var(--aurora-accent-warning);
    border: 1px solid rgba(255, 153, 0, 0.3);
}

/* WCAG contrast overrides for recurrence badges — use text-primary in both modes
   rather than same-hue shades. See #314 for full audit; prior -800/-900 (light) and
   -200 (dark) fixes (#284) still left same-hue pairing that the auditor flags at <4.5:1. */
:root[data-theme="light"] .aurora-badge-weekly,
:root[data-theme="light"] .aurora-badge-monthly,
:root[data-theme="light"] .aurora-badge-yearly {
    color: var(--aurora-text-primary);
}

:root[data-theme="dark"] .aurora-badge-monthly {
    background: rgba(0, 255, 163, 0.2);
    color: var(--aurora-text-primary);  /* white — breaks same-hue near-1:1 on tinted dark bg (#314) */
}

:root[data-theme="dark"] .aurora-badge-weekly {
    color: var(--aurora-text-primary);
}

:root[data-theme="dark"] .aurora-badge-yearly {
    color: var(--aurora-text-primary);
}

/* Service source badges — theme-aware with WCAG AA contrast.
   Both modes use var(--aurora-text-primary): dark navy in light mode, white in dark mode.
   Same-hue 800-900 (light) and -200 (dark) shades both failed the auditor's hue-contrast
   check and created visual same-hue pairing. Cross-hue text-primary breaks both problems
   (#314 root cause; successor to #246/#247/#284). */
:root[data-theme="light"] {
    --aurora-badge-accounts-bg: rgba(79, 70, 229, 0.12);
    --aurora-badge-accounts-text: var(--aurora-text-primary);
    --aurora-badge-accounts-border: rgba(79, 70, 229, 0.3);

    --aurora-badge-pensions-bg: rgba(180, 130, 0, 0.12);
    --aurora-badge-pensions-text: var(--aurora-text-primary);
    --aurora-badge-pensions-border: rgba(180, 130, 0, 0.3);

    --aurora-badge-investments-bg: rgba(37, 99, 235, 0.12);
    --aurora-badge-investments-text: var(--aurora-text-primary);
    --aurora-badge-investments-border: rgba(37, 99, 235, 0.3);

    --aurora-badge-property-bg: rgba(5, 150, 105, 0.12);
    --aurora-badge-property-text: var(--aurora-text-primary);
    --aurora-badge-property-border: rgba(5, 150, 105, 0.3);

    --aurora-badge-manual-bg: rgba(22, 163, 74, 0.12);
    --aurora-badge-manual-text: var(--aurora-text-primary);
    --aurora-badge-manual-border: rgba(22, 163, 74, 0.3);

    --aurora-badge-recurring-bg: rgba(126, 58, 242, 0.12);
    --aurora-badge-recurring-text: var(--aurora-text-primary);
    --aurora-badge-recurring-border: rgba(126, 58, 242, 0.3);

    --aurora-badge-payment-bg: rgba(245, 158, 11, 0.15);
    --aurora-badge-payment-border: rgba(245, 158, 11, 0.3);
    --aurora-badge-payment-text: var(--aurora-text-primary);
    --aurora-badge-filing-bg: rgba(59, 130, 246, 0.15);
    --aurora-badge-filing-border: rgba(59, 130, 246, 0.3);
    --aurora-badge-filing-text: var(--aurora-text-primary);
    --aurora-badge-reporting-bg: rgba(168, 85, 247, 0.15);
    --aurora-badge-reporting-border: rgba(168, 85, 247, 0.3);
    --aurora-badge-reporting-text: var(--aurora-text-primary);
    --aurora-badge-info-text: var(--aurora-text-primary);
    --aurora-badge-warning-text: var(--aurora-text-primary);
}

:root[data-theme="dark"] {
    --aurora-badge-accounts-bg: rgba(129, 140, 248, 0.15);
    /* same-hue -200 text collapses contrast to ~2:1 against tint hue — use text-primary (#fff) instead (#314) */
    --aurora-badge-accounts-text: var(--aurora-text-primary);
    --aurora-badge-accounts-border: rgba(129, 140, 248, 0.3);

    --aurora-badge-pensions-bg: rgba(250, 204, 21, 0.15);
    --aurora-badge-pensions-text: var(--aurora-text-primary);
    --aurora-badge-pensions-border: rgba(250, 204, 21, 0.3);

    --aurora-badge-investments-bg: rgba(96, 165, 250, 0.15);
    --aurora-badge-investments-text: var(--aurora-text-primary);
    --aurora-badge-investments-border: rgba(96, 165, 250, 0.3);

    --aurora-badge-property-bg: rgba(52, 211, 153, 0.15);
    --aurora-badge-property-text: var(--aurora-text-primary);
    --aurora-badge-property-border: rgba(52, 211, 153, 0.3);

    --aurora-badge-manual-bg: rgba(74, 222, 128, 0.15);
    --aurora-badge-manual-text: var(--aurora-text-primary);
    --aurora-badge-manual-border: rgba(74, 222, 128, 0.3);

    --aurora-badge-recurring-bg: rgba(192, 132, 252, 0.15);
    --aurora-badge-recurring-text: var(--aurora-text-primary);
    --aurora-badge-recurring-border: rgba(192, 132, 252, 0.3);

    --aurora-badge-payment-bg: rgba(245, 158, 11, 0.15);
    --aurora-badge-payment-border: rgba(245, 158, 11, 0.3);
    --aurora-badge-payment-text: var(--aurora-text-primary);
    --aurora-badge-filing-bg: rgba(59, 130, 246, 0.15);
    --aurora-badge-filing-border: rgba(59, 130, 246, 0.3);
    --aurora-badge-filing-text: var(--aurora-text-primary);
    --aurora-badge-reporting-bg: rgba(168, 85, 247, 0.15);
    --aurora-badge-reporting-border: rgba(168, 85, 247, 0.3);
    --aurora-badge-reporting-text: var(--aurora-text-primary);
    --aurora-badge-info-text: var(--aurora-text-primary);
    --aurora-badge-warning-text: var(--aurora-text-primary);
}

.aurora-badge-source-accounts {
    background: var(--aurora-badge-accounts-bg);
    color: var(--aurora-badge-accounts-text);
    border: 1px solid var(--aurora-badge-accounts-border);
}

.aurora-badge-source-pensions {
    background: var(--aurora-badge-pensions-bg);
    color: var(--aurora-badge-pensions-text);
    border: 1px solid var(--aurora-badge-pensions-border);
}

.aurora-badge-source-investments {
    background: var(--aurora-badge-investments-bg);
    color: var(--aurora-badge-investments-text);
    border: 1px solid var(--aurora-badge-investments-border);
}

.aurora-badge-source-property {
    background: var(--aurora-badge-property-bg);
    color: var(--aurora-badge-property-text);
    border: 1px solid var(--aurora-badge-property-border);
}

.aurora-badge-source-manual {
    background: var(--aurora-badge-manual-bg);
    color: var(--aurora-badge-manual-text);
    border: 1px solid var(--aurora-badge-manual-border);
}

.aurora-badge-source-recurring {
    background: var(--aurora-badge-recurring-bg);
    color: var(--aurora-badge-recurring-text);
    border: 1px solid var(--aurora-badge-recurring-border);
}

/* Semantic status badges — reuse callout tokens for theme-aware tinting.
   Used for things like "On Track / Needs Attention / Behind / Unknown" badges
   on the pensions health indicator, and other status pills across the app.
   Contrast is inherited from the callout variables (all already WCAG AA+). */
.aurora-badge-success {
    background: var(--aurora-callout-success-bg);
    color: var(--aurora-callout-success-text);
    border: 1px solid var(--aurora-callout-success-border);
}

.aurora-badge-warning {
    background: var(--aurora-callout-warning-bg);
    color: var(--aurora-callout-warning-text);
    border: 1px solid var(--aurora-callout-warning-border);
}

.aurora-badge-danger {
    background: var(--aurora-callout-danger-bg);
    color: var(--aurora-callout-danger-text);
    border: 1px solid var(--aurora-callout-danger-border);
}

.aurora-badge-info {
    background: var(--aurora-callout-info-bg);
    color: var(--aurora-callout-info-text);
    border: 1px solid var(--aurora-callout-info-border);
}

.aurora-badge-neutral {
    background: var(--aurora-glass-bg);
    color: var(--aurora-text-secondary);
    border: 1px solid var(--aurora-glass-border);
}

/* WCAG contrast overrides for semantic badges (#284 → updated #314).
   The 800-900 same-hue shades from #284 still produced near-1:1 hue contrast.
   Both modes now use var(--aurora-text-primary) — dark navy in light, white in dark. */
:root[data-theme="light"] .aurora-badge-success,
:root[data-theme="light"] .aurora-badge-warning,
:root[data-theme="light"] .aurora-badge-danger,
:root[data-theme="light"] .aurora-badge-info,
:root[data-theme="light"] .aurora-badge-source-recurring {
    color: var(--aurora-text-primary);
}

/* Dark mode: all semantic badges get text-primary (white) — same-hue -200 shades
   produced near-1:1 contrast against the tint's raw hue colour (#314). */
:root[data-theme="dark"] .aurora-badge-success,
:root[data-theme="dark"] .aurora-badge-warning,
:root[data-theme="dark"] .aurora-badge-danger,
:root[data-theme="dark"] .aurora-badge-info,
:root[data-theme="dark"] .aurora-badge-source-recurring {
    color: var(--aurora-text-primary);
}

/* ═══════════════════════════════════════════════════════════════════
   AURORA FORMS
   ═══════════════════════════════════════════════════════════════════ */

.aurora-form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--aurora-text-secondary);
    margin-bottom: 0.5rem;
}

.aurora-form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--aurora-glass-bg);
    border: 1px solid var(--aurora-glass-border);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    color: var(--aurora-text-primary);
    font-size: 0.9375rem;
    transition: all 0.3s ease;
}

.aurora-form-input:focus {
    outline: none;
    border-color: var(--aurora-accent-info);
    box-shadow: 0 0 0 3px rgba(0, 150, 204, 0.1);
}

:root[data-theme="dark"] .aurora-form-input:focus {
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.2);
}

.aurora-form-select {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--aurora-glass-bg);
    border: 1px solid var(--aurora-glass-border);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    color: var(--aurora-text-primary);
    font-size: 0.9375rem;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238891ad' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 3rem;
}

.aurora-form-select:focus {
    outline: none;
    border-color: var(--aurora-accent-info);
    box-shadow: 0 0 0 3px rgba(0, 150, 204, 0.1);
}

:root[data-theme="dark"] .aurora-form-select:focus {
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.2);
}

/* Date picker styling */
.aurora-form-input[type="date"]::-webkit-calendar-picker-indicator {
    filter: opacity(0.6);
    cursor: pointer;
}

:root[data-theme="dark"] .aurora-form-input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1) opacity(0.6);
}

/* Number input - use monospace for amounts */
.aurora-form-input[type="number"].amount-input {
    font-family: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
    font-size: 1.125rem;
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════
   AURORA TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════ */

.aurora-heading-1 {
    font-size: 2.5rem;
    font-weight: 300;
    letter-spacing: -0.02em;
    color: var(--aurora-text-primary);
}

.aurora-heading-2 {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--aurora-text-primary);
}

.aurora-text-primary {
    color: var(--aurora-text-primary);
}

.aurora-text-secondary {
    color: var(--aurora-text-secondary);
}

.aurora-text-muted {
    color: var(--aurora-text-muted);
}

.aurora-text-negative {
    color: var(--aurora-accent-negative);
}

/* Semantic text colours — reuse callout tokens so contrast is theme-aware and WCAG AA.
   Use for inline emphasis (e.g. "Important:" prefixes, amber warning paragraphs) where
   a whole callout panel would be too heavy. Never use raw Tailwind text-amber-500 etc.
   inside Aurora layouts — those are same-hue mid-tones and fail contrast in both modes. */
.aurora-text-warning {
    color: var(--aurora-callout-warning-text);
}

/* Companion to aurora-text-warning for error-message body text — reuses the
   callout-danger text token so contrast is theme-aware and WCAG AA (7.1:1 light,
   9.4:1 dark against aurora-card). Use for inline error spans, form validation
   messages, stale-data warnings etc. For short isolated labels (delete menu items,
   expired pills) prefer aurora-text-negative which uses the raw accent colour. */
.aurora-text-danger {
    color: var(--aurora-callout-danger-text);
}

/* Complements aurora-text-negative — used for renewal-date pills and other
   inline "positive" status text. Uses the accent token directly (not the
   callout-text token) because it's meant for short isolated labels, not
   body text on a tinted background. */
.aurora-text-positive {
    color: var(--aurora-accent-positive);
}

/* Info-status sibling of aurora-text-positive/negative — accent-based for
   short isolated status icons/labels (notification "info" pill, inline
   neutral status indicators). Paired with aurora-text-warning (callout-text)
   for body text, same way positive/danger split. */
.aurora-text-info {
    color: var(--aurora-accent-info);
}

/* Number formatting utilities */
.aurora-amount-large {
    font-family: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
    font-size: 2rem;
    font-weight: 600;
}

.aurora-amount-regular {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', sans-serif;
    font-weight: 500;
}

.aurora-amount-positive {
    color: var(--aurora-accent-positive);
}

.aurora-amount-negative {
    color: var(--aurora-text-primary);
}

/* ═══════════════════════════════════════════════════════════════════
   TRANSACTION PAGE: Compact Header Bar (Option C)
   ═══════════════════════════════════════════════════════════════════ */

/* Transaction page: compact header bar */
.tx-header-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.25rem 0;
    margin-bottom: 0.5rem;
    flex-wrap: nowrap;
}

/* Filter summary pills */
.tx-filter-summary {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.25rem 0 0.625rem;
    flex-wrap: wrap;
}
.tx-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 500;
    background: rgba(0, 255, 163, 0.08);
    color: var(--aurora-accent-positive);
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s;
}
.tx-filter-pill:hover {
    background: rgba(0, 255, 163, 0.15);
}
.tx-filter-pill-x {
    font-size: 0.875rem;
    opacity: 0.6;
    margin-left: 0.125rem;
}
.tx-result-count {
    font-size: 0.75rem;
    color: var(--aurora-text-muted);
}

/* Filter drawer (togglable panel) */
.tx-filter-drawer {
    display: none;
    background: var(--aurora-glass-bg);
    border: 1px solid var(--aurora-glass-border);
    border-radius: 1rem;
    padding: 1.25rem;
    margin-bottom: 0.625rem;
}
.tx-filter-drawer.open {
    display: block;
}
.tx-filter-drawer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}
.tx-filter-drawer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* Transaction row layout classes (replacing inline styles) */
.tx-row-cell {
    padding: 0.75rem 1.5rem;
}
.tx-row-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.tx-row-left {
    flex: 1;
    min-width: 0;
}
.tx-row-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}
.tx-row-amount {
    font-size: 1.125rem;
    font-weight: 700;
    font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
    text-align: right;
    white-space: nowrap;
}

/* Hide Upload/Transfer on tablet and below, show on desktop */
.tx-hide-compact {
    display: none !important;
}
@media (min-width: 1024px) {
    .tx-hide-compact {
        display: inline-flex !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   AURORA RESPONSIVE UTILITIES
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .aurora-nav-tabs {
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .aurora-nav-tabs::-webkit-scrollbar {
        display: none;
    }

    .aurora-stat-value {
        font-size: 1.5rem;
    }

    .aurora-stat-card {
        padding: 1rem 1.25rem;
    }

    .aurora-card {
        padding: 1rem 1.25rem;
    }

    .aurora-chart-container {
        height: 250px;
    }
}

/* Mobile: transactions header wraps search to own row */
@media (max-width: 639px) {
    .tx-header-bar {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .tx-header-bar .search-box-wrap {
        order: 10;
        flex: 1 1 100%;
        max-width: none;
    }
    .tx-row-cell {
        padding: 0.625rem 1rem;
    }
    .tx-row-flex {
        gap: 0.75rem;
    }
    .tx-row-amount {
        font-size: 1rem;
    }
    .tx-filter-drawer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Narrow mobile: prevent stat card value truncation at 375px */
@media (max-width: 480px) {
    .aurora-stat-value {
        font-size: 1.25rem;
    }

    .aurora-stat-label {
        font-size: 0.8125rem;
    }

    .aurora-stat-card {
        padding: 0.875rem 1rem;
    }
}

@media (max-width: 374px) {
    .tx-filter-drawer-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   DASHBOARD RESPONSIVE — Wealth Snapshot zones (issue #312)
   ═══════════════════════════════════════════════════════════════════ */

/* Tablet: hero stacks vertically (value/sub above, breakdown below as 2-col) */
@media (max-width: 768px) {
    .aurora-hero-card {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        padding: 1.5rem;
    }

    .aurora-hero-value {
        font-size: 2.25rem;
    }

    .aurora-hero-breakdown {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.625rem 1rem;
    }
}

/* Mobile: breakdown collapses to one column; tighter hero; budget split stacks */
@media (max-width: 640px) {
    .aurora-hero-card {
        padding: 1.25rem;
        border-radius: 16px;
    }

    .aurora-hero-value {
        font-size: 1.875rem;
    }

    .aurora-hero-breakdown {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .aurora-hero-breakdown-value {
        min-width: 4.5rem;
    }

    .aurora-widget-value {
        font-size: 1.375rem;
    }

    /* Stack the Cash Flow / Budget sub-grid inside the "This Month" card —
       at <640px the 2-col split crowds the progress bar and category list */
    #widget-budget > .grid.grid-cols-2 {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* Small mobile: keep large amounts on a single line in the hero value */
@media (max-width: 374px) {
    .aurora-hero-card {
        padding: 1rem;
    }

    .aurora-hero-value {
        font-size: 1.5rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   AURORA ANIMATIONS
   ═══════════════════════════════════════════════════════════════════ */

@keyframes aurora-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.aurora-fade-in {
    animation: aurora-fade-in 0.6s ease-out;
}

/* Staggered animation delays for lists */
.aurora-stagger-1 { animation-delay: 0.05s; }
.aurora-stagger-2 { animation-delay: 0.1s; }
.aurora-stagger-3 { animation-delay: 0.15s; }
.aurora-stagger-4 { animation-delay: 0.2s; }
.aurora-stagger-5 { animation-delay: 0.25s; }
.aurora-stagger-6 { animation-delay: 0.3s; }

/* ═══════════════════════════════════════════════════════════════════
   CHART.JS AURORA STYLING HELPER
   ═══════════════════════════════════════════════════════════════════ */

/* This class provides the Chart.js color configuration via CSS variables
   JavaScript can read these values using getComputedStyle() */
.aurora-chart-colors {
    --chart-positive: var(--aurora-accent-positive);
    --chart-negative: var(--aurora-accent-negative);
    --chart-info: var(--aurora-accent-info);
    --chart-warning: var(--aurora-accent-warning);
    --chart-text: var(--aurora-text-secondary);
    --chart-grid: var(--aurora-glass-border);
}

/* ═══════════════════════════════════════════════════════════════════
   AURORA ACCOUNT CARDS
   ═══════════════════════════════════════════════════════════════════ */

.aurora-accounts-grid {
    margin-bottom: 2rem;
}

.aurora-account-card {
    background: var(--aurora-glass-bg);
    border: 1px solid var(--aurora-glass-border);
    backdrop-filter: blur(10px);
    border-radius: 14px;
    padding: 1rem 1.25rem;
    box-shadow: var(--aurora-glass-shadow);
    transition: all 0.3s ease;
    cursor: pointer;
}

.aurora-account-card:hover {
    transform: translateY(-2px);
    border-color: var(--aurora-accent-info);
}

.aurora-account-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.aurora-account-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.aurora-account-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--aurora-text-primary);
}

.aurora-account-type {
    font-size: 0.6875rem;
    color: var(--aurora-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.aurora-account-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    background: var(--aurora-glass-bg);
    border: 1px solid var(--aurora-glass-border);
    color: var(--aurora-text-primary);
}

.aurora-account-balance {
    font-family: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
    font-size: 1.375rem;
    font-weight: 600;
    margin-bottom: 0.375rem;
}

.aurora-account-balance.positive {
    color: var(--aurora-accent-positive);
}

.aurora-account-balance.negative {
    color: var(--aurora-accent-negative);
}

.aurora-account-details {
    display: flex;
    gap: 1rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--aurora-glass-border);
}

.aurora-account-detail {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.aurora-detail-label {
    font-size: 0.75rem;
    color: var(--aurora-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.aurora-detail-value {
    font-size: 0.9375rem;
    color: var(--aurora-text-secondary);
    font-weight: 500;
}

.aurora-credit-card-special {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, rgba(138, 43, 226, 0.1) 100%), var(--aurora-glass-bg);
}

/* Loan account card — distinct liability styling */
.aurora-account-card-loan {
    border-color: rgba(255, 100, 100, 0.15);
}
.loan-payoff-bar {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    height: 4px;
}
.loan-payoff-fill {
    background: var(--aurora-accent-positive);
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.aurora-credit-progress {
    margin-top: 1rem;
}

.aurora-credit-progress-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.8125rem;
    color: var(--aurora-text-secondary);
}

.aurora-credit-progress-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    overflow: hidden;
}

.aurora-credit-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--aurora-accent-warning), var(--aurora-accent-negative));
    border-radius: 3px;
    transition: width 0.5s ease;
}

.aurora-total-card {
    background: var(--aurora-glass-bg);
    border: 1px solid var(--aurora-glass-border);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: var(--aurora-glass-shadow);
    margin-bottom: 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.aurora-total-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: var(--aurora-glow);
    opacity: 0.6;
    pointer-events: none;
}

.aurora-total-label {
    font-size: 0.9375rem;
    color: var(--aurora-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
    position: relative;
}

.aurora-total-value {
    font-family: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
    font-size: 3.5rem;
    font-weight: 600;
    color: var(--aurora-accent-positive);
    text-shadow: var(--aurora-glow-positive);
    position: relative;
}

.aurora-total-value.negative {
    color: var(--aurora-accent-negative);
    text-shadow: var(--aurora-glow-negative);
}

/* Mini FAB button in top-right of Total card */
.aurora-fab-mini {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--aurora-accent-positive);
    color: #ffffff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 255, 163, 0.3);
    z-index: 10;
}

.aurora-fab-mini:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 16px rgba(0, 255, 163, 0.5);
}

.aurora-fab-mini:active {
    transform: scale(0.95);
}

/* ═══════════════════════════════════════════════════════════════════
   AURORA MODAL SYSTEM — Glass morphism modals with consistent patterns
   ═══════════════════════════════════════════════════════════════════ */

/* Modal overlay - darkened backdrop with blur */
.aurora-modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--aurora-modal-overlay);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 1000;
    animation: aurora-modal-fade-in 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.aurora-modal-overlay.hidden {
    display: none !important;
}

@keyframes aurora-modal-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* AURORA MODAL CONTAINER - Core reusable component */
.aurora-modal {
    background: var(--aurora-modal-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--aurora-modal-border);
    border-radius: 24px;
    box-shadow: var(--aurora-modal-shadow);
    max-width: 560px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    position: relative;
    animation: aurora-modal-enter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes aurora-modal-enter {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Quick modals - smaller, faster */
.aurora-modal-quick {
    max-width: 420px;
    animation: aurora-modal-enter-quick 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes aurora-modal-enter-quick {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Modal header */
.aurora-modal-header {
    padding: 2rem 2rem 1.5rem;
    border-bottom: 1px solid var(--aurora-glass-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.aurora-modal-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--aurora-text-primary);
    letter-spacing: -0.02em;
}

.aurora-modal-subtitle {
    font-size: 0.875rem;
    color: var(--aurora-text-muted);
    margin-top: 0.25rem;
}

/* Close button - top right X */
.aurora-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--aurora-modal-close-border);
    background: var(--aurora-modal-close-bg);
    color: var(--aurora-modal-close-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
}

.aurora-modal-close:hover {
    background: var(--aurora-glass-border);
    color: var(--aurora-text-primary);
    transform: scale(1.05);
}

.aurora-modal-close:active {
    transform: scale(0.95);
}

/* Modal body - scrollable content area */
.aurora-modal-body {
    padding: 2rem;
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}

/* Custom scrollbar for webkit browsers */
.aurora-modal-body::-webkit-scrollbar {
    width: 8px;
}

.aurora-modal-body::-webkit-scrollbar-track {
    background: var(--aurora-modal-scrollbar-track);
    border-radius: 4px;
}

.aurora-modal-body::-webkit-scrollbar-thumb {
    background: var(--aurora-modal-scrollbar-thumb);
    border-radius: 4px;
}

.aurora-modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--aurora-modal-scrollbar-thumb-hover);
}

/* Aurora scrollbar for tables and dropdowns */
.genesis-ms-panel::-webkit-scrollbar,
.overflow-auto::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.genesis-ms-panel::-webkit-scrollbar-track,
.overflow-auto::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.genesis-ms-panel::-webkit-scrollbar-thumb,
.overflow-auto::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 163, 0.3);
    border-radius: 4px;
}

.genesis-ms-panel::-webkit-scrollbar-thumb:hover,
.overflow-auto::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 255, 163, 0.5);
}

/* Modal footer - consistent button layout */
/* IMPORTANT: Uses flex-end to keep buttons right-aligned */
.aurora-modal-footer {
    padding: 1.5rem 2rem;
    border-top: 1px solid var(--aurora-glass-border);
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   AURORA BUTTON SYSTEM
   ═══════════════════════════════════════════════════════════════════ */

/* Base button styles */
.aurora-btn {
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    white-space: nowrap;
}

/* Primary button - Aurora positive gradient with glow */
.aurora-btn-primary {
    background: linear-gradient(135deg, var(--aurora-accent-positive) 0%, var(--aurora-accent-info) 100%);
    color: var(--aurora-btn-primary-text);
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(0, 255, 163, 0.3);
}

.aurora-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0, 255, 163, 0.5);
}

.aurora-btn-primary:active {
    transform: translateY(0);
}

/* Secondary button - Ghost outline */
.aurora-btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
}

.aurora-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.aurora-btn-secondary:active {
    transform: scale(0.98);
}

:root[data-theme="light"] .aurora-btn-secondary {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.15);
    color: var(--aurora-text-primary);
}
:root[data-theme="light"] .aurora-btn-secondary:hover {
    background: rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.25);
}

/* Danger button - Destructive actions */
.aurora-btn-danger {
    background: linear-gradient(135deg, var(--aurora-accent-negative) 0%, #cc2255 100%);
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(230, 53, 105, 0.3);
}

.aurora-btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(230, 53, 105, 0.5);
}

.aurora-btn-danger:active {
    transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════
   WIZARD COMPONENTS
   ═══════════════════════════════════════════════════════════════════ */

/* Wizard progress indicator - Minimal dot navigation */
.aurora-wizard-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.aurora-wizard-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.aurora-wizard-dot.active {
    background: var(--aurora-accent-positive);
    box-shadow: 0 0 12px rgba(0, 255, 163, 0.6);
    width: 24px;
    border-radius: 4px;
}

:root[data-theme="light"] .aurora-wizard-dot {
    background: rgba(0, 0, 0, 0.15);
}
:root[data-theme="light"] .aurora-wizard-dot.active {
    box-shadow: 0 0 12px rgba(0, 200, 120, 0.4);
}

.aurora-wizard-step {
    display: none;
}

.aurora-wizard-step.active {
    display: block;
    animation: aurora-step-fade-in 0.3s ease;
}

@keyframes aurora-step-fade-in {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.aurora-step-title {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════
   ACCOUNT TYPE SELECTION CARDS
   ═══════════════════════════════════════════════════════════════════ */

.aurora-type-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
}

.aurora-type-card {
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2rem 1.5rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.aurora-type-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 255, 163, 0.05) 0%, rgba(0, 212, 255, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.aurora-type-card:hover {
    border-color: rgba(0, 255, 163, 0.4);
    transform: translateY(-4px);
}

.aurora-type-card:hover::before {
    opacity: 1;
}

.aurora-type-card.selected {
    border-color: var(--aurora-accent-positive);
    background: rgba(0, 255, 163, 0.08);
    box-shadow: 0 0 24px rgba(0, 255, 163, 0.3);
}

.aurora-type-card.selected::before {
    opacity: 1;
}

.aurora-type-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
}

.aurora-type-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--aurora-text-primary);
    margin-bottom: 0.5rem;
}

.aurora-type-desc {
    font-size: 0.875rem;
    color: var(--aurora-text-secondary);
    line-height: 1.5;
}

:root[data-theme="light"] .aurora-type-card {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.1);
}
:root[data-theme="light"] .aurora-type-card:hover {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.2);
}
:root[data-theme="light"] .aurora-type-card.selected {
    background: rgba(0, 200, 120, 0.08);
    border-color: var(--aurora-accent-positive);
}

/* ═══════════════════════════════════════════════════════════════════
   FORM INPUTS - Aurora glass style
   NOTE: Primary form styles (.aurora-form-label, .aurora-form-input,
   .aurora-form-select) are defined earlier using CSS variables that
   work in both light and dark modes. Only supplementary rules below.
   ═══════════════════════════════════════════════════════════════════ */

.aurora-form-group {
    margin-bottom: 1.5rem;
}

.aurora-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Form error messages */
.aurora-form-error {
    padding: 0.75rem 1rem;
    background: rgba(230, 53, 105, 0.1);
    border: 1px solid rgba(230, 53, 105, 0.3);
    border-radius: 10px;
    color: var(--aurora-accent-negative);
    font-size: 0.875rem;
    margin-top: 1rem;
}

/* Info boxes for hints/warnings */
.aurora-info-box {
    padding: 1rem;
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    margin-top: 1.5rem;
}

.aurora-info-box strong {
    color: var(--aurora-accent-info);
}

/* Inline info tooltip — click/hover to reveal definition */
.aurora-info-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    cursor: help;
    border-bottom: 1px dashed var(--aurora-text-secondary);
}

.aurora-info-tip .aurora-info-tip-icon {
    display: inline-flex;
    align-items: center;
    opacity: 0.6;
    transition: opacity 150ms ease;
}

.aurora-info-tip:hover .aurora-info-tip-icon {
    opacity: 1;
}

.aurora-info-tip .aurora-info-tip-content {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 240px;
    max-width: 320px;
    padding: 0.75rem 1rem;
    background: var(--aurora-glass-bg);
    border: 1px solid var(--aurora-glass-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--aurora-text-secondary);
    white-space: normal;
    z-index: 40;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* Arrow */
.aurora-info-tip .aurora-info-tip-content::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--aurora-glass-border);
}

.aurora-info-tip:hover .aurora-info-tip-content,
.aurora-info-tip:focus-within .aurora-info-tip-content,
.aurora-info-tip.active .aurora-info-tip-content {
    display: block;
}

/* Right-align on small screens to prevent overflow */
@media (max-width: 640px) {
    .aurora-info-tip .aurora-info-tip-content {
        left: auto;
        right: -1rem;
        transform: none;
    }
    .aurora-info-tip .aurora-info-tip-content::after {
        left: auto;
        right: 1.25rem;
        transform: none;
    }
}

/* Revenue links card */
.aurora-resource-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.aurora-resource-link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    border-radius: 8px;
    font-size: 0.8125rem;
    color: var(--aurora-text-primary);
    text-decoration: none;
    transition: background 150ms ease, transform 150ms ease;
    background: transparent;
}

.aurora-resource-link:hover {
    background: var(--aurora-glass-bg);
    transform: translateX(2px);
}

.aurora-resource-link .aurora-resource-link-icon {
    flex-shrink: 0;
    color: var(--aurora-accent-info);
}

.aurora-resource-link .aurora-resource-link-external {
    flex-shrink: 0;
    margin-left: auto;
    opacity: 0.4;
    transition: opacity 150ms ease;
}

.aurora-resource-link:hover .aurora-resource-link-external {
    opacity: 0.8;
}

/* ═══════════════════════════════════════════════════════════════════
   QUICK BALANCE UPDATE COMPONENTS
   ═══════════════════════════════════════════════════════════════════ */

.aurora-current-balance {
    text-align: center;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: rgba(0, 212, 255, 0.08);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 12px;
}

.aurora-current-balance-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.5rem;
}

.aurora-current-balance-value {
    font-family: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--aurora-accent-info);
    text-shadow: 0 0 20px rgba(0, 212, 255, 0.4);
}

.aurora-balance-input-group {
    position: relative;
}

.aurora-balance-input {
    width: 100%;
    padding: 1.25rem 1rem;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(0, 255, 163, 0.3);
    border-radius: 16px;
    color: #ffffff;
    font-family: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}

.aurora-balance-input::placeholder {
    color: rgba(255, 255, 255, 0.2);
}

.aurora-balance-input:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--aurora-accent-positive);
    box-shadow:
        0 0 0 4px rgba(0, 255, 163, 0.15),
        0 0 40px rgba(0, 255, 163, 0.3);
    color: var(--aurora-accent-positive);
    text-shadow: 0 0 20px rgba(0, 255, 163, 0.5);
}

.aurora-balance-input-label {
    position: absolute;
    top: -0.5rem;
    left: 1rem;
    background: rgba(26, 31, 74, 0.9);
    padding: 0 0.5rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
}

.aurora-keyboard-hint {
    text-align: center;
    margin-top: 0.75rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
}

.aurora-kbd {
    display: inline-block;
    padding: 0.125rem 0.375rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    font-family: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
    font-size: 0.6875rem;
    margin: 0 0.25rem;
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE - Mobile bottom sheets
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    .aurora-modal-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .aurora-modal,
    .aurora-modal-quick {
        max-width: 100%;
        border-radius: 24px 24px 0 0;
        max-height: 92vh;
        animation: aurora-modal-slide-up 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    @keyframes aurora-modal-slide-up {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }

    .aurora-type-grid {
        grid-template-columns: 1fr 1fr;
    }

    .aurora-form-row {
        grid-template-columns: 1fr;
    }

    .aurora-balance-input {
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    .aurora-fab-mini {
        width: 32px;
        height: 32px;
        top: 1rem;
        right: 1rem;
    }

    .aurora-accounts-grid {
        /* Sections handle their own grid */
    }

    .aurora-total-value {
        font-size: 2.5rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   AURORA TAB NAVIGATION SYSTEM
   Tab buttons for page navigation (Transactions/Recurring, etc.)
   ═══════════════════════════════════════════════════════════════════ */

.aurora-tab-btn {
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: 1px solid var(--aurora-glass-border);
    color: var(--aurora-text-secondary);
    text-decoration: none;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.aurora-tab-btn:hover {
    background: var(--aurora-glass-bg);
    backdrop-filter: blur(10px);
    transform: translateY(-2px);
}

.aurora-tab-btn.active {
    background: var(--aurora-glass-bg);
    backdrop-filter: blur(10px);
    border-color: var(--aurora-accent-info);
    color: var(--aurora-text-primary);
    box-shadow: 0 4px 12px rgba(0, 150, 204, 0.15);
}

/* ═══════════════════════════════════════════════════════════════════
   AURORA FILTER & SEARCH INPUTS
   Styling for filter dropdowns and search inputs matching prototype
   ═══════════════════════════════════════════════════════════════════ */

.aurora-filter-select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--aurora-glass-border);
    border-radius: 12px;
    padding: 0.875rem 1rem;
    color: var(--aurora-text-primary);
    font-size: 0.9375rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.aurora-filter-select:focus {
    outline: none;
    border-color: var(--aurora-accent-info);
    background: rgba(255, 255, 255, 0.08);
}

.aurora-filter-input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--aurora-glass-border);
    border-radius: 12px;
    padding: 0.875rem 1rem;
    color: var(--aurora-text-primary);
    font-size: 0.9375rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.aurora-filter-input:focus {
    outline: none;
    border-color: var(--aurora-accent-info);
    background: rgba(255, 255, 255, 0.08);
}

.aurora-filter-input::placeholder {
    color: var(--aurora-text-muted);
}

/* Genesis multiselect styling for filter bars */
.genesis-multiselect .genesis-ms-trigger {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--aurora-glass-border) !important;
    border-radius: 12px !important;
    padding: 0.875rem 1rem !important;
    color: var(--aurora-text-primary) !important;
    font-size: 0.9375rem !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: none !important;
}

.genesis-multiselect .genesis-ms-trigger:hover,
.genesis-multiselect .genesis-ms-trigger:focus {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--aurora-accent-info) !important;
    outline: none !important;
    box-shadow: none !important;
    ring: none !important;
}

.genesis-multiselect .genesis-ms-label {
    color: var(--aurora-text-primary) !important;
}

.genesis-multiselect .genesis-ms-panel {
    background: var(--aurora-bg-secondary) !important;
    border: 1px solid var(--aurora-glass-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.35) !important;
    margin-top: 0.25rem !important;
    max-height: 400px !important;
    overflow-y: auto !important;
    position: absolute !important;
    z-index: 9999 !important;
}

.genesis-multiselect .genesis-ms-panel > div.sticky {
    background: var(--aurora-bg-secondary) !important;
    border-bottom: 1px solid var(--aurora-glass-border) !important;
}

/* Options are <label> elements with inline classes - need !important to override */
.genesis-multiselect .genesis-ms-options label {
    padding: 0.625rem 1rem !important;
    color: var(--aurora-text-secondary) !important;
    transition: all 0.2s ease !important;
}

.genesis-multiselect .genesis-ms-options label:hover {
    background: rgba(0, 150, 204, 0.1) !important;
    color: var(--aurora-text-primary) !important;
}

.genesis-multiselect .genesis-ms-options label span {
    color: var(--aurora-text-primary) !important;
}

/* Genesis custom single-select options */
.genesis-cs-option {
    padding: 0.5rem 1rem !important;
    cursor: pointer !important;
    color: var(--aurora-text-secondary) !important;
    transition: all 0.2s ease !important;
    font-size: 0.875rem !important;
}

.genesis-cs-option:hover {
    background: rgba(0, 150, 204, 0.1) !important;
    color: var(--aurora-text-primary) !important;
}

.genesis-cs-option.genesis-cs-active {
    color: var(--aurora-accent-info) !important;
    font-weight: 500 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   AURORA TOGGLE BUTTONS
   For file type toggles, import mode toggles, etc.
   ═══════════════════════════════════════════════════════════════════ */

.aurora-toggle-group {
    display: flex;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--aurora-glass-border);
}

.aurora-toggle-btn {
    flex: 1;
    padding: 0.75rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
    background: transparent;
    border: none;
    color: var(--aurora-text-secondary);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.aurora-toggle-btn:not(:last-child) {
    border-right: 1px solid var(--aurora-glass-border);
}

.aurora-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.05);
}

.aurora-toggle-btn.active {
    background: var(--aurora-glass-bg);
    backdrop-filter: blur(10px);
    color: var(--aurora-text-primary);
}

/* ═══════════════════════════════════════════════════════════════════
   GUIDANCE BOXES — Contextual info/warning callouts with expandable detail
   Uses native <details>/<summary> for built-in accessibility
   ═══════════════════════════════════════════════════════════════════ */

.aurora-guidance-box {
    background: var(--aurora-glass-bg);
    border: 1px solid var(--aurora-glass-border);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    margin: 0.75rem 0;
    font-size: 0.8rem;
    line-height: 1.5;
}

.aurora-guidance-box.info {
    background: color-mix(in srgb, var(--aurora-accent-info) 8%, var(--aurora-glass-bg));
    border-color: color-mix(in srgb, var(--aurora-accent-info) 25%, var(--aurora-glass-border));
}

.aurora-guidance-box.warning {
    background: color-mix(in srgb, var(--aurora-accent-warning) 8%, var(--aurora-glass-bg));
    border-color: color-mix(in srgb, var(--aurora-accent-warning) 25%, var(--aurora-glass-border));
}

.aurora-guidance-box summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    color: var(--aurora-text-primary);
}

.aurora-guidance-box summary::-webkit-details-marker {
    display: none;
}

.aurora-guidance-box summary::marker {
    display: none;
    content: "";
}

.aurora-guidance-box .aurora-guidance-icon {
    flex-shrink: 0;
    font-size: 1rem;
    line-height: 1.4;
}

.aurora-guidance-box .aurora-guidance-toggle {
    color: var(--aurora-accent-info);
    font-size: 0.75rem;
    margin-left: 0.25rem;
}

.aurora-guidance-box .aurora-guidance-detail {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--aurora-glass-border);
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--aurora-text-secondary);
}

.aurora-guidance-box .aurora-guidance-detail table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0;
    font-size: 0.7rem;
}

.aurora-guidance-box .aurora-guidance-detail th,
.aurora-guidance-box .aurora-guidance-detail td {
    padding: 0.3rem 0.5rem;
    text-align: left;
    border-bottom: 1px solid var(--aurora-glass-border);
}

.aurora-guidance-box .aurora-guidance-detail th {
    color: var(--aurora-accent-info);
    font-weight: 600;
}

.aurora-guidance-box .aurora-guidance-detail ul {
    margin: 0.25rem 0 0.5rem 1rem;
    padding: 0;
}

.aurora-guidance-box .aurora-guidance-detail li {
    margin-bottom: 0.25rem;
}

/* ── Tooltip popover ────────────────────────────── */
.aurora-tooltip-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--aurora-glass-bg);
    border: 1px solid var(--aurora-glass-border);
    color: var(--aurora-text-secondary);
    font-size: 0.6875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    vertical-align: middle;
    margin-left: 4px;
}
.aurora-tooltip-trigger:hover,
.aurora-tooltip-trigger:focus {
    background: var(--aurora-accent-info);
    color: #fff;
    border-color: var(--aurora-accent-info);
}

.aurora-tooltip-popover {
    position: absolute;
    z-index: 50;
    max-width: 280px;
    padding: 0.75rem 1rem;
    background: var(--aurora-bg-secondary);
    border: 1px solid var(--aurora-glass-border);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--aurora-text-primary);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
}
.aurora-tooltip-popover.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.aurora-tooltip-popover a {
    color: var(--aurora-accent-info);
    text-decoration: none;
    font-weight: 500;
    display: inline-block;
    margin-top: 0.375rem;
    font-size: 0.75rem;
}
.aurora-tooltip-popover a:hover {
    text-decoration: underline;
}

/* ── Article body (rendered markdown) ───────────── */
.aurora-article {
    color: var(--aurora-text-primary);
    line-height: 1.75;
    font-size: 0.9375rem;
}
.aurora-article h2 {
    font-size: 1.375rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    color: var(--aurora-text-primary);
}
.aurora-article h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--aurora-text-primary);
}
.aurora-article p {
    margin-bottom: 1rem;
    color: var(--aurora-text-secondary);
}
.aurora-article ul, .aurora-article ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
    color: var(--aurora-text-secondary);
}
.aurora-article ul { list-style-type: disc; }
.aurora-article ol { list-style-type: decimal; }
.aurora-article li { margin-bottom: 0.375rem; }
.aurora-article strong {
    font-weight: 600;
    color: var(--aurora-text-primary);
}
.aurora-article a {
    color: var(--aurora-accent-info);
    text-decoration: none;
}
.aurora-article a:hover {
    text-decoration: underline;
}
.aurora-article blockquote {
    border-left: 4px solid var(--aurora-accent-warning);
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    background: var(--aurora-glass-bg);
    border-radius: 0 8px 8px 0;
    color: var(--aurora-text-secondary);
    font-size: 0.875rem;
}
.aurora-article code {
    background: var(--aurora-glass-bg);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.8125rem;
    font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
}
.aurora-article table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}
.aurora-article th {
    text-align: left;
    font-weight: 600;
    padding: 0.5rem 0.75rem;
    border-bottom: 2px solid var(--aurora-glass-border);
    font-size: 0.8125rem;
    color: var(--aurora-text-secondary);
}
.aurora-article td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--aurora-glass-border);
    font-size: 0.875rem;
}

/* ── Disclaimer banner ──────────────────────────── */
.aurora-disclaimer {
    border-left: 4px solid var(--aurora-accent-warning);
    background: var(--aurora-glass-bg);
    border-radius: 0 12px 12px 0;
    padding: 1rem 1.25rem;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--aurora-text-secondary);
    margin-bottom: 1.5rem;
}
.aurora-disclaimer strong {
    color: var(--aurora-text-primary);
}
.aurora-disclaimer a {
    color: var(--aurora-accent-info);
    text-decoration: none;
}
.aurora-disclaimer a:hover {
    text-decoration: underline;
}

/* ── Source links footer ────────────────────────── */
.aurora-source-links {
    border-top: 1px solid var(--aurora-glass-border);
    padding-top: 1.25rem;
    margin-top: 2rem;
}
.aurora-source-links h3 {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--aurora-text-secondary);
    margin-bottom: 0.75rem;
}
.aurora-source-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.aurora-source-links li {
    margin-bottom: 0.5rem;
}
.aurora-source-links a {
    color: var(--aurora-accent-info);
    text-decoration: none;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}
.aurora-source-links a:hover {
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════
   ICON BUTTONS — Navbar / toolbar icon-only buttons
   Guarantees 44×44px touch target per WCAG 2.5.5 / iOS HIG
   ═══════════════════════════════════════════════════════════════════ */

.aurora-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}

/* ═══════════════════════════════════════════════════════════════════
   AURORA LINKS — Inline text links (e.g. auth-screen "Forgot password?")
   Must be defined because several templates reference `.aurora-link`;
   when the class is undefined the <a> falls back to browser-default blue
   (#0000EE) which is off-theme. See issues #256 / #257.
   ═══════════════════════════════════════════════════════════════════ */

.aurora-link {
    color: var(--aurora-link-color, #075985);  /* fallback: sky-800 for light mode */
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.aurora-link:hover,
.aurora-link:focus-visible {
    color: var(--aurora-link-hover-color, #0c4a6e);
    text-decoration: underline;
}

.aurora-link:focus-visible {
    outline: 2px solid var(--aurora-accent-info);
    outline-offset: 2px;
    border-radius: 2px;
}

:root[data-theme="light"] {
    --aurora-link-color: #075985;        /* sky-800 — 7.5:1 on light card bg */
    --aurora-link-hover-color: #0c4a6e;  /* sky-900 — deeper on hover */
}

:root[data-theme="dark"] {
    --aurora-link-color: #7dd3fc;        /* sky-300 — 10.0:1 on dark card bg */
    --aurora-link-hover-color: #bae6fd;  /* sky-200 — even brighter on hover */
}

/* ═══════════════════════════════════════════════════════════════════
   AURORA CALLOUTS — Reusable notice/callout panels
   Use for inline page-level advisories (info tips, warnings, success
   confirmations, error banners). Designed to sit inside aurora-card
   content or on page body. All four variants hit WCAG AA (>=4.5:1,
   typically 7:1+) in both themes.
   ═══════════════════════════════════════════════════════════════════ */

.aurora-callout {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 12px;
    border: 1px solid transparent;
    font-size: 0.875rem;
    line-height: 1.5;
    backdrop-filter: blur(10px);
}

.aurora-callout-info {
    background: var(--aurora-callout-info-bg);
    color: var(--aurora-callout-info-text);
    border-color: var(--aurora-callout-info-border);
}

.aurora-callout-success {
    background: var(--aurora-callout-success-bg);
    color: var(--aurora-callout-success-text);
    border-color: var(--aurora-callout-success-border);
}

.aurora-callout-warning {
    background: var(--aurora-callout-warning-bg);
    color: var(--aurora-callout-warning-text);
    border-color: var(--aurora-callout-warning-border);
}

.aurora-callout-danger {
    background: var(--aurora-callout-danger-bg);
    color: var(--aurora-callout-danger-text);
    border-color: var(--aurora-callout-danger-border);
}

:root[data-theme="light"] {
    /* Callout tokens — light mode (text uses Tailwind 800-900 on pale tint) */
    --aurora-callout-info-bg: rgba(14, 165, 233, 0.12);
    --aurora-callout-info-text: #075985;        /* sky-800 — 6.6:1 */
    --aurora-callout-info-border: rgba(14, 165, 233, 0.3);

    --aurora-callout-success-bg: rgba(22, 163, 74, 0.12);
    --aurora-callout-success-text: #14532d;     /* green-900 — 7.9:1 */
    --aurora-callout-success-border: rgba(22, 163, 74, 0.3);

    --aurora-callout-warning-bg: rgba(245, 158, 11, 0.12);
    --aurora-callout-warning-text: #78350f;     /* amber-900 — 8.2:1 */
    --aurora-callout-warning-border: rgba(245, 158, 11, 0.3);

    --aurora-callout-danger-bg: rgba(239, 68, 68, 0.12);
    --aurora-callout-danger-text: #991b1b;      /* red-800 — 7.1:1 */
    --aurora-callout-danger-border: rgba(239, 68, 68, 0.3);
}

:root[data-theme="dark"] {
    /* Callout tokens — dark mode (text uses Tailwind 100-200 on deeper tint) */
    --aurora-callout-info-bg: rgba(56, 189, 248, 0.15);
    --aurora-callout-info-text: #bae6fd;        /* sky-200 — 9.6:1 */
    --aurora-callout-info-border: rgba(56, 189, 248, 0.3);

    --aurora-callout-success-bg: rgba(74, 222, 128, 0.15);
    --aurora-callout-success-text: #bbf7d0;     /* green-200 — 10.2:1 */
    --aurora-callout-success-border: rgba(74, 222, 128, 0.3);

    --aurora-callout-warning-bg: rgba(250, 204, 21, 0.15);
    --aurora-callout-warning-text: #fde68a;     /* amber-200 — 9.7:1 */
    --aurora-callout-warning-border: rgba(250, 204, 21, 0.3);

    --aurora-callout-danger-bg: rgba(248, 113, 113, 0.15);
    --aurora-callout-danger-text: #fecaca;      /* red-200 — 9.4:1 */
    --aurora-callout-danger-border: rgba(248, 113, 113, 0.3);
}

/* ═══════════════════════════════════════════════════════════════════
   SERVICES PAGE — row helpers, savings recommendation row, switch banner
   ═══════════════════════════════════════════════════════════════════
   Replaces inline style="..." blocks in providers.js renderServiceRow,
   renderSavingsRow, and showSwitchBanner (#281). Tokens come from the
   existing callout-success palette so the green tints auto-adjust
   between light and dark themes. */

.aurora-services-hint-italic {
    font-size: 0.7rem;
    font-style: italic;
    margin-top: 2px;
}

.aurora-services-sync-icon {
    font-size: 0.65rem;
    margin-left: 2px;
    vertical-align: super;
}

.aurora-services-cost {
    font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
}

/* Savings recommendation row — rendered directly under a service row when
   a cheaper plan exists in the referral catalogue. Uses the success callout
   background so the tint is theme-aware. */
.aurora-services-savings-row {
    background: var(--aurora-callout-success-bg);
}

.aurora-services-savings-cell {
    padding: 8px 12px 8px 24px;
}

.aurora-services-savings-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.aurora-services-savings-highlight {
    color: var(--aurora-accent-positive);
    font-size: 12px;
    font-weight: 600;
}

.aurora-services-savings-detail {
    font-size: 12px;
}

.aurora-services-affiliate-badge {
    font-size: 10px;
    opacity: 0.6;
    padding: 1px 6px;
    border: 1px solid var(--aurora-glass-border);
    border-radius: 4px;
}

.aurora-services-compare-btn {
    color: var(--aurora-accent-info);
    font-size: 12px;
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    text-decoration: none;
}

.aurora-services-compare-btn:hover {
    text-decoration: underline;
}

/* Keyboard-visible focus ring — matches the design-principles rule of
   "2px outline with 2px offset, primary action colour". Without this
   the Compare button would have no visible focus indicator on Tab. */
.aurora-services-compare-btn:focus-visible {
    outline: 2px solid var(--aurora-accent-info);
    outline-offset: 2px;
    border-radius: 2px;
    text-decoration: underline;
}

/* "Did you switch to <provider>?" banner — appears at the top of the
   services container after a referral click. Reuses callout-success
   tokens but keeps a horizontal layout with a push-right action button. */
.aurora-services-switch-banner {
    background: var(--aurora-callout-success-bg);
    border: 1px solid var(--aurora-callout-success-border);
}

.aurora-services-switch-banner-inner {
    display: flex;
    align-items: center;
    gap: 12px;
}

.aurora-services-switch-banner-emoji {
    font-size: 24px;
}

.aurora-services-switch-banner-text {
    flex: 1;
}

.aurora-services-switch-banner-btn {
    font-size: 12px;
    padding: 6px 14px;
}

.aurora-services-switch-banner-dismiss {
    background: none;
    border: none;
    opacity: 0.6;
    cursor: pointer;
    font-size: 12px;
    color: var(--aurora-text-secondary);
    font-family: inherit;
}

.aurora-services-switch-banner-dismiss:hover,
.aurora-services-switch-banner-dismiss:focus-visible {
    opacity: 1;
}

.aurora-services-switch-banner-dismiss:focus-visible {
    outline: 2px solid var(--aurora-accent-info);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Tax deadline category badges (#285) — use existing payment/filing/reporting tokens. */
.aurora-badge-payment {
    background: var(--aurora-badge-payment-bg);
    color: var(--aurora-badge-payment-text);
    border: 1px solid var(--aurora-badge-payment-border);
}
.aurora-badge-filing {
    background: var(--aurora-badge-filing-bg);
    color: var(--aurora-badge-filing-text);
    border: 1px solid var(--aurora-badge-filing-border);
}
.aurora-badge-reporting {
    background: var(--aurora-badge-reporting-bg);
    color: var(--aurora-badge-reporting-text);
    border: 1px solid var(--aurora-badge-reporting-border);
}

/* ═══════════════════════════════════════════════════════════════════
   PROGRESSIVE DISCLOSURE — Muted nav items + completeness bar (#169)
   ═══════════════════════════════════════════════════════════════════ */

/* Muted nav item (enabled but no data yet) */
.sidebar-muted {
    color: var(--aurora-text-muted) !important;
}
.sidebar-muted svg {
    opacity: 0.5;
}

/* "Set up" badge — action-oriented pill on muted nav items */
.setup-badge {
    font-size: 10px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 9999px;
    background: rgba(99, 144, 250, 0.15);
    color: #6390fa;
}

/* Sidebar completeness bar */
.sidebar-completeness {
    padding: 10px 12px;
    background: var(--aurora-glass-bg);
    border-top: 1px solid var(--aurora-glass-border);
}
.completeness-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 11px;
    color: var(--aurora-text-muted);
}
.completeness-header span:last-child {
    font-weight: 600;
    color: var(--aurora-text-secondary);
}
.completeness-track {
    height: 4px;
    background: var(--aurora-glass-border);
    border-radius: 4px;
    overflow: hidden;
}
.completeness-fill {
    height: 100%;
    background: linear-gradient(90deg, #6390fa, #a855f7);
    border-radius: 4px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Unlock animation (feature transitions from muted to active) */
@keyframes sidebar-unlock {
    0% { box-shadow: 0 0 0 0 rgba(99, 144, 250, 0.4); }
    50% { box-shadow: 0 0 12px 4px rgba(99, 144, 250, 0.2); }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.sidebar-unlocking {
    animation: sidebar-unlock 1.2s ease-out;
    border-radius: 8px;
}