:root {
        --sg-gold: #f4a020;
        --sg-gold-dark: #c97b00;
        --sg-purple: #4338ca;
        --sg-purple-light: #4172ff;
        --sg-teal: #06d6a0;
    }

    /* ── Breadcrumb ──────────────────────────────────────────────── */
    .breadcrumb-section {
        background: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
    }

    .breadcrumb-section .breadcrumb-item a {
        color: #4b5563;
        text-decoration: none;
        font-weight: 500;
    }

    .breadcrumb-section .breadcrumb-item a:hover { color: var(--sg-purple); }
    .breadcrumb-section .breadcrumb-item.active { color: #1f2937; font-weight: 600; }

    /* ── Page Header ─────────────────────────────────────────────── */
    .page-header {
        background: linear-gradient(135deg, #0635bd 0%, #4338ca 100%); /* Exact brand Indigo color */
        padding: 4.5rem 0 5.5rem;
        position: relative;
        overflow: hidden;
    }

    .page-header::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle at top right, rgba(255, 255, 255, 0.12) 0%, transparent 60%);
        pointer-events: none;
    }

    .page-header h1 {
        font-weight: 800;
        font-size: 2rem;
        color: #ffffff;
        margin-bottom: 0.5rem;
        position: relative;
        z-index: 1;
        letter-spacing: -0.02em;
    }

    .page-header p {
        color: rgba(255, 255, 255, 0.85);
        position: relative;
        z-index: 1;
        margin: 0;
        font-size: 1.05rem;
    }

    /* ── Intro Section (Overlapping Card) ────────────────────────── */
    .intro-section {
        background: transparent;
        position: relative;
        z-index: 10;
        margin-top: -3.5rem;
        padding-bottom: 1rem;
    }

    .intro-card {
        background: white;
        border-radius: 1.25rem;
        padding: 2rem 2.5rem;
        box-shadow: 0 10px 40px rgba(0,0,0,0.08);
        border: 1px solid rgba(0,0,0,0.04);
    }

    .intro-card p {
        color: #4b5563;
        line-height: 1.8;
        font-size: 1.05rem;
        margin: 0;
    }

    /* ── Search bar in header ───────────────────────────────────── */
    .search-bar-wrap {
        position: relative;
        max-width: 100%;
    }

    .search-bar-wrap input {
        border: none;
        border-radius: 50px;
        padding: 1.1rem 1.25rem 1.1rem 3.25rem;
        font-size: 1.05rem;
        width: 100%;
        box-shadow: 0 8px 30px rgba(0,0,0,0.15);
        outline: none;
        background: #ffffff;
        color: #111827;
        transition: all 0.3s;
    }

    .search-bar-wrap input::placeholder {
        color: #9ca3af;
    }

    .search-bar-wrap input:focus {
        box-shadow: 0 8px 30px rgba(35, 17, 154, 0.3);
    }

    .search-bar-wrap .search-icon {
        position: absolute;
        left: 1.25rem;
        top: 50%;
        transform: translateY(-50%);
        color: #9ca3af;
        font-size: 1.1rem;
        z-index: 2;
    }

    .search-bar-wrap .btn-search {
        position: absolute;
        right: 6px;
        top: 6px;
        bottom: 6px;
        background: #f4a020; /* Gold contrast! */
        color: #ffffff;
        border: none;
        border-radius: 50px;
        padding: 0 1.75rem;
        font-weight: 800;
        font-size: 0.95rem;
        cursor: pointer;
        transition: all 0.2s;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }

    .search-bar-wrap .btn-search:hover { background: #23119A; }

    /* ── Mobile filter toggle ────────────────────────────────────── */
    .mobile-filter-toggle {
        display: none;
        width: 100%;
        background: linear-gradient(135deg, var(--sg-purple), var(--sg-purple-light));
        color: white;
        border: none;
        border-radius: 0.625rem;
        padding: 0.75rem 1rem;
        font-weight: 700;
        font-size: 0.9rem;
        cursor: pointer;
        margin-bottom: 1rem;
        text-align: left;
        justify-content: space-between;
        align-items: center;
    }

    @media (max-width: 991px) {
        .mobile-filter-toggle { display: flex; }
        .filter-sidebar-collapse { display: none; }
        .filter-sidebar-collapse.show { display: block; }
        .page-header h1 { font-size: 1.6rem; }
        .search-bar-wrap { max-width: 100%; }
        .scholarship-row-right { display: none; }
        .list-page-layout { grid-template-columns: 1fr !important; }
        .filter-panel-header { display: none !important; }
        .filter-panel { 
            border-top-left-radius: 0 !important; 
            border-top-right-radius: 0 !important; 
            max-height: 90vh !important;
            overflow-y: auto !important;
        }
        .mobile-filter-toggle[aria-expanded="true"] { border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0; }
        .filter-sidebar { position: static; }
    }

    /* ── Layout ─────────────────────────────────────────────────── */
    .list-page-layout {
        display: grid;
        grid-template-columns: 280px 1fr;
        gap: 1.75rem;
        padding: 1.75rem 0 4rem;
    }

    /* ── Filter Sidebar ─────────────────────────────────────────── */
    .filter-sidebar {
        position: sticky;
        top: 0px;
        align-self: start;
    }

    .filter-panel {
        background: white;
        border-radius: 1rem;
        box-shadow: 0 2px 16px rgba(0,0,0,0.06);
        overflow: hidden;
        border: 1px solid #f0f0f0;
    }

    .filter-panel-header {
        background: linear-gradient(135deg, var(--sg-purple), var(--sg-purple-light));
        color: white;
        padding: 1rem 1.25rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .filter-panel-header h6 {
        margin: 0;
        font-weight: 700;
        font-size: 0.9rem;
    }

    .filter-group {
        padding: 1rem 1.25rem;
        border-bottom: 1px solid #f5f5f5;
    }

    .filter-group:last-child { border-bottom: none; }

    .filter-label {
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #6c757d;
        margin-bottom: 0.6rem;
    }

    .filter-select {
        border: 1.5px solid #e9ecef;
        border-radius: 0.5rem;
        padding: 0.5rem 0.7rem;
        font-size: 0.84rem;
        width: 100%;
        color: #495057;
        background-color: #fafafa;
        transition: border-color 0.2s;
        outline: none;
        cursor: pointer;
    }

    .filter-select:focus {
        border-color: var(--sg-purple);
        background-color: white;
    }

    .difficulty-slider {
        width: 100%;
        accent-color: var(--sg-purple);
    }

    .difficulty-labels {
        display: flex;
        justify-content: space-between;
        font-size: 0.68rem;
        color: #6c757d;
        margin-top: 0.2rem;
    }

    .btn-apply-filter {
        display: block;
        width: 100%;
        background: linear-gradient(135deg, var(--sg-purple), var(--sg-purple-light));
        color: white;
        border: none;
        padding: 0.7rem;
        border-radius: 0.5rem;
        font-weight: 700;
        font-size: 0.84rem;
        cursor: pointer;
        transition: all 0.2s;
    }

    .btn-apply-filter:hover { opacity: 0.9; transform: translateY(-1px); }

    .btn-clear-filter {
        display: block;
        width: 100%;
        background: white;
        color: #6c757d;
        border: 1.5px solid #e9ecef;
        padding: 0.6rem;
        border-radius: 0.5rem;
        font-weight: 600;
        font-size: 0.8rem;
        cursor: pointer;
        margin-top: 0.5rem;
        transition: all 0.2s;
        text-align: center;
        text-decoration: none;
    }

    .btn-clear-filter:hover { border-color: #dc3545; color: #dc3545; }

    /* ── Result header ───────────────────────────────────────────── */
    .list-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.25rem;
        flex-wrap: wrap;
        gap: 0.6rem;
    }

    .result-count {
        font-weight: 700;
        color: #0f0c1a;
        font-size: 1rem;
    }

    .result-count span { color: var(--sg-purple); }

    /* ── Active filter chips ─────────────────────────────────────── */
    .active-filters {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        margin-bottom: 1rem;
    }

    .active-chip {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        background: rgba(114,9,183,0.08);
        border: 1px solid rgba(114,9,183,0.2);
        color: var(--sg-purple);
        padding: 0.25rem 0.75rem;
        border-radius: 50px;
        font-size: 0.75rem;
        font-weight: 700;
    }

    /* ── Scholarship Row Card ────────────────────────────────────── */
    .scholarship-row-card {
        background: white;
        border-radius: 1rem;
        padding: 1.25rem;
        box-shadow: 0 2px 12px rgba(0,0,0,0.05);
        border: 1px solid #f0f0f0;
        transition: all 0.25s;
        margin-bottom: 0.875rem;
        display: flex;
        gap: 1rem;
        align-items: flex-start;
        text-decoration: none;
        color: inherit;
    }

    .scholarship-row-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 30px rgba(114,9,183,0.12);
        border-color: rgba(114,9,183,0.2);
        color: inherit;
    }

    .scholarship-row-icon {
        width: 50px;
        height: 50px;
        border-radius: 0.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1.2rem;
        flex-shrink: 0;
        background: linear-gradient(135deg, var(--sg-purple), var(--sg-purple-light));
    }

    .scholarship-row-body { flex: 1; min-width: 0; }

    .scholarship-row-name {
        font-weight: 700;
        font-size: 1rem;
        color: #0f0c1a;
        margin-bottom: 0.2rem;
        line-height: 1.35;
    }

    .scholarship-row-provider {
        font-size: 0.8rem;
        color: #6c757d;
        margin-bottom: 0.6rem;
    }

    .scholarship-row-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
        margin-bottom: 0.4rem;
    }

    .tag {
        padding: 0.2rem 0.6rem;
        border-radius: 50px;
        font-size: 0.69rem;
        font-weight: 700;
    }

    .tag-purple { background:rgba(114,9,183,0.1); color:var(--sg-purple); }
    .tag-gold { background:rgba(244,160,32,0.12); color:var(--sg-gold-dark); }
    .tag-teal { background:rgba(6,214,160,0.12); color:#06a076; }
    .tag-gray { background:#f5f5f5; color:#495057; }

    .scholarship-row-meta {
        font-size: 0.78rem;
        color: #6c757d;
        display: flex;
        flex-wrap: wrap;
        gap: 0.6rem;
    }

    .scholarship-row-meta i { color: var(--sg-purple); margin-right: 3px; }

    .scholarship-row-right { text-align: right; flex-shrink: 0; }

    .stipend-big {
        font-weight: 800;
        font-size: 1rem;
        color: var(--sg-purple);
        white-space: nowrap;
    }

    .stipend-label { font-size: 0.68rem; color: #adb5bd; margin-bottom: 0.4rem; }

    /* Empty state */
    .empty-state {
        text-align: center;
        padding: 4rem 2rem;
        color: #6c757d;
    }

    .empty-state i {
        font-size: 3rem;
        margin-bottom: 1rem;
        opacity: 0.3;
    }