:root {
    --stempink-50: #F7A7E6;
    --stemblue: #4D2EFD;
    --stemwhite: #FFF;
    --stemblack: #000;
    --copy: #3C3852;
    --gutter-left: 9.81rem;
    --gutter-right: 9.81rem;
    --footer-gutter-left: calc(var(--gutter-left) - 2rem);
    --footer-gutter-right: calc(var(--gutter-right) - 2rem);
    --stempink:#F04FCD;
    --stemorange:#FE920D;
    --stemgreen: #7AFDB5;
    --stemblue-10: #F1EEFF;
    --stempink-10: #FEF1FB;
    --stemorange-10: #FFF4E7;
    --stemgreen-10: #E4FFF0;
    --heroheight:  clamp(34.25vh, 34.25rem, 50vh);  /* Min, Ideal, Max */
    --designSize: 1440px;
    --navMenuRightOffset: 0rem;
    --navBarHeight: 125px;
}
.sc-constrained-container
{
    max-width: var(--designSize);
    margin: auto; 
    padding-left: var(--gutter-left);
    padding-right: var(--gutter-right); 
}
@media (min-width: 1441px) {
    .sc-constrained-container.sc-no-gutter-xl { 
        padding-left: 0; 
        padding-right: 0;
    }
}


.blog-detail-header-spacer {
    width: 100%;
    height: 4px; 
    background-color: var(--stemblue-10);
}
.gameCardHeaderOverlay{
    margin: auto;
    background: #1e063c;
    height: 100%;
    width: 100%;
    opacity: 0.7;
    position: absolute;
    z-index: 0;
}
.gameCardHeaderTitles{
    position: absolute;
    z-index: 1;
    align-content: center;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Grozel';
}
.gameCardHeaderTitle{
    font-size: xxx-large;
    color: #E7CBBB;
}
.gameCardHeaderSubtitle{
    font-size: x-large;
    color: #BFEABF;
}
.joinSchoolsLogos {
    width: 80vw !important;
}
@media (min-width: 1080.01px) {
    .hero .signin-triangles { display: none; }
}
@media (max-width: 1080px) {
    .graphic {
        display: none !important;
    }
    .hero {
        padding-right: var(--gutter-left);
    }
    .hero .signin-triangles { display: block; }
    .hero .signin-tri-pink-lg   { border-top-width: 60px; border-bottom-width: 60px; border-right-width: 104px; bottom: 10px; right: 3%; }
    .hero .signin-tri-green-lg  { border-top-width: 49px; border-bottom-width: 49px; border-right-width: 85px;  top: 8%;  left: 10px; }
    .hero .signin-tri-orange-md { border-top-width: 30px; border-bottom-width: 30px; border-right-width: 52px;  top: 4%;  right: 12%; }
    .hero .signin-tri-pink-sm   { border-top-width: 19px; border-bottom-width: 19px; border-right-width: 33px;  top: 50%; left: 15%; }
    .hero .signin-tri-green-sm  { border-top-width: 15px; border-bottom-width: 15px; border-right-width: 26px;  bottom: 6%; left: 3%; }
    .hero .signin-tri-orange-sm { border-top-width: 11px; border-bottom-width: 11px; border-right-width: 19px;  bottom: 12%; right: 35%; }
    .hero .signin-tri-pink-md   { border-top-width: 27px; border-bottom-width: 27px; border-right-width: 48px;  top: 35%; right: 1%; }
    .hero .signin-tri-green-xs  { border-top-width: 10px; border-bottom-width: 10px; border-right-width: 17px;  top: 2%;  left: 30%; }
    .callToAction {
        max-width: 100% !important;
    }
    .footer {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
    .company-address {
        padding-top:0 !important;
    }
}
@media (max-width: 1023px) {
    .small-screen {
        display: flex !important;
    }
    .gameViewer {
        display: none !important;
    }
}
/* Extra small (xs) */
@media (max-width: 575.98px) {
    :root{
        --gutter-right: 0.81rem;
        --gutter-left:0.81rem;
        --navMenuRightOffset: 0rem;
    }
    .scg-container{
        flex-wrap: wrap;
    }
    .signUpForAccess {
        width: 220px !important;
    }
    .ourStoryGraphic {
        /*height: 66vw !important;*/
    }
    .playGamesBtn {
        width: 51% !important;
        margin-bottom: 2rem !important;
    }
    .faqs{
        flex-direction: column !important;
    }
    .faqData {
        padding-top: 1.75rem !important;
    }
    .faqInfo{
        max-width: 100vw !important;
    }
    .footerDetails {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    .socialIcons {
        padding-top: 0 !important;
    }
    .footerSocial {
        height: auto !important;
    }
    .contact {
        height: auto !important;
    }
    .emailAdd {
        width: 60vw !important
    }
    .heading{
        font-size: 5vw !important;
        line-height: 1.8rem !important;
    }
    .ctaBannerText{
        font-size: 4vw !important;
        margin-right: 0.81rem;
        margin-left: 40px;
    }
    .ctaBannerBtn {
        max-width: none !important;
        width: 200px !important;
        margin-left: 40%;
        padding: 0.625rem 1.1875rem !important;
    }
    .ctaBannerGraphic{
        position: absolute !important;
        left: -15px !important;
        height: 204px !important;
    }
    .contact{
        padding-bottom: 50px !important;
    }
    .learnMoreContainer {
        flex-direction: column !important;
        height: auto !important;
    }
    .learnMoreInfo{
        padding-top: 0 !important;
    }
    .learnMoreText{
        padding-top: 0.2rem !important;
        min-width: none !important;
        max-width: none !important;
    }
    .ourStory {
        flex-direction: column !important;
    }
    .ourStoryGraphic{
        min-width: none !important;
        max-width: none !important;
        width: 100% !important;
    }
    .ourStoryText{
        margin-left: var(--gutter-left) !important;
    }
    .iukLogo{
        margin-bottom: 2rem;
    }
    .joinSchools{
        padding-left: var(--gutter-left) !important;
        padding-right: var(--gutter-right) !important;
    }
    .faqListing{
        width: auto !important;
    }
    .ctaBanner{
        gap:0 !important;
    }
    nav {
        justify-content: start !important;
    }
    .scg-navBar > nav {
        display: none !important;
    }
    nav ul {
        display: block !important;
    }
    nav ul li a {
        text-align: left !important;
        min-height: 2.75rem;
        display: flex;
        align-items: center;
    }
    .footerNav {
        justify-content: space-between !important;
        flex-direction: column !important;
        gap: 2rem !important;
    }
    .footerNav nav a {
        min-height: 2.75rem;
        display: inline-flex;
        align-items: center;
        padding: 0.375rem 0;
    }
    .mobileMenu {
        display: flex !important;
    }
    .scgInput {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .signUpForAccess {
        width: auto !important;
        max-width: 100% !important;
    }
    .ctaBannerBtn {
        width: auto !important;
        max-width: 100% !important;
        margin-left: auto;
    }
    .faqInfo {
        max-width: 100% !important;
    }
    .faqListing{
        width: auto !important;
    }
    .question{
        width: 95% !important;
    }
    .gameViewDetailText {
        padding-top: 1.69rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .gameViewInfo {
        padding-left: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .detailGameCardTags {
        gap: 1rem !important;
    }
    .gameInfoBanner {
        width: 90vw !important;
        padding: 1.5rem !important;
    }
    .listingBannerContainer {
        min-height: 22rem !important;
    }
    .headerTitle {
        font-size: 1.75rem !important;
        line-height: 2.1rem !important;
    }
    .headerDetail {
        font-size: 0.9rem !important;
    }
}

/* Small (sm) */
@media (min-width: 576px) and (max-width: 767.98px) {
    :root{
        --gutter-right: 0.81rem;
        --gutter-left:0.81rem;
        --navMenuRightOffset: 0rem;

    }
    .scg-container{
        flex-wrap: wrap;
    }
    .ourStoryGraphic {
        min-width: none !important;
        max-width: none !important;
        width: 100% !important;
        /*height: 66vw !important;*/
    }
    .playGamesBtn {
        width: 51% !important;
        margin-bottom: 2rem !important;
    }
    .faqs{
        flex-direction: column !important;
    }
    .faqData {
        padding-top: 1.75rem !important;
    }
    .faqInfo{
        max-width: 100vw !important;
    }
    .footerDetails {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    .socialIcons {
        padding-top: 0 !important;
    }
    .footerSocial {
        height: auto !important;
    }
    .emailAdd {
        width: 60vw !important;
    }
    .heading{
        font-size: 5vw !important;
        line-height: 2.8rem !important;
    }
    .ctaBannerText{
        font-size: 3vw !important;
    }
    .contact{
        height: auto !important;
        padding-bottom: 50px !important;
    }
    .contactl {
        color: var(--stemwhite) !important;
        text-decoration: none !important;
    }
    
    .learnMoreContainer {
        flex-direction: column !important;
        height: auto !important;
    }
    .learnMoreInfo{
        padding-top: 0 !important;
    }
    .learnMoreText{
        padding-top: 0.2rem !important;
        min-width: none !important;
        max-width: none !important;
    }
    .ourStory {
        flex-direction: column !important;
    }
    .ourStoryGraphic{
        min-width: none !important;
        max-width: none !important;
        width: 100% !important;
    }
    .ourStoryText{
        margin-left: var(--gutter-left) !important;
    }
    .iukLogo{
        margin-bottom: 2rem;
    }
    .joinSchools{
        padding-left: var(--gutter-left) !important;
        padding-right: var(--gutter-right) !important;
    }
    .faqListing{
        width: auto !important;
    }
    .ctaBanner{
        gap:0 !important;
    }
    nav {
        justify-content: start !important;
    }
    .scg-navBar > nav {
        display: none !important;
    }
    nav ul {
        display: block !important;
    }
    nav ul li a {
        text-align: left !important;
        min-height: 2.75rem;
        display: flex;
        align-items: center;
    }
    .footerNav {
        justify-content: space-between !important;
        flex-direction: column !important;
        gap: 2rem !important;
    }
    .footerNav nav a {
        min-height: 2.75rem;
        display: inline-flex;
        align-items: center;
        padding: 0.375rem 0;
    }
    .mobileMenu {
        display: flex !important;
    }
    .scgInput {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .faqInfo {
        max-width: 100% !important;
    }
    .faqListing{
        width: auto !important;
    }
    .question{
        width: 95% !important;
    }
    .gameViewDetailText {
        padding-top: 1.69rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .gameViewInfo {
        padding-left: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .detailGameCardTags {
        gap: 1rem !important;
    }
    .gameInfoBanner {
        width: 65vw !important;
        padding: 1.75rem 2rem !important;
    }
    .headerTitle {
        font-size: 1.875rem !important;
        line-height: 2.25rem !important;
    }
    .logo {
        gap: 1.5rem;
    }
}

/* Medium (md) */
@media (min-width: 768px) and (max-width: 991.98px) {
    :root{
        --gutter-right: 0.81rem;
        --gutter-left:0.81rem;
        --navMenuRightOffset: 0rem;

    }
    .scg-container{
        flex-wrap: wrap;
    }


    .ourStoryGraphic {
        min-width: none !important;
        max-width: none !important;
        width: 100% !important;
        /*height: 66vw !important;*/
    }
    .ourStoryText {
        padding-left: var(--gutter-left);
        margin-left: 0 !important;
    }
    .playGamesBtn {
        width: 51% !important;
    }
    .faqs{
        flex-direction: column !important;
    }
    .faqData {
        padding-top: 1.75rem !important;
    }
    .faqInfo{
        max-width: 100% !important;
    }
    .footerDetails {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    .socialIcons {
        padding-top: 0 !important;
    }
    .footerSocial {
        height: auto !important;
    }
    .emailAdd {
        width: 60vw !important
    }
    .heading{
        font-size: 5vw !important;
    }
    .ctaBanner {
        gap: 0 !important;
    }
    .ctaBannerText{
        font-size: 3vw !important;
    }
    .contact{
        height: auto !important;
        padding-bottom: 50px !important;
    }
    .faqListing{
        width: auto !important;
    }
    .question{
        width: 95% !important;
    }
    .learnMoreText{
        padding-top: 0.2rem !important;
        min-width: none !important;
        max-width: none !important;
    }
    .learnMoreInfo{
        padding-top: 0 !important;
    }
    .gameViewDetailText {
        padding-top: 1.69rem !important;
    }
    .gameInfoBanner {
        width: 50vw !important;
        padding: 2rem 2.5rem !important;
    }
    .headerTitle {
        font-size: 2rem !important;
        line-height: 2.4rem !important;
    }
}

/* Large (lg) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    :root{
        --gutter-right: 2.81rem;
        --gutter-left:2.81rem;
        --navMenuRightOffset: 0rem;
    }
    .graphic {
        width: 50% !important;
    }

    .ourStoryGraphic{
        /*height: 44vw !important;*/
    }
    .faqListing {
        width: 32rem !important;
    }
    .ctaBanner {
        gap: 3rem !important;
    }
    .contact{
        height: auto !important;
        padding-bottom: 50px !important;
    }
    .gameViewDetailText {
        padding-top: 1.69rem !important;
    }
}

/* Extra large (xl) */
@media (min-width: 1200px) {
    :root{
        --gutter-right: 9.81rem;
        --gutter-left:9.81rem;
    }
    .ourStoryGraphic{
        /*height: 33vw !important;*/
    }
}
@media (min-width: 1023px) {
    .small-screen {
        display: none !important;
    }
    .gameViewer {
        display: flex !important;
    }
}
@media (min-width: 1441px) {
    :root{
        --navMenuRightOffset: 0rem;
    }

    .hero {
        padding-right: var(--gutter-left) !important;
        padding-left: var(--gutter-left) !important;
    }
}


body {
    margin: 0;
    /* Body/Regular */
    font-family: Poppins;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    overflow-x: hidden;
}
nav {
    display: flex;
    justify-content: end;
    width: 100%;
    flex-grow: inherit;
}
nav ul {
    list-style: none; /* Remove default bullets */
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}
nav ul li {
    margin: 0;
    padding: 0;
}
nav ul li a {
    display: block; /* Make the links block-level elements */
    text-decoration: none; /* Remove underline */
    color: var(--stemblack);
    padding: 0.625rem 1.1875rem;
    text-align: center;
    transition: background-color 0.3s ease;
    border-radius: 2.8225rem;
}
nav ul li a:hover {
    color: var(--stemblue);
    background-color: var(--stemwhite);
}
.small-screen {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding: 6rem;
    text-align: center;
}
.scg-navBar {
    height: 125px;
    align-self: stretch;
    padding-left: var(--gutter-left);
    padding-right: calc(var(--gutter-right) + var(--navMenuRightOffset));
    display: flex;
    max-width:var(--designSize);
    margin: auto;
    align-items: center;
}
.navMenuItems {
    display: flex;
    align-items: center;
    gap: 2.1875rem;
}
ul {
    list-style: none; /* Removes bullet points */
    padding: 0;       /* Removes default padding */
    margin: 0;        /* Removes default margin */
}

.navMenuItems li {
    color:red;
}

ul li.signUpBtn a {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    border-radius: 2.8225rem;
    background-color: var(--stempink-50);
    transition: background-color 0.3s ease; /* Smooth transition */
    color: var(--stemblack);
}

ul li.signUpBtn a:hover {
    background: var(--stemgreen, #F7A7E6);
    color: var(--stemblack, white);
}

ul li.signup a:hover {
    background-color: var(--stemblue);
}

.hero {
    height: 34.25rem;/* var(--heroheight);*/
    flex-shrink: 0;
    background-color: var(--stemblue);
    display: flex;
    padding-left: var(--gutter-left);
    overflow: hidden;
    position: relative;
}
.logo {
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 2rem;
    color: var(--stemwhite);
    font-size: smaller;
    max-width: calc(100vw - 2rem);
}
.heading {
    /* H1/Bold */
    font-family: Poppins;
    font-size: 3.125rem;
    font-style: normal;
    font-weight: 700;
    line-height: 3.75rem; /* 120% */
}
.callToAction {
    padding-top: 5.91rem;
    gap: 0.75rem;
    display: flex;
    flex-direction: column;
    color: var(--stemwhite);
    font-family: Poppins;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    max-width: 50%;
    /* max-width: calc(45% - (2 * var(--gutter-left))); */
}

.signUpForAccess {
    display: flex;
    padding: 0.625rem 2.1875rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    border-radius: 2.8225rem;
    background-color: var(--stemwhite);
    color: var(--stemblack);
    transition: background-color 0.3s ease; /* Smooth transition */
    width: fit-content;
    /* H5/Regular */
    font-family: Poppins;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration: none
}

.signUpForAccess:hover {
    background-color: var(--stempink-50);
}
.graphic {
    justify-content: end;
    display: flex;
    width: 100%;
}
.learnMore {
    height: auto; /* 29.375rem; */
    align-self: stretch;
    padding-left: var(--gutter-left);
    padding-right: var(--gutter-right);
    display: flex;
    margin: auto;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
}

.learnMoreHeader {
    font-family: Poppins;
    font-size: 2.1875rem;
    font-style: normal;
    font-weight: 600;
    line-height: 2.625rem; /* 120% */
    color: var(--stemblue);
    max-width: 20rem;
}
.learnMoreText {
    min-width: 50%;
    max-width: 50%;
    padding-top: 4.19rem;
}
.learnMoreInfo {
    padding-top: 6.5rem;
    /* gap: 20rem; */
    /* H4/Light */
    font-family: Poppins;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 300;
    line-height: 1.875rem; /* 150% */
    letter-spacing: 0.01563rem;
}
.playGamesBtn {
    display: flex;
    padding: 0.625rem 2.1875rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    border-radius: 2.8225rem;
    background-color: var(--stemgreen);
    color: var(--stemblack);
    transition: background-color 0.3s ease; /* Smooth transition */
    width: fit-content;
    max-width: 15rem;
    margin-top: 2rem;
    margin-bottom: 2rem !important;
    text-decoration: none;
    /* H5/Medium */
    font-family: Poppins;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.playGamesBtn:hover {
    background-color: var(--stemblue);
    color: var(--stemwhite);
}
.ctaBannerBtn:hover {
    background-color: var(--stempink-50);
    color: var(--stemblack);
}

.comingSoonBtn {
    background: var(--stemgreen) !important;
}
.ourStory {
    align-self: stretch;
    background-color: var(--stemblue-10);
    display: flex;
}
.ourStoryGraphic {
    min-width: calc(50% - 3.6rem);
    background: url('images/our-story-graphic.png');
    min-height: 470px;
    background-size: cover;
}
.ourStoryText {
    padding-right: calc(var(--gutter-right) - 3.6rem);
    display:flex;
    flex-direction: column;
    gap: 0.94rem;
    margin-left: 3.6rem;
}
.ourStoryBrow {
    padding-top: 3.75rem;
}
.ourStoryInfo {
    /* H4/Light */
    font-family: Poppins;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 300;
    line-height: 1.875rem; /* 150% */
    letter-spacing: 0.01563rem;
}
.iukLogo {

}
.joinSchools {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4.625rem;
    padding-top: 5.06rem;
    padding-bottom: 5.06rem;
    padding-left: 9.81rem;
    padding-right: 9.81rem;
    text-align: center;

}
.joinSchoolsHeader{
    max-width: 37.9375rem;;
}
.ctaBanner {
    height: 12.75rem;
    align-self: stretch;
    background: var(--stemblue);
    display: flex;
    align-items: center;
    justify-items: center;
    color:var(--stemwhite);
    gap: 5rem;
}

.ctaBannerText {
    /* H3/SemiBold */
    font-family: Poppins;
    font-size: 1.75rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.career_ctaBannerBtn, .ctaBannerBtn {
    margin-right: var(--gutter-right);
    display: flex;
    padding: 0.625rem 2.1875rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    border-radius: 2.8225rem;
    background-color: var(--stemgreen);
    color: var(--stemblack);
    transition: background-color 0.3s ease; /* Smooth transition */
    max-width: 300px;
    width: 45vw;
    text-decoration: none;
    font-family: Poppins;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-align: center;
}

.career_ctaBannerBtn {
    margin-right: 0 !important;
}

.ctaBannerGraphic {
    position: inherit;
    left: 0;
    height: 204px !important;

}
.main {
    /* max-width: 1440px; */
    min-height: 100vh;
    margin: auto;
}
.faqInfo{
    padding-top: 4.88rem;
    max-width: 35%;
    min-width: 35%;
}
.faqData{
    padding-top: 7.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.62rem;
    padding-bottom: 5.56rem;
}
.faqs {
    padding-left: var(--gutter-left);
    padding-right: var(--gutter-right);
    display: flex;
}
.faqListing {
    width: 40.25rem;
    min-height: 4rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding-left: 5%;

    /* H5/Medium */
    font-family: Poppins;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    justify-content: space-between;
}
.faqAnswer{
    max-width: 40.25rem;
    padding-left: 2rem;
    font-style: normal;
    font-weight: 300;
    letter-spacing: 0.01563rem;
}
.dropdown-arrow {
    margin-right: 10px;
}
.faq-pink{
    background-color: var(--stempink-10);
}
.faq-yellow {
    background-color:var(--stemorange-10)
}
.faq-green {
    background-color: var(--stemgreen-10);
}
.faq-blue {
    background-color: var(--stemblue-10);
}
.question {
    width: 90%;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 10px;
}
.footer{
    min-height: 28.1875rem;
    align-self: stretch;
    background:var(--stemblue);
    padding-left: var(--footer-gutter-left);
    padding-right: var(--footer-gutter-right);
    padding-top: 4.69rem;
    padding-bottom: 6.75rem;
}
.footer-info {
    width: 20rem;
}
.footerNav {
    display: flex;
    align-items: start;
    flex-direction: row;
    gap: 0;

}

.footerNav nav a{
    color: var(--stemwhite);
}
.footerDetails{
    padding-top: 3rem;
    display: flex;
    gap: 5rem;
    justify-content: space-between;
}
.footerSub {
    /* width: 50%; */
}
.footerSocial {
    height: 3.44rem;
    display: flex;
    flex-direction: column;
    /* width: 30%; */
}
.footerContact{

}
.emailSub {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: space-between;
}
.emailAdd {
    height: 3.44rem;
    background-color: transparent;
    border: none;
    color: var(--stemwhite);
    margin-top: 1rem;
    font-family: Poppins;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 0 !important;
    width: 100%;
}
.verify-header {
    margin-top: 0;
    color: var(--stemblue);
}
.welcome-invite {
    font-size: 1.25rem;
    padding: 1rem;
}
.emailAdd:focus{
    outline: 2px solid var(--stemblue);
}
.subscriptionConfirmation, .subscriptionProcessing {
    color: var(--stemgreen);
}
.signUpNewsletterBtn {
    color: var(--stemwhite);
    text-decoration: underline;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    border: none;
    font-size: medium;
    cursor: pointer;
}
.subscribeText {
    /* H4/Semibold */
    font-family: Poppins;
    font-size: 1.3125rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    color: var(--stemwhite);
    margin-bottom: 1rem;
}
.contact {
    display: flex;
    color: var(--stemwhite);
    text-decoration: underline;
}
.company-address {
    color: var(--stemwhite);
    font-family: Poppins;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding-top: 2.9rem;
}
.company-reg-info{
    display: flex;
    color: var(--stemwhite);
    font-family: Poppins;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 2.31rem;
    gap: 2rem;
}
.socialIcons{
    padding-top: 2rem;

}
.scg-container {
    max-width: var(--designSize);
    margin: auto;
    display: inherit;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}
.scg-user-container {
    padding-left: var(--gutter-left);
    padding-right: calc(var(--gutter-right) + var(--navMenuRightOffset));
    display: flex;
    max-width: var(--designSize);
    margin: auto;
    background: var(--stemblue-10);
    padding-top: 3.44rem;
    padding-bottom: 3.44rem;
    zoom: 90%;
    flex-direction: column;
}
.svgGraphic {
    width: 90%;
}
.footerHR {
    border: none; /* Removes any default border styles */
    border-top: 1px solid var(--stemwhite); /* Adds a white line as the horizontal rule */
}
.mobileMenu {
    width: 100%;
    display: none;
    justify-items: flex-end;
    justify-content: end;
    position: relative;
}
.mobile-nav-toggle {
    display: none;
}
.mobile-nav-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 3rem;
    height: 3rem;
    cursor: pointer;
    border-radius: 0.5rem;
}
.mobile-nav-hamburger span {
    display: block;
    width: 1.5rem;
    height: 2px;
    background: var(--stemblack, #1D1D1B);
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.mobile-nav-panel {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--stemwhite, #fff);
    border-radius: 0 0 1rem 1rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 100;
    min-width: 220px;
    padding: 0.5rem 0;
}
.mobile-nav-panel ul {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.mobile-nav-panel ul li a {
    display: flex;
    align-items: center;
    min-height: 3rem;
    padding: 0.75rem 1.5rem;
    color: var(--stemblack, #1D1D1B);
    text-decoration: none;
    font-family: Poppins;
    font-size: 1rem;
    font-weight: 400;
}
.mobile-nav-panel ul li a:hover {
    background: var(--stemblue-10, #f0f0ff);
}
.mobile-nav-panel ul li.signUpBtn a {
    background-color: var(--stempink-50);
    border-radius: 2.8225rem;
    margin: 0.5rem 1rem;
    justify-content: center;
    min-height: 3rem;
}
.listingBannerContainer {
    width: 100%;
    height: calc(100vh - var(--navBarHeight));
    min-height: 28rem;
    background: url('images/our-games-graphic.png');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
}
.gameInfoBanner {
    background: var(--stemblue);
    display: flex;
    flex-direction: column;
    padding: 2.46875rem 4.75rem 2.40625rem 5.5rem;
    width: 35vw;
    max-width: 32rem;
    color: var(--stemwhite);
    gap: 1.56rem;
}
.headerTitle {
    /* H2/Semibold */
    font-family: Poppins;
    font-size: 2.1875rem;
    font-style: normal;
    font-weight: 600;
    line-height: 2.625rem; /* 120% */
}
.headerDetail {
    /* Body/Regular */
    font-family: Poppins;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.headerCtaBtn {
    display: flex;
    padding: 0.625rem 2.1875rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    border-radius: 2.8225rem;
    background: var(--stemgreen);
    color: var(--stemblack);
    height: auto !important;
    font-weight: normal !important;
    font-size: 1rem !important;
    width: 100%;
    box-sizing: border-box;
}
.gameCards{
    display: flex;
    padding-top: 2rem;
    flex-wrap: wrap;
    padding-bottom: 2rem;
    padding-left: var(--gutter-left);
    padding-right: var(--gutter-right);
    gap: 2.56rem;
    justify-content: center;
}
.gameCard {
    width: 33.8225rem;
    min-height: 47.4375rem;
    border-radius: 1.5625rem;
    background:var(--stemwhite);
    box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.10);
    overflow: clip;
    display: flex;
    flex-direction: column;
}
.gameCardHeader {
    height: 19.79131rem;
    background-size: cover !important;
}
.gameCardBody {
    padding: 2.25rem;
    gap: 1.69rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.gameCardTitle {
    color: var(--stemblue);
    /* H3/SemiBold */
    font-family: Poppins;
    font-size: 1.75rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.gameCardDetail {
    /* H4/Light */
    font-family: Poppins;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 300;
    line-height: 1.875rem; /* 150% */
    letter-spacing: 0.01563rem;
    flex: 1;
}
.gameCardTags {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 0.5rem;
    /* H4/Semibold */
    font-family: Poppins;
    font-size: 1.3125rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.detailGameCardTags {
    gap: 2rem;
    justify-content: start !important;

}

.gameCardTag {
    display: flex; 
    align-items: center;
    gap: 0.5rem;
}
.playBtnContainer {
    justify-content: end;
    width: 100%;
    display: flex;
    margin-top: 1rem;
}
.gameCardPlayBtn {
    display: inline-flex;
    padding: 0.625rem 2.1875rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
    border-radius: 2.8225rem;
    background: var(--stempink-50, #F7A7E6);
    text-decoration: none;
    color: var(--stemblack, black);
}
.user-account-required {
    font-size: 1.3rem;
    font-weight: bolder;
}
.user-account-error {
    color: red;
    
}
.modal-log-in {
    width: 100%;
    box-sizing: border-box;
}
.join-beta {
    background-color: var(--stemblue);
    min-height: calc(100vh - var(--navBarHeight));
}
.join-beta-graphics {
    position: relative;
    width: 100%;
    min-height: calc(100vh - var(--navBarHeight));
    padding: 5vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
.join-beta-card {
    position: relative;
    z-index: 1;
    max-width: 720px;
    width: 100%;
    border-radius: 1.5625rem;
    background: var(--stemwhite, #FFF);
    box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.10);
    padding: 3rem 3.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}
.join-beta-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--stemblue);
    text-align: center;
    margin: 0;
}
.join-beta-intro {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.65;
    text-align: center;
    color: var(--copy, #3C3852);
    margin: 0;
}
.join-beta-confirmation {
    text-align: center;
    padding: 2rem 0;
}
.join-beta-check {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.2rem;
    border-radius: 50%;
    background: var(--stemgreen);
    display: flex;
    align-items: center;
    justify-content: center;
}
.join-beta-confirmation h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--stemblue);
    margin-bottom: 0.6rem;
}
.join-beta-confirmation p {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.65;
    color: var(--copy, #3C3852);
}
@media (max-width: 640px) {
    .join-beta-card { padding: 2rem 1.5rem; }
}
.gameCardPlayBtn:hover, .comingSoonBtn:hover {
    background: var(--stemblue, #F7A7E6) !important;
    color: var(--stemwhite, white);
}
.heroBg {
    background-color: var(--stemblue-10);
}

/* ─── Game Play Modal (anonymous / no-login games) ─────────── */
.game-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: gm-fadeIn 150ms ease-out;
}
@keyframes gm-fadeIn { from { opacity: 0; } to { opacity: 1; } }
.game-modal-container {
    position: relative;
    width: 95vw;
    max-width: 1440px;
    height: 90vh;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,.5);
    animation: gm-scaleIn 200ms ease-out;
}
@keyframes gm-scaleIn {
    from { opacity: 0; transform: scale(.95); }
    to   { opacity: 1; transform: scale(1); }
}
.game-modal-close {
    position: absolute;
    top: .75rem;
    right: .75rem;
    z-index: 10;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.15);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms;
    backdrop-filter: blur(4px);
}
.game-modal-close:hover { background: rgba(255,255,255,.3); }
.game-modal-container .gameViewContainer {
    width: 100% !important;
    height: 100% !important;
    background: transparent;
}
.game-modal-container .gameViewer {
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    max-width: none;
}
.game-modal-container .small-screen {
    display: none;
}


/*.gameViewContainer {*/
/*    width: 100vw;*/
/*    height: calc(100vh - var(--navBarHeight));*/
/*    align-self: stretch;*/
/*    background-color: var(--stemblue-10);*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*}*/
/*.gameViewInfo {*/
/*    padding:0;*/
/*    padding-bottom: 8rem;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    gap: 1.69rem;*/
/*    padding-left: 2rem;*/
/*}*/
/*.gameViewHeadingTitle {*/
/*    padding-top: 4.44rem;*/
/*    padding-bottom: 1.69rem;*/
/*}*/
/*.gameViewDetailText {*/
/*    font-family: Poppins;*/
/*    font-size: 1.25rem;*/
/*    font-style: normal;*/
/*    font-weight: 300;*/
/*    line-height: 1.875rem;*/
/*    letter-spacing: 0.01563rem;*/
/*}*/
/*.aiChatbot {*/
/*    display: none;*/
/*    position: fixed;*/
/*    right: var(--gutter-right);*/
/*    bottom: 0.5rem;*/
/*}*/
/*.gameViewer {*/
/*    !*background: url('images/viewer_placeholder_image.png');*!*/
/*    background-size: cover;*/
/*    max-width: 1440px;*/
/*}*/
.gameViewContainer {
    width: 100%;
    height: 100vh ;
    align-self: stretch;
    background-color: var(--stemblue-10);
    display: flex;
    align-items: center;
    justify-content: center;
}
.gameViewInfo {
    padding:0;
    display: flex;
    flex-direction: column;
    gap: 1.69rem;
    padding-left: 2rem;
    min-width: 0;
}
.gameViewHeadingTitle {
    padding-top: 4.44rem;
}
.gameViewDetailText {
    padding-top: 4.25rem;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 300;
    line-height: 1.875rem;
    letter-spacing: 0.01563rem;
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
}
.gameViewSubDetailText {
    font-size: initial;
    line-height: initial;
}
.no-bullets {
    list-style-type: none;
    padding-left: 0; 
}
.listItemText {
    font-size: initial;
    line-height: initial;
}
.copyTitle {
    color: var(--copy);
    font-size: 1.3125rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;  
}
.aiChatbot {
    display: none;
    position: fixed;
    right: var(--gutter-right);
    bottom: 0.5rem;
}
.gameViewer {
    /*background: url('images/viewer_placeholder_image.png');*/
    background-size: cover;
    aspect-ratio: 16/9;
    /*height: calc(100vh - 250px);*/
    max-width: 100%;
}
.signUpContainer {
    background-color: var(--stemblue);
    min-height: calc(100vh - var(--navBarHeight));
}
.signUpContainerGraphics {
    position: relative;
    width: 100%;
    min-height: calc(100vh - var(--navBarHeight));
    padding: 5vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
@keyframes scg-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.scg-fade-in {
    animation: scg-fade-in 0.35s ease-out both;
}
.signUpOptions {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 600px;
    min-width: 600px;
    flex-shrink: 0;
    border-radius: 1.5625rem;
    background: var(--STEM_WHITE, #FFF);
    box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.10);
    margin: auto;
    display:flex;
    flex-direction: column;
    padding-top: 3.81rem;
    padding-bottom:3.81rem;
    padding-left: 4.75rem;
    padding-right:4.75rem;
    gap: 1.44rem;
    align-items: center;
    box-sizing: border-box;
}

@media (max-width: 575.98px) {
    .signUpContainerGraphics {
        padding: 1rem;
    }
    .signUpOptions {
        min-width: 100%;
        width: 100%;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    .student_teacher_tabs {
        width: 100%;
        gap: 1.5rem;
    }
    .student_teacher_tab_header {
        font-size: 1rem;
    }
}

.oauthButton {
    width: 80%;
    height: 4.0625rem;
    flex-shrink: 0;
    border-radius: 2.8225rem;
    background: var(--stemwhite);
    box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.13);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    border:none;
}
.oauthButtonText {
    color: #000;

    /* H5/Medium */
    font-family: Poppins;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.oauthButtonImage {

}
.orLabel{
    text-align: center;
    color: #000;
    text-align: center;

    /* H4/Semibold */
    font-family: Poppins;
    font-size: 1.3125rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.standardLabel {
    color: #000;

    /* H5/Medium */
    font-family: Poppins;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-align: left;
    margin-right: auto;
    margin-top: 1.4rem;
}
.scgInput{
    display: flex;
    height: auto;
    min-height: 2.0625rem;
    padding: 0.75rem 1.5rem;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
    border-radius: 2.8225rem;
    background: var(--stemwhite);
    border: 1px solid #ddd;
    box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.08);
    color: #000;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;

    /* H5/Medium */
    font-family: Poppins;
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.scgSelectButtonContainer{
    display: flex;
    margin-right: auto;
    flex-direction: row;
    gap: 0.44rem;
    max-width: 100%;
    flex-wrap: wrap;
}
.scgSelectButton {
    display: flex;
    min-width: 7.4rem;
    height: 2.625rem;
    padding: 0.3875rem 0.3875rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    border-radius: 2.8225rem;
    background: var(--STEM_WHITE, #FFF);
    cursor:pointer;

    /* DROP_SHADOW_CARD */
    box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.10);
}
.gameCardPoint {
    display: flex;
}
.scgSelectButtonText {
    color: #000;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    /* Body/Regular */
    font-family: Poppins;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.submitButton {
    border-radius: 2.8225rem;
    background: var(--stemgreen, #7AFDB5);
    display: flex;
    width: 100%;
    height: 3.1rem;
    box-sizing: border-box;
    padding: 0.625rem 2.1875rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
    color: #000; !important;
    margin-top: 1.4rem;
    /* H5/Medium */
    font-family: Poppins;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    border: none;
    cursor: pointer;

}
.submitButton:disabled {
    background:var(--stemgreen-10);
    color: #7F7F7F;
}
.submitButton:hover {
    cursor: pointer;
    background: var(--stemblue);
    color: var(--stemwhite);
}
.submitButton:hover svg{
    fill: var(--stemwhite);
}
.add-student-button {
    height: 3rem;
}
.headerCtaBtn:hover {
    cursor: pointer;
    background: var(--stempink-50);
    color: var(--stemblack);
}
button[disabled] {
    /* You can also style using `disabled` attribute */
    pointer-events: none; /* Ensures no click events */
}

.student_teacher_tabs {
    display: flex;
    flex-direction: row;
    gap: 2.44rem;
    width: 100%;
    padding-bottom: 2.25rem;
}
.curriculum_link {
    text-decoration: none;
    color: var(--stemblue);
    font-family: Poppins;
    font-size: initial;
    font-style: normal;
    line-height: normal;
}
.curriculum_link:hover {
    color: var(--stempink);
}
.student_teacher_tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
}
.student_teacher_tab_selected {
    text-decoration: underline !important;
    text-underline-offset: 0.5rem;
    text-decoration-thickness: 0.1875rem !important;
}

.student_teacher_tab_header {
    text-decoration: none;
    color: var(--stemblue);
    /* H4/Semibold */
    font-family: Poppins;
    font-size: 1.3125rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.dashboard {
    background-color: var(--stemblue-10);
}
.welcomeTitle {
    color: var(--stemblue, #4D2EFD);

    /* H2/Semibold */
    font-family: Poppins;
    font-size: 2.1875rem;
    font-style: normal;
    font-weight: 600;
    line-height: 2.625rem; /* 120% */
    padding-bottom: 4.31rem;
}
.platformInfoPanel{
    display: flex;
    flex-direction: row;
    gap: 2.94rem;
}
.platformInfoItem{
    display: flex;
    padding: 2.375rem 3.3125rem 2.8225rem 3.3125rem;
    border-radius: 1.5625rem;
    background: #FFF;
    box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.10);
    gap: 1.69rem;
    flex-direction: column;
    min-height: 300px;
    flex: 1;
    justify-content: space-between;
}
h4 {
    flex-grow: 1;
}
.session-status {
    padding:.5rem;
    border: var(--stempink);
    border-style:solid;
    color: var(--stempink);
    border-radius: .5rem;
    border-width: 1px;
}
.dashboard-subheading{
    color: var(--stemblue, #4D2EFD);

    /* H2/Semibold */
    font-family: Poppins;
    font-size: 2.1875rem;
    font-style: normal;
    font-weight: 600;
    line-height: 2.625rem; /* 120% */
    padding-top: 7.75rem;
    margin-bottom: 2rem;
}
h2 {
    /* H2/Semibold */
    font-family: Poppins;
    font-size: 2.1875rem;
    font-style: normal;
    font-weight: 600;
    line-height: 2.625rem; /* 120% */
}
h3 {
    font-family: Poppins;
    font-size: 1.75rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin: 0;
}
h4 {
    font-family: Poppins;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 300;
    line-height: 1.875rem; /* 150% */
    letter-spacing: 0.01563rem;
    margin: 0;
}

.dashboard-learn-more-button {
    display: flex;
    height: 3.125rem;
    padding: 0.625rem 2.1875rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    border-radius: 2.8225rem;
    background: var(--stemgreen, #7AFDB5);
    color: #000;

    /* H5/Medium */
    font-family: Poppins;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    border: none;
    width: 14.8rem;
}
.dashboard-add-student-button
{
    display: flex;
    height: 3.125rem;
    padding: 0.625rem 2.1875rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    border-radius: 2.8225rem;
    background: var(--stemgreen, #7AFDB5);
    color: var(--stemblue);

    /* H5/Medium */
    font-family: Poppins;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    border: none;
    width: 14.8rem;
    element {
        margin-bottom: 0;
    }
    .add-account-heade
}

.dashboard-add-studentgroup-button{
    width: 17.8rem;
}
.student-modal-button{
    width: auto !important;
}
.assignment-complete-modal {
    padding: 3rem;
}
.dashboard-add-assignment-button{
    width: 17.8rem;
}
.assignment-modal {
    /*overflow: hidden;*/
    width: 20vw;
}
.leaderBoard {
    padding-top: 7.75rem;
}

.platformInfoItem h3, .leaderBoard h2  {
    color: var(--stemblue);
}
.plus-image {
    fill: var(--stemblue);
}
.plus-image:hover {
    fill: var(--stemwhite);
}
.dashboard-game-mgmt {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 3.19rem;
    flex-wrap: wrap;
}
.game-resource-download {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.94rem;
}
.dashboard-student-record-header {
    height: 5.3125rem;
    background-color: var(--stemblue);
    border-radius: 0.625rem 0.625rem 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 2.75rem;
    padding-right: 2.25rem;
    gap: 0.94rem;
}
.leaderboard {
    margin-bottom: 2rem;
}
.edu-dash{
    padding-top:0;
}
.dashboard-student-records {
    background: #FFF;
    box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.10);
    width: 100%;
    margin-top: 2rem;
    border-radius: 0.625rem;
    min-height: 35rem;
}
.dashboard-add-student-button {
    margin-top: 0;
}
.columnHeader {
    display: flex;
    flex-direction: row;
    color: var(--stemwhite, #FFF);
    /* H4/Semibold */
    font-family: Poppins;
    font-size: 1.3125rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    align-items: center;
}
.sort-arrow {
    display: flex;
    scale: 0.5;
}
.dashboard-student-record-row {
    height: 5.375rem;
    color: #000;
    gap: 0.94rem;
    /* H4/Light */
    font-family: Poppins;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 300;
    line-height: 1.875rem; 
    letter-spacing: 0.01563rem;
    align-items: center;
    display: flex;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 2.75rem;
    padding-right: 2.25rem;
}
a{
    cursor: pointer;
}
.dashboard-student-record-divider {
    border: none; 
    border-top: 1px solid rgba(0, 0, 0, 0.25); 
    padding-left: 1.5rem;
    padding-right: 1.44rem;
    margin-left: 1.5rem;
    margin-right: 1.44rem;
}
#containerLoading {
    position: absolute;
    inset: 0;
    z-index: 2;
    background-color: transparent;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    flex-direction: column;
    color: var(--stemblue);
    background: url('images/webgl.jpg');
    background-size: cover;
}
.scgInput:focus {
    outline: none;
    border-color: var(--stemblue, #4D2EFD);
    box-shadow: 0 0 0 3px rgba(77, 46, 253, 0.1);
}

/* Student Management Section */
.student-management {
}

.student-management h2 {
    color: var(--stemblue);
}


.waitlist-span {
    font-weight: bold;
    font-size: 1rem;
}

/* Rich Text Editor Styles */
.rich-text-editor {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    overflow-y: auto;
    max-height: 70vh;
    background: white;
    box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.08);
}

.rich-text-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.75rem;
    background: #f8f9fa;
    border-bottom: 1px solid #ddd;
    position: sticky;
    top: 0;
    z-index: 10;
}

.toolbar-group {
    display: flex;
    gap: 0.25rem;
    padding-right: 0.75rem;
    border-right: 1px solid #ddd;
}

.toolbar-group:last-child {
    border-right: none;
}

.toolbar-btn {
    padding: 6px 12px;
    border: 1px solid #ccc;
    background: #f8f9fa;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 400;
    color: #495057;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.toolbar-btn:hover {
    background: #e9ecef;
    border-color: #adb5bd;
    color: #495057;
}

.toolbar-btn:active {
    background: #dee2e6;
    border-color: #adb5bd;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.rich-text-content {
    min-height: 300px;
    padding: 1rem;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    outline: none;
    overflow-y: visible;
    color: var(--copy, #3C3852);
}

.rich-text-content:empty:before {
    content: attr(data-placeholder);
    color: #999;
    pointer-events: none;
}

.rich-text-content h1,
.rich-text-content h2,
.rich-text-content h3,
.rich-text-content h4,
.rich-text-content h5,
.rich-text-content h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: var(--copy, #3C3852);
    margin-top: 2rem;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.rich-text-content h2 {
    font-size: 1.75rem;
}

.rich-text-content h3 {
    font-size: 1.5rem;
}

.rich-text-content h4 {
    font-size: 1.25rem;
}

.rich-text-content p {
    color: var(--copy, #3C3852);
    margin-bottom: 1.5rem;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.rich-text-content ul,
.rich-text-content ol {
    margin-bottom: 1.5rem;
    color: #000;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.rich-text-content ul {
    list-style: none;
}

.rich-text-content ul li {
    position: relative;
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;
}

.rich-text-content ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.35rem;
    width: 11px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='12' viewBox='0 0 11 12' fill='none'%3E%3Cpath d='M11 6L0 0V12L11 6Z' fill='%234D2EFD'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

.rich-text-content ol li {
    margin-bottom: 0.5rem;
}

.rich-text-content blockquote {
    position: relative;
    background: #F1EEFF;
    border: none;
    border-radius: 25px;
    padding: 32px;
    margin: 2rem 0;
    font-style: normal;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
}

.rich-text-content blockquote::before {
    content: "";
    position: absolute;
    top: 32px;
    left: 32px;
    width: 38px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg width='38' height='16' viewBox='0 0 38 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.79895 15.2L17.6001 0H9.72748e-05L8.79895 15.2Z' fill='%234D2EFD'/%3E%3Cpath d='M13.5996 7.2L17.6001 0H9.6001L13.5996 7.2Z' fill='%23A58FFC'/%3E%3Cpath d='M28.7989 15.2L37.6001 0H20.0001L28.7989 15.2Z' fill='%234D2EFD'/%3E%3Cpath d='M33.5996 7.2L37.6001 0H29.6001L33.5996 7.2Z' fill='%23A58FFC'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

.rich-text-content blockquote::after {
    content: "";
    position: absolute;
    bottom: 32px;
    right: 32px;
    width: 38px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg width='38' height='16' viewBox='0 0 38 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.79895 15.2L17.6001 0H9.72748e-05L8.79895 15.2Z' fill='%234D2EFD'/%3E%3Cpath d='M13.5996 7.2L17.6001 0H9.6001L13.5996 7.2Z' fill='%23A58FFC'/%3E%3Cpath d='M28.7989 15.2L37.6001 0H20.0001L28.7989 15.2Z' fill='%234D2EFD'/%3E%3Cpath d='M33.5996 7.2L37.6001 0H29.6001L33.5996 7.2Z' fill='%23A58FFC'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    transform: scaleY(-1);
}

.rich-text-content blockquote p {
    font-family: 'Poppins', sans-serif;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: normal;
    color: #3C3852;
    margin: 1rem 0 18px 0;
}

.rich-text-content blockquote cite {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 35px;
    color: #3C3852;
    text-transform: uppercase;
    font-style: normal;
    margin: 0;
}

.rich-text-content code {
    background: #f4f4f4;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    color: var(--copy, #3C3852);
}

.rich-text-content a {
    color: var(--stemblue, #4D2EFD);
    text-decoration: underline;
    transition: color 0.2s ease;
}

.rich-text-content a:hover {
    color: var(--stempink, #F04FCD);
}

/* Tag Editor Styles */
.tag-input-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    padding: .4rem .55rem;
    border: 1px solid var(--border, #e6e9f0);
    border-radius: var(--radius-sm, 6px);
    background: #fff;
    min-height: 42px;
    align-items: center;
    cursor: text;
    transition: border-color 120ms, box-shadow 120ms;
}
.tag-input-wrapper:focus-within {
    border-color: var(--stemblue, #4D2EFD);
    box-shadow: 0 0 0 3px var(--stemblue-10, #efecff);
}
.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .15rem .45rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    background: var(--stemblue-10, #efecff);
    color: var(--stemblue, #4D2EFD);
    white-space: nowrap;
}
.tag-chip-remove {
    width: 16px;
    height: 16px;
    border: none;
    background: transparent;
    color: var(--stemblue-50, #a594fe);
    cursor: pointer;
    display: grid;
    place-items: center;
    border-radius: 50%;
    padding: 0;
    font-size: .85rem;
    line-height: 1;
    transition: background 120ms, color 120ms;
}
.tag-chip-remove:hover {
    background: var(--stemblue-30, #c7befe);
    color: var(--stemblue, #4D2EFD);
}
.tag-inline-input {
    border: none;
    outline: none;
    font-family: var(--font, "Poppins", sans-serif);
    font-size: .82rem;
    flex: 1;
    min-width: 100px;
    background: transparent;
    padding: .1rem 0;
}

/* Blog Post Editor Styles */
.blog-post-editor {
    /*max-width: 1400px;*/
    /*margin: 0 auto;*/
    /*padding: 2rem;*/
    /*scale: 0.9;*/
}

.editor-header {
    color: var(--stemblue);
    margin-bottom: 2rem;
    font-size: 2rem;
    font-weight: 600;
}

.editor-form {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 3rem;
}

.editor-main {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.editor-sidebar {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-label {
    font-weight: 600;
    color: #333;
    font-size: 0.95rem;
}

.form-help {
    color: #666;
    font-size: 0.8rem;
    font-style: italic;
}

.title-input, .slug-input, .author-input, .category-input, .image-input {
    font-size: 1.1rem;
    padding: 0.875rem 1.5rem;
}

.title-input {
    font-size: 1.25rem;
    font-weight: 600;
}

.excerpt-input {
    min-height: 80px;
    resize: vertical;
    padding: 0.875rem 1.5rem;
    font-family: 'Poppins', sans-serif;
    line-height: 1.5;
}

.content-editor {
    width: 100%;
}

/* Auto-save indicator styles */
.auto-save-indicator {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #6c757d;
    transition: all 0.3s ease;
}

.auto-save-indicator i {
    margin-right: 0.5rem;
}

.auto-save-indicator .fa-spinner {
    color: var(--stemblue);
}

.auto-save-indicator .fa-check-circle {
    color: var(--stemgreen);
}

/* Auto-save controls styles */
.auto-save-controls {
    padding: 1rem;
    background: rgba(77, 46, 253, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(77, 46, 253, 0.1);
}

.auto-save-status {
    margin: 0.75rem 0;
    padding: 0.5rem;
    background: white;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}

.auto-save-message {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 500;
}

.auto-save-message i {
    margin-right: 0.5rem;
}

.auto-save-message.saving {
    color: var(--stemblue);
}

.auto-save-message.saved {
    color: var(--stemgreen);
}

.auto-save-message.waiting {
    color: #6c757d;
}

.manual-save {
    margin-top: 0.75rem;
}

.manual-save .scg-button {
    width: 100%;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
}

.sidebar-section {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.sidebar-header {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--stemblue);
    margin-bottom: 1rem;
}
.checkbox-list {
    border-radius: 0.5rem !important;
    background-color: white;
}
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 500;
}

.checkbox-label input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    accent-color: var(--stemblue);
}

.post-stats {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stat-label {
    font-weight: 500;
    color: #666;
}

.stat-value {
    font-weight: 600;
    color: #333;
}

.sidebar-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.draft-button {
    background: #6c757d !important;
}

.publish-button {
    background: var(--stemgreen) !important;
}

.cancel-button, .secondary-button {
    background: #6c757d !important;
}

.success-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

/* Admin Blog Management Styles */
.admin-blog-management {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
}

.management-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3rem;
    padding: 2rem;
    background: white;
    border-radius: 1.5rem;
    box-shadow: 0 8px 32px rgba(77, 46, 253, 0.1);
    border: 1px solid rgba(77, 46, 253, 0.08);
}

.management-header h1 {
    color: var(--stemblue);
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0;
    font-family: 'Poppins', sans-serif;
    letter-spacing: -0.02em;
}

.new-post-button {
    background: linear-gradient(135deg, var(--stemgreen) 0%, rgba(122, 253, 181, 0.8) 100%) !important;
    color: var(--stemblue) !important;
    width: auto !important;
    margin-top: 0 !important;
    padding: 0.875rem 1.75rem !important;
    border-radius: 0.875rem !important;
    font-weight: 600 !important;
    font-family: 'Poppins', sans-serif !important;
    box-shadow: 0 4px 16px rgba(122, 253, 181, 0.3) !important;
    transition: all 0.2s ease !important;
}

.new-post-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 32px rgba(122, 253, 181, 0.4) !important;
}

.management-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.blog-io-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: 0.875rem;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    border: 1px solid rgba(77, 46, 253, 0.2);
    background: white;
    color: var(--stemblue);
    cursor: pointer;
    transition: all 0.2s ease;
}

.blog-io-btn:hover {
    background: var(--stemblue-10);
    border-color: var(--stemblue);
}

.blog-io-btn i {
    font-size: 0.85rem;
}

.import-preview-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    max-height: 240px;
    overflow-y: auto;
}

.import-preview-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.blog-list-container {
    background: white;
    border-radius: 1.5rem;
    box-shadow: 0 8px 32px rgba(77, 46, 253, 0.08);
    border: 1px solid rgba(77, 46, 253, 0.08);
    overflow: hidden;
}

.list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(77, 46, 253, 0.05) 0%, #f8f9fa 100%);
    gap: 2rem;
}

.search-section {
    flex: 1;
    max-width: 400px;
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input {
    width: 100%;
    padding: 0.875rem 3rem 0.875rem 1rem;
    border: 2px solid rgba(77, 46, 253, 0.1);
    border-radius: 0.875rem;
    background: white;
    font-family: 'Poppins', sans-serif;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.search-input:focus {
    outline: none;
    border-color: var(--stemblue);
    box-shadow: 0 0 0 3px rgba(77, 46, 253, 0.1);
}

.search-button {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--stemblue);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    width: 2rem;
    height: 2rem;
}

.search-button:hover {
    background: rgba(77, 46, 253, 0.1);
    color: var(--stempink);
    transform: translateY(-50%) scale(1.1);
}

.search-button i {
    font-size: 0.875rem;
}

.filter-section {
    flex-shrink: 0;
}

.blog-table {
    display: flex;
    flex-direction: column;
}

.table-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 0.8fr 1fr 1fr;
    gap: 1rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(77, 46, 253, 0.08) 0%, rgba(77, 46, 253, 0.03) 100%);
    border-bottom: 2px solid rgba(77, 46, 253, 0.1);
    font-weight: 700;
    color: var(--stemblue);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: 'Poppins', sans-serif;
}

.table-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 0.8fr 1fr 1fr;
    gap: 1rem;
    padding: 1.5rem;
    border-bottom: 1px solid rgba(77, 46, 253, 0.05);
    align-items: center;
    transition: all 0.2s ease;
}

.table-row:hover {
    background: linear-gradient(135deg, rgba(77, 46, 253, 0.02) 0%, rgba(122, 253, 181, 0.02) 100%);
    transform: translateX(4px);
}

.post-title {
    font-weight: 600;
    color: var(--stemblue);
    margin-bottom: 0.5rem;
    font-size: 1rem;
    line-height: 1.3;
}

.post-excerpt {
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.4;
}

.status-badge {
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: 'Poppins', sans-serif;
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.status-badge.published {
    background: rgba(122, 253, 181, 0.2);
    color: #059669;
    border: 1px solid rgba(122, 253, 181, 0.3);
}

.status-badge.draft {
    background: rgba(254, 146, 13, 0.2);
    color: #d97706;
    border: 1px solid rgba(254, 146, 13, 0.3);
}

.col-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.action-btn {
    padding: 0.5rem 0.75rem;
    border: 1px solid transparent;
    background: rgba(77, 46, 253, 0.1);
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--stemblue);
    transition: all 0.2s ease;
    font-family: 'Poppins', sans-serif;
}

.action-btn:hover {
    background: rgba(77, 46, 253, 0.2);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(77, 46, 253, 0.2);
}

.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: #6b7280;
}

.empty-state h3 {
    color: var(--stemblue);
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    font-family: 'Poppins', sans-serif;
}

/* Pagination Styles */
.pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
    flex-wrap: wrap;
    gap: 1rem;
}

.pagination-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #6c757d;
    font-size: 0.9rem;
}

.pagination-controls {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.pagination-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0.5rem;
    border: 1px solid #dee2e6;
    background: white;
    color: #6c757d;
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.pagination-btn:hover:not(:disabled) {
    background: var(--stemblue-10);
    border-color: var(--stemblue);
    color: var(--stemblue);
}

.pagination-btn.active {
    background: var(--stemblue);
    border-color: var(--stemblue);
    color: white;
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f8f9fa;
}

.pagination-btn:disabled:hover {
    background: #f8f9fa;
    border-color: #dee2e6;
    color: #6c757d;
}

@media (max-width: 768px) {
    .pagination-container {
        flex-direction: column;
        text-align: center;
    }
    
    .pagination-controls {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .pagination-btn {
        min-width: 2.25rem;
        height: 2.25rem;
        font-size: 0.8rem;
    }
}

.delete-confirmation {
    padding: 2rem;
    max-width: 500px;
    border-radius: 12px;
}

.delete-confirmation h3 {
    color: var(--stemblue);
    margin-bottom: 1rem;
}

.warning-text {
    color: #dc3545;
    font-weight: 600;
    margin: 1rem 0;
}

.confirm-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.delete-button {
    background: #dc3545 !important;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .editor-form {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .editor-sidebar {
        order: -1;
    }
}

@media (max-width: 768px) {
    .blog-post-editor, .admin-blog-management {
        padding: 1rem;
    }
    
    .management-header {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .list-header {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .table-header, .table-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .table-header {
        display: none;
    }
    
    .table-row {
        padding: 1rem;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        margin: 0.5rem;
        background: white;
    }
    
    .col-actions {
        justify-content: center;
        margin-top: 1rem;
    }
    
    .toolbar-group {
        flex-wrap: wrap;
    }
}
.waitlist-form {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 40rem;
    margin: auto;
    background: white;
    border-radius: 1.5625rem;
}
.add-student-form {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    max-width: 40rem;
    scale: 0.9;
    font-size: 1rem;
}
.add-feedback-form {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    max-width: 40rem;
    scale: 0.9;
    font-size: 1rem;
}
.pad {
    padding-left: var(--gutter-left);
    padding-right: var(--gutter-right);
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.waitlist-input {
    height: 1.2rem;
}
.waitlist-header{
    padding-bottom: 2.6rem;
}
.waitlist {
    font-family: Poppins;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 300;
    line-height: 1.875rem;
    letter-spacing: 0.01563rem;
}

.feedback {
    font-family: Poppins;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 300;
    line-height: 1.875rem;
    letter-spacing: 0.01563rem;
    width: 100%;
}
.feedback-page {
    display: flex;
    justify-content: center;
    height: calc(100vh - var(--navBarHeight));
}

.feedback-frame {
    width: 100%;
    height: 100%;
    border: none;
    max-width: 100%;
    max-height: 100vh;
}

.dashboard-feedback-page {
    display: flex;
    justify-content: center;
    min-height: 70vh;
    width: 100%;
}

.dashboard-feedback-page > .fb-card {
    width: 100%;
}

.dashboard-feedback-page .feedback-frame {
    min-height: 70vh;
}

.bug-report-form {
    max-width: 56rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bug-report-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.bug-report-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.bug-report-label {
    font-size: 0.85rem;
    color: #334155;
    font-weight: 600;
}
/*.progress-container {*/
/*    position: relative;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*}*/
.progress-container {
    width: 40%;
    height: 20px;
    background-color: transparent;
    border-radius: 4px;
    overflow: hidden;
    border-color: var(--stemblue);
    border-width: 1px;
    border-style: solid;
    color: var(--stemblue);
}

.progress-container .progress-bar {
    height: 100% !important;
    background-color: var(--stemblue) !important;
    transition: width 0.5s ease-in-out;
    margin-top: 0 !important;
}
.progress-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.static-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* Ensures it stays on top */
}
.fade {
    transition: opacity 1s ease-out;
    opacity: 0;
}

.loader {
    width: 50px;
    aspect-ratio: 1;
    display: grid;
    border: 4px solid #0000;
    border-radius: 50%;
    border-right-color: #25b09b;
    animation: l15 1s infinite linear;
}
.loader::before,
.loader::after {
    content: "";
    grid-area: 1/1;
    margin: 2px;
    border: inherit;
    border-radius: 50%;
    animation: l15 2s infinite;
}
.loader::after {
    margin: 8px;
    animation-duration: 3s;
}
@keyframes l15{
     100%{transform: rotate(1turn)}
 }

.unity-desktop {
    display: flex;
    align-items: center;
    justify-content: center;
}

#unity-loading-bar {
    display: none;
}

#unity-progress-bar-empty {
    width: 100%;
    height: 20px;
    background-color: transparent;
    border: 1px solid var(--stemblue);
    border-radius: 5px;
    overflow: hidden;
}

#unity-progress-bar-full {
    width: 0%;
    height: 100%;
    background-color: var(--stemblue);
    border-radius: 4px;
    transition: width 0.3s ease-in-out;
}

.dropdown-wrapper {
    position: relative;
    cursor: pointer;
    user-select: none;
    /*width: 25rem;*/
}

.selected-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #ccc;
    padding: 0.5rem;
    background: white;
    border-radius: 4px;
    box-shadow: none;
    font-weight: 300;
}

.arrow-icon {
    margin-left: 0.5rem;
    display: flex;
    align-items: center;
    color: var(--stemblue);
}

.dropdown-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ccc;
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 10;
    border-radius: 4px;
    max-height: 200px;
    overflow-y: auto;
}

.dropdown-item {
    padding: 0.5rem;
    border-bottom: 1px solid #eee;
    transition: background 0.2s;
}

.dropdown-item:last-child {
    border-bottom: none;
}

.dropdown-item:hover {
    background: var(--stemblue);
    color: white;
}
.spinner-overlay {
     height: 12rem;
     background: transparent;
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 9999;
 }

.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #d3d3d34d;
    border-top: 5px solid var(--stemblue);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
.no-student-data {
    margin-top: 4.25rem;
}
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: modal-fade-in 0.3s ease-in-out;
}

.modal-dialog {
    position: relative;
    background-color: var(--stemblue-10);
    width: auto;
    max-width: 30vw;
    border-radius: 12px;
    box-shadow: 0 20px 25px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modal-slideUp 0.3s ease-out;
    z-index: 10000;
    padding: 3rem;
}

@keyframes modal-slideUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes modal-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Tell Us – Game Interest modal */
.modal-dialog.tell-us-modal-dialog {
    background: #fff;
    border: 1px solid var(--border, #e6e9f2);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(16, 24, 40, 0.12);
    padding: 0;
    max-width: 760px;
    width: 100%;
}

@media (max-width: 520px) {
    .modal-dialog.tell-us-modal-dialog {
        max-width: 100%;
        margin: 0.75rem;
    }
}

.beta-detail-modal {
    width: 100%;
    max-width: 800px;
    max-height: 85vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.beta-detail-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #e5e7eb;
    background-color: #f9fafb;
}

.beta-detail-modal .modal-header h2 {
    margin: 0;
    color: var(--stemblue, #4D2EFD);
    font-size: 1.5rem;
    font-weight: 600;
}

.beta-detail-modal .close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #6b7280;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
}

.beta-detail-modal .close-btn:hover {
    background-color: #f3f4f6;
    color: #374151;
}

.beta-detail-modal .modal-body {
    padding: 2rem;
    flex: 1;
    overflow-y: auto;
}

.beta-detail-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1.5rem 2rem;
    border-top: 1px solid #e5e7eb;
    background-color: #f9fafb;
}

.beta-detail-modal .detail-section {
    margin-bottom: 2rem;
}

.beta-detail-modal .detail-section:last-child {
    margin-bottom: 0;
}

.beta-detail-modal .detail-section h3 {
    margin: 0 0 1rem 0;
    color: var(--stemblue, #4D2EFD);
    font-size: 1.125rem;
    font-weight: 600;
}

.beta-detail-modal .detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.beta-detail-modal .detail-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.beta-detail-modal .detail-item strong {
    color: #374151;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.beta-detail-modal .detail-item span {
    color: #6b7280;
    font-size: 1rem;
}

.beta-detail-modal .tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.beta-detail-modal .detail-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    background-color: var(--stemblue, #4D2EFD);
    color: white;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .beta-detail-modal {
        max-width: 95vw;
        max-height: 90vh;
    }
    
    .beta-detail-modal .modal-header,
    .beta-detail-modal .modal-body,
    .beta-detail-modal .modal-footer {
        padding: 1rem;
    }
    
    .beta-detail-modal .detail-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .beta-detail-modal .modal-footer {
        flex-direction: column;
    }
}

.outcome-alert {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    margin-top: 2rem;
    font-size: 1rem;
    line-height: 1.2rem;
}

.outcome-alert-button {
    padding: 0.75rem 2rem;
    background-color: var(--stemblue);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1rem;
}

.outcome-alert-button:hover {
    background-color: var(--stemblue);

    box-shadow: 0 4px 12px rgba(77, 46, 253, 0.3);
}

.outcome-alert-button:active {
    box-shadow: 0 2px 6px rgba(77, 46, 253, 0.3);
}

button[data-title] {
    position: relative;
    cursor: pointer;
}

button[data-title]::after {
    content: attr(data-title);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--stempink-50);
    color: var(--stemblack);
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    font-weight: 400;
    font-size: 1rem;
    z-index: 2;
}

button[data-title]:hover::after {
    opacity: 1;
}

div[data-title] {
    position: relative;
    cursor: pointer;
}

div[data-title]::after {
    content: attr(data-title);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--stempink-50);
    color: var(--stemblack);
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    font-weight: 400;
    font-size: 1rem;
}

div[data-title]:hover::after {
    opacity: 1;
}

a[data-title] {
    position: relative;
    cursor: pointer;
}

a[data-title]::after {
    content: attr(data-title);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--stempink-50);
    color: var(--stemblack);
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    font-weight: 400;
    font-size: 1rem;

}

a[data-title]:hover::after {
    opacity: 1;
}
.dashboard-busy{
    height: 400px;
}

.add-account-header {
    color: var(--stemblue);
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
} 

.parent-account-type{
    padding:.5rem;
    border: var(--stempink);
    border-style: solid;
    color: var(--stempink);
    border-radius: .5rem;
    border-width: 1px;
    max-height: 2.3rem;
    font-size: smaller;
}

.educator-account-type {
    padding: .5rem;
    border: var(--stemblue);
    border-style: solid;
    color: var(--stemblue);
    border-radius: .5rem;
    border-width: 1px;
    max-height: 2.3rem;
    font-size: smaller;
}

.student-account-type {
    padding: .5rem;
    border: var(--stemorange);
    border-style: solid;
    color: var(--stemorange);
    border-radius: .5rem;
    border-width: 1px;
    max-height: 2.3rem;
    font-size: smaller;
}

.dashboard-greeting {
    display: flex;
    gap: 1.2rem;
}
.selected-text-area {
    height: 300px;
}    
.completion-button {
    height: auto;
}

/* Blog Post Styles - Based on Figma Design */
.blogPost {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    width: 100%;
    margin: 0 auto;
    justify-content: space-between;
    margin-bottom: 2rem;
}

.blogPostContent {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    min-width: 34.6rem;
    flex-shrink: 0;
    max-width: calc((var(--designSize) - var(--gutter-left) - var(--gutter-right) - 6rem) / 2);
}

.blogPostHeader {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.blogPostTitle {
    font-family: 'Poppins', sans-serif;
    font-size: 2.1875rem; /* 35px */
    font-weight: 700;
    line-height: 2.625rem; /* 42px */
    color: var(--stemblue);
    margin: 0;
    width: 100%;
    min-width: 100%;
    cursor: pointer;
    transition: color 0.3s ease, transform 0.2s ease;
}

.blogPostTitle:hover {
    color: var(--stempink);
    transform: translateY(-1px);
}

.blogPostMeta {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.blogPostMetaInfo {
    display: flex;
    gap: 1rem;
    margin: 0 0 0rem;
    align-items: center;
}

.blogPostCategory {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem; /* 16px */
    font-weight: 600;
    color: var(--stemblue);
    line-height: normal;
}

.blogPostCategory.clickable {
    cursor: pointer;
    transition: opacity 0.3s ease, text-decoration 0.3s ease;
}

.blogPostCategory.clickable:hover {
    opacity: 0.7;
    text-decoration: underline;
}

.blogPostAuthor {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem; /* 16px */
    font-weight: 600;
    color: var(--stemblue);
    line-height: normal;
}

.blogPostAuthor.clickable {
    cursor: pointer;
    transition: opacity 0.3s ease, text-decoration 0.3s ease;
}

.blogPostAuthor.clickable:hover {
    opacity: 0.7;
    text-decoration: underline;
}

.blogPostDate {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem; /* 16px */
    font-weight: 400;
    color: #3C3852;
    line-height: normal;
}

.blogPostDivider {
    width: 8px;
    height: 8px;
    background: #9D98B9;
    border-radius: 50%;
    flex-shrink: 0;
}

.blogPostExcerpt {
    font-family: 'Poppins', sans-serif;
    font-size: 1.25rem; /* 20px */
    font-weight: 300;
    line-height: 1.875rem; /* 30px */
    letter-spacing: 0.25px;
    color: var(--stemblack);
    margin: 0;
    width: 100%;
    min-width: 100%;
}

.blogPostTags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-start;
    width: 100%;
}

.blogPostTag {
    display: flex;
    align-items: center;
    padding: 1rem 1.75rem; /* 16px 28px */
    background: var(--stemblue-10);
    border-radius: 2.8225rem; /* 45px */
    box-sizing: border-box;
    flex-shrink: 0;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.blogPostTag:hover {
    transform: translateY(-2px);
}

.blogPostTag span {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem; /* 16px */
    font-weight: 400;
    color: var(--stemblue);
    line-height: normal;
}

.blogPostTagHighlighted {
    background: var(--stemblue);
}

.blogPostTagHighlighted span {
    color: var(--stemwhite);
}

.blogPostImage {
    display: grid;
    grid-template-columns: max-content;
    grid-template-rows: max-content;
    justify-items: start;
    line-height: 0;
    min-height: 1px;
    min-width: 1px;
    flex-shrink: 0;
}

.blogPostImageContainer {
    grid-column: 1;
    grid-row: 1;
    height: 324.214px;
    width: 34.875rem;
    border-radius: 25px;
    position: relative;
    overflow: hidden;
}

.blogPostImageContainer img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    border-radius: 25px;
}
.student-modal-popup {

}
.blogPostDefaultImage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #F7A7E6 0%, #F1EEFF 100%);
    border-radius: 25px;
}

.blogPostImageWithFallback {
    position: relative;
    width: 100%;
    height: 100%;
}

.blogPostImageWithFallback .blogPostPlaceholderImage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 25px;
    z-index: 0;
}

.blog-multimedia-container {
    width: 100%;
    height: 100%;
}

.blogPostPlaceholderImage {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 25px;
}
.disable-button, .close-button, .cancel-button, .disable-confirm-button{
    width: auto; !important;
}

.disable-reason-input{
    width: 40vw
}

.blogGeometricShape {
    position: absolute;
    border-radius: 12px;
}

.blogShape1 {
    top: 20px;
    right: 30px;
    width: 80px;
    height: 60px;
    background: var(--stemblue);
    transform: rotate(25deg);
    opacity: 0.9;
}

.blogShape2 {
    top: 100px;
    right: 100px;
    width: 60px;
    height: 60px;
    background: var(--stemgreen);
    transform: rotate(-15deg);
    opacity: 0.8;
}

.blogShape3 {
    bottom: 60px;
    left: 60px;
    width: 70px;
    height: 50px;
    background: var(--stempink);
    transform: rotate(45deg);
    opacity: 0.85;
}

.blogShape4 {
    bottom: 30px;
    right: 40px;
    width: 50px;
    height: 70px;
    background: var(--stemorange);
    transform: rotate(-30deg);
    opacity: 0.9;
}

.blogShape5 {
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    background: var(--stemblue);
    transform: translate(-50%, -50%) rotate(15deg);
    opacity: 0.7;
}

/* Blog Listing Container Updates */
.blogListingContainer {
    padding: 2rem var(--gutter-left);
}

.blogGrid {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    align-items: center;
}

/* Responsive Design */
@media (max-width: 1300px) {
    .blogPost {
        max-width: 100%;
        flex-direction: column;
        gap: 2rem;
    }
    
    .blogPostContent {
        width: 100%;
        min-width: 0;
    }
    
    .blogPostImage {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    
    .blogPostImageContainer {
        max-width: 558px;
        height: 324px;
        margin: 0 auto;
        flex-shrink: 0;
    }
    
    .blogListingContainer {
        padding: 2rem 1rem;
    }
}

@media (max-width: 768px) {
    .blogPostTitle {
        font-size: 1.75rem;
        line-height: 2.1rem;
    }
    
    .blogPostContent {
        min-width: 0;
    }
    
    .blogPostExcerpt {
        font-size: 1.125rem;
        line-height: 1.6rem;
    }
    
    .blogPostImage {
        width: 100%;
    }
    
    .blogPostImageContainer {
        width: 100%;
        height: 324px;
        max-width: 100%;
    }
    
    .blogPostMetaInfo {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}

/* Pagination Component */
.pagination {
    position: relative;
    width: 100%;
    height: 62px;
    /*border-top: 1px solid var(--stemblue);*/
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2rem;
}

.pagination-nav {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--stemblue);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.pagination-nav:hover {
    opacity: 0.7;
}

.pagination-back {
    gap: 15px;
}

.pagination-next {
    gap: 10px;
}

.pagination-text {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 35px;
    text-transform: uppercase;
    color: var(--stemblue);
}

.pagination-pages {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 26px;
    align-items: center;
}

.pagination-page {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 35px;
    text-transform: uppercase;
    color: var(--stemblue);
    cursor: pointer;
    width: 12px;
    height: 19px;
    text-align: center;
    transition: font-weight 0.3s ease;
}

.pagination-page:hover {
    opacity: 0.7;
}

.pagination-page.active {
    font-weight: 700;
}

.pagination-arrow-left,
.pagination-arrow-right {
    width: 20px;
    height: 30px;
    background-color: var(--stemblue);
    position: relative;
}

.pagination-arrow-left::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 6px;
    height: 6px;
    border-left: 2px solid white;
    border-bottom: 2px solid white;
}

.pagination-arrow-right::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 6px;
    height: 6px;
    border-right: 2px solid white;
    border-top: 2px solid white;
}

/* Responsive Pagination */
@media (max-width: 768px) {
    .pagination {
        padding: 0 10px;
    }
    
    .pagination-pages {
        gap: 20px;
    }
    
    .pagination-back {
        gap: 10px;
    }
    
    .pagination-next {
        gap: 8px;
    }
}

/* Search Filter Bar Component */
.search-filter-bar {
    width: 100%;
    background-color: var(--stemblue);
    padding: 0;
    box-sizing: border-box;
    z-index: 100;
}

.search-filter-container {
    display: flex;
    gap: 16px;
    align-items: center;
    width: 100%;
}

.search-section,
.filter-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    justify-content: center;
}

.search-label,
.filter-label {
    font-family: 'Poppins', sans-serif;
    font-size: 21px;
    font-weight: 600;
    line-height: normal;
    color: var(--stemwhite);
    margin: 0;
}

.search-input-container {
    position: relative;
    width: 100%;
    background-color: white;
    border-radius: 45px;
    box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.search-input {
    flex: 1;
    border: none;
    outline: none;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    background: transparent;
    color: #333;
}

.search-input::placeholder {
    color: #999;
}

.search-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    margin-right: 1rem;
}

.search-icon:hover {
    transform: scale(1.1);
}

.search-icon:active {
    transform: scale(0.95);
}

.filter-accordion {
    background-color: white;
    border-radius: 45px;
    width: 283px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 28px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.filter-accordion:hover {
    transform: translateY(-1px);
    box-shadow: 0px 2px 15px 3px rgba(0, 0, 0, 0.1);
}

.filter-text {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: normal;
    color: black;
    margin: 0;
}

.filter-arrow {
    width: 26px;
    height: 14px;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter-accordion.open .filter-arrow {
    transform: rotate(180deg);
}

/* Responsive Design for Search Filter Bar */
@media (max-width: 1024px) {

    .filter-accordion {
        width: 250px;
    }
}

@media (max-width: 768px) {

    
    .search-filter-container {
        flex-direction: column;
        gap: 20px;
        align-items: stretch;
    }
    
    .filter-accordion {
        width: 100%;
        max-width: 100%;
    }
    
    .search-section,
    .filter-section {
        width: 100%;
    }
}

/* Blog Listing Container Styles */
.blogListingContainer {
    padding: 4rem 0;
}

.blogListingHeader {
    text-align: center;
    margin-bottom: 3rem;
}

.blogListingTitle {
    color: var(--stemblue);
    font-family: Poppins;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.blogListingSubtitle {
    color: var(--stemblack);
    font-family: Poppins;
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1.6;
}

.blogGrid {
    display: flex;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    justify-items: center;
}

.noBlogPosts {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem;
    color: var(--stemblue);
    font-family: Poppins;
    font-size: 1.125rem;
}

/* Responsive adjustments for blog cards */
@media (max-width: 768px) {
    .blogGrid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .blogCard {
        max-width: 100%;
    }
    
    .blogListingTitle {
        font-size: 2rem;
    }
    
    .blogCardBody {
        padding: 1.5rem;
    }
}
.educator-dashboard-container {
    background-color: var(--stemblue-10);
    max-width: var(--designSize);
    margin: 0 auto;
    padding-left: var(--gutter-left);
    padding-right: var(--gutter-right);
}
.educator-dashboard-divider {
    padding: 0 !important;
    margin: 0 !important;
}
/* Blog Results Component Styles */
.blogResultsComponent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    margin-top: 2rem;
}

.blogResultsLeft {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-shrink: 0;
}

.blogResultsText {
    height: 24px;
    position: relative;
    flex-shrink: 0;
    width: 186px;
}

.blogResultsText span {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem; /* 16px */
    font-weight: 400;
    line-height: normal;
    color: var(--stemblack);
}

.blogResultsCount {
    font-weight: 600 !important;
}

.blogResultsFilters {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-shrink: 0;
}

.blogResultsFilterTag {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem; /* 8px 16px */
    background: var(--stemblue-10);
    border-radius: 2.8225rem; /* 45px */
    box-sizing: border-box;
    flex-shrink: 0;
}

.blogResultsFilterTag span {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem; /* 16px */
    font-weight: 400;
    line-height: normal;
    color: var(--stemblue);
}

.blogResultsFilterRemove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.blogResultsFilterRemove:hover {
    transform: scale(1.1);
}

.blogResultsRight {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.blogResultsSort {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 30px;
    background: var(--stemwhite);
    border-radius: 2.8225rem; /* 45px */
    box-sizing: border-box;
    flex-shrink: 0;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.blogResultsSort:hover {
    background: var(--stemblue-10);
}

.blogResultsSortText {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    line-height: normal;
    font-size: 1.125rem; /* 18px */
    color: var(--stemblack);
    overflow: hidden;
    flex-shrink: 0;
}

.blogResultsSortLabel {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
}

.blogResultsSortValue {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}

.blogResultsSortIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 8.615px;
    width: 16px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.blogResultsSort.open .blogResultsSortIcon {
    transform: rotate(180deg);
}

.blogResultsSortDropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--stemwhite);
    border: 1px solid var(--stemblue-10);
    border-radius: 1rem;
    box-shadow: 0 4px 12px rgba(77, 46, 253, 0.1);
    z-index: 1000;
    min-width: 160px;
    margin-top: 0.5rem;
}

.blogResultsSortOption {
    padding: 0.75rem 1rem;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: var(--stemblack);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.blogResultsSortOption:hover {
    background: var(--stemblue-10);
}

.blogResultsSortOption.active {
    background: var(--stemblue);
    color: var(--stemwhite);
    font-weight: 600;
}

.blogResultsSortOption:first-child {
    border-radius: 1rem 1rem 0 0;
}

.blogResultsSortOption:last-child {
    border-radius: 0 0 1rem 1rem;
}

/* Blog Status Filter (Admin only) */
.blogResultsStatusFilter {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    background: var(--stemblue-10);
    border-radius: 2.8225rem;
    padding: 0.25rem;
}

.blogResultsStatusBtn {
    font-family: 'Poppins', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.4rem 1rem;
    border: none;
    border-radius: 2rem;
    background: transparent;
    color: var(--stemblue);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.blogResultsStatusBtn:hover {
    background: rgba(77, 46, 253, 0.08);
}

.blogResultsStatusBtn.active {
    background: var(--stemblue);
    color: var(--stemwhite);
}

/* Blog Draft Badge */
.blogPostDraftBadge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.75rem;
    border-radius: 999px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    background: #FFF3E0;
    color: #E65100;
    width: fit-content;
}

.blogPost--draft {
    opacity: 0.85;
}

/* Blog Detail Draft Banner */
.blog-detail-draft-banner {
    background: #FFF3E0;
    color: #E65100;
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    border: 1px solid #FFE0B2;
}

/* Responsive Design for Blog Results */
@media (max-width: 768px) {
    .blogResultsComponent {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .blogResultsLeft {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        width: 100%;
    }
    
    .blogResultsText {
        width: auto;
    }
    
    .blogResultsFilters {
        flex-wrap: wrap;
    }
    
    .blogResultsRight {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        gap: 0.75rem;
        flex-wrap: wrap;
    }
}

/* Blog detail header styles */
.blog-detail-header {
  width: 100%;
  background: var(--stemwhite, #FFFFFF);
  padding: 2rem 0 0rem;
}

.blog-detail-header-content {
  max-width: 700px;
  padding: 0 1rem;
}

.blog-detail-title {
  font-family: 'Poppins', sans-serif;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--copy, #3C3852);
  margin: 0 0 1.5rem;
  text-align: left;
}

.blog-detail-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}

.blog-detail-category,
.blog-detail-author,
.blog-detail-date,
.blog-detail-relative-date {
  font-family: 'Poppins', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--stemblue, #4D2EFD);
  white-space: nowrap;
}

.blog-detail-divider {
  width: 1px;
  height: 14px;
  background-color: var(--stemblue, #4D2EFD);
  opacity: 0.3;
}

.blog-detail-image-container {
  margin-bottom: 2rem;
    margin-top: 1rem;
}

.blog-detail-image {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, #f8f9ff 0%, #e8ebff 100%);
}

.blog-detail-header-no-cover-wrapper {
  background-color: #fbd0f2;
}

.blog-detail-header.no-cover {
  background: url('/images/blog-header-no-cover.png') center/cover no-repeat;
  position: relative;
  overflow: hidden;
  height: 510px;
  max-width: var(--designSize);
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 0 var(--gutter-left);
  box-sizing: border-box;
}

.blog-detail-header.no-cover .no-cover-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    gap: 1rem;
    display: flex;
    flex-direction: column;
}

.blog-detail-header.no-cover .blog-detail-title {
  font-size: 3.125rem;
}

.blog-detail-header.no-cover .blog-detail-lead {
  margin-bottom: 0;
}

.blog-detail-placeholder {
  width: 100%;
  height: 400px;
  position: relative;
  background: linear-gradient(135deg, #f8f9ff 0%, #e8ebff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.blog-geometric-shape {
  position: absolute;
  border-radius: 50%;
  opacity: 0.6;
}

.blog-shape-1 {
  width: 120px;
  height: 120px;
  background: var(--stemblue, #4D2EFD);
  top: 10%;
  left: 15%;
  opacity: 0.1;
}

.blog-shape-2 {
  width: 80px;
  height: 80px;
  background: var(--stemblue, #4D2EFD);
  top: 20%;
  right: 20%;
  opacity: 0.15;
}

.blog-shape-3 {
  width: 60px;
  height: 60px;
  background: var(--stemblue, #4D2EFD);
  bottom: 30%;
  left: 25%;
  opacity: 0.12;
}

.blog-shape-4 {
  width: 100px;
  height: 100px;
  background: var(--stemblue, #4D2EFD);
  bottom: 15%;
  right: 15%;
  opacity: 0.08;
}

.blog-shape-5 {
  width: 40px;
  height: 40px;
  background: var(--stemblue, #4D2EFD);
  top: 50%;
  left: 50%;
  opacity: 0.2;
  transform: translate(-50%, -50%);
}

.blog-shape-6 {
  width: 90px;
  height: 90px;
  background: var(--stemblue, #4D2EFD);
  top: 60%;
  right: 35%;
  opacity: 0.1;
}

.blog-detail-image-caption {
  font-family: 'Poppins', sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  color: #8B8B8B;
  margin: 0.5rem 0 0;
  text-align: center;
}

.blog-detail-lead {

    margin: 0;
    text-align: left;
    color: var(--copy, #3C3852);

    /* Body/Semibold */
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    max-width: 700px;
}

/* Responsive design for blog detail header */
@media (max-width: 768px) {
  .blog-detail-header {
    padding: 1.5rem 0 0rem;
  }

  .blog-detail-header.no-cover {
    height: 400px;
    padding: 0 1.5rem 2rem 1.5rem;
  }

  .blog-detail-header.no-cover .blog-detail-title {
    font-size: 2.25rem;
  }
  
  .blog-detail-title {
    font-size: 2.25rem;
    margin-bottom: 1rem;
  }
  
  .blog-detail-meta {
    margin-bottom: 2rem;
  }
  
  .blog-detail-placeholder {
    height: 280px;
  }
  
  .blog-shape-1 { width: 80px; height: 80px; }
  .blog-shape-2 { width: 60px; height: 60px; }
  .blog-shape-3 { width: 40px; height: 40px; }
  .blog-shape-4 { width: 70px; height: 70px; }
  .blog-shape-5 { width: 30px; height: 30px; }
  .blog-shape-6 { width: 60px; height: 60px; }
}

@media (max-width: 480px) {
  .blog-detail-header.no-cover {
    height: 350px;
    padding: 0 1rem 1.5rem 1rem;
  }

  .blog-detail-header.no-cover .blog-detail-title {
    font-size: 1.875rem;
  }

  .blog-detail-title {
    font-size: 1.875rem;
  }
  
  .blog-detail-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .blog-detail-divider {
    display: none;
  }
}

/* Generic blog post meta component styles */
.blog-post-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.blog-post-category,
.blog-post-author,
.blog-post-date,
.blog-post-relative-date {
  font-family: 'Poppins', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--stemblue, #4D2EFD);
  white-space: nowrap;
}

.blog-post-divider {
  width: 1px;
  height: 14px;
  background-color: var(--stemblue, #4D2EFD);
  opacity: 0.3;
}

.blog-post-category.clickable,
.blog-post-author.clickable {
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.blog-post-category.clickable:hover,
.blog-post-author.clickable:hover {
  opacity: 0.7;
}

/* Responsive design for generic blog post meta */
@media (max-width: 480px) {
  .blog-post-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .blog-post-divider {
    display: none;
  }
}

/* Blog detail page styles */
.blog-detail-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: 1rem;
}

.blog-detail-loading-subtle {
  min-height: 60vh;
  background: transparent;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid var(--stemblue, #4D2EFD);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.blog-detail-error {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 2rem;
}

.error-container {
  text-align: center;
  max-width: 500px;
}

.error-container h1 {
  font-family: 'Poppins', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--copy, #3C3852);
  margin-bottom: 1rem;
}

.error-container p {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  color: var(--copy, #3C3852);
  margin-bottom: 2rem;
  opacity: 0.7;
}

.blog-detail-content {
  max-width: 700px;
  padding: 0 0 4rem;
  overflow: hidden;
}

.blog-detail-article {
  margin-bottom: 3rem;
}

.blog-detail-article img:not(.multimedia-content) {
  max-width: 100%;
  height: auto;
}

.blog-content-text p {
  font-family: 'Poppins', sans-serif;
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--copy, #3C3852);
  margin-bottom: 1.5rem;
}

.blog-content-placeholder {
  padding: 3rem 2rem;
  text-align: center;
  background: #f8f9ff;
  border-radius: 12px;
  border: 2px dashed #e0e6ff;
}

.blog-content-placeholder p {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  color: var(--copy, #3C3852);
  opacity: 0.6;
  margin: 0;
}

.blog-detail-tags {
  margin-bottom: 3rem;
}

.blog-detail-tags h3 {
    color: var(--stemblue, #4D2EFD);
    font-size: 1.3125rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 0.62rem;
}

.blog-tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.blog-tag {
  background: var(--stemblue-10, #f0f0ff);
  color: var(--stemblue, #4D2EFD);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
}

.blog-detail-footer {
  border-top: 1px solid #e0e6ff;
  padding-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.blog-detail-meta-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.blog-reading-time {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Poppins', sans-serif;
  font-size: 0.875rem;
  color: var(--copy, #3C3852);
  opacity: 0.7;
}

.clock-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.blog-published-date {
  font-family: 'Poppins', sans-serif;
  font-size: 0.875rem;
  color: var(--copy, #3C3852);
  opacity: 0.7;
}

.blog-detail-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.btn-primary, .btn-secondary {
  font-family: 'Poppins', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.75rem 1.5rem;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-primary {
  background: var(--stemgreen, #7AFDB5);
  color: var(--stemblue, #4D2EFD);
}

.btn-primary:hover {
  background: #5dfca0;
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--stemwhite, #FFFFFF);
  color: var(--stemblue, #4D2EFD);
  border: 2px solid var(--stemblue, #4D2EFD);
}

.btn-secondary:hover {
  background: var(--stemblue-10, #f0f0ff);
}

/* Blog content HTML styles */
.blog-detail-article h1,
.blog-detail-article h2,
.blog-detail-article h3,
.blog-detail-article h4,
.blog-detail-article h5,
.blog-detail-article h6 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color: var(--copy, #3C3852);
  margin-top: 2rem;
  margin-bottom: 1rem;
  line-height: 1.3;
}

.blog-detail-article h2 {
  font-size: 1.75rem;
}

.blog-detail-article h3 {
  font-size: 1.5rem;
}

.blog-detail-article h4 {
  font-size: 1.25rem;
}

.blog-detail-article p {

    color: var(--copy, #3C3852);
    margin-bottom: 1.5rem;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.blog-detail-article ul,
.blog-detail-article ol {
    margin-bottom: 1.5rem;
    color: #000;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.blog-detail-article ul {
    list-style: none;
}

.blog-detail-article ul li {
    position: relative;
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;
}

.blog-detail-article ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.35rem;
    width: 11px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='12' viewBox='0 0 11 12' fill='none'%3E%3Cpath d='M11 6L0 0V12L11 6Z' fill='%234D2EFD'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

.blog-detail-article li {
  margin-bottom: 0.5rem;
}

.blog-detail-article blockquote {
  position: relative;
  background: #F1EEFF;
  border: none;
  border-radius: 25px;
  padding: 32px;
  margin: 2rem 0;
  font-style: normal;
  text-align: center;
  display: flex;
  flex-direction: column;
    align-items: start;
    justify-content: start;
}

.blog-detail-article blockquote::before {
  content: "";
  position: absolute;
  top: 32px;
  left: 32px;
  width: 38px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg width='38' height='16' viewBox='0 0 38 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.79895 15.2L17.6001 0H9.72748e-05L8.79895 15.2Z' fill='%234D2EFD'/%3E%3Cpath d='M13.5996 7.2L17.6001 0H9.6001L13.5996 7.2Z' fill='%23A58FFC'/%3E%3Cpath d='M28.7989 15.2L37.6001 0H20.0001L28.7989 15.2Z' fill='%234D2EFD'/%3E%3Cpath d='M33.5996 7.2L37.6001 0H29.6001L33.5996 7.2Z' fill='%23A58FFC'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

.blog-detail-article blockquote::after {
  content: "";
  position: absolute;
  bottom: 32px;
  right: 32px;
  width: 38px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg width='38' height='16' viewBox='0 0 38 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.79895 15.2L17.6001 0H9.72748e-05L8.79895 15.2Z' fill='%234D2EFD'/%3E%3Cpath d='M13.5996 7.2L17.6001 0H9.6001L13.5996 7.2Z' fill='%23A58FFC'/%3E%3Cpath d='M28.7989 15.2L37.6001 0H20.0001L28.7989 15.2Z' fill='%234D2EFD'/%3E%3Cpath d='M33.5996 7.2L37.6001 0H29.6001L33.5996 7.2Z' fill='%23A58FFC'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  transform: scaleY(-1);
}

.blog-detail-article blockquote p {
  font-family: 'Poppins', sans-serif;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: normal;
  color: #3C3852;
  margin: 1rem 0 18px 0;
}

.blog-detail-article blockquote cite {
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 35px;
  color: #3C3852;
  text-transform: uppercase;
  font-style: normal;
  margin: 0;
}
.rounded {
    border-radius: 8px;
}

.rounded-lg {
    border-radius: 16px;
}

/* Add shadow */
.shadow {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.blog-detail-article code {
  background: #f4f4f4;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
}

.blog-detail-article pre {
  background: #f4f4f4;
  padding: 1.5rem;
  border-radius: 8px;
  overflow-x: auto;
  margin: 1.5rem 0;
}

/* Responsive design for blog detail page */
@media (max-width: 768px) {
  
  .blog-detail-meta-footer {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .blog-detail-actions {
    flex-direction: column;
    align-items: stretch;
  }
  
  .btn-primary, .btn-secondary {
    text-align: center;
    justify-content: center;
  }
  
  .blog-detail-article h2 {
    font-size: 1.5rem;
  }
  
  .blog-detail-article h3 {
    font-size: 1.25rem;
  }
  
  .blog-detail-article p {
    font-size: 1rem;
  }
}

/* Global Multimedia Container Styles - Matches MultimediaContent component */
.multimedia-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    background-color: transparent;
}

/* Make container maintain aspect ratio */
.multimedia-container.aspect-16-9 {
    aspect-ratio: 16 / 9;
}

.multimedia-container.aspect-4-3 {
    aspect-ratio: 4 / 3;
}

.multimedia-container.aspect-1-1 {
    aspect-ratio: 1 / 1;
}

/* Multimedia Content Styles */
.multimedia-content {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease-in-out;
    display: block;
}

/* Sizing mode classes */
.multimedia-content.sizing-cover {
    object-fit: cover;
}

.multimedia-content.sizing-contain {
    object-fit: contain;
    background: rgba(0, 0, 0, 0.05); /* subtle background for letterboxing */
}

/* Original sizing - media element fills container at natural dimensions */
.multimedia-content.sizing-original {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: 500px; /* prevent extremely tall images */
    object-fit: none;
    position: static;
    display: block;
}

.multimedia-content.sizing-auto {
    /* Smart auto-sizing - fills container which sizes to content */
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: 100%;
    object-fit: none;
    position: static;
    display: block;
}

/* Container adjustments for original and auto sizing */
.multimedia-container:has(.sizing-original) {
    aspect-ratio: unset !important;
    height: auto !important;
    width: fit-content !important;
    max-width: 100%;
    display: inline-block;
    overflow: visible;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.multimedia-container:has(.sizing-auto) {
    width: fit-content;
    max-width: 100%;
    display: inline-block;
    overflow: visible;
}

/* When an explicit aspect ratio is set, sizing-auto should respect it */
.multimedia-container.aspect-16-9:has(.sizing-auto),
.multimedia-container.aspect-4-3:has(.sizing-auto),
.multimedia-container.aspect-1-1:has(.sizing-auto) {
    width: 100%;
    display: block;
    overflow: hidden;
}
.multimedia-container.aspect-16-9 .multimedia-content.sizing-auto,
.multimedia-container.aspect-4-3 .multimedia-content.sizing-auto,
.multimedia-container.aspect-1-1 .multimedia-content.sizing-auto {
    object-fit: cover;
}

/* Ensure rounded/shadow work even with overflow:visible sizing modes */
.multimedia-container.rounded .multimedia-content {
    border-radius: 8px;
}
.multimedia-container.rounded-lg .multimedia-content {
    border-radius: 16px;
}
.multimedia-container.shadow .multimedia-content {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.multimedia-container.shadow-lg .multimedia-content {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* For fixed aspect containers, maintain standard behavior */
.multimedia-container.aspect-16-9:not(:has(.sizing-original)),
.multimedia-container.aspect-4-3:not(:has(.sizing-original)),
.multimedia-container.aspect-1-1:not(:has(.sizing-original)) {
    width: 100%;
    display: block;
}

.multimedia-content.contain {
    object-fit: contain;
}

.multimedia-content.fill {
    object-fit: fill;
}

/* Loading State */
.multimedia-content.loading {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
}

.multimedia-content.loaded {
    opacity: 1;
    position: relative;
}

/* Original sizing overrides position */
.multimedia-content.sizing-original.loaded {
    position: static;
}

/* Placeholder Styles */
.multimedia-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

/* Error State */
.multimedia-error {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #666;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
}

/* Responsive Video */
video.multimedia-content {
    display: block;
}

/* Responsive Breakpoints for Multimedia */
@media (max-width: 768px) {
    .multimedia-container {
        max-height: 400px;
    }
    
    .multimedia-content.sizing-original {
        max-height: 300px; /* smaller max height on mobile */
    }
}

@media (max-width: 480px) {
    .multimedia-container {
        max-height: 300px;
    }
    
    .multimedia-content.sizing-original {
        max-height: 250px; /* even smaller on small mobile */
    }
}

/* Round corners */
.multimedia-container.rounded {
    border-radius: 8px;
}

.multimedia-container.rounded-lg {
    border-radius: 16px;
}

/* Add shadow */
.multimedia-container.shadow {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.multimedia-container.shadow-lg {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Blog Article Link Styles */
.blog-detail-article a {
    color: var(--stemblue, #4D2EFD);
    text-decoration: underline;
    transition: color 0.2s ease;
}

.blog-detail-article a:hover {
    color: var(--stempink, #F04FCD);
}
/* Admin Layout and Dashboard Styles */
.admin-layout {
    display: flex;
    min-height: 100vh;
    background: linear-gradient(135deg, var(--stemblue-10) 0%, #f8f9fb 100%);
    font-family: 'Poppins', sans-serif;
}

.admin-sidebar {
    width: 300px;
    background: linear-gradient(0deg, var(--stemblue) 0%, #17246d 100%);
    color: white;
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 20px rgba(77, 46, 253, 0.15);
    position: relative;
    z-index: 10;
}

.sidebar-header {
    padding: 2rem 1.5rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
}

.admin-logo .logo-link {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    color: white;
    text-decoration: none;
    font-size: 1.25rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.admin-logo .logo-link:hover {
    transform: translateY(-1px);
    color: var(--stemgreen);
}

.admin-logo svg {
    color: var(--stemgreen);
    filter: drop-shadow(0 2px 4px rgba(122, 253, 181, 0.3));
}

.logo-text {
    font-family: 'Poppins', sans-serif;
    letter-spacing: -0.02em;
}

.sidebar-menu {
    flex: 1;
    padding: 1rem 0;
}

.menu-section {
    margin-bottom: 1.5rem;
}

.menu-section-title {
    padding: 0.75rem 1.5rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--stemgreen);
    margin: 0 0 0.5rem 0;
    font-family: 'Poppins', sans-serif;
}

.menu-items {
    list-style: none;
    margin: 0;
    padding: 0;
    flex-direction: column;
    align-items: normal;
}

.menu-item {
    margin: 0 0.75rem;
}

.menu-link {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    border-radius: 0.75rem;
    font-weight: 500;
    position: relative;
    overflow: hidden;
}

.menu-link:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(122, 253, 181, 0.1) 100%);
    color: white;
    transform: translateX(4px);
}

.menu-item.active .menu-link {
    background: linear-gradient(135deg, var(--stemgreen) 0%, rgba(122, 253, 181, 0.8) 100%);
    color: var(--stemblue);
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(122, 253, 181, 0.3);
}

.menu-icon {
    font-size: 1rem;
    width: 1.25rem;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sidebar-footer {
    padding: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
}

.footer-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.back-to-site, .logout-btn {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    border-radius: 0.75rem;
    transition: all 0.2s ease;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    text-align: left;
    font-family: 'Poppins', sans-serif;
}

.back-to-site:hover, .logout-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    color: white;
    transform: translateY(-1px);
}

.logout-btn {
    background: rgba(240, 79, 205, 0.1);
    border-color: rgba(240, 79, 205, 0.2);
}

.logout-btn:hover {
    background: rgba(240, 79, 205, 0.2);
    border-color: rgba(240, 79, 205, 0.3);
}

.admin-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: transparent;
}

.admin-content-header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 1.5rem 2rem;
    border-bottom: 1px solid rgba(77, 46, 253, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 20px rgba(77, 46, 253, 0.08);
    position: sticky;
    top: 0;
    z-index: 5;
}

.admin-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #6c757d;
    font-size: 0.875rem;
    font-weight: 500;
}

.breadcrumb-separator {
    color: var(--stemblue);
    font-weight: 600;
}

.current-page {
    color: var(--stemblue);
    font-weight: 600;
}

.admin-user-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(77, 46, 253, 0.05);
    padding: 0.5rem 1rem;
    border-radius: 1rem;
}

.admin-username {
    font-weight: 600;
    color: var(--stemblue);
    font-size: 0.875rem;
}

.admin-role-badge {
    background: linear-gradient(135deg, var(--stemgreen) 0%, rgba(122, 253, 181, 0.8) 100%);
    color: var(--stemblue);
    padding: 0.375rem 0.875rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    box-shadow: 0 2px 8px rgba(122, 253, 181, 0.3);
}

.admin-page-content {
    flex: 1;
    padding: 2rem;
    overflow-y: auto;
    background: transparent;
}

.admin-unauthorized {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, var(--stemblue-10) 0%, #f8f9fb 100%);
    font-family: 'Poppins', sans-serif;
}

.unauthorized-content {
    text-align: center;
    padding: 3rem;
    background: white;
    border-radius: 1.5rem;
    box-shadow: 0 16px 48px rgba(77, 46, 253, 0.15);
    border: 1px solid rgba(77, 46, 253, 0.1);
    max-width: 480px;
    position: relative;
    overflow: hidden;
}

.unauthorized-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, var(--stemblue) 0%, var(--stempink) 100%);
}

.unauthorized-content h2 {
    color: var(--stemblue);
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 1rem 0;
    letter-spacing: -0.02em;
}

.unauthorized-content p {
    color: #6b7280;
    font-size: 1rem;
    margin: 0 0 2rem 0;
    line-height: 1.5;
}

.btn-back-home {
    display: inline-block;
    padding: 0.875rem 1.75rem;
    background: linear-gradient(135deg, var(--stemblue) 0%, var(--stempink) 100%);
    color: white;
    text-decoration: none;
    border-radius: 0.875rem;
    margin-top: 1.5rem;
    transition: all 0.2s ease;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    box-shadow: 0 4px 16px rgba(77, 46, 253, 0.3);
}

.btn-back-home:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(77, 46, 253, 0.4);
    color: white;
    text-decoration: none;
}

/* Admin Dashboard Styles */
.admin-dashboard {
    max-width: 1400px;
    margin: 0 auto;
}

.dashboard-header {
    margin-bottom: 3rem;
    text-align: center;
}

.dashboard-header h1 {
    color: var(--stemblue);
    font-size: 3rem;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
    font-family: 'Poppins', sans-serif;
    letter-spacing: -0.02em;
    background: var(--stemblue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.dashboard-header p {
    color: #6c757d;
    font-size: 1.25rem;
    margin: 0;
    font-weight: 400;
}

.dashboard-subtitle {
    color: rgba(77, 46, 253, 0.7);
    font-size: 1.125rem;
    font-weight: 500;
}

/* Modern Dashboard Stats Grid */
.dashboard-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.modern-stat-card {
    background: white;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 8px 32px rgba(77, 46, 253, 0.1);
    border: 1px solid rgba(77, 46, 253, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.modern-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, var(--stemblue) 0%, var(--stempink) 100%);
}

.modern-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(77, 46, 253, 0.15);
}

.modern-stat-card.blog-posts::before {
    background: linear-gradient(135deg, var(--stemblue) 0%, var(--stempink) 100%);
}

.modern-stat-card.published::before {
    background: linear-gradient(135deg, var(--stemgreen) 0%, #5ee8a0 100%);
}

.modern-stat-card.drafts::before {
    background: linear-gradient(135deg, var(--stemorange) 0%, #ffb347 100%);
}

.modern-stat-card.users::before {
    background: linear-gradient(135deg, var(--stempink) 0%, var(--stempink-50) 100%);
}

.stat-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.stat-icon-container {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--stemblue-10) 0%, rgba(77, 46, 253, 0.05) 100%);
}

.stat-icon {
    font-size: 1.5rem;
}

.stat-trend {
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 0.75rem;
}

.stat-trend.positive {
    background: rgba(122, 253, 181, 0.2);
    color: #059669;
}

.stat-trend.neutral {
    background: rgba(254, 146, 13, 0.2);
    color: #d97706;
}

.stat-content {
    text-align: left;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--stemblue);
    margin: 0 0 0.5rem 0;
    font-family: 'Poppins', sans-serif;
    line-height: 1;
}

.stat-label {
    font-size: 1.125rem;
    font-weight: 600;
    color: #374151;
    margin: 0 0 0.25rem 0;
}

.stat-description {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
}

/* Dashboard Content Sections */
.dashboard-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.dashboard-section {
    background: white;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 8px 32px rgba(77, 46, 253, 0.08);
    border: 1px solid rgba(77, 46, 253, 0.1);
}

.modern-section {
    background: white;
    border-radius: 1.5rem;
    padding: 2.5rem;
    box-shadow: 0 12px 40px rgba(77, 46, 253, 0.1);
    border: 1px solid rgba(77, 46, 253, 0.08);
    position: relative;
    overflow: hidden;
}

.modern-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(135deg, var(--stemblue) 0%, var(--stempink) 50%, var(--stemgreen) 100%);
}

.section-header {
    margin-bottom: 2rem;
    text-align: center;
}

.section-header h2 {
    color: var(--stemblue);
    font-size: 2rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    font-family: 'Poppins', sans-serif;
}

.section-subtitle {
    color: #6b7280;
    font-size: 1rem;
    margin: 0;
    font-weight: 400;
}

/* Quick Actions Grid */
.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.modern-action-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.75rem;
    background: linear-gradient(135deg, #fff 0%, rgba(77, 46, 253, 0.02) 100%);
    border: 2px solid rgba(77, 46, 253, 0.1);
    border-radius: 1.25rem;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.modern-action-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--stemblue) 0%, var(--stempink) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modern-action-card:hover {
    transform: translateY(-4px);
    border-color: var(--stemblue);
    box-shadow: 0 16px 48px rgba(77, 46, 253, 0.15);
    color: inherit;
    text-decoration: none;
}

.modern-action-card:hover::before {
    opacity: 0.03;
}

.modern-action-card.primary-action {
    background: linear-gradient(135deg, var(--stemgreen) 0%, rgba(122, 253, 181, 0.8) 100%);
    border-color: var(--stemgreen);
    color: var(--stemblue);
}

.modern-action-card.primary-action:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 20px 60px rgba(122, 253, 181, 0.3);
    color: var(--stemblue);
}

.action-card-icon {
    width: 3.5rem;
    height: 3.5rem;
    background: rgba(77, 46, 253, 0.1);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.action-card-icon .action-icon i,
.stat-icon i,
.activity-icon i,
.empty-icon i {
    color: var(--stemblue);
    transition: color 0.2s ease;
}

.modern-action-card:hover .action-card-icon .action-icon i {
    color: var(--stempink);
}

.primary-action .action-card-icon .action-icon i {
    color: var(--stemblue);
}

.activity-icon-modern .activity-icon i {
    color: var(--stemblue);
    font-size: 1rem;
}

.primary-action .action-card-icon {
    background: rgba(77, 46, 253, 0.15);
}

.action-card-content {
    flex: 1;
    position: relative;
    z-index: 1;
}

.action-card-content h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--stemblue);
    margin: 0 0 0.25rem 0;
    font-family: 'Poppins', sans-serif;
}

.action-card-content p {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
    line-height: 1.4;
}

.action-arrow {
    font-size: 1.25rem;
    color: var(--stemblue);
    transition: transform 0.3s ease;
    position: relative;
    z-index: 1;
}

.modern-action-card:hover .action-arrow {
    transform: translateX(4px);
}

/* Modern Activity Feed */
.modern-activity-feed {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.modern-activity-item {
    display: flex;
    gap: 1rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(77, 46, 253, 0.1);
    position: relative;
}

.modern-activity-item:last-child {
    border-bottom: none;
}

.activity-item-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.activity-icon-modern {
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, var(--stemblue-10) 0%, rgba(77, 46, 253, 0.05) 100%);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    border: 2px solid rgba(77, 46, 253, 0.1);
    position: relative;
    z-index: 2;
}

.activity-timeline {
    width: 2px;
    flex: 1;
    background: rgba(77, 46, 253, 0.1);
    margin-top: 0.5rem;
}

.activity-item-content {
    flex: 1;
    min-width: 0;
}

.activity-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.activity-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--stemblue);
    margin: 0;
    line-height: 1.4;
}

.activity-time {
    font-size: 0.75rem;
    color: #9ca3af;
    white-space: nowrap;
    margin-left: 1rem;
}

.activity-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.activity-status {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.activity-status.published {
    background: rgba(122, 253, 181, 0.2);
    color: #059669;
}

.activity-status.draft {
    background: rgba(254, 146, 13, 0.2);
    color: #d97706;
}

.activity-author {
    font-size: 0.875rem;
    color: #6b7280;
}

.activity-actions {
    display: flex;
    gap: 0.5rem;
}

.action-btn-small {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.action-btn-small.edit {
    background: rgba(77, 46, 253, 0.1);
    color: var(--stemblue);
}

.action-btn-small.edit:hover {
    background: rgba(77, 46, 253, 0.2);
    color: var(--stemblue);
}

.action-btn-small.view {
    background: rgba(122, 253, 181, 0.1);
    color: #059669;
}

.action-btn-small.view:hover {
    background: rgba(122, 253, 181, 0.2);
    color: #059669;
}

.activity-empty-state {
    text-align: center;
    padding: 3rem 2rem;
    color: #6b7280;
}

.empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.activity-empty-state h3 {
    color: var(--stemblue);
    font-size: 1.25rem;
    margin: 0 0 0.5rem 0;
}

.activity-empty-state p {
    margin: 0 0 1.5rem 0;
    font-size: 0.875rem;
}

.btn-primary {
    display: inline-block;
    background: var(--stemgreen, #7AFDB5);
    color: var(--stemblue, #4D2EFD);
    padding: 0.75rem 1.5rem;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
    font-size: 0.875rem;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(122, 253, 181, 0.4);
    color: var(--stemblue, #4D2EFD);
    text-decoration: none;
}

/* System Status */
.system-status {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.status-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: linear-gradient(135deg, rgba(122, 253, 181, 0.05) 0%, rgba(122, 253, 181, 0.02) 100%);
    border: 1px solid rgba(122, 253, 181, 0.2);
    border-radius: 1rem;
    transition: all 0.2s ease;
}

.status-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(122, 253, 181, 0.1);
}

.status-indicator {
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 50%;
    background: var(--stemgreen);
    box-shadow: 0 0 8px rgba(122, 253, 181, 0.4);
}

.status-indicator.online {
    background: var(--stemgreen);
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0%, 100% {
        box-shadow: 0 0 8px rgba(122, 253, 181, 0.4);
    }
    50% {
        box-shadow: 0 0 16px rgba(122, 253, 181, 0.6);
    }
}

.status-label {
    flex: 1;
    font-weight: 500;
    color: var(--stemblue);
    font-size: 0.875rem;
}

/* Enhanced Mobile Responsive */
@media (max-width: 768px) {
    .admin-layout {
        flex-direction: column;
    }

    .admin-sidebar {
        width: 100%;
        order: 2;
        position: fixed;
        bottom: 0;
        height: auto;
        max-height: 60vh;
        overflow-y: auto;
        border-radius: 1.5rem 1.5rem 0 0;
        transform: translateY(calc(100% - 4rem));
        transition: transform 0.3s ease;
    }

    .admin-sidebar.expanded {
        transform: translateY(0);
    }

    .admin-main-content {
        order: 1;
        padding-bottom: 5rem;
    }

    .admin-content-header {
        padding: 1rem 1.5rem;
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .admin-page-content {
        padding: 1.5rem;
    }

    .dashboard-header h1 {
        font-size: 2.5rem;
    }

    .dashboard-stats-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .quick-actions-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .modern-action-card {
        padding: 1.5rem;
    }

    .sidebar-header {
        padding: 1rem 1.5rem;
        cursor: pointer;
        background: rgba(255, 255, 255, 0.1);
    }

    .menu-section {
        margin-bottom: 1rem;
    }

    .admin-user-info {
        background: rgba(77, 46, 253, 0.08);
        padding: 0.75rem 1rem;
        border-radius: 0.75rem;
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .dashboard-header h1 {
        font-size: 2rem;
    }

    .modern-stat-card {
        padding: 1.5rem;
    }

    .stat-number {
        font-size: 2rem;
    }

    .modern-section {
        padding: 1.5rem;
    }

    .activity-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .activity-time {
        margin-left: 0;
    }
}

/* Admin Global Button Styles */
.admin-layout .btn,
.admin-layout button:not(.action-btn):not(.logout-btn):not(.back-to-site),
.admin-layout input[type="submit"],
.admin-layout .scg-button {
    padding: 0.75rem 1.5rem;
    border: 2px solid transparent;
    border-radius: 0.875rem;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.admin-layout .btn-primary,
.admin-layout .publish-button,
.admin-layout input[type="submit"] {
    background: var(--stemgreen, #7AFDB5);
    color: var(--stemblue, #4D2EFD);
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(122, 253, 181, 0.3);
}

.admin-layout .btn-primary:hover,
.admin-layout .publish-button:hover,
.admin-layout input[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(122, 253, 181, 0.4);
    color: var(--stemblue, #4D2EFD);
    text-decoration: none;
}

.admin-layout .btn-secondary,
.admin-layout .cancel-button,
.admin-layout .secondary-button {
    background: white;
    color: var(--stemblue);
    border-color: var(--stemblue);
}

.admin-layout .btn-secondary:hover,
.admin-layout .cancel-button:hover,
.admin-layout .secondary-button:hover {
    background: var(--stemblue);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(77, 46, 253, 0.2);
}

.admin-layout .btn-success {
    background: linear-gradient(135deg, var(--stemgreen) 0%, rgba(122, 253, 181, 0.8) 100%);
    color: var(--stemblue);
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(122, 253, 181, 0.3);
}

.admin-layout .btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(122, 253, 181, 0.4);
    color: var(--stemblue);
}

.admin-layout .btn-warning,
.admin-layout .draft-button {
    background: linear-gradient(135deg, var(--stemorange) 0%, rgba(254, 146, 13, 0.8) 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(254, 146, 13, 0.3);
}

.admin-layout .btn-warning:hover,
.admin-layout .draft-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(254, 146, 13, 0.4);
    color: white;
}

.admin-layout .btn-danger,
.admin-layout .delete-button {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
}

.admin-layout .btn-danger:hover,
.admin-layout .delete-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(239, 68, 68, 0.4);
    color: white;
}

/* Admin Form Styling */
.admin-layout .form-control,
.admin-layout input[type="text"],
.admin-layout input[type="email"],
.admin-layout input[type="password"],
.admin-layout select,
.admin-layout textarea {
    padding: 0.875rem 1rem;
    border: 2px solid rgba(77, 46, 253, 0.1);
    border-radius: 0.875rem;
    background: white;
    font-family: 'Poppins', sans-serif;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    color: #374151;
}

.admin-layout .form-control:focus,
.admin-layout input:focus,
.admin-layout select:focus,
.admin-layout textarea:focus {
    outline: none;
    border-color: var(--stemblue);
    box-shadow: 0 0 0 3px rgba(77, 46, 253, 0.1);
}

.admin-layout label {
    font-weight: 600;
    color: var(--stemblue);
    font-family: 'Poppins', sans-serif;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    display: block;
}

/* Status Badge Styles */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.status-badge.pending {
    background-color: #fbbf24;
    color: #92400e;
}

.status-badge.invited {
    background-color: #60a5fa;
    color: #1e40af;
}

.status-badge.accepted {
    background-color: #34d399;
    color: #065f46;
}

.status-badge.expired {
    background-color: #f87171;
    color: #991b1b;
}

/* Action Button Styles */
.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2rem;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-right: 0.25rem;
}

.action-btn:last-child {
    margin-right: 0;
}

.view-btn {
    background-color: #e5e7eb;
    color: #374151;
}

.view-btn:hover {
    background-color: #d1d5db;
}

.accept-btn {
    background-color: #10b981;
    color: white;
}

.accept-btn:hover {
    background-color: #059669;
}

.re-invite-btn {
    background-color: #f59e0b;
    color: white;
}

.re-invite-btn:hover {
    background-color: #d97706;
}

/* Role and Interest Tags */
.role-badge, .interest-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    background-color: var(--stemblue, #4D2EFD);
    color: white;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.role-more, .interest-more {
    color: #6b7280;
    font-size: 0.75rem;
    margin-left: 0.25rem;
}


/* ═══════════════════════════════════════════════════════════════
   NOTIFICATION CENTER - Bell, Badge, Toasts
   Global CSS (not scoped) so keyframe animations work correctly.
   ═══════════════════════════════════════════════════════════════ */

/* ── Notification Bell (matches prototype icon-btn style) ── */
.notification-bell {
    border: 1px solid var(--ea-border, #e6e9f2);
    background: #fff;
    color: #334155;
    border-radius: 10px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: 140ms ease;
    padding: 0;
}

.notification-bell svg {
    width: 18px;
    height: 18px;
}

.notification-bell:hover {
    background: rgba(77, 46, 253, 0.10);
    border-color: #d8d1ff;
}

/* ── Badge with pop animation ── */
.notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    background: #e5484d;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid #fff;
    line-height: 1;
    box-sizing: border-box;
    text-align: center;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    animation: badge-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes badge-pop {
    0%   { transform: scale(0); }
    100% { transform: scale(1); }
}

/* ── Toast Container ── */
.notification-toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 380px;
    max-width: calc(100vw - 2rem);
    pointer-events: none;
}

/* ── Toast Card ── */
.notification-toast {
    background: #ffffff;
    border: 1px solid #e6e9f2;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(77, 46, 253, 0.18);
    padding: 0.85rem 1rem;
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    pointer-events: auto;
    animation: toastIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    position: relative;
    overflow: hidden;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.notification-toast.dismissing {
    animation: toastOut 0.3s ease forwards;
}

@keyframes toastIn {
    0%   { opacity: 0; transform: translateX(100%) scale(0.95); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes toastOut {
    0%   { opacity: 1; transform: translateX(0) scale(1); }
    100% { opacity: 0; transform: translateX(100%) scale(0.95); }
}

/* ── Accent bar (left edge) ── */
.toast-accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
}

.toast-accent.info    { background: #4D2EFD; }
.toast-accent.success { background: #2b9d5e; }
.toast-accent.warning { background: #FE920D; }
.toast-accent.error   { background: #e5484d; }

/* ── Toast icon (tinted background) ── */
.notification-toast .toast-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.2rem;
}

.notification-toast .toast-icon svg {
    width: 16px;
    height: 16px;
}

.notification-toast .toast-icon.info    { background: rgba(77, 46, 253, 0.10); color: #4D2EFD; }
.notification-toast .toast-icon.success { background: rgba(43, 157, 94, 0.10);  color: #2b9d5e; }
.notification-toast .toast-icon.warning { background: rgba(254, 146, 13, 0.10); color: #FE920D; }
.notification-toast .toast-icon.error   { background: rgba(229, 72, 77, 0.10);  color: #e5484d; }

/* ── Toast body ── */
.toast-body {
    flex: 1;
    min-width: 0;
}

.toast-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: #1b1b1f;
    margin-bottom: 0.1rem;
}

.toast-desc {
    font-size: 0.75rem;
    color: #667085;
    line-height: 1.4;
}

/* ── Dismiss button ── */
.toast-dismiss {
    background: none;
    border: none;
    color: #8a8a8a;
    cursor: pointer;
    padding: 0.15rem;
    border-radius: 4px;
    transition: 140ms ease;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.toast-dismiss:hover {
    background: #ebebeb;
    color: #5e5e5e;
}

/* ── Progress bar (synced with dismiss timer) ── */
.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    border-radius: 0 0 0 10px;
    animation: toastProgressBar linear forwards;
}

.toast-progress.info    { background: #4D2EFD; }
.toast-progress.success { background: #2b9d5e; }
.toast-progress.warning { background: #FE920D; }
.toast-progress.error   { background: #e5484d; }

@keyframes toastProgressBar {
    0%   { width: 100%; }
    100% { width: 0%; }
}

@media (max-width: 480px) {
    .notification-toast-container {
        width: calc(100vw - 2rem);
    }
}

/* ── Hero home page entry animations (A/B/C/E variants) ────── */

/* Shared keyframes */
@keyframes hero-slide-left {
    from { opacity: 0; transform: translateX(-60px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes hero-slide-right {
    from { opacity: 0; transform: translateX(80px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes hero-fade-up {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes hero-tri-pop {
    from { opacity: 0; transform: scale(0); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes hero-tri-wipe {
    from { opacity: 0; clip-path: polygon(100% 0%, 100% 0%, 100% 100%); }
    to   { opacity: 1; clip-path: polygon(0% 50%, 100% 0%, 100% 100%); }
}
@keyframes hero-burst {
    from { opacity: 0; transform: scale(0); }
    60%  { opacity: 1; transform: scale(1.08); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes hero-zoom-in {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}

/* A – Slide & Reveal */
.hero-anim-slide-reveal .callToAction  { animation: hero-slide-left 0.8s cubic-bezier(.22,1,.36,1) both; }
.hero-anim-slide-reveal .graphic       { animation: hero-slide-right 0.9s cubic-bezier(.22,1,.36,1) 0.15s both; }
.hero-anim-slide-reveal .hero-tri-sm   { animation: hero-tri-pop 0.5s cubic-bezier(.34,1.56,.64,1) 0.6s both; }
.hero-anim-slide-reveal .hero-tri-main { animation: hero-tri-wipe 0.8s cubic-bezier(.22,1,.36,1) 0.3s both; }
.hero-anim-slide-reveal .hero-tri-pink { animation: hero-tri-pop 0.5s cubic-bezier(.34,1.56,.64,1) 0.8s both; }

/* B – Fade Up */
.hero-anim-fade-up .callToAction  { animation: hero-fade-up 0.7s ease-out both; }
.hero-anim-fade-up .graphic       { animation: hero-fade-up 0.7s ease-out 0.2s both; }
.hero-anim-fade-up .hero-tri-sm   { animation: hero-fade-up 0.5s ease-out 0.5s both; }
.hero-anim-fade-up .hero-tri-main { animation: hero-fade-up 0.6s ease-out 0.3s both; }
.hero-anim-fade-up .hero-tri-pink { animation: hero-fade-up 0.5s ease-out 0.7s both; }

/* C – Triangle Burst */
.hero-anim-tri-burst .callToAction  { animation: hero-fade-up 0.6s ease-out both; }
.hero-anim-tri-burst .hero-tri-sm   { transform-origin: 174px 32px;  animation: hero-burst 0.6s cubic-bezier(.34,1.56,.64,1) 0.3s both; }
.hero-anim-tri-burst .hero-tri-main { transform-origin: 341px 292px; animation: hero-burst 0.8s cubic-bezier(.22,1,.36,1) 0.1s both; }
.hero-anim-tri-burst .hero-tri-pink { transform-origin: 143px 403px; animation: hero-burst 0.6s cubic-bezier(.34,1.56,.64,1) 0.5s both; }

/* E – Cinematic Zoom */
.hero-anim-zoom .scg-container { animation: hero-zoom-in 1s cubic-bezier(.22,1,.36,1) both; }
.hero-anim-zoom .hero-tri-sm   { animation: hero-tri-pop 0.4s cubic-bezier(.34,1.56,.64,1) 0.6s both; }
.hero-anim-zoom .hero-tri-pink { animation: hero-tri-pop 0.4s cubic-bezier(.34,1.56,.64,1) 0.8s both; }

@media (prefers-reduced-motion: reduce) {
    .hero-anim-slide-reveal .callToAction,
    .hero-anim-slide-reveal .graphic,
    .hero-anim-slide-reveal .hero-tri-sm,
    .hero-anim-slide-reveal .hero-tri-main,
    .hero-anim-slide-reveal .hero-tri-pink,
    .hero-anim-fade-up .callToAction,
    .hero-anim-fade-up .graphic,
    .hero-anim-fade-up .hero-tri-sm,
    .hero-anim-fade-up .hero-tri-main,
    .hero-anim-fade-up .hero-tri-pink,
    .hero-anim-tri-burst .callToAction,
    .hero-anim-tri-burst .hero-tri-sm,
    .hero-anim-tri-burst .hero-tri-main,
    .hero-anim-tri-burst .hero-tri-pink,
    .hero-anim-zoom .scg-container,
    .hero-anim-zoom .hero-tri-sm,
    .hero-anim-zoom .hero-tri-pink {
        animation: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Sign-in page – animated triangle background
   Replaces Arrows.png with CSS border-triangles in brand colours
   ═══════════════════════════════════════════════════════════════ */
.signin-triangles {
    position: absolute; inset: 0;
    pointer-events: none; z-index: 0;
    overflow: hidden;
}
.signin-tri { position: absolute; width: 0; height: 0; }

.signin-tri-pink-lg   { bottom: -20px; right: 5%;  border-top: 172px solid transparent; border-bottom: 172px solid transparent; border-right: 296px solid var(--stempink); }
.signin-tri-green-lg  { top: 10%; left: -20px;     border-top: 140px solid transparent; border-bottom: 140px solid transparent; border-right: 244px solid var(--stemgreen); }
.signin-tri-orange-md { top: 5%; right: 15%;       border-top: 86px solid transparent;  border-bottom: 86px solid transparent;  border-right: 150px solid var(--stemorange); }
.signin-tri-pink-sm   { top: 55%; left: 18%;       border-top: 55px solid transparent;  border-bottom: 55px solid transparent;  border-right: 95px solid var(--stempink); }
.signin-tri-green-sm  { bottom: 8%; left: 5%;      border-top: 43px solid transparent;  border-bottom: 43px solid transparent;  border-right: 74px solid var(--stemgreen); }
.signin-tri-orange-sm { bottom: 15%; right: 40%;   border-top: 31px solid transparent;  border-bottom: 31px solid transparent;  border-right: 55px solid var(--stemorange); }
.signin-tri-pink-md   { top: 40%; right: 2%;       border-top: 78px solid transparent;  border-bottom: 78px solid transparent;  border-right: 136px solid var(--stempink); }
.signin-tri-green-xs  { top: 3%; left: 35%;        border-top: 28px solid transparent;  border-bottom: 28px solid transparent;  border-right: 48px solid var(--stemgreen); }

/* ── Sign-in triangle keyframes ── */
@keyframes si-pop {
    0%   { transform: scale(0); opacity: 0; }
    60%  { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes si-scatter-right  { 0% { transform: translateX(160px);  opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
@keyframes si-scatter-left   { 0% { transform: translateX(-160px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
@keyframes si-scatter-top    { 0% { transform: translateY(-120px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes si-scatter-bottom { 0% { transform: translateY(100px);  opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes si-fade-float {
    0%   { transform: translateY(25px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}
@keyframes si-wipe {
    0%   { transform: scaleX(0); opacity: 0; }
    50%  { opacity: 1; }
    100% { transform: scaleX(1); opacity: 1; }
}

/* Variant: Pop-Scale */
.si-anim-pop .signin-tri-pink-lg    { animation: si-pop 0.5s cubic-bezier(.34,1.56,.64,1) 0.05s both; }
.si-anim-pop .signin-tri-green-lg   { animation: si-pop 0.5s cubic-bezier(.34,1.56,.64,1) 0.15s both; }
.si-anim-pop .signin-tri-orange-md  { animation: si-pop 0.45s cubic-bezier(.34,1.56,.64,1) 0.25s both; }
.si-anim-pop .signin-tri-pink-sm    { animation: si-pop 0.45s cubic-bezier(.34,1.56,.64,1) 0.33s both; }
.si-anim-pop .signin-tri-green-sm   { animation: si-pop 0.4s  cubic-bezier(.34,1.56,.64,1) 0.40s both; }
.si-anim-pop .signin-tri-orange-sm  { animation: si-pop 0.4s  cubic-bezier(.34,1.56,.64,1) 0.47s both; }
.si-anim-pop .signin-tri-pink-md    { animation: si-pop 0.45s cubic-bezier(.34,1.56,.64,1) 0.53s both; }
.si-anim-pop .signin-tri-green-xs   { animation: si-pop 0.35s cubic-bezier(.34,1.56,.64,1) 0.58s both; }

/* Variant: Scatter */
.si-anim-scatter .signin-tri-pink-lg    { animation: si-scatter-right  0.6s cubic-bezier(.22,.61,.36,1) 0.05s both; }
.si-anim-scatter .signin-tri-green-lg   { animation: si-scatter-left   0.6s cubic-bezier(.22,.61,.36,1) 0.13s both; }
.si-anim-scatter .signin-tri-orange-md  { animation: si-scatter-top    0.6s cubic-bezier(.22,.61,.36,1) 0.22s both; }
.si-anim-scatter .signin-tri-pink-sm    { animation: si-scatter-bottom 0.55s cubic-bezier(.22,.61,.36,1) 0.30s both; }
.si-anim-scatter .signin-tri-green-sm   { animation: si-scatter-left   0.55s cubic-bezier(.22,.61,.36,1) 0.37s both; }
.si-anim-scatter .signin-tri-orange-sm  { animation: si-scatter-top    0.5s  cubic-bezier(.22,.61,.36,1) 0.43s both; }
.si-anim-scatter .signin-tri-pink-md    { animation: si-scatter-right  0.55s cubic-bezier(.22,.61,.36,1) 0.48s both; }
.si-anim-scatter .signin-tri-green-xs   { animation: si-scatter-bottom 0.5s  cubic-bezier(.22,.61,.36,1) 0.53s both; }

/* Variant: Fade-Float */
.si-anim-float .signin-tri-pink-lg    { animation: si-fade-float 0.8s ease-out 0.08s both; }
.si-anim-float .signin-tri-green-lg   { animation: si-fade-float 0.8s ease-out 0.18s both; }
.si-anim-float .signin-tri-orange-md  { animation: si-fade-float 0.8s ease-out 0.28s both; }
.si-anim-float .signin-tri-pink-sm    { animation: si-fade-float 0.75s ease-out 0.36s both; }
.si-anim-float .signin-tri-green-sm   { animation: si-fade-float 0.75s ease-out 0.44s both; }
.si-anim-float .signin-tri-orange-sm  { animation: si-fade-float 0.7s ease-out 0.50s both; }
.si-anim-float .signin-tri-pink-md    { animation: si-fade-float 0.75s ease-out 0.56s both; }
.si-anim-float .signin-tri-green-xs   { animation: si-fade-float 0.65s ease-out 0.62s both; }

/* Variant: Wipe */
.si-anim-wipe .signin-tri-pink-lg    { transform-origin: right center; animation: si-wipe 0.55s ease-out 0.05s both; }
.si-anim-wipe .signin-tri-green-lg   { transform-origin: right center; animation: si-wipe 0.55s ease-out 0.15s both; }
.si-anim-wipe .signin-tri-orange-md  { transform-origin: right center; animation: si-wipe 0.5s  ease-out 0.25s both; }
.si-anim-wipe .signin-tri-pink-sm    { transform-origin: right center; animation: si-wipe 0.5s  ease-out 0.33s both; }
.si-anim-wipe .signin-tri-green-sm   { transform-origin: right center; animation: si-wipe 0.5s  ease-out 0.40s both; }
.si-anim-wipe .signin-tri-orange-sm  { transform-origin: right center; animation: si-wipe 0.45s ease-out 0.47s both; }
.si-anim-wipe .signin-tri-pink-md    { transform-origin: right center; animation: si-wipe 0.5s  ease-out 0.52s both; }
.si-anim-wipe .signin-tri-green-xs   { transform-origin: right center; animation: si-wipe 0.4s  ease-out 0.58s both; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .signin-triangles .signin-tri { animation: none !important; }
}