/* =========================================
   CAMPUS FEED
   Main Stylesheet
========================================= */

:root {
    --navy: #07152d;
    --navy-light: #10264a;
    --navy-soft: #172f57;

    --yellow: #ffd43b;
    --orange: #ff8a24;
    --red: #e84545;

    --white: #ffffff;
    --off-white: #f5f7fb;
    --light-gray: #e9edf3;
    --gray: #7b8798;
    --dark-gray: #4b5563;
    --black: #101828;

    --green: #22a06b;

    --radius: 16px;
    --small-radius: 10px;

    --shadow:
        0 8px 24px rgba(7, 21, 45, 0.08);

    --shadow-heavy:
        0 14px 40px rgba(7, 21, 45, 0.16);
}

/* =========================================
   RESET
========================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

html,
body {
    overflow-x: hidden;
}

body {
    margin: 0;
    padding: 0;

    width: 100%;

    background: #e4e7ec;
    color: var(--black);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    line-height: 1.5;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

img {
    max-width: 100%;
    display: block;
}

.hidden {
    display: none !important;
}

/* Present for password managers and screen readers' form logic, but
   not shown (display:none fields are ignored by some managers). */
.visually-hidden {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;

    clip: rect(0 0 0 0) !important;

    white-space: nowrap !important;

    border: 0 !important;
    padding: 0 !important;
    margin: -1px !important;
}

/* =========================================
   GENERAL
========================================= */

.page {
    min-height: 100vh;
    padding-bottom: 90px;
}

/* =========================================
   APP SHELL
========================================= */

.app {
    max-width: 760px;
    min-height: 100vh;

    margin: 0 auto;

    background: var(--off-white);

    box-shadow:
        0 0 40px
        rgba(7, 21, 45, 0.08);
}

@media (max-width: 760px) {
    .app {
        max-width: none;

        box-shadow: none;
    }
}

.container {
    width: min(100% - 32px, 1100px);
    margin: 0 auto;
}

.section {
    padding: 24px 0;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

/* =========================================
   LOGIN
========================================= */

#loginScreen,
#businessLoginScreen,
#passwordScreen,
#verificationScreen,
#paywallScreen {
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

    background:
        radial-gradient(
            circle at top right,
            rgba(255, 212, 59, 0.12),
            transparent 35%
        ),
        var(--navy);
}

.login-container {
    width: min(100%, 440px);
}

.login-content {
    background: var(--white);

    border-radius: 24px;

    padding: 38px 30px;

    box-shadow: var(--shadow-heavy);

    text-align: center;
}

.verification-container {
    width: min(100%, 440px);

    padding: 38px 30px;

    border-radius: 24px;

    background: var(--white);

    box-shadow: var(--shadow-heavy);

    text-align: center;
}

.verification-icon {
    font-size: 48px;

    margin-bottom: 14px;
}

.verification-container h2 {
    margin-bottom: 10px;

    color: var(--navy);

    font-size: 22px;
    font-weight: 900;
}

.verification-container p {
    margin-bottom: 8px;

    color: var(--gray);

    font-size: 14px;
}

.verification-container strong {
    display: block;

    margin-bottom: 26px;

    color: var(--navy);

    font-size: 17px;
    font-weight: 800;

    word-break: break-word;
}

.verification-container .primary-button {
    width: 100%;

    margin-bottom: 10px;
}

.verification-container .secondary-button {
    width: 100%;
}

.login-content h2 {
    margin-bottom: 8px;

    color: var(--navy);

    font-size: 26px;
    font-weight: 800;
}

.login-description {
    color: var(--gray);

    margin-bottom: 26px;
}

#loginForm,
#businessLoginForm {
    text-align: left;
}

#loginForm label,
#businessLoginForm label {
    display: block;

    margin-bottom: 8px;

    font-weight: 700;

    color: var(--navy);
}

#loginForm h2,
#businessLoginForm h2,
#businessLoginForm .login-description {
    text-align: center;
}

#loginForm h2 {
    margin-bottom: 18px;
}

#loginForm h2 label,
#businessLoginForm h2 label {
    margin: 0;

    font-weight: inherit;
}

.login-email-hint {
    margin-bottom: 10px;

    color: var(--gray);

    font-size: 13px;
    line-height: 1.45;
}

.login-email-hint strong {
    color: var(--navy);
}

#loginForm input,
#businessLoginForm input {
    width: 100%;

    min-height: 50px;

    padding: 12px 14px;

    border: 1px solid var(--light-gray);
    border-radius: var(--small-radius);

    outline: none;

    background: var(--white);

    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}

#loginForm input:focus,
#businessLoginForm input:focus {
    border-color: var(--orange);

    box-shadow:
        0 0 0 3px
        rgba(255, 138, 36, 0.14);
}

#loginForm .primary-button,
#businessLoginForm .primary-button {
    width: 100%;

    margin-top: 14px;

    min-height: 52px;
}

#emailError,
#businessLoginError {
    min-height: 22px;

    margin-top: 8px;

    color: var(--red);

    font-size: 14px;
    font-weight: 600;

    text-align: left;
}

.login-note {
    margin-top: 18px;

    color: var(--gray);

    font-size: 13px;
}

.school-request-prompt {
    margin-top: 16px;

    padding-top: 16px;

    border-top:
        1px solid
        var(--light-gray);

    text-align: left;
}

.school-request-prompt .secondary-button {
    width: 100%;
}

.school-request-form {
    margin-top: 12px;
}

.school-request-form label {
    display: block;

    margin-bottom: 8px;

    font-weight: 700;

    color: var(--navy);
}

.school-request-form input {
    width: 100%;

    min-height: 46px;

    margin-bottom: 10px;

    padding: 10px 14px;

    border: 1px solid var(--light-gray);
    border-radius: var(--small-radius);

    outline: none;

    background: var(--white);
}

.school-request-form input:focus {
    border-color: var(--orange);
}

.school-request-form .primary-button {
    width: 100%;
}

.school-request-success {
    margin-top: 12px;

    margin-bottom: 0;

    color: var(--green);

    font-size: 14px;
    font-weight: 700;
}

.shared-event-preview {
    background: var(--white);

    border-radius: 20px;

    padding: 20px;

    margin-bottom: 18px;

    text-align: left;

    box-shadow: var(--shadow-heavy);
}

.shared-event-preview .event-category {
    margin-bottom: 6px;
}

.shared-event-preview h3 {
    margin-bottom: 8px;

    color: var(--navy);

    font-size: 20px;
    font-weight: 850;
}

.shared-event-preview p {
    margin-bottom: 5px;

    color: var(--dark-gray);

    font-size: 14px;
}

.shared-event-preview .shared-event-note {
    margin-top: 12px;
    margin-bottom: 0;

    padding-top: 12px;

    border-top:
        1px solid
        var(--light-gray);

    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

/* =========================================
   LOGO / BRAND
========================================= */

.brand-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    margin-bottom: 28px;
}

.brand-mark h1 {
    margin-bottom: 2px;

    color: var(--white);

    font-size: 22px;
    font-weight: 900;
}

.brand-mark p {
    margin-bottom: 0;

    color: rgba(255, 255, 255, 0.72);

    font-size: 13px;
}

.brand-bars-img {
    height: 56px;
    width: auto;

    flex-shrink: 0;
}

.brand-bars-img.small {
    height: 22px;
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 10px;

    font-size: 17px;
    font-weight: 900;

    letter-spacing: 0.01em;
}

.xp-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 8px 14px;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.08);

    font-size: 13px;
    font-weight: 800;
}

/* =========================================
   TOP HEADER
========================================= */

.app-header {
    z-index: 50;

    background: var(--navy);

    color: var(--white);

    min-height: 72px;

    padding: 0 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-button {
    width: 42px;
    height: 42px;

    border: 0;
    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.08);

    color: var(--white);

    display: grid;
    place-items: center;

    font-size: 18px;
}

.header-button:hover {
    background:
        rgba(255, 255, 255, 0.16);
}

/* =========================================
   HERO
========================================= */

.hero {
    background: var(--navy);

    color: var(--white);

    padding:
        28px 20px
        18px;
}

.hero h1 {
    margin-bottom: 6px;

    font-size:
        clamp(
            28px,
            8vw,
            38px
        );

    line-height: 1.05;

    font-weight: 900;
}

.hero p {
    margin-bottom: 0;

    color:
        rgba(255, 255, 255, 0.72);

    font-size: 15px;
}

/* =========================================
   FILTER BAR
========================================= */

.search-bar {
    position: relative;

    background: var(--navy);

    padding: 4px 20px 14px;
}

.search-bar input {
    width: 100%;

    min-height: 44px;

    padding: 10px 14px 10px 40px;

    border:
        1px solid
        rgba(255, 255, 255, 0.14);

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.08);

    color: var(--white);

    font-size: 14px;

    outline: none;

    -webkit-appearance: none;
    appearance: none;

    transition:
        border-color 0.2s,
        background 0.2s;
}

.search-bar input::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

.search-bar input:focus {
    border-color: var(--yellow);

    background: rgba(255, 255, 255, 0.14);
}

.search-bar input::-webkit-search-cancel-button {
    filter: invert(1);

    opacity: 0.6;
}

.search-icon {
    position: absolute;

    left: 34px;
    top: 50%;

    transform: translateY(-50%);

    font-size: 14px;

    pointer-events: none;

    opacity: 0.7;
}

.admin-search-bar {
    position: relative;

    margin-bottom: 14px;
}

.admin-search-bar input {
    width: 100%;

    min-height: 44px;

    padding: 10px 14px 10px 40px;

    border: 1px solid var(--light-gray);

    border-radius: 999px;

    background: var(--off-white);

    color: var(--navy);

    font-size: 14px;

    outline: none;

    -webkit-appearance: none;
    appearance: none;

    transition:
        border-color 0.2s,
        background 0.2s;
}

.admin-search-bar input:focus {
    border-color: var(--orange);

    background: var(--white);
}

.admin-search-bar .search-icon {
    left: 14px;

    opacity: 0.5;
}

.filter-scroll {
    background: var(--navy);

    display: flex;

    gap: 8px;

    overflow-x: auto;

    padding: 4px 20px 22px;

    scrollbar-width: none;
}

.filter-scroll::-webkit-scrollbar {
    display: none;
}

.filter-button {
    flex: 0 0 auto;

    min-height: 40px;

    padding:
        8px
        14px;

    border:
        1px solid
        rgba(255, 255, 255, 0.14);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.06);

    color: var(--white);

    font-size: 14px;
    font-weight: 700;

    transition:
        background 0.2s,
        color 0.2s,
        border-color 0.2s;
}

.filter-button:hover {
    border-color:
        rgba(255, 255, 255, 0.32);
}

.filter-button.active {
    background: var(--yellow);

    color: var(--navy);

    border-color: var(--yellow);
}

.category-button {
    flex: 0 0 auto;

    min-height: 40px;

    padding:
        8px
        14px;

    border:
        1px solid
        var(--light-gray);

    border-radius: 999px;

    background: var(--white);

    color: var(--dark-gray);

    font-size: 14px;
    font-weight: 700;

    transition:
        background 0.2s,
        color 0.2s,
        border-color 0.2s;
}

.category-button:hover {
    border-color: var(--orange);
}

.category-button.active {
    background: var(--navy);

    color: var(--white);

    border-color: var(--navy);
}

.filter-count {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 18px;

    height: 18px;

    margin-left: 6px;

    padding: 0 5px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 700;

    vertical-align: middle;
}

.filter-button .filter-count {
    background: rgba(255, 255, 255, 0.18);

    color: var(--white);
}

.filter-button.active .filter-count {
    background: rgba(11, 31, 59, 0.16);

    color: var(--navy);
}

.category-button .filter-count {
    background: var(--off-white);

    color: var(--dark-gray);
}

.category-button.active .filter-count {
    background: rgba(255, 255, 255, 0.2);

    color: var(--white);
}

/* =========================================
   CATEGORY SECTION
========================================= */

.category-scroll {
    background: var(--white);

    border-bottom:
        1px solid
        var(--light-gray);

    display: flex;

    gap: 8px;

    overflow-x: auto;

    padding: 14px 20px 16px;

    scrollbar-width: none;
}

.category-scroll::-webkit-scrollbar {
    display: none;
}

/* =========================================
   EVENT FEED
========================================= */

.event-feed {
    display: flex;

    flex-direction: column;

    gap: 16px;

    padding: 18px 20px;
}

.event-card {
    background: var(--white);

    border:
        1px solid
        var(--light-gray);

    border-radius: var(--radius);

    overflow: hidden;

    box-shadow: var(--shadow);

    cursor: pointer;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.event-card:hover {
    transform:
        translateY(-3px);

    box-shadow:
        var(--shadow-heavy);
}

.event-image {
    height: 130px;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            var(--navy),
            var(--navy-light)
        );
}

.event-image span {
    font-size: 46px;

    filter:
        drop-shadow(
            0 5px 10px
            rgba(0, 0, 0, 0.15)
        );
}

.event-logo {
    max-height: 74px;
    max-width: 76%;

    padding: 10px;

    border-radius: 12px;

    background: var(--white);

    object-fit: contain;

    filter:
        drop-shadow(
            0 5px 10px
            rgba(0, 0, 0, 0.15)
        );
}

.event-image.sports {
    background:
        linear-gradient(
            135deg,
            #5c1414,
            #a3271f
        );
}

.event-image.club-sports {
    background:
        linear-gradient(
            135deg,
            #0c2b55,
            #163f70
        );
}

.event-image.clubs {
    background:
        linear-gradient(
            135deg,
            #33204f,
            #58347c
        );
}

.event-image.fitness {
    background:
        linear-gradient(
            135deg,
            #124b42,
            #207764
        );
}

.event-image.arts {
    background:
        linear-gradient(
            135deg,
            #4b1e38,
            #7b315d
        );
}

.event-image.social {
    background:
        linear-gradient(
            135deg,
            #63321a,
            #a75424
        );
}

.event-image.dating {
    background:
        linear-gradient(
            135deg,
            #6e1530,
            #c23b64
        );
}

.event-image.workshops {
    background:
        linear-gradient(
            135deg,
            #233b58,
            #3b628f
        );
}

.event-image.volunteer {
    background:
        linear-gradient(
            135deg,
            #274629,
            #417242
        );
}

.event-image.other {
    background:
        linear-gradient(
            135deg,
            #283040,
            #495466
        );
}

.free-food-badge {
    position: absolute;

    top: 12px;
    left: 12px;

    z-index: 2;

    padding:
        5px
        9px;

    border-radius: 999px;

    background: var(--yellow);

    color: var(--navy);

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 0.03em;
}

.event-body {
    padding: 17px;
}

.event-category {
    margin-bottom: 6px;

    color: var(--orange);

    font-size: 12px;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: 0.06em;
}

.event-title {
    margin-bottom: 9px;

    color: var(--navy);

    font-size: 20px;
    line-height: 1.2;

    font-weight: 850;
}

.event-time,
.event-location,
.event-organizer {
    margin-bottom: 7px;

    color: var(--dark-gray);

    font-size: 14px;
}

.event-location {
    font-weight: 650;
}

.event-organizer {
    color: var(--gray);
}

.verified {
    display: inline-flex;

    align-items: center;

    margin-left: 5px;

    color: var(--green);

    font-size: 12px;
    font-weight: 800;
}

.event-footer {
    display: flex;

    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 14px;

    padding-top: 13px;

    border-top:
        1px solid
        var(--light-gray);
}

.event-meta {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;
}

.xp-badge {
    display: inline-flex;

    align-items: center;

    min-height: 28px;

    padding:
        4px
        9px;

    border-radius: 999px;

    background:
        rgba(
            255,
            212,
            59,
            0.25
        );

    color:
        #7b5b00;

    font-size: 12px;

    font-weight: 900;
}

.going-count {
    color: var(--gray);

    font-size: 13px;
    font-weight: 650;
}

.event-actions {
    display: flex;
    align-items: center;

    gap: 8px;
}

.share-button {
    min-height: 40px;

    flex: 0 0 auto;

    padding:
        8px
        13px;

    border:
        1px solid
        var(--light-gray);

    border-radius: 10px;

    background: var(--white);

    color: var(--dark-gray);

    font-size: 13px;
    font-weight: 800;

    white-space: nowrap;

    transition: border-color 0.2s;
}

.share-button:hover {
    border-color: var(--orange);
}

.going-button {
    min-height: 40px;

    padding:
        8px
        13px;

    border:
        1px solid
        var(--navy);

    border-radius: 10px;

    background: var(--navy);

    color: var(--white);

    font-size: 13px;
    font-weight: 800;

    white-space: nowrap;

    transition:
        background 0.2s,
        color 0.2s;
}

.going-button:hover {
    background: var(--navy-light);
}

.going-button.going {
    background: var(--yellow);

    border-color: var(--yellow);

    color: var(--navy);
}

/* =========================================
   EMPTY STATES
========================================= */

.empty-state {
    margin: 0 20px;

    padding:
        50px
        24px;

    text-align: center;

    background: var(--white);

    border:
        1px dashed
        #ccd3dd;

    border-radius: var(--radius);
}

.empty-icon {
    margin-bottom: 10px;

    font-size: 44px;
}

.empty-state h2 {
    margin-bottom: 6px;

    color: var(--navy);

    font-size: 22px;
}

.empty-state p {
    margin: 0;

    color: var(--gray);
}

/* =========================================
   GOING PAGE
========================================= */

.page-heading,
.profile-header {
    padding: 24px 20px 16px;
}

.page-heading h1,
.profile-header h1 {
    margin-bottom: 6px;

    color: var(--navy);

    font-size: 26px;
    font-weight: 900;
}

.page-heading p,
.profile-header p {
    margin: 0;

    color: var(--gray);
}

.level-name-pill {
    display: inline-flex;

    margin-top: 10px;

    padding: 5px 12px;

    border-radius: 999px;

    background: var(--navy);

    color: var(--yellow);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 0.02em;
}

/* =========================================
   NEWS PAGE (swipe-up reels feed)
========================================= */

/* Fills the screen between the top of the viewport and the bottom
   nav, covering the header like a reels player. */
/* The feed is fixed, so the page itself shouldn't add scroll height. */
#newsPage {
    min-height: 0;
    padding-bottom: 0;
}

.news-feed {
    position: fixed;

    top: 0;
    bottom: 68px;
    left: 50%;

    z-index: 55;

    width: min(100%, 760px);

    transform: translateX(-50%);

    overflow-y: auto;

    scroll-snap-type: y mandatory;
    overscroll-behavior: contain;

    background: var(--navy);

    scrollbar-width: none;
}

.news-feed::-webkit-scrollbar {
    display: none;
}

.news-card {
    position: relative;

    height: 100%;

    display: flex;
    flex-direction: column;

    padding: 20px 16px 24px;

    scroll-snap-align: start;
    scroll-snap-stop: always;

    color: var(--white);

    background: var(--navy);
}

.news-theme-navy {
    background: linear-gradient(160deg, var(--navy-soft), var(--navy));
}

.news-theme-orange {
    background: linear-gradient(160deg, #ff9d45, #c4561a);
}

.news-theme-green {
    background: linear-gradient(160deg, #2bb47c, #0f6a45);
}

.news-theme-red {
    background: linear-gradient(160deg, #ef6363, #a52a3a);
}

.news-theme-soft {
    background: linear-gradient(160deg, #3c5a8f, var(--navy-light));
}

.news-card-photo {
    background:
        linear-gradient(
            180deg,
            rgba(7, 21, 45, 0.35) 0%,
            rgba(7, 21, 45, 0.55) 40%,
            rgba(7, 21, 45, 0.95) 75%
        ),
        var(--news-photo) center / cover no-repeat,
        var(--navy);
}

/* Photo cards sit their text at the bottom, like a reel caption. */
.news-card-photo .news-card-content {
    justify-content: flex-end;
}

.news-author {
    margin: -4px 0 0;

    font-size: 14px;
    font-weight: 700;

    opacity: 0.8;
}

.news-card-top {
    display: flex;
    justify-content: space-between;

    gap: 12px;

    font-size: 13px;
    font-weight: 700;

    opacity: 0.85;
}

.news-card-content {
    flex: 1;

    min-height: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 12px;

    max-width: 560px;
    width: 100%;

    margin: 0 auto;
}

.news-emoji {
    font-size: 52px;

    line-height: 1;
}

.news-card h2 {
    margin: 0;

    font-size: clamp(24px, 6vw, 34px);
    font-weight: 900;

    line-height: 1.15;

    overflow-wrap: anywhere;
}

.news-body {
    margin: 0;

    font-size: 17px;

    line-height: 1.55;

    white-space: pre-line;
    overflow-wrap: anywhere;

    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;

    overflow: hidden;
}

/* Long stories expand in place and scroll inside the card. */
.news-body.expanded {
    display: block;

    max-height: 50vh;

    overflow-y: auto;
}

.news-more {
    align-self: flex-start;

    padding: 0;

    border: 0;

    background: transparent;

    color: var(--white);

    font-weight: 800;

    text-decoration: underline;
}

.news-link {
    align-self: flex-start;

    padding: 10px 16px;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.18);

    color: var(--white);

    font-weight: 800;

    text-decoration: none;
}

.news-swipe-hint {
    text-align: center;

    font-size: 13px;
    font-weight: 700;

    opacity: 0.75;

    animation: news-bob 1.6s ease-in-out infinite;
}

@keyframes news-bob {
    50% {
        transform: translateY(-6px);
    }
}

.news-card-empty {
    align-items: center;
    justify-content: center;

    gap: 10px;

    text-align: center;
}

.news-card-empty p {
    margin: 0;

    opacity: 0.8;
}

.admin-form-wide {
    grid-column: 1 / -1;
}

.admin-news-list {
    margin-top: 18px;
}

@media (prefers-reduced-motion: reduce) {
    .news-swipe-hint {
        animation: none;
    }
}

/* =========================================
   FOR YOU / INTERESTS
========================================= */

.interest-picker {
    margin: 0 20px 20px;

    padding: 20px;

    background: var(--white);

    border:
        1px solid
        var(--light-gray);

    border-radius: var(--radius);

    box-shadow: var(--shadow);
}

.interest-picker-note {
    margin: 0 0 16px;

    color: var(--gray);

    font-size: 14px;
}

.interest-options {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(140px, 1fr)
        );

    gap: 10px;

    margin-bottom: 20px;
}

.interest-option {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 10px 12px;

    border:
        1px solid
        var(--light-gray);

    border-radius: var(--small-radius);

    font-size: 14px;
    font-weight: 650;

    color: var(--dark-gray);

    cursor: pointer;

    transition: border-color 0.2s;
}

.interest-option:has(input:checked) {
    border-color: var(--navy);

    background:
        rgba(7, 21, 45, 0.04);
}

.interest-option input {
    width: 16px;
    height: 16px;
}

.club-picker {
    margin-bottom: 20px;

    padding-left: 14px;

    border-left:
        3px solid
        var(--light-gray);
}

.club-picker .interest-options {
    margin-bottom: 0;
}

.for-you-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 4px 20px 14px;

    color: var(--gray);

    font-size: 13px;
    font-weight: 650;
}

.link-button {
    border: 0;
    background: none;

    padding: 0;

    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.link-button:hover {
    text-decoration: underline;
}

/* =========================================
   PROFILE
========================================= */

.profile-card {
    background: var(--white);

    border:
        1px solid
        var(--light-gray);

    border-radius: var(--radius);

    padding: 24px;

    box-shadow: var(--shadow);
}

.profile-avatar {
    position: relative;

    width: 72px;
    height: 72px;

    margin-bottom: 16px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: var(--navy);

    color: var(--yellow);

    display: grid;
    place-items: center;

    font-size: 36px;
    font-weight: 900;

    cursor: pointer;
}

.avatar-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;

    margin-top: 14px;
}

.avatar-option {
    aspect-ratio: 1;

    border: 2px solid transparent;
    border-radius: 12px;

    background: var(--off-white);

    font-size: 26px;

    cursor: pointer;
}

.avatar-option.is-selected {
    border-color: var(--navy);

    background: rgba(255, 212, 59, 0.3);
}

.profile-name {
    margin-bottom: 3px;

    color: var(--navy);

    font-size: 24px;
    font-weight: 900;
}

.profile-email {
    margin-bottom: 20px;

    color: var(--gray);

    font-size: 14px;
}

.profile-stats {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 10px;

    margin-bottom: 22px;

    padding: 0 20px;
}

.stat {
    padding: 15px 10px;

    border-radius: 12px;

    background: var(--off-white);

    text-align: center;
}

.stat strong {
    display: block;

    color: var(--navy);

    font-size: 23px;
    font-weight: 900;
}

.stat span {
    display: block;

    color: var(--gray);

    font-size: 12px;
    font-weight: 650;
}

.profile-section {
    margin-bottom: 22px;

    padding: 0 20px;
}

.profile-section h2 {
    margin-bottom: 12px;

    color: var(--navy);

    font-size: 17px;
    font-weight: 850;
}

.badge-list {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;
}

.badge {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 10px 14px;

    border-radius: 999px;

    background: var(--off-white);

    color: var(--navy);

    font-size: 13px;
    font-weight: 700;
}

.badge.locked {
    color: var(--gray);

    opacity: 0.6;
}

.link-pill {
    padding: 10px 16px;

    border: 1px solid var(--light-gray);
    border-radius: 999px;

    background: var(--white);

    color: var(--navy);

    font-size: 13px;
    font-weight: 700;

    transition: border-color 0.2s;
}

.link-pill:hover {
    border-color: var(--orange);
}

/* =========================================
   BUTTONS
========================================= */

.primary-button {
    min-height: 48px;

    padding:
        11px
        18px;

    border: 0;

    border-radius: 11px;

    background: var(--navy);

    color: var(--white);

    font-weight: 800;

    transition:
        transform 0.15s,
        background 0.2s;
}

.primary-button:hover {
    background: var(--navy-light);

    transform:
        translateY(-1px);
}

.secondary-button {
    min-height: 46px;

    padding:
        10px
        17px;

    border:
        1px solid
        var(--light-gray);

    border-radius: 11px;

    background: var(--white);

    color: var(--navy);

    font-weight: 750;
}

.secondary-button:hover {
    border-color: var(--orange);
}

.admin-access-button {
    width: calc(100% - 40px);

    min-height: 48px;

    margin: 18px 20px 0;

    border:
        1px solid
        var(--light-gray);

    border-radius: 11px;

    background: var(--white);

    color: var(--navy);

    font-weight: 800;
}

.admin-access-button:hover {
    border-color: var(--orange);

    background:
        rgba(
            255,
            138,
            36,
            0.05
        );
}

/* =========================================
   MODAL
========================================= */

.modal {
    position: fixed;

    inset: 0;

    z-index: 100;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 18px;
}

.modal-overlay {
    position: absolute;

    inset: 0;

    background:
        rgba(
            7,
            21,
            45,
            0.62
        );
}

.modal-content {
    position: relative;

    z-index: 2;

    width: min(
        100%,
        600px
    );

    max-height: 90vh;

    overflow-y: auto;

    padding: 28px;

    background: var(--white);

    border-radius: 20px;

    box-shadow: var(--shadow-heavy);
}

.modal-close {
    position: absolute;

    top: 12px;
    right: 12px;

    width: 42px;
    height: 42px;

    border: 0;

    border-radius: 50%;

    background: var(--off-white);

    color: var(--navy);

    font-size: 22px;
}

.modal-close:hover {
    background: var(--light-gray);
}

.modal-event-title {
    padding-right: 42px;

    margin-bottom: 18px;

    color: var(--navy);

    font-size: 28px;
    line-height: 1.15;

    font-weight: 900;
}

.modal-actions {
    display: flex;

    gap: 10px;

    margin-top: 20px;
}

.modal-actions .modal-going-button {
    flex: 1;
}

.info-modal-content {
    padding-right: 30px;
}

.info-modal-content h2 {
    margin-bottom: 6px;

    color: var(--navy);

    font-size: 24px;
    font-weight: 900;
}

.info-modal-content .info-updated {
    margin-bottom: 20px;

    color: var(--gray);

    font-size: 13px;
}

.info-modal-content h3 {
    margin: 20px 0 8px;

    color: var(--navy);

    font-size: 16px;
    font-weight: 800;
}

.info-modal-content p {
    margin-bottom: 10px;

    color: var(--dark-gray);

    font-size: 14px;
    line-height: 1.6;
}

.info-modal-content ul {
    margin: 0 0 10px;

    padding-left: 20px;

    color: var(--dark-gray);

    font-size: 14px;
    line-height: 1.6;
}

.info-modal-content li {
    margin-bottom: 4px;
}

#attendanceModal,
#submissionApprovedModal,
#tutorialModal {
    background:
        rgba(7, 21, 45, 0.62);
}

.attendance-modal-content > .primary-button {
    width: 100%;
}

.attendance-modal-content {
    width: min(100%, 420px);

    text-align: center;
}

.attendance-icon {
    margin-bottom: 10px;

    font-size: 48px;
}

.attendance-modal-content h2 {
    margin-bottom: 10px;

    color: var(--navy);

    font-size: 24px;
    font-weight: 900;
}

.attendance-event-title {
    margin-bottom: 4px;

    color: var(--navy);

    font-size: 17px;
    font-weight: 800;
}

.attendance-event-meta {
    margin-bottom: 22px;

    color: var(--gray);

    font-size: 14px;
}

.attendance-actions {
    display: flex;

    gap: 10px;
}

.attendance-actions button {
    flex: 1;
}

.admin-login-title {
    margin-bottom: 6px;

    padding-right: 30px;

    color: var(--navy);

    font-size: 22px;
    font-weight: 900;
}

.admin-login-note {
    margin-bottom: 20px;

    color: var(--gray);

    font-size: 14px;
}

#adminLoginForm label {
    display: block;

    margin-bottom: 8px;

    font-weight: 700;

    color: var(--navy);
}

#adminLoginForm input {
    width: 100%;

    min-height: 48px;

    margin-bottom: 14px;

    padding: 10px 14px;

    border: 1px solid var(--light-gray);
    border-radius: var(--small-radius);

    outline: none;

    background: var(--white);
}

#adminLoginForm input:focus {
    border-color: var(--orange);
}

#adminLoginForm .primary-button {
    width: 100%;
}

.modal-detail {
    margin-bottom: 11px;

    color: var(--dark-gray);

    font-size: 15px;
}

.modal-detail a {
    color: var(--orange);

    font-weight: 700;

    text-decoration: underline;
}

.modal-signup-button {
    display: flex;

    align-items: center;
    justify-content: center;

    margin-top: 18px;

    text-decoration: none;
}

.modal-description {
    margin-top: 22px;

    padding-top: 18px;

    border-top:
        1px solid
        var(--light-gray);

    color: var(--dark-gray);
}

/* =========================================
   ADMIN
========================================= */

.admin-page {
    background: var(--off-white);
}

.admin-header {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 16px;
}

.admin-section {
    margin-bottom: 22px;

    padding: 22px;

    background: var(--white);

    border:
        1px solid
        var(--light-gray);

    border-radius: var(--radius);

    box-shadow: var(--shadow);
}

.admin-section h2 {
    margin-bottom: 5px;

    color: var(--navy);

    font-size: 20px;
    font-weight: 900;
}

.admin-section > p {
    color: var(--gray);

    font-size: 14px;
}

.admin-form {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap: 15px;

    margin-top: 18px;
}

.admin-form label {
    display: block;

    margin-bottom: 7px;

    color: var(--navy);

    font-size: 13px;
    font-weight: 800;
}

.admin-form input,
.admin-form select,
.admin-form textarea {
    width: 100%;

    min-height: 46px;

    margin-bottom: 4px;

    padding:
        10px
        12px;

    border:
        1px solid
        #d7dde6;

    border-radius: 9px;

    background: var(--white);

    color: var(--black);

    outline: none;
}

.admin-form textarea {
    min-height: 110px;

    resize: vertical;
}

.admin-form input:focus,
.admin-form select:focus,
.admin-form textarea:focus {
    border-color: var(--orange);

    box-shadow:
        0 0 0 3px
        rgba(
            255,
            138,
            36,
            0.12
        );
}

.admin-form textarea,
.admin-form .admin-checks,
.admin-form .schedule-games-list,
.admin-form #addScheduleGameButton,
.admin-form > button[type="submit"] {
    grid-column:
        1 / -1;
}

.schedule-games-list {
    display: flex;

    flex-direction: column;

    gap: 14px;

    margin-bottom: 10px;
}

.schedule-game-row {
    position: relative;

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 0 14px;

    padding: 16px 14px 4px;

    border: 1px solid var(--light-gray);

    border-radius: 10px;

    background: var(--off-white);
}

.schedule-game-row label {
    display: block;

    margin-bottom: 7px;

    color: var(--navy);

    font-size: 13px;
    font-weight: 800;
}

.schedule-game-row input {
    width: 100%;

    min-height: 46px;

    margin-bottom: 10px;

    padding: 10px 12px;

    border: 1px solid var(--light-gray);

    border-radius: 8px;

    background: var(--white);

    font-size: 14px;
}

.schedule-game-row input:focus {
    border-color: var(--orange);

    box-shadow:
        0 0 0 3px
        rgba(255, 138, 36, 0.12);
}

.schedule-game-remove {
    position: absolute;

    top: 10px;
    right: 10px;

    width: 26px;
    height: 26px;

    border: 0;

    border-radius: 50%;

    background: var(--white);

    color: var(--red);

    font-size: 15px;
    font-weight: 900;

    line-height: 1;

    cursor: pointer;
}

.schedule-game-remove:hover {
    background: var(--light-gray);
}

#addScheduleGameButton {
    margin-bottom: 14px;
}

.admin-checks {
    display: flex;

    gap: 18px;

    margin: 6px 0 4px;
}

.check-row {
    display: flex;

    align-items: center;

    gap: 9px;

    min-height: 24px;

    margin-bottom: 0 !important;

    font-size: 14px;
    font-weight: 650;

    color: var(--dark-gray);
}

.check-row input {
    width: 18px;
    height: 18px;

    min-height: 0;

    margin-bottom: 0;
}

/* =========================================
   ADMIN EVENT LIST
========================================= */

.admin-event-list {
    display: grid;

    gap: 10px;

    margin-top: 18px;
}

.admin-event {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 14px;

    padding: 14px;

    border:
        1px solid
        var(--light-gray);

    border-radius: 11px;

    background: var(--white);
}

.admin-event > div:first-child {
    min-width: 0;
}

.admin-event strong {
    display: block;

    margin-bottom: 3px;

    color: var(--navy);

    font-weight: 850;
}

.admin-event span,
.admin-event small {
    display: block;

    color: var(--gray);

    font-size: 13px;
}

.admin-batch-group {
    margin-bottom: 14px;

    padding: 14px;

    border: 1px solid var(--yellow);

    border-radius: 13px;

    background: rgba(255, 212, 59, 0.08);
}

.admin-batch-group .admin-section-heading {
    margin-bottom: 12px;
}

.admin-batch-group .admin-section-heading strong {
    display: block;

    margin-bottom: 3px;

    color: var(--navy);

    font-weight: 850;
}

.admin-batch-games {
    display: flex;

    flex-direction: column;

    gap: 8px;
}

.admin-batch-games .admin-event {
    background: var(--white);
}

.admin-section-heading {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 14px;

    margin-bottom: 12px;
}

.admin-section-heading .admin-edit {
    min-height: 38px;

    padding:
        7px
        14px;

    border:
        1px solid
        var(--light-gray);

    border-radius: 8px;

    background: var(--white);

    color: var(--navy);

    font-size: 13px;

    font-weight: 750;

    flex-shrink: 0;

    white-space: nowrap;
}

.admin-section-heading .admin-edit:hover {
    border-color: var(--orange);
}

.admin-event-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    flex-shrink: 0;
}

.admin-event-actions button {
    min-height: 38px;

    padding:
        7px
        11px;

    border:
        1px solid
        var(--light-gray);

    border-radius: 8px;

    background: var(--white);

    color: var(--navy);

    font-size: 13px;

    font-weight: 750;
}

.admin-event-actions button:hover {
    border-color: var(--orange);
}

.admin-delete {
    color: var(--red) !important;
}

/* =========================================
   ADMIN HELP
========================================= */

.admin-help {
    padding: 14px;

    border-radius: 10px;

    background: var(--off-white);

    color: var(--gray);

    font-size: 14px;
}

.request-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 12px 14px;

    border: 1px solid var(--light-gray);
    border-radius: 10px;

    margin-bottom: 8px;

    color: var(--navy);

    font-size: 14px;
}

.request-row strong {
    color: var(--orange);
}

/* =========================================
   BOTTOM NAV
========================================= */

.bottom-nav {
    position: fixed;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 60;

    background: var(--white);

    border-top:
        1px solid
        var(--light-gray);

    box-shadow:
        0 -5px 20px
        rgba(
            7,
            21,
            45,
            0.06
        );

    width: min(
        100%,
        760px
    );

    min-height: 68px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(
            5,
            1fr
        );
}

.nav-button {
    position: relative;

    border: 0;

    background: transparent;

    color: var(--gray);

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 3px;

    font-size: 11px;

    font-weight: 750;
}

.nav-button-icon,
.nav-icon {
    font-size: 21px;

    line-height: 1;
}

.nav-button.active {
    color: var(--navy);
}

.nav-button.active::before {
    content: "";

    position: absolute;

    top: 0;

    width: 32px;
    height: 3px;

    border-radius:
        0 0 4px 4px;

    background:
        var(--orange);
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 700px) {

    .container {
        width:
            min(
                100% - 22px,
                1100px
            );
    }

    .app-header {
        padding: 0 16px;
    }

    .hero {
        padding:
            22px 16px
            18px;
    }

    .filter-scroll {
        padding: 4px 16px 18px;
    }

    .category-scroll {
        padding: 12px 16px 14px;
    }

    .event-feed {
        gap: 14px;

        padding: 14px 16px;
    }

    .event-image {
        height: 120px;
    }

    .event-image span {
        font-size: 44px;
    }

    .event-body {
        padding: 14px;
    }

    .event-title {
        font-size: 18px;
    }

    .admin-form {
        grid-template-columns: 1fr;
    }

    .schedule-game-row {
        grid-template-columns: 1fr;
    }

    .admin-header {
        flex-direction: column;
    }

    .admin-section-heading {
        flex-direction: column;

        align-items: stretch;
    }

    .admin-section-heading .admin-edit {
        width: 100%;
    }

    .admin-event {
        align-items: flex-start;

        flex-direction: column;
    }

    .admin-event-actions {
        width: 100%;
    }

    .admin-event-actions button {
        flex: 1;
    }

    .modal-content {
        padding:
            24px
            18px;
    }
}

@media (max-width: 430px) {

    .login-card {
        padding:
            30px
            20px;
    }

    .profile-stats {
        gap: 7px;
    }

    .profile-stat {
        padding:
            12px
            6px;
    }

    .profile-stat-value {
        font-size: 20px;
    }

    .event-footer {
        align-items: flex-end;
    }

    .going-button {
        min-width: 94px;
    }
}

/* =========================================
   ACCESSIBILITY
========================================= */

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline:
        3px solid
        rgba(
            255,
            138,
            36,
            0.35
        );

    outline-offset: 2px;
}

/* =========================================
   FREE FOOD ACCESS
========================================= */

.free-food-lock {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;

    padding: 16px;

    border: 1px solid var(--yellow);
    border-radius: var(--radius);

    background: rgba(255, 212, 59, 0.12);
}

.free-food-lock-icon {
    font-size: 26px;
}

.free-food-lock-text {
    flex: 1 1 180px;
}

.free-food-lock-text strong {
    display: block;

    color: var(--navy);

    font-size: 16px;
    font-weight: 850;
}

.free-food-lock-text p {
    margin: 4px 0 0;

    color: var(--gray);

    font-size: 13px;
}

.free-food-lock .primary-button {
    flex: 1 1 100%;
}

.free-food-unlocked {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px;

    padding: 10px 14px;

    border-radius: 11px;

    background: rgba(255, 212, 59, 0.16);

    color: var(--navy);

    font-size: 14px;
    font-weight: 750;
}

.free-food-post-link {
    padding: 0;

    border: 0;

    background: none;

    color: var(--navy);

    font: inherit;
    font-weight: 800;

    text-decoration: underline;

    cursor: pointer;
}

.food-post-count {
    color: var(--gray);

    font-size: 13px;
    font-weight: 650;
}

.profile-section .primary-button + .profile-section-note {
    margin-top: 16px;
}

.admin-form.post-food-form {
    display: block;
}

.post-food-form input {
    margin-bottom: 14px;
}

.post-food-form .primary-button {
    width: 100%;
}

.post-food-suggestions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.post-food-suggestions:not(:empty) {
    margin-bottom: 12px;
}

.post-food-suggestion {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;

    padding: 10px 12px;

    border: 1px solid var(--light-gray);
    border-radius: 10px;

    background: var(--white);

    color: var(--navy);

    text-align: left;

    cursor: pointer;
}

.post-food-suggestion:hover {
    border-color: var(--yellow);
}

.post-food-suggestion span {
    color: var(--gray);

    font-size: 12px;
}

.post-food-selected {
    margin-bottom: 12px;

    padding: 10px 12px;

    border-radius: 10px;

    background: rgba(255, 212, 59, 0.16);

    color: var(--navy);

    font-size: 14px;
    font-weight: 700;
}

/* =========================================
   BUSINESS ACCOUNTS
========================================= */

.login-screen {
    position: relative;
}

.business-corner-link {
    position: absolute;

    top: 16px;
    right: 16px;

    padding: 8px 14px;

    border: 0;
    border-radius: 999px;

    background: var(--white);

    color: var(--navy);

    font: inherit;
    font-size: 13px;
    font-weight: 800;

    box-shadow: var(--shadow);

    cursor: pointer;
}

.business-corner-link:hover {
    background: var(--off-white);
}

.org-signup-banner {
    display: block;

    width: 100%;

    margin: 0 0 16px;

    padding: 12px 16px;

    border: 1px solid rgba(255, 212, 59, 0.6);
    border-radius: 14px;

    background: rgba(255, 212, 59, 0.14);

    color: var(--white);

    font: inherit;
    font-size: 15px;
    text-align: center;

    cursor: pointer;
}

.org-signup-banner strong {
    color: var(--yellow);

    text-decoration: underline;
}

.business-switch-link {
    display: block;

    margin: 14px auto 0;
}

.business-signup-title {
    margin-bottom: 6px;

    color: var(--navy);

    font-size: 22px;
    font-weight: 850;

    text-align: center;
}

.business-signup-note {
    margin-bottom: 16px;

    font-size: 14px;

    text-align: center;
}

#businessRequestError {
    min-height: 18px;

    color: var(--red);

    font-size: 14px;
    font-weight: 600;
}

.business-back-link {
    display: block;

    margin-top: 16px;
}

body.business-mode .bottom-nav,
body.business-mode .xp-pill {
    display: none;
}

.business-badge {
    display: inline-block;

    margin-bottom: 8px;

    padding: 4px 10px;

    border-radius: 999px;

    background: var(--yellow);

    color: var(--navy);

    font-size: 12px;
    font-weight: 850;
}

.business-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;

    margin-bottom: 22px;

    padding: 0 20px;
}

.business-submit {
    width: 100%;
}

.business-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.business-request-type {
    width: 100%;

    min-height: 46px;

    margin-bottom: 10px;

    padding: 10px 14px;

    border: 1px solid var(--light-gray);
    border-radius: var(--small-radius);

    background: var(--white);

    font: inherit;
}

.business-event {
    display: flex;
    flex-direction: column;
    gap: 4px;

    margin-bottom: 10px;

    padding: 14px;

    border: 1px solid var(--light-gray);
    border-radius: 12px;

    background: var(--white);
}

.business-event strong {
    color: var(--navy);
}

.business-event small {
    color: var(--gray);
}

.business-event-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.business-event-status {
    flex-shrink: 0;

    color: var(--gray);

    font-size: 12px;
    font-weight: 800;
}

.business-event-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;

    margin-top: 4px;

    color: var(--dark-gray);

    font-size: 13px;
    font-weight: 700;
}

.business-location-toggle {
    display: flex;
    gap: 8px;

    overflow-x: auto;

    margin-bottom: 16px;

    padding: 0 20px 4px;
}

.business-location-button {
    flex: 0 0 auto;

    padding: 8px 14px;

    border: 1px solid var(--light-gray);
    border-radius: 999px;

    background: var(--white);

    color: var(--navy);

    font: inherit;
    font-size: 14px;
    font-weight: 750;

    cursor: pointer;
}

.business-location-button.is-active {
    border-color: var(--navy);

    background: var(--navy);

    color: var(--white);
}

.approval-location-label {
    margin: 12px 0 6px;

    color: var(--navy);

    font-size: 13px;
    font-weight: 800;
}

.approval-locations {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.approval-location-option {
    display: flex;
    align-items: center;
    gap: 8px;

    color: var(--dark-gray);

    font-size: 14px;
    font-weight: 600;
}

.approval-location-option input[type="checkbox"] {
    width: auto;
    min-height: 0;

    margin: 0;
}

.submit-location-note {
    margin: 8px 0 0;

    color: var(--navy);

    font-size: 14px;
    font-weight: 800;
}

.password-subtitle {
    margin-bottom: 18px;

    color: var(--gray);

    font-size: 14px;
    line-height: 1.45;

    word-break: break-word;
}

#passwordForm {
    text-align: left;
}

#passwordForm input {
    width: 100%;

    min-height: 50px;

    margin-bottom: 10px;

    padding: 12px 14px;

    border: 1px solid var(--light-gray);
    border-radius: var(--small-radius);

    outline: none;

    background: var(--white);

    font: inherit;
}

#passwordForm input:focus {
    border-color: var(--orange);

    box-shadow: 0 0 0 3px rgba(255, 138, 36, 0.14);
}

#passwordError {
    min-height: 20px;

    color: var(--red);

    font-size: 14px;
    font-weight: 600;
}

#passwordForm .primary-button {
    width: 100%;

    margin-top: 6px;
}

.password-forgot {
    display: block;

    margin: 14px auto 10px;
}

.flyer-scan {
    grid-column: 1 / -1;

    margin-bottom: 4px;
}

.flyer-scan-button {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;

    padding: 10px 14px;

    border: 2px dashed var(--navy);
    border-radius: 12px;

    background: rgba(255, 212, 59, 0.14);

    color: var(--navy);

    font-weight: 800;

    cursor: pointer;
}

.flyer-scan-button.is-busy {
    opacity: 0.6;

    pointer-events: none;
}

.flyer-scan-status {
    min-height: 18px;

    margin: 6px 0 0;

    color: var(--dark-gray);

    font-size: 13px;
    font-weight: 600;
}

.org-activity-card {
    margin-bottom: 10px;

    padding: 14px;

    border: 1px solid var(--light-gray);
    border-radius: 12px;

    background: var(--white);
}

.org-activity-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.org-activity-head strong {
    display: block;

    color: var(--navy);
}

.org-activity-head small {
    color: var(--gray);

    word-break: break-word;
}

.org-message-button {
    flex-shrink: 0;

    padding: 8px 12px;

    border: 0;
    border-radius: 999px;

    background: var(--navy);

    color: var(--white);

    font: inherit;
    font-size: 13px;
    font-weight: 800;

    cursor: pointer;
}

.org-activity-status {
    margin: 8px 0 4px;

    color: var(--dark-gray);

    font-size: 13px;
    font-weight: 700;
}

.admin-form.direct-message-form {
    display: block;
}

.direct-message-form select,
.direct-message-form input,
.direct-message-form textarea {
    margin-bottom: 12px;
}

.direct-message-form .primary-button {
    width: 100%;
}

.nav-button {
    position: relative;
}

.admin-toast {
    position: fixed;

    top: 14px;
    left: 50%;

    z-index: 1000;

    width: min(calc(100% - 32px), 440px);

    padding: 14px 18px;

    border: 0;
    border-left: 5px solid var(--yellow);
    border-radius: 14px;

    background: var(--navy);

    color: var(--white);

    box-shadow: var(--shadow-heavy);

    font: inherit;
    font-weight: 800;
    text-align: left;

    transform: translateX(-50%);

    cursor: pointer;
}

.admin-access-button .inbox-count {
    margin-left: 6px;
}

.xp-progress {
    margin: -8px 20px 22px;

    padding: 14px 16px;

    border-radius: 14px;

    background: var(--white);

    border: 1px solid var(--light-gray);
}

.xp-progress-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;

    margin-bottom: 8px;

    color: var(--navy);

    font-size: 14px;
    font-weight: 850;
}

.xp-progress-head #xpProgressCount {
    color: var(--dark-gray);

    font-variant-numeric: tabular-nums;
}

.xp-progress-bar {
    height: 12px;

    overflow: hidden;

    border-radius: 999px;

    background: var(--light-gray);
}

.xp-progress-fill {
    width: 0;
    height: 100%;

    border-radius: 999px;

    background: linear-gradient(90deg, var(--orange), var(--yellow));

    transition: width 0.6s ease;
}

.xp-progress-hint {
    margin: 8px 0 0;

    color: var(--gray);

    font-size: 13px;
}

.user-goal {
    margin-bottom: 16px;

    padding: 14px 16px;

    border-radius: 14px;

    background: var(--navy);

    color: var(--white);
}

.user-goal-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;

    margin-bottom: 10px;
}

.user-goal-head span {
    color: var(--yellow);

    font-weight: 900;

    font-variant-numeric: tabular-nums;
}

.user-goal-bar {
    height: 12px;

    overflow: hidden;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.15);
}

.user-goal-fill {
    width: 0;
    height: 100%;

    border-radius: 999px;

    background: linear-gradient(90deg, var(--orange), var(--yellow));

    transition: width 0.6s ease;
}

.user-goal-detail {
    margin: 8px 0 0;

    color: rgba(255, 255, 255, 0.75);

    font-size: 13px;
}

.nav-badge {
    position: absolute;

    top: 4px;
    right: calc(50% - 22px);

    min-width: 18px;

    padding: 1px 5px;

    border-radius: 999px;

    background: var(--red);

    color: var(--white);

    font-size: 11px;
    font-weight: 900;
    line-height: 16px;
    text-align: center;
}

.business-inbox-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.business-inbox-head h2 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.inbox-count {
    min-width: 22px;

    padding: 2px 8px;

    border-radius: 999px;

    background: var(--red);

    color: var(--white);

    font-size: 12px;
    font-weight: 900;
    text-align: center;
}

.inbox-message {
    display: flex;
    flex-direction: column;
    gap: 4px;

    width: 100%;

    margin-bottom: 8px;

    padding: 12px 14px;

    border: 1px solid var(--light-gray);
    border-radius: 12px;

    background: var(--white);

    color: var(--dark-gray);

    font: inherit;
    font-size: 14px;
    text-align: left;

    cursor: pointer;
}

.inbox-message.is-unread {
    border-left: 4px solid var(--yellow);

    background: rgba(255, 212, 59, 0.1);
}

.inbox-message-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;

    color: var(--navy);
}

.inbox-message-head small {
    flex-shrink: 0;

    color: var(--gray);
}

.log-out-button {
    width: 100%;

    color: var(--red);

    font-weight: 800;
}

.admin-subheading {
    margin: 4px 0 10px;

    color: var(--navy);

    font-size: 15px;
    font-weight: 850;
}

/* =========================================
   ADD TO HOME SCREEN
========================================= */

.install-banner {
    position: relative;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;

    margin: 16px 20px 0;

    padding: 14px 40px 14px 16px;

    border: 1px solid var(--light-gray);
    border-radius: var(--radius);

    background: var(--white);

    box-shadow: var(--shadow);
}

.install-banner-text {
    flex: 1 1 200px;
}

.install-banner-text strong {
    display: block;

    color: var(--navy);

    font-size: 15px;
    font-weight: 850;
}

.install-banner-text span {
    color: var(--gray);

    font-size: 13px;
}

.install-banner .primary-button {
    min-height: 40px;

    padding: 8px 14px;
}

.install-banner-close {
    position: absolute;

    top: 6px;
    right: 8px;

    width: 30px;
    height: 30px;

    border: 0;

    background: none;

    color: var(--gray);

    font-size: 20px;

    cursor: pointer;
}

.install-steps {
    margin: 0 0 16px;

    padding-left: 22px;

    color: var(--dark-gray);

    font-size: 15px;
    line-height: 1.5;

    text-align: left;
}

.install-steps li + li {
    margin-top: 8px;
}

.install-note {
    margin: 0;

    color: var(--gray);

    font-size: 13px;
}

.install-content .primary-button {
    width: 100%;

    margin-bottom: 18px;
}

/* =========================================
   TUTORIAL
========================================= */

.tutorial-content {
    position: relative;

    padding-top: 44px;
}

.tutorial-content .attendance-event-meta {
    min-height: 80px;

    line-height: 1.5;
}

.tutorial-skip {
    position: absolute;

    top: 16px;
    right: 18px;

    padding: 4px 6px;

    border: 0;

    background: none;

    color: var(--gray);

    font: inherit;
    font-size: 14px;
    font-weight: 700;

    cursor: pointer;
}

.tutorial-dots {
    display: flex;
    justify-content: center;
    gap: 6px;

    margin-bottom: 20px;
}

.tutorial-dot {
    width: 7px;
    height: 7px;

    border-radius: 999px;

    background: var(--light-gray);

    transition: width 0.2s ease;
}

.tutorial-dot.is-active {
    width: 20px;

    background: var(--navy);
}

.tutorial-actions {
    display: flex;
    gap: 10px;
}

.tutorial-actions button {
    flex: 1;
}

/* =========================================
   LIVE SCORES
========================================= */

.live-scores-strip {
    padding: 4px 20px 16px;

    background: var(--navy);

    color: var(--white);
}

.live-scores-title {
    margin-bottom: 10px;

    color: var(--yellow);

    font-size: 12px;
    font-weight: 900;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.live-scores-list {
    display: flex;
    gap: 10px;

    overflow-x: auto;

    padding: 2px 2px 10px;

    scrollbar-width: none;
}

.live-scores-list::-webkit-scrollbar {
    display: none;
}

.score-card {
    flex: 0 0 180px;

    padding: 12px 14px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;

    background: var(--navy-soft);
}

.score-card.is-live {
    border-color: rgba(232, 69, 69, 0.7);
}

.score-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;

    margin-bottom: 8px;

    color: rgba(255, 255, 255, 0.7);

    font-size: 12px;
    font-weight: 700;

    white-space: nowrap;
}

.score-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    color: var(--white);

    font-weight: 900;

    letter-spacing: 0.04em;
}

.score-card.is-live .score-status {
    color: #ff6b6b;
}

.score-live-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--red);

    animation: score-pulse 1.4s ease-in-out infinite;
}

@keyframes score-pulse {
    50% {
        opacity: 0.3;
    }
}

.score-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;

    color: var(--white);
}

.score-row + .score-row {
    margin-top: 2px;
}

.score-team {
    font-size: 15px;
    font-weight: 800;
}

.score-points {
    font-size: 20px;
    font-weight: 900;

    font-variant-numeric: tabular-nums;
}

.score-row.is-winner .score-points {
    color: var(--yellow);
}

.score-row.is-loser {
    color: rgba(255, 255, 255, 0.5);
}

.score-detail {
    margin-top: 6px;

    color: rgba(255, 255, 255, 0.7);

    font-size: 12px;
    font-weight: 700;
}

.live-score.is-live {
    color: #c92a2a;
}

.live-score {
    margin: 2px 0 8px;

    color: var(--navy);

    font-size: 13px;
    font-weight: 800;
}

/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        transition-duration:
            0.01ms !important;
    }

    .score-live-dot {
        animation: none;
    }
}
/* =========================================
   MONTHLY LEADERBOARD
========================================= */

.xp-progress.is-clickable {
    cursor: pointer;

    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.xp-progress.is-clickable:hover,
.xp-progress.is-clickable:focus-visible {
    box-shadow: var(--shadow);
}

.xp-progress.is-clickable:active {
    transform: scale(0.99);
}

.xp-progress-link {
    display: block;

    margin-top: 8px;

    color: var(--navy);

    font-size: 13px;
    font-weight: 850;
}

.leaderboard-content {
    max-height: 88vh;

    overflow-y: auto;
}

.leaderboard-subtitle {
    margin: 4px 0 12px;

    color: var(--gray);

    font-size: 13px;
}

.leaderboard-me {
    margin-bottom: 12px;

    padding: 10px 12px;

    border-radius: 12px;

    background: var(--navy);
    color: var(--white);

    font-size: 14px;
    font-weight: 700;
}

.leaderboard-list {
    margin: 0;
    padding: 0;

    list-style: none;
}

.leaderboard-row {
    display: grid;
    grid-template-columns: 34px 34px 1fr auto;
    align-items: center;
    gap: 8px;

    padding: 9px 6px;

    border-bottom: 1px solid var(--light-gray);
}

.leaderboard-row.is-me {
    border-radius: 10px;

    background: rgba(255, 212, 59, 0.3);
}

.leaderboard-rank {
    color: var(--navy);

    font-size: 16px;
    font-weight: 900;
    text-align: center;
}

.leaderboard-avatar {
    font-size: 22px;
    text-align: center;
}

.leaderboard-name {
    min-width: 0;

    overflow: hidden;

    color: var(--navy);

    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.leaderboard-name em {
    color: var(--gray);

    font-style: normal;
    font-weight: 600;
}

.leaderboard-name small {
    display: block;

    color: var(--gray);

    font-size: 12px;
    font-weight: 600;
}

.leaderboard-xp {
    color: var(--navy);

    font-variant-numeric: tabular-nums;
}

.leaderboard-empty {
    padding: 18px 6px;

    color: var(--gray);

    text-align: center;
}

.leaderboard-prefs {
    display: grid;
    gap: 8px;

    margin-top: 16px;
    padding-top: 14px;

    border-top: 1px solid var(--light-gray);

    font-size: 14px;
}

.leaderboard-prefs > label {
    color: var(--navy);

    font-weight: 800;
}

.leaderboard-prefs input[type="text"] {
    width: 100%;

    padding: 10px 12px;

    border: 1px solid var(--light-gray);
    border-radius: 10px;

    font-size: 16px;
}

.leaderboard-prefs .leaderboard-hide {
    display: flex;
    align-items: center;
    gap: 8px;

    color: var(--dark-gray);

    font-weight: 600;
}

.leaderboard-prefs-status {
    margin: 0;

    color: var(--gray);

    font-size: 13px;
}
.submission-dup {
    color: var(--orange);

    font-weight: 800;
}
/* =========================================
   INVITE A FRIEND
========================================= */

.invite-banner {
    margin: 0 0 12px;

    padding: 10px 14px;

    border-radius: 12px;

    background: var(--yellow);
    color: var(--navy);

    font-size: 14px;
    font-weight: 800;
    text-align: center;
}

.invite-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;

    margin: 10px 0 14px;
}

.invite-stats > div {
    padding: 10px 6px;

    border-radius: 12px;

    background: var(--off-white);

    text-align: center;
}

.invite-stats strong {
    display: block;

    color: var(--navy);

    font-size: 20px;
    font-weight: 900;
}

.invite-stats span {
    color: var(--gray);

    font-size: 12px;
    font-weight: 700;
}

.invite-share-status {
    margin: 8px 0 0;

    color: var(--gray);

    font-size: 13px;

    overflow-wrap: anywhere;
}

.invite-admin-heading {
    margin: 16px 0 8px;

    color: var(--navy);

    font-size: 15px;
}

/* "I'm Here" check-in (event in progress) */
.going-button.check-in,
.going-button.going.check-in {
    background: var(--green);

    border-color: var(--green);

    color: var(--white);
}

.going-button.check-in:hover {
    background: #1b8659;
}

/* =========================================
   CHECK-IN QR CODES
========================================= */

.qr-content {
    max-height: 92vh;

    overflow-y: auto;

    text-align: center;
}

.qr-image {
    display: block;

    width: 100%;
    max-width: 320px;
    min-height: 200px;

    margin: 8px auto;

    border: 1px solid var(--light-gray);
    border-radius: 12px;

    background: var(--white);
}

.qr-link {
    margin: 4px 0 12px;

    color: var(--gray);

    font-size: 13px;

    overflow-wrap: anywhere;
}

/* =========================================
   PROFILE PAGE (blue background)
========================================= */

#profilePage {
    background:
        linear-gradient(180deg, #1d4f9a 0%, var(--navy-soft) 340px, var(--navy) 100%);
}

.profile-header {
    display: flex;
    align-items: center;
    gap: 16px;

    padding: 28px 20px 20px;

    color: var(--white);
}

#profilePage .profile-avatar {
    flex-shrink: 0;

    margin-bottom: 0;

    border: 3px solid rgba(255, 255, 255, 0.35);

    background: rgba(255, 255, 255, 0.14);
}

.profile-header-info {
    min-width: 0;
}

.profile-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

#profilePage .profile-header h1 {
    margin: 0;

    overflow: hidden;

    color: var(--white);

    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-edit-icon {
    flex-shrink: 0;

    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.16);

    font-size: 15px;

    cursor: pointer;

    transition: background 0.2s;
}

.profile-edit-icon:hover {
    background: rgba(255, 255, 255, 0.28);
}

#profilePage .profile-header p {
    margin-top: 2px;

    overflow: hidden;

    color: rgba(255, 255, 255, 0.7);

    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#profilePage .level-name-pill {
    margin-top: 8px;

    background: rgba(255, 255, 255, 0.14);
}

#profilePage .stat {
    background: rgba(255, 255, 255, 0.1);
}

#profilePage .stat strong {
    color: var(--white);
}

#profilePage .stat span {
    color: rgba(255, 255, 255, 0.7);
}

#profilePage .xp-progress {
    border-color: transparent;
}

#profilePage .profile-section > h2 {
    color: var(--white);
}

#profilePage .profile-menu,
#profilePage .profile-tile {
    border-color: transparent;
}

#profilePage .profile-legal,
#profilePage .profile-legal button {
    color: rgba(255, 255, 255, 0.6);
}

#profilePage .admin-access-button {
    margin-bottom: 8px;
}

/* Edit Profile popup */
.profile-edit-preview {
    display: grid;
    place-items: center;

    width: 76px;
    height: 76px;

    margin: 10px auto 4px;

    border-radius: 50%;

    background: var(--navy);

    font-size: 40px;
}

.profile-edit-label {
    margin: 14px 0 0;

    color: var(--navy);

    font-size: 13px;
    font-weight: 800;
}

#profileNameModal .avatar-option {
    font-size: 22px;
}

#profileNameModal .avatar-grid {
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;

    margin-top: 8px;
    margin-bottom: 16px;
}

/* =========================================
   PROFILE CARDS
========================================= */

.profile-card {
    margin: 0 20px 16px;

    padding: 16px;

    border: 1px solid var(--light-gray);
    border-radius: var(--radius);

    background: var(--white);

    box-shadow: var(--shadow);
}

.profile-card h2 {
    margin: 0;

    color: var(--navy);

    font-size: 17px;
    font-weight: 850;
}

.profile-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

    gap: 6px 10px;
}

.profile-card-head h2 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.profile-card-tag {
    padding: 3px 10px;

    border-radius: 999px;

    background: var(--off-white);

    color: var(--dark-gray);

    font-size: 12px;
    font-weight: 800;
}

.profile-card-note {
    margin: 6px 0 12px;

    color: var(--gray);

    font-size: 14px;
    line-height: 1.45;
}

.profile-card-button {
    display: block;

    width: 100%;

    text-align: center;
    text-decoration: none;
}

.profile-button-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 8px;
}

.profile-button-row.two {
    grid-template-columns: 1fr 1fr;
}

.profile-button-row > * {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;

    padding-left: 8px;
    padding-right: 8px;

    font-size: 14px;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
}

/* Competition: the headline card while one is running. */
.competition-card {
    border: 2px solid var(--yellow);

    background:
        linear-gradient(180deg, rgba(255, 212, 59, 0.16), var(--white) 120px);
}

.competition-when {
    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.competition-card .leaderboard-me {
    margin-bottom: 10px;
}

.competition-list {
    margin-top: 12px;
}

/* Competitors share from the competition card, so the separate
   invite card would just repeat it. */
#profilePage.is-competing #inviteSection {
    display: none;
}

.profile-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.profile-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;

    width: 100%;
    height: 100%;

    padding: 14px;

    border: 1px solid var(--light-gray);
    border-radius: var(--radius);

    background: var(--white);

    color: var(--navy);

    text-align: left;
    text-decoration: none;

    transition: border-color 0.2s;
}

.profile-tile:hover {
    border-color: var(--orange);
}

.profile-tile span {
    font-size: 24px;
}

.profile-tile strong {
    font-size: 14px;
    font-weight: 800;
}

.profile-tile small {
    color: var(--gray);

    font-size: 12px;
}

.profile-details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;

    color: var(--navy);

    font-size: 17px;
    font-weight: 850;

    cursor: pointer;
    list-style: none;
}

.profile-details summary::-webkit-details-marker,
.profile-menu-item summary::-webkit-details-marker {
    display: none;
}

.profile-details summary::after,
.profile-menu-item summary::after {
    content: "›";

    margin-left: 8px;

    color: var(--gray);

    font-size: 20px;

    transition: transform 0.2s;
}

.profile-details[open] summary::after,
.profile-menu-item[open] summary::after {
    transform: rotate(90deg);
}

.profile-details summary .badge-count {
    margin-left: auto;
}

.profile-menu {
    overflow: hidden;

    border: 1px solid var(--light-gray);
    border-radius: var(--radius);

    background: var(--white);
}

.profile-menu-item {
    display: block;

    width: 100%;

    padding: 14px 16px;

    border: 0;
    border-bottom: 1px solid var(--light-gray);

    background: transparent;

    color: var(--navy);

    font-size: 15px;
    font-weight: 700;
    text-align: left;
}

.profile-menu-item:last-child {
    border-bottom: 0;
}

.profile-menu-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;

    cursor: pointer;
    list-style: none;
}

.profile-menu-item .admin-form {
    display: block;

    margin-top: 12px;
}

.profile-menu-item .admin-form button {
    width: 100%;
}

.profile-menu .log-out-button {
    color: var(--red);
}

.profile-legal {
    margin-top: 14px;

    color: var(--gray);

    font-size: 12px;
    text-align: center;
}

.profile-legal button {
    padding: 4px;

    border: 0;

    background: none;

    color: var(--gray);

    font-size: 12px;
    text-decoration: underline;
}

.qr-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.qr-actions button {
    padding-left: 6px;
    padding-right: 6px;
}

/* Leaderboard page */
.leaderboard-back {
    margin: 16px 20px 0;
    padding: 8px 14px;

    border: 1px solid var(--light-gray);
    border-radius: 999px;

    background: var(--white);
    color: var(--navy);

    font-size: 14px;
    font-weight: 800;

    cursor: pointer;
}

.leaderboard-months {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;

    margin: 0 20px 14px;
    padding: 4px;

    border-radius: 12px;

    background: var(--light-gray);
}

.leaderboard-month {
    padding: 8px;

    border: 0;
    border-radius: 9px;

    background: transparent;
    color: var(--dark-gray);

    font-weight: 800;

    cursor: pointer;
}

.leaderboard-month.is-active {
    background: var(--white);
    color: var(--navy);

    box-shadow: var(--shadow);
}

.leaderboard-xp-note {
    margin: 12px 0 0;

    color: var(--gray);

    font-size: 12px;
    text-align: center;
}

/* Admin stats campus toggle (wraps when there are many campuses) */
.stats-campus-toggle {
    display: flex;
    flex-wrap: wrap;

    margin: 0 0 14px;
}

.stats-campus-toggle .leaderboard-month {
    flex: 1 1 auto;

    font-size: 13px;
}

/* For You sections + rating prompt */
.for-you-heading {
    margin: 18px 0 8px;

    color: var(--navy);

    font-size: 17px;
    font-weight: 900;
}

.for-you-heading:first-child {
    margin-top: 4px;
}

.rating-skip {
    display: block;

    margin: 12px auto 0;
}

/* Badges (live) */
.badges-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.badge-count {
    color: var(--gray);

    font-size: 13px;
    font-weight: 800;
}

button.badge {
    border: 0;

    font-family: inherit;

    cursor: pointer;
}

.badge small {
    color: var(--gray);

    font-size: 11px;
    font-weight: 800;
}

.badge:not(.locked) {
    background: rgba(255, 212, 59, 0.35);
}

.badge-toast {
    cursor: pointer;
}

/* Paywall: $1 one-time for new students. */
.paywall-logo {
    display: block;

    height: 44px;
    width: auto;

    margin: 0 auto 14px;
}

.paywall-price {
    margin-bottom: 18px !important;

    color: var(--gray);

    font-size: 15px !important;
    font-weight: 650;
}

.paywall-price span {
    color: var(--navy);

    font-size: 34px;
    font-weight: 900;

    margin-right: 4px;
}

.paywall-perks {
    list-style: none;

    margin: 0 0 22px;
    padding: 14px 16px;

    border-radius: 14px;

    background: var(--off-white);

    text-align: left;

    font-size: 14px;
    font-weight: 650;

    color: var(--dark-gray);
}

.paywall-perks li + li {
    margin-top: 6px;
}

.paywall-buttons {
    min-height: 50px;
}

.paywall-status {
    min-height: 20px;

    margin: 10px 0 14px !important;

    font-weight: 650;
}

.paywall-status.error {
    color: var(--red) !important;
}

.paywall-social {
    margin: 0 0 16px;
    padding: 12px 14px;

    border-radius: 14px;

    background: rgba(255, 212, 59, 0.16);

    color: var(--dark-gray);

    font-size: 14px;
    text-align: left;
}

.paywall-social b {
    color: var(--navy);
}

.paywall-social small {
    display: block;

    margin-top: 6px;

    color: var(--gray);

    font-size: 13px;
}