/* ── Page base ── */
    body { font-family: 'Poppins', sans-serif; }

    /* ── Header (matches site) ── */
    header {
      background: linear-gradient(90deg, #0d47a1, #1976d2);
      color: #fff; padding: 18px 20px;
      display: flex; justify-content: space-between; align-items: center;
      box-shadow: 0 4px 8px rgba(0,0,0,0.15);
      position: sticky; top: 0; z-index: 100;
    }
    header h1 { margin:0; font-size:2rem; font-family:'Playfair Display',serif; font-weight:700; white-space:nowrap; }
    .logo { color:#fff; text-decoration:none; }
    nav ul { list-style:none; margin:0; padding:0; display:flex; gap:24px; align-items:center; }
    nav ul li a { text-decoration:none; color:#fff; font-weight:600; font-size:1.05em; }
    nav ul li a:hover { opacity:0.85; }
    .theme-toggle {
      background:transparent; border:1.5px solid rgba(255,255,255,0.5);
      border-radius:20px; cursor:pointer; font-size:16px; padding:4px 10px; color:#fff;
    }
    .theme-toggle:hover { background:rgba(255,255,255,0.15); }

    /* ── Dark mode ── */
    [data-theme="dark"] body { background:#121212; color:#e0e0e0; }
    [data-theme="dark"] .top-card { background:#1e1e1e; border-color:#333; }
    [data-theme="dark"] .stat-card { background:#1e1e1e; border-color:#333; }
    [data-theme="dark"] .subject-card { background:#1e1e1e; border-color:#333; }
    [data-theme="dark"] .subject-card-header { background:#252525; border-color:#333; }
    [data-theme="dark"] .attempt-row { border-color:#2a2a2a; }
    [data-theme="dark"] .attempt-row:hover { background:#252525; }
    [data-theme="dark"] .empty-state { background:#1e1e1e; border-color:#333; color:#888; }
    [data-theme="dark"] .section-label { color:#90caf9; }
    [data-theme="dark"] .user-meta { color:#aaa; }
    [data-theme="dark"] .subject-name { color:#90caf9; }
    [data-theme="dark"] .stat-label { color:#aaa; }
    [data-theme="dark"] .attempt-date { color:#888; }

    /* ── Layout ── */
    .dash-wrap {
      max-width: 1140px;
      margin: 0 auto;
      padding: 28px 20px 48px;
      min-height: 100vh;
    }

    /* ── Tabs ── */
    .dash-tabs { margin-top: 4px; }
    .dash-tab-bar {
      display: flex; gap: 4px; margin-bottom: 16px;
      border-bottom: 2px solid #e0e8f5; padding-bottom: 0;
    }
    .dash-tab {
      padding: 9px 20px; background: none; border: none;
      border-bottom: 2px solid transparent; margin-bottom: -2px;
      font-family: 'Poppins', sans-serif; font-size: 0.88rem; font-weight: 600;
      color: #666; cursor: pointer; border-radius: 6px 6px 0 0;
      transition: color 0.15s, border-color 0.15s, background 0.15s;
    }
    .dash-tab:hover { color: #0d47a1; background: #f0f5ff; }
    .dash-tab.active { color: #0d47a1; border-bottom-color: #0d47a1; background: #f0f5ff; }
    [data-theme="dark"] .dash-tab-bar { border-color: #2a2a2a; }
    [data-theme="dark"] .dash-tab { color: #aaa; }
    [data-theme="dark"] .dash-tab:hover { color: #90caf9; background: #1a2a3a; }
    [data-theme="dark"] .dash-tab.active { color: #90caf9; border-bottom-color: #90caf9; background: #1a2a3a; }
    .dash-tab-panel { display: none; }
    .dash-tab-panel.active { display: block; }

    /* ── Loading ── */
    #dashboard-loading {
      text-align: center;
      padding: 80px 20px;
      color: #888;
      font-size: 1.05rem;
    }

    /* ── Top card: welcome + sign out ── */
    .top-card {
      background: #fff;
      border-radius: 16px;
      border: 1px solid #e0e8f5;
      padding: 22px 28px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 22px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.05);
    }
    .welcome-name {
      font-family: 'Playfair Display', serif;
      font-size: 1.7rem;
      font-weight: 700;
      color: #0d47a1;
      margin: 0 0 4px;
    }
    .user-meta { font-size: 0.88rem; color: #666; margin: 0; }

    .btn-signout {
      padding: 9px 22px;
      background: transparent;
      border: 1.5px solid #0d47a1;
      border-radius: 8px;
      color: #0d47a1;
      font-family: 'Poppins', sans-serif;
      font-size: 0.9rem;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s, color 0.2s;
    }
    .btn-signout:hover { background: #0d47a1; color: #fff; }

    /* ── Overall stats row ── */
    .stats-row {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 14px;
      margin-bottom: 28px;
    }
    .stat-card {
      background: #fff;
      border: 1px solid #e0e8f5;
      border-radius: 14px;
      padding: 18px 12px;
      text-align: center;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }
    .stat-number {
      font-family: 'Playfair Display', serif;
      font-size: 1.85rem;
      font-weight: 700;
      color: #0d47a1;
      line-height: 1;
      margin-bottom: 6px;
    }
    .stat-label { font-size: 0.75rem; color: #777; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }

    /* ── Section heading ── */
    .section-label {
      font-size: 0.72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: #1565c0;
      margin: 0 0 12px;
    }

    /* ── Subject cards grid ── */
    .subjects-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 18px;
      margin-bottom: 32px;
    }

    .subject-card {
      background: #fff;
      border: 1px solid #e0e8f5;
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      transition: box-shadow 0.2s, transform 0.2s;
    }
    .subject-card:hover { box-shadow: 0 6px 24px rgba(13,71,161,0.1); transform: translateY(-2px); }

    /* coloured left accent — set via inline var */
    .subject-card-header {
      background: #f5f8ff;
      border-bottom: 1px solid #e0e8f5;
      padding: 16px 20px;
      display: flex;
      align-items: center;
      gap: 12px;
      border-left: 5px solid var(--accent, #0d47a1);
    }
    .subject-icon { font-size: 1.4rem; flex-shrink: 0; }
    .subject-name {
      font-weight: 700;
      font-size: 0.97rem;
      color: #0d47a1;
      flex: 1;
      line-height: 1.3;
    }
    .subject-attempts {
      font-size: 0.75rem;
      background: #e8f0fe;
      color: #1a3c6e;
      border-radius: 20px;
      padding: 2px 10px;
      font-weight: 600;
      white-space: nowrap;
    }
    [data-theme="dark"] .subject-attempts { background:#1e3a5f; color:#90caf9; }

    /* mini stats inside card */
    .subject-mini-stats {
      display: flex;
      padding: 14px 20px;
      gap: 0;
      border-bottom: 1px solid #f0f4fb;
    }
    .mini-stat { flex: 1; text-align: center; }
    .mini-stat + .mini-stat { border-left: 1px solid #eee; }
    [data-theme="dark"] .mini-stat + .mini-stat { border-color: #2a2a2a; }
    .mini-val {
      font-size: 1.2rem;
      font-weight: 700;
      font-family: 'Playfair Display', serif;
      color: #1565c0;
      display: block;
    }
    .mini-lbl { font-size: 0.7rem; color: #888; text-transform: uppercase; letter-spacing: 0.05em; }

    /* attempt history list inside card */
    .attempts-list { padding: 4px 0 8px; }
    .attempts-list-head {
      font-size: 0.72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: #aaa;
      display: grid;
      grid-template-columns: 1fr 80px 60px 70px;
      padding: 6px 20px;
    }
    .attempt-row {
      display: grid;
      grid-template-columns: 1fr 80px 60px 70px;
      align-items: center;
      padding: 8px 20px;
      border-top: 1px solid #f4f6fb;
      font-size: 0.83rem;
      transition: background 0.15s;
    }
    .attempt-row:hover { background: #f8faff; }
    .attempt-label { font-weight: 500; color: var(--text, #111); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .attempt-score { font-weight: 600; color: #333; }
    [data-theme="dark"] .attempt-score { color: #ccc; }
    .attempt-pct { font-weight: 700; }
    .attempt-date { color: #999; font-size: 0.78rem; }

    /* percentage colour classes */
    .pct-good  { color: #2e7d32; }
    .pct-avg   { color: #e65100; }
    .pct-low   { color: #c62828; }
    [data-theme="dark"] .pct-good { color:#66bb6a; }
    [data-theme="dark"] .pct-avg  { color:#ffa726; }
    [data-theme="dark"] .pct-low  { color:#ef5350; }

    /* show only last 3, rest hidden */
    .attempt-row.hidden { display: none; }
    .show-more-btn {
      display: block;
      width: 100%;
      padding: 8px;
      background: none;
      border: none;
      border-top: 1px solid #f0f4fb;
      color: #1565c0;
      font-size: 0.8rem;
      font-weight: 600;
      cursor: pointer;
      font-family: 'Poppins', sans-serif;
      text-align: center;
    }
    .show-more-btn:hover { background: #f5f8ff; }
    [data-theme="dark"] .show-more-btn { color:#90caf9; border-color:#2a2a2a; }
    [data-theme="dark"] .show-more-btn:hover { background:#252525; }

    /* ── Progress bar (study material cards) ── */
    .progress-track {
      margin: 8px 12px 6px;
      background: #e4eaf5;
      border-radius: 4px;
      height: 6px;
      overflow: hidden;
    }
    .progress-fill {
      height: 100%;
      border-radius: 4px;
      transition: width 0.3s ease;
    }
    [data-theme="dark"] .progress-track { background: #2a2a2a; }

    /* ── Empty state ── */
    .empty-state {
      background: #fff;
      border: 2px dashed #d0dcf0;
      border-radius: 14px;
      padding: 60px 20px;
      text-align: center;
      color: #999;
      grid-column: 1 / -1;
    }
    .empty-state p { margin: 8px 0 20px; font-size: 0.95rem; }
    .empty-state a {
      display: inline-block;
      padding: 10px 24px;
      background: #0d47a1;
      color: #fff;
      border-radius: 8px;
      text-decoration: none;
      font-weight: 600;
      font-size: 0.9rem;
    }
    .empty-state a:hover { background: #1565c0; }

    /* ── Footer ── */
    footer {
      text-align:center; padding:15px 0;
      background: #f0f0f0; color:#333; font-size:0.88rem;
    }
    [data-theme="dark"] footer { background:#1a1a1a; color:#aaa; }
    footer a { color:#0d47a1; text-decoration:none; }
    [data-theme="dark"] footer a { color:#90caf9; }

    /* ── Responsive ── */
    @media (max-width: 900px) {
      .stats-row { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 700px) {
      .stats-row { grid-template-columns: repeat(3, 1fr); }
      .subjects-grid { grid-template-columns: 1fr; }
      .top-card { padding: 18px 20px; }
      .welcome-name { font-size: 1.35rem; }
      header { flex-direction: column; gap: 10px; }
      nav ul { flex-wrap: wrap; justify-content: center; gap: 12px; }
    }
    @media (max-width: 480px) {
      .stats-row { grid-template-columns: repeat(2, 1fr); }
      .dash-wrap { padding: 16px 12px 40px; }
      .attempts-list-head,
      .attempt-row { grid-template-columns: 1fr 70px 55px; }
      .attempt-date { display: none; }
    }