/* ─── Brand Variables ─────────────────────────────────── */
    :root {
      --default-font:   "Roboto", system-ui, sans-serif;
      --heading-font:   "Josefin Sans", sans-serif;
      --nav-font:       "Poppins", sans-serif;

      --brand-red:        #b8282f;
      --accent-color:     #b8282f;
      --accent-soft-color:#f7d1d4;

      --heading-color:    #111111;
      --default-color:    #2f2f2f;
      --muted-color:      #666666;
      --light-color:      #999999;
      --contrast-color:   #ffffff;

      --background-color: #f4f5f7;
      --surface-color:    #ffffff;
      --soft-bg-color:    #fafafa;
      --border-color:     #e5e7eb;

      --success-color:    #198754;
      --danger-color:     #dc3545;
      --warning-color:    #f59e0b;
      --info-color:       #0284c7;

      --header-height:    64px;
      --sidebar-width:    256px;
      --sidebar-collapsed:68px;

      --header-bg:     rgba(255,255,255,0.94);
      --header-border: rgba(0,0,0,0.07);
      --header-shadow: 0 1px 0 rgba(0,0,0,0.06);

      --sp-xs: 6px; --sp-sm: 10px; --sp-md: 16px; --sp-lg: 24px;
      --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-full: 999px;
      --tr: 0.18s ease;
      --focus-ring: color-mix(in srgb, var(--accent-color), transparent 82%);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body { font-family: var(--default-font); color: var(--default-color); background: var(--background-color); min-height: 100vh; }
    h1,h2,h3,h4,h5,h6 { font-family: var(--heading-font); color: var(--heading-color); }
    a { color: var(--accent-color); text-decoration: none; transition: .3s; }
    a:hover { color: color-mix(in srgb, var(--accent-color), transparent 25%); }

    /* ─── Header ──────────────────────────────────────────── */
    .header {
      position: fixed; top: 0; left: 0; right: 0; height: var(--header-height);
      background: var(--header-bg);
      backdrop-filter: saturate(140%) blur(10px);
      -webkit-backdrop-filter: saturate(140%) blur(10px);
      border-bottom: 1px solid var(--header-border);
      box-shadow: var(--header-shadow);
      display: flex; align-items: center; gap: var(--sp-sm);
      padding: 0 var(--sp-md); z-index: 1000;
    }
    @media(min-width:576px){ .header { padding: 0 var(--sp-lg); } }

    .header-left { display:flex; align-items:center; gap:10px; min-width:0; }
    @media(min-width:1200px){ .header-left { min-width: calc(var(--sidebar-width) - var(--sp-lg) - 10px); } }

    .header-logo { display:flex; align-items:center; gap:8px; font-family:var(--heading-font); font-size:1.05rem; font-weight:700; color:var(--heading-color); }
    .header-logo:hover { color: var(--accent-color); }
    .header-logo img { height:32px; width:auto; }
    .header-logo .logo-text { display:none; }
    @media(min-width:576px){ .header-logo .logo-text { display:inline; } }

    .sidebar-toggle { width:38px; height:38px; border-radius:var(--r-md); border:1px solid var(--border-color); background:var(--surface-color); color:var(--default-color); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:all var(--tr); flex-shrink:0; }
    .sidebar-toggle:hover { border-color:color-mix(in srgb,var(--accent-color),transparent 40%); color:var(--accent-color); background:color-mix(in srgb,var(--accent-color),transparent 92%); }

    /* Greeting in header */
    .header-greeting { display:none; flex-direction:column; line-height:1.2; margin-left:2px; }
    @media(min-width:768px){ .header-greeting { display:flex; } }
    .header-greeting-name { font-size:0.82rem; font-weight:600; font-family:var(--nav-font); color:var(--heading-color); }
    .header-greeting-sub  { font-size:0.7rem; color:var(--muted-color); }

    .header-right { margin-left:auto; display:flex; align-items:center; gap:var(--sp-xs); }
    .header-cluster { display:inline-flex; align-items:center; gap:4px; padding:4px; border-radius:14px; border:1px solid var(--border-color); background:color-mix(in srgb,var(--surface-color),var(--background-color) 16%); }

    .hdr-btn { position:relative; width:38px; height:38px; border-radius:var(--r-md); border:1px solid color-mix(in srgb,var(--border-color),transparent 20%); background:var(--surface-color); color:var(--muted-color); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:all var(--tr); }
    .hdr-btn i { font-size:1.1rem; }
    .hdr-btn:hover { color:var(--accent-color); border-color:color-mix(in srgb,var(--accent-color),transparent 55%); background:color-mix(in srgb,var(--accent-color),transparent 90%); }
    .hdr-badge { position:absolute; top:4px; right:4px; min-width:17px; height:17px; padding:0 4px; border-radius:var(--r-full); background:var(--danger-color); color:#fff; font-size:0.62rem; line-height:17px; text-align:center; font-weight:700; }

    .hdr-divider { width:1px; height:28px; background:var(--border-color); margin:0 4px; display:none; }
    @media(min-width:768px){ .hdr-divider { display:block; } }

    /* User pill */
    .user-pill { display:flex; align-items:center; gap:8px; border:1px solid var(--border-color); border-radius:var(--r-md); padding:5px 10px 5px 6px; cursor:pointer; transition:all var(--tr); background:none; }
    .user-pill:hover { border-color:var(--accent-color); background:var(--accent-soft-color); }
    .user-av { width:30px; height:30px; border-radius:50%; object-fit:cover; background:var(--accent-soft-color); display:flex; align-items:center; justify-content:center; font-size:0.78rem; font-weight:700; font-family:var(--heading-font); color:var(--accent-color); flex-shrink:0; overflow:hidden; }
    .user-av img { width:100%; height:100%; object-fit:cover; }
    .user-pill-name { font-size:0.8rem; font-weight:600; font-family:var(--nav-font); color:var(--heading-color); white-space:nowrap; }
    .user-pill-role { font-size:0.68rem; color:var(--muted-color); }
    .user-pill-chevron { font-size:0.7rem; color:var(--muted-color); }

    /* User dropdown */
    .user-dd { width:230px; padding:0; border-radius:var(--r-lg); border:1px solid var(--border-color); box-shadow:0 8px 32px rgba(0,0,0,0.12); overflow:hidden; }
    .user-dd-head { padding:14px 16px; background:var(--soft-bg-color); border-bottom:1px solid var(--border-color); display:flex; gap:10px; align-items:center; }
    .user-dd-av { width:40px; height:40px; border-radius:50%; background:var(--accent-soft-color); display:flex; align-items:center; justify-content:center; font-size:0.88rem; font-weight:700; font-family:var(--heading-font); color:var(--accent-color); flex-shrink:0; }
    .user-dd-name  { font-size:0.85rem; font-weight:700; font-family:var(--heading-font); }
    .user-dd-email { font-size:0.72rem; color:var(--muted-color); }
    .user-dd-body { padding:6px; }
    .user-dd-item  { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--r-sm); font-size:0.82rem; color:var(--default-color); transition:all var(--tr); }
    .user-dd-item:hover { background:var(--accent-soft-color); color:var(--accent-color); }
    .user-dd-icon  { width:28px; height:28px; border-radius:8px; background:var(--soft-bg-color); display:flex; align-items:center; justify-content:center; font-size:0.82rem; }
    .user-dd-footer { padding:6px; border-top:1px solid var(--border-color); }
    .user-dd-logout { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--r-sm); font-size:0.82rem; color:var(--danger-color); transition:all var(--tr); }
    .user-dd-logout:hover { background:#fef2f2; }

    /* ─── Sidebar ─────────────────────────────────────────── */
    .sidebar {
      position:fixed; top:var(--header-height); left:0; bottom:0;
      width:var(--sidebar-width);
      background:var(--surface-color);
      border-right:1px solid var(--border-color);
      overflow-y:auto; overflow-x:hidden;
      transition:width var(--tr), transform var(--tr);
      z-index:900;
    }
    .sidebar.collapsed { width:var(--sidebar-collapsed); }
    @media(max-width:991px){ .sidebar { transform:translateX(-100%); width:var(--sidebar-width) !important; } .sidebar.open { transform:translateX(0); } }

    /* Student identity card inside sidebar */
    .sid-card {
      margin:16px 12px 8px;
      padding:14px;
      background:linear-gradient(135deg, var(--brand-red) 0%, color-mix(in srgb,var(--brand-red),#000 20%) 100%);
      border-radius:var(--r-lg);
      color:#fff;
      transition:opacity var(--tr);
      overflow:hidden;
    }
    .sidebar.collapsed .sid-card { opacity:0; pointer-events:none; height:0; margin:8px 12px; padding:0; }
    .sid-card-name  { font-family:var(--heading-font); font-size:0.9rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .sid-card-id    { font-size:0.72rem; opacity:0.8; margin-top:2px; }
    .sid-card-prog  { font-size:0.7rem; opacity:0.7; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .sid-balance    { display:flex; justify-content:space-between; align-items:center; margin-top:10px; padding-top:10px; border-top:1px solid rgba(255,255,255,0.2); }
    .sid-balance-label { font-size:0.65rem; opacity:0.7; text-transform:uppercase; letter-spacing:0.07em; }
    .sid-balance-value { font-family:var(--heading-font); font-size:1rem; font-weight:700; }
    .sid-balance-value.cleared { color:#86efac; }
    .sid-balance-value.owed    { color:#fca5a5; }

    .sb-section { margin-bottom:4px; }
    .sb-label { font-size:0.63rem; font-weight:700; letter-spacing:0.09em; text-transform:uppercase; color:var(--light-color); padding:8px 20px 3px; white-space:nowrap; overflow:hidden; transition:opacity var(--tr); }
    .sidebar.collapsed .sb-label { opacity:0; }

    .sb-link { display:flex; align-items:center; gap:10px; padding:9px 20px; font-size:0.83rem; font-family:var(--nav-font); font-weight:500; color:var(--muted-color); transition:all var(--tr); position:relative; white-space:nowrap; text-decoration:none; cursor:pointer; border:none; background:none; width:100%; text-align:left; }
    .sb-link i { font-size:0.95rem; flex-shrink:0; width:20px; text-align:center; }
    .sb-link span.sb-text { overflow:hidden; transition:opacity var(--tr); }
    .sidebar.collapsed .sb-link span.sb-text { opacity:0; width:0; }
    .sb-link:hover { color:var(--accent-color); background:color-mix(in srgb,var(--accent-color),transparent 93%); }
    .sb-link.active { color:var(--accent-color); font-weight:600; background:color-mix(in srgb,var(--accent-color),transparent 90%); }
    .sb-link.active::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent-color); border-radius:0 4px 4px 0; }
    .sb-badge { margin-left:auto; font-size:0.62rem; font-weight:700; padding:2px 6px; border-radius:var(--r-full); background:var(--accent-soft-color); color:var(--accent-color); flex-shrink:0; }
    .sidebar.collapsed .sb-badge { display:none; }
    .sb-badge.warn { background:#fff3e0; color:#c2410c; }

    /* ─── Page Wrapper ────────────────────────────────────── */
    .page-wrapper { margin-left:var(--sidebar-width); margin-top:var(--header-height); min-height:calc(100vh - var(--header-height)); transition:margin-left var(--tr); padding:24px; }
    .page-wrapper.expanded { margin-left:var(--sidebar-collapsed); }
    @media(max-width:991px){ .page-wrapper { margin-left:0; padding:16px; } }

    .sb-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.35); z-index:899; }
    @media(max-width:991px){ .sb-overlay.active { display:block; } }

    /* ─── Page Header ─────────────────────────────────────── */
    .page-hdr { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:12px; margin-bottom:24px; }
    .page-title { font-size:1.35rem; font-weight:700; font-family:var(--heading-font); }
    .page-crumb { font-size:0.76rem; color:var(--muted-color); margin-top:2px; font-family:var(--nav-font); }
    .page-crumb a { color:var(--muted-color); }
    .page-crumb a:hover { color:var(--accent-color); }
    .page-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

    /* ─── Cards ───────────────────────────────────────────── */
    .card { background:var(--surface-color); border-radius:var(--r-lg); border:1px solid var(--border-color); overflow:hidden; }
    .card-hdr { padding:15px 20px; border-bottom:1px solid var(--border-color); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
    .card-title { font-size:0.92rem; font-weight:700; font-family:var(--heading-font); margin:0; }
    .card-body  { padding:20px; }

    /* ─── Stat Cards ──────────────────────────────────────── */
    .stat-card { background:var(--surface-color); border-radius:var(--r-lg); border:1px solid var(--border-color); padding:18px 20px; display:flex; flex-direction:column; gap:8px; transition:box-shadow var(--tr), transform var(--tr); }
    .stat-card:hover { box-shadow:0 4px 20px rgba(0,0,0,0.07); transform:translateY(-1px); }
    .stat-icon { width:40px; height:40px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; font-size:1rem; }
    .stat-icon.red    { background:var(--accent-soft-color); color:var(--accent-color); }
    .stat-icon.green  { background:#e6f9f0; color:var(--success-color); }
    .stat-icon.blue   { background:#e0f4ff; color:var(--info-color); }
    .stat-icon.orange { background:#fff3e0; color:#c2410c; }
    .stat-icon.purple { background:#f3e8ff; color:#7c3aed; }
    .stat-label { font-size:0.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--muted-color); font-family:var(--nav-font); }
    .stat-value { font-size:1.6rem; font-weight:700; font-family:var(--heading-font); color:var(--heading-color); line-height:1; }
    .stat-sub   { font-size:0.73rem; color:var(--muted-color); }

    /* ─── Buttons ─────────────────────────────────────────── */
    .btn-brand { background:var(--accent-color); color:#fff; border:none; border-radius:var(--r-md); padding:10px 20px; font-size:0.83rem; font-weight:600; font-family:var(--nav-font); cursor:pointer; transition:all var(--tr); display:inline-flex; align-items:center; gap:7px; }
    .btn-brand:hover { background:color-mix(in srgb,var(--accent-color),#000 15%); color:#fff; transform:translateY(-1px); box-shadow:0 4px 12px color-mix(in srgb,var(--accent-color),transparent 55%); }
    .btn-brand:disabled { opacity:.6; cursor:not-allowed; transform:none; box-shadow:none; }
    .btn-brand.sm { padding:7px 14px; font-size:0.78rem; }

    .btn-ghost { background:transparent; color:var(--muted-color); border:1px solid var(--border-color); border-radius:var(--r-md); padding:8px 14px; font-size:0.8rem; font-weight:500; font-family:var(--nav-font); cursor:pointer; transition:all var(--tr); display:inline-flex; align-items:center; gap:6px; }
    .btn-ghost:hover { border-color:var(--accent-color); color:var(--accent-color); background:var(--accent-soft-color); }
    .btn-ghost.sm { padding:5px 11px; font-size:0.76rem; }

    .btn-icon { width:32px; height:32px; border-radius:var(--r-sm); border:1px solid var(--border-color); background:var(--surface-color); color:var(--muted-color); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:all var(--tr); font-size:0.82rem; }
    .btn-icon:hover { color:var(--accent-color); border-color:var(--accent-color); background:var(--accent-soft-color); }

    /* ─── Badges ──────────────────────────────────────────── */
    .badge { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:var(--r-full); font-size:0.69rem; font-weight:600; font-family:var(--nav-font); }
    .badge.submitted  { background:#e6f9f0; color:#166534; }
    .badge.graded     { background:#e0f4ff; color:#075985; }
    .badge.pending    { background:#fff8e1; color:#92400e; }
    .badge.late       { background:#fef2f2; color:#991b1b; }
    .badge.missing    { background:#f3f4f6; color:#6b7280; border:1px solid #e5e7eb; }
    .badge.active     { background:#e6f9f0; color:#166534; }
    .badge.neutral    { background:var(--soft-bg-color); color:var(--muted-color); border:1px solid var(--border-color); }
    .badge.grade-A    { background:#dcfce7; color:#166534; }
    .badge.grade-B    { background:#e0f4ff; color:#075985; }
    .badge.grade-C    { background:#fff8e1; color:#92400e; }
    .badge.grade-D    { background:#fff3e0; color:#c2410c; }
    .badge.grade-F    { background:#fef2f2; color:#991b1b; }

    /* ─── Tables ──────────────────────────────────────────── */
    .data-table { width:100%; border-collapse:collapse; font-size:0.81rem; }
    .data-table th { padding:9px 14px; text-align:left; font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--muted-color); background:var(--soft-bg-color); border-bottom:1px solid var(--border-color); font-family:var(--nav-font); white-space:nowrap; }
    .data-table td { padding:12px 14px; border-bottom:1px solid var(--border-color); vertical-align:middle; }
    .data-table tr:last-child td { border-bottom:none; }
    .data-table tr:hover td { background:var(--soft-bg-color); }
    .table-wrap { overflow-x:auto; }

    /* ─── Forms ───────────────────────────────────────────── */
    .form-label { font-size:0.79rem; font-weight:600; color:var(--heading-color); margin-bottom:5px; display:block; font-family:var(--nav-font); }
    .form-label .req { color:var(--accent-color); }
    .form-ctrl { width:100%; padding:9px 12px; border-radius:var(--r-md); border:1px solid var(--border-color); background:var(--surface-color); color:var(--default-color); font-size:0.83rem; font-family:var(--default-font); transition:all var(--tr); }
    .form-ctrl:focus { outline:none; border-color:var(--accent-color); box-shadow:0 0 0 4px var(--focus-ring); }
    .form-ctrl::placeholder { color:var(--light-color); }
    .form-hint { font-size:0.72rem; color:var(--muted-color); margin-top:3px; font-family:var(--nav-font); }

    /* ─── Alerts ──────────────────────────────────────────── */
    .alert { padding:10px 14px; border-radius:var(--r-md); font-size:0.81rem; display:flex; align-items:flex-start; gap:8px; }
    .alert.success { background:#e6f9f0; color:#166534; border:1px solid #bbf7d0; }
    .alert.error   { background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }
    .alert.info    { background:#e0f4ff; color:#075985; border:1px solid #bae6fd; }
    .alert.warning { background:#fff8e1; color:#92400e; border:1px solid #fde68a; }

    /* ─── Progress Bar ────────────────────────────────────── */
    .progress-bar-wrap { height:6px; border-radius:var(--r-full); background:var(--border-color); overflow:hidden; }
    .progress-bar-fill { height:100%; border-radius:var(--r-full); background:var(--accent-color); transition:width .5s ease; }
    .progress-bar-fill.success { background:var(--success-color); }
    .progress-bar-fill.warning { background:var(--warning-color); }

    /* ─── Assignment Card ─────────────────────────────────── */
    .asgn-card {
      background:var(--surface-color); border:1px solid var(--border-color);
      border-radius:var(--r-lg); padding:16px 18px;
      transition:box-shadow var(--tr), transform var(--tr);
      display:flex; flex-direction:column; gap:10px;
    }
    .asgn-card:hover { box-shadow:0 4px 16px rgba(0,0,0,0.07); transform:translateY(-1px); }
    .asgn-card.overdue { border-left:3px solid var(--danger-color); }
    .asgn-card.submitted-card { border-left:3px solid var(--success-color); }
    .asgn-card.graded-card { border-left:3px solid var(--info-color); }

    .asgn-top { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
    .asgn-title { font-size:0.9rem; font-weight:700; font-family:var(--heading-font); color:var(--heading-color); }
    .asgn-course { font-size:0.73rem; color:var(--muted-color); font-family:var(--nav-font); margin-top:2px; }
    .asgn-meta { display:flex; flex-wrap:wrap; gap:10px; align-items:center; font-size:0.75rem; color:var(--muted-color); }
    .asgn-meta i { margin-right:3px; }
    .asgn-marks { display:flex; justify-content:space-between; align-items:center; padding:10px 12px; background:var(--soft-bg-color); border-radius:var(--r-md); border:1px solid var(--border-color); }
    .asgn-marks-score { font-family:var(--heading-font); font-size:1.1rem; font-weight:700; color:var(--heading-color); }
    .asgn-marks-label { font-size:0.72rem; color:var(--muted-color); font-family:var(--nav-font); }
    .asgn-feedback { font-size:0.78rem; color:var(--muted-color); font-style:italic; padding:8px 10px; background:var(--soft-bg-color); border-radius:var(--r-sm); border-left:3px solid var(--border-color); }

    /* ─── Filter Tabs ─────────────────────────────────────── */
    .filter-tabs { display:flex; gap:4px; background:var(--soft-bg-color); padding:4px; border-radius:var(--r-md); border:1px solid var(--border-color); flex-wrap:wrap; }
    .filter-tab  { padding:6px 14px; border-radius:var(--r-sm); font-size:0.78rem; font-weight:600; font-family:var(--nav-font); color:var(--muted-color); cursor:pointer; border:none; background:none; transition:all var(--tr); white-space:nowrap; }
    .filter-tab.active { background:var(--surface-color); color:var(--accent-color); box-shadow:0 1px 4px rgba(0,0,0,0.08); }

    /* ─── Transcript Table ────────────────────────────────── */
    .gpa-display { text-align:center; padding:24px 16px; }
    .gpa-ring { width:90px; height:90px; border-radius:50%; border:4px solid var(--border-color); display:flex; align-items:center; justify-content:center; flex-direction:column; margin:0 auto 10px; position:relative; }
    .gpa-ring::before { content:''; position:absolute; inset:0; border-radius:50%; border:4px solid var(--accent-color); clip-path:inset(0 50% 0 0); }
    .gpa-number { font-family:var(--heading-font); font-size:1.5rem; font-weight:700; color:var(--heading-color); line-height:1; }
    .gpa-label  { font-size:0.62rem; color:var(--muted-color); text-transform:uppercase; letter-spacing:.07em; }

    /* ─── Finance / Ledger ────────────────────────────────── */
    .ledger-row { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--border-color); font-size:0.82rem; }
    .ledger-row:last-child { border-bottom:none; }
    .ledger-type { font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:2px 8px; border-radius:var(--r-full); }
    .ledger-type.ENROLLMENT { background:#e0f4ff; color:#075985; }
    .ledger-type.PAYMENT    { background:#e6f9f0; color:#166534; }
    .ledger-amount { font-weight:700; font-family:var(--heading-font); }
    .ledger-amount.credit  { color:var(--success-color); }
    .ledger-amount.debit   { color:var(--danger-color); }

    /* ─── Upload Zone ─────────────────────────────────────── */
    .upload-zone {
      border:2px dashed var(--border-color); border-radius:var(--r-lg);
      padding:28px 20px; text-align:center; cursor:pointer;
      transition:all var(--tr); background:var(--soft-bg-color);
    }
    .upload-zone:hover, .upload-zone.drag-over { border-color:var(--accent-color); background:var(--accent-soft-color); }
    .upload-zone i { font-size:2rem; color:var(--muted-color); display:block; margin-bottom:8px; }
    .upload-zone p { font-size:0.82rem; color:var(--muted-color); margin:0; }
    .upload-zone .upload-hint { font-size:0.72rem; color:var(--light-color); margin-top:4px; }
    .upload-progress { margin-top:10px; display:none; }

    /* ─── Empty State ─────────────────────────────────────── */
    .empty { padding:40px 16px; text-align:center; color:var(--muted-color); }
    .empty i { font-size:2.2rem; opacity:.3; display:block; margin-bottom:10px; }
    .empty p { font-size:0.83rem; margin:0; }

    /* ─── Modals ──────────────────────────────────────────── */
    .modal-content { border-radius:var(--r-xl); border:1px solid var(--border-color); box-shadow:0 24px 64px rgba(0,0,0,0.14); }
    .modal-hdr { padding:18px 22px; border-bottom:1px solid var(--border-color); display:flex; justify-content:space-between; align-items:center; }
    .modal-title { font-size:0.98rem; font-weight:700; font-family:var(--heading-font); }
    .modal-body-pad { padding:22px; }
    .modal-footer-pad { padding:14px 22px; border-top:1px solid var(--border-color); display:flex; justify-content:flex-end; gap:8px; }
    .modal-x { width:30px; height:30px; border-radius:var(--r-sm); border:1px solid var(--border-color); background:none; color:var(--muted-color); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all var(--tr); font-size:0.9rem; }
    .modal-x:hover { background:#fef2f2; color:var(--danger-color); border-color:var(--danger-color); }

    /* ─── Spinner ─────────────────────────────────────────── */
    .spin { width:16px; height:16px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; display:inline-block; vertical-align:middle; }
    .spin.dark { border-color:rgba(0,0,0,.15); border-top-color:var(--accent-color); }
    @keyframes spin { to { transform:rotate(360deg); } }

    /* ─── Section animation ───────────────────────────────── */
    .portal-section { animation:fadeUp .22s ease both; }
    @keyframes fadeUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

    /* ─── Welcome Banner ──────────────────────────────────── */
    .welcome-banner {
      background:linear-gradient(135deg, var(--brand-red) 0%, color-mix(in srgb,var(--brand-red),#8b1520 60%) 100%);
      border-radius:var(--r-xl); padding:24px 28px; color:#fff; margin-bottom:24px;
      position:relative; overflow:hidden;
    }
    .welcome-banner::after {
      content:''; position:absolute; right:-30px; top:-30px;
      width:160px; height:160px; border-radius:50%;
      background:rgba(255,255,255,0.06);
    }
    .welcome-banner::before {
      content:''; position:absolute; right:60px; bottom:-40px;
      width:100px; height:100px; border-radius:50%;
      background:rgba(255,255,255,0.04);
    }
    .wb-greeting { font-size:0.78rem; opacity:.75; font-family:var(--nav-font); text-transform:uppercase; letter-spacing:.08em; }
    .wb-name     { font-family:var(--heading-font); font-size:1.5rem; font-weight:700; margin-top:2px; position:relative; z-index:1; }
    .wb-meta     { font-size:0.78rem; opacity:.75; margin-top:4px; }
    .wb-chips    { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
    .wb-chip     { background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.2); border-radius:var(--r-full); padding:4px 12px; font-size:0.72rem; font-family:var(--nav-font); display:flex; align-items:center; gap:5px; backdrop-filter:blur(4px); }

    /* Due-date urgency */
    .due-today    { color:var(--danger-color) !important; font-weight:600; }
    .due-soon     { color:var(--warning-color) !important; font-weight:600; }

    @media(max-width:575px){ .page-title { font-size:1.15rem; } .welcome-banner { padding:18px 20px; } .wb-name { font-size:1.2rem; } }