:root {
      --navy:          #0a1628;
      --navy-mid:      #122040;
      --navy-card:     #0f1e3a;
      --accent:        #2a5caa;
      --accent-bright: #4a8cff;
      --white:         #ffffff;
      --offwhite:      #e8edf8;
      --gray:          #8a9bbf;
      --border:        rgba(74,140,255,0.15);
      --c1: #4a8cff;
      --c2: #4affb4;
      --c3: #a56cff;
      --c4: #ffaa3c;
      --c5: #ff5c72;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'DM Sans', sans-serif;
      background: var(--navy);
      color: var(--white);
      min-height: 100vh;
    }

    /* ── NAV ── */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 5%; height: 68px;
      background: rgba(10,22,40,0.92);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--border);
    }
    .logo { font-family:'Cormorant Garamond',serif; font-size:1.6rem; font-weight:700; color:var(--white); text-decoration:none; }
    .logo span { color: var(--accent-bright); }
    .nav-links { display:flex; gap:10px; list-style:none; }
    .nav-links a { text-decoration:none; font-size:0.82rem; font-weight:500; letter-spacing:0.06em; text-transform:uppercase; padding:8px 20px; border-radius:40px; transition:all 0.3s; }
    .nav-links a.home-btn { color:var(--white); border:1px solid rgba(255,255,255,0.22); }
    .nav-links a.home-btn:hover { border-color:var(--accent-bright); color:var(--accent-bright); }
    .nav-links a.login-btn { background:var(--accent); color:var(--white); border:1px solid var(--accent); }
    .nav-links a.login-btn:hover { background:var(--accent-bright); box-shadow:0 0 16px rgba(74,140,255,0.5); }

    /* ── MAIN ── */
    .main { max-width:1420px; margin:0 auto; padding:90px 3.5% 60px; }

    /* ── PAGE HEADER ── */
    .page-header {
      display:flex; align-items:flex-end; justify-content:space-between;
      margin-bottom:28px; padding-bottom:20px;
      border-bottom:1px solid var(--border);
      flex-wrap:wrap; gap:14px;
    }
    .page-header h1 { font-family:'Cormorant Garamond',serif; font-size:2.2rem; font-weight:700; }
    .page-header h1 span { color:var(--accent-bright); }
    .page-header p { color:var(--gray); font-size:0.88rem; margin-top:4px; }
    .header-right { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

    /* Controls */
    .filter-select, .date-input {
      background:var(--navy-card); border:1px solid var(--border); border-radius:8px;
      padding:9px 14px; color:var(--white); font-family:'DM Sans',sans-serif;
      font-size:0.83rem; outline:none; transition:border-color 0.3s; cursor:pointer;
      color-scheme:dark;
      appearance:none; padding-right:28px;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%238a9bbf' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
      background-repeat:no-repeat; background-position:right 10px center;
    }
    .date-input { padding-right:14px; background-image:none; }
    .filter-select:focus, .date-input:focus { border-color:var(--accent-bright); }

    .control-label { font-size:0.75rem; color:var(--gray); white-space:nowrap; }

    /* ── LEGEND ── */
    .legend {
      display:flex; gap:20px; flex-wrap:wrap;
      margin-bottom:24px; padding:14px 20px;
      background:var(--navy-card); border:1px solid var(--border); border-radius:10px;
    }
    .legend-item {
      display:flex; align-items:center; gap:8px;
      font-size:0.82rem; cursor:pointer; user-select:none;
      transition:opacity 0.2s;
    }
    .legend-item.hidden { opacity:0.3; }
    .legend-dot { width:12px; height:12px; border-radius:3px; flex-shrink:0; }
    .legend-item span { color:var(--offwhite); }

    /* ── CHART CARDS ── */
    @keyframes fadeUp {
      from { opacity:0; transform:translateY(18px); }
      to   { opacity:1; transform:translateY(0); }
    }

    .chart-card {
      background:var(--navy-card);
      border:1px solid var(--border);
      border-radius:12px;
      overflow:hidden;
      animation:fadeUp 0.6s ease both;
      position:relative;
    }
    .chart-card-header {
      display:flex; align-items:center; justify-content:space-between;
      padding:18px 22px 14px;
      border-bottom:1px solid var(--border);
    }
    .chart-card-header h3 {
      font-family:'Cormorant Garamond',serif;
      font-size:1.15rem; font-weight:700;
    }
    .chart-card-header h3 span { color:var(--accent-bright); }
    .chart-type-tag {
      font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase;
      color:var(--gray); background:rgba(74,140,255,0.08);
      border:1px solid var(--border); padding:4px 10px; border-radius:20px;
    }
    .chart-body { padding:20px 18px 16px; position:relative; }

    /* Grid layout */
    .grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; }
    .grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; margin-bottom:20px; }
    .grid-1 { margin-bottom:20px; }

    @media (max-width:1100px) { .grid-3 { grid-template-columns:1fr 1fr; } }
    @media (max-width:800px)  { .grid-2,.grid-3 { grid-template-columns:1fr; } }

    /* Canvas */
    canvas { display:block; width:100%; cursor:crosshair; }

    /* Tooltip */
    #tooltip {
      position:fixed; z-index:999;
      background:rgba(12,26,54,0.96);
      border:1px solid rgba(74,140,255,0.35);
      border-radius:8px; padding:10px 14px;
      font-size:0.8rem; pointer-events:none;
      display:none; min-width:160px;
      box-shadow:0 8px 32px rgba(0,0,0,0.4);
    }
    #tooltip .tt-date { color:var(--gray); font-size:0.72rem; margin-bottom:6px; letter-spacing:0.06em; }
    #tooltip .tt-row { display:flex; align-items:center; gap:7px; margin-bottom:3px; }
    #tooltip .tt-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
    #tooltip .tt-label { color:var(--gray); flex:1; }
    #tooltip .tt-val { color:var(--white); font-weight:500; }

    /* Stats mini-table */
    .stats-table { width:100%; border-collapse:collapse; }
    .stats-table th {
      text-align:left; font-size:0.7rem; letter-spacing:0.12em;
      text-transform:uppercase; color:var(--gray); font-weight:500;
      padding:10px 14px; border-bottom:1px solid var(--border);
    }
    .stats-table td {
      padding:11px 14px; font-size:0.86rem;
      border-bottom:1px solid rgba(74,140,255,0.06);
    }
    .stats-table tr:last-child td { border-bottom:none; }
    .stats-table tr:hover td { background:rgba(74,140,255,0.05); }
    .field-chip {
      display:inline-flex; align-items:center; gap:6px;
      font-size:0.82rem; font-weight:500;
    }
    .field-chip .chip-dot { width:9px; height:9px; border-radius:50%; }
    .trend-up   { color:#4affb4; }
    .trend-down { color:#ff5c72; }
    .trend-flat { color:var(--gray); }