html,
body {
    padding: 0 0.35rem;
    text-align: justify;
    background: var(--gen-body-bg);
    color: var(--gen-body-color);
    overflow-x: hidden;
}

.ds-grid {
    display: grid;
}

.ds-flex {
    display: flex;
}

.ds-inline-flex {
    display: inline-flex;
}

.al-items-center {
    align-items: center;
}

.dfx-alc-jcb {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gap-r05 {
    display: inline-flex;
    gap: 0.5rem;
}

button,
#header-search-trigger input,
#gen-mobile-sidebar .ms-search-area input {
    outline: none;
    border: none;
    background: none;
}

button {
    cursor: pointer;
}

li,
ul {
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

.header-scrolled {
    background: transparent;
    box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    #sub-header {
        opacity: 0;
        visibility: hidden;
        max-height: 0;
        padding: 0;
    }

    #gen-brand {
        opacity: 0;
        transform: scale(0);
        visibility: hidden;
    }

    .main-mn {
        border-top: none;
    }
}

.header-scrolled.menu-open {
    background: var(--gen-body-bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

@media (max-width: 767px) {
    .header-scrolled #sub-header {
        opacity: 1;
        visibility: visible;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 12px;
    }

    .header-scrolled #sub-header .link-social,
    .header-scrolled #sub-header #gen-brand {
        display: none;
    }

    .header-scrolled #sub-header .dl-log {
        width: 100%;
        justify-content: flex-end;
        gap: 12px;
    }
}

.prog {
    width: 100%;
    height: 2px;
    transform-origin: 0 0;
    transform: scaleX(0);
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000;
    transition: width 0.3s ease-in-out;
    background: linear-gradient(to right, #7aa2f7, #ffa387);
}

.text-primary {
    color: var(--gen-crimson);
}

p {
    line-height: 1.5rem;
}

.b-top {
    width: 40px;
    height: 40px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    background: var(--gen-scroll-bg);
    color: var(--gen-scroll-color);
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 6px;
    position: fixed;
    bottom: 30px;
    right: 30px;
    transition: all 0.4s ease;
}

.opac {
    opacity: 1;
    visibility: visible;
}

.opacn {
    opacity: 0;
    width: 0;
    height: 0;
    visibility: visible;
}

.desc-cont {
    color: var(--gen-desc-cont)
}

.h-act,
.h-tems,
.h-partn {
    text-align: center;
    margin-bottom: 48px
}

#purp,
#activities,
#teams,
#partners {
    margin-bottom: 7rem
}

.splide__arrow.splide__arrow--prev {
    left: -3.5em;
}

.splide__arrow.splide__arrow--next {
    right: -3.5em;
}

.splide__arrow.splide__arrow--prev,
.splide__arrow.splide__arrow--next {
    background: var(--gradient-primary);
}

button.splide__arrow svg {
    fill: #fff;
}

button.splide__arrow {
    width: 32px;
    height: 32px;
    margin-top: 53px;
    border-radius: 30%;
}

.splide__pagination.splide__pagination--ltr {
    height: 3px;
    bottom: -1em;
}

button.splide__pagination__page {
    background: #cbd5e1;
}

button.splide__pagination__page.is-active {
    background: linear-gradient(135deg, #ef4444, #ff8a65);
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
    transform: scale(1.2);
}

main {
    margin: 9.5rem 3rem auto;
}

@media (max-width: 768px) {
    main {
        margin: 9.5rem auto auto;
    }
}

@keyframes typing {
    0% {
        transform: translateX(10%);
    }

    35% {
        transform: translateX(calc(100% - 10px));
    }

    60% {
        transform: translateX(calc(100% - 10px));
    }

    100% {
        transform: translateX(10%);
    }
}

@keyframes blink {

    from,
    to {
        border-color: transparent;
    }

    50% {
        border-color: var(--gen-mouse);
    }
}

#toast-container {
    position: fixed;
    top: 12rem;
    right: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-end;
    z-index: 1200;
    pointer-events: none;
    width: min(360px, calc(100% - 2rem));
}

#toast-container.scrolled {
    top: 3.5rem !important;
}

.toast {
    --toast-accent: #60a5fa;
    --toast-icon-bg: rgba(96, 165, 250, 0.16);
    --toast-title-color: #0f172a;
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.75rem;
    align-items: center;
    width: 100%;
    background: #ffffff;
    color: #1f2937;
    border-radius: 14px;
    padding: 0.85rem 1rem;
    box-shadow: 0 20px 45px -24px rgba(15, 23, 42, 0.35);
    border: 1px solid rgba(226, 232, 240, 0.9);
    transform: translateY(-20px);
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.4s ease;
    pointer-events: auto;
    overflow: hidden;
}

.toast--visible {
    transform: translateY(0);
    opacity: 1;
}

.toast--leaving {
    transform: translateY(-20px);
    opacity: 0;
}

.toast__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--toast-icon-bg);
    color: var(--toast-accent);
}

.toast__icon svg {
    width: 22px;
    height: 22px;
}

.toast__body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.toast__title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--toast-title-color);
}

.toast__message {
    font-size: 0.87rem;
    line-height: 1.3;
    color: #4b5563;
}

.toast__close {
    border: none;
    background: transparent;
    color: #94a3b8;
    display: grid;
    place-items: center;
    padding: 0.25rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

.toast__close svg {
    width: 20px;
    height: 20px;
}

.toast__close:hover {
    color: #475569;
}

.toast__progress {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 4px;
    background: var(--toast-accent);
    transform-origin: left;
    animation: toast-progress linear forwards;
}

.toast--success {
    --toast-accent: #22c55e;
    --toast-icon-bg: rgba(34, 197, 94, 0.18);
    --toast-title-color: #166534;
}

.toast--error {
    --toast-accent: #ef4444;
    --toast-icon-bg: rgba(239, 68, 68, 0.18);
    --toast-title-color: #991b1b;
}

.toast--warn {
    --toast-accent: #facc15;
    --toast-icon-bg: rgba(250, 204, 21, 0.22);
    --toast-title-color: #b45309;
}

.toast--info {
    --toast-accent: #3b82f6;
    --toast-icon-bg: rgba(59, 130, 246, 0.18);
    --toast-title-color: #1d4ed8;
}

.toast--error .toast__message,
.toast--error .toast__title {
    color: #991b1b;
}

.toast--warn .toast__message,
.toast--warn .toast__title {
    color: #b45309;
}

.toast--success .toast__message,
.toast--success .toast__title {
    color: #166534;
}

.toast--info .toast__message,
.toast--info .toast__title {
    color: #1d4ed8;
}

.toast:focus-within {
    outline: 2px solid var(--toast-accent);
    outline-offset: 2px;
}

@keyframes toast-progress {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}

@media (max-width: 640px) {
    #toast-container {
        top: 12rem;
        right: 50%;
        transform: translateX(50%);
        width: calc(100% - 1.5rem);
        align-items: center;
    }

    .toast {
        transform: translateY(-20px);
    }

    .toast--visible {
        transform: translateY(0);
    }

    .toast--leaving {
        transform: translateY(-20px);
    }
}

::-webkit-scrollbar {
    width: 8px;
    height: 7px;
    background: linear-gradient(315deg, #e4b8bf, #cec4ef);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(315deg, #e4b8bf, #bc3c4c);
    border-radius: 1.5px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #bc3c4b4c, #ec4899);
}

::-webkit-scrollbar-corner {
    background: #e4b8bf;
}

::selection {
    background-color: #e6daff;
    color: #2b2d42;
}

::-webkit-selection {
    background-color: #bc3c4b5a;
    color: #ffffff;
}

:root,
[data-theme=light] {
    /* === CORE PALETTE: CHILL & HEALING (PASTEL VIBES) === */
    /* Mission: Sex Education, Safety, Healing */
    /* Standard: WCAG 2.1 AA/AAA Verified */

    /* --- 1. Backgrounds --- */
    /* Light Mode: #F8F9FE (Alice Blue - Cool, Airy, Calm) */
    --bg-body: #FDFBF8;
    --bg-surface: #FFFFFF;
    --bg-surface-2: #EEF2F7;
    /* Soft Grey-Blue for secondary areas */
    --bg-soft: #E3E8EE;

    /* --- 2. Text Colors (High Contrast on #F8F9FE) --- */
    /* Primary Text uses Dark Mode BG color for perfect harmony */
    --text-primary: #1E272E;
    /* Deep Blue Grey - WCAG AAA (15.6:1) */
    --text-secondary: #57606F;
    /* Cool Grey - WCAG AA (7.5:1) */
    --text-tertiary: #A4B0BE;

    /* --- 3. Brand Colors (Healing & Trust) --- */
    /* Primary: "Insightful Blue" - Calm, Reliable */
    --color-brand-primary: #be123c;
    /* Soft Blue */
    --color-brand-hover: #0984E3;
    /* Deep Blue */

    /* Secondary: "Empathy Pink" - Warmth, Protection */
    --color-brand-secondary: #e09f7d;
    /* Pastel Red/Pink */
    --color-brand-secondary-hover: #D63031;

    --color-accent: #FFE082;
    /* Pastel Orange/Yellow from old */
    --color-info: #0984E3;
    /* Sky */
    --color-warm: #FFAB91;
    /* Deep Peach */

    /* --- 4. Semantic Pastel Colors (The "Healing" Palette) --- */
    /* Used for Tags, Alerts, Badges, Highlights */

    /* Love & Health (Pink/Rose) - Soft & Caring */
    --color-healing-pink-bg: #FFF5F7;
    --color-healing-pink-text: #99004D;
    /* High contrast pink */

    /* Safety & Growth (Sage/Mint) - Fresh & Safe */
    --color-healing-green-bg: #E6FFFA;
    --color-healing-green-text: #006655;
    /* High contrast teal */
    --color-healing-sage: #55EFC4;

    /* Hope & Knowledge (Sky/Blue) - Open & Calm */
    --color-healing-blue-bg: #EBF8FF;
    --color-healing-blue-text: #00468C;
    /* High contrast blue */

    /* Diversity & Inclusion (Lavender/Purple) - Creative */
    --color-healing-purple-bg: #FAF5FF;
    --color-healing-purple-text: #4C1D95;
    /* High contrast purple */

    /* Caution & Awareness (Peach/Orange) - Warm Warning */
    --color-healing-orange-bg: #FFFAF0;
    --color-healing-orange-text: #9C4221;
    /* High contrast orange */

    /* --- 5. UI Elements --- */
    --border-subtle: #DFE4EA;
    --radius: 20px;
    /* Enhanced Roundness for "Chill" vibe */
    --shadow: 0 10px 30px rgba(164, 176, 190, 0.15);
    /* Soft, dreamy shadow */

    /* --- 6. Gradients (Chill Vibes) --- */
    /* Social: Mint to Blue */
    --gradient-social: #7986CB;
    --gradient-social-hover: #5f6cafec;
    --color-social-icon: #FFFFFF;
    /* Purple for social */

    /* Primary Button: Blue to Lavender */
    --gradient-primary: linear-gradient(145deg, #be123c 0%, #FFAB91 100%);
    --gradient-primary-hover: linear-gradient(135deg, #E98394 0%, #FFAB91 100%);

    --bg-toggle: #cbd5e0;
    /* --bg-toggle-active: #cbd5e0; */
    /* Blue toggle */

    /* === LEGACY MAPPING === */
    --gen-white: var(--bg-surface);
    --gen-terracotta: var(--color-brand-primary);
    --gen-pink-500: var(--color-brand-secondary);
    --gen-blue-400: var(--color-info);
    /* Sky Blue */
    --gen-body-bg: var(--bg-body);
    --gen-body-color: var(--text-primary);
    --gen-border: var(--border-subtle);
    --gen-desc-cont: var(--text-secondary);
    --gen-mems-bg: #FFF8E1;
    /* Pastel Yellow/Cream */
    --gen-mems: var(--color-brand-secondary);
    --gen-partner: var(--bg-surface-2);
    --gen-text-shadow: rgba(0, 0, 0, 0.24);
    --gen-mouse: var(--text-primary);
    --gen-scroll-bg: var(--text-secondary);
    --gen-scroll-color: var(--bg-surface);
    --gen-avatar-mems: rgba(255, 138, 128, 0.5);
    --gen-avatar-partn: #7987cbaa;
    --gen-act: rgba(129, 199, 132, 0.2);
    --gen-crimson: var(--color-brand-primary);
    /* Map Crimson to Blue/Primary for consistency */
    --gen-box-shadow: 0 8px 24px rgba(149, 157, 165, 0.08);
    --gen-mail-form: transparent;
    --gen-mail-color: var(--color-brand-primary);
    --gen-pro: rgba(255, 255, 255, 0.95);

    footer .brands-funding {
        filter: none;
        /* Original colors or grayscale if needed */
        opacity: 0.8;
    }
}

[data-theme=dark] {
    /* === HEALING & CHILL SYSTEM (Dark) === */
    /* --- 1. Backgrounds --- */
    /* Dark Mode: #1E272E (Dark Blue Grey - Requested) */
    --bg-body: #1E272E;
    /* --bg-surface: #2F3640; */
    /* Slightly lighter for cards */
    --bg-surface-2: #353B48;

    /* --- 2. Text Colors (High Contrast on #1E272E) --- */
    /* Primary Text uses Light Mode BG color */
    --text-primary: #F8F9FE;
    /* WCAG AAA (15.6:1) */
    --text-secondary: #CED6E0;
    /* WCAG AA (11:1) */
    --text-tertiary: #4a5568;

    /* --- 3. Brand Colors (Adjusted for Dark Mode) --- */
    --color-brand-primary: #f43f5e;
    /* Soft Blue */
    --color-brand-hover: #A29BFE;

    /* --color-brand-secondary: #FF7675; */
    --color-accent: #FFE082;
    --color-info: #74B9FF;
    --color-warm: #FFAB91;

    /* --- 4. Semantic Pastel Colors (Dark Mode) --- */
    /* Backgrounds darken, Text lightens */

    --color-healing-pink-bg: #4A2330;
    --color-healing-pink-text: #FFD1E6;

    --color-healing-green-bg: #1B453B;
    --color-healing-green-text: #A3F0E3;
    --color-healing-sage: #00B894;

    --color-healing-blue-bg: #1A3048;
    --color-healing-blue-text: #A8D1FF;

    --color-healing-purple-bg: #34284F;
    --color-healing-purple-text: #E6D6FF;

    --color-healing-orange-bg: #4A3226;
    --color-healing-orange-text: #FFDAC1;

    --border-subtle: #57606F;

    /* --- 5. UI Elements --- */
    /* Social: Mint to Blue (Dark) */
    /* --gradient-social: linear-gradient(135deg, #00CEC9 0%, #0984E3 100%);
    --gradient-social-hover: linear-gradient(135deg, #81ECEC 0%, #74B9FF 100%); */
    /* --color-social-icon: #E1BEE7; */

    /* Primary Button: Gradient */
    /* --gradient-primary: linear-gradient(135deg, #0984E3 0%, #6C5CE7 100%);
    --gradient-primary-hover: linear-gradient(135deg, #74B9FF 0%, #A29BFE 100%); */


    --bg-toggle: #37474F;
    --bg-toggle-active: #cbd5e0;

    /* === LEGACY MAPPING (Dark) === */
    --gen-white: var(--bg-surface);
    --gen-body-bg: var(--bg-body);
    --gen-body-color: var(--text-primary);
    --gen-border: var(--border-subtle);
    --gen-desc-cont: var(--text-secondary);
    --gen-mems-bg: #222831;
    --gen-mems: var(--color-brand-secondary);
    --gen-partner: var(--bg-surface-2);
    --gen-purp: var(--text-tertiary);
    --gen-text-shadow: rgba(127, 127, 127, 0.7);
    --gen-mouse: var(--text-primary);
    --gen-scroll-bg: var(--text-secondary);
    --gen-scroll-color: var(--bg-body);
    --gen-avatar-mems: rgba(118, 178, 254, 0.4);
    --gen-act: rgba(255, 224, 130, 0.1);
    --gen-avatar-partn: #7987cbaa;
    --gen-crimson: var(--color-brand-primary);
    --gen-box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    --gen-mail-form: var(--bg-surface-2);
    --gen-mail-color: var(--color-brand-primary);
    --gen-pro: rgba(38, 48, 56, 0.95);

    footer .brands-funding {
        filter: brightness(0) invert(1);
    }
}

/* --- HEADER NOTIFICATION --- */
.header-separator {
    width: 1px;
    height: 24px;
    background-color: #d1d5db;
    margin: 0 16px;
}

.sub-noti {
    display: inline-flex;
    align-items: center;
}

.header-notification {
    position: relative;
    margin: 0 12px;
    display: flex;
    align-items: center;
}

.notif-btn {
    border: none;
    background: none;
    cursor: pointer;
    color: var(--gen-body-color);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: background-color 0.3s;
}

.notif-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.notif-btn svg {
    width: 24px;
    height: 24px;
    stroke-width: 2px;
}

/* Badge Style */
.notif-badge {
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    background-color: #c92a2a !important;
    color: white !important;
    font-size: 11px !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    border: 3px solid var(--gen-white) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

.header-separator {
    width: 1px;
    height: 24px;
    background-color: #d1d5db;
    margin: 0 16px;
}

.desktop-only {
    display: block;
}

@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }

    .sub-noti {
        position: absolute;
        bottom: 5px;
    }

    header #sub-header {
        border-bottom: 1px solid var(--gen-border);
        padding-bottom: 10px;
        margin-bottom: 0;
    }
}