/*
Theme Name: IValert Dashboard
Theme URI: https://ivalert.io
Description: Premium Options Intelligence Dashboard
Version: 2.0.0
Author: IValert
Text Domain: ivalert
*/

/* ═══════════════════════════════════════════════════════════════
   DESIGN SYSTEM - Light Fintech Theme
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* Background */
    --bg-base: #F0F4F8;
    --bg-card: #FFFFFF;
    --bg-hero: #0D1F2D;
    --bg-elevated: #FFFFFF;
    --bg-muted: #E8EDF2;
    --bg-input: #F7F9FB;

    /* Text (WCAG AA compliant - 4.5:1 contrast on light backgrounds) */
    --text-primary: #0D1F2D;
    --text-secondary: #4A5B6D;  /* Darkened for 4.5:1+ contrast on #F0F4F8 */
    --text-muted: #5A6B7B;      /* Darkened for 4.5:1+ contrast on #FFFFFF */
    --text-inverse: #FFFFFF;

    /* Brand Colors */
    --primary: #00C896;
    --primary-hover: #00A87E;
    --primary-text: #007A5A;    /* Darker green for text - 4.5:1+ on white */
    --primary-light: #E6FBF5;
    --primary-glow: rgba(0, 200, 150, 0.15);

    /* Semantic Colors */
    --success: #00C896;
    --success-light: #E6FBF5;
    --success-gradient-end: #00E5AA;
    --danger: #FF4D6A;
    --danger-light: #FFF0F3;
    --danger-gradient-end: #FF7A8A;
    --warning: #F59E0B;
    --warning-light: #FFFBEB;
    --warning-gradient-end: #FBBF24;
    --info: #3B82F6;
    --info-light: #EFF6FF;
    --info-gradient-end: #60A5FA;

    /* Accent Colors (for special badges, bonus layers, etc.) */
    --purple: #8B5CF6;
    --purple-light: #F3EEFF;
    --purple-hover: #7C3AED;
    --indigo: #6366F1;
    --indigo-light: #EEF2FF;
    --indigo-hover: #4F46E5;
    --orange: #F97316;
    --orange-light: #FFF7ED;
    --orange-hover: #EA580C;
    --pink: #EC4899;
    --pink-light: #FDF2F8;
    --gold: #FFD700;
    --gold-dark: #FFA500;
    --text-dark: #1A1A1A;

    /* Borders */
    --border: #E8EDF2;
    --border-color: #E8EDF2;
    --border-strong: #D1DBE5;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(13, 31, 45, 0.04);
    --shadow-md: 0 2px 12px rgba(13, 31, 45, 0.06);
    --shadow-lg: 0 4px 24px rgba(13, 31, 45, 0.08);
    --shadow-xl: 0 8px 32px rgba(13, 31, 45, 0.12);

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
    --font-mono: 'SF Mono', 'JetBrains Mono', 'Fira Code', monospace;

    /* Font Sizes (WCAG compliant - min 14px for body text) */
    --text-xs: 0.875rem;   /* 14px - WCAG minimum */
    --text-sm: 0.9375rem;  /* 15px */
    --text-base: 1rem;     /* 16px */
    --text-lg: 1.125rem;   /* 18px */
    --text-xl: 1.25rem;    /* 20px */
    --text-2xl: 1.5rem;    /* 24px */
    --text-3xl: 2rem;      /* 32px */
    --text-4xl: 2.5rem;    /* 40px */

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Layout dimensions (avoid magic numbers) */
    --header-height: 70px;
    --sidebar-width: 260px;
    --mobile-nav-height: 70px;
    --scrollbar-width: 8px;
    --touch-target-min: 44px;

    /* Z-Index Scale (centralized management) */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-sidebar: 400;
    --z-mobile-nav: 500;
    --z-modal-backdrop: 900;
    --z-modal: 1000;
    --z-toast: 1100;
    --z-tooltip: 1200;
}


/* ═══════════════════════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════════════════════ */

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

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    background: var(--bg-base);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
}

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

a:hover {
    color: var(--primary);
}

::selection {
    background: var(--primary-light);
    color: var(--text-primary);
}


/* ═══════════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════════ */

.dashboard {
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 100vh;
}

.dashboard__sidebar {
    background: var(--bg-card);
    border-right: 1px solid var(--border);
    padding: var(--space-4);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.dashboard__main {
    padding: var(--space-3) var(--space-4);
    max-width: 100%;
    width: 100%;
}

.dashboard__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}

.dashboard__header--compact {
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border);
}

.dashboard__header-left {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.dashboard__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.dashboard__date {
    color: var(--text-secondary);
    font-size: 0.85rem;
    padding-left: var(--space-3);
    border-left: 1px solid var(--border);
}

.dashboard__subtitle {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.dashboard__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-3);
}

/*
 * NOTE: Grid column responsive rules are defined in the "RESPONSIVE LAYOUT"
 * section below (lines ~1670-1796) using mobile-first breakpoints.
 * The definitions below are base mobile styles that get overridden.
 */
.dashboard__grid--2,
.dashboard__grid--3,
.dashboard__grid--4 {
    grid-template-columns: 1fr; /* Mobile: single column */
}


/* ═══════════════════════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════════════════════ */

.sidebar__logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border);
}

.sidebar__logo-icon {
    width: 40px;
    height: 40px;
    background: var(--bg-hero);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: var(--text-xs);
    color: var(--primary);
    letter-spacing: -0.02em;
}

.sidebar__logo-text {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

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

.sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.sidebar__link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.925rem;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.sidebar__link:hover {
    background: var(--bg-base);
    color: var(--text-primary);
}

.sidebar__link--active {
    background: var(--primary-light);
    color: var(--primary-text);
}

.sidebar__link--active .sidebar__link-icon {
    color: var(--primary);
}

.sidebar__link--locked {
    opacity: 0.6;
}

.sidebar__link-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.sidebar__section {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border);
}

.sidebar__section-title {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: var(--space-3);
    padding-left: var(--space-4);
}

.sidebar__upgrade {
    margin-top: auto;
    padding-top: var(--space-6);
}


/* ═══════════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════════ */

.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
}

.card:hover {
    box-shadow: var(--shadow-md);
}

.card--hero {
    background: var(--bg-hero);
    border: none;
    color: var(--text-inverse);
}

.card--hero .card__title {
    color: rgba(255, 255, 255, 0.7);
}

.card--clickable {
    cursor: pointer;
}

.card--clickable:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.card--no-hover:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
}

.card--compact {
    padding: var(--space-3);
}

.card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}

.card__title {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}

.card__action {
    font-size: var(--text-xs);
    color: var(--primary-text);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

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


/* ═══════════════════════════════════════════════════════════════
   SIGNAL CARD
   ═══════════════════════════════════════════════════════════════ */

.signal-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all var(--transition-base);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

.signal-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--border-strong);
}

.signal-card--bullish {
    border-left: 3px solid var(--success);
}

.signal-card--bearish {
    border-left: 3px solid var(--danger);
}

.signal-card--neutral {
    border-left: 3px solid var(--warning);
}

.signal-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--space-3) var(--space-3) var(--space-2);
}

.signal-card__ticker {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.signal-card__ticker-symbol {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.signal-card__ticker-price {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: var(--space-1);
}

.signal-card__ticker-change {
    font-size: var(--text-xs);
    font-weight: 600;
    margin-left: var(--space-2);
}

.signal-card__ticker-change--up {
    color: var(--success);
}

.signal-card__ticker-change--down {
    color: var(--danger);
}

.signal-card__score {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-2);
}

.signal-card__score-value {
    font-size: 1.75rem;
    font-weight: 800;
    font-family: var(--font-mono);
    line-height: 1;
    letter-spacing: -0.02em;
}

.signal-card__score-value--high {
    color: var(--success);
}

.signal-card__score-value--medium {
    color: var(--warning);
}

.signal-card__score-value--low {
    color: var(--text-muted);
}

.signal-card__direction {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
}

.signal-card__direction--bullish {
    background: var(--success-light);
    color: var(--success);
}

.signal-card__direction--bearish {
    background: var(--danger-light);
    color: var(--danger);
}

.signal-card__direction--neutral {
    background: var(--warning-light);
    color: var(--warning);
}

.signal-card__layers {
    display: flex;
    gap: var(--space-1);
    padding: 0 var(--space-3);
    margin-bottom: var(--space-3);
}

.signal-card__layer {
    width: 26px;
    height: 26px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    transition: all var(--transition-fast);
}

.signal-card__layer--pass {
    background: var(--success-light);
    color: var(--success);
}

.signal-card__layer--fail {
    background: var(--bg-muted);
    color: var(--text-muted);
}

.signal-card__layer--bonus {
    background: linear-gradient(135deg, var(--purple) 0%, var(--indigo) 100%);
    color: white;
}

.signal-card__layer:hover {
    transform: scale(1.15);
}

.signal-card__metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border);
    border-top: 1px solid var(--border);
}

.signal-card__metric {
    background: var(--bg-base);
    text-align: center;
    padding: var(--space-2);
}

.signal-card__metric-label {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: var(--space-1);
}

.signal-card__metric-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.signal-card__metric-badge {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: var(--space-1);
    vertical-align: middle;
}

.signal-card__metric-badge--green {
    background: var(--success);
    box-shadow: 0 0 8px var(--success);
}

.signal-card__metric-badge--red {
    background: var(--danger);
    box-shadow: 0 0 8px var(--danger);
}

.signal-card__metric-badge--yellow {
    background: var(--warning);
    box-shadow: 0 0 8px var(--warning);
}


/* ═══════════════════════════════════════════════════════════════
   HERO SIGNAL CARD (Featured/Top Signal)
   ═══════════════════════════════════════════════════════════════ */

.signal-card--featured {
    background: var(--bg-hero);
    border: none;
    color: var(--text-inverse);
}

.signal-card--featured .signal-card__ticker-symbol {
    color: var(--text-inverse);
}

.signal-card--featured .signal-card__ticker-price {
    color: rgba(255, 255, 255, 0.7);
}

.signal-card--featured .signal-card__score-value--high {
    color: var(--primary);
    text-shadow: 0 0 20px var(--primary);
}

.signal-card--featured .signal-card__direction--bullish {
    background: var(--primary);
    color: var(--bg-hero);
}

.signal-card--featured .signal-card__layer--pass {
    background: var(--primary);
    color: var(--bg-hero);
}

.signal-card--featured .signal-card__layer--fail {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.4);
}

.signal-card--featured .signal-card__metrics {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.1);
}

.signal-card--featured .signal-card__metric {
    background: transparent;
}

.signal-card--featured .signal-card__metric-label {
    color: rgba(255, 255, 255, 0.5);
}

.signal-card--featured .signal-card__metric-value {
    color: var(--text-inverse);
}


/* ═══════════════════════════════════════════════════════════════
   SCORE GAUGE
   ═══════════════════════════════════════════════════════════════ */

.score-gauge {
    position: relative;
    width: 140px;
    height: 140px;
}

.score-gauge__ring {
    transform: rotate(-90deg);
}

.score-gauge__bg {
    fill: none;
    stroke: var(--bg-muted);
    stroke-width: 10;
}

.score-gauge__progress {
    fill: none;
    stroke-width: 10;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.score-gauge__progress--high {
    stroke: var(--primary);
    filter: drop-shadow(0 0 8px var(--primary-glow));
}

.score-gauge__progress--medium {
    stroke: var(--warning);
}

.score-gauge__progress--low {
    stroke: var(--text-muted);
}

.score-gauge__center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.score-gauge__value {
    font-size: 2rem;
    font-weight: 800;
    font-family: var(--font-mono);
    line-height: 1;
    color: var(--text-primary);
}

.score-gauge__label {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-top: var(--space-1);
}


/* ═══════════════════════════════════════════════════════════════
   STATS
   ═══════════════════════════════════════════════════════════════ */

.stat {
    text-align: center;
}

.stat__value {
    font-size: 1.5rem;
    font-weight: 800;
    font-family: var(--font-mono);
    line-height: 1.1;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.stat__value--green {
    color: var(--success);
}

.stat__value--red {
    color: var(--danger);
}

.stat__label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-top: var(--space-1);
}

/* Dashboard Top Bar - Stats + Hot Picks */
.dashboard-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    margin-bottom: var(--space-3);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.stat-bar {
    display: flex;
    gap: var(--space-2);
}

.stat-bar__item {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.stat-bar__value {
    font-size: 1rem;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text-primary);
}

.stat-bar__label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* Hot Picks - Compact horizontal scroll */
.hot-picks {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    padding: var(--space-1) 0;
}

.hot-pick {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.15s ease;
}

.hot-pick:hover {
    border-color: var(--primary);
    background: var(--primary-light);
}

.hot-pick--bullish {
    border-left: 2px solid var(--success);
}

.hot-pick--bearish {
    border-left: 2px solid var(--danger);
}

.hot-pick__ticker {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-primary);
}

.hot-pick__info {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.7rem;
    color: var(--text-muted);
}

.hot-pick__score {
    padding: 1px 4px;
    border-radius: 3px;
    font-weight: 600;
    font-size: 0.65rem;
}

.hot-pick__score--high {
    background: var(--success-light);
    color: var(--success);
}

.hot-pick__score--medium {
    background: var(--warning-light);
    color: var(--warning);
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}


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

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.badge--green {
    background: var(--success-light);
    color: var(--success);
}

.badge--red {
    background: var(--danger-light);
    color: var(--danger);
}

.badge--yellow {
    background: var(--warning-light);
    color: var(--warning);
}

.badge--blue {
    background: var(--info-light);
    color: var(--info);
}

.badge--purple {
    background: var(--purple-light);
    color: var(--purple-hover);
}

.badge--dark {
    background: var(--bg-hero);
    color: var(--primary);
}

.badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.badge--green .badge__dot { background: var(--success); }
.badge--red .badge__dot { background: var(--danger); }
.badge--blue .badge__dot { background: var(--info); }

/* Flow Type Badges */
.badge--sweep {
    background: var(--purple-light);
    color: var(--purple);
}

.badge--block {
    background: var(--info-light);
    color: var(--info);
}

.badge--split {
    background: var(--pink-light);
    color: var(--pink);
}

.badge--darkpool {
    background: var(--bg-muted);
    color: var(--text-muted);
}

.badge--hot {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: var(--text-dark);
    font-weight: 700;
    animation: pulse-hot 2s ease-in-out infinite;
}

.badge--unusual {
    background: var(--warning-light);
    color: var(--warning);
}

.badge--xs {
    padding: 2px 6px;
    font-size: 0.65rem;
}

@keyframes pulse-hot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.4); }
    50% { box-shadow: 0 0 0 4px rgba(255, 215, 0, 0); }
}

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


/* ═══════════════════════════════════════════════════════════════
   PROGRESS BAR
   ═══════════════════════════════════════════════════════════════ */

.progress {
    height: 8px;
    background: var(--bg-muted);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.progress__bar {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress__bar--green {
    background: linear-gradient(90deg, var(--success) 0%, var(--success-gradient-end) 100%);
}

.progress__bar--red {
    background: linear-gradient(90deg, var(--danger) 0%, var(--danger-gradient-end) 100%);
}

.progress__bar--yellow {
    background: linear-gradient(90deg, var(--warning) 0%, var(--warning-gradient-end) 100%);
}

.progress__bar--blue {
    background: linear-gradient(90deg, var(--info) 0%, var(--info-gradient-end) 100%);
}


/* ═══════════════════════════════════════════════════════════════
   MARKET STATUS
   ═══════════════════════════════════════════════════════════════ */

.market-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
    box-shadow: var(--shadow-sm);
}

/* Inline market status for compact header */
.market-status--inline {
    padding: var(--space-1) var(--space-3);
    margin-bottom: 0;
    background: var(--bg-muted);
    border: none;
    border-radius: var(--radius-full);
    box-shadow: none;
    gap: var(--space-2);
    font-size: 0.8rem;
}

.market-status--inline .market-status__dot {
    width: 8px;
    height: 8px;
}

.market-status--inline .market-status__text {
    font-size: 0.8rem;
    font-weight: 500;
}

.market-status--inline .market-status__time {
    font-size: 0.75rem;
    padding-left: var(--space-2);
    border-left: 1px solid var(--border);
    margin-left: var(--space-1);
}

.market-status__indicator {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.market-status__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.market-status__dot--open {
    background: var(--success);
    box-shadow: 0 0 8px var(--success);
    animation: pulse 2s infinite;
}

.market-status__dot--closed {
    background: var(--danger);
    animation: none;
}

.market-status__text {
    font-weight: 600;
    color: var(--text-primary);
}

.market-status__time {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-family: var(--font-mono);
}


/* ═══════════════════════════════════════════════════════════════
   TABLE
   ═══════════════════════════════════════════════════════════════ */

.table-wrapper {
    overflow-x: auto;
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th {
    text-align: left;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    background: var(--bg-base);
}

.table td {
    padding: var(--space-4);
    font-size: 0.9rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.table tr {
    transition: background var(--transition-fast);
}

.table tr:hover {
    background: var(--bg-base);
}

.table__ticker {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.table__ticker-symbol {
    font-weight: 700;
    color: var(--text-primary);
}

.table__ticker-name {
    font-size: var(--text-xs);
    color: var(--text-muted);
}


/* ═══════════════════════════════════════════════════════════════
   LAYER BREAKDOWN
   ═══════════════════════════════════════════════════════════════ */

.layer-breakdown {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

.layer-item {
    padding: var(--space-4);
    background: var(--bg-base);
    border-radius: var(--radius-md);
    border-left: 3px solid transparent;
}

.layer-item--pass {
    border-left-color: var(--success);
    background: var(--success-light);
}

.layer-item--fail {
    border-left-color: var(--border);
    opacity: 0.6;
}

.layer-item__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
}

.layer-item__name {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-primary);
}

.layer-item__status {
    font-size: 0.9rem;
}

.layer-item__value {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

.layer-item__detail {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: var(--space-2);
}


/* ═══════════════════════════════════════════════════════════════
   EARNINGS CALENDAR
   ═══════════════════════════════════════════════════════════════ */

.calendar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-3);
}

.calendar__day {
    text-align: center;
    padding: var(--space-4);
    background: var(--bg-base);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    transition: all var(--transition-fast);
}

.calendar__day:hover {
    border-color: var(--border);
}

.calendar__day--today {
    border-color: var(--primary);
    background: var(--primary-light);
}

.calendar__day-name {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--space-1);
}

.calendar__day-date {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-3);
}

.calendar__tickers {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.calendar__ticker {
    font-size: var(--text-xs);
    font-weight: 600;
    padding: var(--space-1) var(--space-2);
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
}

.calendar__ticker--signal {
    background: var(--success-light);
    color: var(--success);
}


/* ═══════════════════════════════════════════════════════════════
   ALERTS LIST
   ═══════════════════════════════════════════════════════════════ */

.alerts {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.alert-item {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--bg-base);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--primary);
    transition: all var(--transition-fast);
}

.alert-item:hover {
    background: var(--primary-light);
}

.alert-item--urgent {
    border-left-color: var(--danger);
}

.alert-item--urgent:hover {
    background: var(--danger-light);
}

.alert-item__time {
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    color: var(--text-muted);
    white-space: nowrap;
    min-width: 70px;
}

.alert-item__content {
    flex: 1;
}

.alert-item__title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.alert-item__description {
    font-size: var(--text-xs);
    color: var(--text-secondary);
}


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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
}

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

.btn--primary:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--primary-glow);
}

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

.btn--secondary:hover {
    background: var(--bg-base);
    border-color: var(--border-strong);
}

.btn--ghost {
    background: transparent;
    color: var(--text-secondary);
}

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

.btn--dark {
    background: var(--bg-hero);
    color: var(--text-inverse);
}

.btn--dark:hover {
    background: #162A3D;
}

/* Disabled button states */
.btn:disabled,
.btn[disabled],
.btn--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    transform: none !important;
    box-shadow: none !important;
}

.btn--primary:disabled,
.btn--primary[disabled] {
    background: var(--text-muted);
}

.btn--secondary:disabled,
.btn--secondary[disabled] {
    background: var(--bg-muted);
    border-color: var(--border);
    color: var(--text-muted);
}

/* Focus states for accessibility */
.btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.btn--secondary:focus-visible {
    outline-color: var(--text-primary);
}

.btn--ghost:focus-visible {
    outline-color: var(--text-secondary);
}

.btn--sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
}

.btn--lg {
    padding: var(--space-4) var(--space-8);
    font-size: 1rem;
}


/* ═══════════════════════════════════════════════════════════════
   FORM ELEMENTS
   ═══════════════════════════════════════════════════════════════ */

.input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    color: var(--text-primary);
    transition: all var(--transition-fast);
}

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

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

.select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A9BB0' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-4) center;
    padding-right: var(--space-10);
}

/* Input error states */
.input--error,
.input:invalid:not(:placeholder-shown) {
    border-color: var(--danger);
}

.input--error:focus,
.input:invalid:not(:placeholder-shown):focus {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.input--success {
    border-color: var(--success);
}

.input:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.form-error {
    color: var(--danger);
    font-size: 0.8rem;
    margin-top: var(--space-1);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

/* Loading spinner for buttons */
.btn--loading {
    position: relative;
    pointer-events: none;
}

.btn--loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* Checkbox minimum touch target */
input[type="checkbox"],
input[type="radio"] {
    min-width: 20px;
    min-height: 20px;
}

/* Ensure clickable area is large enough */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    cursor: pointer;
}


/* ═══════════════════════════════════════════════════════════════
   TOOLTIPS
   ═══════════════════════════════════════════════════════════════ */

[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-hero);
    color: var(--text-inverse);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
    z-index: var(--z-tooltip);
    pointer-events: none;
}

[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
}


/* ═══════════════════════════════════════════════════════════════
   SKELETON LOADING
   ═══════════════════════════════════════════════════════════════ */

.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-muted) 0%,
        var(--bg-card) 50%,
        var(--bg-muted) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: var(--radius-md);
}

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

.skeleton--text {
    height: 1rem;
    width: 60%;
}

.skeleton--title {
    height: 1.5rem;
    width: 40%;
}

.skeleton--card {
    height: 240px;
    width: 100%;
}


/* ═══════════════════════════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════════════════════════ */

.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal__backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(13, 31, 45, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.modal__content {
    position: relative;
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    max-width: 700px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    padding: var(--space-8);
    box-shadow: var(--shadow-xl);
    animation: modalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal__close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    background: var(--bg-base);
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: var(--space-3);
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.modal__close:hover {
    background: var(--bg-muted);
    color: var(--text-primary);
}

.modal__header {
    margin-bottom: var(--space-6);
}

.modal__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}


/* ═══════════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════════ */

.empty-state {
    text-align: center;
    padding: var(--space-12);
}

.empty-state__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-4);
    color: var(--text-muted);
}

.empty-state__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.empty-state__text {
    color: var(--text-secondary);
    max-width: 320px;
    margin: 0 auto;
}


/* ═══════════════════════════════════════════════════════════════
   CHARTS PLACEHOLDER
   ═══════════════════════════════════════════════════════════════ */

.chart-container {
    position: relative;
    height: 200px;
    background: linear-gradient(180deg, var(--primary-light) 0%, transparent 100%);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.chart-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(0, 200, 150, 0.1) 50%,
        rgba(0, 200, 150, 0.2) 100%
    );
}


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE (Mobile-First)
   Base styles = mobile, enhance with min-width queries
   ═══════════════════════════════════════════════════════════════ */

/* Mobile base: sidebar hidden, single column, compact padding */
.dashboard {
    grid-template-columns: 1fr;
}

.dashboard__sidebar {
    display: none;
}

.dashboard__main {
    padding: var(--space-4);
}

.dashboard__grid--2,
.dashboard__grid--3,
.dashboard__grid--4 {
    grid-template-columns: 1fr;
}

.layer-breakdown {
    grid-template-columns: 1fr;
}

/* Tablets and up (1024px+): show sidebar */
@media (min-width: 1024px) {
    .dashboard {
        grid-template-columns: 260px 1fr;
    }

    .dashboard__sidebar {
        display: flex;
    }

    .dashboard__main {
        padding: var(--space-4) var(--space-5);
    }

    .dashboard__grid--2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .layer-breakdown {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Large screens (1200px+): more columns */
@media (min-width: 1200px) {
    .dashboard__grid--3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .dashboard__grid--4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Mobile-First: Base styles are mobile, then add complexity for larger screens */

/* Dashboard grids - mobile base (single column) */
.dashboard__grid--3,
.dashboard__grid--4 {
    grid-template-columns: 1fr;
}

.calendar {
    grid-template-columns: 1fr;
}

.stat-grid {
    grid-template-columns: repeat(2, 1fr);
}

.signal-card__metrics {
    grid-template-columns: repeat(2, 1fr);
}

.dashboard__header {
    flex-direction: column;
    gap: var(--space-4);
    align-items: flex-start;
}

/* Small tablets and up (640px+) */
@media (min-width: 640px) {
    .calendar {
        grid-template-columns: repeat(3, 1fr);
    }

    .signal-card__metrics {
        grid-template-columns: repeat(4, 1fr);
    }

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

/* Tablets and up (768px+) */
@media (min-width: 768px) {
    .dashboard__grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .dashboard__grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .calendar {
        grid-template-columns: repeat(7, 1fr);
    }

    .stat-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Desktop and up (1024px+) */
@media (min-width: 1024px) {
    .dashboard__grid--3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .dashboard__grid--4 {
        grid-template-columns: repeat(4, 1fr);
    }
}


/* ═══════════════════════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════════════════════ */

.text-green { color: var(--success); }
.text-red { color: var(--danger); }
.text-yellow { color: var(--warning); }
.text-blue { color: var(--info); }
.text-muted { color: var(--text-muted); }
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }

.bg-success-light { background: var(--success-light); }
.bg-danger-light { background: var(--danger-light); }
.bg-warning-light { background: var(--warning-light); }
.bg-info-light { background: var(--info-light); }

.font-mono { font-family: var(--font-mono); }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }

.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }

.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }

.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }
.grid { display: grid; }

.w-full { width: 100%; }
.h-full { height: 100%; }

.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }

.relative { position: relative; }
.absolute { position: absolute; }

.border { border: 1px solid var(--border); }
.border-b { border-bottom: 1px solid var(--border); }
.border-t { border-top: 1px solid var(--border); }

.shadow { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

.transition { transition: all var(--transition-base); }

.animate-fade-in {
    animation: fadeIn 0.4s ease-out;
}

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

.animate-slide-up {
    animation: slideUp 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Focus visible for accessibility */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-base);
}

::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}


/* ═══════════════════════════════════════════════════════════════
   MOBILE NAVIGATION
   ═══════════════════════════════════════════════════════════════ */

/* Mobile Header (Mobile-first: visible by default) */
.mobile-header {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    padding: 0 var(--space-4);
    align-items: center;
    justify-content: space-between;
    z-index: var(--z-fixed);
    box-shadow: var(--shadow-sm);
}

.mobile-header__menu {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}

.mobile-header__menu:hover {
    background: var(--bg-base);
}

.mobile-header__logo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.mobile-header__logo-icon {
    color: var(--primary);
}

.mobile-header__actions {
    display: flex;
    gap: var(--space-2);
}

.mobile-header__btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.mobile-header__btn:hover {
    background: var(--bg-base);
    color: var(--text-primary);
}

/* Mobile Bottom Navigation (Mobile-first: visible by default) */
.mobile-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70px;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    padding: var(--space-2) var(--space-4);
    padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom));
    justify-content: space-around;
    align-items: center;
    z-index: var(--z-mobile-nav);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.04);
}

.mobile-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-2);
    min-width: 64px;
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.mobile-nav__item:hover,
.mobile-nav__item--active {
    color: var(--primary-text);
}

.mobile-nav__item--active {
    background: var(--primary-light);
}

.mobile-nav__icon {
    width: 24px;
    height: 24px;
}

/* Mobile Slide-out Menu */
.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
}

.mobile-menu--open {
    display: block;
}

.mobile-menu__backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(13, 31, 45, 0.5);
    backdrop-filter: blur(4px);
    animation: fadeIn 0.2s ease-out;
}

.mobile-menu__panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 280px;
    max-width: 80%;
    height: 100%;
    background: var(--bg-card);
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    animation: slideInLeft 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideInLeft {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

.mobile-menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border);
}

.mobile-menu__logo {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.mobile-menu__close {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.mobile-menu__close:hover {
    background: var(--bg-base);
    color: var(--text-primary);
}

.mobile-menu__nav {
    flex: 1;
    padding: var(--space-4);
    overflow-y: auto;
}

.mobile-menu__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    color: var(--text-primary);
    font-weight: 500;
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}

.mobile-menu__link:hover {
    background: var(--bg-base);
}

.mobile-menu__divider {
    height: 1px;
    background: var(--border);
    margin: var(--space-4) 0;
}

.mobile-menu__upgrade {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border);
}

.mobile-menu__user {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border);
}

.mobile-menu__avatar {
    width: 40px;
    height: 40px;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.mobile-menu__name {
    font-weight: 600;
    color: var(--text-primary);
}

.mobile-menu__tier {
    font-size: var(--text-xs);
    color: var(--primary-text);
}

/* Mobile base padding is now handled in dashboard-compact.css */

/* Desktop (1024px+): Hide mobile elements, show sidebar */
@media (min-width: 1024px) {
    .mobile-header {
        display: none;
    }

    .mobile-nav {
        display: none;
    }

    .dashboard__main {
        padding-top: var(--space-6);
        padding-bottom: var(--space-6);
    }
}


/* ═══════════════════════════════════════════════════════════════
   BLURRED TEASER (Free Users)
   ═══════════════════════════════════════════════════════════════ */

.teaser-blur {
    position: relative;
    overflow: hidden;
}

.teaser-blur__content {
    filter: blur(8px);
    pointer-events: none;
    user-select: none;
}

.teaser-blur__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(240, 244, 248, 0.9) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-6);
}

.teaser-blur__icon {
    width: 48px;
    height: 48px;
    color: var(--text-muted);
    margin-bottom: var(--space-4);
}

.teaser-blur__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.teaser-blur__text {
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
    max-width: 300px;
}


/* ═══════════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
   ═══════════════════════════════════════════════════════════════ */

.toast-container {
    position: fixed;
    top: var(--space-4);
    right: var(--space-4);
    z-index: 300;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.toast {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    animation: slideInRight 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 300px;
    max-width: 400px;
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.toast--success {
    border-left: 4px solid var(--success);
}

.toast--error {
    border-left: 4px solid var(--danger);
}

.toast--warning {
    border-left: 4px solid var(--warning);
}

.toast--info {
    border-left: 4px solid var(--info);
}

.toast__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.toast--success .toast__icon { color: var(--success); }
.toast--error .toast__icon { color: var(--danger); }
.toast--warning .toast__icon { color: var(--warning); }
.toast--info .toast__icon { color: var(--info); }

.toast__content {
    flex: 1;
}

.toast__title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

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

.toast__close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.toast__close:hover {
    background: var(--bg-base);
    color: var(--text-primary);
}

/* Mobile-First: Toast full-width on mobile */
.toast-container {
    left: var(--space-4);
    right: var(--space-4);
}

.toast {
    min-width: auto;
    max-width: none;
}

/* Desktop (640px+): Toast fixed width */
@media (min-width: 640px) {
    .toast-container {
        left: auto;
        right: var(--space-4);
    }

    .toast {
        min-width: 320px;
        max-width: 400px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   SCROLL MARGIN FOR FIXED HEADERS (Mobile-First)
   ═══════════════════════════════════════════════════════════════ */

/* Mobile: smaller header */
[id] {
    scroll-margin-top: 80px;
}

/* Desktop (1024px+): larger header offset */
@media (min-width: 1024px) {
    [id] {
        scroll-margin-top: 100px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   DISCLAIMER FOOTER
   ═══════════════════════════════════════════════════════════════ */

.disclaimer {
    padding: var(--space-4) var(--space-6);
    background: var(--bg-muted);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.6;
}

.disclaimer a {
    color: var(--text-secondary);
    text-decoration: underline;
}

.disclaimer a:hover {
    color: var(--primary);
}


/* ═══════════════════════════════════════════════════════════════
   MOBILE-FIRST: FRONT PAGE RESPONSIVE
   Base styles are mobile, then enhance for larger screens
   ═══════════════════════════════════════════════════════════════ */

/* Front Page Hero - Mobile base (single column, smaller text) */
.front-hero-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
}

.front-hero-grid h1 {
    font-size: 2.5rem;
}

.front-hero-grid p {
    font-size: 1.1rem;
}

/* Hide dashboard preview on mobile */
.front-hero-preview {
    display: none;
}

/* Front page sections - mobile base */
section {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

section h1 {
    font-size: 2rem;
}

/* Desktop (1024px+): Show hero preview, larger text */
@media (min-width: 1024px) {
    .front-hero-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-12);
    }

    .front-hero-grid h1 {
        font-size: 3.5rem;
    }

    .front-hero-grid p {
        font-size: 1.25rem;
    }

    .front-hero-preview {
        display: block;
    }
}

section h2 {
    font-size: 1.75rem;
}

/* Pricing grid - mobile base (single column) */
.pricing-grid {
    grid-template-columns: 1fr;
}

/* How it works - mobile base (stacked) */
.how-it-works-step {
    flex-direction: column;
    text-align: center;
}

.how-it-works-step > div:first-child {
    margin-bottom: var(--space-4);
}

/* 7 Layers grid - mobile base */
.layers-grid {
    grid-template-columns: 1fr;
}

/* CTA buttons - mobile base (stacked) */
.cta-buttons {
    flex-direction: column;
    width: 100%;
}

.cta-buttons .btn {
    width: 100%;
    justify-content: center;
}

/* Trust badges - mobile base */
.trust-badges {
    flex-direction: column;
    gap: var(--space-3);
}

/* Footer - mobile base */
.public-footer {
    flex-direction: column;
    gap: var(--space-4);
    text-align: center;
}

.public-footer nav {
    flex-wrap: wrap;
    justify-content: center;
}

/* Auth cards - mobile base */
.auth-card {
    padding: var(--space-6);
}

.auth-card h1 {
    font-size: 1.25rem;
}

.name-grid {
    grid-template-columns: 1fr;
}

/* Pricing cards - mobile base */
.pricing-card {
    padding: var(--space-6);
}

.pricing-card .price {
    font-size: 2.5rem;
}

/* Small screens and up (480px+) */
@media (min-width: 480px) {
    .name-grid {
        grid-template-columns: 1fr 1fr;
    }

    .auth-card {
        padding: var(--space-8);
    }

    .auth-card h1 {
        font-size: 1.5rem;
    }
}

/* Tablets and up (768px+) */
@media (min-width: 768px) {
    section {
        padding-left: var(--space-8);
        padding-right: var(--space-8);
    }

    section h1 {
        font-size: 2.5rem;
    }

    section h2 {
        font-size: 2rem;
    }

    .how-it-works-step {
        flex-direction: row;
        text-align: left;
    }

    .how-it-works-step > div:first-child {
        margin-bottom: 0;
    }

    .cta-buttons {
        flex-direction: row;
        width: auto;
    }

    .cta-buttons .btn {
        width: auto;
    }

    .trust-badges {
        flex-direction: row;
        gap: var(--space-6);
    }

    .public-footer {
        flex-direction: row;
        text-align: left;
    }

    .pricing-card {
        padding: var(--space-8);
    }

    .pricing-card .price {
        font-size: 3rem;
    }
}

/* Desktop and up (1024px+) */
@media (min-width: 1024px) {
    section {
        padding-left: var(--space-12);
        padding-right: var(--space-12);
    }

    section h1 {
        font-size: 3rem;
    }

    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .layers-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Large desktop (1280px+) */
@media (min-width: 1280px) {
    .layers-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY
   ═══════════════════════════════════════════════════════════════ */

/* Skip to content link for keyboard navigation */
.skip-to-content {
    position: absolute;
    top: -100%;
    left: var(--space-4);
    z-index: 9999;
    padding: var(--space-3) var(--space-4);
    background: var(--primary);
    color: var(--text-inverse);
    font-weight: 600;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: top var(--transition-fast);
}

.skip-to-content:focus {
    top: var(--space-4);
}

/* Minimum touch targets - 44x44px per WCAG */
.btn,
button,
input[type="submit"],
input[type="button"],
a.btn,
.input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
textarea {
    min-height: 44px;
}

input[type="checkbox"],
input[type="radio"] {
    min-width: 20px;
    min-height: 20px;
}

/* Clear focus states for all interactive elements */
.btn:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Remove default outline but keep for keyboard users */
.btn:focus:not(:focus-visible),
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
    outline: none;
}

/* High contrast for color-coded status (used for dynamic status indicators) */
[data-level="good"] { background: var(--success); color: var(--text-inverse); }
[data-level="moderate"] { background: var(--warning); color: var(--text-dark); }
[data-level="warning"] { background: var(--orange); color: var(--text-inverse); }
[data-level="danger"] { background: var(--danger); color: var(--text-inverse); }

/* Reduced motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .btn:hover,
    .card:hover,
    .signal-card:hover {
        transform: none !important;
    }
}

/* Ensure links are distinguishable */
a:not(.btn):not(.nav-link) {
    text-decoration-skip-ink: auto;
}

a:not(.btn):not(.nav-link):hover {
    text-decoration: underline;
}

/* Form error and success states */
.input--error {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 3px var(--danger-light);
}

.input--success {
    border-color: var(--success) !important;
    box-shadow: 0 0 0 3px var(--success-light);
}

.form-error {
    color: var(--danger);
    font-size: 0.875rem;
    margin-top: var(--space-2);
}

.form-success {
    color: var(--success);
    font-size: 0.875rem;
    margin-top: var(--space-2);
}


/* ═══════════════════════════════════════════════════════════════
   TYPOGRAPHY UTILITIES (Accessible Sizes)
   Minimum 14px for labels, 16px for body text
   ═══════════════════════════════════════════════════════════════ */

/* Small text - use sparingly, only for labels/captions */
.text-sm {
    font-size: var(--text-sm); /* 15px */
    line-height: 1.5;
}

/* Extra small - WCAG minimum 14px */
.text-xs {
    font-size: var(--text-xs); /* 14px - WCAG minimum */
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* Ensure badge text remains readable - WCAG compliant */
.badge {
    font-size: var(--text-xs); /* 14px */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}


/* ═══════════════════════════════════════════════════════════════
   SKELETON LOADERS
   ═══════════════════════════════════════════════════════════════ */

.skeleton {
    background: linear-gradient(90deg, var(--bg-muted) 25%, var(--bg-base) 50%, var(--bg-muted) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

.skeleton--text {
    height: 1rem;
    width: 100%;
    margin-bottom: var(--space-2);
}

.skeleton--text-sm {
    height: 0.875rem;
    width: 75%;
}

.skeleton--circle {
    border-radius: 50%;
}

.skeleton--card {
    height: 120px;
    border-radius: var(--radius-md);
}

.skeleton--stat {
    height: 2.5rem;
    width: 60%;
}

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


/* ═══════════════════════════════════════════════════════════════
   EMPTY STATES & ERROR STATES
   Displayed when data is empty or API calls fail
   ═══════════════════════════════════════════════════════════════ */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-4);
    text-align: center;
    color: var(--text-muted);
}

.empty-state__icon {
    width: 64px;
    height: 64px;
    margin-bottom: var(--space-4);
    color: var(--text-muted);
    opacity: 0.5;
}

.empty-state__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}

.empty-state__text {
    font-size: var(--text-sm);
    color: var(--text-muted);
    max-width: 300px;
    line-height: 1.5;
}

.empty-state__action {
    margin-top: var(--space-4);
}

/* API Error State */
.api-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    background: var(--danger-light);
    border: 1px solid var(--danger);
    border-radius: var(--radius-md);
    text-align: center;
}

.api-error__icon {
    width: 48px;
    height: 48px;
    color: var(--danger);
    margin-bottom: var(--space-3);
}

.api-error__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--danger);
    margin-bottom: var(--space-2);
}

.api-error__text {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
}

.api-error__retry {
    padding: var(--space-2) var(--space-4);
    background: var(--danger);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.api-error__retry:hover {
    opacity: 0.9;
}

/* No Data State - for tables and lists */
.no-data {
    padding: var(--space-8);
    text-align: center;
    color: var(--text-muted);
    font-size: var(--text-sm);
    background: var(--bg-muted);
    border-radius: var(--radius-md);
}


/* ═══════════════════════════════════════════════════════════════
   MOBILE: DISABLE HOVER EFFECTS
   Touch devices don't have hover states
   ═══════════════════════════════════════════════════════════════ */

@media (hover: none) and (pointer: coarse) {
    .btn:hover,
    .card:hover,
    .signal-card:hover,
    .sidebar__link:hover {
        transform: none;
        box-shadow: none;
    }
}


/* ═══════════════════════════════════════════════════════════════
   PREMIUM UI COMPONENTS
   Score Gauges, Sparklines, Options Chain, Enhanced Charts
   ═══════════════════════════════════════════════════════════════ */

/* Score Gauge - SVG Circular Progress */
.score-gauge {
    position: relative;
    width: 140px;
    height: 140px;
    flex-shrink: 0;
}

.score-gauge--sm {
    width: 80px;
    height: 80px;
}

.score-gauge--lg {
    width: 180px;
    height: 180px;
}

.score-gauge__svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.score-gauge__bg {
    fill: none;
    stroke: var(--bg-muted);
    stroke-width: 10;
}

.score-gauge--sm .score-gauge__bg,
.score-gauge--sm .score-gauge__progress {
    stroke-width: 8;
}

.score-gauge__progress {
    fill: none;
    stroke-width: 10;
    stroke-linecap: round;
    stroke-dasharray: 377;
    stroke-dashoffset: 377;
    transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.score-gauge__progress--high {
    stroke: var(--primary);
    filter: drop-shadow(0 0 12px rgba(0, 200, 150, 0.5));
}

.score-gauge__progress--medium {
    stroke: var(--warning);
    filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.4));
}

.score-gauge__progress--low {
    stroke: var(--text-muted);
}

.score-gauge__center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.score-gauge__value {
    font-size: 2.25rem;
    font-weight: 800;
    font-family: var(--font-mono);
    line-height: 1;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.score-gauge--sm .score-gauge__value {
    font-size: 1.25rem;
}

.score-gauge--lg .score-gauge__value {
    font-size: 3rem;
}

.score-gauge__max {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted);
}

.score-gauge--sm .score-gauge__max {
    font-size: 0.75rem;
}

.score-gauge__label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-top: var(--space-2);
}

/* Score Gauge on Hero/Dark backgrounds */
.card--hero .score-gauge__value,
.signal-card--featured .score-gauge__value {
    color: var(--text-inverse);
}

.card--hero .score-gauge__bg,
.signal-card--featured .score-gauge__bg {
    stroke: rgba(255, 255, 255, 0.15);
}

.card--hero .score-gauge__max,
.signal-card--featured .score-gauge__max {
    color: rgba(255, 255, 255, 0.5);
}

/* Gauge Animation on Load */
@keyframes gaugeProgress {
    from {
        stroke-dashoffset: 377;
    }
}

.score-gauge--animate .score-gauge__progress {
    animation: gaugeProgress 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}


/* ═══════════════════════════════════════════════════════════════
   SPARKLINES - Mini Trend Charts
   ═══════════════════════════════════════════════════════════════ */

.stat-sparkline {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.stat-sparkline__chart {
    width: 60px;
    height: 24px;
    position: relative;
}

.stat-sparkline__canvas {
    width: 100%;
    height: 100%;
}

.stat-sparkline__trend {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.75rem;
    font-weight: 600;
}

.stat-sparkline__trend--up {
    color: var(--success);
}

.stat-sparkline__trend--down {
    color: var(--danger);
}

.stat-sparkline__trend--neutral {
    color: var(--text-muted);
}

/* Stat with Sparkline Layout */
.stat-with-sparkline {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.stat-with-sparkline .stat {
    text-align: left;
}


/* ═══════════════════════════════════════════════════════════════
   LAYER PROGRESS BARS - Enhanced Breakdown
   ═══════════════════════════════════════════════════════════════ */

.layer-progress {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.layer-progress__item {
    padding: var(--space-4);
    background: var(--bg-base);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--border);
    transition: all var(--transition-fast);
}

.layer-progress__item--pass {
    border-left-color: var(--success);
    background: linear-gradient(90deg, var(--success-light) 0%, var(--bg-base) 100%);
}

.layer-progress__item--fail {
    border-left-color: var(--border);
    opacity: 0.7;
}

.layer-progress__item--bonus {
    border-left-color: var(--purple-hover);
    background: linear-gradient(90deg, var(--purple-light) 0%, var(--bg-base) 100%);
}

.layer-progress__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}

.layer-progress__name {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.layer-progress__icon {
    font-size: 1rem;
}

.layer-progress__status {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.85rem;
    font-weight: 600;
}

.layer-progress__status--pass {
    color: var(--success);
}

.layer-progress__status--fail {
    color: var(--text-muted);
}

.layer-progress__bar-container {
    height: 6px;
    background: var(--bg-muted);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--space-2);
}

.layer-progress__bar {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.layer-progress__bar--pass {
    background: linear-gradient(90deg, var(--success) 0%, var(--success-gradient-end) 100%);
}

.layer-progress__bar--fail {
    background: var(--border-strong);
}

.layer-progress__bar--bonus {
    background: linear-gradient(90deg, var(--purple-hover) 0%, var(--purple) 100%);
}

.layer-progress__detail {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

/* Animate on load */
@keyframes layerFill {
    from {
        width: 0;
    }
}

.layer-progress--animate .layer-progress__bar {
    animation: layerFill 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}


/* ═══════════════════════════════════════════════════════════════
   OPTIONS CHAIN GRID
   ═══════════════════════════════════════════════════════════════ */

.options-chain {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.options-chain__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border);
    background: var(--bg-base);
}

.options-chain__title {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.options-chain__expiry-tabs {
    display: flex;
    gap: var(--space-2);
}

.options-chain__expiry-tab {
    padding: var(--space-2) var(--space-3);
    font-size: 0.8rem;
    font-weight: 600;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.options-chain__expiry-tab:hover {
    border-color: var(--primary);
}

.options-chain__expiry-tab--active {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary-text);
}

.options-chain__grid {
    display: grid;
    grid-template-columns: 1fr 80px 1fr;
    overflow-x: auto;
}

.options-chain__column {
    min-width: 200px;
}

.options-chain__column--calls {
    background: rgba(0, 200, 150, 0.03);
}

.options-chain__column--puts {
    background: rgba(255, 77, 106, 0.03);
}

.options-chain__column--strikes {
    background: var(--bg-base);
    position: sticky;
    left: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-width: 80px;
}

.options-chain__column-header {
    padding: var(--space-3) var(--space-4);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    border-bottom: 1px solid var(--border);
    background: var(--bg-muted);
}

.options-chain__column--calls .options-chain__column-header {
    color: var(--success);
}

.options-chain__column--puts .options-chain__column-header {
    color: var(--danger);
}

.options-chain__row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border);
    font-size: 0.8rem;
    transition: background var(--transition-fast);
}

.options-chain__row:hover {
    background: rgba(0, 0, 0, 0.02);
}

.options-chain__cell {
    text-align: right;
    padding: var(--space-1);
    font-family: var(--font-mono);
}

.options-chain__cell--label {
    text-align: left;
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.7rem;
}

.options-chain__strike {
    padding: var(--space-2) var(--space-3);
    font-size: 0.9rem;
    font-weight: 700;
    font-family: var(--font-mono);
    text-align: center;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}

.options-chain__strike--atm {
    background: rgba(0, 200, 150, 0.15);
    border-left: 3px solid var(--primary);
    border-right: 3px solid var(--primary);
    color: var(--primary-text);
}

.options-chain__strike--itm-call,
.options-chain__strike--itm-put {
    background: rgba(0, 200, 150, 0.08);
}

.options-chain__strike--otm {
    background: var(--bg-base);
    color: var(--text-secondary);
}

/* Unusual Activity Highlight */
.options-chain__row--unusual {
    background: rgba(245, 158, 11, 0.1) !important;
    position: relative;
}

.options-chain__row--unusual::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--warning);
}

.options-chain__unusual-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px 6px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    background: var(--warning);
    color: #1a1a1a;
    border-radius: var(--radius-sm);
}

/* Options Chain Stats Row */
.options-chain__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--bg-base);
    border-top: 1px solid var(--border);
}

.options-chain__stat {
    text-align: center;
}

.options-chain__stat-value {
    font-size: 1rem;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text-primary);
}

.options-chain__stat-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: var(--space-1);
}

/* Mobile responsiveness for options chain */
@media (max-width: 768px) {
    .options-chain__grid {
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
    }

    .options-chain__column {
        min-width: 180px;
    }

    .options-chain__stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .options-chain__expiry-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: var(--space-2);
    }
}


/* ═══════════════════════════════════════════════════════════════
   ENHANCED CHART CONTAINERS
   ═══════════════════════════════════════════════════════════════ */

.chart-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.chart-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border);
}

.chart-card__title {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.chart-card__period-toggle {
    display: flex;
    gap: var(--space-1);
    background: var(--bg-muted);
    padding: var(--space-1);
    border-radius: var(--radius-sm);
}

.chart-card__period-btn {
    padding: var(--space-2) var(--space-3);
    font-size: 0.75rem;
    font-weight: 600;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--text-secondary);
}

.chart-card__period-btn:hover {
    color: var(--text-primary);
}

.chart-card__period-btn--active {
    background: var(--bg-card);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

.chart-card__body {
    padding: var(--space-4) var(--space-5);
}

.chart-card__canvas-container {
    position: relative;
    height: 240px;
}

.chart-card__canvas-container--tall {
    height: 320px;
}

.chart-card__canvas-container canvas {
    width: 100% !important;
    height: 100% !important;
}

.chart-card__footer {
    display: flex;
    justify-content: center;
    gap: var(--space-6);
    padding: var(--space-3) var(--space-5);
    background: var(--bg-base);
    border-top: 1px solid var(--border);
}

.chart-card__legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.chart-card__legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.chart-card__legend-dot--primary {
    background: var(--primary);
}

.chart-card__legend-dot--danger {
    background: var(--danger);
}

.chart-card__legend-dot--purple {
    background: var(--purple-hover);
}

.chart-card__legend-dot--muted {
    background: var(--text-muted);
}


/* ═══════════════════════════════════════════════════════════════
   ACCURACY BY SCORE VISUAL BARS
   ═══════════════════════════════════════════════════════════════ */

.accuracy-bars {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.accuracy-bar {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.accuracy-bar__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accuracy-bar__score {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.accuracy-bar__score-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--bg-muted);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text-primary);
}

.accuracy-bar__score-badge--high {
    background: var(--success-light);
    color: var(--success);
}

.accuracy-bar__count {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.accuracy-bar__percentage {
    font-size: 1.1rem;
    font-weight: 700;
    font-family: var(--font-mono);
}

.accuracy-bar__percentage--high {
    color: var(--success);
}

.accuracy-bar__percentage--medium {
    color: var(--warning);
}

.accuracy-bar__percentage--low {
    color: var(--text-muted);
}

.accuracy-bar__track {
    height: 8px;
    background: var(--bg-muted);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.accuracy-bar__fill {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.accuracy-bar__fill--high {
    background: linear-gradient(90deg, var(--success) 0%, var(--success-gradient-end) 100%);
}

.accuracy-bar__fill--medium {
    background: linear-gradient(90deg, var(--warning) 0%, var(--warning-gradient-end) 100%);
}

.accuracy-bar__fill--low {
    background: var(--border-strong);
}


/* ═══════════════════════════════════════════════════════════════
   FEATURED TRADES COMPONENT
   Dashboard featured trade ideas section
   ═══════════════════════════════════════════════════════════════ */

.featured-trades {
    margin-bottom: var(--space-3);
}

.featured-trades__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
    flex-wrap: wrap;
    gap: var(--space-2);
}

.featured-trades__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.featured-trades__subtitle {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.8rem;
    color: var(--text-muted);
}

.featured-trades__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-3);
}

@media (max-width: 768px) {
    .featured-trades__grid {
        grid-template-columns: 1fr;
    }
}


/* ═══════════════════════════════════════════════════════════════
   MARKET SYNOPSIS COMPONENT
   Cheddar Flow inspired market overview
   ═══════════════════════════════════════════════════════════════ */

.synopsis-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}

.synopsis-content {
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.synopsis-stats {
    display: grid;
    gap: var(--space-2);
}

.synopsis-stats--main {
    grid-template-columns: repeat(2, 1fr);
}

.synopsis-stats--detailed {
    grid-template-columns: repeat(3, 1fr);
    padding-top: var(--space-2);
    border-top: 1px solid var(--border);
}

.synopsis-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.synopsis-stat--highlight {
    padding: var(--space-2);
    background: var(--bg-muted);
    border-radius: var(--radius-sm);
}

.synopsis-stat__label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.synopsis-stat__value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.synopsis-breakdown {
    background: var(--bg-muted);
    border-radius: var(--radius-md);
    padding: var(--space-3);
}

.synopsis-breakdown__header {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    margin-bottom: var(--space-3);
}

.synopsis-breakdown__row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.synopsis-breakdown__row:last-child {
    margin-bottom: 0;
}

.synopsis-breakdown__label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    width: 40px;
    flex-shrink: 0;
}

.synopsis-breakdown__bar {
    flex: 1;
    height: 8px;
    background: var(--bg-base);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.synopsis-breakdown__fill {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width 0.5s ease;
}

.synopsis-breakdown__fill--call {
    background: linear-gradient(90deg, var(--success), var(--success-light));
}

.synopsis-breakdown__fill--put {
    background: linear-gradient(90deg, var(--danger), var(--danger-light));
}

.synopsis-breakdown__value {
    font-size: var(--text-sm);
    font-weight: 600;
    font-family: var(--font-mono);
    width: 40px;
    text-align: right;
    flex-shrink: 0;
}

.synopsis-insights {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
}

.synopsis-insight {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.synopsis-insight__icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.synopsis-insight__text {
    line-height: 1.4;
}


/* ═══════════════════════════════════════════════════════════════
   SECTOR CHART COMPONENT
   Pie chart with legend for sector breakdown
   ═══════════════════════════════════════════════════════════════ */

/* Market Overview Grid - Compact 3-column row layout */
.market-overview-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 1fr;
    gap: var(--space-3);
}

@media (max-width: 1024px) {
    .market-overview-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .market-overview-grid {
        grid-template-columns: 1fr;
    }
}

.sector-chart-container {
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

.sector-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2) var(--space-4);
    width: 100%;
}

.sector-legend__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.sector-legend__color {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.sector-legend__name {
    white-space: nowrap;
}

.sector-legend__value {
    font-weight: 600;
    color: var(--text-primary);
    font-family: var(--font-mono);
}


/* ═══════════════════════════════════════════════════════════════
   GAINERS/LOSERS COMPONENT
   Tab-based top movers list
   ═══════════════════════════════════════════════════════════════ */

.gainers-losers-tabs {
    display: flex;
    gap: var(--space-1);
    background: var(--bg-muted);
    padding: var(--space-1);
    border-radius: var(--radius-md);
}

.gl-tab {
    flex: 1;
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: var(--touch-target-min);
}

.gl-tab:hover {
    color: var(--text-primary);
}

.gl-tab.active {
    background: var(--bg-card);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

.gainers-losers-list {
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    max-height: 280px;
    overflow-y: auto;
}

.gl-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2);
    background: var(--bg-muted);
    border-radius: var(--radius-sm);
    transition: background 0.2s ease;
    font-size: 0.85rem;
}

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

.gl-item__ticker {
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.95rem;
}

.gl-item__name {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: 2px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gl-item__change {
    font-weight: 700;
    font-family: var(--font-mono);
    font-size: 0.95rem;
}

.gl-item__change--positive {
    color: var(--success);
}

.gl-item__change--negative {
    color: var(--danger);
}

.gl-item__price {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: 2px;
    text-align: right;
}


/* ═══════════════════════════════════════════════════════════════
   0 DTE OPTIONS SECTION
   Zero days to expiration options activity
   ═══════════════════════════════════════════════════════════════ */

.zero-dte-section {
    overflow: hidden;
}

.zero-dte-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.zero-dte-filter {
    padding: var(--space-2) var(--space-3);
    background: var(--bg-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: var(--touch-target-min);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.zero-dte-filter:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.zero-dte-filter.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.zero-dte-content {
    padding: var(--space-3);
}

.zero-dte-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

@media (max-width: 1024px) {
    .zero-dte-grid {
        grid-template-columns: 1fr;
    }
}

.zero-dte-table-container {
    background: var(--bg-muted);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.zero-dte-table-header {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-base);
    border-bottom: 1px solid var(--border);
}

.zero-dte-table {
    max-height: 300px;
    overflow-y: auto;
}

.zero-dte-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
    font-size: var(--text-sm);
    transition: background 0.2s ease;
}

.zero-dte-row:last-child {
    border-bottom: none;
}

.zero-dte-row:hover {
    background: var(--bg-base);
}

.zero-dte-row__ticker {
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.zero-dte-row__strike {
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

.zero-dte-row__type {
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 600;
}

.zero-dte-row__type--call {
    background: var(--success-light);
    color: var(--success);
}

.zero-dte-row__type--put {
    background: var(--danger-light);
    color: var(--danger);
}

.zero-dte-row__premium {
    font-weight: 600;
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.zero-dte-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--bg-muted);
    border-radius: var(--radius-md);
}

@media (max-width: 768px) {
    .zero-dte-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .zero-dte-stats {
        grid-template-columns: 1fr;
    }
}

.zero-dte-stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    text-align: center;
}

.zero-dte-stat__label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.zero-dte-stat__value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-mono);
}


/* ═══════════════════════════════════════════════════════════════
   TELEGRAM CONNECTION COMPONENT
   Connected state and setup wizard styles
   ═══════════════════════════════════════════════════════════════ */

.telegram-connected {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--success-light);
    border-radius: var(--radius-md);
}

.telegram-connected__info {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.telegram-connected__avatar {
    width: 48px;
    height: 48px;
    background: var(--success);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.telegram-connected__name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1rem;
}

.telegram-connected__status {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.telegram-connected__actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* Telegram Setup Wizard */
.telegram-setup {
    padding: var(--space-4);
}

.telegram-setup__steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.telegram-step {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--bg-muted);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    transition: border-color 0.2s ease;
}

.telegram-step.active {
    border-color: var(--primary);
}

.telegram-step.completed {
    border-color: var(--success);
    background: var(--success-light);
}

.telegram-step__number {
    width: 32px;
    height: 32px;
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--text-sm);
    color: var(--text-muted);
    flex-shrink: 0;
}

.telegram-step.active .telegram-step__number {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.telegram-step.completed .telegram-step__number {
    background: var(--success);
    border-color: var(--success);
    color: white;
}

.telegram-step__content {
    flex: 1;
}

.telegram-step__title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.telegram-step__desc {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Verification Code Display */
.verification-code {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-base);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.verification-code code {
    font-family: var(--font-mono);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 0.1em;
}