:root {
            --primary:       #1a3c6e;
            --primary-light: #2a5298;
            --accent:        #e8a020;
            --bg:            #f0f4fa;
            --card-bg:       #ffffff;
            --text:          #1c2a3a;
            --muted:         #5a6a7e;
            --border:        #d0daea;
            --year-ii:       #1a6b4a;
            --year-iii:      #7b3fa0;
            --year-iv:       #c0392b;
        }
 
        * { box-sizing: border-box; margin: 0; padding: 0; }
 
        body {
            font-family: 'Source Sans 3', sans-serif;
            background: var(--bg);
            color: var(--text);
            font-size: 1.05rem;
            min-height: 100vh;
        }
 
        /* ── Page Header ── */
        .page-header {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
            color: #fff;
            padding: 2.8rem 1rem 2.2rem;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        .page-header::before {
            content: '';
            position: absolute;
            inset: 0;
            background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        }
        .page-header h1 {
            font-family: 'Merriweather', serif;
            font-size: clamp(1.5rem, 3.5vw, 2.1rem);
            font-weight: 700;
            letter-spacing: .3px;
            position: relative;
        }
        .page-header .subtitle {
            font-size: 1.05rem;
            opacity: .85;
            margin-top: .45rem;
            position: relative;
        }
        .header-badge {
            display: inline-block;
            background: var(--accent);
            color: #fff;
            font-size: .82rem;
            font-weight: 600;
            letter-spacing: 1px;
            text-transform: uppercase;
            padding: .28rem .85rem;
            border-radius: 20px;
            margin-bottom: .8rem;
            position: relative;
        }
 
        /* ── Main Wrapper ── */
        .main-wrapper {
            max-width: 920px;
            margin: 0 auto;
            padding: 2.2rem 1rem 3.5rem;
        }
 
        /* ── Academic Year Accordion Card ── */
        .ay-block { margin-bottom: 1.2rem; }
        .ay-block.previous { display: none; }
        .ay-block.previous.show { display: block; }
 
        .ay-card {
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(26,60,110,.07);
            transition: box-shadow .2s;
        }
        .ay-card:hover { box-shadow: 0 5px 22px rgba(26,60,110,.13); }
 
        .ay-toggle {
            width: 100%;
            background: none;
            border: none;
            padding: 1.1rem 1.4rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            text-align: left;
            gap: 1rem;
            border-left: 5px solid var(--primary);
            transition: background .15s;
        }
        .ay-toggle:hover { background: #f5f8ff; }
        .ay-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
 
        .ay-toggle-left {
            display: flex;
            align-items: center;
            gap: .9rem;
            flex: 1;
        }
        .ay-cal-icon {
            width: 44px; height: 44px;
            border-radius: 10px;
            background: #e6edf8;
            color: var(--primary);
            display: flex; align-items: center; justify-content: center;
            font-size: 1.2rem;
            flex-shrink: 0;
        }
        .ay-title {
            font-family: 'Merriweather', serif;
            font-size: 1.15rem;
            font-weight: 700;
            color: var(--primary);
        }
        .ay-meta {
            font-size: .92rem;
            color: var(--muted);
            margin-top: .18rem;
        }
        .ay-badge {
            font-size: .78rem;
            font-weight: 600;
            letter-spacing: .7px;
            text-transform: uppercase;
            padding: .22rem .7rem;
            border-radius: 4px;
            flex-shrink: 0;
        }
        .ay-badge.current  { background: var(--accent); color: #fff; }
        .ay-badge.previous-lbl { background: var(--primary); color: #fff; }
 
        .ay-chevron {
            color: var(--muted);
            transition: transform .25s ease;
            flex-shrink: 0;
            font-size: 1rem;
        }
        .ay-card.open .ay-chevron { transform: rotate(180deg); }
 
        .ay-body {
            max-height: 0;
            overflow: hidden;
            transition: max-height .4s ease;
        }
        .ay-body-inner { padding: 0 1.4rem 1.4rem; }
 
        /* ── Year Sections inside card ── */
        .year-section { margin-bottom: 1.6rem; }
        .year-section:last-child { margin-bottom: 0; }
 
        .year-pill {
            display: inline-flex;
            align-items: center;
            gap: .45rem;
            font-size: .9rem;
            font-weight: 700;
            letter-spacing: .5px;
            text-transform: uppercase;
            padding: .3rem .9rem;
            border-radius: 20px;
            margin-bottom: .8rem;
        }
        .year-pill.ii  { background: #e6f4ee; color: var(--year-ii); }
        .year-pill.iii { background: #f3eaf8; color: var(--year-iii); }
        .year-pill.iv  { background: #fbeaea; color: var(--year-iv); }
 
        /* ── Mentor Table ── */
        .mentor-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 1rem;
        }
        .mentor-table thead th {
            background: var(--primary);
            color: #fff;
            font-weight: 600;
            font-size: 1rem;
            padding: .65rem .9rem;
            text-align: left;
            white-space: nowrap;
        }
        .mentor-table thead th:first-child { border-radius: 6px 0 0 0; width: 52px; text-align: center; }
        .mentor-table thead th:last-child  { border-radius: 0 6px 0 0; }
 
        .mentor-table tbody tr:nth-child(even) td { background: #f0f6ff; }
        .mentor-table tbody tr:hover td { background: #ddeaf8; }
        .mentor-table td {
            padding: .65rem .9rem;
            border-bottom: 1px solid #e4eaf4;
            vertical-align: top;
            font-size: 1rem;
        }
        .mentor-table td:first-child { text-align: center; color: var(--muted); }
        .mentor-table td .range {
            font-family: "open sans";
            font-size: 16px;
            color: black;
            font-weight: 500;
        }
 
        /* ── No Data ── */
        .no-data {
            text-align: center;
            padding: 1.4rem;
            color: var(--muted);
            font-style: italic;
            font-size: .98rem;
        }
 
        /* ── Show Previous Toggle ── */
        .prev-toggle-wrap { text-align: center; margin: .5rem 0 1.5rem; }
        .prev-toggle-btn {
            background: none;
            border: 1.5px solid var(--primary-light);
            color: var(--primary);
            font-size: .98rem;
            font-weight: 600;
            padding: .55rem 1.6rem;
            border-radius: 6px;
            cursor: pointer;
            transition: all .2s;
            display: inline-flex;
            align-items: center;
            gap: .5rem;
        }
        .prev-toggle-btn:hover { background: var(--primary); color: #fff; }
        .prev-toggle-btn i { transition: transform .25s; }
        .prev-toggle-btn.open i { transform: rotate(180deg); }
 
        @media (max-width: 600px) {
            .mentor-table { font-size: .92rem; }
            .mentor-table thead th, .mentor-table td { padding: .5rem .6rem; }
            .ay-title { font-size: 1rem; }
        }