:root {
    /* ---------- Shell (background) ---------- */
    --bg-shell: #041220;                 /* dark navy */
    --bg-shell-2: #071a33;               /* subtle gradient end */
    --shell-overlay: rgba(255,255,255,.05);
    --shell-overlay-strong: rgba(255,255,255,.09);
    --border-shell: rgba(255,255,255,.12);
  
    /* ---------- Text on shell ---------- */
    --text: rgba(255,255,255,.95);
    --text-muted: rgba(255,255,255,.68);
    --text-soft: rgba(255,255,255,.80);
  
    /* ---------- Accents ---------- */
    --accent: #2F6BFF;                   /* links, progress, highlights */
    --accent-hover: #5B8AFF;
  
    /* Primary CTA (main buttons) */
    --cta: #2F6BFF;
    --cta-hover: #2563EB;
  
    /* Optional Premium CTA (if you want teal for premium only) */
    --premium: #0D9488;
    --premium-hover: #14B8A6;
  
    /* ---------- Semantic ---------- */
    --success: #22C55E;
    --warning: #F59E0B;
    --danger: #EF4444;
  
    /* ---------- Radius & shadow ---------- */
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 18px;
  
    --shadow-glass: 0 16px 50px rgba(0,0,0,.35);
    --shadow-card: 0 10px 30px rgba(0,0,0,.22);
  
    /* ---------- Layout ---------- */
    --wrap: 1100px;
    --pad-x: 22px;
    --gap-1: 8px;
    --gap-2: 12px;
    --gap-3: 16px;
    --gap-4: 24px;
    --gap-5: 32px;
  }
  
  /* --------------------------------------------------------------------------
     Base
     -------------------------------------------------------------------------- */
  
  html {
    min-height: 100%;
    scrollbar-gutter: stable;
  }

  body {
    min-height: 100vh;
    background: radial-gradient(1200px 600px at 20% 10%, rgba(47,107,255,.18), transparent 55%),
                radial-gradient(900px 500px at 90% 0%, rgba(13,148,136,.10), transparent 55%),
                linear-gradient(180deg, var(--bg-shell), var(--bg-shell-2));
    background-attachment: fixed;
    color: var(--text);
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  
  h1, h2, h3 { letter-spacing: -0.02em; }
  a { color: inherit; }
  
  /* Helpers */
  .lead { color: var(--text-muted); line-height: 1.6; }
  .text-muted, .small { color: var(--text-muted) !important; }
  
  /* --------------------------------------------------------------------------
     Layout wrapper
     -------------------------------------------------------------------------- */
  
  .content-container{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  
  /* Centered content wrapper – transparent so body gradient is not repeated in middle */
  .page-wrap{
    max-width: var(--wrap);
    margin: 22px auto;
    width: calc(100% - 24px);
    overflow: hidden;
    flex: 1;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
  }
  
  /* internal container */
  .container{
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--pad-x);
  }
  
  /* --------------------------------------------------------------------------
     Sections
     -------------------------------------------------------------------------- */
  
  .main-content{
    flex: 1;
    padding: var(--gap-4) 0;
  }
  
  .section{
    padding: 28px;
    background: transparent;
  }
  
  .section + .section{
    border-top: 1px solid var(--border-shell);
  }
  
  .section-header{
    margin-bottom: var(--gap-4);
    max-width: 72ch;
  }
  
  .section-title{
    font-size: 1.45rem;
    font-weight: 750;
    margin: 0 0 var(--gap-2);
    color: var(--text);
  }
  
  .section-intro{
    margin: 0;
    color: var(--text-muted);
  }
  
  .section-actions{
    margin-top: var(--gap-4);
  }
  
  /* --------------------------------------------------------------------------
     Hero
     -------------------------------------------------------------------------- */
  
  .hero{
    padding: var(--gap-5) var(--gap-4);
  }
  
  .hero-grid{
    display: grid;
    gap: var(--gap-5);
    align-items: start;
  }
  
  @media (min-width: 768px){
    .hero-grid{ grid-template-columns: 1fr 360px; }
  }
  
  .hero-title{
    font-size: clamp(1.85rem, 4vw, 2.55rem);
    font-weight: 800;
    margin: 0 0 var(--gap-2);
    color: var(--text);
  }
  
  .hero-lead{
    margin: 0 0 var(--gap-4);
    font-size: 1.05rem;
  }
  
  .hero-actions{
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-2);
    margin-bottom: var(--gap-4);
  }
  
  .hero-note{
    margin: 0;
    color: var(--text-muted);
    font-size: 0.95rem;
  }

  /* --------------------------------------------------------------------------
     Page hero (calendar-style header – reusable for dividend pages, etc.)
     -------------------------------------------------------------------------- */
  .page-hero-section {
    width: min(var(--wrap), calc(100% - 2 * var(--gap-4)));
    margin: var(--gap-4) auto var(--gap-2);
    padding: var(--gap-4) var(--pad-x);
    border-bottom: 1px solid var(--border-shell);
    background: transparent;
  }
  .page-hero-section .page-hero-content {
    max-width: 90ch;
  }
  .page-hero-section .page-hero-title {
    margin: 0 0 var(--gap-2);
    font-size: clamp(1.35rem, 2.2vw, 1.85rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--text);
  }
  .page-hero-section .page-hero-description {
    margin: 0 0 var(--gap-2);
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.5;
  }
  .page-hero-section .page-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-1);
    padding: 6px var(--gap-2);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--shell-overlay);
    border: 1px solid var(--border-shell);
  }
  .page-hero-section .page-hero-badge i {
    font-size: 1rem;
  }

  /* --------------------------------------------------------------------------
     View tabs (calendar-style tab bar – reusable for dividend table tabs, etc.)
     -------------------------------------------------------------------------- */
  .view-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-1);
    padding: var(--gap-2) 0;
    position: sticky;
    top: var(--gap-2);
    z-index: 3;
    background: transparent;
  }
  .view-tab {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    padding: 10px var(--gap-2);
    border-radius: var(--r-sm);
    font-size: 0.88rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-1);
    cursor: pointer;
    transition: transform 0.12s ease, background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
  }
  .view-tab:hover {
    background: var(--shell-overlay);
    border-color: var(--border-shell);
    color: var(--text);
  }
  .view-tab:active {
    transform: translateY(1px);
  }
  .view-tab.active {
    background: rgba(47, 107, 255, 0.18);
    border-color: var(--border-shell);
    color: var(--text);
  }
  .view-tab i {
    font-size: 1rem;
    opacity: 0.9;
  }
  
  /* --------------------------------------------------------------------------
     Cards
     -------------------------------------------------------------------------- */
  
  .card, .box{
    border: 1px solid var(--border-shell);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-card);
    background: var(--shell-overlay);
  }
  
  .card-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: var(--gap-2);
    padding: var(--gap-3) 18px;
    border-bottom: 1px solid var(--border-shell);
    font-weight: 650;
  }
  
  .card-body{ padding: 18px; }
  
  .card-title{
    font-size: 1.05rem;
    font-weight: 650;
    margin: 0 0 var(--gap-1);
    color: var(--text);
  }
  
  .card-text{
    margin: 0;
    font-size: 0.94rem;
    color: var(--text-muted);
    line-height: 1.55;
  }
  
  .card-note{
    margin: var(--gap-2) 0 0;
    font-size: 0.82rem;
    color: var(--text-muted);
  }
  
  /* link cards */
  .card-link{
    text-decoration: none;
    color: inherit;
    display:block;
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
  }
  
  .card-link:hover{
    transform: translateY(-2px);
    background: var(--shell-overlay-strong);
    border-color: rgba(255,255,255,.18);
  }
  
  /* Highlight CTA card */
  .card-highlight{
    background: radial-gradient(900px 300px at 10% 0%, rgba(47,107,255,.22), transparent 65%),
                radial-gradient(800px 280px at 90% 20%, rgba(13,148,136,.14), transparent 60%),
                rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-glass);
  }
  
  .card-inner{
    display:flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-4);
    padding: var(--gap-4);
  }
  
  .card-highlight-title{
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0 0 var(--gap-1);
    color: var(--text);
  }
  
  .card-highlight-text{
    margin: 0;
    color: var(--text-muted);
    font-size: 0.95rem;
  }

  /* ========== GLASS CARDS (override) ========== */

  /* Base: all cards become glass / more transparent */
  .card, .box, .card-highlight {
    background: rgba(255, 255, 255, .06) !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .28) !important;
    backdrop-filter: blur(12px);
  }

  /* Cleaner header */
  .card-header {
    background: rgba(255, 255, 255, .03);
    border-bottom: 1px solid rgba(255, 255, 255, .10) !important;
  }

  /* Text inside cards */
  .card-title { color: rgba(255, 255, 255, .95) !important; }
  .card-text, .card-note { color: rgba(255, 255, 255, .68) !important; }

  /* Tools (compound, dividend goal): result cards – force light text for contrast */
  .main-content .result-card .card-body,
  .main-content .result-card .card-body .card-title,
  .main-content .result-card .card-body h3,
  .main-content .result-card .card-body h5,
  .main-content .result-card .card-body .display-5,
  .main-content .card-highlight .card-body,
  .main-content .card-highlight .card-body .card-title,
  .main-content .card-highlight .card-body h3,
  .main-content .card-highlight .card-body h5,
  .main-content .card-highlight .card-body .display-5 {
    color: var(--text) !important;
  }

  /* Link card hover */
  .card-link:hover {
    background: rgba(255, 255, 255, .09) !important;
    border-color: rgba(255, 255, 255, .18) !important;
  }
  
  /* --------------------------------------------------------------------------
     Stats / Scores / Progress
     -------------------------------------------------------------------------- */
  
  .stat-row{
    display:flex;
    justify-content: space-between;
    align-items:center;
    gap: var(--gap-2);
    font-size: 0.95rem;
    margin-bottom: var(--gap-1);
  }
  
  .stat-value{ font-weight: 700; }
  
  /* Legacy score classes (kept for backwards compatibility) */
  .score-high,
  .score-excellent { color: var(--success); }
  .score-mid,
  .score-medium,
  .score-good { color: #84CC16; }
  .score-fair { color: var(--warning); }
  .score-low{ color: var(--danger); }
  .score-poor { color: #DC2626; }
  
  /* Grade-based score colors (smooth gradient from green to red) */
  .grade-a-plus,
  .grade-aplus { color: #10B981; } /* A+ (90-100): Bright emerald green */
  .grade-a { color: #22C55E; }      /* A (80-89): Green */
  .grade-b { color: #84CC16; }      /* B (70-79): Lime/yellow-green */
  .grade-c { color: #F59E0B; }      /* C (60-69): Amber/orange-yellow */
  .grade-d { color: #F97316; }      /* D (50-59): Orange */
  .grade-f { color: #EF4444; }      /* F (<50): Red */
  
  .progress{
    height: 6px;
    background: rgba(255,255,255,.14);
    border-radius: 999px;
    overflow:hidden;
    margin-bottom: var(--gap-2);
  }
  
  .progress-md{ height: 8px; }
  .progress-sm{ height: 6px; }
  
  .progress-bar{
    height: 100%;
    width: var(--width, 0%);
    max-width: 100%;
    background: var(--accent);
    border-radius: 999px;
    transition: width .25s ease;
  }

  /* Dividend score card (reusable – index.php + stocks sidebar) */
  .score-card-header {
    display: flex;
    align-items: center;
    gap: var(--gap-2);
    margin-bottom: var(--gap-3);
  }
  .score-card-logo {
    width: 48px;
    height: 48px;
    border-radius: var(--r-sm);
    background: var(--shell-overlay);
    border: 1px solid var(--border-shell);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
  }
  .score-card-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .score-card-header-content {
    flex: 1;
    min-width: 0;
  }
  .score-card-symbol-row {
    display: flex;
    align-items: center;
    gap: var(--gap-1);
    margin-bottom: 2px;
  }
  .score-card-symbol {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
  }
  .score-card-status-badge {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--text-muted);
  }
  .score-card-status-badge.king { background: rgba(255, 215, 0, 0.2); }
  .score-card-status-badge.aristocrat { background: rgba(47, 107, 255, 0.2); }
  .score-card-status-badge.achiever { background: rgba(13, 148, 136, 0.2); }
  .score-card-name {
    font-size: 0.82rem;
    color: var(--text-muted);
  }
  .score-card-grade-row {
    display: flex;
    align-items: center;
    gap: var(--gap-1);
    margin-bottom: var(--gap-3);
  }
  .score-card-grade-badge {
    font-size: 0.9rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: var(--text);
  }
  .score-card-rating {
    font-size: 0.85rem;
    color: var(--text-muted);
  }
  .score-card-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-1);
    padding-top: var(--gap-2);
    border-top: 1px solid var(--border-shell);
  }
  .score-card-metric-item {
    text-align: center;
    padding: var(--gap-1);
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--r-sm);
  }
  .score-card-metric-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 4px;
  }
  .score-card-metric-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
  }
  .score-card-divider {
    margin-top: var(--gap-2);
    padding-top: var(--gap-2);
    border-top: 1px solid var(--border-shell);
  }

  /* Stock score card (sidebar + reusable) – unique classes for stock page score card */
  .stock-score-card-surface {
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--border-shell);
    border-radius: var(--r-lg);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28);
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
  }
  .stock-score-card-header {
    display: flex;
    align-items: center;
    gap: var(--gap-2);
    margin-bottom: var(--gap-3);
  }
  .stock-score-card-logo {
    width: 48px;
    height: 48px;
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border-shell);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
  }
  .stock-score-card-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .stock-score-card-logo-fallback {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-muted);
  }
  .stock-score-card-header-content {
    flex: 1;
    min-width: 0;
  }
  .stock-score-card-symbol-row {
    display: flex;
    align-items: center;
    gap: var(--gap-1);
    margin-bottom: 2px;
  }
  .stock-score-card-symbol {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
  }
  .stock-score-card-name {
    font-size: 0.82rem;
    color: var(--text-muted);
  }
  .stock-score-card-non-dividend {
    text-align: center;
    padding: 14px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px dashed var(--border-shell);
  }
  .stock-score-card-non-dividend-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 4px;
  }
  .stock-score-card-non-dividend-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    opacity: 0.9;
  }
  .stock-score-card-col-shrink {
    align-self: flex-start;
  }
  .stock-score-card-overall-row {
    margin-bottom: var(--gap-2);
  }
  .stock-score-card-overall-label {
    font-size: 0.85rem;
    color: var(--text-muted);
  }
  .stock-score-card-overall-value {
    font-size: 1.3rem;
    font-weight: 700;
  }
  .stock-score-card-progress-wrap {
    margin-bottom: 6px;
  }
  .stock-score-card-progress-bar {
    height: 100%;
    width: var(--width, 0%);
    max-width: 100%;
    border-radius: 999px;
    transition: width 0.25s ease;
  }
  .stock-score-card-benchmark-comment {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-bottom: var(--gap-2);
    text-align: center;
  }
  .stock-score-card-spacer {
    margin-bottom: var(--gap-2);
  }
  .stock-score-card-reliability {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--gap-3);
    padding: var(--gap-1) var(--gap-2);
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--r-sm);
    border: 1px solid rgba(255, 255, 255, 0.08);
  }
  .stock-score-card-reliability-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .stock-score-card-reliability-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .stock-score-card-reliability-stars-row {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .stock-score-card-reliability-stars {
    font-size: 1.1rem;
    line-height: 1;
  }
  .stock-score-card-reliability-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
  }
  .stock-score-card-reliability-right {
    text-align: right;
  }
  .stock-score-card-reliability-yrs {
    font-size: 0.75rem;
    color: var(--text-muted);
  }
  .stock-score-card-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding-top: var(--gap-2);
    border-top: 1px solid var(--border-shell);
  }
  .stock-score-card-metric-cell {
    position: relative;
    text-align: center;
    padding: 10px 8px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--r-sm);
  }
  .stock-score-card-percentile-chip {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    cursor: help;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    font-style: italic;
  }
  .stock-score-card-metric-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
  }
  .stock-score-card-metric-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
  }
  .stock-score-card-growth-context {
    margin-top: 6px;
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--warning);
  }
  .stock-score-card-key-metrics {
    margin-top: var(--gap-2);
    padding-top: var(--gap-2);
    border-top: 1px solid var(--border-shell);
  }
  .stock-score-card-key-metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
  }
  .stock-score-card-key-metric-row:last-child {
    margin-bottom: 0;
  }
  .stock-score-card-key-metric-label {
    font-size: 0.82rem;
    color: var(--text-muted);
  }
  .stock-score-card-key-metric-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
  }
  .stock-score-card-key-metric-context {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
  }
  
  /* --------------------------------------------------------------------------
     Buttons (clean + consistent on dark)
     -------------------------------------------------------------------------- */
  
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius: 999px;
    padding: 10px 16px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration:none;
    border: 1px solid transparent;
    cursor:pointer;
    transition: transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
  }
  
  .btn:hover{ transform: translateY(-1px); }
  
  .btn-lg{
    padding: 12px 20px;
    font-size: 1rem;
  }
  
  /* Primary CTA = blue */
  .btn-primary{
    background: var(--cta);
    border-color: var(--cta);
    color: #fff;
  }
  .btn-primary:hover{
    background: var(--cta-hover);
    border-color: var(--cta-hover);
    color:#fff;
  }
  
  /* Optional: Premium button in teal (use class btn-premium) */
  .btn-premium{
    background: var(--premium);
    border-color: var(--premium);
    color: #fff;
  }
  .btn-premium:hover{
    background: var(--premium-hover);
    border-color: var(--premium-hover);
    color:#fff;
  }
  
  /* Outline on dark – transparent glass (same as cards) */
  .btn-outline-secondary,
  .btn-outline{
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    color: var(--text);
  }
  .btn-outline-secondary:hover,
  .btn-outline:hover{
    background: rgba(255,255,255,.09);
    border-color: rgba(255,255,255,.18);
    color: var(--text);
  }
  
  /* Ghost (subtle) */
  .btn-ghost{
    background: transparent;
    border-color: transparent;
    color: var(--text-soft);
  }
  .btn-ghost:hover{
    background: rgba(255,255,255,.06);
    color: var(--text);
  }
  
  /* --------------------------------------------------------------------------
     Badges
     -------------------------------------------------------------------------- */
  
  .badge-soft{
    border-radius: 999px;
    padding: 6px 10px;
    font-weight: 800;
    font-size: 0.75rem;
    background: rgba(255,255,255,.12);
    color: var(--text);
  }
  
  /* --------------------------------------------------------------------------
     Grid
     -------------------------------------------------------------------------- */
  
  .grid{ display:grid; gap: var(--gap-3); }
  
  .grid-cols-2{ grid-template-columns: 1fr; }
  @media (min-width: 640px){
    .grid-cols-2{ grid-template-columns: repeat(2, 1fr); }
  }
  
  .grid-cols-3{ grid-template-columns: 1fr; }
  @media (min-width: 768px){
    .grid-cols-3{ grid-template-columns: repeat(3, 1fr); }
  }
  
  .grid-cols-4-md{ grid-template-columns: 1fr; }
  @media (min-width: 640px){
    .grid-cols-4-md{ grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 992px){
    .grid-cols-4-md{ grid-template-columns: repeat(4, 1fr); }
  }
  
  .card-equal{ display:flex; flex-direction: column; }
  .card-equal .card-body{ flex: 1; }
  
  /* --------------------------------------------------------------------------
     Data table (reusable – .table-wrapper, .table-main, .table-pagination)
     -------------------------------------------------------------------------- */
  .table-controls {
    display: grid;
    grid-template-columns: 1.25fr repeat(6, minmax(0, 1fr));
    gap: var(--gap-2);
    padding: var(--gap-1) 0;
    background: transparent;
    align-items: end;
  }
  .table-controls .filter-dropdown { min-width: 0; }
  .table-controls .search-filter { min-width: 180px; }
  .table-controls .form-select,
  .table-controls .table-search {
    padding: 8px 10px;
    font-size: 0.85rem;
  }
  
  .table-wrapper {
    width: 100%;
    max-width: 100%;
    margin-top: var(--gap-2);
    border-radius: var(--r-sm);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    background: var(--shell-overlay);
  }
  
  table.table-main {
    width: 100%;
    min-width: max-content;
    border-collapse: collapse;
  }
  .table-main thead th {
    text-align: left;
    font-size: 0.8rem;
    letter-spacing: -0.01em;
    color: var(--text-muted);
    padding: var(--gap-2) var(--gap-3);
    background: var(--shell-overlay);
    border-bottom: 1px solid var(--border-shell);
    position: sticky;
    top: 0;
    z-index: 1;
  }
  .table-wrapper .table-main tbody tr {
    background: transparent;
  }
  .table-main tbody td {
    padding: var(--gap-2) var(--gap-3);
    color: var(--text);
    border-bottom: 1px solid var(--border-shell);
    font-size: 0.9rem;
    text-align: left;
    background: transparent;
  }
  .table-wrapper .table-main tbody td {
    background: transparent;
  }
  .table-main tbody tr:hover {
    background: var(--shell-overlay);
  }
  .table-main tbody tr:hover td {
    background: transparent;
  }
  .table-main th[data-sort] {
    cursor: pointer;
    user-select: none;
  }
  .table-main th[data-sort]:hover {
    color: var(--text);
  }
  .table-main th.sorted-asc i,
  .table-main th.sorted-desc i {
    opacity: 1;
    color: var(--accent);
  }

  /* Default view (clean): hide .col-advanced. Advanced view: data-advanced-metrics="true" shows them */
  .table-main th.col-advanced,
  .table-main td.col-advanced {
    display: none;
  }
  .table-main[data-advanced-metrics="true"] th.col-advanced,
  .table-main[data-advanced-metrics="true"] td.col-advanced {
    display: table-cell;
  }

  /* Legacy: dividend table tabs (euronext etc.) – show/hide by data-active-tab */
  .table-main[data-active-tab="general"] th.col-dates:not(.col-general),
  .table-main[data-active-tab="general"] td.col-dates:not(.col-general),
  .table-main[data-active-tab="general"] th.col-growth,
  .table-main[data-active-tab="general"] td.col-growth,
  .table-main[data-active-tab="general"] th.col-ratings,
  .table-main[data-active-tab="general"] td.col-ratings {
    display: none;
  }
  .table-main[data-active-tab="dates"] th.col-general:not(.col-dates),
  .table-main[data-active-tab="dates"] td.col-general:not(.col-dates),
  .table-main[data-active-tab="dates"] th.col-growth,
  .table-main[data-active-tab="dates"] td.col-growth,
  .table-main[data-active-tab="dates"] th.col-ratings,
  .table-main[data-active-tab="dates"] td.col-ratings {
    display: none;
  }
  .table-main[data-active-tab="growth"] th.col-general,
  .table-main[data-active-tab="growth"] td.col-general,
  .table-main[data-active-tab="growth"] th.col-dates,
  .table-main[data-active-tab="growth"] td.col-dates,
  .table-main[data-active-tab="growth"] th.col-ratings,
  .table-main[data-active-tab="growth"] td.col-ratings {
    display: none;
  }
  .table-main[data-active-tab="ratings"] th.col-general,
  .table-main[data-active-tab="ratings"] td.col-general,
  .table-main[data-active-tab="ratings"] th.col-dates,
  .table-main[data-active-tab="ratings"] td.col-dates,
  .table-main[data-active-tab="ratings"] th.col-growth,
  .table-main[data-active-tab="ratings"] td.col-growth {
    display: none;
  }

  /* --------------------------------------------------------------------------
     Table logos / icons (reusable – .table-logo, .table-cell-with-icon)
     -------------------------------------------------------------------------- */
  .table-logo {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: var(--r-sm);
    object-fit: cover;
    background: var(--shell-overlay);
    flex-shrink: 0;
    border: 1px solid var(--border-shell);
  }
  .table-main .stock-info,
  .table-main .table-cell-with-icon {
    display: flex;
    align-items: center;
    gap: var(--gap-2);
  }
  .table-main .stock-logo,
  .table-main .table-logo {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: var(--r-sm);
    object-fit: cover;
    background: var(--shell-overlay);
    flex-shrink: 0;
    border: 1px solid var(--border-shell);
  }
  .table-main .stock-details,
  .table-main .table-cell-icon-text {
    min-width: 0;
  }
  .table-main .stock-details .ticker-symbol,
  .table-main .table-cell-icon-text .ticker-symbol {
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
  }
  .table-main .stock-details .ticker-symbol:hover,
  .table-main .table-cell-icon-text .ticker-symbol:hover {
    color: var(--accent);
  }
  .table-main .stock-details .company-name,
  .table-main .table-cell-icon-text .company-name {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Advanced metrics toggle (Revolut-like switch) */
  .table-advanced-toggle {
    display: flex;
    align-items: center;
    gap: var(--gap-2);
    margin-top: var(--gap-2);
    padding: var(--gap-2) 0;
  }
  .table-advanced-toggle label {
    display: flex;
    align-items: center;
    gap: var(--gap-2);
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-muted);
    user-select: none;
  }
  .table-advanced-toggle label:hover {
    color: var(--text);
  }
  .table-advanced-toggle .advanced-switch {
    position: relative;
    width: 44px;
    height: 24px;
    background: var(--border-shell);
    border-radius: 999px;
    transition: background 0.2s ease;
    flex-shrink: 0;
  }
  .table-advanced-toggle .advanced-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: var(--text);
    border-radius: 50%;
    transition: transform 0.2s ease;
  }
  .table-advanced-toggle input:checked + .advanced-switch {
    background: var(--accent);
  }
  .table-advanced-toggle input:checked + .advanced-switch::after {
    transform: translateX(20px);
    background: #fff;
  }
  .table-advanced-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .table-pagination {
    margin-top: var(--gap-2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--gap-2) 0;
    background: transparent;
  }
  .table-pagination .pagination-btn {
    border: 1px solid var(--border-shell);
    background: var(--shell-overlay);
    color: var(--text);
    padding: 10px var(--gap-2);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease, transform 0.12s ease;
  }
  .table-pagination .pagination-btn:hover {
    background: var(--shell-overlay-strong);
    border-color: var(--border-shell);
  }
  .table-pagination .pagination-btn:active {
    transform: translateY(1px);
  }
  .table-page-indicator {
    color: var(--text-muted);
    font-size: 0.9rem;
  }
  .table-pagination .pagination-btn:disabled,
  .table-pagination .pagination-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }

  /* --------------------------------------------------------------------------
     Table filters (reusable – .filter-container, .filter-dropdown-row, .table-search)
     Compact, side-by-side layout on desktop and mobile
     -------------------------------------------------------------------------- */
  .filter-container {
    margin-top: var(--gap-1);
    padding: var(--gap-1) 0;
    background: transparent;
  }
  .filter-dropdown-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--gap-2);
    align-items: end;
  }
  .filter-dropdown-row.filter-row-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .filter-dropdown-row.filter-row-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .filter-dropdown-row.filter-row-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .filter-dropdown {
    min-width: 0;
  }
  .filter-dropdown-row .filter-dropdown:nth-child(2) {
    min-width: 0;
    overflow: hidden;
  }
  .filter-dropdown-row .filter-dropdown:last-child {
    min-width: 0;
  }
  .filter-container .form-label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
  }
  .filter-container .form-select,
  .filter-container .table-search {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border-radius: var(--r-sm);
    border: 1px solid var(--border-shell);
    background: var(--shell-overlay);
    color: var(--text);
    padding: 8px 10px;
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
  }
  /* Force dark theme on select (closed + native dropdown list) and override Bootstrap */
  .filter-container .form-select {
    background-color: var(--bg-shell-2) !important;
    color: rgba(255, 255, 255, 0.95) !important;
    color-scheme: dark;
  }
  .filter-container .form-select:hover,
  .filter-container .table-search:hover {
    border-color: rgba(255, 255, 255, 0.18);
  }
  .filter-container .form-select:focus,
  .filter-container .table-search:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(47, 107, 255, 0.2);
    background-color: var(--bg-shell-2) !important;
  }
  .filter-container .form-select option {
    background-color: #071a33 !important;
    background: #071a33 !important;
    color: rgba(255, 255, 255, 0.95) !important;
    padding: 8px 10px;
  }
  .filter-container .form-select optgroup {
    background-color: #0a2342 !important;
    background: #0a2342 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 6px 8px;
  }
  .table-search::placeholder {
    color: var(--text-muted);
  }

  /* --------------------------------------------------------------------------
     Modal (e.g. dividend goal breakdown) – hidden by default, open on click
     -------------------------------------------------------------------------- */
  .modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1050;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
    align-items: center;
    justify-content: center;
    padding: var(--gap-4);
    box-sizing: border-box;
  }
  .modal.show {
    display: flex;
  }
  .modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
  }
  .modal.show .modal-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
  .modal .modal-dialog {
    position: relative;
    z-index: 1051;
    max-width: 100%;
    margin: auto;
  }
  .modal .modal-content {
    border: 1px solid var(--border-shell);
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
  }
  .modal .modal-header {
    border-bottom: 1px solid var(--border-shell);
    padding: var(--gap-3) var(--gap-4);
    background: rgba(255, 255, 255, 0.03);
  }
  .modal .modal-title {
    font-size: 1.05rem;
    font-weight: 650;
    color: var(--text);
    margin: 0;
  }
  .modal .modal-body {
    padding: var(--gap-4);
    color: var(--text);
  }
  .modal .modal-footer {
    border-top: 1px solid var(--border-shell);
    padding: var(--gap-2) var(--gap-4);
    background: rgba(255, 255, 255, 0.03);
  }
  /* Suggestions modal – cards side by side, readable */
  #suggestionsModal .suggestions-grid,
  #suggestionsModal #suggestionCards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-3);
    margin: 0;
  }
  #suggestionsModal #suggestionCards > * {
    min-width: 0;
  }
  #suggestionsModal .suggestion-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--border-shell);
    border-radius: var(--r-sm);
    background: var(--shell-overlay);
    transition: border-color 0.14s ease, background 0.14s ease;
  }
  #suggestionsModal .suggestion-card:hover {
    border-color: rgba(255, 255, 255, 0.18);
    background: var(--shell-overlay-strong);
  }
  #suggestionsModal .suggestion-card .card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--gap-3);
    min-width: 0;
  }
  #suggestionsModal .suggestion-card .d-flex {
    display: flex;
    align-items: center;
    gap: var(--gap-2);
    margin-bottom: var(--gap-2);
  }
  #suggestionsModal .suggestion-card .suggestion-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--r-sm);
    background: rgba(47, 107, 255, 0.2);
    color: var(--accent);
    font-size: 1.25rem;
  }
  #suggestionsModal .suggestion-card .card-body h5 {
    margin: 0;
    font-size: 1rem;
    font-weight: 650;
    color: var(--text);
    line-height: 1.3;
  }
  #suggestionsModal .suggestion-card .card-text {
    margin: 0 0 var(--gap-2);
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.5;
    flex: 1;
  }
  #suggestionsModal .suggestion-card .btn-suggestion {
    margin-top: auto;
    padding: 8px var(--gap-2);
    font-size: 0.88rem;
    font-weight: 600;
    border-radius: var(--r-sm);
    border: 1px solid var(--border-shell);
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    transition: background 0.14s ease, transform 0.12s ease;
  }
  #suggestionsModal .suggestion-card .btn-suggestion:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
  }
  @media (max-width: 576px) {
    #suggestionsModal #suggestionCards {
      grid-template-columns: 1fr;
    }
  }
  .modal .table-wrapper {
    margin-top: 0;
    max-height: 60vh;
    overflow-y: auto;
  }
  .modal .table-main thead th {
    background: var(--shell-overlay);
  }
  .modal .btn-close,
  .modal .btn-close-white {
    filter: invert(1);
    opacity: 0.8;
  }

  /* --------------------------------------------------------------------------
     Tools pages – form inputs (compound, dividend goal)
     -------------------------------------------------------------------------- */
  .main-content .card .form-label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
  }
  .main-content .card .form-control,
  .main-content .card .form-select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border-radius: var(--r-sm);
    border: 1px solid var(--border-shell);
    background: var(--shell-overlay);
    color: var(--text);
    padding: 8px 10px;
    font-size: 0.88rem;
    outline: none;
    transition: border-color 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
  }
  .main-content .card .form-control:hover,
  .main-content .card .form-select:hover {
    border-color: rgba(255, 255, 255, 0.18);
  }
  .main-content .card .form-control:focus,
  .main-content .card .form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(47, 107, 255, 0.2);
    background: var(--shell-overlay-strong);
  }
  .main-content .card .form-control::placeholder {
    color: var(--text-muted);
  }
  .main-content .card .form-select option {
    background: var(--bg-shell-2);
    color: var(--text);
  }
  /* Form row: side-by-side inputs (e.g. two dropdowns in one row) */
  .main-content .card .form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--gap-2);
    align-items: end;
  }
  @media (max-width: 480px) {
    .main-content .card .form-row {
      grid-template-columns: 1fr;
    }
  }
  .main-content .card .input-group {
    display: flex;
    align-items: stretch;
    border-radius: var(--r-sm);
    overflow: hidden;
    border: 1px solid var(--border-shell);
    background: var(--shell-overlay);
  }
  .main-content .card .input-group .form-control {
    border: none;
    border-radius: 0;
    flex: 1;
    min-width: 0;
  }
  .main-content .card .input-group .input-group-text {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    font-size: 0.85rem;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.05);
    border: none;
    border-right: 1px solid var(--border-shell);
  }
  .main-content .card .form-range {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: var(--border-shell);
    accent-color: var(--accent);
    cursor: pointer;
  }
  .main-content .card .form-check-input {
    width: 1.1em;
    height: 1.1em;
    border: 1px solid var(--border-shell);
    border-radius: 4px;
    background: var(--shell-overlay);
    cursor: pointer;
    accent-color: var(--accent);
  }
  .main-content .card .form-check-label {
    margin-left: 8px;
    font-size: 0.9rem;
    color: var(--text);
    cursor: pointer;
  }

  /* --------------------------------------------------------------------------
     Tools pages – chart container (compound, dividend goal)
     -------------------------------------------------------------------------- */
  .main-content .chart-container {
    position: relative;
    width: 100%;
    min-height: 320px;
    height: 400px;
    margin-top: var(--gap-3);
    margin-bottom: var(--gap-4);
    padding: 0;
    box-sizing: border-box;
    flex-shrink: 0;
  }
  .main-content .chart-container canvas {
    display: block;
    width: 100% !important;
    max-width: 100%;
    height: 100% !important;
    max-height: 400px;
    box-sizing: border-box;
  }
  @media (max-width: 767.98px) {
    .main-content .chart-container {
      height: 320px;
      min-height: 280px;
      margin-bottom: var(--gap-3);
    }
    .main-content .chart-container canvas {
      max-height: 320px;
    }
  }
  @media (max-width: 575.98px) {
    .main-content .chart-container {
      height: 280px;
      min-height: 260px;
    }
    .main-content .chart-container canvas {
      max-height: 280px;
    }
  }

  /* Table info bar (e.g. "Showing X of Y" + "Page X of Y") */
  .table-info-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap-2);
    margin-bottom: var(--gap-2);
    color: var(--text-muted);
    font-size: 0.9rem;
  }
  .table-info-bar .table-info-left {
    margin: 0;
  }
  .table-info-bar .table-page-indicator {
    margin: 0;
  }

  /* Sort buttons row (e.g. "Sort by Years" / "Sort by Yield") */
  .table-sort-btns {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-1);
  }
  .table-sort-btn {
    border: 1px solid var(--border-shell);
    background: var(--shell-overlay);
    color: var(--text);
    padding: 8px var(--gap-2);
    border-radius: var(--r-sm);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease, transform 0.12s ease;
  }
  .table-sort-btn:hover {
    background: var(--shell-overlay-strong);
    border-color: var(--border-shell);
  }
  .table-sort-btn:active {
    transform: translateY(1px);
  }

  @media (max-width: 768px) {
    .table-controls {
      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
    .filter-dropdown-row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--gap-2);
    }
    .filter-dropdown-row.filter-row-2,
    .filter-dropdown-row.filter-row-3,
    .filter-dropdown-row.filter-row-4 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .filter-dropdown-row .filter-dropdown:nth-child(2) {
      overflow: visible;
    }
    .filter-dropdown-row .filter-dropdown:last-child {
      justify-self: stretch;
      min-width: 0;
    }
  }
  @media (max-width: 480px) {
    .filter-dropdown-row {
      grid-template-columns: 1fr;
    }
    .filter-dropdown-row.filter-row-2,
    .filter-dropdown-row.filter-row-3,
    .filter-dropdown-row.filter-row-4 {
      grid-template-columns: 1fr;
    }
  }
  @media (max-width: 1100px) {
    .table-controls {
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
  }
  
  /* --------------------------------------------------------------------------
     Timeline (reusable – .timeline-controls, .range-selector, .range-btn, .timeline-list, .timeline-item)
     -------------------------------------------------------------------------- */
  .timeline-controls {
    padding: var(--gap-2) 0;
    display: flex;
    justify-content: space-between;
    gap: var(--gap-2);
    flex-wrap: wrap;
    background: transparent;
  }
  
  .range-selector {
    display: flex;
    gap: var(--gap-1);
    flex-wrap: wrap;
  }
  
  .range-btn {
    border: 1px solid var(--border-shell);
    background: var(--shell-overlay);
    color: var(--text-muted);
    padding: 10px var(--gap-2);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
    font-size: 0.9rem;
  }
  .range-btn:hover {
    border-color: var(--border-shell);
    color: var(--text);
  }
  .range-btn.active {
    background: rgba(47, 107, 255, 0.18);
    border-color: var(--border-shell);
    color: var(--text);
  }
  
  .event-type-toggle {
    display: flex;
    gap: var(--gap-2);
    flex-wrap: wrap;
    align-items: center;
  }
  
  .toggle-label {
    display: inline-flex;
    gap: var(--gap-1);
    align-items: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    padding: 8px var(--gap-2);
    border-radius: 999px;
    border: 1px solid var(--border-shell);
    background: var(--shell-overlay);
  }
  .toggle-label input[type="checkbox"] {
    accent-color: var(--accent);
  }
  
  .timeline-list {
    margin-top: var(--gap-2);
    padding: var(--gap-2) 0;
    background: transparent;
  }
  
  .timeline-item,
  .timeline-card {
    border-bottom: 1px solid var(--border-shell);
    padding: var(--gap-2) 0;
    background: transparent;
  }
  .timeline-item:last-child,
  .timeline-card:last-child {
    border-bottom: none;
  }
  .timeline-item + .timeline-item,
  .timeline-card + .timeline-card {
    margin-top: 0;
  }
  
  /* Timeline day block (each date group) */
  .timeline-day {
    border-bottom: 1px solid var(--border-shell);
    padding: var(--gap-3) 0;
    background: transparent;
  }
  .timeline-day:last-child {
    border-bottom: none;
  }
  
  .timeline-date {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: var(--gap-2);
    letter-spacing: -0.01em;
  }
  
  .timeline-events {
    display: flex;
    flex-direction: column;
    gap: var(--gap-1);
  }
  
  /* Timeline event row (each stock) */
  .timeline-event {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-3);
    padding: var(--gap-2) var(--gap-3);
    border-radius: var(--r-sm);
    border: 1px solid var(--border-shell);
    background: var(--shell-overlay);
    transition: background 0.12s ease, border-color 0.12s ease;
  }
  .timeline-event:hover {
    background: var(--shell-overlay-strong);
    border-color: var(--border-shell);
  }
  
  .timeline-event .event-left {
    display: flex;
    align-items: center;
    gap: var(--gap-2);
    flex: 1;
    min-width: 0;
  }
  
  .timeline-event .event-type {
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }
  .timeline-event .event-type.ex-div {
    background: rgba(47, 107, 255, 0.18);
    color: var(--accent);
  }
  .timeline-event .event-type.pay-date {
    background: rgba(34, 197, 94, 0.18);
    color: var(--success);
  }
  .timeline-event .event-type.declaration {
    background: rgba(245, 158, 11, 0.18);
    color: var(--warning);
  }
  
  .timeline-event .event-details {
    min-width: 0;
  }
  
  .timeline-event .event-symbol-name {
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
  }
  
  .timeline-event .timeline-stock-link {
    color: var(--text);
    text-decoration: none;
  }
  .timeline-event .timeline-stock-link:hover {
    color: var(--accent);
    text-decoration: underline;
  }
  
  .timeline-event .event-symbol {
    font-weight: 700;
  }
  
  .timeline-event .event-sector {
    font-size: 0.8rem;
    color: var(--text-muted);
  }
  
  .timeline-event .event-right {
    flex-shrink: 0;
    text-align: right;
  }
  
  .timeline-event .event-amount {
    font-weight: 700;
    color: var(--text);
    font-size: 0.95rem;
  }
  
  .timeline-event .event-yield {
    font-size: 0.8rem;
    color: var(--text-muted);
  }
  
  .timeline-day .error-message {
    font-size: 0.9rem;
    color: var(--text-muted);
    padding: var(--gap-2) 0;
  }
  
  /* --------------------------------------------------------------------------
     Navbar (transparent, on-shell)
     -------------------------------------------------------------------------- */
  
  .navbar-wrapper{
    position: sticky;
    top: 0;
    z-index: 100;
    transition: background-color 0.25s ease, backdrop-filter 0.25s ease, box-shadow 0.25s ease;
  }
  
  .navbar-wrapper.navbar-scrolled{
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
  }
  
  .navbar{
    background: transparent;
    border-bottom: none;
  }
  
  .nav-inner{
    display: flex;
    align-items: center;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: var(--gap-2) var(--pad-x);
    width: 100%;
    box-sizing: border-box;
  }
  
  .nav-brand{
    flex-shrink: 0;
    font-weight: 850;
    font-size: 1.25rem;
    color: rgba(255,255,255,.9);
    text-decoration:none;
    letter-spacing: -0.02em;
    display: inline-flex;
    align-items: center;
  }
  .nav-brand:hover{ color: rgba(255,255,255,1); }
  .nav-brand .nav-brand-img{
    display: block;
    height: 44px;
    width: auto;
    object-fit: contain;
  }
  
  /* Left (brand) + primary nav block, then right (actions); no floating center */
  .nav-list{
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: var(--gap-3);
    min-width: 0;
  }
  
  .nav-menu{
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2px;
    align-items: center;
  }
  
  .nav-item{ position: relative; }
  
  .navbar .nav-link{
    color: rgba(255,255,255,.85);
    font-weight: 700;
    text-decoration:none;
    padding: var(--gap-1) var(--gap-2);
    border-radius: var(--r-sm);
    font-size: 0.95rem;
  }
  .navbar .nav-link:hover{
    color: rgba(255,255,255,1);
    background: rgba(255,255,255,.08);
  }
  
  .nav-actions{
    display: flex;
    align-items: center;
    gap: var(--gap-2);
    flex-shrink: 0;
  }
  
  /* Dropdowns (solid panel for readability) */
  .nav-dropdown{
    position:absolute;
    top: 100%;
    left: 0;
    min-width: 210px;
    background: rgba(15,23,42,.96);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-glass);
    list-style:none;
    margin: var(--gap-1) 0 0;
    padding: var(--gap-1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
  }
  
  .nav-item-dropdown:hover .nav-dropdown{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  
  .nav-dropdown a{
    display:block;
    padding: var(--gap-2) var(--gap-3);
    text-decoration:none;
    font-size: 0.95rem;
    border-radius: var(--r-sm);
    color: rgba(255,255,255,.88);
  }
  .nav-dropdown a:hover{
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,1);
  }
  
  /* User dropdown menu */
  .nav-user-dropdown {
    position: relative;
  }
  
  .nav-btn-user {
    cursor: pointer;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.88) !important;
    padding: 8px 16px !important;
    font-size: 0.95rem !important;
    border-radius: var(--r-md) !important;
    transition: all 0.2s ease !important;
  }
  
  .nav-btn-user:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 1) !important;
  }
  
  .nav-user-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    background: rgba(15, 23, 42, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-glass);
    list-style: none;
    margin: 0;
    padding: var(--gap-1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
    z-index: 1000;
  }
  
  .nav-user-menu.show,
  .nav-user-dropdown:hover .nav-user-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  
  .nav-user-menu a {
    display: block;
    padding: var(--gap-2) var(--gap-3);
    text-decoration: none;
    font-size: 0.95rem;
    border-radius: var(--r-sm);
    color: rgba(255, 255, 255, 0.88);
  }
  
  .nav-user-menu a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 1);
  }
  
  .nav-user-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
    margin: var(--gap-1) 0;
    list-style: none;
  }

  /* Navbar: hamburger (hidden on desktop) */
  .nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: var(--r-sm);
    background: transparent;
    color: rgba(255,255,255,.9);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-hamburger:hover {
    background: rgba(255,255,255,.08);
  }
  .nav-hamburger-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }
  .nav-hamburger.active .nav-hamburger-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav-hamburger.active .nav-hamburger-bar:nth-child(2) {
    opacity: 0;
  }
  .nav-hamburger.active .nav-hamburger-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Mobile menu overlay */
  .nav-mobile-overlay {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
  }
  .nav-mobile-overlay.active {
    opacity: 1;
    visibility: visible;
  }
  .nav-mobile-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: min(320px, 85vw);
    height: 100%;
    background: var(--bg-shell-2);
    border-left: 1px solid var(--border-shell);
    box-shadow: -10px 0 40px rgba(0,0,0,.3);
    padding: var(--gap-4);
    padding-top: 56px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.25s ease;
  }
  .nav-mobile-overlay.active .nav-mobile-panel {
    transform: translateX(0);
  }
  .nav-mobile-close {
    position: absolute;
    top: var(--gap-2);
    right: var(--gap-2);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: var(--r-sm);
    background: rgba(255,255,255,.06);
    color: var(--text);
    cursor: pointer;
    transition: background 0.2s ease;
  }
  .nav-mobile-close:hover {
    background: rgba(255,255,255,.1);
  }
  .nav-mobile-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .nav-mobile-link {
    display: flex;
    align-items: center;
    gap: var(--gap-2);
    padding: 14px var(--gap-2);
    border-radius: var(--r-sm);
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: background 0.2s ease, color 0.2s ease;
  }
  .nav-mobile-link:hover {
    background: rgba(255,255,255,.08);
    color: var(--text);
  }
  .nav-mobile-sublink {
    padding-left: var(--gap-4);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-muted);
  }
  .nav-mobile-sublink:hover {
    color: var(--text);
  }
  .nav-mobile-label {
    margin-top: var(--gap-3);
    margin-bottom: 4px;
    padding-left: var(--gap-2);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
  }
  .nav-mobile-label:first-of-type {
    margin-top: 0;
  }
  .nav-mobile-search-link {
    margin-top: var(--gap-2);
    background: rgba(47, 107, 255, 0.15);
    color: var(--accent);
  }
  .nav-mobile-search-link:hover {
    background: rgba(47, 107, 255, 0.25);
    color: var(--accent);
  }
  .nav-mobile-login {
    margin-top: var(--gap-3);
    justify-content: center;
  }

  /* Navbar mobile breakpoint */
  @media (max-width: 991px) {
    .nav-hamburger {
      display: flex;
    }
    .nav-list .nav-menu {
      display: none;
    }
    .nav-actions .btn-outline-secondary,
    .nav-actions .nav-user-dropdown {
      display: none;
    }
    .nav-inner {
      padding: var(--gap-2) var(--pad-x);
    }
    .nav-list {
      padding-left: 0;
      justify-content: flex-end;
    }
  }

  @media (min-width: 992px) {
    .nav-mobile-overlay {
      display: none;
    }
  }
  
  /* --------------------------------------------------------------------------
     Footer
     -------------------------------------------------------------------------- */
  
  .site-footer{
    background: transparent;
    border-top: 1px solid var(--border-shell);
    padding: var(--gap-4) 0;
    margin-top: auto;
  }
  
  .site-footer .container{ text-align:center; }
  .footer-tagline{ color: var(--text-muted); font-size: 0.95rem; margin: 0 0 var(--gap-2); }
  .disclaimer-text, .copyright{
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0;
  }
  
  /* Loader / Modal stays as you had (optional) */
  .page-loader{ display:none; }

  /* --------------------------------------------------------------------------
     Homepage layout (index – scoped so .main-content > .wrap only)
     -------------------------------------------------------------------------- */
  .main-content:has(> .wrap) { padding: 52px 0 86px; }

  .main-content > .wrap {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 18px;
  }

  .main-content > .wrap .section { padding: 40px 0; }
  .main-content > .wrap .section-header {
    max-width: 760px;
    margin: 0 auto 18px;
    text-align: center;
  }
  .main-content > .wrap .section-title {
    font-size: 22px;
    margin: 0 0 8px;
    letter-spacing: -0.01em;
  }
  .main-content > .wrap .section-intro { margin: 0; color: var(--text-muted); }
  .main-content > .wrap .section-actions {
    display: flex;
    justify-content: center;
    margin-top: 16px;
  }

  .main-content > .wrap .hero-centered .hero-head {
    text-align: center;
    max-width: 780px;
    margin: 0 auto 22px;
  }
  .main-content > .wrap .hero-title {
    font-size: clamp(34px, 4.2vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
  }
  .main-content > .wrap .hero-lead {
    font-size: 18px;
    color: var(--text-muted);
    margin: 0 auto 18px;
    max-width: 700px;
  }
  .main-content > .wrap .hero-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 10px;
  }
  .main-content > .wrap .hero-note {
    color: var(--text-muted);
    font-size: 13px;
    margin: 0;
  }

  .main-content > .wrap .grid { display: grid; gap: 14px; }
  .main-content > .wrap .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .main-content > .wrap .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  @media (max-width: 900px) {
    .main-content > .wrap .grid-3 { grid-template-columns: 1fr; }
  }
  @media (max-width: 860px) {
    .main-content > .wrap .grid-2 { grid-template-columns: 1fr; }
  }

  /* Dividend score cards */
  .main-content > .wrap #scores .card-surface {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .main-content > .wrap #scores .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .main-content > .wrap .card-surface {
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    box-shadow: 0 14px 40px rgba(0,0,0,.28);
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(12px);
  }
  .main-content > .wrap .card-snapshot { max-width: 880px; margin: 0 auto; }
  .main-content > .wrap .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
  }
  .main-content > .wrap .card-body { padding: 16px; }
  .main-content > .wrap .card-title {
    margin: 0 0 8px;
    font-size: 16px;
    color: rgba(255,255,255,.95);
  }
  .main-content > .wrap .card-text { margin: 0; color: rgba(255,255,255,.68); }
  .main-content > .wrap .card-note {
    margin: 10px 0 0;
    color: rgba(255,255,255,.68);
    font-size: 13px;
  }
  .main-content > .wrap .card-link {
    text-decoration: none;
    color: inherit;
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
  }
  .main-content > .wrap .card-link:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,.09);
    border-color: rgba(255,255,255,.18);
  }

  .main-content > .wrap .snapshot-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
  @media (max-width: 900px) {
    .main-content > .wrap .snapshot-grid { grid-template-columns: 1fr; }
  }
  .main-content > .wrap .snapshot-label { font-size: 12px; color: var(--text-muted); }
  .main-content > .wrap .snapshot-value { font-size: 16px; font-weight: 600; margin-top: 4px; }

  .main-content > .wrap .pill {
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    color: rgba(255,255,255,.9);
    background: rgba(255,255,255,.08);
  }
  .main-content > .wrap .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }
  .main-content > .wrap .progress {
    height: 10px;
    background: rgba(255,255,255,.15);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 10px;
  }
  .main-content > .wrap .progress-sm { height: 8px; }
  .main-content > .wrap .progress-bar {
    height: 100%;
    width: var(--width, 0%);
    background: var(--accent);
    border-radius: 999px;
  }
  .main-content > .wrap .btn-ghost {
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.95);
  }
  .main-content > .wrap .btn-ghost:hover {
    background: rgba(255,255,255,.09);
    border-color: rgba(255,255,255,.18);
    color: rgba(255,255,255,.95);
  }
  /* Legacy score classes */
  .main-content > .wrap .score-high { color: var(--success); }
  .main-content > .wrap .score-mid { color: var(--warning); }
  .main-content > .wrap .score-low { color: var(--danger); }
  
  /* Grade-based score colors */
  .main-content > .wrap .grade-a-plus,
  .main-content > .wrap .grade-aplus { color: #10B981; }
  .main-content > .wrap .grade-a { color: #22C55E; }
  .main-content > .wrap .grade-b { color: #84CC16; }
  .main-content > .wrap .grade-c { color: #F59E0B; }
  .main-content > .wrap .grade-d { color: #F97316; }
  .main-content > .wrap .grade-f { color: #EF4444; }
  .main-content > .wrap .card-highlight {
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    box-shadow: 0 14px 40px rgba(0,0,0,.28);
    backdrop-filter: blur(12px);
  }
  .main-content > .wrap .card-highlight-inner {
    padding: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }
  @media (max-width: 860px) {
    .main-content > .wrap .card-highlight-inner {
      flex-direction: column;
      align-items: stretch;
      text-align: center;
    }
  }
  .main-content > .wrap .card-highlight-title {
    margin: 0 0 6px;
    font-size: 20px;
    letter-spacing: -0.01em;
    color: rgba(255,255,255,.95);
  }
  .main-content > .wrap .card-highlight-text { margin: 0; color: rgba(255,255,255,.68); }

  /* Index mobile responsive */
  @media (max-width: 768px) {
    .main-content:has(> .wrap) {
      padding: 24px 0 48px;
    }
    .main-content > .wrap {
      padding: 0 16px;
      max-width: 100%;
    }
    .main-content > .wrap .section {
      padding: 28px 0;
    }
    .main-content > .wrap .section-header {
      margin-bottom: 16px;
      padding: 0 4px;
    }
    .main-content > .wrap .section-title {
      font-size: 1.35rem;
      margin-bottom: 6px;
    }
    .main-content > .wrap .section-intro {
      font-size: 0.9rem;
      line-height: 1.5;
    }
    .main-content > .wrap .hero-centered .hero-head {
      margin-bottom: 20px;
    }
    .main-content > .wrap .hero-title {
      font-size: clamp(1.6rem, 6vw, 2rem);
      line-height: 1.15;
      margin-bottom: 10px;
    }
    .main-content > .wrap .hero-lead {
      font-size: 0.95rem;
      margin: 0 auto 16px;
      line-height: 1.5;
    }
    .main-content > .wrap .hero-actions {
      flex-direction: column;
      gap: 10px;
      width: 100%;
      max-width: 280px;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 12px;
    }
    .main-content > .wrap .hero-actions .btn {
      width: 100%;
      justify-content: center;
    }
    .main-content > .wrap .grid {
      gap: 12px;
    }
    .main-content > .wrap .grid-2,
    .main-content > .wrap .grid-3 {
      grid-template-columns: 1fr;
    }
    .main-content > .wrap .card-body {
      padding: 14px;
    }
    .main-content > .wrap .card-title {
      font-size: 1rem;
    }
    .main-content > .wrap .card-text {
      font-size: 0.88rem;
    }
    .main-content > .wrap .section-actions {
      margin-top: 12px;
    }
    .main-content > .wrap #scores .card-body {
      padding: 14px;
    }
    .main-content > .wrap #scores .card-surface .row {
      flex-wrap: wrap;
    }
  }

  @media (max-width: 480px) {
    .main-content:has(> .wrap) {
      padding: 16px 0 40px;
    }
    .main-content > .wrap {
      padding: 0 12px;
    }
    .main-content > .wrap .section {
      padding: 22px 0;
    }
    .main-content > .wrap .section-title {
      font-size: 1.2rem;
    }
    .main-content > .wrap .hero-title {
      font-size: 1.5rem;
    }
    .main-content > .wrap .hero-lead {
      font-size: 0.9rem;
    }
    .main-content > .wrap .hero-actions {
      max-width: 100%;
    }
    .main-content > .wrap .card-body {
      padding: 12px;
    }
    .main-content > .wrap #scores .score-card-header {
      flex-direction: column;
      align-items: flex-start;
    }
    .main-content > .wrap #scores .score-card-metrics {
      grid-template-columns: 1fr 1fr;
      gap: 6px;
      padding-top: 10px;
    }
  }

  /* Footer mobile */
  @media (max-width: 768px) {
    .site-footer {
      padding: var(--gap-3) 0;
    }
    .site-footer .container {
      padding: 0 var(--pad-x);
    }
    .footer-tagline {
      font-size: 0.9rem;
    }
    .disclaimer-text,
    .copyright {
      font-size: 0.78rem;
    }
  }

  /* --------------------------------------------------------------------------
     Stock search modal – matches style.css design system (shell, overlay, accent)
     -------------------------------------------------------------------------- */
  #stockSearchModal.ssm-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: var(--gap-4);
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }
  #stockSearchModal.ssm-overlay.active {
    display: flex;
    opacity: 1;
    visibility: visible;
  }

  #stockSearchModal .ssm-container {
    width: min(900px, calc(100vw - 2 * var(--gap-4)));
    max-height: calc(100vh - 2 * var(--gap-4));
    display: flex;
    flex-direction: column;
    background: rgba(4, 18, 32, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-shell);
    border-radius: var(--r-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
    overflow: hidden;
  }

  #stockSearchModal .ssm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--gap-4) var(--gap-5);
    border-bottom: 1px solid var(--border-shell);
    background: rgba(255, 255, 255, 0.02);
    flex-shrink: 0;
  }
  #stockSearchModal .ssm-header-left {
    display: flex;
    align-items: center;
    gap: var(--gap-3);
  }
  #stockSearchModal .ssm-icon {
    width: 24px;
    height: 24px;
    color: var(--accent);
  }
  #stockSearchModal .ssm-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 750;
    color: var(--text);
    letter-spacing: -0.02em;
  }
  #stockSearchModal .ssm-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, transform 0.12s ease;
  }
  #stockSearchModal .ssm-close:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--border-shell);
    color: var(--text);
  }
  #stockSearchModal .ssm-close:active {
    transform: scale(0.95);
  }
  #stockSearchModal .ssm-close svg {
    width: 22px;
    height: 22px;
  }

  #stockSearchModal .ssm-search-wrapper {
    padding: var(--gap-4) var(--gap-5);
    border-bottom: 1px solid var(--border-shell);
    background: transparent;
    flex-shrink: 0;
  }
  #stockSearchModal .ssm-search-box {
    display: flex;
    align-items: center;
    gap: var(--gap-3);
    padding: 14px var(--gap-4);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border-shell);
    border-radius: var(--r-md);
    transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
  }
  #stockSearchModal .ssm-search-box:focus-within {
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.09);
    box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.15);
  }
  #stockSearchModal .ssm-search-icon {
    width: 20px;
    height: 20px;
    color: var(--text-muted);
    flex-shrink: 0;
  }
  #stockSearchModal .ssm-search-input {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 1rem;
    font-family: inherit;
  }
  #stockSearchModal .ssm-search-input::placeholder {
    color: var(--text-muted);
  }
  #stockSearchModal .ssm-search-input:focus {
    outline: none;
  }
  #stockSearchModal .ssm-count {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent);
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(47, 107, 255, 0.18);
  }
  #stockSearchModal .ssm-clear-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
  }
  #stockSearchModal .ssm-clear-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--border-shell);
    color: var(--text);
  }
  #stockSearchModal .ssm-clear-btn svg {
    width: 18px;
    height: 18px;
  }

  #stockSearchModal .ssm-type-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-2);
    margin-top: var(--gap-3);
  }
  #stockSearchModal .ssm-pill {
    padding: 10px var(--gap-3);
    border: 1px solid var(--border-shell);
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, transform 0.12s ease;
  }
  #stockSearchModal .ssm-pill:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--text);
    transform: translateY(-1px);
  }
  #stockSearchModal .ssm-pill.active {
    border-color: var(--accent);
    background: rgba(47, 107, 255, 0.18);
    color: var(--accent);
  }
  #stockSearchModal .ssm-pill:active {
    transform: translateY(0);
  }

  #stockSearchModal .ssm-filters-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-2);
    margin-top: var(--gap-3);
    padding: 10px var(--gap-3);
    border: 1px solid var(--border-shell);
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, transform 0.12s ease;
  }
  #stockSearchModal .ssm-filters-toggle:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--text);
    transform: translateY(-1px);
  }
  #stockSearchModal .ssm-filters-toggle:active {
    transform: translateY(0);
  }
  #stockSearchModal .ssm-filters-toggle svg:first-of-type {
    width: 18px;
    height: 18px;
  }
  #stockSearchModal .ssm-chevron {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
  }
  #stockSearchModal .ssm-filters-toggle.active .ssm-chevron {
    transform: rotate(180deg);
  }
  #stockSearchModal .ssm-filters-panel {
    margin-top: var(--gap-2);
    padding: var(--gap-3);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border-shell);
    border-radius: var(--r-md);
    display: none;
  }
  #stockSearchModal .ssm-filters-panel.expanded {
    display: block;
  }
  #stockSearchModal .ssm-filter-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-2);
    margin-bottom: var(--gap-2);
  }
  #stockSearchModal .ssm-filter-group {
    min-width: 0;
  }
  #stockSearchModal .ssm-filter-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 650;
    color: var(--text-muted);
    margin-bottom: 4px;
  }
  #stockSearchModal .ssm-select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border-shell);
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.14s ease, background 0.14s ease;
  }
  #stockSearchModal .ssm-select:hover {
    border-color: rgba(255, 255, 255, 0.18);
  }
  #stockSearchModal .ssm-select:focus {
    outline: none;
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.10);
  }
  #stockSearchModal .ssm-select option {
    background: var(--bg-shell-2);
    color: var(--text);
  }
  #stockSearchModal .ssm-clear-filters {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-2);
    padding: 10px var(--gap-3);
    border: 1px solid var(--border-shell);
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.14s ease, background 0.14s ease, border-color 0.14s ease;
  }
  #stockSearchModal .ssm-clear-filters:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.18);
  }
  #stockSearchModal .ssm-clear-filters svg {
    width: 16px;
    height: 16px;
  }

  #stockSearchModal .ssm-results {
    flex: 1;
    min-height: 280px;
    max-height: 520px;
    overflow-y: auto;
    padding: var(--gap-3) var(--gap-4);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
  }
  #stockSearchModal .ssm-results::-webkit-scrollbar {
    width: 8px;
  }
  #stockSearchModal .ssm-results::-webkit-scrollbar-track {
    background: transparent;
  }
  #stockSearchModal .ssm-results::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
  }
  #stockSearchModal .ssm-results::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.24);
  }
  #stockSearchModal .ssm-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-4);
    padding: var(--gap-3) var(--gap-4);
    margin-bottom: var(--gap-2);
    border-radius: var(--r-md);
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease, transform 0.12s ease;
  }
  #stockSearchModal .ssm-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--border-shell);
    transform: translateX(4px);
  }
  #stockSearchModal .ssm-item:active {
    transform: translateX(2px);
  }
  #stockSearchModal .ssm-item-main {
    flex: 1;
    min-width: 0;
  }
  #stockSearchModal .ssm-item-header {
    display: flex;
    align-items: center;
    gap: var(--gap-2);
    margin-bottom: 4px;
  }
  #stockSearchModal .ssm-item-ticker {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text);
    letter-spacing: -0.01em;
  }
  #stockSearchModal .ssm-item-badge {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-muted);
  }
  #stockSearchModal .ssm-item-badge.stock { 
    background: rgba(47, 107, 255, 0.22); 
    color: var(--accent); 
  }
  #stockSearchModal .ssm-item-badge.etf { 
    background: rgba(13, 148, 136, 0.22); 
    color: var(--premium); 
  }
  #stockSearchModal .ssm-item-badge.mutual-fund { 
    background: rgba(255,255,255,.12); 
    color: var(--text-muted); 
  }
  #stockSearchModal .ssm-item-name {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
  }
  #stockSearchModal .ssm-item-meta {
    font-size: 0.82rem;
    color: var(--text-soft);
    display: flex;
    align-items: center;
    gap: var(--gap-2);
    flex-wrap: wrap;
  }
  #stockSearchModal .ssm-item-exchange {
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    font-weight: 600;
  }
  #stockSearchModal .ssm-item-isin {
    opacity: 0.8;
  }
  #stockSearchModal .ssm-item-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
  }
  #stockSearchModal .ssm-item-value {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text);
  }
  #stockSearchModal .ssm-item-change {
    font-size: 0.85rem;
    font-weight: 600;
  }
  #stockSearchModal .ssm-item-change.up { color: var(--success); }
  #stockSearchModal .ssm-item-change.down { color: var(--danger); }
  #stockSearchModal .ssm-item-change.flat { color: var(--text-muted); }
  #stockSearchModal .ssm-item-arrow { margin-right: 2px; }

  #stockSearchModal .ssm-loading,
  #stockSearchModal .ssm-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--gap-5) var(--gap-4);
    min-height: 280px;
    color: var(--text-muted);
    text-align: center;
  }
  #stockSearchModal .ssm-loading p,
  #stockSearchModal .ssm-empty h3 {
    margin: 0 0 var(--gap-2);
    font-size: 1.05rem;
    font-weight: 650;
    color: var(--text);
    letter-spacing: -0.01em;
  }
  #stockSearchModal .ssm-empty p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.5;
  }
  #stockSearchModal .ssm-empty-icon {
    width: 56px;
    height: 56px;
    margin-bottom: var(--gap-3);
    color: var(--text-muted);
    opacity: 0.6;
  }
  #stockSearchModal .ssm-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 255, 255, 0.12);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: ssm-spin 0.7s linear infinite;
    margin-bottom: var(--gap-3);
  }
  @keyframes ssm-spin {
    to { transform: rotate(360deg); }
  }
  #stockSearchModal .ssm-progress {
    padding: var(--gap-3) var(--gap-4);
    text-align: center;
  }
  #stockSearchModal .ssm-progress-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: var(--gap-2);
  }
  #stockSearchModal .ssm-progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--accent), var(--accent-hover));
    border-radius: 999px;
    transition: width 0.2s ease;
  }
  #stockSearchModal .ssm-progress-text {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
  }
  #stockSearchModal .ssm-loading-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-2);
    padding: var(--gap-3);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-muted);
  }
  #stockSearchModal .ssm-loading-more .ssm-spinner {
    width: 22px;
    height: 22px;
    margin-bottom: 0;
  }

  /* Mobile responsive adjustments for stock search modal */
  @media (max-width: 768px) {
    #stockSearchModal .ssm-container {
      width: calc(100vw - var(--gap-3) * 2);
      max-height: calc(100vh - var(--gap-3) * 2);
      border-radius: var(--r-md);
    }
    #stockSearchModal .ssm-header {
      padding: var(--gap-3) var(--gap-4);
    }
    #stockSearchModal .ssm-title {
      font-size: 1.2rem;
    }
    #stockSearchModal .ssm-search-wrapper {
      padding: var(--gap-3) var(--gap-4);
    }
    #stockSearchModal .ssm-search-box {
      padding: 12px var(--gap-3);
    }
    #stockSearchModal .ssm-results {
      padding: var(--gap-2) var(--gap-3);
      max-height: 420px;
    }
    #stockSearchModal .ssm-item {
      padding: var(--gap-2) var(--gap-3);
      gap: var(--gap-3);
    }
    #stockSearchModal .ssm-item:hover {
      transform: translateX(2px);
    }
    #stockSearchModal .ssm-item-ticker {
      font-size: 1rem;
    }
    #stockSearchModal .ssm-filter-row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--gap-2);
    }
    #stockSearchModal .ssm-filter-group {
      min-width: 0;
    }
  }
  @media (max-width: 400px) {
    #stockSearchModal .ssm-filter-row {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 480px) {
    #stockSearchModal.ssm-overlay {
      padding: var(--gap-2);
    }
    #stockSearchModal .ssm-container {
      width: 100%;
      max-height: 100vh;
      border-radius: var(--r-sm);
    }
    #stockSearchModal .ssm-header {
      padding: var(--gap-2) var(--gap-3);
    }
    #stockSearchModal .ssm-title {
      font-size: 1.1rem;
    }
    #stockSearchModal .ssm-search-wrapper {
      padding: var(--gap-2) var(--gap-3);
    }
    #stockSearchModal .ssm-results {
      padding: var(--gap-2);
      max-height: 360px;
    }
    #stockSearchModal .ssm-item {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--gap-2);
    }
    #stockSearchModal .ssm-item-meta {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--gap-1);
    }
  }

  /* --------------------------------------------------------------------------
     AI chatbot button – always visible bottom-right (flowise.js)
     -------------------------------------------------------------------------- */
  #fwc-button.fwc-button,
  button.fwc-button {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    bottom: 22px !important;
    right: 22px !important;
    z-index: 9999 !important;
  }

/* ============================================
   STOCK PAGE - TABS SYSTEM
   Dark theme, fully transparent
   ============================================ */

/* Main tabs navigation */
.stock-main-tabs {
    border: none;
    border-bottom: 1px solid var(--border-shell);
    margin-bottom: var(--gap-4);
    gap: 0;
    background: transparent !important;
}

.stock-main-tabs .nav-item {
    margin: 0;
}

/* Main tab buttons - transparent dark theme */
.stock-tab-link {
    position: relative;
    color: var(--text-muted);
    background: transparent !important;
    border: none !important;
    padding: var(--gap-3) var(--gap-4);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    transition: all 0.25s ease;
    border-radius: 0;
}

/* Hover state - subtle */
.stock-tab-link:hover {
    color: var(--text-soft);
    background: transparent !important;
}

/* Active tab - transparent avec ligne accent, texte blanc forcé */
.stock-tab-link.active,
.stock-main-tabs .nav-link.active {
    color: #fff !important;
    background: transparent !important;
    border: none !important;
}

.stock-tab-link.active i,
.stock-main-tabs .nav-link.active i {
    color: #fff !important;
    opacity: 1;
}

.stock-tab-link.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: var(--gap-3);
    right: var(--gap-3);
    height: 2px;
    background: var(--accent);
    border-radius: var(--r-sm) var(--r-sm) 0 0;
    box-shadow: 0 0 12px rgba(47, 107, 255, 0.4);
}

/* Icon spacing */
.stock-tab-link i {
    margin-right: var(--gap-1);
    font-size: 1em;
    opacity: 0.75;
}

/* Tab content */
.stock-main-tab-content {
    padding: var(--gap-4) 0 0;
}

.stock-main-tab-content .tab-pane {
    animation: tabFadeIn 0.3s ease;
}

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

/* Sub-tabs (Income Statement, Balance Sheet, Cash Flow) */
.stock-sub-tabs {
    border: none;
    border-bottom: 1px solid var(--border-shell);
    margin-bottom: var(--gap-3);
    gap: 0;
    background: transparent !important;
}

.stock-sub-tabs .nav-link {
    position: relative;
    color: var(--text-muted);
    background: transparent !important;
    border: none !important;
    padding: var(--gap-2) var(--gap-3);
    font-size: 0.875rem;
    font-weight: 400;
    transition: all 0.2s ease;
    border-radius: 0;
}

.stock-sub-tabs .nav-link:hover {
    color: var(--text-soft);
    background: transparent !important;
}

.stock-sub-tabs .nav-link.active,
.stock-sub-tabs .nav-link.active i {
    color: #fff !important;
    background: transparent !important;
    border: none !important;
}

.stock-sub-tabs .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: var(--gap-2);
    right: var(--gap-2);
    height: 2px;
    background: var(--accent);
    border-radius: var(--r-sm) var(--r-sm) 0 0;
}

.stock-sub-tabs .nav-link i {
    margin-right: var(--gap-1);
    font-size: 0.875em;
    opacity: 0.7;
}

.stock-sub-tabs .nav-link.active i {
    opacity: 1;
}

/* Responsive: Hide on mobile, show on desktop */
.d-none.d-md-block {
    display: none;
}

@media (min-width: 768px) {
    .d-none.d-md-block {
        display: block !important;
    }
}

/* Responsive: Show on mobile, hide on desktop */
.d-block.d-md-none {
    display: block;
}

@media (min-width: 768px) {
    .d-block.d-md-none {
        display: none !important;
    }
}

/* Overall Score Card Hover (used in Dividends tab) */
.dividend-overall-score-card:hover {
    border-color: rgba(102, 179, 255, 0.4) !important;
    box-shadow: 0 8px 24px rgba(102, 179, 255, 0.2);
}

/* ============================================
   STOCK PAGE - CHART LEGEND & FILTER BUTTONS
   ============================================ */

/* Chart bottom row: legend right, filter buttons left */
.chart-bottom-controls {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
}

/* Chart filter buttons (Yield, Markers) */
.chart-filter-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.chart-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chart-filter-btn:hover {
    color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(102, 179, 255, 0.3);
}

.chart-filter-btn.active {
    color: #66b3ff;
    background: rgba(102, 179, 255, 0.12);
    border-color: rgba(102, 179, 255, 0.4);
}

.chart-filter-btn i {
    font-size: 0.875rem;
}

/* Chart legend – bottom right of card */
.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: flex-end;
}

.chart-legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.chart-legend-dash {
    width: 20px;
    height: 2px;
    display: inline-block;
    flex-shrink: 0;
}

.chart-legend-dash.chart-legend-price {
    background: #22c55e;
}

.chart-legend-dash.chart-legend-yield {
    background: #4CAF50;
}

.chart-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.chart-legend-dot.chart-legend-payment {
    background: #FFB74D;
}

.chart-legend-label {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Chart period buttons (1M, 3M, 1Y, etc.) - reduced size */
.chart-period-filters .chart-period-btn,
.chart-period-filters .period-btn-professional {
    min-width: 36px;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.chart-period-btn.active,
.period-btn-professional.active {
    background: rgba(47, 107, 255, 0.15);
    border-color: var(--accent);
    color: var(--accent);
}

/* Chart canvas wrapper + price/change overlay (top-left) */
.chart-canvas-wrapper {
    position: relative;
    height: 400px;
}

.chart-canvas-wrapper canvas {
    display: block;
}

.chart-price-overlay {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    pointer-events: none;
}

.chart-price-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
}

.chart-change-value {
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.3;
}

/* ============================================
   CHART INFO OVERLAY - PRICE & YIELD
   ============================================ */

.chart-info-overlay {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

/* Price Micro Card - No background */
.chart-price-micro-card {
    background: transparent;
    border: none;
    padding: 0;
}

.chart-current-price {
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 0.25rem;
}

.chart-price-change {
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.chart-price-change .change-value {
    color: rgba(255, 255, 255, 0.7);
}

.chart-price-change .change-percent {
    color: rgba(255, 255, 255, 0.7);
}

.chart-price-change.positive .change-value,
.chart-price-change.positive .change-percent {
    color: #22c55e;
}

.chart-price-change.negative .change-value,
.chart-price-change.negative .change-percent {
    color: #ef4444;
}

/* Yield Badge - Very subtle and compact */
.chart-yield-badge {
    background: rgba(20, 30, 45, 0.65);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 0.375rem 0.625rem;
    text-align: center;
    min-width: 60px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.chart-yield-badge .yield-label {
    font-size: 0.5625rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.0625rem;
}

.chart-yield-badge .yield-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.2;
}

/* ============================================
   STOCK PAGE - OVERVIEW TAB LAYOUT
   Equal height sidebar and chart cards
   ============================================ */

.stock-overview-row {
    display: flex;
    flex-wrap: wrap;
}

.stock-overview-row > [class*='col-'] {
    display: flex;
    flex-direction: column;
}

.stock-overview-row .card,
.stock-overview-row .card-surface {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.stock-overview-row .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Dividend chart tooltip – matches site card styling (style.css vars) */
.dividend-axis-tooltip {
    min-width: 200px;
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.5;
    border-radius: var(--r-md);
    border: 1px solid var(--border-shell);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: var(--shadow-card);
    color: var(--text);
}
.dividend-axis-tooltip .dividend-tooltip-title {
    font-weight: 700;
    color: var(--warning);
    margin-bottom: 8px;
    font-size: 14px;
}
.dividend-axis-tooltip .dividend-tooltip-row {
    margin-bottom: 4px;
    color: var(--text-muted);
}
.dividend-axis-tooltip .dividend-tooltip-row:last-child {
    margin-bottom: 0;
}
.dividend-axis-tooltip .dividend-tooltip-row strong {
    color: var(--text);
}