:root {
    /* Brand gradient */
    --keti-green: #19a94a;
    --keti-green-dark: #0f7a35;
    --keti-green-soft: #e6f7ec;
    --keti-yellow: #f7a838;
    --keti-yellow-light: #ffd97a;
    --keti-gradient: linear-gradient(var(--keti-green) 0%, #59c97e 100%);

    /* Purple variables replaced with white */
    --keti-purple: #ffffff;
    --keti-purple-dark: #ffffff;
    --keti-purple-light: #ffffff;

    --keti-blue: #2563a8;
    --keti-blue-dark: #1a4a7d;

    --keti-yellow-soft: #fdf1de;

    --keti-gradient-purple: linear-gradient( #ffffff 0%, var(--keti-blue) 100%);
    --keti-gradient-blue-green: linear-gradient( var(--keti-blue) 0%, var(--keti-green) 100%);
    --keti-gradient-dark: linear-gradient(var(--keti-yellow) 0%, #ffffff 100%);

    /* Sidebar footer decorative wave: orange -> yellow */
    --keti-gradient-wave: linear-gradient( #f2994a 0%, #f7c948 100%);

    /* Hero gradient: white -> green -> yellow */
    --keti-gradient-brand: linear-gradient( #ffffff 0%, var(--keti-green) 50%, var(--keti-yellow) 100%);

    /* Sidebar colours - exact values from Figma */
    --keti-sidebar-white: #FFFFFF;
    --keti-sidebar-orange: #FFB231;
    --keti-sidebar-green: #338732;

    /* Neutrals */
    --keti-text-dark: #14111d;
    --keti-text-body: #14111d;
    --keti-text-muted: #8a8896;
    --keti-surface: #ffffff;
    --keti-surface-muted: #f7f8f7;
    --keti-border: #edeef0;

    /* Public pages (login, contact, demo) */
    --keti-orange-text: #d9820f;
    --keti-field-line: #d6d6db;

    --font-display: "Plus Jakarta Sans", "Segoe UI", sans-serif;
    --font-body: "Inter", "Segoe UI", sans-serif;
}

body {
    background-color: var(--keti-surface-muted);
    color: var(--keti-text-body);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
}

/* Desktop topbar  */
.keti-topbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.75rem;
    background: var(--keti-surface);
    border-bottom: 1px solid var(--keti-border);
}
.keti-topbar-search {
    flex: 1;
    max-width: 460px;
    position: relative;
}
.keti-topbar-search input {
    width: 100%;
    border: 1px solid var(--keti-border);
    background: var(--keti-surface-muted);
    border-radius: 999px;
    padding: 0.6rem 1rem 0.6rem 2.6rem;
    font-size: 0.88rem;
    color: var(--keti-text-body);
}
.keti-topbar-search input:focus { outline: none; border-color: var(--keti-green); background: #fff; }
.keti-topbar-search i {
    position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
    color: var(--keti-text-muted); font-size: 0.95rem;
}
.keti-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 0.85rem; }
.keti-topbar-status { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--keti-text-muted); }
.keti-topbar-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--keti-green); display: inline-block; }
.keti-topbar-user { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: inherit; }
.keti-avatar-sm {
    width: 38px; height: 38px; border-radius: 50%; object-fit: cover;
    background: var(--keti-gradient); color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.9rem; flex-shrink: 0;
}
.keti-avatar-sm img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* Camera badge over the profile-page avatar: click to choose a new photo. */
.keti-avatar-camera {
    position: absolute; right: -4px; bottom: -4px;
    width: 26px; height: 26px; border-radius: 50%;
    background: #fff; color: var(--keti-text-dark);
    border: 1px solid var(--keti-border); box-shadow: 0 2px 6px rgba(20,17,29,0.18);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; cursor: pointer; margin: 0;
}
.keti-avatar-camera:hover { background: var(--keti-yellow); }

/* Links styled as .keti-link are used across the app's templates but
   had no rule defined, so they rendered as unstyled anchors. */
.keti-link { color: var(--keti-green-dark); font-weight: 600; text-decoration: none; }

/* "Best funded / needing help" tab toggle on the homepage. */
.keti-tabgroup { display: inline-flex; gap: 0.4rem; background: var(--keti-surface-muted); padding: 0.3rem; border-radius: 999px; }
.keti-tab {
    border: none; background: transparent; padding: 0.45rem 1rem; border-radius: 999px;
    font-weight: 600; font-size: 0.85rem; color: var(--keti-text-muted); white-space: nowrap;
}
.keti-tab.active { background: var(--keti-yellow); color: #14111d; }
.keti-tab-panel { animation: keti-fade-in 0.15s ease; }
@keyframes keti-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Public-site pagination: "‹ 1 2 3 ›" pills, distinct from the internal
   admin app's Bootstrap-style Previous/Next pagination. */
.keti-pg-pills { display: flex; justify-content: center; align-items: center; gap: 0.4rem; margin-top: 2.5rem; }
.keti-pg-pill, .keti-pg-arrow {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    color: var(--keti-text-body); text-decoration: none; font-weight: 600;
    border: 1px solid var(--keti-border); background: #fff;
}
.keti-pg-pill:hover, .keti-pg-arrow:hover { background: var(--keti-surface-muted); color: var(--keti-text-body); }
.keti-pg-pill.active { background: var(--keti-yellow); border-color: var(--keti-yellow); color: #14111d; }
.keti-pg-arrow { font-size: 1.2rem; }
.keti-pg-arrow.disabled { opacity: 0.4; pointer-events: none; }
.keti-link:hover { color: var(--keti-green); text-decoration: underline; }

/* Type-ahead filter (static/js/typeahead.js): a text box whose matches
   drop down as you type, replacing*/
.keti-typeahead { position: relative; }
.keti-typeahead-menu {
    display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 1060;
    background: #fff; border: 1px solid var(--keti-border); border-radius: 0.6rem;
    box-shadow: 0 8px 24px rgba(20, 17, 29, 0.12);
    max-height: 264px; overflow-y: auto; padding: 0.25rem;
}
.keti-typeahead-item { display: flex; flex-direction: column; padding: 0.45rem 0.65rem; border-radius: 0.45rem; cursor: pointer; }
.keti-typeahead-item:hover, .keti-typeahead-item.active { background: var(--keti-green-soft); }
.keti-typeahead-label { font-weight: 600; font-size: 0.88rem; color: var(--keti-text-dark); }
.keti-typeahead-sub { font-size: 0.75rem; color: var(--keti-text-muted); }
.keti-typeahead-empty { padding: 0.5rem 0.65rem; font-size: 0.85rem; color: var(--keti-text-muted); }
.keti-topbar-user .name { font-weight: 600; font-size: 0.88rem; line-height: 1.2; color: var(--keti-text-dark); }
.keti-topbar-user .email { font-size: 0.75rem; color: var(--keti-text-muted); line-height: 1.2; }

h1, h2, h3, h4, h5, h6, .display-font {
    font-family: var(--font-display);
    color: var(--keti-text-dark);
    letter-spacing: -0.01em;
}

/* --- Logo --- */
.keti-logo { height: 40px; width: auto; display: inline-block; vertical-align: middle; border-radius: 8px; }
.keti-logo-lg { height: 72px; width: auto; }

/* ============================================================
    Internal app navbar (dashboards) 
    ============================================================ */
.keti-navbar { background: var(--keti-gradient); box-shadow: 0 2px 10px rgba(0,0,0,0.12); }
.keti-navbar .navbar-brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; font-family: var(--font-display); }
.keti-navbar .navbar-brand, .keti-navbar .nav-link { color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,0.15); }

/* ============================================================
    Public marketing navbar 
    ============================================================ */
.keti-public-navbar {
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--keti-border);
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}
/* Brand wordmark is dark type in the Keti AI designs (was yellow) */
.keti-public-navbar .navbar-brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; font-family: var(--font-display); color: var(--keti-text-dark); font-size: 1.15rem; }
.keti-public-navbar .nav-link { color: var(--keti-text-body); font-weight: 500; }
.keti-public-navbar .nav-link:hover { color: var(--keti-blue-dark); }
.keti-public-navbar .nav-link.active {
    color: var(--keti-yellow); font-weight: 700;
    text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
}

.keti-chip { display: inline-block; padding: 0.25rem 0.65rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; }
.keti-role-admin { background: var(--keti-gradient-purple); color: #fff; }
.keti-role-school { background: var(--keti-gradient-blue-green); color: #fff; }
.keti-chip-green { background: #e5f4ea; color: var(--keti-green-dark); }
.keti-chip-yellow { background: #fdf3d6; color: #8a6a00; }
.keti-chip-purple { background: var(--keti-purple-light); color: var(--keti-purple-dark); }
.keti-chip-blue { background: #dfeaf6; color: var(--keti-blue-dark); }
.keti-chip-gray { background: #eceeea; color: #555; }

/* ============================================================
    Buttons
    ============================================================ */
.btn { border-radius: 0.6rem; font-weight: 600; }

.btn-keti, .btn-primary, .btn-success, .btn-warning {
    background: var(--keti-green) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(25, 169, 74, 0.22);
}
.btn-keti:hover, .btn-keti:focus,
.btn-primary:hover, .btn-primary:focus,
.btn-success:hover, .btn-success:focus,
.btn-warning:hover, .btn-warning:focus {
    filter: brightness(0.95); color: #fff !important;
}

.btn-keti-purple { background: var(--keti-green) !important; border: none; color: #fff !important; font-weight: 600; box-shadow: 0 4px 12px rgba(25, 169, 74, 0.22); }
.btn-keti-purple:hover { filter: brightness(0.95); color: #fff !important; }

.btn-keti-dark, .btn-dark {
    background: var(--keti-green) !important;
    border: none;
    color: #fff !important;
    font-weight: 600;
    padding: 0.55rem 1.4rem;
    border-radius: 0.6rem;
    box-shadow: 0 6px 18px rgba(25, 169, 74, 0.22);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-keti-dark:hover, .btn-dark:hover {
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(25, 169, 74, 0.3);
}

.btn-outline-secondary, .btn-secondary, .btn-light {
    background: var(--keti-surface-muted) !important;
    border: 1px solid var(--keti-border) !important;
    color: var(--keti-text-body) !important;
    font-weight: 600;
}
.btn-outline-secondary:hover, .btn-secondary:hover, .btn-light:hover {
    background: #ececec !important;
    color: var(--keti-text-body) !important;
}

.btn-keti-outline { border: 2px solid var(--keti-green); color: var(--keti-green-dark); background: transparent; font-weight: 600; }
.btn-keti-outline:hover { background: var(--keti-green); color: #fff; }

/* Yellow action button on the public pages (Submit / Login) */
.btn-keti-submit {
    background: var(--keti-yellow) !important;
    color: #14111d !important;
    border: none !important;
    font-weight: 600;
    padding: 0.5rem 1.6rem;
    font-size: 0.9rem;          /* also overrides btn-lg's larger text */
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(247, 168, 56, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-keti-submit:hover,
.btn-keti-submit:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(247, 168, 56, 0.42);
}

/* Keep public-site action buttons consistent with the Donate now CTA. */
.keti-public-site .btn {
    background: var(--keti-yellow) !important;
    border-color: var(--keti-yellow) !important;
    color: #14111d !important;
    box-shadow: 0 4px 12px rgba(247, 168, 56, 0.3);
}
.keti-public-site .btn:hover,
.keti-public-site .btn:focus-visible {
    background: #efa02a !important;
    border-color: #efa02a !important;
    color: #14111d !important;
    box-shadow: 0 8px 20px rgba(247, 168, 56, 0.4);
}

/* Small icon-only row actions (Schools/Users tables: view, edit, assign,
   delete) - a plain icon that gets a soft background on hover, in place
   of a full text button, to keep dense table rows compact. */
.btn-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 0.5rem;
    border: none; background: transparent;
    font-size: 0.95rem; line-height: 1; cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.btn-icon:hover { background: var(--keti-surface-muted); }
.btn-icon.text-danger:hover { background: #fbe4e4; }
.btn-icon.text-primary:hover { background: #eef1fb; }

/* ============================================================
    Auth screens (Login) - Keti AI design
    ============================================================ */
.keti-auth-page {
    position: relative;
    overflow: hidden;
    min-height: 78vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    background: #ffffff;
}
/* Faded logo behind the card (desktop only) - the logo image only, no extra
   text. The logo comes from the --auth-watermark variable set in login.html. */
.keti-auth-page::before {
    content: "";
    position: absolute; left: 60px;  top: -60px;   
    width: 1200px; height: 850px;
    background: var(--auth-watermark, url("../img/ketiai-co-logo.8ef83ca28f24.png")) center / contain no-repeat;
    opacity: 0.14;
    filter: grayscale(1);
    pointer-events: none;
}
@media (max-width: 991.98px) {
    .keti-auth-page::before { display: none; }
}

.keti-auth-card {
    position: relative; z-index: 1;
    width: 100%; max-width: 420px;
    background: var(--keti-surface);
    border-radius: 1.25rem;
    box-shadow: 0 1.25rem 3rem rgba(20, 17, 29, 0.12);
    padding: 2.25rem 2rem 2rem;
}
.keti-auth-logo-wrap { display: flex; justify-content: center; margin-bottom: 1rem; }
.keti-auth-brand {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    font-weight: 600; font-size: 1.05rem; margin-bottom: 1rem;
}
.keti-auth-title { font-size: 1.6rem; font-weight: 600; margin-bottom: 0.25rem; }
.keti-auth-sub { color: var(--keti-text-muted); font-size: 0.8rem; margin-bottom: 0; }

.keti-auth-card .form-label { font-size: 0.82rem; font-weight: 500; margin-bottom: 0.35rem; }
.keti-auth-card input[type="email"],
.keti-auth-card input[type="text"],
.keti-auth-card input[type="password"] {
    width: 100%;
    border: 1px solid var(--keti-border);
    border-radius: 0.6rem;
    background: #fff;
    padding: 0.7rem 0.9rem;
    font-size: 0.92rem;
}
.keti-auth-card input:focus {
    outline: none;
    border-color: var(--keti-yellow);
    box-shadow: 0 0 0 3px rgba(247, 168, 56, 0.22);
}
.keti-password { position: relative; }
.keti-password input { padding-right: 2.75rem !important; }
.keti-password-toggle {
    position: absolute; top: 50%; right: 0.5rem; transform: translateY(-50%);
    border: 0; background: transparent; padding: 0.35rem 0.5rem;
    color: var(--keti-text-muted); cursor: pointer; line-height: 1;
}
.keti-password-toggle:hover { color: var(--keti-text-dark); }

.keti-auth-link { color: var(--keti-orange-text); font-size: 0.75rem; font-weight: 600; text-decoration: none; }
.keti-auth-link:hover { text-decoration: underline; color: var(--keti-orange-text); }
.keti-auth-foot { text-align: center; font-size: 0.75rem; color: var(--keti-text-muted); margin: 1rem 0 0; }

/* Status icon on the "check your email" / "password updated" cards */
.keti-auth-icon { display: block; font-size: 2.75rem; line-height: 1; color: var(--keti-yellow); margin-bottom: 0.75rem; }

/* 6-digit verification code box (verify_otp.html) */
.keti-auth-card input.keti-otp-input {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.6rem;
    padding-left: 1.5rem;
}

/* ============================================================
   Dashboard stat cards
   ============================================================ */
.keti-stat-card {
    border: 1px solid var(--keti-border);
    border-radius: 1rem;
    color: var(--keti-text-dark);
    background: var(--keti-surface);
    box-shadow: 0 0.35rem 1.25rem rgba(20,17,29,0.04);
    padding: 1.25rem 1.4rem;
}
.keti-stat-card .stat-value {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 700;
}
.keti-stat-card .text-uppercase.small {
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    color: var(--keti-text-muted);
    font-weight: 600;
}
.keti-stat-card-icon {
    width: 40px; height: 40px; border-radius: 0.6rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; margin-bottom: 0.75rem;
}
.keti-stat-card .stat-trend {
    display: inline-flex; align-items: center; gap: 0.2rem;
    font-size: 0.72rem; font-weight: 700; padding: 0.1rem 0.5rem;
    border-radius: 999px; background: var(--keti-green-soft); color: var(--keti-green-dark);
}
.keti-stat-card .stat-trend.down { background: #fbe4e4; color: #a12727; }
.keti-stat-card.alt .keti-stat-card-icon { background: var(--keti-green-soft); color: var(--keti-green-dark); }
.keti-stat-card.purple .keti-stat-card-icon { background: #eef1fb; color: var(--keti-blue-dark); }
.keti-stat-card.blue .keti-stat-card-icon { background: #dfeaf6; color: var(--keti-blue-dark); }
.keti-stat-card.dark .keti-stat-card-icon { background: var(--keti-yellow-soft); color: #8a6a00; }

/* Chart cards */
.keti-chart-card {
    background: var(--keti-surface);
    border: 1px solid var(--keti-border);
    border-radius: 1rem;
    padding: 1.4rem 1.5rem;
    box-shadow: 0 0.35rem 1.25rem rgba(20,17,29,0.04);
    height: 100%;
    display: flex; flex-direction: column;
}
/* The canvas sits in a box that grows to fill whatever is left of the
   card (so a chart is never a small drawing floating above empty card
   space), and is taken out of flow so Chart.js sizes to the box rather
   than the box sizing itself to the canvas. */
.keti-chart-body { position: relative; flex: 1 1 auto; min-height: 280px; }
.keti-chart-body canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.keti-chart-card h6 { font-weight: 700; color: var(--keti-text-dark); }
.keti-chart-card .chart-subtitle { font-size: 0.78rem; color: var(--keti-text-muted); margin-top: 1rem; margin-bottom: 1rem; }

/* Generic content cards, e.g. profile / catalogue / forms */
.keti-card {
    background: var(--keti-surface);
    border: 1px solid var(--keti-border);
    border-radius: 1rem;
    box-shadow: 0 0.35rem 1.25rem rgba(20,17,29,0.04);
}
.card { border: 1px solid var(--keti-border); border-radius: 1rem; }

/* ============================================================
   Tables — green header, pill status badges
   ============================================================ */
.table thead th,
.table thead.table-light {
    background: var(--keti-green) !important;
    color: #fff !important;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    font-weight: 700;
    border: none;
    padding: 0.9rem 1rem;
}
.table thead tr:first-child th:first-child { border-top-left-radius: 0.75rem; }
.table thead tr:first-child th:last-child { border-top-right-radius: 0.75rem; }
.table td { padding: 0.85rem 1rem; vertical-align: middle; border-color: var(--keti-border); }
.table-hover tbody tr:hover { background: var(--keti-surface-muted); }

.badge { font-weight: 600; font-size: 0.72rem; padding: 0.35em 0.7em; border-radius: 999px; }
.badge.bg-success, .badge.text-bg-success { background: var(--keti-green-soft) !important; color: var(--keti-green-dark) !important; }
.badge.bg-warning, .badge.text-bg-warning { background: var(--keti-yellow-soft) !important; color: #8a6a00 !important; }
.badge.bg-danger, .badge.text-bg-danger { background: #fbe4e4 !important; color: #a12727 !important; }
.badge.bg-secondary, .badge.text-bg-secondary { background: #eef0ee !important; color: var(--keti-text-muted) !important; }

/* ============================================================
   Pagination
   ============================================================ */
.pagination .page-link {
    color: var(--keti-text-body);
    border-color: var(--keti-border);
}
.pagination .page-item.active .page-link {
    background: var(--keti-green); border-color: var(--keti-green); color: #fff;
}
.pagination .page-link:hover { background: var(--keti-surface-muted); color: var(--keti-text-body); }
.pagination .page-item.disabled .page-link { color: var(--keti-text-muted); background: transparent; border-color: var(--keti-border); }

/* ============================================================
   Modals
   ============================================================ */
.modal-content { border: none; border-radius: 1rem; }
.modal-header { border-bottom: 1px solid var(--keti-border); }
.modal-footer { border-top: 1px solid var(--keti-border); }
.keti-modal-icon {
    width: 40px; height: 40px; border-radius: 0.7rem;
    background: var(--keti-green-soft); color: var(--keti-green-dark);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.1rem; flex-shrink: 0;
}

/* ============================================================
    Progress bars
    ============================================================ */
.progress-bar.keti-progress { background: var(--keti-gradient); }
.keti-progress-track { height: 10px; border-radius: 999px; background: #ece8f5; overflow: hidden; }
.keti-progress-fill { height: 100%; border-radius: 999px; background: var(--keti-gradient); transition: width 0.4s ease; }
.keti-progress-circle {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: conic-gradient(var(--keti-green) var(--progress), #ece8f5 0);
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}
.keti-progress-circle::before {
    content: "";
    position: absolute;
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 50%;
    background: #fff;
}
.keti-progress-circle { position: relative; }
.keti-progress-circle span { position: relative; z-index: 1; font-size: 0.7rem; font-weight: 700; }

/* ============================================================
    PUBLIC SITE
    ============================================================ */

/* --- Hero --- */
.keti-hero {
    background: var(--keti-gradient-brand);
    color: var(--keti-text-body);
    padding: 5.5rem 0 6rem;
    position: relative;
    overflow: hidden;
}
.keti-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(244,196,48,0.18), transparent 55%);
    pointer-events: none;
}
.keti-hero h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 800; color: var(--keti-text-dark); line-height: 1.12; }
.keti-hero p.lead { color: var(--keti-text-body); font-size: 1.15rem; max-width: 560px; }
.keti-hero-stats { display: flex; gap: 2.5rem; margin-top: 2.5rem; flex-wrap: wrap; }
.keti-hero-stat .value { font-family: var(--font-display); font-size: 1.8rem; font-weight: 800; color: var(--keti-text-dark); }
.keti-hero-stat .label { color: var(--keti-text-muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }

/* Public-site "Donate now" CTA - orange, distinct from the internal
   app's green primary buttons (.btn-keti-dark), matching the public
   designs. Kept as its own class so it never affects the internal
   dashboards, which share base.html. */
.btn-keti-donate {
    background: var(--keti-yellow); border: none; color: #14111d; font-weight: 700;
    padding: 0.45rem 1.25rem; font-size: 0.9rem; border-radius: 0.6rem;
    box-shadow: 0 6px 18px rgba(247, 168, 56, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-keti-donate:hover {
    color: #14111d; transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(247, 168, 56, 0.42);
}

/* Floating dashboard-preview card in the home hero (live total + live 7-day trend). */
.keti-hero-preview-card {
    background: #fff; border-radius: 1rem; border: 1px solid var(--keti-border);
    box-shadow: 0 1.5rem 3rem rgba(20, 17, 29, 0.12);
    padding: 1.25rem 1.4rem; width: 100%; max-width: 300px;
}
.keti-hero-preview-card .greeting { font-weight: 700; color: var(--keti-text-dark); }
.keti-hero-preview-card .stat-value { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: var(--keti-text-dark); }
.keti-hero-preview-card canvas { max-height: 60px; }

/* School avatar in the public tables: initials in a circle, or - when the
   requirement has a photo the photo is shown */
.keti-school-avatar {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
    background: var(--keti-green-soft); color: var(--keti-green-dark);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.85rem;
}
.keti-school-avatar.has-image {
    border-radius: 0.55rem; background: #fff; border: 1px solid var(--keti-border); padding: 2px;
}
.keti-school-avatar.has-image img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* --- Section headers --- */
.keti-section-eyebrow { color: var(--keti-text-dark); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; }
.keti-section-title { font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.2rem); margin-top: 0.4rem; color: var(--keti-text-dark); }

/* --- Campaign / requirement card --- */
.keti-campaign-card {
    background: #fff;
    border: 1px solid var(--keti-border);
    border-radius: 1.1rem;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    text-decoration: none;
    color: inherit;
}
.keti-campaign-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(20,17,29,0.1);
    color: inherit;
}

.keti-campaign-cover {
    display: block;
    height: 180px !important;
    background-color: #ffffff !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    position: relative;
    box-sizing: border-box !important;
    text-decoration: none;
}

.keti-campaign-cover img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block;
}

.keti-campaign-cover.cover-purple { background: var(--keti-gradient-purple); }
.keti-campaign-cover.cover-blue { background: var(--keti-gradient-blue-green); }
.keti-campaign-status {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: rgba(255,255,255,0.92);
    color: var(--keti-yellow);
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.keti-campaign-body { padding: 1.15rem 1.25rem 1.35rem; flex: 1; display: flex; flex-direction: column; background: var(--keti-surface-muted); }
.keti-campaign-school { font-size: 0.75rem; color: var(--keti-text-dark); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.2rem; }
.keti-campaign-title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--keti-text-dark); margin-bottom: 0.6rem; line-height: 1.3; }
.keti-campaign-stats { display: flex; justify-content: space-between; font-size: 0.85rem; margin-top: 0.6rem; }
.keti-campaign-stats .raised { font-weight: 700; color: var(--keti-text-dark); }
.keti-campaign-stats .percent { font-weight: 700; color: var(--keti-text-dark); }
.keti-campaign-meta { font-size: 0.78rem; color: var(--keti-text-muted); margin-top: 0.5rem; }

/* --- Donor avatar (initials) --- */
.keti-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 0.9rem;
    flex-shrink: 0;
}
.keti-avatar-list .keti-avatar { margin-left: -10px; border: 2px solid #fff; }
.keti-avatar-list .keti-avatar:first-child { margin-left: 0; }
.keti-avatar-purple { background: var(--keti-gradient-purple); }
.keti-avatar-green { background: var(--keti-gradient); }
.keti-avatar-blue { background: var(--keti-gradient-blue-green); }
.keti-avatar-dark { background: var(--keti-gradient-dark); }

/* --- Campaign detail page --- */
.keti-detail-hero { background: var(--keti-yellow); color: var(--keti-text-dark); padding: 2.5rem 0; }
.keti-donate-panel { background: #fff; border: 1px solid var(--keti-border); border-radius: 1.1rem; padding: 1.75rem; box-shadow: 0 10px 40px rgba(20,17,29,0.08); }
.keti-donate-panel .amount-value { font-family: var(--font-display); font-weight: 800; font-size: 2rem; color: var(--keti-text-dark); }
.keti-amount-btn {
    border: 1.5px solid var(--keti-border);
    background: #fff;
    border-radius: 0.6rem;
    padding: 0.55rem 0.4rem;
    font-weight: 600;
    color: var(--keti-text-dark);
    transition: all 0.15s ease;
}
.keti-amount-btn:hover, .keti-amount-btn.active {
    border-color: var(--keti-green);
    background: #e5f4ea;
    color: var(--keti-green-dark);
}
.keti-donor-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--keti-border); }
.keti-donor-row:last-child { border-bottom: none; }

/* --- How it works steps --- */
.keti-step-num {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--keti-green); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 800; font-size: 1.1rem;
    margin-bottom: 1rem;
}

/* ============================================================
    Footer - Keti AI design: black, muted blue-grey text, white headings
    ============================================================ */
.keti-footer {
    --keti-footer-muted: #6b7a99;
    background: #000;
    color: var(--keti-footer-muted);
    padding: 3rem 0 1.75rem;
}
.keti-footer-brand {
    display: inline-flex; align-items: center; gap: 0.6rem;
    color: #fff; font-size: 1.3rem; font-weight: 500; text-decoration: none;
    margin-bottom: 1rem;
}
.keti-footer-brand:hover { color: #fff; }
.keti-footer-text { color: var(--keti-footer-muted); font-size: 0.8rem; line-height: 1.7; max-width: 300px; margin: 0; }
.keti-footer-heading {
    color: #fff; font-family: var(--font-body);
    font-size: 1.1rem; font-weight: 400; letter-spacing: 0;
    margin: 0.35rem 0 1.1rem;
}
.keti-footer-nav { list-style: none; margin: 0; padding: 0; }
.keti-footer-nav li { margin-bottom: 0.7rem; }
.keti-footer-nav a { color: var(--keti-footer-muted); font-size: 0.8rem; text-decoration: none; transition: color 0.15s ease; }
.keti-footer-nav a:hover,
.keti-footer-nav a:focus-visible { color: var(--keti-yellow); }
.keti-footer-bottom {
    display: flex; align-items: center; justify-content: center; gap: 0.6rem;
    margin-top: 2rem; padding-top: 1.25rem;
    border-top: 1px solid #1c1c1c;
    color: var(--keti-footer-muted); font-size: 0.75rem;
}

/* Generic white link for use on dark/coloured backgrounds elsewhere */
.keti-footer-link { color: #fff; text-decoration: none; }
.keti-footer-link:hover { color: var(--keti-yellow); }

/* ============================================================
    PUBLIC PAGES v2 - Keti AI designs (Login, Contact, Request a demo)
    ============================================================ */

/* Poppins on public pages only (scoped, so dashboards keep their fonts) */
.keti-public,
.keti-public-navbar,
.keti-footer {
    --font-display: "Poppins", "Segoe UI", sans-serif;
    --font-body: "Poppins", "Segoe UI", sans-serif;
    font-family: var(--font-body);
}

/* --- Page shell --- */
.keti-public { background: #fff; color: var(--keti-text-dark); }
.keti-public-section { padding: 4rem 0 5rem; min-height: 72vh; }

.keti-eyebrow { font-size: 0.85rem; font-weight: 500; margin-bottom: 0.75rem; }
.keti-public-title {
    font-weight: 600;
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    line-height: 1.25;
    margin-bottom: 1rem;
}
.keti-public-lead {
    color: var(--keti-text-muted);
    font-size: 0.9rem;
    line-height: 1.7;
    max-width: 460px;
    margin-bottom: 2rem;
}

/* --- Underline form fields (Contact, Demo) --- */
.keti-field { margin-bottom: 1.6rem; }
.keti-field label {
    display: block;
    font-size: 0.82rem;
    font-weight: 500;
    margin-bottom: 0.1rem;
    color: var(--keti-text-dark);
}
.keti-field .req { color: #d64545; margin-left: 1px; }
.keti-field input,
.keti-field textarea {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--keti-field-line);
    border-radius: 0;
    background: transparent;
    padding: 0.45rem 0;
    font-size: 0.92rem;
    color: var(--keti-text-dark);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.keti-field textarea { resize: vertical; min-height: 72px; }
.keti-field input:focus,
.keti-field textarea:focus {
    outline: none;
    border-bottom-color: var(--keti-yellow);
    box-shadow: 0 1px 0 0 var(--keti-yellow);
}

/* --- Contact --- */
.keti-contact-item { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.4rem; }
.keti-contact-item i { font-size: 1.4rem; line-height: 1.2; width: 28px; flex-shrink: 0; }
.keti-contact-item .label { display: block; font-size: 0.78rem; color: var(--keti-text-muted); }
.keti-contact-item .value { display: block; font-size: 0.92rem; font-weight: 600; }

.keti-contact-card {
    background: #fff;
    border: 1px solid var(--keti-border);
    border-radius: 1.25rem;
    padding: 2rem 2rem 2.25rem;
    box-shadow: 0 1.25rem 3rem rgba(20, 17, 29, 0.08);
}
.keti-contact-card h2 { font-size: 1rem; font-weight: 600; margin-bottom: 1.75rem; }

/* --- Request a demo --- */
.keti-demo-preview {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: 1rem;
    overflow: hidden;
    background: var(--keti-gradient-brand);   /* shows if the image is missing */
    box-shadow: 0 1.5rem 3rem rgba(20, 17, 29, 0.14);
}
.keti-demo-preview img,
.keti-demo-preview iframe {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0; object-fit: cover;
}
.keti-demo-play {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 64px; height: 64px; border-radius: 50%;
    border: 0; background: #fff; color: var(--keti-text-dark);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.9rem; padding-left: 4px;
    box-shadow: 0 8px 24px rgba(20, 17, 29, 0.25);
    transition: transform 0.15s ease;
}
.keti-demo-play:hover,
.keti-demo-play:focus-visible { transform: translate(-50%, -50%) scale(1.07); }
.keti-demo-note {
    position: absolute; left: 0; right: 0; bottom: 0.9rem;
    text-align: center; font-size: 0.8rem; font-weight: 500; color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

/* --- Requirement detail + Donate pages --- */
.keti-field select {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--keti-field-line);
    border-radius: 0;
    background-color: transparent;
    padding: 0.45rem 0;
    font-size: 0.92rem;
    color: var(--keti-text-dark);
}
.keti-field select:focus {
    outline: none;
    border-bottom-color: var(--keti-yellow);
    box-shadow: 0 1px 0 0 var(--keti-yellow);
}
.keti-field-amount input { font-size: 1.5rem; font-weight: 600; padding: 0.6rem 0; }

/* Title inside a form card (donate page): smaller than a full-page heading */
.keti-form-card .keti-public-title {
    font-size: clamp(1.2rem, 2vw, 1.4rem);
    font-weight: 600;
    line-height: 1.35;
}

.keti-form-card {
    background: #fff;
    border: 1px solid var(--keti-border);
    border-radius: 1.25rem;
    padding: 2.25rem 2.25rem 2.5rem;
    box-shadow: 0 1.25rem 3rem rgba(20, 17, 29, 0.08);
}

/* Checkboxes on public pages use the brand yellow */
.keti-public .form-check-input:checked { background-color: var(--keti-yellow); border-color: var(--keti-yellow); }
.keti-public .form-check-input:focus { border-color: var(--keti-yellow); box-shadow: 0 0 0 3px rgba(247, 168, 56, 0.25); }

/* Neutral progress track on public pages (the global one is lavender) */
.keti-public .keti-progress-track { background: #ececef; }

/* Total row under the items table */
.keti-public .table tfoot td {
    background-color: var(--keti-surface-muted);
    border-top: 1px solid var(--keti-border);
    font-weight: 700;
    padding-top: 1rem; padding-bottom: 1rem;
}

/* Friendly empty state (no donors yet) */
.keti-empty {
    border: 1px dashed var(--keti-field-line);
    border-radius: 1rem;
    padding: 1.75rem 1rem;
    text-align: center;
    color: var(--keti-text-muted);
    font-size: 0.9rem;
}
.keti-empty i { display: block; font-size: 1.6rem; color: var(--keti-yellow); margin-bottom: 0.5rem; }

@media (max-width: 575.98px) {
    .keti-form-card { padding: 1.5rem 1.25rem 1.75rem; }
    .keti-public-section { padding: 2.5rem 0 3.5rem; }
    .keti-contact-card { padding: 1.5rem 1.25rem 1.75rem; }
}
@media (prefers-reduced-motion: reduce) {
    .btn-keti-submit, .keti-demo-play { transition: none; }
}

/* ============================================================
    AUTHENTICATED APP SHELL - vertical left sidebar
    ============================================================ */
:root { 
    /* Matches Figma Inspect width (19.6875rem = 315px) */
    --keti-sidebar-w: 315px; 
}

.keti-sidebar {
    width: var(--keti-sidebar-w) !important;
    border-right: 1px solid var(--keti-border);
}
@media (min-width: 992px) {
    .keti-sidebar {
        position: fixed !important;
        top: 0 !important; left: 0 !important; bottom: 0 !important;
        height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
        z-index: 1030;
    }
    .keti-app-main { margin-left: var(--keti-sidebar-w); }
    .keti-topbar { margin-left: var(--keti-sidebar-w); position: sticky; top: 0; z-index: 1010; }
}

.keti-sidebar-brand {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 1.15rem 1.25rem;
    font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
    color: var(--keti-text-dark);
    border-bottom: 1px solid var(--keti-border);
    justify-content: center;
}
/* Sidebar logo - Figma: 6.1875rem x 7.25rem (99:116) */
.keti-sidebar-brand .keti-logo,
.keti-sidebar-brand img {
    width: 6.1875rem;
    height: 7.25rem;
    aspect-ratio: 99 / 116;
    object-fit: contain;
    border-radius: 0;
}
/* Flex properties force the footer firmly to the baseline */
.keti-sidebar-body { display: flex !important; flex-direction: column !important; flex: 1 0 auto !important; padding: 0; position: relative; min-height: 0; }
.keti-sidebar .offcanvas-header { background: var(--keti-surface); border-bottom: 1px solid var(--keti-border); }

.keti-sidebar-nav-label {
    padding: 1rem 1.5rem 0.4rem;
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--keti-text-muted);
}
.keti-sidebar-nav { list-style: none; margin: 0; padding: 0.25rem 1.25rem 1rem; flex: 1; }
.keti-sidebar-nav li { margin-bottom: 0.25rem; }
.keti-sidebar-nav a {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.7rem 0.9rem;
    min-height: 44px;
    border-radius: 12px !important; /* Matches Figma var(--Radius-radius_0) */
    color: #000;
    text-decoration: none;
    /* Figma typography: Manrope 13px / 600 / line-height 24px */
    font-family: "Manrope", "Segoe UI", sans-serif;
    font-size: 0.8125rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.5rem;
    letter-spacing: 0;
    transition: background 0.15s ease, color 0.15s ease;
}
.keti-sidebar-nav a i { font-size: 1.05rem; }

/* ------------------------------------------------------------
   Sidebar colours. Inactive links dark on the white area; the
   active link is the Figma orange (#FFB231) with dark text;
   hover is a soft tint. !important only where Bootstrap's
   offcanvas rules would otherwise win.
   ------------------------------------------------------------ */
.keti-sidebar .keti-sidebar-nav-label { color: #333 !important; font-weight: 700; }
.keti-sidebar .keti-sidebar-nav a {
    color: #000 !important;
    font-weight: 600 !important;
    background: #ffffff !important;
}
.keti-sidebar .keti-sidebar-nav a:hover {
    background: #ffffff !important;
    color: #111 !important;
}
.keti-sidebar .keti-sidebar-nav a.active {
    background: var(--keti-sidebar-orange) !important;
    color: #14111d !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(255, 178, 49, 0.25);
}

/* ------------------------------------------------------------
   Sidebar gradient - anchored to the bottom of the sidebar so the
   green remains at the bottom and the fade never drifts into the
   middle of the navigation on shorter windows.
   ------------------------------------------------------------ */
.keti-sidebar,
.keti-sidebar.offcanvas,
.keti-sidebar.offcanvas-lg {
    background-color: #ffffff !important;
    background-image: none !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}
.keti-sidebar::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 150px;
    background: linear-gradient(
        0deg,
        var(--keti-sidebar-green) 0%,
        #40892F 22%,
        #8B9524 42%,
        #E3A724 60%,
        var(--keti-sidebar-orange) 68%,
        #FFE0A4 82%,
        #FFF8EB 92%,
        var(--keti-sidebar-white) 100%
    );
    pointer-events: none;
    z-index: 0;
}
/* Wrappers stay transparent so the gradient carries through */
.keti-sidebar .offcanvas-body,
.keti-sidebar .keti-sidebar-body,
.keti-sidebar .keti-sidebar-footer {
    background: transparent !important;
    position: relative;
    z-index: 1;
}

/* ------------------------------------------------------------
   Short windows (under ~780px tall): the Figma frame is 1024px
   tall, so on a shorter window the full-size logo and menu would
   run into the gradient. Compact the logo and menu rows so the
   menu ends at about 400px and the gradient keeps its Figma
   proportions instead of being squeezed.
   ------------------------------------------------------------ */
@media (max-height: 780px) {
    .keti-sidebar-brand { padding-top: 0.75rem; padding-bottom: 0.75rem; }
    .keti-sidebar-brand .keti-logo,
    .keti-sidebar-brand img { width: 3.8333rem; height: 4.5rem; }
    .keti-sidebar-nav-label { padding-top: 0.75rem; }
    .keti-sidebar-nav a { min-height: 40px; padding-top: 0.5rem; padding-bottom: 0.5rem; }
}


/* ------------------------------------------------------------
   Account block at the bottom: avatar + name/role + a single
   dropdown chevron. No box, no border, no separate logout icon -
   "Edit profile" and "Log out" live in the dropdown it opens.
   ------------------------------------------------------------ */
.keti-sidebar-footer { padding: 1rem 0.9rem 0.9rem; margin-top: auto; }
.keti-sidebar-footer .dropdown { width: 100%; }
.keti-sidebar-user {
    display: flex; align-items: center; gap: 0.65rem; width: 100%;
    padding: 0.35rem 0.25rem; border: none; background: transparent;
    color: #fff; text-align: left; cursor: pointer; min-width: 0;
}
.keti-sidebar-user:hover, .keti-sidebar-user:focus { color: #fff; opacity: 0.92; outline: none; }
.keti-sidebar-avatar {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
    background: #b0392f; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.9rem;
}
.keti-sidebar-avatar img { width: 100%; height: 100%; object-fit: cover; }
.keti-sidebar-user-text { min-width: 0; flex: 1 1 auto; line-height: 1.2; }
.keti-sidebar-user-name { display: block; font-weight: 600; font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.keti-sidebar-role { display: block; font-size: 0.72rem; color: rgba(255,255,255,0.9); }
.keti-sidebar-user-chevron { flex-shrink: 0; font-size: 0.8rem; color: rgba(255,255,255,0.9); }
.keti-sidebar-footer .dropdown-menu { min-width: 100%; border-radius: 0.6rem; border: 1px solid var(--keti-border); box-shadow: 0 8px 24px rgba(20,17,29,0.14); }

.keti-mobile-topbar {
    background: var(--keti-surface);
    border-bottom: 1px solid var(--keti-border);
    position: sticky; top: 0; z-index: 1020;
    padding: 0.5rem 0.75rem;
}
.keti-mobile-topbar .keti-logo { height: 32px; }
.keti-mobile-topbar .btn-link, .keti-mobile-topbar i { color: var(--keti-text-dark) !important; text-shadow: none; }

/* --- Mobile responsiveness pass --- */
@media (max-width: 991.98px) {
    .keti-app-main { padding-bottom: 1.5rem; }
    .keti-stat-card .stat-value { font-size: 1.5rem; }
    .keti-hero { padding: 3rem 0 3.5rem; }
    .keti-hero-stats { gap: 1.5rem; }
    .keti-donate-panel { position: static !important; }
}
@media (max-width: 575.98px) {
    .table-responsive-sm-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .keti-card table { min-width: 520px; }
    .keti-stat-card .stat-value { font-size: 1.35rem; }
    h1.h3 { font-size: 1.35rem; }
}

/* --- Public fundraising homepage --- */
.dhq-section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--keti-green-dark);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}
.keti-public-site .keti-tab { background: var(--keti-yellow-soft); color: #5c451f; }
.keti-public-site .keti-tab.active { background: var(--keti-yellow); color: #14111d; }
.keti-public-site .keti-demo-play { background: var(--keti-yellow); }
.dhq-home-section,
.dhq-home-rankings { padding: clamp(3.5rem, 6vw, 5.5rem) 0; }
.dhq-home-section { background: #fff; }
.dhq-home-rankings { background: #f7faf7; }
.dhq-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.dhq-section-heading h2 {
    margin: 0.35rem 0 0.45rem;
    color: #1d2b21;
    font-family: var(--font-display);
    font-size: clamp(1.65rem, 3vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.04em;
}
.dhq-home-section .dhq-section-heading h2 {
    font-family: "Poppins", sans-serif;
    font-size: 36px;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 0;
}
@media (max-width: 575.98px) {
    .dhq-home-section .dhq-section-heading h2 {
        font-size: 28px;
        line-height: 1.15;
    }
}
.dhq-section-heading p { margin: 0; color: #737e75; }
.dhq-text-link { align-self: center; flex: 0 0 auto; color: var(--keti-green-dark); font-size: 0.9rem; font-weight: 700; text-decoration: none; }
.dhq-text-link:hover { color: #084d22; text-decoration: underline; }
.dhq-campaign-card {
    display: flex;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 1.1rem;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, #c5e8cf, #f7dfb4 52%, #c5e8cf) border-box;
    box-shadow: 0 6px 20px rgba(22, 42, 28, 0.045);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.dhq-campaign-card:hover { transform: translateY(-4px); box-shadow: 0 18px 35px rgba(22, 42, 28, 0.1); }
.dhq-campaign-image-link { display: block; color: inherit; text-decoration: none; }
.dhq-campaign-image {
    position: relative;
    display: grid;
    height: 220px;
    place-items: center;
    overflow: hidden;
    background: #f7f8f7;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--keti-green-dark);
    font-size: 3rem;
}
.dhq-requirement-image.has-image {
    display: block;
    height: auto;
    padding: 12px;
    background: #fff;
    border-radius: 0.75rem;
}
.dhq-campaign-image-artwork {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.65rem;
}
.dhq-campaign-location {
    position: absolute;
    z-index: 1;
    bottom: 0.8rem;
    left: 0.85rem;
    padding: 0.35rem 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: #344238;
    font-size: 0.72rem;
    font-weight: 700;
}
.dhq-campaign-content { display: flex; flex: 1; flex-direction: column; padding: 1.25rem; }
.dhq-campaign-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.4rem; }
.dhq-campaign-school { margin-bottom: 0.4rem; color: #1d2b21; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.dhq-campaign-card-meta .dhq-campaign-school { margin-bottom: 0; }
.dhq-campaign-state { flex: 0 0 auto; padding: 0.25rem 0.55rem; border-radius: 999px; background: #eef3ee; color: #4d5c50; font-size: 0.65rem; font-weight: 750; line-height: 1.2; }
.dhq-campaign-state-partially_funded { background: #fff2d8; color: #79500b; }
.dhq-campaign-state-fully_funded { background: #e8f5eb; color: #176b31; }
.dhq-campaign-state-closed { background: #eef0f2; color: #56616b; }
.dhq-campaign-content h3 { margin: 0 0 0.4rem; font-family: var(--font-display); font-size: 1.08rem; font-weight: 800; line-height: 1.35; }
.dhq-campaign-content h3 a { color: #1d2b21; text-decoration: none; }
.dhq-campaign-content h3 a:hover { color: var(--keti-green-dark); }
.dhq-campaign-items { display: grid; gap: 0.35rem; margin: 0 0 1.05rem; color: #79837b; font-size: 0.82rem; line-height: 1.55; }
.dhq-campaign-item .badge { display: inline-block; margin-left: 0.25rem; font-size: 0.68rem; vertical-align: baseline; }
.dhq-campaign-item-funding,
.dhq-item-quantity-progress { color: #7040a0; font-weight: 600; }
.dhq-campaign-item-funding { display: block; margin-left: 0.25rem; font-size: 0.74rem; }
.dhq-campaign-funding { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.6rem; }
.dhq-campaign-progress-circle {
    position: relative;
    display: grid;
    width: 3.25rem;
    height: 3.25rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(#27a653 var(--progress), #edf1ed 0);
}
.dhq-campaign-progress-circle::before {
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: #fff;
    content: "";
}
.dhq-campaign-progress-circle span { position: relative; color: #25352a; font-size: 0.68rem; font-weight: 750; }
.dhq-campaign-location-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 0.65rem; }
.dhq-campaign-location-inline { margin-right: auto; color: #6e7b71; font-size: 0.72rem; white-space: nowrap; }
.dhq-campaign-location-inline i { margin-right: 0.15rem; color: #d9863f; }
.dhq-campaign-raised { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem; }
.dhq-campaign-raised strong { color: #25352a; font-size: 0.92rem; }
.dhq-campaign-raised span { color: #7e887f; font-size: 0.77rem; }
.dhq-campaign-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: auto; padding-top: 1.1rem; }
.dhq-campaign-footer > span { color: #6e7b71; font-size: 0.77rem; font-weight: 600; }
.dhq-campaign-footer > span i { margin-right: 0.25rem; color: #d9863f; }
.dhq-campaign-footer > .dhq-campaign-status { color: var(--keti-green-dark); font-weight: 750; }
.dhq-card-donate {
    padding: 0.55rem 0.85rem;
    border: 0;
    border-radius: 0.65rem;
    background: var(--keti-yellow);
    color: #14111d;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.dhq-card-donate:hover,
.dhq-card-donate:focus { background: #f0a323; color: #14111d; }
.dhq-home-empty { padding: 3.5rem 1.5rem; border: 1px dashed #dce5dc; border-radius: 1.1rem; background: #fbfdfb; text-align: center; }
.dhq-home-empty > span { display: inline-grid; width: 3rem; height: 3rem; place-items: center; border-radius: 1rem; background: #eaf5ed; color: var(--keti-green-dark); font-size: 1.4rem; }
.dhq-home-empty h3 { margin: 1rem 0 0.4rem; color: #28372c; font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; }
.dhq-home-empty p { margin: 0 auto 1.2rem; color: #737e75; }
.dhq-home-empty-compact { padding: 2.5rem 1.2rem; }
.dhq-home-rankings .dhq-section-heading { align-items: flex-end; }
.dhq-home-rankings .keti-tabgroup { flex: 0 0 auto; background: #eaf0eb; }
.dhq-home-rankings .keti-tab { padding: 0.6rem 1rem; color: #58665a; }
.dhq-home-rankings .keti-tab.active { background: #fff; color: #1b2c20; box-shadow: 0 2px 8px rgba(21, 42, 27, 0.1); }
.keti-public-site .dhq-home-rankings .keti-tab { background: var(--keti-yellow-soft); color: #5c451f; }
.keti-public-site .dhq-home-rankings .keti-tab.active { background: var(--keti-yellow); color: #14111d; }
.dhq-funding-list { overflow: hidden; border: 1px solid #e5ebe5; border-radius: 1rem; background: #fff; }
.dhq-funding-row { display: grid; grid-template-columns: minmax(190px, 1.1fr) minmax(180px, 1.2fr) auto; align-items: center; gap: 1.3rem; padding: 1rem 1.2rem; }
.dhq-funding-row + .dhq-funding-row { border-top: 1px solid #edf0ed; }
.dhq-funding-school { display: flex; min-width: 0; align-items: center; gap: 0.8rem; }
.dhq-school-mark { display: grid; width: 2.7rem; height: 2.7rem; flex: 0 0 auto; place-items: center; border-radius: 0.85rem; background: #eaf5ed; color: var(--keti-green-dark); }
.dhq-funding-school a { display: block; overflow: hidden; color: #26362a; font-size: 0.9rem; font-weight: 750; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.dhq-funding-school a:hover { color: var(--keti-green-dark); text-decoration: underline; }
.dhq-funding-school div > span { display: block; margin-top: 0.16rem; color: #7e887f; font-size: 0.75rem; }
.dhq-funding-progress { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.dhq-funding-amount { display: flex; flex-wrap: wrap; gap: 0.25rem 0.45rem; align-items: baseline; }
.dhq-funding-amount strong { color: #27382b; font-size: 0.83rem; }
.dhq-funding-amount span { color: #879087; font-size: 0.71rem; }
.dhq-funding-progress-circle { width: 2.85rem; height: 2.85rem; }
.dhq-funding-action { text-align: right; }
.dhq-no-campaign { color: #89928a; font-size: 0.75rem; }

@media (max-width: 767.98px) {
    .dhq-section-heading { align-items: flex-start; flex-direction: column; }
    .dhq-text-link { align-self: flex-start; }
    .dhq-home-rankings .dhq-section-heading { align-items: flex-start; }
    .dhq-funding-row { grid-template-columns: minmax(0, 1fr) auto; gap: 0.85rem; }
    .dhq-funding-progress { grid-column: 1 / 2; }
    .dhq-funding-action { grid-column: 1 / -1; text-align: left; }
}
@media (max-width: 575.98px) {
    .dhq-home-rankings .keti-tab { padding: 0.55rem 0.8rem; font-size: 0.78rem; }
    .dhq-funding-row { padding: 0.9rem; }
}