:root {
    --red: #f04b4f;
    --red-dark: #d83c40;

    --yellow: #ffd94a;
    --blue: #93c9ff;
    --pink: #ffb4ce;

    --black: #151515;
    --cream: #f6f1e8;
    --white: #fffdf8;
    --grey: #696969;

    --border: 2px solid var(--black);

    --shell: 1180px;
}


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html {
    scroll-behavior: smooth;
}


body {
    background: var(--cream);
    color: var(--black);

    font-family:
            Arial,
            Helvetica,
            sans-serif;

    line-height: 1.5;
}


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


button {
    font: inherit;
}


.shell {
    width: min(calc(100% - 42px), var(--shell));
    margin: 0 auto;
}


/* HEADER */

.topbar {
    background: var(--cream);
    border-bottom: var(--border);

    position: sticky;
    top: 0;
    z-index: 100;
}


.nav {
    min-height: 76px;

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


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

    font-size: 1.3rem;
    font-weight: 900;

    letter-spacing: -0.04em;
}


.brand-mark {
    width: 40px;
    height: 40px;

    border-radius: 50%;

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

    display: grid;
    place-items: center;

    border: var(--border);

    transform: rotate(-7deg);
}


nav {
    display: flex;
    align-items: center;
    gap: 27px;

    font-size: 0.9rem;
    font-weight: 700;
}


nav > a {
    transition: transform 0.15s ease;
}


nav > a:hover {
    transform: translateY(-2px);
}


.login-link {
    margin-left: 16px;
}


.join-button,
.primary-button,
.dark-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: var(--border);

    font-weight: 900;

    box-shadow: 4px 4px 0 var(--black);

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


.join-button:hover,
.primary-button:hover,
.dark-button:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--black);
}


.join-button {
    background: var(--red);
    color: white;

    padding: 11px 18px;
}


.menu-button {
    display: none;

    border: 0;
    background: transparent;

    width: 44px;
    height: 44px;
}


.menu-button span {
    width: 25px;
    height: 2px;

    display: block;

    background: var(--black);

    margin: 5px auto;
}


/* HERO */

.hero {
    border-bottom: var(--border);
    overflow: hidden;
}


.hero-layout {
    min-height: 690px;

    display: grid;
    grid-template-columns: 1.05fr 0.95fr;

    align-items: center;

    gap: 60px;

    padding-top: 70px;
    padding-bottom: 70px;
}


.hero-kicker {
    display: inline-block;

    background: var(--yellow);

    border: var(--border);

    padding: 7px 11px;

    font-size: 0.85rem;
    font-weight: 900;

    margin-bottom: 27px;

    transform: rotate(-1deg);
}


.hero h1 {
    max-width: 680px;

    font-size: clamp(4rem, 7vw, 7.5rem);

    letter-spacing: -0.075em;
    line-height: 0.83;

    font-weight: 950;
}


.hero h1 span {
    color: var(--red);
}


.hero-copy > p {
    max-width: 570px;

    font-size: 1.18rem;

    margin-top: 35px;
}


.hero-buttons {
    margin-top: 35px;

    display: flex;
    align-items: center;

    gap: 25px;
}


.primary-button {
    background: var(--red);
    color: white;

    padding: 17px 25px;
}


.text-button {
    font-weight: 900;
    border-bottom: 2px solid var(--black);
}


.tiny-note {
    margin-top: 26px;

    font-size: 0.78rem;
    color: var(--grey);
}


/* HERO ART */

.hero-art {
    min-height: 530px;

    position: relative;
}


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

    box-shadow: 7px 7px 0 var(--black);
}


.person-card {
    width: 285px;

    padding: 14px;

    display: flex;
    align-items: center;

    gap: 14px;

    position: absolute;
}


.person-one {
    top: 20px;
    right: 20px;

    transform: rotate(3deg);
}


.person-two {
    bottom: 20px;
    left: 15px;

    transform: rotate(-3deg);
}


.person-photo {
    width: 72px;
    height: 72px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    border: var(--border);

    font-size: 1.8rem;
    font-weight: 900;
}


.pink {
    background: var(--pink);
}


.blue {
    background: var(--blue);
}


.person-info {
    display: flex;
    flex-direction: column;
}


.person-info strong {
    font-size: 1.05rem;
}


.person-info span {
    color: var(--grey);
    font-size: 0.8rem;
    margin-top: 3px;
}


.conversation-card {
    width: 360px;

    position: absolute;

    left: 50%;
    top: 50%;

    transform:
            translate(-50%, -50%)
            rotate(-2deg);

    background: white;

    border: var(--border);

    box-shadow: 9px 9px 0 var(--black);

    padding: 25px;
}


.conversation-top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    font-size: 0.82rem;
    font-weight: 900;

    margin-bottom: 25px;
}


.dot {
    width: 9px;
    height: 9px;

    border-radius: 50%;
    background: #33b864;
}


.chat-bubble {
    width: fit-content;
    max-width: 80%;

    padding: 10px 13px;

    margin-bottom: 12px;

    font-size: 0.86rem;

    border: 2px solid var(--black);
}


.incoming {
    background: var(--cream);
}


.outgoing {
    background: var(--red);
    color: white;

    margin-left: auto;
}


.sticker {
    position: absolute;

    border: var(--border);

    font-weight: 950;

    box-shadow: 4px 4px 0 var(--black);
}


.sticker-heart {
    width: 65px;
    height: 65px;

    border-radius: 50%;

    display: grid;
    place-items: center;

    right: 5px;
    bottom: 90px;

    background: var(--yellow);

    font-size: 1.7rem;

    transform: rotate(10deg);
}


.sticker-hello {
    left: 10px;
    top: 140px;

    background: var(--blue);

    padding: 8px 12px;

    transform: rotate(-8deg);
}


/* TICKER */

.ticker {
    overflow: hidden;

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

    border-bottom: var(--border);

    padding: 15px 0;
}


.ticker-track {
    width: max-content;

    display: flex;
    align-items: center;

    gap: 24px;

    font-weight: 950;

    letter-spacing: 0.04em;

    animation: ticker 30s linear infinite;
}


.ticker b {
    color: var(--red);
}


@keyframes ticker {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-45%);
    }
}


/* SECTIONS */

.section {
    padding: 110px 0;
}


.section-label {
    font-size: 0.78rem;
    font-weight: 900;

    letter-spacing: 0.08em;
}


.about-layout {
    display: grid;
    grid-template-columns: 180px 1fr;

    gap: 60px;
}


.about-main {
    max-width: 820px;
}


.about h2,
.how h2,
.conversation-copy h2,
.safety h2 {
    font-size: clamp(2.8rem, 5vw, 5rem);

    line-height: 0.95;

    letter-spacing: -0.055em;
}


.big-copy {
    font-size: 1.5rem;

    max-width: 750px;

    margin-top: 38px;

    font-weight: 700;
}


.about-main > p:last-child {
    max-width: 670px;

    margin-top: 23px;

    color: var(--grey);
}


/* FEATURE BOARD */

.feature-board {
    border-top: var(--border);
    border-bottom: var(--border);
}


.feature-grid {
    display: grid;

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


.feature-card {
    min-height: 390px;

    padding: 38px;

    border-right: var(--border);

    display: flex;
    flex-direction: column;
}


.feature-card:first-child {
    border-left: var(--border);
}


.yellow-card {
    background: var(--yellow);
}


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


.red-card {
    background: var(--red);
    color: white;
}


.number {
    font-size: 0.75rem;
    font-weight: 900;
}


.feature-card h3 {
    margin-top: auto;

    font-size: 2rem;
    line-height: 1;

    letter-spacing: -0.04em;

    max-width: 280px;
}


.feature-card p {
    margin-top: 18px;
    font-size: 0.93rem;
}


/* HOW */

.section-header {
    display: grid;
    grid-template-columns: 180px 1fr;

    gap: 60px;

    margin-bottom: 70px;
}


.steps {
    display: grid;

    grid-template-columns:
        1fr auto 1fr auto 1fr;

    gap: 25px;

    align-items: center;
}


.step {
    display: flex;
    gap: 17px;
    align-items: flex-start;
}


.step-circle {
    width: 46px;
    height: 46px;

    flex-shrink: 0;

    border: var(--border);

    border-radius: 50%;

    background: white;

    display: grid;
    place-items: center;

    font-weight: 900;
}


.step h3 {
    font-size: 1.2rem;
}


.step p {
    color: var(--grey);
    margin-top: 5px;
}


.step-arrow {
    font-size: 2rem;
}


/* CONVERSATION */

.conversation-section {
    background: var(--red);
    color: white;

    border-top: var(--border);
    border-bottom: var(--border);
}


.conversation-layout {
    min-height: 700px;

    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 70px;

    align-items: center;

    padding-top: 90px;
    padding-bottom: 90px;
}


.conversation-copy p {
    max-width: 550px;

    margin-top: 30px;

    font-size: 1.05rem;
}


.phone {
    max-width: 400px;

    margin-left: auto;
    margin-right: auto;

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

    border: var(--border);

    border-radius: 32px;

    padding: 18px;

    box-shadow: 10px 10px 0 var(--black);

    transform: rotate(2deg);
}


.phone-top {
    display: flex;
    align-items: center;

    gap: 12px;

    border-bottom: 2px solid var(--black);

    padding: 7px 5px 18px;
}


.mini-face {
    width: 45px;
    height: 45px;

    border-radius: 50%;

    background: var(--yellow);

    border: var(--border);

    display: grid;
    place-items: center;

    font-weight: 900;
}


.phone-top > div:last-child {
    display: flex;
    flex-direction: column;
}


.phone-top span {
    font-size: 0.73rem;
    color: #368d56;
}


.phone-chat {
    padding: 25px 5px;
}


.message-box {
    border: var(--border);

    padding: 12px 14px;

    display: flex;
    justify-content: space-between;

    color: #999;

    font-size: 0.85rem;
}


.message-box span {
    color: var(--black);
    font-weight: 900;
}


/* SAFETY */

.safety-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 80px;
}


.safety-copy {
    max-width: 570px;
}


.safety-copy > p {
    font-size: 1.1rem;
}


.safety-links {
    display: flex;
    flex-direction: column;

    margin-top: 30px;
}


.safety-links a {
    border-top: 2px solid var(--black);

    padding: 14px 0;

    font-weight: 900;
}


.safety-links a:last-child {
    border-bottom: 2px solid var(--black);
}


/* CTA */

.final-cta {
    background: var(--yellow);

    border-top: var(--border);
    border-bottom: var(--border);
}


.final-cta-inner {
    min-height: 560px;

    display: flex;
    flex-direction: column;

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

    text-align: center;
}


.cta-smiley {
    width: 80px;
    height: 80px;

    border: var(--border);

    border-radius: 50%;

    display: grid;
    place-items: center;

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

    font-size: 1.5rem;
    font-weight: 950;

    transform: rotate(-6deg);

    margin-bottom: 30px;
}


.final-cta h2 {
    max-width: 800px;

    font-size: clamp(3rem, 6vw, 6rem);

    line-height: 0.9;

    letter-spacing: -0.06em;
}


.dark-button {
    margin-top: 38px;

    padding: 16px 27px;

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

    box-shadow: 5px 5px 0 var(--red);
}


/* FOOTER */

footer {
    background: var(--black);
    color: white;

    padding-top: 70px;
}


.footer-layout {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 70px;

    padding-bottom: 60px;
}


.footer-brand {
    margin-bottom: 17px;
}


.footer-layout p {
    color: #aaa;
}


.footer-links {
    display: grid;

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

    gap: 35px;
}


.footer-links > div {
    display: flex;
    flex-direction: column;

    gap: 9px;
}


.footer-links strong {
    margin-bottom: 7px;
}


.footer-links a {
    color: #aaa;
    font-size: 0.85rem;
}


.footer-links a:hover {
    color: white;
}


.footer-bottom {
    min-height: 70px;

    border-top:
            1px solid #393939;

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

    color: #777;

    font-size: 0.78rem;
}


/* TABLET */

@media (max-width: 950px) {

    .menu-button {
        display: block;
    }


    nav {
        display: none;

        position: absolute;

        top: 76px;
        left: 20px;
        right: 20px;

        padding: 24px;

        flex-direction: column;
        align-items: stretch;

        background: var(--cream);

        border: var(--border);

        box-shadow: 6px 6px 0 var(--black);
    }


    nav.open {
        display: flex;
    }


    .login-link {
        margin-left: 0;
    }


    .hero-layout,
    .conversation-layout,
    .safety-layout {
        grid-template-columns: 1fr;
    }


    .hero-copy {
        text-align: center;
    }


    .hero-copy > p {
        margin-left: auto;
        margin-right: auto;
    }


    .hero-buttons {
        justify-content: center;
    }


    .hero-art {
        max-width: 600px;
        width: 100%;

        margin: 0 auto;
    }


    .feature-grid {
        grid-template-columns: 1fr;
    }


    .feature-card,
    .feature-card:first-child {
        border-left: var(--border);
        border-right: var(--border);
        border-bottom: var(--border);
    }


    .feature-card:last-child {
        border-bottom: 0;
    }


    .feature-card {
        min-height: 290px;
    }


    .steps {
        grid-template-columns: 1fr;

        gap: 28px;
    }


    .step-arrow {
        display: none;
    }


    .phone {
        margin-top: 15px;
    }


    .footer-layout {
        grid-template-columns: 1fr;
    }

}


/* MOBILE */

@media (max-width: 650px) {

    .shell {
        width: min(calc(100% - 28px), var(--shell));
    }


    .hero-layout {
        min-height: auto;

        padding-top: 55px;
        padding-bottom: 60px;
    }


    .hero h1 {
        font-size: 4rem;
    }


    .hero-buttons {
        flex-direction: column;
    }


    .primary-button {
        width: 100%;
    }


    .hero-art {
        min-height: 480px;
    }


    .conversation-card {
        width: 290px;
    }


    .person-card {
        width: 235px;
    }


    .person-photo {
        width: 58px;
        height: 58px;
    }


    .about-layout,
    .section-header {
        grid-template-columns: 1fr;

        gap: 25px;
    }


    .section {
        padding: 75px 0;
    }


    .feature-card {
        padding: 28px;
    }


    .conversation-layout {
        padding-top: 70px;
        padding-bottom: 70px;
    }


    .footer-links {
        grid-template-columns: 1fr 1fr;
    }


    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;

        gap: 5px;
    }

}

/* =========================================================
   REGISTRATION
========================================================= */

.auth-page {
    min-height: 100vh;
}


.auth-nav-right {
    display: flex;
    align-items: center;
    gap: 18px;

    font-size: 0.86rem;
    font-weight: 700;
}


.auth-login-button {
    border: 2px solid var(--black);

    padding: 9px 17px;

    background: var(--white);

    font-weight: 900;

    box-shadow: 3px 3px 0 var(--black);
}


.register-main {
    min-height:
            calc(100vh - 78px);
}


.register-layout {
    min-height:
            calc(100vh - 78px);

    display: grid;

    grid-template-columns:
        0.9fr 1.1fr;

    gap: 100px;

    align-items: center;

    padding-top: 60px;
    padding-bottom: 70px;
}


.register-intro {
    max-width: 510px;
}


.signup-step {
    display: inline-block;

    font-size: 0.75rem;

    letter-spacing: 0.11em;

    font-weight: 900;

    margin-bottom: 18px;
}


.register-intro h1 {
    font-size:
            clamp(
                    4rem,
                    7vw,
                    6.8rem
            );

    line-height: 0.84;

    letter-spacing: -0.075em;
}


.register-intro h1 span {
    color: var(--red);
}


.register-intro > p {
    max-width: 430px;

    margin-top: 28px;

    color: #555;

    font-size: 1.05rem;
}


.registration-points {
    margin-top: 45px;

    border-top:
            2px solid var(--black);
}


.registration-points > div {
    display: grid;

    grid-template-columns:
        55px 1fr;

    padding: 15px 0;

    border-bottom:
            2px solid var(--black);
}


.registration-points strong {
    color: var(--red);

    font-size: 0.82rem;
}


.registration-points span {
    font-weight: 800;
}


/* FORM */

.register-form-wrapper {
    width: 100%;
}


.register-card {
    max-width: 560px;

    margin-left: auto;

    background: var(--white);

    border:
            2px solid var(--black);

    padding: 42px;

    box-shadow:
            9px 9px 0 var(--black);
}


.register-card-heading {
    margin-bottom: 30px;
}


.register-card-heading h2 {
    font-size: 2rem;

    letter-spacing: -0.045em;
}


.register-card-heading p {
    color: #737373;

    margin-top: 4px;
}


.signup-form {
    display: grid;

    gap: 20px;
}


.form-group {
    display: flex;

    flex-direction: column;

    gap: 7px;
}


.form-group label {
    font-size: 0.84rem;

    font-weight: 900;
}


.form-group input {
    width: 100%;

    height: 52px;

    padding:
            0 15px;

    border:
            2px solid var(--black);

    border-radius: 0;

    outline: none;

    background: white;

    color: var(--black);

    font: inherit;

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


.form-group input:focus {
    box-shadow:
            4px 4px 0 var(--yellow);

    transform:
            translate(-1px, -1px);
}


.field-note {
    color: #777;

    font-size: 0.75rem;
}


.password-field {
    position: relative;
}


.password-field input {
    padding-right: 70px;
}


.show-password {
    position: absolute;

    right: 12px;
    top: 50%;

    transform:
            translateY(-50%);

    border: 0;

    background: transparent;

    font-size: 0.75rem;

    font-weight: 900;

    cursor: pointer;
}


.checkbox-row {
    display: grid;

    grid-template-columns:
        auto 1fr;

    gap: 11px;

    align-items: start;

    margin-top: 3px;

    cursor: pointer;
}


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

    margin-top: 2px;

    accent-color: var(--red);
}


.checkbox-row span {
    color: #555;

    font-size: 0.79rem;

    line-height: 1.5;
}


.checkbox-row a {
    color: var(--black);

    font-weight: 900;

    text-decoration: underline;
}


.register-submit {
    width: 100%;

    margin-top: 5px;

    cursor: pointer;

    font-size: 1rem;
}


/* ERRORS */

.form-errors {
    margin-bottom: 25px;

    padding: 17px 18px;

    border:
            2px solid var(--black);

    background:
            #ffd9dc;

    box-shadow:
            4px 4px 0 var(--black);

    font-size: 0.84rem;
}


.form-errors strong {
    display: block;

    margin-bottom: 7px;
}


.form-errors ul {
    margin-left: 19px;
}


.form-errors li + li {
    margin-top: 4px;
}


/* SUCCESS */

.registration-success {
    min-height:
            calc(100vh - 78px);

    display: grid;

    place-items: center;

    padding: 60px 20px;
}


.success-card {
    width:
            min(
                    100%,
                    650px
            );

    background: var(--yellow);

    border:
            2px solid var(--black);

    box-shadow:
            10px 10px 0 var(--black);

    padding:
            65px 55px;

    text-align: center;
}


.success-icon {
    width: 75px;
    height: 75px;

    margin:
            0 auto
            25px;

    display: grid;

    place-items: center;

    border:
            2px solid var(--black);

    border-radius: 50%;

    background: var(--red);

    color: white;

    font-size: 2rem;

    font-weight: 900;

    transform:
            rotate(-5deg);
}


.success-card h1 {
    font-size:
            clamp(
                    2.7rem,
                    6vw,
                    4.8rem
            );

    line-height: 0.9;

    letter-spacing: -0.06em;
}


.success-card p {
    max-width: 440px;

    margin:
            25px auto 0;

    font-size: 1rem;
}


.success-button {
    margin-top: 30px;
}


.signup-login-mobile {
    display: none;

    text-align: center;

    font-size: 0.82rem;

    color: #666;
}


.signup-login-mobile a {
    color: var(--black);

    font-weight: 900;

    text-decoration: underline;
}


/* REGISTRATION TABLET */

@media (max-width: 900px) {

    .register-layout {
        grid-template-columns: 1fr;

        gap: 55px;

        padding-top: 55px;
    }


    .register-intro {
        max-width: 680px;

        text-align: center;

        margin: auto;
    }


    .register-intro > p {
        margin-left: auto;
        margin-right: auto;
    }


    .registration-points {
        max-width: 500px;

        margin-left: auto;
        margin-right: auto;
    }


    .register-card {
        margin: auto;
    }

}


/* REGISTRATION MOBILE */

@media (max-width: 600px) {

    .auth-nav-right span {
        display: none;
    }


    .register-layout {
        padding-top: 40px;
        padding-bottom: 55px;

        gap: 40px;
    }


    .register-intro h1 {
        font-size: 3.7rem;
    }


    .registration-points {
        text-align: left;
    }


    .register-card {
        padding: 27px 20px;

        box-shadow:
                6px 6px 0 var(--black);
    }


    .register-card-heading h2 {
        font-size: 1.65rem;
    }


    .signup-login-mobile {
        display: block;
    }


    .success-card {
        padding:
                50px 25px;
    }

}

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

.setup-page {
    min-height: 100vh;

    background:
            var(--cream);
}


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

    font-size: 0.82rem;
    font-weight: 800;
}


.setup-header-user a {
    text-decoration: underline;
}


.setup-header-dot {
    color: var(--red);
}


.setup-main {
    min-height:
            calc(100vh - 78px);
}


.setup-shell {
    min-height:
            calc(100vh - 78px);

    display: grid;

    grid-template-columns:
        330px 1fr;

    gap: 85px;

    align-items: start;

    padding-top: 70px;
    padding-bottom: 90px;
}


/* SIDEBAR */

.setup-sidebar {
    position: relative;
}


.setup-sidebar-inner {
    position: sticky;

    top: 130px;
}


.setup-small-title {
    font-size: 0.72rem;

    letter-spacing: 0.12em;

    font-weight: 900;
}


.setup-sidebar h2 {
    max-width: 300px;

    margin-top: 15px;

    font-size: 2.25rem;

    line-height: 0.95;

    letter-spacing: -0.055em;
}


.setup-progress {
    margin-top: 38px;

    border-top:
            2px solid var(--black);
}


.setup-progress-item {
    min-height: 72px;

    display: flex;
    align-items: center;

    gap: 14px;

    padding: 12px 3px;

    border-bottom:
            2px solid var(--black);

    color: #8a877f;
}


.setup-progress-item.active {
    color: var(--black);
}


.setup-progress-item.completed {
    color: var(--black);
}


.progress-number {
    width: 32px;
    height: 32px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    border:
            2px solid currentColor;

    border-radius: 50%;

    font-size: 0.75rem;

    font-weight: 900;
}


.setup-progress-item.active
.progress-number {
    background: var(--yellow);

    color: var(--black);

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


.setup-progress-item.completed
.progress-number {
    background: var(--red);

    color: white;

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


.setup-progress-item div {
    display: flex;
    flex-direction: column;
}


.setup-progress-item strong {
    font-size: 0.88rem;
}


.setup-progress-item small {
    font-size: 0.7rem;

    margin-top: 1px;
}


.setup-age-card {
    margin-top: 30px;

    padding: 18px;

    border:
            2px solid var(--black);

    background: var(--yellow);

    box-shadow:
            4px 4px 0 var(--black);

    display: flex;
    flex-direction: column;

    transform:
            rotate(-1deg);
}


.setup-age-card span {
    font-size: 0.72rem;
}


.setup-age-card strong {
    margin-top: 2px;

    font-size: 1rem;
}


/* FORM AREA */

.setup-form-area {
    width: 100%;

    max-width: 710px;

    padding-top: 5px;
}


.setup-step-counter {
    margin-bottom: 18px;

    font-size: 0.72rem;

    font-weight: 900;

    letter-spacing: 0.12em;

    color: var(--red);
}


.setup-form-header {
    margin-bottom: 40px;
}


.setup-form-header h1 {
    font-size:
            clamp(
                    3rem,
                    6vw,
                    5.4rem
            );

    line-height: 0.9;

    letter-spacing: -0.07em;
}


.setup-form-header p {
    max-width: 550px;

    margin-top: 20px;

    color: #67645f;

    font-size: 1.03rem;
}


.setup-form {
    display: grid;

    gap: 35px;
}


.setup-form-group label {
    font-size: 1rem;
}


.setup-form-group input {
    height: 58px;

    font-size: 1rem;
}


.setup-form-group textarea {
    width: 100%;

    min-height: 230px;

    resize: vertical;

    padding: 16px;

    border:
            2px solid var(--black);

    border-radius: 0;

    outline: none;

    background: white;

    font: inherit;

    line-height: 1.6;
}


.setup-form-group textarea:focus {
    box-shadow:
            4px 4px 0 var(--yellow);

    transform:
            translate(-1px, -1px);
}


/* CHOICES */

.choice-fieldset {
    border: 0;
}


.choice-fieldset legend {
    margin-bottom: 13px;

    font-weight: 900;

    font-size: 1rem;
}


.choice-grid {
    display: grid;

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

    gap: 13px;
}


.choice-card {
    cursor: pointer;

    position: relative;
}


.choice-card input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


.choice-card span {
    min-height: 65px;

    padding: 15px 18px;

    border:
            2px solid var(--black);

    background: var(--white);

    display: flex;

    align-items: center;

    font-weight: 900;

    box-shadow:
            3px 3px 0 transparent;

    transition:
            transform 0.12s ease,
            box-shadow 0.12s ease,
            background 0.12s ease;
}


.choice-card:hover span {
    transform:
            translate(-1px, -1px);

    box-shadow:
            3px 3px 0 var(--black);
}


.choice-card input:checked + span {
    background: var(--yellow);

    box-shadow:
            4px 4px 0 var(--black);

    transform:
            translate(-2px, -2px);
}


.looking-grid {
    grid-template-columns:
        repeat(3, 1fr);
}


.large-choice span {
    min-height: 115px;

    justify-content: center;

    text-align: center;

    font-size: 1.25rem;
}


/* LOCATION */

.location-note {
    max-width: 520px;

    padding: 20px;

    border-left:
            5px solid var(--red);

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


.location-note strong {
    display: block;

    font-size: 0.86rem;
}


.location-note p {
    margin-top: 4px;

    color: #69655f;

    font-size: 0.82rem;
}


/* BIO */

.bio-footer {
    display: flex;

    justify-content: space-between;

    gap: 20px;

    color: #77736c;

    font-size: 0.72rem;
}


.bio-footer span:first-child {
    max-width: 440px;
}


.bio-prompts {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 9px;
}


.bio-prompts > span {
    margin-right: 4px;

    font-size: 0.75rem;

    font-weight: 900;
}


.bio-prompt {
    padding: 8px 11px;

    border:
            2px solid var(--black);

    background: white;

    cursor: pointer;

    font-size: 0.75rem;

    font-weight: 800;
}


.bio-prompt:hover {
    background: var(--yellow);
}


/* ACTIONS */

.setup-actions {
    padding-top: 25px;

    border-top:
            2px solid var(--black);

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;
}


.setup-back {
    font-weight: 900;

    font-size: 0.85rem;
}


.setup-back:hover {
    text-decoration: underline;
}


.setup-next {
    min-width: 170px;

    cursor: pointer;
}


.setup-errors {
    margin-bottom: 35px;
}


/* PROFILE SETUP TABLET */

@media (max-width: 900px) {

    .setup-shell {
        grid-template-columns: 1fr;

        gap: 50px;

        padding-top: 45px;
    }


    .setup-sidebar-inner {
        position: static;
    }


    .setup-sidebar h2 {
        max-width: 500px;
    }


    .setup-progress {
        display: grid;

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


    .setup-progress-item {
        border:
                2px solid var(--black);

        border-right: 0;

        padding: 12px;

        min-height: 95px;

        align-items: flex-start;
    }


    .setup-progress-item:last-child {
        border-right:
                2px solid var(--black);
    }


    .setup-progress-item small {
        display: none;
    }


    .setup-age-card {
        display: none;
    }


    .setup-form-area {
        max-width: none;
    }

}


/* PROFILE SETUP MOBILE */

@media (max-width: 620px) {

    .setup-header-user > span:first-child,
    .setup-header-dot {
        display: none;
    }


    .setup-shell {
        padding-top: 32px;

        gap: 35px;
    }


    .setup-sidebar h2 {
        font-size: 1.7rem;
    }


    .setup-progress {
        grid-template-columns:
            repeat(4, 1fr);
    }


    .setup-progress-item {
        min-height: auto;

        justify-content: center;
    }


    .setup-progress-item div {
        display: none;
    }


    .setup-form-header h1 {
        font-size: 3.4rem;
    }


    .choice-grid,
    .looking-grid {
        grid-template-columns: 1fr;
    }


    .large-choice span {
        min-height: 70px;
    }


    .bio-footer {
        flex-direction: column;

        gap: 5px;
    }


    .setup-actions {
        flex-direction: column-reverse;

        align-items: stretch;
    }


    .setup-next {
        width: 100%;
    }


    .setup-back {
        text-align: center;

        padding: 8px;
    }

}

/* =========================================================
   AUTOMATIC LOCATION
========================================================= */

.detected-location-field {
    position: relative;
}


.detected-location-field input {
    padding-right: 165px;
}


.location-detected-badge {
    position: absolute;

    top: 50%;
    right: 12px;

    transform:
            translateY(-50%);

    padding: 5px 8px;

    border:
            2px solid var(--black);

    background:
            var(--yellow);

    font-size: 0.64rem;

    font-weight: 900;

    white-space: nowrap;
}


.location-detected-message {
    display: flex;

    gap: 9px;

    margin-top: 10px;

    color: #68645f;

    font-size: 0.78rem;

    line-height: 1.5;
}


.location-detected-message strong {
    color: var(--black);
}


.location-pin {
    color: var(--red);

    flex-shrink: 0;
}


@media (max-width: 520px) {

    .detected-location-field input {
        padding-right: 15px;
    }


    .location-detected-badge {
        position: static;

        display: inline-block;

        transform: none;

        margin-top: 8px;
    }

}

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

.photo-setup-main {
    min-height: calc(100vh - 78px);
}


.photo-setup-shell {
    padding-top: 65px;
    padding-bottom: 90px;
}


.photo-heading {
    max-width: 760px;
}


.photo-heading h1 {
    font-size: clamp(3.4rem, 7vw, 6.5rem);

    line-height: 0.87;

    letter-spacing: -0.075em;
}


.photo-heading p {
    max-width: 560px;

    margin-top: 22px;

    color: #66625c;

    font-size: 1.05rem;
}


.photo-message {
    max-width: 800px;

    margin-top: 30px;
}


.photo-success-message {
    max-width: 800px;

    margin-top: 30px;

    padding: 14px 17px;

    border: 2px solid var(--black);

    background: #c9f2cf;

    box-shadow: 4px 4px 0 var(--black);

    font-weight: 800;

    font-size: 0.85rem;
}


.photo-content {
    display: grid;

    grid-template-columns: 1fr 300px;

    gap: 65px;

    align-items: start;

    margin-top: 55px;
}


/* PHOTO GRID */

.photo-grid {
    display: grid;

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

    gap: 18px;
}


.photo-slot {
    position: relative;

    aspect-ratio: 4 / 5;

    border: 2px solid var(--black);

    background: var(--white);

    overflow: hidden;
}


.filled-photo {
    box-shadow:
            5px 5px 0 var(--black);
}


.filled-photo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.primary-photo {
    outline:
            5px solid var(--yellow);

    outline-offset:
            -7px;
}


.main-photo-label {
    position: absolute;

    top: 12px;
    left: 12px;

    padding: 6px 9px;

    border: 2px solid var(--black);

    background: var(--yellow);

    font-size: 0.68rem;

    font-weight: 900;

    box-shadow:
            2px 2px 0 var(--black);
}


.photo-controls {
    position: absolute;

    left: 10px;
    right: 10px;
    bottom: 10px;

    display: flex;

    flex-wrap: wrap;

    gap: 7px;
}


.photo-control-button {
    border:
            2px solid var(--black);

    background: var(--white);

    padding:
            6px 9px;

    cursor: pointer;

    font-size: 0.68rem;

    font-weight: 900;

    box-shadow:
            2px 2px 0 var(--black);
}


.photo-control-button:hover {
    background: var(--yellow);
}


.delete-photo:hover {
    background: #ffd3d3;
}


/* UPLOAD */

.photo-upload-form {
    display: flex;

    flex-direction: column;

    gap: 12px;
}


.upload-slot {
    cursor: pointer;

    border-style: dashed;

    transition:
            background 0.15s ease,
            transform 0.15s ease;
}


.upload-slot:hover,
.upload-slot.dragging {
    background: #fff2ae;

    transform:
            translateY(-2px);
}


.upload-slot input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;

    pointer-events: none;
}


.upload-placeholder {
    width: 100%;
    height: 100%;

    display: flex;

    flex-direction: column;

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

    text-align: center;

    padding: 20px;
}


.upload-plus {
    width: 52px;
    height: 52px;

    margin-bottom: 13px;

    display: grid;
    place-items: center;

    border:
            2px solid var(--black);

    border-radius: 50%;

    background: var(--yellow);

    font-size: 2rem;

    line-height: 1;
}


.upload-placeholder strong {
    font-size: 0.92rem;
}


.upload-placeholder small {
    margin-top: 4px;

    color: #77716a;

    font-size: 0.68rem;
}


#photoPreview {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: none;
}


.upload-slot.has-preview
#photoPreview {
    display: block;
}


.upload-slot.has-preview
.upload-placeholder {
    display: none;
}


.photo-upload-button {
    width: 100%;

    cursor: pointer;
}


.photo-upload-button:disabled,
.setup-next:disabled {
    opacity: 0.45;

    cursor: not-allowed;

    transform: none;

    box-shadow:
            4px 4px 0 var(--black);
}


/* EMPTY PHOTO */

.empty-photo {
    display: grid;

    place-items: center;

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

    border-style: dashed;

    color: #b3aea5;
}


.empty-photo span {
    font-size: 1.8rem;

    font-weight: 900;
}


/* ADVICE */

.photo-advice {
    display: grid;

    gap: 18px;
}


.photo-advice-card {
    padding: 27px;

    border:
            2px solid var(--black);

    background: var(--yellow);

    box-shadow:
            6px 6px 0 var(--black);

    transform:
            rotate(1deg);
}


.photo-advice-title {
    font-size: 0.68rem;

    letter-spacing: 0.11em;

    font-weight: 900;
}


.photo-advice-card h2 {
    margin-top: 13px;

    font-size: 2rem;

    line-height: 0.95;

    letter-spacing: -0.05em;
}


.photo-advice-card ul {
    margin:
            24px 0 0 19px;

    display: grid;

    gap: 11px;

    font-size: 0.82rem;
}


.photo-count-card {
    padding: 21px;

    border:
            2px solid var(--black);

    background: var(--white);

    display: flex;

    flex-direction: column;
}


.photo-count-card strong {
    font-size: 2.2rem;

    line-height: 1;
}


.photo-count-card span {
    margin-top: 5px;

    color: #77716a;

    font-size: 0.75rem;
}


/* BOTTOM ACTIONS */

.photo-bottom-actions {
    margin-top: 55px;

    padding-top: 25px;

    border-top:
            2px solid var(--black);

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;
}


/* TABLET */

@media (max-width: 950px) {

    .photo-content {
        grid-template-columns: 1fr;

        gap: 40px;
    }


    .photo-advice {
        grid-template-columns:
            1fr 180px;
    }

}


/* MOBILE */

@media (max-width: 650px) {

    .photo-setup-shell {
        padding-top: 40px;
    }


    .photo-heading h1 {
        font-size: 3.7rem;
    }


    .photo-grid {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 12px;
    }


    .photo-advice {
        grid-template-columns: 1fr;
    }


    .photo-bottom-actions {
        flex-direction: column-reverse;

        align-items: stretch;
    }


    .photo-bottom-actions form {
        width: 100%;
    }


    .photo-bottom-actions
    .setup-next {
        width: 100%;
    }


    .photo-bottom-actions
    .setup-back {
        text-align: center;
    }

}

/* =========================================================
   DASHBOARD
========================================================= */

.dashboard-page {
    min-height: 100vh;
    background: #f3eee5;
}


/* HEADER */

.dashboard-header {
    position: sticky;
    top: 0;

    z-index: 200;

    background: var(--cream);

    border-bottom:
            2px solid var(--black);
}


.dashboard-nav {
    min-height: 76px;

    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 30px;
}


.dashboard-navigation {
    display: flex;

    align-items: stretch;

    height: 76px;

    gap: 8px;
}


.dashboard-nav-link {
    padding: 0 17px;

    display: flex;

    align-items: center;

    position: relative;

    font-size: 0.84rem;

    font-weight: 900;
}


.dashboard-nav-link.active::after {
    content: "";

    position: absolute;

    left: 16px;
    right: 16px;
    bottom: -2px;

    height: 5px;

    background: var(--red);
}


.dashboard-account {
    position: relative;

    display: flex;

    justify-content: flex-end;
}


.dashboard-profile-button {
    display: flex;

    align-items: center;

    gap: 9px;

    padding: 6px 10px 6px 6px;

    border: 0;

    background: transparent;

    cursor: pointer;

    color: var(--black);

    font-weight: 900;
}


.dashboard-profile-button img {
    width: 40px;
    height: 40px;

    border-radius: 50%;

    object-fit: cover;

    border:
            2px solid var(--black);
}


.profile-chevron {
    font-size: 0.7rem;
}


/* ACCOUNT DROPDOWN */

.dashboard-account-menu {
    display: none;

    position: absolute;

    top: calc(100% + 12px);
    right: 0;

    width: 205px;

    background: var(--white);

    border:
            2px solid var(--black);

    box-shadow:
            5px 5px 0 var(--black);

    padding: 8px;
}


.dashboard-account-menu.open {
    display: flex;

    flex-direction: column;
}


.dashboard-account-menu a {
    padding: 10px 11px;

    font-size: 0.8rem;

    font-weight: 800;
}


.dashboard-account-menu a:hover {
    background: var(--yellow);
}


.account-menu-divider {
    height: 2px;

    margin: 5px 0;

    background: var(--black);
}


.dashboard-account-menu
.logout-link:hover {
    background: #ffd5d5;
}


/* LAYOUT */

.dashboard-main {
    padding:
            45px 0
            90px;
}


.dashboard-layout {
    display: grid;

    grid-template-columns:
        260px 1fr;

    gap: 50px;

    align-items: start;
}


/* SIDEBAR */

.dashboard-sidebar {
    display: grid;

    gap: 22px;
}


.my-profile-card {
    padding: 16px;

    background: var(--white);

    border:
            2px solid var(--black);

    box-shadow:
            5px 5px 0 var(--black);
}


.my-profile-photo {
    width: 100%;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    border:
            2px solid var(--black);
}


.my-profile-photo img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}


.my-profile-info {
    display: flex;

    flex-direction: column;

    margin-top: 13px;
}


.my-profile-info strong {
    font-size: 1.05rem;
}


.my-profile-info span {
    color: #77716a;

    font-size: 0.77rem;

    margin-top: 1px;
}


.edit-profile-link {
    display: inline-block;

    margin-top: 13px;

    font-size: 0.76rem;

    font-weight: 900;

    text-decoration: underline;
}


/* SIDEBAR MENU */

.dashboard-sidebar-menu {
    border:
            2px solid var(--black);

    background: var(--white);
}


.sidebar-menu-item {
    display: flex;

    align-items: center;

    gap: 12px;

    padding: 13px;

    border-bottom:
            2px solid var(--black);
}


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


.sidebar-menu-item:hover,
.sidebar-menu-item.active {
    background: var(--yellow);
}


.sidebar-menu-icon {
    width: 33px;
    height: 33px;

    flex-shrink: 0;

    border:
            2px solid var(--black);

    display: grid;

    place-items: center;

    background: white;

    font-weight: 900;
}


.sidebar-menu-item div {
    display: flex;

    flex-direction: column;
}


.sidebar-menu-item strong {
    font-size: 0.81rem;
}


.sidebar-menu-item small {
    color: #77716a;

    font-size: 0.65rem;
}


/* SAFETY */

.sidebar-safety {
    padding: 18px;

    border:
            2px solid var(--black);

    background: #dfeeff;
}


.sidebar-safety strong {
    font-size: 0.85rem;
}


.sidebar-safety p {
    margin-top: 5px;

    font-size: 0.72rem;

    color: #555;
}


.sidebar-safety a {
    display: inline-block;

    margin-top: 10px;

    font-size: 0.7rem;

    font-weight: 900;
}


/* MAIN CONTENT */

.dashboard-content {
    min-width: 0;
}


.dashboard-welcome {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 34px;
}


.dashboard-eyebrow {
    font-size: 0.7rem;

    letter-spacing: 0.12em;

    font-weight: 900;

    color: var(--red);
}


.dashboard-welcome h1 {
    margin-top: 6px;

    font-size:
            clamp(
                    2.5rem,
                    5vw,
                    4.8rem
            );

    line-height: 0.9;

    letter-spacing: -0.065em;
}


.dashboard-welcome p {
    margin-top: 13px;

    color: #6c6860;

    font-size: 0.94rem;
}


.discover-filter-button {
    padding: 10px 16px;

    border:
            2px solid var(--black);

    background: var(--white);

    box-shadow:
            3px 3px 0 var(--black);

    cursor: pointer;

    font-weight: 900;

    font-size: 0.78rem;
}


/* DISCOVERY GRID */

.discover-grid {
    display: grid;

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

    gap: 22px;
}


.discover-card {
    min-width: 0;

    background: var(--white);

    border:
            2px solid var(--black);

    box-shadow:
            5px 5px 0 var(--black);

    transition:
            transform 0.15s ease;
}


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


.discover-photo {
    position: relative;

    display: block;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    border-bottom:
            2px solid var(--black);

    background: #ddd;
}


.discover-photo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
            transform 0.35s ease;
}


.discover-card:hover
.discover-photo img {
    transform:
            scale(1.025);
}


.discover-photo-shade {
    position: absolute;

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

    height: 42%;

    background:
            linear-gradient(
                    transparent,
                    rgba(0, 0, 0, 0.72)
            );
}


.discover-basic-info {
    position: absolute;

    left: 17px;
    right: 17px;
    bottom: 15px;

    color: white;
}


.discover-basic-info h2 {
    font-size: 1.55rem;

    line-height: 1;

    letter-spacing: -0.04em;
}


.discover-basic-info span {
    display: block;

    margin-top: 4px;

    font-size: 0.76rem;
}


.discover-card-body {
    padding: 14px;
}


.discover-bio {
    min-height: 58px;

    color: #68635d;

    font-size: 0.78rem;

    line-height: 1.55;
}


/* DISCOVER ACTIONS */

.discover-actions {
    display: grid;

    grid-template-columns:
        43px 1fr 43px;

    gap: 8px;

    align-items: center;

    margin-top: 13px;
}


.discover-action {
    width: 43px;
    height: 43px;

    border:
            2px solid var(--black);

    background: white;

    cursor: pointer;

    display: grid;

    place-items: center;

    font-size: 1.3rem;

    font-weight: 900;

    box-shadow:
            2px 2px 0 var(--black);
}


.pass-action:hover {
    background: #dedede;
}


.like-action {
    color: var(--red);
}


.like-action:hover {
    background: #ffd5df;
}


.view-profile-button {
    height: 43px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
            2px solid var(--black);

    background: var(--yellow);

    font-size: 0.72rem;

    font-weight: 900;

    box-shadow:
            2px 2px 0 var(--black);
}


/* EMPTY DISCOVER */

.empty-discover {
    min-height: 450px;

    border:
            2px solid var(--black);

    background: var(--white);

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    padding: 50px 25px;

    box-shadow:
            6px 6px 0 var(--black);
}


.empty-discover-face {
    width: 80px;
    height: 80px;

    border:
            2px solid var(--black);

    border-radius: 50%;

    display: grid;

    place-items: center;

    background: var(--yellow);

    font-weight: 900;

    font-size: 1.4rem;

    transform:
            rotate(-6deg);
}


.empty-discover h2 {
    margin-top: 22px;

    font-size: 2.5rem;

    letter-spacing: -0.05em;
}


.empty-discover p {
    max-width: 400px;

    margin-top: 8px;

    color: #6e6962;
}


.empty-discover
.primary-button {
    margin-top: 25px;
}


/* DASHBOARD TABLET */

@media (max-width: 1050px) {

    .dashboard-layout {
        grid-template-columns:
            220px 1fr;

        gap: 30px;
    }


    .discover-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 800px) {

    .dashboard-nav {
        grid-template-columns:
            1fr auto;
    }


    .dashboard-navigation {
        display: none;
    }


    .dashboard-layout {
        grid-template-columns: 1fr;
    }


    .dashboard-sidebar {
        grid-template-columns:
            1fr 1fr;

        align-items: start;
    }


    .dashboard-sidebar-menu {
        align-self: stretch;
    }


    .sidebar-safety {
        display: none;
    }

}


/* DASHBOARD MOBILE */

@media (max-width: 600px) {

    .dashboard-main {
        padding-top: 25px;
    }


    .dashboard-profile-button span:not(
        .profile-chevron
    ) {
        display: none;
    }


    .dashboard-sidebar {
        grid-template-columns: 1fr;
    }


    .my-profile-card {
        display: grid;

        grid-template-columns:
            75px 1fr;

        column-gap: 14px;

        align-items: center;
    }


    .my-profile-photo {
        width: 75px;
        height: 75px;

        grid-row:
                1 / span 2;
    }


    .my-profile-info {
        margin-top: 0;
    }


    .edit-profile-link {
        margin-top: 4px;
    }


    .dashboard-sidebar-menu {
        display: grid;

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


    .sidebar-menu-item {
        border-bottom: 0;

        border-right:
                2px solid var(--black);

        flex-direction: column;

        gap: 5px;

        text-align: center;

        padding: 10px 5px;
    }


    .sidebar-menu-item:last-child {
        border-right: 0;
    }


    .sidebar-menu-item small {
        display: none;
    }


    .sidebar-menu-item strong {
        font-size: 0.66rem;
    }


    .dashboard-welcome {
        align-items: flex-start;

        flex-direction: column;
    }


    .dashboard-welcome h1 {
        font-size: 3rem;
    }


    .discover-filter-button {
        display: none;
    }


    .discover-grid {
        grid-template-columns: 1fr;
    }


    .discover-photo {
        aspect-ratio: 4 / 4.6;
    }

}

/* =========================================================
   LIKES / MATCHES
========================================================= */

.discover-action-form {
    margin: 0;
}


.new-match-banner {
    margin-bottom: 32px;

    padding: 15px;

    display: grid;

    grid-template-columns:
        62px 1fr auto;

    gap: 16px;

    align-items: center;

    border:
            2px solid var(--black);

    background: var(--yellow);

    box-shadow:
            5px 5px 0 var(--black);
}


.new-match-banner img {
    width: 62px;
    height: 62px;

    object-fit: cover;

    border:
            2px solid var(--black);

    border-radius: 50%;
}


.new-match-banner div {
    display: flex;

    flex-direction: column;
}


.new-match-banner span {
    color: var(--red);

    font-size: 0.67rem;

    font-weight: 900;

    letter-spacing: 0.12em;
}


.new-match-banner strong {
    margin-top: 2px;

    font-size: 1rem;
}


.match-banner-button {
    padding: 10px 14px;

    border:
            2px solid var(--black);

    background: var(--black);

    color: white;

    font-size: 0.73rem;

    font-weight: 900;
}


@media (max-width: 600px) {

    .new-match-banner {
        grid-template-columns:
            52px 1fr;
    }


    .new-match-banner img {
        width: 52px;
        height: 52px;
    }


    .match-banner-button {
        grid-column:
                1 / -1;

        text-align: center;
    }

}

/* =========================================================
   MATCHES PAGE
========================================================= */

.matches-heading {
    display: flex;

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

    gap: 35px;

    margin-bottom: 35px;
}


.matches-heading h1 {
    margin-top: 6px;

    font-size:
            clamp(
                    3rem,
                    6vw,
                    5.2rem
            );

    line-height: 0.88;

    letter-spacing: -0.07em;
}


.matches-heading p {
    margin-top: 15px;

    color: #69645e;

    font-size: 0.94rem;
}


.match-count-badge {
    min-width: 92px;

    padding: 14px;

    border:
            2px solid var(--black);

    background: var(--yellow);

    box-shadow:
            4px 4px 0 var(--black);

    text-align: center;

    transform:
            rotate(2deg);
}


.match-count-badge strong {
    display: block;

    font-size: 2rem;

    line-height: 1;
}


.match-count-badge span {
    display: block;

    margin-top: 4px;

    font-size: 0.68rem;

    font-weight: 900;

    text-transform: uppercase;
}


/* MATCH GRID */

.matches-grid {
    display: grid;

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

    gap: 25px;
}


.match-card {
    display: grid;

    grid-template-columns:
        175px 1fr;

    min-width: 0;

    background: var(--white);

    border:
            2px solid var(--black);

    box-shadow:
            5px 5px 0 var(--black);

    overflow: hidden;
}


.match-photo {
    position: relative;

    min-height: 260px;

    display: block;

    overflow: hidden;

    border-right:
            2px solid var(--black);
}


.match-photo img {
    width: 100%;
    height: 100%;

    position: absolute;

    inset: 0;

    object-fit: cover;

    display: block;

    transition:
            transform 0.25s ease;
}


.match-card:hover
.match-photo img {
    transform:
            scale(1.03);
}


.match-heart-badge {
    position: absolute;

    top: 12px;
    left: 12px;

    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    border:
            2px solid var(--black);

    border-radius: 50%;

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

    box-shadow:
            3px 3px 0 var(--black);

    font-size: 1rem;
}


/* MATCH INFO */

.match-card-content {
    min-width: 0;

    padding: 20px;

    display: flex;

    flex-direction: column;
}


.match-card-name {
    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 12px;
}


.match-card-name h2 {
    font-size: 1.55rem;

    line-height: 1;

    letter-spacing: -0.045em;
}


.match-card-name div > span {
    display: block;

    margin-top: 4px;

    color: #77716a;

    font-size: 0.75rem;
}


.match-mutual {
    padding: 5px 7px;

    border:
            2px solid var(--black);

    background: var(--yellow);

    font-size: 0.58rem;

    font-weight: 900;

    letter-spacing: 0.08em;
}


.match-bio {
    margin-top: 18px;

    color: #68635d;

    font-size: 0.78rem;

    line-height: 1.55;
}


.matched-date {
    margin-top: auto;

    padding-top: 18px;

    color: #99928a;

    font-size: 0.67rem;
}


/* MATCH BUTTONS */

.match-actions {
    margin-top: 12px;

    display: grid;

    grid-template-columns:
        1fr auto;

    gap: 8px;
}


.match-message-button {
    min-width: 0;

    padding: 11px 14px;

    font-size: 0.75rem;
}


.match-view-button {
    display: flex;

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

    padding: 9px 11px;

    border:
            2px solid var(--black);

    background: white;

    font-size: 0.69rem;

    font-weight: 900;

    box-shadow:
            2px 2px 0 var(--black);
}


.match-view-button:hover {
    background: var(--yellow);
}


/* EMPTY MATCHES */

.matches-empty {
    min-height: 520px;

    padding: 60px 30px;

    border:
            2px solid var(--black);

    background: var(--white);

    box-shadow:
            6px 6px 0 var(--black);

    display: flex;

    flex-direction: column;

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

    text-align: center;
}


.matches-empty-art {
    display: flex;

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

    margin-bottom: 28px;
}


.empty-person-circle {
    width: 75px;
    height: 75px;

    display: grid;
    place-items: center;

    border:
            2px solid var(--black);

    border-radius: 50%;

    background: var(--blue);

    font-size: 1.1rem;

    font-weight: 900;

    transform:
            rotate(-6deg);
}


.empty-person-circle.second {
    background: var(--pink);

    transform:
            rotate(6deg);
}


.empty-match-heart {
    width: 51px;
    height: 51px;

    margin:
            0 -8px;

    z-index: 2;

    display: grid;
    place-items: center;

    border:
            2px solid var(--black);

    border-radius: 50%;

    background: var(--red);

    color: white;

    font-size: 1.2rem;

    box-shadow:
            3px 3px 0 var(--black);
}


.matches-empty h2 {
    max-width: 600px;

    margin-top: 10px;

    font-size:
            clamp(
                    2.5rem,
                    5vw,
                    4.5rem
            );

    line-height: 0.92;

    letter-spacing: -0.06em;
}


.matches-empty p {
    max-width: 480px;

    margin-top: 17px;

    color: #6d6861;
}


.matches-empty
.primary-button {
    margin-top: 28px;
}


/* MATCHES TABLET */

@media (max-width: 1150px) {

    .matches-grid {
        grid-template-columns: 1fr;
    }

}


/* MATCHES MOBILE */

@media (max-width: 650px) {

    .matches-heading {
        align-items: flex-start;

        flex-direction: column;
    }


    .matches-heading h1 {
        font-size: 3.3rem;
    }


    .match-count-badge {
        min-width: 85px;
    }


    .match-card {
        grid-template-columns: 1fr;
    }


    .match-photo {
        min-height: auto;

        aspect-ratio: 4 / 4.4;

        border-right: 0;

        border-bottom:
                2px solid var(--black);
    }


    .match-actions {
        grid-template-columns: 1fr;
    }


    .match-view-button {
        min-height: 42px;
    }

}

/* =========================================================
   MESSAGES
========================================================= */

.messages-main {
    min-height:
            calc(100vh - 76px);

    background: #f3eee5;

    padding:
            35px 0
            60px;
}


.messages-shell {
    min-height:
            calc(100vh - 170px);

    display: grid;

    grid-template-columns:
        330px minmax(0, 1fr);

    border:
            2px solid var(--black);

    background: var(--white);

    box-shadow:
            7px 7px 0 var(--black);
}


/* =========================================================
   CONVERSATION LIST
========================================================= */

.conversation-list {
    min-width: 0;

    border-right:
            2px solid var(--black);

    background: var(--cream);
}


.conversation-list-heading {
    padding:
            25px 22px
            21px;

    border-bottom:
            2px solid var(--black);
}


.conversation-list-heading h1 {
    margin-top: 4px;

    font-size: 1.8rem;

    letter-spacing:
            -0.05em;
}


.conversation-items {
    max-height:
            calc(100vh - 240px);

    overflow-y: auto;
}


.conversation-item {
    min-width: 0;

    display: grid;

    grid-template-columns:
        57px minmax(0, 1fr);

    gap: 12px;

    align-items: center;

    padding: 14px;

    border-bottom:
            2px solid var(--black);

    transition:
            background 0.12s ease;
}


.conversation-item:hover {
    background:
            #fff8d4;
}


.conversation-item.active {
    background:
            var(--yellow);
}


.conversation-avatar {
    width: 57px;
    height: 57px;

    border:
            2px solid var(--black);

    border-radius: 50%;

    overflow: hidden;

    background: #ddd;
}


.conversation-avatar img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.conversation-preview {
    min-width: 0;
}


.conversation-preview-top {
    display: flex;

    justify-content:
            space-between;

    align-items: center;

    gap: 8px;
}


.conversation-preview-top strong {
    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    font-size: 0.86rem;
}


.conversation-preview p {
    margin-top: 4px;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    color: #78726b;

    font-size: 0.72rem;
}


.new-match-preview {
    color: var(--red) !important;

    font-weight: 800;
}


.unread-badge {
    min-width: 23px;
    height: 23px;

    padding: 0 6px;

    display: grid;

    place-items: center;

    border:
            2px solid var(--black);

    border-radius: 999px;

    background: var(--red);

    color: white;

    font-size: 0.63rem;

    font-weight: 900;
}


.no-conversations {
    padding: 30px 22px;
}


.no-conversations strong {
    display: block;
}


.no-conversations p {
    margin-top: 5px;

    color: #77716a;

    font-size: 0.8rem;
}


.no-conversations a {
    display: inline-block;

    margin-top: 15px;

    font-size: 0.75rem;

    font-weight: 900;

    text-decoration: underline;
}


/* =========================================================
   CHAT PANEL
========================================================= */

.chat-panel {
    min-width: 0;

    display: grid;

    grid-template-rows:
        auto 1fr auto;

    min-height:
            calc(100vh - 170px);

    background: #fffdf8;
}


.chat-header {
    min-height: 82px;

    padding: 13px 20px;

    border-bottom:
            2px solid var(--black);

    display: flex;

    align-items: center;

    justify-content:
            space-between;

    gap: 20px;
}


.chat-person {
    min-width: 0;

    display: flex;

    align-items: center;

    gap: 12px;
}


.chat-person img {
    width: 52px;
    height: 52px;

    flex-shrink: 0;

    border:
            2px solid var(--black);

    border-radius: 50%;

    object-fit: cover;
}


.chat-person div {
    min-width: 0;

    display: flex;

    flex-direction: column;
}


.chat-person strong {
    overflow: hidden;

    text-overflow:
            ellipsis;

    white-space: nowrap;
}


.chat-person span {
    color: #77716a;

    font-size: 0.72rem;

    margin-top: 2px;
}


.chat-view-profile {
    flex-shrink: 0;

    padding:
            8px 11px;

    border:
            2px solid var(--black);

    background: white;

    box-shadow:
            2px 2px 0 var(--black);

    font-size: 0.69rem;

    font-weight: 900;
}


.chat-view-profile:hover {
    background:
            var(--yellow);
}


/* =========================================================
   MESSAGE HISTORY
========================================================= */

.message-history {
    min-height: 0;

    overflow-y: auto;

    padding:
            30px 28px;

    background:
            #f7f3eb;
}


.start-conversation {
    min-height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding:
            40px 20px;
}


.start-conversation-photos {
    display: flex;

    align-items: center;

    justify-content: center;
}


.start-conversation-photos img {
    width: 86px;
    height: 86px;

    object-fit: cover;

    border:
            2px solid var(--black);

    border-radius: 50%;
}


.start-conversation-photos span {
    width: 48px;
    height: 48px;

    margin:
            0 -9px;

    z-index: 2;

    display: grid;

    place-items: center;

    border:
            2px solid var(--black);

    border-radius: 50%;

    background: var(--red);

    color: white;

    box-shadow:
            3px 3px 0 var(--black);
}


.start-conversation h2 {
    margin-top: 22px;

    font-size: 2rem;

    letter-spacing:
            -0.05em;
}


.start-conversation p {
    max-width: 400px;

    margin-top: 8px;

    color: #716c65;

    font-size: 0.88rem;
}


/* DATE */

.message-date {
    margin:
            20px 0;

    display: flex;

    align-items: center;

    gap: 12px;
}


.message-date::before,
.message-date::after {
    content: "";

    height: 1px;

    flex: 1;

    background: #d2cdc4;
}


.message-date span {
    color: #8b857d;

    font-size: 0.66rem;

    font-weight: 800;

    text-transform: uppercase;
}


/* MESSAGE */

.chat-message-row {
    display: flex;

    align-items: flex-end;

    gap: 8px;

    margin-bottom: 13px;
}


.chat-message-row.sent {
    justify-content:
            flex-end;
}


.message-avatar {
    width: 34px;
    height: 34px;

    flex-shrink: 0;

    border:
            2px solid var(--black);

    border-radius: 50%;

    object-fit: cover;
}


.message-bubble {
    max-width: 68%;

    padding:
            10px 13px
            7px;

    border:
            2px solid var(--black);

    box-shadow:
            2px 2px 0
            rgba(0, 0, 0, 0.15);
}


.received
.message-bubble {
    background:
            white;
}


.sent
.message-bubble {
    background:
            var(--red);

    color: white;
}


.message-bubble p {
    overflow-wrap:
            anywhere;

    font-size: 0.85rem;

    line-height: 1.5;
}


.message-meta {
    margin-top: 5px;

    display: flex;

    justify-content:
            flex-end;

    gap: 6px;

    opacity: 0.7;

    font-size: 0.58rem;
}


.message-read {
    font-weight: 900;
}


/* =========================================================
   COMPOSER
========================================================= */

.message-composer {
    padding: 14px;

    border-top:
            2px solid var(--black);

    background: var(--cream);
}


.message-composer textarea {
    width: 100%;

    min-height: 55px;
    max-height: 180px;

    resize: none;

    padding: 14px;

    border:
            2px solid var(--black);

    border-radius: 0;

    outline: none;

    background: white;

    font: inherit;

    line-height: 1.45;
}


.message-composer textarea:focus {
    box-shadow:
            3px 3px 0 var(--yellow);
}


.composer-footer {
    display: flex;

    align-items: center;

    justify-content:
            space-between;

    gap: 20px;

    margin-top: 9px;
}


#messageCount {
    color: #88827b;

    font-size: 0.65rem;
}


.send-message-button {
    min-width: 105px;

    padding:
            10px 15px;

    border:
            2px solid var(--black);

    background:
            var(--red);

    color: white;

    box-shadow:
            3px 3px 0 var(--black);

    cursor: pointer;

    font-weight: 900;
}


.send-message-button:hover {
    transform:
            translate(1px, 1px);

    box-shadow:
            2px 2px 0 var(--black);
}


.send-message-button span {
    margin-left: 5px;
}


/* ERRORS */

.chat-errors {
    padding: 10px 15px;

    border-bottom:
            2px solid var(--black);

    background:
            #ffd8da;

    font-size: 0.77rem;

    font-weight: 800;
}


/* =========================================================
   EMPTY CHAT
========================================================= */

.empty-chat-panel {
    grid-row:
            1 / -1;

    min-height: 600px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    padding:
            40px;
}


.empty-chat-icon {
    width: 75px;
    height: 75px;

    display: grid;

    place-items: center;

    border:
            2px solid var(--black);

    border-radius: 50%;

    background: var(--yellow);

    box-shadow:
            4px 4px 0 var(--black);

    font-size: 2rem;
}


.empty-chat-panel h2 {
    margin-top: 25px;

    font-size: 2.5rem;

    letter-spacing:
            -0.055em;
}


.empty-chat-panel p {
    max-width: 430px;

    margin-top: 10px;

    color: #706b64;
}


.empty-chat-panel
.primary-button {
    margin-top: 25px;
}


/* =========================================================
   MESSAGES TABLET
========================================================= */

@media (max-width: 850px) {

    .messages-shell {
        grid-template-columns:
            260px minmax(0, 1fr);
    }


    .conversation-list-heading {
        padding:
                20px 15px;
    }


    .conversation-item {
        grid-template-columns:
            48px minmax(0, 1fr);

        padding: 11px;
    }


    .conversation-avatar {
        width: 48px;
        height: 48px;
    }


    .message-bubble {
        max-width: 78%;
    }

}


/* =========================================================
   MESSAGES MOBILE
========================================================= */

@media (max-width: 650px) {

    .messages-main {
        padding:
                0 0 30px;
    }


    .messages-shell {
        width: 100%;

        min-height:
                calc(100vh - 76px);

        grid-template-columns: 1fr;

        border-left: 0;
        border-right: 0;

        box-shadow: none;
    }


    .conversation-list {
        border-right: 0;

        border-bottom:
                2px solid var(--black);
    }


    .conversation-list-heading {
        display: none;
    }


    .conversation-items {
        display: flex;

        max-height: none;

        overflow-x: auto;
        overflow-y: hidden;
    }


    .conversation-item {
        min-width: 88px;

        grid-template-columns: 1fr;

        justify-items: center;

        border-bottom: 0;

        border-right:
                2px solid var(--black);

        text-align: center;
    }


    .conversation-avatar {
        width: 52px;
        height: 52px;
    }


    .conversation-preview {
        width: 100%;
    }


    .conversation-preview-top {
        justify-content:
                center;
    }


    .conversation-preview-top
    strong {
        max-width: 76px;

        font-size: 0.68rem;
    }


    .conversation-preview p {
        display: none;
    }


    .unread-badge {
        position: absolute;

        margin:
                -43px 0 0 37px;
    }


    .chat-panel {
        min-height:
                calc(100vh - 190px);
    }


    .chat-header {
        padding:
                10px 12px;
    }


    .chat-person img {
        width: 45px;
        height: 45px;
    }


    .chat-view-profile {
        font-size: 0.62rem;
    }


    .message-history {
        min-height: 440px;

        padding:
                20px 12px;
    }


    .message-bubble {
        max-width: 82%;
    }


    .message-composer {
        position: sticky;

        bottom: 0;

        z-index: 20;
    }

}

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

.login-main {
    min-height:
            calc(100vh - 78px);
}


.login-layout {
    min-height:
            calc(100vh - 78px);

    display: grid;

    grid-template-columns:
        1fr 0.9fr;

    gap: 110px;

    align-items: center;

    padding-top: 65px;
    padding-bottom: 75px;
}


/* INTRO */

.login-intro {
    max-width: 570px;
}


.login-intro h1 {
    font-size:
            clamp(
                    4rem,
                    7vw,
                    7rem
            );

    line-height: 0.84;

    letter-spacing: -0.075em;
}


.login-intro h1 span {
    color: var(--red);
}


.login-intro > p {
    max-width: 470px;

    margin-top: 30px;

    color: #66615b;

    font-size: 1.05rem;
}


/* DECORATION */

.login-decoration {
    display: flex;

    align-items: center;

    margin-top: 48px;
}


.login-person {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 7px;

    font-size: 0.72rem;

    font-weight: 900;
}


.login-person-face {
    width: 78px;
    height: 78px;

    display: grid;

    place-items: center;

    border:
            2px solid var(--black);

    border-radius: 50%;

    box-shadow:
            4px 4px 0 var(--black);

    font-weight: 900;
}


.login-person-one
.login-person-face {
    background: var(--blue);

    transform:
            rotate(-6deg);
}


.login-person-two
.login-person-face {
    background: var(--pink);

    transform:
            rotate(6deg);
}


.login-heart {
    width: 55px;
    height: 55px;

    margin:
            0 8px 20px;

    display: grid;

    place-items: center;

    border:
            2px solid var(--black);

    border-radius: 50%;

    background: var(--red);

    color: white;

    box-shadow:
            3px 3px 0 var(--black);

    font-size: 1.2rem;
}


/* LOGIN CARD */

.login-form-wrapper {
    width: 100%;
}


.login-card {
    width: 100%;

    max-width: 510px;

    margin-left: auto;

    padding: 42px;

    border:
            2px solid var(--black);

    background: var(--white);

    box-shadow:
            9px 9px 0 var(--black);
}


.login-card-heading {
    margin-bottom: 30px;
}


.login-card-heading h2 {
    font-size: 2.2rem;

    line-height: 1;

    letter-spacing: -0.05em;
}


.login-card-heading p {
    margin-top: 7px;

    color: #77716a;
}


.login-password-label {
    display: flex;

    align-items: center;

    justify-content:
            space-between;

    gap: 20px;
}


.login-password-label a {
    font-size: 0.72rem;

    font-weight: 900;

    text-decoration: underline;
}


.login-submit {
    width: 100%;

    cursor: pointer;

    font-size: 1rem;

    margin-top: 4px;
}


/* DIVIDER */

.login-divider {
    display: flex;

    align-items: center;

    gap: 12px;

    margin:
            4px 0;
}


.login-divider::before,
.login-divider::after {
    content: "";

    height: 1px;

    flex: 1;

    background: #d3cec6;
}


.login-divider span {
    color: #817b74;

    font-size: 0.69rem;

    font-weight: 800;

    text-transform: uppercase;
}


/* CREATE ACCOUNT */

.create-account-button {
    min-height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 10px;

    border:
            2px solid var(--black);

    background: white;

    box-shadow:
            3px 3px 0 var(--black);

    font-size: 0.8rem;

    font-weight: 900;

    text-align: center;
}


.create-account-button:hover {
    background: var(--yellow);
}


.login-safety-note {
    margin-top: 22px;

    color: #88827b;

    font-size: 0.7rem;

    text-align: center;
}


/* TABLET */

@media (max-width: 900px) {

    .login-layout {
        grid-template-columns: 1fr;

        gap: 55px;
    }


    .login-intro {
        margin: auto;

        text-align: center;
    }


    .login-intro > p {
        margin-left: auto;
        margin-right: auto;
    }


    .login-decoration {
        justify-content: center;
    }


    .login-card {
        margin: auto;
    }

}


/* MOBILE */

@media (max-width: 600px) {

    .login-layout {
        padding-top: 40px;
        padding-bottom: 55px;

        gap: 40px;
    }


    .login-intro h1 {
        font-size: 3.8rem;
    }


    .login-decoration {
        margin-top: 35px;
    }


    .login-person-face {
        width: 65px;
        height: 65px;
    }


    .login-card {
        padding: 28px 20px;

        box-shadow:
                6px 6px 0 var(--black);
    }


    .login-card-heading h2 {
        font-size: 1.8rem;
    }

}

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

.member-profile-main {
    min-height:
            calc(100vh - 76px);

    padding:
            45px 0 90px;

    background:
            #f3eee5;
}


.profile-back-link {
    display: inline-block;

    margin-bottom: 25px;

    font-size: 0.78rem;

    font-weight: 900;

    text-decoration: underline;
}


.member-profile-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 560px)
        minmax(0, 1fr);

    gap: 65px;

    align-items: start;
}


/* PHOTOS */

.member-main-photo {
    width: 100%;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    border:
            2px solid var(--black);

    background: #ddd;

    box-shadow:
            7px 7px 0 var(--black);
}


.member-main-photo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.member-photo-thumbnails {
    display: grid;

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

    gap: 9px;

    margin-top: 18px;
}


.profile-thumbnail {
    aspect-ratio: 1 / 1;

    padding: 0;

    overflow: hidden;

    border:
            2px solid var(--black);

    background: white;

    cursor: pointer;
}


.profile-thumbnail img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.profile-thumbnail.active {
    outline:
            4px solid var(--yellow);

    outline-offset: 2px;
}


/* DETAILS */

.member-profile-details {
    padding-top: 15px;
}


.profile-match-label {
    display: inline-block;

    margin-bottom: 18px;

    padding: 7px 10px;

    border:
            2px solid var(--black);

    background: var(--yellow);

    box-shadow:
            3px 3px 0 var(--black);

    color: var(--red);

    font-size: 0.7rem;

    font-weight: 900;

    letter-spacing: 0.08em;

    transform:
            rotate(-1deg);
}


.member-profile-details h1 {
    font-size:
            clamp(
                    3.7rem,
                    7vw,
                    6.5rem
            );

    line-height: 0.85;

    letter-spacing: -0.075em;
}


.profile-location {
    margin-top: 15px;

    color: #6d6861;

    font-size: 1.05rem;

    font-weight: 700;
}


.profile-divider {
    height: 2px;

    margin:
            35px 0;

    background: var(--black);
}


.profile-section-label {
    display: block;

    margin-bottom: 12px;

    color: var(--red);

    font-size: 0.7rem;

    font-weight: 900;

    letter-spacing: 0.11em;
}


.profile-about p {
    max-width: 650px;

    font-size: 1.05rem;

    line-height: 1.75;
}


/* FACTS */

.profile-facts {
    margin-top: 35px;

    display: grid;

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

    border:
            2px solid var(--black);
}


.profile-facts > div {
    min-width: 0;

    padding: 15px;

    border-right:
            2px solid var(--black);

    background: var(--white);

    display: flex;

    flex-direction: column;
}


.profile-facts > div:last-child {
    border-right: 0;
}


.profile-facts span {
    color: #827c74;

    font-size: 0.65rem;

    text-transform: uppercase;

    font-weight: 800;
}


.profile-facts strong {
    margin-top: 4px;

    font-size: 0.85rem;

    overflow-wrap: anywhere;
}


/* ACTIONS */

.member-profile-actions {
    margin-top: 35px;

    padding-top: 25px;

    border-top:
            2px solid var(--black);

    display: flex;

    gap: 12px;

    align-items: stretch;
}


.member-profile-actions form {
    flex: 1;
}


.member-pass-button,
.member-like-button {
    width: 100%;

    min-height: 54px;

    border:
            2px solid var(--black);

    cursor: pointer;

    font: inherit;

    font-weight: 900;

    box-shadow:
            4px 4px 0 var(--black);
}


.member-pass-button {
    background: white;
}


.member-pass-button:hover {
    background: #dedede;
}


.member-like-button {
    background: var(--red);

    color: white;
}


.member-like-button:hover {
    transform:
            translate(1px, 1px);

    box-shadow:
            3px 3px 0 var(--black);
}


.member-message-button {
    width: 100%;
}


.already-liked,
.already-passed {
    width: 100%;

    padding: 17px;

    border:
            2px solid var(--black);

    font-size: 0.83rem;

    font-weight: 900;
}


.already-liked {
    background: var(--yellow);
}


.already-liked span {
    color: var(--red);

    margin-right: 5px;
}


.already-passed {
    background: #e4e0da;

    color: #69645e;
}


.profile-safety-links {
    display: flex;

    gap: 10px;

    margin-top: 20px;

    color: #77716a;

    font-size: 0.7rem;
}


.profile-safety-links a {
    text-decoration: underline;
}


/* TABLET */

@media (max-width: 900px) {

    .member-profile-layout {
        grid-template-columns:
            minmax(0, 480px)
            minmax(0, 1fr);

        gap: 35px;
    }


    .profile-facts {
        grid-template-columns: 1fr;
    }


    .profile-facts > div {
        border-right: 0;

        border-bottom:
                2px solid var(--black);
    }


    .profile-facts > div:last-child {
        border-bottom: 0;
    }

}


/* MOBILE */

@media (max-width: 700px) {

    .member-profile-main {
        padding-top: 25px;
    }


    .member-profile-layout {
        grid-template-columns: 1fr;

        gap: 38px;
    }


    .member-main-photo {
        box-shadow:
                5px 5px 0 var(--black);
    }


    .member-photo-thumbnails {
        grid-template-columns:
            repeat(6, minmax(58px, 1fr));

        overflow-x: auto;

        padding-bottom: 5px;
    }


    .member-profile-details h1 {
        font-size: 4rem;
    }


    .member-profile-actions {
        flex-direction: column;
    }

}

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

.edit-profile-main {
    min-height:
            calc(100vh - 76px);

    background: #f3eee5;

    padding:
            45px 0
            90px;
}


.edit-profile-layout {
    display: grid;

    grid-template-columns:
        260px minmax(0, 1fr);

    gap: 55px;

    align-items: start;
}


/* SIDEBAR */

.edit-profile-sidebar {
    display: grid;

    gap: 20px;
}


.edit-profile-preview {
    padding: 15px;

    border:
            2px solid var(--black);

    background:
            var(--white);

    box-shadow:
            5px 5px 0 var(--black);
}


.edit-profile-photo {
    width: 100%;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    border:
            2px solid var(--black);
}


.edit-profile-photo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.edit-profile-preview-info {
    margin-top: 12px;

    display: flex;

    flex-direction: column;
}


.edit-profile-preview-info strong {
    font-size: 1rem;
}


.edit-profile-preview-info span {
    margin-top: 2px;

    color: #77716a;

    font-size: 0.75rem;
}


.edit-photo-link {
    display: inline-block;

    margin-top: 13px;

    font-size: 0.72rem;

    font-weight: 900;

    text-decoration: underline;
}


.edit-sidebar-links {
    border:
            2px solid var(--black);

    background: var(--white);
}


.edit-sidebar-links a {
    display: block;

    padding: 13px;

    border-bottom:
            2px solid var(--black);

    font-size: 0.78rem;

    font-weight: 900;
}


.edit-sidebar-links a:last-child {
    border-bottom: 0;
}


.edit-sidebar-links a:hover,
.edit-sidebar-links a.active {
    background: var(--yellow);
}


/* HEADING */

.edit-profile-content {
    min-width: 0;
}


.edit-profile-heading {
    max-width: 750px;

    margin-bottom: 35px;
}


.edit-profile-heading h1 {
    margin-top: 5px;

    font-size:
            clamp(
                    3.1rem,
                    6vw,
                    5.3rem
            );

    line-height: 0.9;

    letter-spacing: -0.065em;
}


.edit-profile-heading p {
    max-width: 600px;

    margin-top: 15px;

    color: #69645e;
}


/* SUCCESS */

.profile-save-success {
    margin-bottom: 28px;

    padding: 15px 17px;

    border:
            2px solid var(--black);

    background:
            #c9f2cf;

    box-shadow:
            4px 4px 0 var(--black);

    font-size: 0.82rem;
}


.profile-save-success strong {
    margin-right: 5px;
}


/* FORM */

.edit-profile-form {
    display: grid;

    gap: 26px;
}


.edit-form-section {
    border:
            2px solid var(--black);

    background:
            var(--white);

    box-shadow:
            5px 5px 0 var(--black);
}


.edit-form-section-heading {
    padding: 20px;

    border-bottom:
            2px solid var(--black);

    display: grid;

    grid-template-columns:
        44px 1fr;

    gap: 14px;

    align-items: start;

    background: var(--cream);
}


.edit-form-section-heading > span {
    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    border:
            2px solid var(--black);

    border-radius: 50%;

    background: var(--yellow);

    font-size: 0.7rem;

    font-weight: 900;
}


.edit-form-section-heading h2 {
    font-size: 1.35rem;

    line-height: 1;
}


.edit-form-section-heading p {
    margin-top: 5px;

    color: #767169;

    font-size: 0.75rem;
}


.edit-form-fields {
    padding: 24px;

    display: grid;

    gap: 28px;
}


.readonly-profile-field {
    min-height: 52px;

    padding:
            0 15px;

    display: flex;

    align-items: center;

    border:
            2px solid #aaa59e;

    background: #ece8e1;

    color: #625e58;

    font-weight: 800;
}


/* SAVE BAR */

.edit-profile-save-bar {
    position: sticky;

    bottom: 15px;

    z-index: 30;

    padding: 14px;

    border:
            2px solid var(--black);

    background:
            rgba(246, 241, 232, 0.96);

    backdrop-filter:
            blur(10px);

    box-shadow:
            5px 5px 0 var(--black);

    display: flex;

    align-items: center;

    justify-content:
            space-between;

    gap: 20px;
}


.edit-profile-cancel {
    padding: 10px;

    font-size: 0.78rem;

    font-weight: 900;

    text-decoration: underline;
}


.edit-profile-save {
    min-width: 170px;

    cursor: pointer;
}


/* TABLET */

@media (max-width: 850px) {

    .edit-profile-layout {
        grid-template-columns: 1fr;

        gap: 35px;
    }


    .edit-profile-sidebar {
        grid-template-columns:
            220px 1fr;
    }


    .edit-sidebar-links {
        align-self: start;
    }

}


/* MOBILE */

@media (max-width: 600px) {

    .edit-profile-main {
        padding-top: 25px;
    }


    .edit-profile-layout {
        gap: 28px;
    }


    .edit-profile-sidebar {
        grid-template-columns: 1fr;
    }


    .edit-profile-preview {
        display: grid;

        grid-template-columns:
            75px 1fr;

        column-gap: 14px;

        align-items: center;
    }


    .edit-profile-photo {
        width: 75px;
        height: 75px;

        grid-row:
                1 / span 2;
    }


    .edit-profile-preview-info {
        margin-top: 0;
    }


    .edit-photo-link {
        margin-top: 4px;
    }


    .edit-sidebar-links {
        display: grid;

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


    .edit-sidebar-links a {
        border-bottom: 0;

        border-right:
                2px solid var(--black);

        text-align: center;

        font-size: 0.66rem;
    }


    .edit-sidebar-links a:nth-child(3) {
        border-right: 0;
    }


    .edit-sidebar-links a:last-child {
        display: none;
    }


    .edit-profile-heading h1 {
        font-size: 3.4rem;
    }


    .edit-form-section-heading {
        grid-template-columns:
            38px 1fr;

        padding: 16px;
    }


    .edit-form-fields {
        padding: 18px;
    }


    .edit-profile-save-bar {
        bottom: 8px;
    }

}

/* =========================================================
   LIKES PAGE
========================================================= */

.likes-heading {
    display: flex;

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

    gap: 35px;

    margin-bottom: 35px;
}


.likes-heading h1 {
    max-width: 720px;

    margin-top: 6px;

    font-size:
            clamp(
                    3rem,
                    6vw,
                    5rem
            );

    line-height: 0.88;

    letter-spacing: -0.07em;
}


.likes-heading p {
    margin-top: 15px;

    color: #69645e;

    font-size: 0.94rem;
}


.likes-count-sticker {
    min-width: 95px;

    padding: 15px;

    border:
            2px solid var(--black);

    background: var(--pink);

    box-shadow:
            4px 4px 0 var(--black);

    text-align: center;

    transform:
            rotate(2deg);
}


.likes-count-sticker strong {
    display: block;

    font-size: 2rem;

    line-height: 1;
}


.likes-count-sticker span {
    display: block;

    margin-top: 4px;

    font-size: 0.65rem;

    font-weight: 900;

    text-transform: uppercase;
}


/* GRID */

.likes-grid {
    display: grid;

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

    gap: 23px;
}


.like-card {
    min-width: 0;

    border:
            2px solid var(--black);

    background:
            var(--white);

    box-shadow:
            5px 5px 0 var(--black);
}


.like-card-photo {
    position: relative;

    display: block;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    border-bottom:
            2px solid var(--black);

    background: #ddd;
}


.like-card-photo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
            transform 0.3s ease;
}


.like-card:hover
.like-card-photo img {
    transform:
            scale(1.025);
}


.like-photo-shade {
    position: absolute;

    inset:
            auto 0 0 0;

    height: 45%;

    background:
            linear-gradient(
                    transparent,
                    rgba(0, 0, 0, 0.75)
            );
}


.like-photo-info {
    position: absolute;

    left: 16px;
    right: 16px;
    bottom: 15px;

    color: white;
}


.like-photo-info h2 {
    font-size: 1.5rem;

    line-height: 1;

    letter-spacing:
            -0.045em;
}


.like-photo-info span {
    display: block;

    margin-top: 4px;

    font-size: 0.75rem;
}


.likes-you-label {
    position: absolute;

    top: 12px;
    left: 12px;

    padding:
            6px 8px;

    border:
            2px solid var(--black);

    background:
            var(--yellow);

    color:
            var(--red);

    box-shadow:
            3px 3px 0 var(--black);

    font-size: 0.62rem;

    font-weight: 900;

    letter-spacing: 0.07em;
}


/* CONTENT */

.like-card-content {
    padding: 15px;
}


.like-card-content > p {
    min-height: 62px;

    color: #69645e;

    font-size: 0.78rem;

    line-height: 1.55;
}


.like-card-actions {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 8px;

    margin-top: 14px;
}


.like-card-actions form {
    min-width: 0;
}


.like-pass-button,
.like-back-button {
    width: 100%;

    min-height: 44px;

    border:
            2px solid var(--black);

    box-shadow:
            2px 2px 0 var(--black);

    cursor: pointer;

    font: inherit;

    font-size: 0.72rem;

    font-weight: 900;
}


.like-pass-button {
    background: white;
}


.like-pass-button:hover {
    background: #dedede;
}


.like-back-button {
    background:
            var(--red);

    color: white;
}


.like-back-button:hover {
    transform:
            translate(1px, 1px);

    box-shadow:
            1px 1px 0 var(--black);
}


.like-view-profile {
    display: block;

    margin-top: 13px;

    text-align: center;

    font-size: 0.7rem;

    font-weight: 900;

    text-decoration: underline;
}


/* EMPTY */

.likes-empty {
    min-height: 520px;

    padding:
            60px 30px;

    border:
            2px solid var(--black);

    background:
            var(--white);

    box-shadow:
            6px 6px 0 var(--black);

    display: flex;

    flex-direction: column;

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

    text-align: center;
}


.likes-empty-heart {
    width: 80px;
    height: 80px;

    margin-bottom: 28px;

    display: grid;

    place-items: center;

    border:
            2px solid var(--black);

    border-radius: 50%;

    background: var(--pink);

    color: var(--red);

    box-shadow:
            4px 4px 0 var(--black);

    font-size: 1.6rem;

    transform:
            rotate(-5deg);
}


.likes-empty h2 {
    margin-top: 10px;

    font-size:
            clamp(
                    2.5rem,
                    5vw,
                    4.5rem
            );

    line-height: 0.92;

    letter-spacing:
            -0.06em;
}


.likes-empty p {
    max-width: 470px;

    margin-top: 15px;

    color: #6e6962;
}


.likes-empty-actions {
    margin-top: 27px;

    display: flex;

    align-items: center;

    gap: 20px;
}


.likes-edit-profile {
    font-size: 0.78rem;

    font-weight: 900;

    text-decoration: underline;
}


/* TABLET */

@media (max-width: 1100px) {

    .likes-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


/* MOBILE */

@media (max-width: 650px) {

    .likes-heading {
        align-items: flex-start;

        flex-direction: column;
    }


    .likes-heading h1 {
        font-size: 3.3rem;
    }


    .likes-grid {
        grid-template-columns: 1fr;
    }


    .like-card-photo {
        aspect-ratio: 4 / 4.5;
    }


    .likes-empty-actions {
        flex-direction: column;

        width: 100%;
    }


    .likes-empty-actions
    .primary-button {
        width: 100%;
    }

}

/* =========================================================
   SETTINGS
========================================================= */

.settings-main {
    min-height:
            calc(100vh - 76px);

    padding:
            50px 0
            100px;

    background:
            #f3eee5;
}


.settings-layout {
    display: grid;

    grid-template-columns:
        245px minmax(0, 1fr);

    gap: 55px;

    align-items: start;
}


/* SIDEBAR */

.settings-sidebar {
    position: sticky;

    top: 120px;
}


.settings-sidebar h1 {
    margin-top: 5px;

    font-size: 3.5rem;

    line-height: 0.9;

    letter-spacing: -0.065em;
}


.settings-nav {
    margin-top: 28px;

    display: flex;

    flex-direction: column;

    border:
            2px solid var(--black);

    background:
            var(--white);
}


.settings-nav a {
    padding: 13px;

    border-bottom:
            2px solid var(--black);

    font-size: 0.78rem;

    font-weight: 900;
}


.settings-nav a:last-child {
    border-bottom: 0;
}


.settings-nav a:hover {
    background:
            var(--yellow);
}


.settings-nav
.danger-link {
    color: #b4292d;
}


.settings-nav
.danger-link:hover {
    background:
            #ffd9da;
}


.settings-back {
    display: inline-block;

    margin-top: 22px;

    font-size: 0.75rem;

    font-weight: 900;

    text-decoration: underline;
}


/* CONTENT */

.settings-content {
    min-width: 0;

    display: grid;

    gap: 28px;
}


.settings-card {
    border:
            2px solid var(--black);

    background:
            var(--white);

    box-shadow:
            5px 5px 0 var(--black);
}


.settings-card-heading {
    padding: 20px;

    border-bottom:
            2px solid var(--black);

    background:
            var(--cream);

    display: grid;

    grid-template-columns:
        42px 1fr;

    gap: 15px;

    align-items: start;
}


.settings-card-heading > span {
    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    border:
            2px solid var(--black);

    border-radius: 50%;

    background:
            var(--yellow);

    font-size: 0.68rem;

    font-weight: 900;
}


.settings-card-heading h2 {
    font-size: 1.35rem;

    line-height: 1;
}


.settings-card-heading p {
    margin-top: 5px;

    color: #746f68;

    font-size: 0.76rem;
}


/* FORM */

.settings-form {
    padding: 24px;

    display: grid;

    gap: 24px;
}


.settings-two-column {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 18px;
}


.settings-form-actions {
    padding-top: 20px;

    border-top:
            2px solid var(--black);

    display: flex;

    justify-content: flex-end;
}


.settings-save-button {
    min-height: 44px;

    padding:
            9px 17px;

    border:
            2px solid var(--black);

    background:
            var(--yellow);

    box-shadow:
            3px 3px 0 var(--black);

    cursor: pointer;

    font: inherit;

    font-size: 0.76rem;

    font-weight: 900;
}


.settings-save-button:hover {
    transform:
            translate(1px, 1px);

    box-shadow:
            2px 2px 0 var(--black);
}


/* VISIBILITY */

.visibility-toggle {
    display: grid;

    grid-template-columns:
        auto 1fr;

    gap: 15px;

    align-items: center;

    cursor: pointer;
}


.visibility-toggle input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


.visibility-switch {
    width: 58px;
    height: 32px;

    position: relative;

    border:
            2px solid var(--black);

    border-radius: 999px;

    background:
            #d4d0c9;

    transition:
            background 0.15s ease;
}


.visibility-switch::after {
    content: "";

    width: 22px;
    height: 22px;

    position: absolute;

    top: 3px;
    left: 4px;

    border:
            2px solid var(--black);

    border-radius: 50%;

    background:
            white;

    transition:
            transform 0.15s ease;
}


.visibility-toggle
input:checked +
.visibility-switch {
    background:
            var(--red);
}


.visibility-toggle
input:checked +
.visibility-switch::after {
    transform:
            translateX(25px);
}


.visibility-copy {
    display: flex;

    flex-direction: column;
}


.visibility-copy strong {
    font-size: 0.88rem;
}


.visibility-copy small {
    max-width: 570px;

    margin-top: 4px;

    color: #77716a;

    font-size: 0.73rem;

    line-height: 1.45;
}


/* DELETE */

.danger-settings-card {
    border-color:
            #8d2024;
}


.danger-settings-card
.settings-card-heading {
    background:
            #ffe1e2;
}


.danger-settings-card
.settings-card-heading > span {
    background:
            #ffb8ba;
}


.delete-warning {
    padding: 16px;

    border-left:
            5px solid #be3035;

    background:
            #fff0f0;
}


.delete-warning strong {
    color: #9d2428;

    font-size: 0.86rem;
}


.delete-warning p {
    margin-top: 4px;

    color: #6e5556;

    font-size: 0.75rem;
}


.delete-account-button {
    min-height: 44px;

    padding:
            9px 17px;

    border:
            2px solid var(--black);

    background:
            #c83439;

    color: white;

    box-shadow:
            3px 3px 0 var(--black);

    cursor: pointer;

    font: inherit;

    font-size: 0.76rem;

    font-weight: 900;
}


.delete-account-button:hover {
    background:
            #a92327;
}


/* TABLET */

@media (max-width: 850px) {

    .settings-layout {
        grid-template-columns: 1fr;

        gap: 35px;
    }


    .settings-sidebar {
        position: static;
    }


    .settings-nav {
        display: grid;

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


    .settings-nav a {
        border-bottom: 0;

        border-right:
                2px solid var(--black);

        text-align: center;
    }


    .settings-nav a:last-child {
        border-right: 0;
    }

}


/* MOBILE */

@media (max-width: 600px) {

    .settings-main {
        padding-top: 30px;
    }


    .settings-sidebar h1 {
        font-size: 3rem;
    }


    .settings-nav {
        grid-template-columns:
            1fr 1fr;
    }


    .settings-nav a {
        border-right:
                2px solid var(--black);

        border-bottom:
                2px solid var(--black);
    }


    .settings-nav a:nth-child(2n) {
        border-right: 0;
    }


    .settings-nav a:nth-last-child(-n + 2) {
        border-bottom: 0;
    }


    .settings-two-column {
        grid-template-columns: 1fr;
    }


    .settings-card-heading {
        padding: 16px;
    }


    .settings-form {
        padding: 18px;
    }


    .visibility-toggle {
        align-items: start;
    }

}

/* =========================================================
   REPORTING / BLOCKING
========================================================= */

.report-main,
.blocked-main {
    min-height: calc(100vh - 76px);
    padding: 50px 0 90px;
    background: #f3eee5;
}


.report-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 650px);
    justify-content: center;
    gap: 45px;
    align-items: start;
}


.report-profile {
    border: 2px solid var(--black);
    background: var(--white);
    box-shadow: 5px 5px 0 var(--black);
}


.report-profile img {
    width: 100%;
    aspect-ratio: 1 / 1.1;
    object-fit: cover;
    display: block;
    border-bottom: 2px solid var(--black);
}


.report-profile > div {
    padding: 15px;
    display: flex;
    flex-direction: column;
}


.report-profile span {
    color: var(--red);
    font-size: 0.63rem;
    font-weight: 900;
    text-transform: uppercase;
}


.report-profile strong {
    margin-top: 4px;
    font-size: 1.2rem;
}


.report-profile small {
    margin-top: 3px;
    color: #77716a;
}


.report-card {
    padding: 32px;
    border: 2px solid var(--black);
    background: var(--white);
    box-shadow: 7px 7px 0 var(--black);
}


.report-card h1 {
    margin-top: 7px;
    font-size: clamp(2.8rem, 5vw, 4.5rem);
    line-height: 0.9;
    letter-spacing: -0.065em;
}


.report-intro {
    margin-top: 15px;
    color: #6d6861;
}


.report-form {
    margin-top: 30px;
    display: grid;
    gap: 25px;
}


.report-reasons {
    border: 0;
    padding: 0;
}


.report-reasons legend {
    margin-bottom: 12px;
    font-weight: 900;
}


.report-reason-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    margin-bottom: 8px;
    border: 2px solid var(--black);
    background: var(--cream);
    cursor: pointer;
}


.report-reason-option:has(input:checked) {
    background: var(--yellow);
}


.report-block-choice {
    padding: 15px;
    border: 2px solid var(--black);
    background: #fff0f0;
    display: flex;
    gap: 12px;
    cursor: pointer;
}


.report-block-choice span {
    display: flex;
    flex-direction: column;
}


.report-block-choice small {
    margin-top: 3px;
    color: #726b66;
}


.submit-report-button,
.block-only-button,
.unblock-button {
    min-height: 46px;
    padding: 10px 16px;
    border: 2px solid var(--black);
    box-shadow: 3px 3px 0 var(--black);
    cursor: pointer;
    font: inherit;
    font-weight: 900;
}


.submit-report-button {
    background: #c83439;
    color: white;
}


.block-only-button {
    width: 100%;
    background: var(--black);
    color: white;
}


.report-divider {
    margin: 25px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #918b83;
    font-size: 0.66rem;
    font-weight: 900;
}


.report-divider::before,
.report-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #cbc5bc;
}


.report-cancel-link {
    display: block;
    margin-top: 20px;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 900;
    text-decoration: underline;
}


.already-blocked-notice {
    padding: 14px;
    border: 2px solid var(--black);
    background: #e3dfd8;
    font-weight: 800;
    text-align: center;
}


.report-success-card {
    max-width: 650px;
    margin: 30px auto;
    padding: 55px;
    border: 2px solid var(--black);
    background: var(--white);
    box-shadow: 7px 7px 0 var(--black);
    text-align: center;
}


.report-success-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 25px;
    display: grid;
    place-items: center;
    border: 2px solid var(--black);
    border-radius: 50%;
    background: var(--yellow);
    box-shadow: 4px 4px 0 var(--black);
    font-size: 1.6rem;
    font-weight: 900;
}


.report-success-card h1 {
    margin-top: 8px;
    font-size: 3rem;
    line-height: 0.95;
    letter-spacing: -0.06em;
}


.report-success-card p {
    margin: 18px 0 25px;
    color: #6d6861;
}


/* BLOCKED USERS */

.blocked-shell {
    max-width: 850px;
}


.blocked-heading h1 {
    margin-top: 5px;
    font-size: clamp(3rem, 6vw, 5rem);
    line-height: 0.9;
    letter-spacing: -0.065em;
}


.blocked-heading p {
    margin-top: 13px;
    color: #706a63;
}


.blocked-list {
    margin-top: 35px;
    display: grid;
    gap: 14px;
}


.blocked-user-card {
    padding: 14px;
    border: 2px solid var(--black);
    background: var(--white);
    box-shadow: 4px 4px 0 var(--black);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}


.blocked-user-details {
    display: flex;
    align-items: center;
    gap: 13px;
}


.blocked-user-details img,
.blocked-placeholder {
    width: 58px;
    height: 58px;
    border: 2px solid var(--black);
    border-radius: 50%;
    object-fit: cover;
}


.blocked-placeholder {
    display: grid;
    place-items: center;
    background: #ddd;
    font-weight: 900;
}


.blocked-user-details div {
    display: flex;
    flex-direction: column;
}


.blocked-user-details span {
    margin-top: 3px;
    color: #77716a;
    font-size: 0.73rem;
}


.unblock-button {
    background: var(--yellow);
}


.blocked-empty {
    margin-top: 35px;
    padding: 55px 25px;
    border: 2px solid var(--black);
    background: var(--white);
    box-shadow: 5px 5px 0 var(--black);
    text-align: center;
}


.blocked-empty > div {
    width: 65px;
    height: 65px;
    margin: 0 auto 20px;
    display: grid;
    place-items: center;
    border: 2px solid var(--black);
    border-radius: 50%;
    background: var(--yellow);
    font-size: 1.4rem;
    font-weight: 900;
}


.blocked-empty h2 {
    font-size: 2rem;
}


.blocked-empty p {
    margin-top: 8px;
    color: #706a63;
}


.blocked-back-link {
    display: inline-block;
    margin-top: 30px;
    font-size: 0.75rem;
    font-weight: 900;
    text-decoration: underline;
}


@media (max-width: 700px) {

    .report-layout {
        grid-template-columns: 1fr;
    }

    .report-profile {
        display: grid;
        grid-template-columns: 90px 1fr;
    }

    .report-profile img {
        width: 90px;
        height: 90px;
        aspect-ratio: auto;
        border-bottom: 0;
        border-right: 2px solid var(--black);
    }

    .report-card {
        padding: 22px;
    }

    .blocked-user-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .blocked-user-card form,
    .unblock-button {
        width: 100%;
    }

}

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

.admin-login-page {
    min-height: 100vh;
    background: #171717;
}


.admin-login-main {
    min-height: 100vh;

    display: grid;
    place-items: center;

    padding: 30px;
}


.admin-login-card {
    width: 100%;
    max-width: 470px;

    padding: 38px;

    border: 2px solid var(--black);

    background: var(--cream);

    box-shadow:
            9px 9px 0 var(--red);
}


.admin-login-heading {
    margin-top: 42px;
    margin-bottom: 28px;
}


.admin-login-heading h1 {
    margin-top: 5px;

    font-size: 3.2rem;

    line-height: 0.9;

    letter-spacing: -0.065em;
}


.admin-login-heading p {
    margin-top: 12px;

    color: #69645e;

    font-size: 0.85rem;
}


.admin-login-form {
    display: grid;

    gap: 20px;
}


.admin-login-button {
    min-height: 50px;

    border: 2px solid var(--black);

    background: var(--red);

    color: white;

    box-shadow:
            4px 4px 0 var(--black);

    cursor: pointer;

    font: inherit;

    font-weight: 900;
}


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

.admin-page {
    min-height: 100vh;

    background:
            #eee9df;
}


.admin-header {
    min-height: 72px;

    border-bottom:
            2px solid var(--black);

    background:
            var(--black);

    color: white;
}


.admin-header-inner {
    min-height: 72px;

    display: flex;

    align-items: center;

    gap: 25px;
}


.admin-header .brand {
    color: white;
}


.admin-header-badge {
    padding:
            5px 7px;

    border:
            2px solid white;

    font-size: 0.6rem;

    font-weight: 900;

    letter-spacing: 0.1em;
}


.admin-nav {
    display: flex;

    align-items: center;

    gap: 6px;

    margin-left: 20px;
}


.admin-nav a {
    padding:
            8px 11px;

    color: #d9d9d9;

    font-size: 0.75rem;

    font-weight: 900;
}


.admin-nav a:hover,
.admin-nav a.active {
    background:
            var(--yellow);

    color:
            var(--black);
}


.admin-account {
    margin-left: auto;

    display: flex;

    align-items: center;

    gap: 15px;

    font-size: 0.75rem;

    font-weight: 800;
}


.admin-account a {
    color:
            var(--yellow);

    text-decoration: underline;
}


/* MAIN */

.admin-main {
    padding:
            50px 0
            100px;
}


.admin-page-heading h1 {
    margin-top: 5px;

    font-size:
            clamp(
                    3.3rem,
                    6vw,
                    5.5rem
            );

    line-height: 0.88;

    letter-spacing:
            -0.07em;
}


.admin-page-heading p {
    margin-top: 13px;

    color:
            #6c6760;
}


/* STATS */

.admin-stats {
    margin-top: 35px;

    display: grid;

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

    gap: 16px;
}


.admin-stat-card {
    min-height: 125px;

    padding: 18px;

    border:
            2px solid var(--black);

    background:
            var(--white);

    box-shadow:
            4px 4px 0 var(--black);

    display: flex;

    flex-direction: column;

    justify-content:
            space-between;
}


.admin-stat-card span {
    font-size: 0.65rem;

    font-weight: 900;

    letter-spacing:
            0.08em;
}


.admin-stat-card strong {
    font-size: 2.5rem;

    line-height: 1;
}


.admin-stat-card.attention {
    background:
            var(--yellow);
}


/* PANEL */

.admin-panel {
    margin-top: 40px;

    border:
            2px solid var(--black);

    background:
            var(--white);

    box-shadow:
            5px 5px 0 var(--black);
}


.admin-panel-heading {
    padding: 20px;

    border-bottom:
            2px solid var(--black);

    background:
            var(--cream);

    display: flex;

    align-items: flex-end;

    justify-content:
            space-between;

    gap: 20px;
}


.admin-panel-heading h2 {
    margin-top: 4px;

    font-size: 1.8rem;

    letter-spacing:
            -0.045em;
}


.admin-panel-link {
    font-size: 0.74rem;

    font-weight: 900;

    text-decoration: underline;
}


/* REPORT TABLE */

.admin-report-table {
    width: 100%;
}


.admin-report-row {
    display: grid;

    grid-template-columns:
        110px
        minmax(150px, 1.2fr)
        minmax(150px, 1fr)
        110px
        90px;

    gap: 15px;

    align-items: center;

    padding: 14px 16px;

    border-bottom:
            1px solid #c8c3ba;

    font-size: 0.76rem;
}


.admin-report-row:last-child {
    border-bottom: 0;
}


.admin-report-header {
    background:
            #e9e4db;

    font-size: 0.62rem;

    font-weight: 900;

    text-transform: uppercase;
}


.admin-report-row > span {
    min-width: 0;
}


.admin-report-row small {
    display: block;

    margin-top: 3px;

    color:
            #817b74;

    font-size: 0.63rem;
}


.admin-status-badge {
    display: inline-block;

    padding:
            5px 7px;

    border:
            2px solid var(--black);

    font-size: 0.6rem;

    font-weight: 900;
}


.status-pending {
    background:
            var(--yellow);
}


.status-reviewed {
    background:
            var(--blue);
}


.status-actioned {
    background:
            #bfe8c5;
}


.status-dismissed {
    background:
            #dedbd5;
}


.admin-review-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 34px;

    padding:
            6px 9px;

    border:
            2px solid var(--black);

    background:
            var(--red);

    color: white;

    box-shadow:
            2px 2px 0 var(--black);

    font-size: 0.66rem;

    font-weight: 900;
}


.admin-empty-state {
    padding: 45px 25px;

    text-align: center;
}


.admin-empty-state p {
    margin-top: 5px;

    color:
            #746f68;
}


/* TABLET */

@media (max-width: 900px) {

    .admin-stats {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .admin-report-table {
        overflow-x: auto;
    }


    .admin-report-row {
        min-width: 760px;
    }

}


/* MOBILE */

@media (max-width: 650px) {

    .admin-header-inner {
        flex-wrap: wrap;

        padding:
                10px 0;
    }


    .admin-nav {
        order: 3;

        width: 100%;

        margin-left: 0;

        border-top:
                1px solid #555;

        padding-top: 8px;
    }


    .admin-account span {
        display: none;
    }


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


    .admin-login-card {
        padding:
                28px 20px;
    }

}

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

.admin-report-filters {
    margin-top: 32px;

    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}


.admin-report-filters a {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 9px 11px;

    border: 2px solid var(--black);

    background: var(--white);

    box-shadow: 2px 2px 0 var(--black);

    font-size: 0.72rem;

    font-weight: 900;
}


.admin-report-filters a.active {
    background: var(--yellow);
}


.admin-report-filters span {
    min-width: 23px;
    height: 23px;

    padding: 0 5px;

    display: grid;
    place-items: center;

    border: 2px solid var(--black);

    border-radius: 999px;

    background: var(--cream);

    font-size: 0.6rem;
}


.admin-reports-list {
    display: grid;
}


.admin-report-card {
    min-width: 0;

    display: grid;

    grid-template-columns:
        minmax(200px, 1fr)
        minmax(220px, 1.3fr)
        125px;

    gap: 25px;

    align-items: center;

    padding: 17px;

    border-bottom:
            2px solid var(--black);
}


.admin-report-card:last-child {
    border-bottom: 0;
}


.admin-report-person {
    min-width: 0;

    display: flex;

    align-items: center;

    gap: 12px;
}


.admin-report-person img,
.admin-report-placeholder {
    width: 64px;
    height: 64px;

    flex-shrink: 0;

    border: 2px solid var(--black);

    border-radius: 50%;

    object-fit: cover;
}


.admin-report-placeholder {
    display: grid;

    place-items: center;

    background: #ddd;

    font-weight: 900;
}


.admin-report-person > div {
    min-width: 0;

    display: flex;

    flex-direction: column;
}


.admin-report-person strong {
    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.admin-report-person span,
.admin-report-person small {
    margin-top: 3px;

    color: #756f68;

    font-size: 0.67rem;
}


.admin-report-summary {
    min-width: 0;

    display: flex;

    flex-direction: column;
}


.admin-report-id {
    color: var(--red);

    font-size: 0.62rem;

    font-weight: 900;
}


.admin-report-summary strong {
    margin-top: 4px;
}


.admin-report-summary small {
    margin-top: 3px;

    color: #7d776f;

    font-size: 0.66rem;
}


.admin-report-status-column {
    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 9px;
}


/* =========================================================
   ADMIN REPORT REVIEW
========================================================= */

.admin-back-link {
    display: inline-block;

    margin-bottom: 25px;

    font-size: 0.76rem;

    font-weight: 900;

    text-decoration: underline;
}


.admin-action-success {
    margin-bottom: 25px;

    padding: 14px 16px;

    border: 2px solid var(--black);

    background: #c9efce;

    box-shadow: 3px 3px 0 var(--black);

    font-size: 0.78rem;

    font-weight: 900;
}


.admin-review-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        340px;

    gap: 35px;

    align-items: start;
}


.admin-review-main {
    min-width: 0;

    display: grid;

    gap: 20px;
}


.admin-review-heading {
    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 20px;
}


.admin-review-heading h1 {
    margin-top: 5px;

    font-size:
            clamp(
                    2.8rem,
                    5vw,
                    4.7rem
            );

    line-height: 0.9;

    letter-spacing: -0.06em;
}


.admin-report-detail-card {
    padding: 20px;

    border: 2px solid var(--black);

    background: var(--white);

    box-shadow: 4px 4px 0 var(--black);
}


.admin-detail-label {
    margin-bottom: 10px;

    color: var(--red);

    font-size: 0.64rem;

    font-weight: 900;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.admin-report-detail-card > span,
.admin-report-detail-card > small {
    display: block;

    margin-top: 4px;

    color: #77716a;
}


.admin-report-detail-card p {
    line-height: 1.65;
}


.admin-muted {
    color: #858078;
}


/* PHOTOS */

.admin-moderation-photos {
    display: grid;

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

    gap: 10px;
}


.admin-moderation-photos img {
    width: 100%;

    aspect-ratio: 1 / 1;

    display: block;

    object-fit: cover;

    border: 2px solid var(--black);
}


/* OTHER REPORTS */

.admin-other-reports {
    display: grid;

    gap: 8px;
}


.admin-other-reports a {
    display: grid;

    grid-template-columns:
        70px 1fr auto;

    gap: 12px;

    align-items: center;

    padding: 10px;

    border: 2px solid var(--black);

    background: var(--cream);

    font-size: 0.72rem;
}


/* REPORTED USER */

.admin-review-sidebar {
    display: grid;

    gap: 20px;
}


.admin-reported-user-card {
    border: 2px solid var(--black);

    background: var(--white);

    box-shadow: 5px 5px 0 var(--black);
}


.admin-reported-user-card > img {
    width: 100%;

    aspect-ratio: 1 / 1;

    display: block;

    object-fit: cover;

    border-bottom:
            2px solid var(--black);
}


.admin-reported-user-info {
    padding: 18px;
}


.admin-reported-user-info h2 {
    margin-top: 4px;

    font-size: 2rem;

    letter-spacing: -0.05em;
}


.admin-reported-user-info > p {
    color: #746f68;

    font-size: 0.78rem;
}


.admin-reported-user-info dl {
    margin-top: 20px;

    border:
            2px solid var(--black);
}


.admin-reported-user-info dl > div {
    display: grid;

    grid-template-columns:
        95px 1fr;

    border-bottom:
            1px solid #bdb8af;
}


.admin-reported-user-info dl > div:last-child {
    border-bottom: 0;
}


.admin-reported-user-info dt,
.admin-reported-user-info dd {
    padding: 8px;

    font-size: 0.68rem;
}


.admin-reported-user-info dt {
    background: #eae5dc;

    font-weight: 900;
}


.admin-reported-user-info dd {
    overflow-wrap: anywhere;
}


.admin-user-bio {
    margin-top: 18px;
}


.admin-user-bio strong {
    font-size: 0.72rem;
}


.admin-user-bio p {
    margin-top: 5px;

    color: #6f6962;

    font-size: 0.75rem;

    line-height: 1.55;
}


/* ACTIONS */

.admin-moderation-actions {
    padding: 18px;

    border: 2px solid var(--black);

    background: var(--cream);

    box-shadow: 4px 4px 0 var(--black);

    display: grid;

    gap: 10px;
}


.admin-moderation-actions h3 {
    margin-bottom: 5px;
}


.admin-moderation-actions form {
    width: 100%;
}


.admin-danger-action,
.admin-success-action,
.admin-neutral-action,
.admin-dismiss-action {
    width: 100%;

    min-height: 43px;

    padding: 8px 12px;

    border: 2px solid var(--black);

    box-shadow: 2px 2px 0 var(--black);

    cursor: pointer;

    font: inherit;

    font-size: 0.72rem;

    font-weight: 900;
}


.admin-danger-action {
    background: #c83439;

    color: white;
}


.admin-success-action {
    background: #bfe8c5;
}


.admin-neutral-action {
    background: var(--yellow);
}


.admin-dismiss-action {
    background: #dedad3;
}


/* TABLET */

@media (max-width: 900px) {

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


    .admin-review-sidebar {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

        align-items: start;
    }

}


/* MOBILE */

@media (max-width: 650px) {

    .admin-report-card {
        grid-template-columns: 1fr;

        gap: 15px;
    }


    .admin-report-status-column {
        flex-direction: row;

        justify-content: space-between;

        align-items: center;
    }


    .admin-review-heading {
        flex-direction: column;
    }


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


    .admin-moderation-photos {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .admin-other-reports a {
        grid-template-columns:
            60px 1fr;
    }


    .admin-other-reports
    .admin-status-badge {
        grid-column: 2;
    }

}

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

.admin-user-search {
    margin-top: 22px;

    display: grid;

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

    gap: 8px;
}


.admin-user-search input {
    min-height: 46px;

    padding:
            10px 13px;

    border:
            2px solid var(--black);

    background:
            var(--white);

    font: inherit;
}


.admin-user-search button,
.admin-user-search a {
    min-height: 46px;

    padding:
            9px 16px;

    border:
            2px solid var(--black);

    display: flex;

    align-items: center;

    justify-content: center;

    font: inherit;

    font-size: 0.74rem;

    font-weight: 900;
}


.admin-user-search button {
    background:
            var(--yellow);

    box-shadow:
            3px 3px 0 var(--black);

    cursor: pointer;
}


.admin-user-search a {
    background:
            var(--white);
}


/* USER LIST */

.admin-users-list {
    display: grid;
}


.admin-user-card {
    min-width: 0;

    display: grid;

    grid-template-columns:
        minmax(230px, 1.4fr)
        minmax(125px, 0.7fr)
        minmax(220px, 1fr)
        105px;

    gap: 22px;

    align-items: center;

    padding: 16px;

    border-bottom:
            2px solid var(--black);
}


.admin-user-card:last-child {
    border-bottom: 0;
}


/* PROFILE */

.admin-user-profile {
    min-width: 0;

    display: flex;

    align-items: center;

    gap: 13px;
}


.admin-user-profile img,
.admin-user-placeholder {
    width: 68px;
    height: 68px;

    flex-shrink: 0;

    border:
            2px solid var(--black);

    border-radius: 50%;

    object-fit: cover;
}


.admin-user-placeholder {
    display: grid;

    place-items: center;

    background:
            #dedad3;

    font-weight: 900;
}


.admin-user-profile > div {
    min-width: 0;

    display: flex;

    flex-direction: column;
}


.admin-user-profile strong {
    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    font-size: 0.9rem;
}


.admin-user-profile span {
    margin-top: 4px;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    color: #6f6962;

    font-size: 0.7rem;
}


.admin-user-profile small {
    margin-top: 3px;

    color: #8a847c;

    font-size: 0.64rem;
}


/* ACCOUNT STATUS */

.admin-user-account {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 5px;

    font-size: 0.68rem;
}


.admin-user-account > span:not(
    .admin-user-status
) {
    color: #69645e;
}


.admin-user-account small {
    color: #8a847c;
}


.admin-user-status {
    display: inline-block;

    padding:
            5px 7px;

    border:
            2px solid var(--black);

    font-size: 0.59rem;

    font-weight: 900;

    text-transform: uppercase;
}


.user-status-active {
    background:
            #bfe8c5;
}


.user-status-suspended {
    background:
            var(--yellow);
}


.user-status-deleted {
    background:
            #ddd8d1;

    color:
            #777;
}


/* ACTIVITY */

.admin-user-activity {
    display: grid;

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

    border:
            2px solid var(--black);
}


.admin-user-activity div {
    min-width: 0;

    padding: 9px 6px;

    border-right:
            1px solid var(--black);

    background:
            var(--cream);

    text-align: center;
}


.admin-user-activity div:last-child {
    border-right: 0;
}


.admin-user-activity strong {
    display: block;

    font-size: 1rem;
}


.admin-user-activity span {
    display: block;

    margin-top: 2px;

    color:
            #77716a;

    font-size: 0.55rem;

    text-transform: uppercase;
}


/* ACTIONS */

.admin-user-actions {
    display: grid;

    gap: 7px;
}


.admin-user-actions form {
    width: 100%;
}


.admin-user-actions
.admin-review-button {
    width: 100%;
}


.admin-user-suspend,
.admin-user-restore {
    width: 100%;

    min-height: 34px;

    padding:
            6px 8px;

    border:
            2px solid var(--black);

    box-shadow:
            2px 2px 0 var(--black);

    cursor: pointer;

    font: inherit;

    font-size: 0.65rem;

    font-weight: 900;
}


.admin-user-suspend {
    background:
            #c83439;

    color:
            white;
}


.admin-user-restore {
    background:
            #bfe8c5;
}


/* TABLET */

@media (max-width: 1000px) {

    .admin-user-card {
        grid-template-columns:
            minmax(220px, 1fr)
            135px
            100px;
    }


    .admin-user-activity {
        grid-column:
                1 / -1;
    }

}


/* MOBILE */

@media (max-width: 650px) {

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


    .admin-user-card {
        grid-template-columns:
            1fr;

        gap: 15px;
    }


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


    .admin-user-activity {
        grid-column: auto;
    }

}

/* =========================================================
   ADMIN MEMBER VIEW
========================================================= */

.admin-member-header {
    display: flex;

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

    gap: 25px;

    padding: 22px;

    border: 2px solid var(--black);

    background: var(--white);

    box-shadow: 5px 5px 0 var(--black);
}


.admin-member-identity {
    min-width: 0;

    display: flex;

    align-items: center;

    gap: 18px;
}


.admin-member-identity > img,
.admin-member-avatar-placeholder {
    width: 105px;
    height: 105px;

    flex-shrink: 0;

    border: 2px solid var(--black);

    border-radius: 50%;

    object-fit: cover;
}


.admin-member-avatar-placeholder {
    display: grid;

    place-items: center;

    background: #ddd;

    font-size: 1.5rem;

    font-weight: 900;
}


.admin-member-identity h1 {
    margin-top: 4px;

    font-size:
            clamp(
                    2.5rem,
                    5vw,
                    4.3rem
            );

    line-height: 0.9;

    letter-spacing: -0.06em;
}


.admin-member-identity p {
    margin-top: 7px;

    color: #6f6962;
}


.admin-member-header-status {
    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 7px;

    font-size: 0.7rem;

    font-weight: 800;
}


/* STATS */

.admin-member-stats {
    margin-top: 20px;

    display: grid;

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

    border:
            2px solid var(--black);

    box-shadow:
            4px 4px 0 var(--black);
}


.admin-member-stats > div {
    padding: 14px 8px;

    border-right:
            1px solid var(--black);

    background: var(--cream);

    text-align: center;
}


.admin-member-stats > div:last-child {
    border-right: 0;
}


.admin-member-stats strong {
    display: block;

    font-size: 1.45rem;
}


.admin-member-stats span {
    display: block;

    margin-top: 3px;

    color: #77716a;

    font-size: 0.57rem;

    font-weight: 900;

    text-transform: uppercase;
}


/* LAYOUT */

.admin-member-layout {
    margin-top: 30px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        290px;

    gap: 30px;

    align-items: start;
}


.admin-member-main {
    min-width: 0;

    display: grid;

    gap: 24px;
}


.admin-member-sidebar {
    position: sticky;

    top: 100px;

    display: grid;

    gap: 20px;
}


/* PANELS */

.admin-member-panel {
    padding: 20px;

    border: 2px solid var(--black);

    background: var(--white);

    box-shadow: 4px 4px 0 var(--black);
}


.admin-member-panel-heading {
    margin-bottom: 18px;

    padding-bottom: 14px;

    border-bottom:
            2px solid var(--black);
}


.admin-member-panel-heading h2 {
    margin-top: 3px;

    font-size: 1.55rem;

    letter-spacing: -0.045em;
}


/* DETAIL TABLE */

.admin-member-details {
    border:
            2px solid var(--black);
}


.admin-member-details > div {
    display: grid;

    grid-template-columns:
        180px minmax(0, 1fr);

    border-bottom:
            1px solid #c1bcb4;
}


.admin-member-details > div:last-child {
    border-bottom: 0;
}


.admin-member-details dt,
.admin-member-details dd {
    padding:
            10px 12px;

    font-size: 0.75rem;
}


.admin-member-details dt {
    background: #eae5dc;

    font-weight: 900;
}


.admin-member-details dd {
    overflow-wrap: anywhere;
}


.admin-member-bio {
    margin-top: 18px;
}


.admin-member-bio > strong {
    font-size: 0.72rem;

    text-transform: uppercase;
}


.admin-member-bio p {
    margin-top: 7px;

    color: #66615b;

    line-height: 1.65;
}


/* PHOTOS */

.admin-member-photo-grid {
    display: grid;

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

    gap: 12px;
}


.admin-member-photo-grid figure {
    position: relative;

    margin: 0;

    border:
            2px solid var(--black);

    overflow: hidden;

    background: #ddd;
}


.admin-member-photo-grid img {
    width: 100%;

    aspect-ratio: 4 / 5;

    display: block;

    object-fit: cover;
}


.admin-member-photo-grid figcaption {
    position: absolute;

    left: 8px;
    bottom: 8px;

    padding:
            5px 7px;

    border:
            2px solid var(--black);

    background:
            var(--yellow);

    font-size: 0.6rem;

    font-weight: 900;
}


/* PEOPLE LIST */

.admin-member-people-list {
    display: grid;

    gap: 8px;
}


.admin-member-people-list a {
    display: flex;

    align-items: center;

    gap: 12px;

    padding: 10px;

    border:
            2px solid var(--black);

    background:
            var(--cream);
}


.admin-member-people-list a:hover {
    background:
            var(--yellow);
}


.admin-member-people-list img,
.admin-small-placeholder {
    width: 46px;
    height: 46px;

    flex-shrink: 0;

    border:
            2px solid var(--black);

    border-radius: 50%;

    object-fit: cover;
}


.admin-small-placeholder {
    display: grid;

    place-items: center;

    background: #ddd;

    font-weight: 900;
}


.admin-member-people-list a > div {
    min-width: 0;

    display: flex;

    flex-direction: column;
}


.admin-member-people-list strong {
    font-size: 0.78rem;
}


.admin-member-people-list span {
    margin-top: 3px;

    color: #766f68;

    font-size: 0.64rem;
}


/* REPORT LIST */

.admin-member-report-list {
    display: grid;

    gap: 8px;
}


.admin-member-report-list a {
    display: grid;

    grid-template-columns:
        100px
        minmax(0, 1fr)
        auto;

    gap: 12px;

    align-items: center;

    padding: 11px;

    border:
            2px solid var(--black);

    background:
            var(--cream);

    font-size: 0.72rem;
}


.admin-member-report-list a:hover {
    background:
            #fff6c5;
}


/* BLOCKS */

.admin-block-columns {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 25px;
}


.admin-block-columns h3 {
    margin-bottom: 12px;

    font-size: 0.85rem;
}


/* SIDEBAR NOTE */

.admin-member-note {
    padding: 17px;

    border: 2px solid var(--black);

    background:
            #e4eef8;

    box-shadow:
            3px 3px 0 var(--black);
}


.admin-member-note strong {
    font-size: 0.8rem;
}


.admin-member-note p {
    margin-top: 7px;

    color: #5f6871;

    font-size: 0.7rem;

    line-height: 1.5;
}


/* TABLET */

@media (max-width: 1000px) {

    .admin-member-stats {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }


    .admin-member-stats > div:nth-child(3) {
        border-right: 0;
    }


    .admin-member-stats > div:nth-child(-n + 3) {
        border-bottom:
                1px solid var(--black);
    }


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


    .admin-member-sidebar {
        position: static;
    }

}


/* MOBILE */

@media (max-width: 650px) {

    .admin-member-header {
        align-items: flex-start;

        flex-direction: column;
    }


    .admin-member-identity {
        align-items: flex-start;

        flex-direction: column;
    }


    .admin-member-header-status {
        align-items: flex-start;
    }


    .admin-member-stats {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .admin-member-stats > div {
        border-bottom:
                1px solid var(--black);
    }


    .admin-member-stats > div:nth-child(2n) {
        border-right: 0;
    }


    .admin-member-details > div {
        grid-template-columns: 1fr;
    }


    .admin-member-details dt {
        border-bottom:
                1px solid #c1bcb4;
    }


    .admin-member-photo-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


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


    .admin-member-report-list a {
        grid-template-columns:
            1fr auto;
    }


    .admin-member-report-list a > span:nth-child(2) {
        grid-column:
                1 / -1;
    }

}

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

.password-reset-main {
    min-height:
            calc(100vh - 78px);

    padding:
            70px 20px;

    display: grid;
    place-items: center;
}


.password-reset-card {
    width: 100%;
    max-width: 560px;

    padding: 42px;

    border:
            2px solid var(--black);

    background:
            var(--white);

    box-shadow:
            8px 8px 0 var(--black);
}


.password-reset-card h1 {
    margin-top: 7px;

    font-size:
            clamp(
                    2.8rem,
                    7vw,
                    4.5rem
            );

    line-height: 0.9;

    letter-spacing:
            -0.065em;
}


.password-reset-intro {
    margin-top: 16px;

    color: #6d6861;

    line-height: 1.55;
}


.password-reset-form {
    margin-top: 30px;

    display: grid;

    gap: 20px;
}


.password-reset-form
.primary-button {
    width: 100%;

    margin-top: 5px;

    cursor: pointer;
}


.password-email-sent {
    text-align: center;
}


.password-reset-icon {
    width: 75px;
    height: 75px;

    margin:
            0 auto 25px;

    display: grid;
    place-items: center;

    border:
            2px solid var(--black);

    border-radius: 50%;

    background:
            var(--yellow);

    box-shadow:
            4px 4px 0 var(--black);

    font-size: 1.5rem;

    font-weight: 900;
}


.password-email-sent p {
    max-width: 440px;

    margin:
            17px auto 28px;

    color:
            #6d6861;
}


@media (max-width: 600px) {

    .password-reset-main {
        padding:
                40px 15px;
    }


    .password-reset-card {
        padding:
                28px 20px;

        box-shadow:
                5px 5px 0 var(--black);
    }

}

/* =========================================================
   DISCOVER LIKE / PASS BUTTONS
========================================================= */

.discover-actions {
    display: grid;

    grid-template-columns:
        52px
        minmax(0, 1fr)
        52px;

    gap: 12px;

    align-items: center;

    margin-top: 18px;
}


.discover-action-form {
    margin: 0;
}


.discover-pass,
.discover-like {
    width: 52px;
    height: 52px;

    padding: 0;

    display: grid;
    place-items: center;

    border: 2px solid var(--black);

    border-radius: 50%;

    box-shadow:
            3px 3px 0 var(--black);

    cursor: pointer;

    font: inherit;

    font-size: 1.35rem;

    font-weight: 900;

    line-height: 1;

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


.discover-pass {
    background: var(--white);

    color: var(--red);
}


.discover-like {
    background: var(--red);

    color: white;
}


.discover-pass:hover,
.discover-like:hover {
    transform:
            translate(
                    -1px,
                    -1px
            );

    box-shadow:
            5px 5px 0 var(--black);
}


.discover-pass:active,
.discover-like:active {
    transform:
            translate(
                    2px,
                    2px
            );

    box-shadow:
            1px 1px 0 var(--black);
}


.discover-pass:focus-visible,
.discover-like:focus-visible {
    outline:
            3px solid var(--blue);

    outline-offset:
            3px;
}


.discover-view-profile {
    min-height: 45px;

    padding:
            10px 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
            2px solid var(--black);

    background:
            var(--cream);

    box-shadow:
            3px 3px 0 var(--black);

    color:
            var(--black);

    font-size: 0.72rem;

    font-weight: 900;

    text-align: center;

    text-decoration: none;
}


.discover-view-profile:hover {
    background:
            var(--yellow);
}


/* Make sure card actions stay aligned */

.discover-card-body {
    display: flex;

    flex-direction: column;

    min-height: 215px;
}


.discover-card-bio {
    flex: 1;
}


/* MOBILE */

@media (max-width: 600px) {

    .discover-actions {
        grid-template-columns:
            48px
            minmax(0, 1fr)
            48px;

        gap: 9px;
    }


    .discover-pass,
    .discover-like {
        width: 48px;
        height: 48px;
    }

}

/* =========================================================
   SWIFTDATING MEMBER PAGES – LAYOUT / STYLE FIX
   Append this block to the END of /public/assets/css/style.css
========================================================= */

/* ---------- Base member shell ---------- */
.dashboard-page,
.member-profile-page,
.messages-page {
    margin: 0;
    min-height: 100vh;
    background: var(--cream, #f6f1e8);
    color: var(--black, #151515);
}

.dashboard-page *,
.member-profile-page *,
.messages-page * {
    box-sizing: border-box;
}

.shell {
    width: min(1180px, calc(100% - 40px));
    margin-inline: auto;
}

a {
    color: inherit;
}

/* ---------- Header ---------- */
.dashboard-header {
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 2px solid var(--black, #151515);
    background: rgba(246, 241, 232, .97);
    backdrop-filter: blur(10px);
}

.dashboard-nav {
    min-height: 76px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 28px;
}

.dashboard-header .brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-weight: 950;
    letter-spacing: -.03em;
}

.brand-mark {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 2px solid var(--black, #151515);
    border-radius: 50%;
    background: var(--red, #f04b4f);
    color: #fff;
    box-shadow: 2px 2px 0 var(--black, #151515);
}

.dashboard-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.dashboard-nav-link {
    padding: 9px 12px;
    border: 2px solid transparent;
    text-decoration: none;
    font-size: .78rem;
    font-weight: 900;
}

.dashboard-nav-link:hover,
.dashboard-nav-link.active {
    border-color: var(--black, #151515);
    background: var(--yellow, #ffd94a);
    box-shadow: 2px 2px 0 var(--black, #151515);
}

.dashboard-account {
    position: relative;
}

.dashboard-profile-button {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 5px 8px;
    border: 2px solid transparent;
    background: transparent;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.dashboard-profile-button:hover {
    border-color: var(--black, #151515);
    background: var(--white, #fffdf8);
}

.dashboard-profile-button img {
    width: 34px;
    height: 34px;
    border: 2px solid var(--black, #151515);
    border-radius: 50%;
    object-fit: cover;
}

.profile-chevron { font-size: .75rem; }

.dashboard-account-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 210px;
    border: 2px solid var(--black, #151515);
    background: var(--white, #fffdf8);
    box-shadow: 5px 5px 0 var(--black, #151515);
    overflow: hidden;
}

.dashboard-account-menu.open,
.dashboard-account-menu.is-open,
.dashboard-account:focus-within .dashboard-account-menu {
    display: block;
}

.dashboard-account-menu a {
    display: block;
    padding: 11px 13px;
    text-decoration: none;
    font-size: .78rem;
    font-weight: 800;
}

.dashboard-account-menu a:hover { background: var(--yellow, #ffd94a); }
.account-menu-divider { border-top: 2px solid var(--black, #151515); }
.logout-link { color: var(--red-dark, #d83c40); }

/* ---------- Main dashboard shell ---------- */
.dashboard-main { padding: 42px 0 90px; }

.dashboard-layout {
    display: grid;
    grid-template-columns: 235px minmax(0, 1fr);
    gap: 36px;
    align-items: start;
}

.dashboard-sidebar {
    min-width: 0;
    display: grid;
    gap: 18px;
}

.dashboard-content { min-width: 0; }

.dashboard-content-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 24px;
}

.dashboard-content-heading h1 {
    margin: 4px 0 0;
    font-size: clamp(2.15rem, 4vw, 3.65rem);
    line-height: .96;
    letter-spacing: -.06em;
}

.dashboard-content-heading p {
    margin: 8px 0 0;
    color: #6d6861;
}

.dashboard-eyebrow {
    display: inline-block;
    color: var(--red, #f04b4f);
    font-size: .65rem;
    font-weight: 950;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.dashboard-filter-button {
    min-height: 42px;
    padding: 8px 14px;
    border: 2px solid var(--black, #151515);
    background: var(--white, #fffdf8);
    box-shadow: 3px 3px 0 var(--black, #151515);
    font: inherit;
    font-size: .75rem;
    font-weight: 900;
    cursor: pointer;
}

.dashboard-filter-button:hover { background: var(--yellow, #ffd94a); }

/* ---------- Sidebar ---------- */
.my-profile-card,
.sidebar-safety {
    border: 2px solid var(--black, #151515);
    background: var(--white, #fffdf8);
    box-shadow: 4px 4px 0 var(--black, #151515);
}

.my-profile-card { padding: 13px; }

.my-profile-photo img {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: block;
    border: 2px solid var(--black, #151515);
    object-fit: cover;
}

.my-profile-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 0 10px;
}

.my-profile-info strong { font-size: .9rem; }
.my-profile-info span { color: #7c766e; font-size: .7rem; }
.edit-profile-link { font-size: .7rem; font-weight: 900; }

.dashboard-sidebar-menu {
    border: 2px solid var(--black, #151515);
    background: var(--white, #fffdf8);
}

.sidebar-menu-item {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 10px;
    align-items: center;
    padding: 11px;
    border-bottom: 1px solid var(--black, #151515);
    text-decoration: none;
}

.sidebar-menu-item:last-child { border-bottom: 0; }
.sidebar-menu-item:hover,
.sidebar-menu-item.active { background: var(--yellow, #ffd94a); }

.sidebar-menu-icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 2px solid var(--black, #151515);
    background: var(--white, #fffdf8);
    font-weight: 900;
}

.sidebar-menu-item strong { display: block; font-size: .75rem; }
.sidebar-menu-item small { color: #756f68; font-size: .6rem; }

.sidebar-safety {
    padding: 15px;
    background: #dcecff;
}

.sidebar-safety strong { font-size: .75rem; }
.sidebar-safety p { margin: 7px 0; color: #66717d; font-size: .67rem; line-height: 1.5; }
.sidebar-safety a { font-size: .67rem; font-weight: 900; }

/* ---------- Match banner ---------- */
.new-match-banner {
    display: grid;
    grid-template-columns: 58px 1fr auto;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    padding: 12px;
    border: 2px solid var(--black, #151515);
    background: var(--yellow, #ffd94a);
    box-shadow: 4px 4px 0 var(--black, #151515);
}

.new-match-banner img {
    width: 58px;
    height: 58px;
    border: 2px solid var(--black, #151515);
    border-radius: 50%;
    object-fit: cover;
}

.new-match-banner span { display: block; font-size: .58rem; font-weight: 950; letter-spacing: .1em; }
.new-match-banner strong { display: block; margin-top: 3px; }

.match-banner-button,
.primary-button,
.admin-review-button,
.admin-user-restore,
.admin-neutral-action,
.admin-danger-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 9px 14px;
    border: 2px solid var(--black, #151515);
    box-shadow: 3px 3px 0 var(--black, #151515);
    text-decoration: none;
    font: inherit;
    font-size: .72rem;
    font-weight: 950;
    cursor: pointer;
}

.primary-button,
.match-banner-button,
.admin-review-button { background: var(--red, #f04b4f); color: #fff; }
.admin-user-restore { background: #bfe8c5; }
.admin-neutral-action { background: var(--yellow, #ffd94a); }
.admin-danger-action { background: #c83439; color: #fff; }

/* ---------- Discovery / likes / matches cards ---------- */
.discover-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.discover-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    border: 2px solid var(--black, #151515);
    background: var(--white, #fffdf8);
    box-shadow: 5px 5px 0 var(--black, #151515);
    overflow: hidden;
}

.discover-photo {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-bottom: 2px solid var(--black, #151515);
    background: #ddd;
}

.discover-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.discover-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 230px;
    padding: 14px;
}

.discover-card-name h2 {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1;
    letter-spacing: -.04em;
}

.discover-card-name span {
    display: block;
    margin-top: 5px;
    color: #6f6962;
    font-size: .75rem;
}

.discover-card-bio {
    flex: 1;
    margin: 10px 0 0;
    color: #302e2c;
    font-size: .78rem;
    line-height: 1.5;
}

.discover-actions {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 52px;
    gap: 10px;
    align-items: center;
    margin-top: 16px;
}

.discover-action-form { margin: 0; }

.discover-pass,
.discover-like {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 2px solid var(--black, #151515);
    border-radius: 50%;
    box-shadow: 3px 3px 0 var(--black, #151515);
    font: inherit;
    font-size: 1.25rem;
    font-weight: 950;
    cursor: pointer;
}

.discover-pass { background: var(--white, #fffdf8); color: var(--red, #f04b4f); }
.discover-like { background: var(--red, #f04b4f); color: #fff; }

.discover-pass:hover,
.discover-like:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--black, #151515); }
.discover-pass:active,
.discover-like:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--black, #151515); }

.discover-view-profile,
.discover-settings-link {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    border: 2px solid var(--black, #151515);
    background: var(--cream, #f6f1e8);
    box-shadow: 2px 2px 0 var(--black, #151515);
    text-align: center;
    text-decoration: none;
    font-size: .7rem;
    font-weight: 900;
}

.discover-view-profile:hover,
.discover-settings-link:hover { background: var(--yellow, #ffd94a); }

.discover-empty {
    padding: 45px 24px;
    border: 2px solid var(--black, #151515);
    background: var(--white, #fffdf8);
    box-shadow: 5px 5px 0 var(--black, #151515);
    text-align: center;
}

.discover-empty-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    border: 2px solid var(--black, #151515);
    border-radius: 50%;
    background: var(--pink, #ffb4ce);
    font-size: 1.5rem;
}

.discover-empty h2 { margin: 8px 0; font-size: 2rem; letter-spacing: -.04em; }
.discover-empty p { max-width: 560px; margin: 8px auto; color: #746f68; line-height: 1.55; }
.discover-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px; }

/* =========================================================
   MEMBER PROFILE VIEW
========================================================= */
.member-profile-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
    gap: 28px;
    align-items: start;
}

.member-profile-gallery,
.member-profile-content {
    min-width: 0;
}

.member-profile-main-photo {
    width: 100%;
    max-height: 720px;
    aspect-ratio: 4 / 5;
    border: 2px solid var(--black, #151515);
    background: #ddd;
    overflow: hidden;
    box-shadow: 5px 5px 0 var(--black, #151515);
}

.member-profile-main-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.member-profile-thumbnails {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.profile-thumbnail {
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 2px solid var(--black, #151515);
    background: var(--white, #fffdf8);
    cursor: pointer;
    overflow: hidden;
}

.profile-thumbnail img { width: 100%; height: 100%; display: block; object-fit: cover; }
.profile-thumbnail:hover { outline: 3px solid var(--yellow, #ffd94a); outline-offset: 1px; }

.member-profile-content {
    padding: 24px;
    border: 2px solid var(--black, #151515);
    background: var(--white, #fffdf8);
    box-shadow: 5px 5px 0 var(--black, #151515);
}

.member-profile-content h1 {
    margin: 6px 0 0;
    font-size: clamp(2.6rem, 5vw, 4.5rem);
    line-height: .9;
    letter-spacing: -.06em;
}

.member-profile-location { margin: 8px 0 20px; color: #6c6760; font-size: .88rem; }

.member-profile-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 18px 0;
}

.member-profile-details > div {
    padding: 12px;
    border: 2px solid var(--black, #151515);
    background: var(--cream, #f6f1e8);
}

.member-profile-details span,
.member-profile-details small { display: block; }
.member-profile-details small { margin-bottom: 4px; color: #7e7871; font-size: .6rem; text-transform: uppercase; font-weight: 900; }
.member-profile-details span { font-weight: 900; }

.member-profile-bio {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 2px solid var(--black, #151515);
}

.member-profile-bio h2,
.member-profile-bio strong { display: block; margin: 0 0 8px; font-size: 1rem; }
.member-profile-bio p { margin: 0; line-height: 1.65; }
.member-profile-safety-links { margin-top: 16px; font-size: .72rem; }
.member-profile-safety-links a { font-weight: 900; }

/* =========================================================
   SHARED PANELS / FORMS (EDIT, SETTINGS, PHOTOS, BLOCKED, REPORT)
========================================================= */
.admin-back-link {
    display: inline-block;
    margin-bottom: 20px;
    font-size: .72rem;
    font-weight: 900;
    text-decoration: underline;
}

.admin-action-success,
.form-errors {
    margin-bottom: 20px;
    padding: 13px 15px;
    border: 2px solid var(--black, #151515);
    box-shadow: 3px 3px 0 var(--black, #151515);
}

.admin-action-success { background: #c9efce; }
.form-errors { background: #ffd9dc; }
.form-errors ul { margin: 0; padding-left: 18px; }

.admin-member-panel,
.admin-report-card,
.admin-reported-user-card,
.admin-moderation-actions {
    border: 2px solid var(--black, #151515);
    background: var(--white, #fffdf8);
    box-shadow: 4px 4px 0 var(--black, #151515);
}

.admin-member-panel {
    margin-bottom: 22px;
    padding: 20px;
}

.admin-member-panel-heading {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--black, #151515);
}

.admin-member-panel-heading h2 { margin: 3px 0 0; font-size: 1.45rem; letter-spacing: -.04em; }

.edit-profile-form,
.register-form,
.password-reset-form { display: grid; gap: 18px; }

.form-group { display: grid; gap: 7px; }
.form-group label { font-size: .72rem; font-weight: 900; }
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    border: 2px solid var(--black, #151515);
    background: #fff;
    color: var(--black, #151515);
    font: inherit;
    outline: 0;
}

.form-group textarea { min-height: 130px; resize: vertical; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { box-shadow: 3px 3px 0 var(--blue, #93c9ff); }
.form-help { color: #77716a; font-size: .65rem; }

.checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: .73rem;
    line-height: 1.45;
}

.checkbox-row input { margin-top: 3px; }

.admin-member-photo-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.admin-member-photo-grid figure {
    position: relative;
    margin: 0;
    border: 2px solid var(--black, #151515);
    background: #ddd;
    overflow: hidden;
}

.admin-member-photo-grid img {
    width: 100%;
    aspect-ratio: 4 / 5;
    display: block;
    object-fit: cover;
}

.admin-member-photo-grid figcaption {
    position: absolute;
    left: 8px;
    bottom: 8px;
    padding: 5px 7px;
    border: 2px solid var(--black, #151515);
    background: var(--yellow, #ffd94a);
    font-size: .6rem;
    font-weight: 900;
}

.admin-member-people-list { display: grid; gap: 9px; }
.admin-member-people-list a,
.admin-report-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px;
    text-decoration: none;
}

.admin-member-people-list img,
.admin-user-profile img,
.admin-user-placeholder {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    border: 2px solid var(--black, #151515);
    border-radius: 50%;
    object-fit: cover;
}

.admin-user-placeholder { display: grid; place-items: center; background: #ddd; font-weight: 900; }
.admin-user-profile { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.admin-user-profile > div { min-width: 0; }
.admin-user-profile strong,
.admin-user-profile span,
.admin-user-profile small { display: block; }
.admin-user-profile span,
.admin-user-profile small { margin-top: 3px; color: #746f68; font-size: .67rem; }
.admin-user-actions { margin-left: auto; display: flex; gap: 8px; }

.admin-review-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 26px;
    align-items: start;
}

.admin-review-sidebar { display: grid; gap: 18px; }

.admin-reported-user-card { overflow: hidden; }
.admin-reported-user-card > img { width: 100%; aspect-ratio: 1 / 1; display: block; object-fit: cover; border-bottom: 2px solid var(--black, #151515); }
.admin-reported-user-info { padding: 16px; }
.admin-reported-user-info h2 { margin: 4px 0; font-size: 1.8rem; letter-spacing: -.04em; }

.admin-moderation-actions { padding: 16px; display: grid; gap: 10px; }
.admin-moderation-actions form { margin: 0; }
.admin-moderation-actions button { width: 100%; }

/* =========================================================
   SETUP / AUTH-LIKE MEMBER PAGES
========================================================= */
.profile-setup-page,
.auth-page { background: var(--cream, #f6f1e8); }

.topbar { border-bottom: 2px solid var(--black, #151515); background: var(--cream, #f6f1e8); }
.nav { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.auth-nav-right { display: flex; align-items: center; gap: 12px; font-size: .72rem; }
.auth-login-button {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    padding: 7px 12px;
    border: 2px solid var(--black, #151515);
    background: var(--white, #fffdf8);
    box-shadow: 2px 2px 0 var(--black, #151515);
    text-decoration: none;
    font-weight: 900;
}

.password-reset-main {
    min-height: calc(100vh - 76px);
    display: grid;
    place-items: center;
    padding: 50px 20px;
}

.password-reset-card {
    width: min(620px, 100%);
    padding: 34px;
    border: 2px solid var(--black, #151515);
    background: var(--white, #fffdf8);
    box-shadow: 7px 7px 0 var(--black, #151515);
}

.password-reset-card h1 { margin: 6px 0 0; font-size: clamp(2.4rem, 6vw, 4rem); line-height: .94; letter-spacing: -.06em; }
.password-reset-intro { margin-top: 12px; color: #6d6861; line-height: 1.55; }

.profile-setup-progress { margin-bottom: 18px; font-size: .68rem; font-weight: 900; color: #77716a; }
.setup-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.setup-choice-grid label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 10px;
    border: 2px solid var(--black, #151515);
    background: var(--cream, #f6f1e8);
    cursor: pointer;
}
.setup-choice-grid label:has(input:checked) { background: var(--yellow, #ffd94a); }

/* =========================================================
   MESSAGES
========================================================= */
.messages-layout {
    display: grid;
    grid-template-columns: 310px minmax(0, 1fr);
    min-height: 650px;
    border: 2px solid var(--black, #151515);
    background: var(--white, #fffdf8);
    box-shadow: 5px 5px 0 var(--black, #151515);
    overflow: hidden;
}

.conversation-list {
    border-right: 2px solid var(--black, #151515);
    background: var(--cream, #f6f1e8);
    overflow-y: auto;
}

.conversation-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-bottom: 1px solid var(--black, #151515);
    text-decoration: none;
}

.conversation-item:hover,
.conversation-item.active { background: var(--yellow, #ffd94a); }

.conversation-item img { width: 48px; height: 48px; border: 2px solid var(--black, #151515); border-radius: 50%; object-fit: cover; }
.conversation-copy { min-width: 0; }
.conversation-copy strong,
.conversation-copy span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.conversation-copy span { margin-top: 3px; color: #756f68; font-size: .66rem; }
.conversation-unread { margin-left: auto; min-width: 22px; height: 22px; display: grid; place-items: center; border: 2px solid var(--black, #151515); border-radius: 50%; background: var(--red, #f04b4f); color: #fff; font-size: .6rem; font-weight: 900; }

.chat-panel { min-width: 0; display: grid; grid-template-rows: auto 1fr auto; }
.chat-header { padding: 14px 16px; border-bottom: 2px solid var(--black, #151515); background: var(--white, #fffdf8); font-weight: 900; }
.chat-messages { min-height: 420px; max-height: 560px; padding: 18px; overflow-y: auto; background: #fdfbf7; }
.message-row { display: flex; margin-bottom: 10px; }
.message-row.mine { justify-content: flex-end; }
.message-row.theirs { justify-content: flex-start; }
.message-bubble { max-width: min(75%, 580px); padding: 10px 12px; border: 2px solid var(--black, #151515); background: var(--white, #fffdf8); box-shadow: 2px 2px 0 var(--black, #151515); line-height: 1.45; }
.message-row.mine .message-bubble { background: var(--pink, #ffb4ce); }

.message-compose { padding: 14px; border-top: 2px solid var(--black, #151515); background: var(--cream, #f6f1e8); }
.message-compose textarea { width: 100%; min-height: 72px; max-height: 180px; padding: 10px; border: 2px solid var(--black, #151515); resize: none; font: inherit; }
.message-compose-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; }

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 1050px) {
    .discover-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .member-profile-layout { grid-template-columns: minmax(0, 1fr) 380px; }
    .admin-review-layout { grid-template-columns: 1fr; }
}

@media (max-width: 850px) {
    .dashboard-nav { grid-template-columns: auto auto; }
    .dashboard-navigation { grid-column: 1 / -1; order: 3; justify-content: flex-start; padding-bottom: 10px; overflow-x: auto; }
    .dashboard-account { justify-self: end; }
    .dashboard-layout { grid-template-columns: 1fr; }
    .dashboard-sidebar { grid-template-columns: 1fr 1fr; }
    .my-profile-card { display: none; }
    .sidebar-safety { display: none; }
    .member-profile-layout { grid-template-columns: 1fr; }
    .member-profile-main-photo { max-width: 620px; margin-inline: auto; }
    .messages-layout { grid-template-columns: 250px minmax(0, 1fr); }
}

@media (max-width: 650px) {
    .shell { width: min(100% - 24px, 1180px); }
    .dashboard-main { padding-top: 24px; }
    .dashboard-profile-button > span:not(.profile-chevron) { display: none; }
    .dashboard-sidebar { grid-template-columns: 1fr; }
    .dashboard-sidebar-menu { display: grid; grid-template-columns: repeat(2, 1fr); }
    .sidebar-menu-item { border-bottom: 1px solid var(--black, #151515); border-right: 1px solid var(--black, #151515); }
    .dashboard-content-heading { align-items: flex-start; flex-direction: column; }
    .discover-grid { grid-template-columns: 1fr; }
    .discover-card { max-width: 520px; width: 100%; margin-inline: auto; }
    .member-profile-content { padding: 18px; }
    .member-profile-details { grid-template-columns: 1fr; }
    .member-profile-thumbnails { grid-template-columns: repeat(4, 1fr); }
    .admin-member-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .setup-choice-grid { grid-template-columns: 1fr; }
    .messages-layout { grid-template-columns: 1fr; min-height: auto; }
    .conversation-list { border-right: 0; border-bottom: 2px solid var(--black, #151515); max-height: 260px; }
    .chat-messages { max-height: 480px; }
    .new-match-banner { grid-template-columns: 50px 1fr; }
    .new-match-banner .match-banner-button { grid-column: 1 / -1; }
}


/* =========================================================
   SWIFTDATING DISCOVER FILTERS
========================================================= */

.discover-filter-control {
    position: relative;

    flex-shrink: 0;
}


.discover-filter-details {
    position: relative;
}


.discover-filter-details > summary {
    list-style: none;
}


.discover-filter-details > summary::-webkit-details-marker {
    display: none;
}


.dashboard-filter-button {
    min-height: 44px;

    padding: 9px 14px;

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

    gap: 8px;

    border: 2px solid var(--black);

    background: var(--white);

    box-shadow: 3px 3px 0 var(--black);

    color: var(--black);

    cursor: pointer;

    font-size: 0.72rem;

    font-weight: 900;

    user-select: none;
}


.dashboard-filter-button:hover {
    background: var(--yellow);
}


.discover-filter-details[open]
.dashboard-filter-button {
    background: var(--yellow);
}


.filter-count-badge {
    min-width: 22px;
    height: 22px;

    padding: 0 5px;

    display: inline-grid;
    place-items: center;

    border: 2px solid var(--black);

    border-radius: 999px;

    background: var(--red);

    color: white;

    font-size: 0.6rem;

    line-height: 1;
}


/* =========================================================
   FILTER PANEL
========================================================= */

.discover-filter-panel {
    position: absolute;

    z-index: 100;

    top: calc(100% + 12px);
    right: 0;

    width: min(
            430px,
            calc(100vw - 40px)
    );

    padding: 20px;

    border: 2px solid var(--black);

    background: var(--cream);

    box-shadow: 7px 7px 0 var(--black);
}


.filter-panel-heading {
    margin-bottom: 20px;

    padding-bottom: 16px;

    border-bottom: 2px solid var(--black);
}


.filter-panel-heading h2 {
    margin-top: 4px;

    font-size: 1.65rem;

    line-height: 1;

    letter-spacing: -0.045em;
}


.discover-filter-form {
    display: grid;

    gap: 20px;
}


.filter-fieldset {
    margin: 0;

    padding: 0;

    border: 0;
}


.filter-fieldset legend {
    width: 100%;

    margin-bottom: 10px;

    font-size: 0.7rem;

    font-weight: 900;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}


/* =========================================================
   AGE FILTER
========================================================= */

.filter-age-grid {
    display: grid;

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

    gap: 10px;

    align-items: end;
}


.filter-age-grid label {
    display: grid;

    gap: 6px;
}


.filter-age-grid label span,
.filter-city-field > span {
    font-size: 0.68rem;

    font-weight: 800;
}


.filter-age-grid input,
.filter-city-field input {
    width: 100%;

    min-height: 44px;

    padding: 9px 11px;

    border: 2px solid var(--black);

    border-radius: 0;

    background: var(--white);

    color: var(--black);

    font: inherit;

    font-size: 0.8rem;
}


.filter-age-grid input:focus,
.filter-city-field input:focus {
    outline: 3px solid var(--blue);

    outline-offset: 2px;
}


.filter-age-divider {
    padding-bottom: 13px;

    color: var(--grey);

    font-size: 0.68rem;

    font-weight: 900;
}


/* =========================================================
   LOCATION FILTER
========================================================= */

.filter-city-field {
    display: grid;

    gap: 6px;
}


.filter-checkbox-row {
    margin-top: 12px;

    padding: 12px;

    display: flex;

    align-items: flex-start;

    gap: 11px;

    border: 2px solid var(--black);

    background: var(--white);

    cursor: pointer;
}


.filter-checkbox-row input {
    width: 20px;
    height: 20px;

    margin: 1px 0 0;

    flex-shrink: 0;

    accent-color: var(--red);
}


.filter-checkbox-row > span {
    display: grid;

    gap: 3px;
}


.filter-checkbox-row strong {
    font-size: 0.73rem;
}


.filter-checkbox-row small {
    color: var(--grey);

    font-size: 0.64rem;

    line-height: 1.35;
}


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

.filter-panel-actions {
    display: grid;
}


.filter-apply-button {
    width: 100%;

    min-height: 46px;

    padding: 10px 15px;

    border: 2px solid var(--black);

    background: var(--red);

    color: white;

    box-shadow: 3px 3px 0 var(--black);

    cursor: pointer;

    font: inherit;

    font-size: 0.75rem;

    font-weight: 900;
}


.filter-apply-button:hover {
    transform: translate(-1px, -1px);

    box-shadow: 5px 5px 0 var(--black);
}


.filter-reset-form {
    margin-top: 10px;
}


.filter-reset-button {
    width: 100%;

    min-height: 40px;

    padding: 8px 12px;

    border: 2px solid var(--black);

    background: var(--white);

    cursor: pointer;

    font: inherit;

    font-size: 0.68rem;

    font-weight: 900;
}


.filter-reset-button:hover {
    background: var(--yellow);
}


/* =========================================================
   ACTIVE FILTERS
========================================================= */

.active-filter-summary {
    margin-bottom: 20px;

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 8px;
}


.active-filter-summary > strong {
    font-size: 0.68rem;

    text-transform: uppercase;
}


.active-filter-summary > span {
    padding: 6px 9px;

    border: 2px solid var(--black);

    background: var(--yellow);

    box-shadow: 2px 2px 0 var(--black);

    font-size: 0.65rem;

    font-weight: 900;
}


.filter-save-message {
    margin-bottom: 20px;

    padding: 10px 13px;

    border: 2px solid var(--black);

    background: #c8ebcd;

    box-shadow: 3px 3px 0 var(--black);

    font-size: 0.72rem;

    font-weight: 900;
}


/* =========================================================
   MOBILE FILTERS
========================================================= */

@media (max-width: 700px) {

    .dashboard-content-heading {
        align-items: flex-start;
    }


    .discover-filter-panel {
        position: fixed;

        top: 50%;
        left: 50%;
        right: auto;

        width:
                calc(100vw - 30px);

        max-height:
                calc(100vh - 40px);

        overflow-y: auto;

        transform:
                translate(
                        -50%,
                        -50%
                );

        box-shadow:
                6px 6px 0 var(--black);
    }


    .filter-age-grid {
        grid-template-columns:
            1fr 1fr;
    }


    .filter-age-divider {
        display: none;
    }

}

/* =========================================================
   SWIFTDATING NOTIFICATION BADGES
========================================================= */

.dashboard-nav-link {
    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 7px;
}


.nav-notification-badge {
    min-width: 20px;
    height: 20px;

    padding: 0 5px;

    display: inline-grid;

    place-items: center;

    border: 2px solid var(--black);

    border-radius: 999px;

    background: var(--red);

    color: white;

    box-shadow:
            1px 1px 0 var(--black);

    font-size: 0.56rem;

    font-weight: 900;

    line-height: 1;
}


/* SIDEBAR */

.sidebar-menu-item {
    position: relative;
}


.sidebar-notification-badge {
    min-width: 25px;
    height: 25px;

    margin-left: auto;

    padding: 0 6px;

    display: inline-grid;

    place-items: center;

    flex-shrink: 0;

    border: 2px solid var(--black);

    border-radius: 999px;

    background: var(--red);

    color: white;

    box-shadow:
            2px 2px 0 var(--black);

    font-size: 0.62rem;

    font-weight: 900;

    line-height: 1;
}


/* HIGHLIGHT MENU ITEM WHEN THERE IS ACTIVITY */

.sidebar-menu-item:has(
    .sidebar-notification-badge
) {
    background:
            #fff9e8;
}


/* MOBILE */

@media (max-width: 700px) {

    .nav-notification-badge {
        min-width: 18px;
        height: 18px;

        font-size: 0.52rem;
    }


    .sidebar-notification-badge {
        min-width: 23px;
        height: 23px;
    }

}

/* =========================================================
   MEMBER ACTIVITY
========================================================= */

.discover-meta {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 8px 12px;

    margin-top: 3px;
}


.member-activity {
    display: inline-flex;

    align-items: center;

    gap: 5px;

    color: #6e6962;

    font-size: 0.64rem;

    font-weight: 800;
}


.member-activity-dot {
    width: 8px;
    height: 8px;

    display: inline-block;

    flex-shrink: 0;

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

    border-radius: 50%;

    background:
            #72ca83;
}


.profile-activity {
    margin-top: 8px;
}


.profile-activity
.member-activity {
    padding:
            6px 9px;

    border:
            2px solid var(--black);

    background:
            #e8f4e8;

    box-shadow:
            2px 2px 0 var(--black);

    font-size: 0.68rem;
}

/* =========================================================
   SIDEBAR BADGE ALIGNMENT
========================================================= */

.sidebar-menu-item {
    grid-template-columns:
        34px
        minmax(0, 1fr)
        auto;
}

.sidebar-menu-item > div {
    min-width: 0;
}

.sidebar-notification-badge {
    justify-self: end;
}

/* =========================================================
   SWIFTDATING MESSAGES V2
========================================================= */

.messages-main {
    padding:
            34px 0
            60px;
}


.messages-page-shell {
    width:
            min(
                    var(--shell),
                    calc(100% - 32px)
            );

    margin:
            0 auto;
}


.messages-page-heading {
    margin-bottom:
            24px;

    display:
            flex;

    align-items:
            flex-end;

    justify-content:
            space-between;

    gap:
            20px;
}


.messages-page-heading h1 {
    margin:
            5px 0
            5px;

    font-size:
            clamp(
                    2rem,
                    5vw,
                    3.4rem
            );

    line-height:
            .95;

    letter-spacing:
            -.055em;
}


.messages-page-heading p {
    margin: 0;

    color:
            var(--grey);

    font-size:
            .83rem;
}


.messages-view-matches {
    padding:
            10px 14px;

    border:
            2px solid
            var(--black);

    background:
            var(--yellow);

    box-shadow:
            3px 3px 0
            var(--black);

    color:
            var(--black);

    font-size:
            .7rem;

    font-weight:
            900;

    text-decoration:
            none;
}


.messages-view-matches:hover {
    transform:
            translate(
                    -1px,
                    -1px
            );

    box-shadow:
            5px 5px 0
            var(--black);
}


/* =========================================================
   WORKSPACE
========================================================= */

.messages-workspace {
    min-height:
            680px;

    display:
            grid;

    grid-template-columns:
        330px
        minmax(
            0,
            1fr
        );

    border:
            2px solid
            var(--black);

    background:
            var(--white);

    box-shadow:
            7px 7px 0
            var(--black);

    overflow:
            hidden;
}


/* =========================================================
   CONVERSATION SIDEBAR
========================================================= */

.messages-conversation-panel {
    min-width: 0;

    border-right:
            2px solid
            var(--black);

    background:
            var(--cream);
}


.messages-conversation-heading {
    min-height:
            60px;

    padding:
            14px 16px;

    display:
            flex;

    align-items:
            center;

    justify-content:
            space-between;

    gap:
            12px;

    border-bottom:
            2px solid
            var(--black);

    background:
            var(--yellow);
}


.messages-conversation-heading strong {
    font-size:
            .82rem;

    font-weight:
            900;
}


.messages-conversation-heading span {
    min-width:
            28px;

    height:
            28px;

    padding:
            0 7px;

    display:
            inline-grid;

    place-items:
            center;

    border:
            2px solid
            var(--black);

    border-radius:
            999px;

    background:
            var(--white);

    font-size:
            .62rem;

    font-weight:
            900;
}


.messages-conversation-list {
    max-height:
            618px;

    overflow-y:
            auto;
}


.message-conversation-item {
    min-height:
            94px;

    padding:
            13px;

    display:
            grid;

    grid-template-columns:
        58px
        minmax(
            0,
            1fr
        );

    gap:
            11px;

    align-items:
            center;

    border-bottom:
            2px solid
            var(--black);

    background:
            var(--white);

    color:
            var(--black);

    text-decoration:
            none;

    transition:
            background .12s ease,
            transform .12s ease;
}


.message-conversation-item:hover {
    background:
            #fff5d0;
}


.message-conversation-item.active {
    background:
            var(--yellow);
}


.message-conversation-item.unread {
    background:
            #fff2f2;
}


.message-conversation-item.unread.active {
    background:
            var(--yellow);
}


.message-conversation-photo {
    width:
            58px;

    height:
            58px;

    border:
            2px solid
            var(--black);

    border-radius:
            50%;

    overflow:
            hidden;

    background:
            var(--pink);

    box-shadow:
            2px 2px 0
            var(--black);
}


.message-conversation-photo img {
    width:
            100%;

    height:
            100%;

    display:
            block;

    object-fit:
            cover;
}


.message-conversation-content {
    min-width: 0;
}


.message-conversation-top {
    display:
            flex;

    align-items:
            center;

    justify-content:
            space-between;

    gap:
            8px;
}


.message-conversation-top strong {
    min-width: 0;

    overflow:
            hidden;

    text-overflow:
            ellipsis;

    white-space:
            nowrap;

    font-size:
            .78rem;

    font-weight:
            900;
}


.message-conversation-top time {
    flex-shrink:
            0;

    color:
            var(--grey);

    font-size:
            .56rem;

    font-weight:
            800;
}


.message-conversation-preview {
    margin-top:
            4px;

    display:
            flex;

    align-items:
            center;

    justify-content:
            space-between;

    gap:
            8px;
}


.message-conversation-preview > span {
    min-width:
            0;

    overflow:
            hidden;

    text-overflow:
            ellipsis;

    white-space:
            nowrap;

    color:
            #615d57;

    font-size:
            .65rem;
}


.message-conversation-preview strong {
    color:
            var(--black);
}


.conversation-unread-badge {
    min-width:
            23px;

    height:
            23px;

    padding:
            0 5px;

    display:
            inline-grid;

    place-items:
            center;

    flex-shrink:
            0;

    border:
            2px solid
            var(--black);

    border-radius:
            999px;

    background:
            var(--red);

    color:
            white;

    font-size:
            .56rem;

    line-height:
            1;
}


.conversation-activity {
    margin-top:
            5px;

    display:
            block;

    color:
            #79736c;

    font-size:
            .55rem;

    font-weight:
            800;
}


/* =========================================================
   NO CONVERSATIONS
========================================================= */

.messages-no-conversations {
    padding:
            60px 24px;

    text-align:
            center;
}


.messages-no-conversations > div {
    width:
            58px;

    height:
            58px;

    margin:
            0 auto
            16px;

    display:
            grid;

    place-items:
            center;

    border:
            2px solid
            var(--black);

    border-radius:
            50%;

    background:
            var(--pink);

    box-shadow:
            3px 3px 0
            var(--black);

    font-size:
            1.7rem;
}


.messages-no-conversations strong {
    display:
            block;

    font-size:
            .9rem;
}


.messages-no-conversations p {
    margin:
            8px 0
            20px;

    color:
            var(--grey);

    font-size:
            .7rem;

    line-height:
            1.5;
}


/* =========================================================
   CHAT PANEL
========================================================= */

.messages-chat-panel {
    min-width:
            0;

    display:
            flex;

    flex-direction:
            column;

    background:
            #faf7f1;
}


/* =========================================================
   CHAT HEADER
========================================================= */

.messages-chat-header {
    min-height:
            72px;

    padding:
            10px 16px;

    display:
            flex;

    align-items:
            center;

    justify-content:
            space-between;

    gap:
            14px;

    border-bottom:
            2px solid
            var(--black);

    background:
            var(--white);
}


.messages-chat-person {
    min-width:
            0;

    display:
            flex;

    align-items:
            center;

    gap:
            10px;

    color:
            var(--black);

    text-decoration:
            none;
}


.messages-chat-person img {
    width:
            48px;

    height:
            48px;

    flex-shrink:
            0;

    border:
            2px solid
            var(--black);

    border-radius:
            50%;

    object-fit:
            cover;

    box-shadow:
            2px 2px 0
            var(--black);
}


.messages-chat-person > div {
    min-width:
            0;

    display:
            grid;

    gap:
            4px;
}


.messages-chat-person strong {
    overflow:
            hidden;

    text-overflow:
            ellipsis;

    white-space:
            nowrap;

    font-size:
            .82rem;

    font-weight:
            900;
}


.messages-chat-person span {
    display:
            inline-flex;

    align-items:
            center;

    gap:
            5px;

    color:
            var(--grey);

    font-size:
            .6rem;

    font-weight:
            800;
}


.messages-profile-link {
    flex-shrink:
            0;

    padding:
            8px 10px;

    border:
            2px solid
            var(--black);

    background:
            var(--cream);

    color:
            var(--black);

    font-size:
            .62rem;

    font-weight:
            900;

    text-decoration:
            none;
}


.messages-profile-link:hover {
    background:
            var(--yellow);
}


/* =========================================================
   CHAT BODY
========================================================= */

.messages-chat-body {
    height:
            510px;

    padding:
            24px;

    overflow-y:
            auto;

    display:
            flex;

    flex-direction:
            column;

    gap:
            11px;

    background:
            #faf7f1;
}


.message-match-marker {
    width:
            fit-content;

    max-width:
            360px;

    margin:
            0 auto
            22px;

    padding:
            12px 18px;

    display:
            grid;

    justify-items:
            center;

    gap:
            3px;

    border:
            2px solid
            var(--black);

    background:
            var(--yellow);

    box-shadow:
            3px 3px 0
            var(--black);

    text-align:
            center;
}


.message-match-marker > div {
    font-size:
            1.2rem;
}


.message-match-marker strong {
    font-size:
            .72rem;

    font-weight:
            900;

    text-transform:
            uppercase;
}


.message-match-marker span {
    color:
            #625d55;

    font-size:
            .58rem;

    font-weight:
            800;
}


/* =========================================================
   MESSAGE BUBBLES
========================================================= */

.message-row {
    width:
            100%;

    display:
            flex;
}


.message-row.mine {
    justify-content:
            flex-end;
}


.message-row.theirs {
    justify-content:
            flex-start;
}


.message-bubble {
    max-width:
            min(
                    72%,
                    560px
            );

    padding:
            11px 13px;

    border:
            2px solid
            var(--black);

    box-shadow:
            3px 3px 0
            var(--black);
}


.message-row.mine
.message-bubble {
    background:
            var(--red);

    color:
            white;
}


.message-row.theirs
.message-bubble {
    background:
            var(--white);

    color:
            var(--black);
}


.message-bubble-text {
    font-size:
            .76rem;

    line-height:
            1.55;

    overflow-wrap:
            anywhere;
}


.message-bubble-meta {
    margin-top:
            5px;

    display:
            flex;

    justify-content:
            flex-end;

    align-items:
            center;

    gap:
            7px;
}


.message-bubble-meta time {
    opacity:
            .72;

    font-size:
            .52rem;

    font-weight:
            800;
}


.message-seen {
    font-size:
            .52rem;

    font-weight:
            900;
}


/* =========================================================
   NEW MATCH EMPTY CHAT
========================================================= */

.messages-new-match-empty {
    margin:
            auto;

    padding:
            34px;

    text-align:
            center;
}


.messages-new-match-empty > div {
    width:
            64px;

    height:
            64px;

    margin:
            0 auto
            15px;

    display:
            grid;

    place-items:
            center;

    border:
            2px solid
            var(--black);

    border-radius:
            50%;

    background:
            var(--red);

    color:
            white;

    box-shadow:
            4px 4px 0
            var(--black);

    font-size:
            1.7rem;
}


.messages-new-match-empty strong {
    display:
            block;

    font-size:
            1.1rem;
}


.messages-new-match-empty p {
    margin:
            7px 0 0;

    color:
            var(--grey);

    font-size:
            .72rem;
}


/* =========================================================
   COMPOSER
========================================================= */

.messages-composer-wrap {
    border-top:
            2px solid
            var(--black);

    background:
            var(--white);
}


.message-compose-error {
    padding:
            9px 14px;

    border-bottom:
            2px solid
            var(--black);

    background:
            #ffd8d8;

    font-size:
            .68rem;

    font-weight:
            900;
}


.messages-composer {
    padding:
            13px;

    display:
            grid;

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

    gap:
            10px;

    align-items:
            end;
}


.messages-textarea-wrap {
    min-width:
            0;

    border:
            2px solid
            var(--black);

    background:
            var(--cream);
}


.messages-textarea-wrap textarea {
    width:
            100%;

    min-height:
            48px;

    max-height:
            160px;

    padding:
            12px;

    display:
            block;

    resize:
            none;

    overflow-y:
            auto;

    border:
            0;

    outline:
            0;

    background:
            transparent;

    color:
            var(--black);

    font:
            inherit;

    font-size:
            .74rem;

    line-height:
            1.45;
}


.messages-textarea-wrap textarea::placeholder {
    color:
            #888078;
}


.messages-textarea-wrap:focus-within {
    outline:
            3px solid
            var(--blue);

    outline-offset:
            2px;
}


.messages-composer-meta {
    padding:
            0 10px
            8px;

    display:
            flex;

    align-items:
            center;

    justify-content:
            space-between;

    gap:
            12px;

    color:
            var(--grey);

    font-size:
            .53rem;

    font-weight:
            700;
}


.messages-send-button {
    min-width:
            94px;

    min-height:
            48px;

    padding:
            10px 16px;

    display:
            inline-flex;

    align-items:
            center;

    justify-content:
            center;

    gap:
            7px;

    border:
            2px solid
            var(--black);

    background:
            var(--red);

    color:
            white;

    box-shadow:
            3px 3px 0
            var(--black);

    cursor:
            pointer;

    font:
            inherit;

    font-size:
            .72rem;

    font-weight:
            900;
}


.messages-send-button:hover {
    transform:
            translate(
                    -1px,
                    -1px
            );

    box-shadow:
            5px 5px 0
            var(--black);
}


.messages-send-button:active {
    transform:
            translate(
                    2px,
                    2px
            );

    box-shadow:
            1px 1px 0
            var(--black);
}


/* =========================================================
   SELECT CONVERSATION
========================================================= */

.messages-select-conversation {
    min-height:
            680px;

    padding:
            40px;

    display:
            flex;

    flex-direction:
            column;

    align-items:
            center;

    justify-content:
            center;

    text-align:
            center;
}


.messages-select-icon {
    width:
            78px;

    height:
            78px;

    margin-bottom:
            20px;

    display:
            grid;

    place-items:
            center;

    border:
            2px solid
            var(--black);

    border-radius:
            50%;

    background:
            var(--pink);

    box-shadow:
            5px 5px 0
            var(--black);

    font-size:
            2rem;
}


.messages-select-conversation h2 {
    margin:
            7px 0;

    font-size:
            2rem;

    line-height:
            1;

    letter-spacing:
            -.04em;
}


.messages-select-conversation p {
    max-width:
            390px;

    margin:
            0 0
            20px;

    color:
            var(--grey);

    font-size:
            .76rem;

    line-height:
            1.5;
}


/* =========================================================
   TABLET
========================================================= */

@media (
max-width: 900px
) {

    .messages-workspace {
        grid-template-columns:
            270px
            minmax(
                0,
                1fr
            );
    }


    .message-conversation-item {
        grid-template-columns:
            48px
            minmax(
                0,
                1fr
            );
    }


    .message-conversation-photo {
        width:
                48px;

        height:
                48px;
    }


    .message-bubble {
        max-width:
                82%;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (
max-width: 700px
) {

    .messages-main {
        padding-top:
                18px;
    }


    .messages-page-heading {
        align-items:
                flex-start;

        flex-direction:
                column;
    }


    .messages-workspace {
        display:
                block;

        min-height:
                0;
    }


    .messages-conversation-panel {
        border-right:
                0;

        border-bottom:
                2px solid
                var(--black);
    }


    .messages-conversation-list {
        max-height:
                300px;
    }


    .messages-chat-body {
        height:
                480px;

        padding:
                16px;
    }


    .message-bubble {
        max-width:
                88%;
    }


    .messages-composer {
        grid-template-columns:
            1fr;
    }


    .messages-send-button {
        width:
                100%;
    }


    .messages-composer-meta > span:first-child {
        display:
                none;
    }


    .messages-select-conversation {
        min-height:
                420px;
    }


    .messages-chat-header {
        padding:
                9px 11px;
    }


    .messages-profile-link {
        font-size:
                .56rem;
    }

}

/* =========================================================
   SWIFTDATING MATCH MODAL
========================================================= */

body.match-modal-open {
    overflow: hidden;
}


.match-modal-backdrop {
    position: fixed;

    z-index: 9999;

    inset: 0;

    padding: 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(21, 21, 21, .72);

    backdrop-filter: blur(3px);

    animation: matchBackdropIn .18s ease-out both;
}


.match-modal-backdrop.is-closing {
    animation: matchBackdropOut .16s ease-in both;
}


.match-modal {
    position: relative;

    width: min(520px, 100%);

    padding: 42px 38px 34px;

    overflow: hidden;

    border: 3px solid var(--black);

    background: var(--cream);

    box-shadow:
            10px 10px 0 var(--black);

    text-align: center;

    animation:
            matchModalIn .28s
            cubic-bezier(.2, .8, .2, 1.15)
            both;
}


.match-modal-backdrop.is-closing
.match-modal {
    animation:
            matchModalOut .15s
            ease-in
            both;
}


/* CLOSE */

.match-modal-close {
    position: absolute;

    z-index: 5;

    top: 12px;
    right: 12px;

    width: 38px;
    height: 38px;

    padding: 0;

    display: grid;

    place-items: center;

    border: 2px solid var(--black);

    border-radius: 50%;

    background: var(--white);

    box-shadow: 2px 2px 0 var(--black);

    color: var(--black);

    cursor: pointer;

    font: inherit;

    font-size: .9rem;

    font-weight: 900;
}


.match-modal-close:hover {
    background: var(--yellow);
}


/* HEADING */

.match-modal-eyebrow {
    display: inline-block;

    margin-bottom: 8px;

    padding: 5px 9px;

    border: 2px solid var(--black);

    background: var(--yellow);

    box-shadow: 2px 2px 0 var(--black);

    font-size: .6rem;

    font-weight: 900;

    letter-spacing: .08em;
}


.match-modal h2 {
    margin: 7px 0 8px;

    color: var(--red);

    font-size: clamp(
            2.8rem,
            10vw,
            4.5rem
    );

    line-height: .88;

    letter-spacing: -.075em;

    transform: rotate(-2deg);
}


.match-modal-intro {
    margin:
            12px auto
            28px;

    max-width: 360px;

    color: var(--black);

    font-size: .82rem;

    line-height: 1.45;
}


/* PHOTOS */

.match-modal-photos {
    position: relative;

    min-height: 190px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 8px;
}


.match-modal-photo {
    position: relative;

    z-index: 1;

    width: 168px;
    height: 168px;

    border: 3px solid var(--black);

    border-radius: 50%;

    overflow: hidden;

    background: var(--pink);

    box-shadow:
            6px 6px 0 var(--black);
}


.match-modal-photo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.match-modal-photo-me {
    transform:
            translateX(18px)
            rotate(-6deg);
}


.match-modal-photo-them {
    transform:
            translateX(-18px)
            rotate(6deg);
}


.match-modal-heart {
    position: relative;

    z-index: 4;

    width: 68px;
    height: 68px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border: 3px solid var(--black);

    border-radius: 50%;

    background: var(--red);

    color: white;

    box-shadow:
            4px 4px 0 var(--black);

    font-size: 1.8rem;

    transform: rotate(-6deg);

    animation:
            matchHeartBeat
            1.1s ease-in-out
            infinite;
}


/* NAMES */

.match-modal-names {
    margin:
            8px auto
            18px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 45px;

    font-size: .74rem;

    font-weight: 900;
}


.match-modal-message {
    margin:
            0 0 20px;

    font-size: .75rem;

    font-weight: 800;
}


/* BUTTONS */

.match-modal-actions {
    display: grid;

    gap: 10px;
}


.match-modal-message-button,
.match-modal-continue-button {
    width: 100%;

    min-height: 50px;

    padding: 11px 16px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 2px solid var(--black);

    color: var(--black);

    cursor: pointer;

    font: inherit;

    font-size: .74rem;

    font-weight: 900;

    text-decoration: none;
}


.match-modal-message-button {
    background: var(--red);

    color: white;

    box-shadow:
            4px 4px 0 var(--black);
}


.match-modal-message-button:hover {
    transform:
            translate(-1px, -1px);

    box-shadow:
            6px 6px 0 var(--black);
}


.match-modal-continue-button {
    background: var(--white);

    box-shadow:
            3px 3px 0 var(--black);
}


.match-modal-continue-button:hover {
    background: var(--yellow);
}


/* DECORATIONS */

.match-modal-confetti {
    position: absolute;

    pointer-events: none;

    font-weight: 900;
}


.match-modal-confetti-one {
    top: 75px;
    left: 30px;

    color: var(--red);

    font-size: 1.4rem;

    transform: rotate(-18deg);
}


.match-modal-confetti-two {
    top: 135px;
    right: 35px;

    color: var(--pink);

    font-size: 1.3rem;

    transform: rotate(14deg);
}


.match-modal-confetti-three {
    bottom: 145px;
    left: 26px;

    color: var(--blue);

    font-size: 1.5rem;

    transform: rotate(10deg);
}


.match-modal-confetti-four {
    bottom: 92px;
    right: 30px;

    color: var(--yellow);

    -webkit-text-stroke:
            1px var(--black);

    font-size: 1.3rem;
}


/* ANIMATION */

@keyframes matchModalIn {

    from {
        opacity: 0;

        transform:
                translateY(25px)
                scale(.88)
                rotate(-1deg);
    }

    to {
        opacity: 1;

        transform:
                translateY(0)
                scale(1)
                rotate(0);
    }

}


@keyframes matchModalOut {

    from {
        opacity: 1;

        transform:
                scale(1);
    }

    to {
        opacity: 0;

        transform:
                scale(.94);
    }

}


@keyframes matchBackdropIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}


@keyframes matchBackdropOut {

    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }

}


@keyframes matchHeartBeat {

    0%,
    100% {
        transform:
                rotate(-6deg)
                scale(1);
    }

    50% {
        transform:
                rotate(-6deg)
                scale(1.09);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .match-modal-backdrop {
        padding: 14px;
    }


    .match-modal {
        padding:
                42px 18px
                24px;

        box-shadow:
                6px 6px 0 var(--black);
    }


    .match-modal h2 {
        font-size: 3rem;
    }


    .match-modal-photo {
        width: 125px;
        height: 125px;
    }


    .match-modal-heart {
        width: 55px;
        height: 55px;

        font-size: 1.4rem;
    }


    .match-modal-photos {
        min-height: 145px;
    }


    .match-modal-photo-me {
        transform:
                translateX(12px)
                rotate(-5deg);
    }


    .match-modal-photo-them {
        transform:
                translateX(-12px)
                rotate(5deg);
    }


    .match-modal-names {
        gap: 30px;
    }

}

/* Live messages preserve line breaks safely */

.message-bubble-text {
    white-space: pre-wrap;
}

/* =========================================================
   SWIFTDATING MESSAGES V2
========================================================= */

.messages-main {
    padding:
            34px 0
            60px;
}


.messages-page-shell {
    width:
            min(
                    var(--shell),
                    calc(100% - 32px)
            );

    margin:
            0 auto;
}


.messages-page-heading {
    margin-bottom:
            24px;

    display:
            flex;

    align-items:
            flex-end;

    justify-content:
            space-between;

    gap:
            20px;
}


.messages-page-heading h1 {
    margin:
            5px 0
            5px;

    font-size:
            clamp(
                    2rem,
                    5vw,
                    3.4rem
            );

    line-height:
            .95;

    letter-spacing:
            -.055em;
}


.messages-page-heading p {
    margin: 0;

    color:
            var(--grey);

    font-size:
            .83rem;
}


.messages-view-matches {
    padding:
            10px 14px;

    border:
            2px solid
            var(--black);

    background:
            var(--yellow);

    box-shadow:
            3px 3px 0
            var(--black);

    color:
            var(--black);

    font-size:
            .7rem;

    font-weight:
            900;

    text-decoration:
            none;
}


.messages-view-matches:hover {
    transform:
            translate(
                    -1px,
                    -1px
            );

    box-shadow:
            5px 5px 0
            var(--black);
}


/* =========================================================
   WORKSPACE
========================================================= */

.messages-workspace {
    min-height:
            680px;

    display:
            grid;

    grid-template-columns:
        330px
        minmax(
            0,
            1fr
        );

    border:
            2px solid
            var(--black);

    background:
            var(--white);

    box-shadow:
            7px 7px 0
            var(--black);

    overflow:
            hidden;
}


/* =========================================================
   CONVERSATION SIDEBAR
========================================================= */

.messages-conversation-panel {
    min-width: 0;

    border-right:
            2px solid
            var(--black);

    background:
            var(--cream);
}


.messages-conversation-heading {
    min-height:
            60px;

    padding:
            14px 16px;

    display:
            flex;

    align-items:
            center;

    justify-content:
            space-between;

    gap:
            12px;

    border-bottom:
            2px solid
            var(--black);

    background:
            var(--yellow);
}


.messages-conversation-heading strong {
    font-size:
            .82rem;

    font-weight:
            900;
}


.messages-conversation-heading span {
    min-width:
            28px;

    height:
            28px;

    padding:
            0 7px;

    display:
            inline-grid;

    place-items:
            center;

    border:
            2px solid
            var(--black);

    border-radius:
            999px;

    background:
            var(--white);

    font-size:
            .62rem;

    font-weight:
            900;
}


.messages-conversation-list {
    max-height:
            618px;

    overflow-y:
            auto;
}


.message-conversation-item {
    min-height:
            94px;

    padding:
            13px;

    display:
            grid;

    grid-template-columns:
        58px
        minmax(
            0,
            1fr
        );

    gap:
            11px;

    align-items:
            center;

    border-bottom:
            2px solid
            var(--black);

    background:
            var(--white);

    color:
            var(--black);

    text-decoration:
            none;

    transition:
            background .12s ease,
            transform .12s ease;
}


.message-conversation-item:hover {
    background:
            #fff5d0;
}


.message-conversation-item.active {
    background:
            var(--yellow);
}


.message-conversation-item.unread {
    background:
            #fff2f2;
}


.message-conversation-item.unread.active {
    background:
            var(--yellow);
}


.message-conversation-photo {
    width:
            58px;

    height:
            58px;

    border:
            2px solid
            var(--black);

    border-radius:
            50%;

    overflow:
            hidden;

    background:
            var(--pink);

    box-shadow:
            2px 2px 0
            var(--black);
}


.message-conversation-photo img {
    width:
            100%;

    height:
            100%;

    display:
            block;

    object-fit:
            cover;
}


.message-conversation-content {
    min-width: 0;
}


.message-conversation-top {
    display:
            flex;

    align-items:
            center;

    justify-content:
            space-between;

    gap:
            8px;
}


.message-conversation-top strong {
    min-width: 0;

    overflow:
            hidden;

    text-overflow:
            ellipsis;

    white-space:
            nowrap;

    font-size:
            .78rem;

    font-weight:
            900;
}


.message-conversation-top time {
    flex-shrink:
            0;

    color:
            var(--grey);

    font-size:
            .56rem;

    font-weight:
            800;
}


.message-conversation-preview {
    margin-top:
            4px;

    display:
            flex;

    align-items:
            center;

    justify-content:
            space-between;

    gap:
            8px;
}


.message-conversation-preview > span {
    min-width:
            0;

    overflow:
            hidden;

    text-overflow:
            ellipsis;

    white-space:
            nowrap;

    color:
            #615d57;

    font-size:
            .65rem;
}


.message-conversation-preview strong {
    color:
            var(--black);
}


.conversation-unread-badge {
    min-width:
            23px;

    height:
            23px;

    padding:
            0 5px;

    display:
            inline-grid;

    place-items:
            center;

    flex-shrink:
            0;

    border:
            2px solid
            var(--black);

    border-radius:
            999px;

    background:
            var(--red);

    color:
            white;

    font-size:
            .56rem;

    line-height:
            1;
}


.conversation-activity {
    margin-top:
            5px;

    display:
            block;

    color:
            #79736c;

    font-size:
            .55rem;

    font-weight:
            800;
}


/* =========================================================
   NO CONVERSATIONS
========================================================= */

.messages-no-conversations {
    padding:
            60px 24px;

    text-align:
            center;
}


.messages-no-conversations > div {
    width:
            58px;

    height:
            58px;

    margin:
            0 auto
            16px;

    display:
            grid;

    place-items:
            center;

    border:
            2px solid
            var(--black);

    border-radius:
            50%;

    background:
            var(--pink);

    box-shadow:
            3px 3px 0
            var(--black);

    font-size:
            1.7rem;
}


.messages-no-conversations strong {
    display:
            block;

    font-size:
            .9rem;
}


.messages-no-conversations p {
    margin:
            8px 0
            20px;

    color:
            var(--grey);

    font-size:
            .7rem;

    line-height:
            1.5;
}


/* =========================================================
   CHAT PANEL
========================================================= */

.messages-chat-panel {
    min-width:
            0;

    display:
            flex;

    flex-direction:
            column;

    background:
            #faf7f1;
}


/* =========================================================
   CHAT HEADER
========================================================= */

.messages-chat-header {
    min-height:
            72px;

    padding:
            10px 16px;

    display:
            flex;

    align-items:
            center;

    justify-content:
            space-between;

    gap:
            14px;

    border-bottom:
            2px solid
            var(--black);

    background:
            var(--white);
}


.messages-chat-person {
    min-width:
            0;

    display:
            flex;

    align-items:
            center;

    gap:
            10px;

    color:
            var(--black);

    text-decoration:
            none;
}


.messages-chat-person img {
    width:
            48px;

    height:
            48px;

    flex-shrink:
            0;

    border:
            2px solid
            var(--black);

    border-radius:
            50%;

    object-fit:
            cover;

    box-shadow:
            2px 2px 0
            var(--black);
}


.messages-chat-person > div {
    min-width:
            0;

    display:
            grid;

    gap:
            4px;
}


.messages-chat-person strong {
    overflow:
            hidden;

    text-overflow:
            ellipsis;

    white-space:
            nowrap;

    font-size:
            .82rem;

    font-weight:
            900;
}


.messages-chat-person span {
    display:
            inline-flex;

    align-items:
            center;

    gap:
            5px;

    color:
            var(--grey);

    font-size:
            .6rem;

    font-weight:
            800;
}


.messages-profile-link {
    flex-shrink:
            0;

    padding:
            8px 10px;

    border:
            2px solid
            var(--black);

    background:
            var(--cream);

    color:
            var(--black);

    font-size:
            .62rem;

    font-weight:
            900;

    text-decoration:
            none;
}


.messages-profile-link:hover {
    background:
            var(--yellow);
}


/* =========================================================
   CHAT BODY
========================================================= */

.messages-chat-body {
    height:
            510px;

    padding:
            24px;

    overflow-y:
            auto;

    display:
            flex;

    flex-direction:
            column;

    gap:
            11px;

    background:
            #faf7f1;
}


.message-match-marker {
    width:
            fit-content;

    max-width:
            360px;

    margin:
            0 auto
            22px;

    padding:
            12px 18px;

    display:
            grid;

    justify-items:
            center;

    gap:
            3px;

    border:
            2px solid
            var(--black);

    background:
            var(--yellow);

    box-shadow:
            3px 3px 0
            var(--black);

    text-align:
            center;
}


.message-match-marker > div {
    font-size:
            1.2rem;
}


.message-match-marker strong {
    font-size:
            .72rem;

    font-weight:
            900;

    text-transform:
            uppercase;
}


.message-match-marker span {
    color:
            #625d55;

    font-size:
            .58rem;

    font-weight:
            800;
}


/* =========================================================
   MESSAGE BUBBLES
========================================================= */

.message-row {
    width:
            100%;

    display:
            flex;
}


.message-row.mine {
    justify-content:
            flex-end;
}


.message-row.theirs {
    justify-content:
            flex-start;
}


.message-bubble {
    max-width:
            min(
                    72%,
                    560px
            );

    padding:
            11px 13px;

    border:
            2px solid
            var(--black);

    box-shadow:
            3px 3px 0
            var(--black);
}


.message-row.mine
.message-bubble {
    background:
            var(--red);

    color:
            white;
}


.message-row.theirs
.message-bubble {
    background:
            var(--white);

    color:
            var(--black);
}


.message-bubble-text {
    font-size:
            .76rem;

    line-height:
            1.55;

    overflow-wrap:
            anywhere;
}


.message-bubble-meta {
    margin-top:
            5px;

    display:
            flex;

    justify-content:
            flex-end;

    align-items:
            center;

    gap:
            7px;
}


.message-bubble-meta time {
    opacity:
            .72;

    font-size:
            .52rem;

    font-weight:
            800;
}


.message-seen {
    font-size:
            .52rem;

    font-weight:
            900;
}


/* =========================================================
   NEW MATCH EMPTY CHAT
========================================================= */

.messages-new-match-empty {
    margin:
            auto;

    padding:
            34px;

    text-align:
            center;
}


.messages-new-match-empty > div {
    width:
            64px;

    height:
            64px;

    margin:
            0 auto
            15px;

    display:
            grid;

    place-items:
            center;

    border:
            2px solid
            var(--black);

    border-radius:
            50%;

    background:
            var(--red);

    color:
            white;

    box-shadow:
            4px 4px 0
            var(--black);

    font-size:
            1.7rem;
}


.messages-new-match-empty strong {
    display:
            block;

    font-size:
            1.1rem;
}


.messages-new-match-empty p {
    margin:
            7px 0 0;

    color:
            var(--grey);

    font-size:
            .72rem;
}


/* =========================================================
   COMPOSER
========================================================= */

.messages-composer-wrap {
    border-top:
            2px solid
            var(--black);

    background:
            var(--white);
}


.message-compose-error {
    padding:
            9px 14px;

    border-bottom:
            2px solid
            var(--black);

    background:
            #ffd8d8;

    font-size:
            .68rem;

    font-weight:
            900;
}


.messages-composer {
    padding:
            13px;

    display:
            grid;

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

    gap:
            10px;

    align-items:
            end;
}


.messages-textarea-wrap {
    min-width:
            0;

    border:
            2px solid
            var(--black);

    background:
            var(--cream);
}


.messages-textarea-wrap textarea {
    width:
            100%;

    min-height:
            48px;

    max-height:
            160px;

    padding:
            12px;

    display:
            block;

    resize:
            none;

    overflow-y:
            auto;

    border:
            0;

    outline:
            0;

    background:
            transparent;

    color:
            var(--black);

    font:
            inherit;

    font-size:
            .74rem;

    line-height:
            1.45;
}


.messages-textarea-wrap textarea::placeholder {
    color:
            #888078;
}


.messages-textarea-wrap:focus-within {
    outline:
            3px solid
            var(--blue);

    outline-offset:
            2px;
}


.messages-composer-meta {
    padding:
            0 10px
            8px;

    display:
            flex;

    align-items:
            center;

    justify-content:
            space-between;

    gap:
            12px;

    color:
            var(--grey);

    font-size:
            .53rem;

    font-weight:
            700;
}


.messages-send-button {
    min-width:
            94px;

    min-height:
            48px;

    padding:
            10px 16px;

    display:
            inline-flex;

    align-items:
            center;

    justify-content:
            center;

    gap:
            7px;

    border:
            2px solid
            var(--black);

    background:
            var(--red);

    color:
            white;

    box-shadow:
            3px 3px 0
            var(--black);

    cursor:
            pointer;

    font:
            inherit;

    font-size:
            .72rem;

    font-weight:
            900;
}


.messages-send-button:hover {
    transform:
            translate(
                    -1px,
                    -1px
            );

    box-shadow:
            5px 5px 0
            var(--black);
}


.messages-send-button:active {
    transform:
            translate(
                    2px,
                    2px
            );

    box-shadow:
            1px 1px 0
            var(--black);
}


/* =========================================================
   SELECT CONVERSATION
========================================================= */

.messages-select-conversation {
    min-height:
            680px;

    padding:
            40px;

    display:
            flex;

    flex-direction:
            column;

    align-items:
            center;

    justify-content:
            center;

    text-align:
            center;
}


.messages-select-icon {
    width:
            78px;

    height:
            78px;

    margin-bottom:
            20px;

    display:
            grid;

    place-items:
            center;

    border:
            2px solid
            var(--black);

    border-radius:
            50%;

    background:
            var(--pink);

    box-shadow:
            5px 5px 0
            var(--black);

    font-size:
            2rem;
}


.messages-select-conversation h2 {
    margin:
            7px 0;

    font-size:
            2rem;

    line-height:
            1;

    letter-spacing:
            -.04em;
}


.messages-select-conversation p {
    max-width:
            390px;

    margin:
            0 0
            20px;

    color:
            var(--grey);

    font-size:
            .76rem;

    line-height:
            1.5;
}


/* =========================================================
   TABLET
========================================================= */

@media (
max-width: 900px
) {

    .messages-workspace {
        grid-template-columns:
            270px
            minmax(
                0,
                1fr
            );
    }


    .message-conversation-item {
        grid-template-columns:
            48px
            minmax(
                0,
                1fr
            );
    }


    .message-conversation-photo {
        width:
                48px;

        height:
                48px;
    }


    .message-bubble {
        max-width:
                82%;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (
max-width: 700px
) {

    .messages-main {
        padding-top:
                18px;
    }


    .messages-page-heading {
        align-items:
                flex-start;

        flex-direction:
                column;
    }


    .messages-workspace {
        display:
                block;

        min-height:
                0;
    }


    .messages-conversation-panel {
        border-right:
                0;

        border-bottom:
                2px solid
                var(--black);
    }


    .messages-conversation-list {
        max-height:
                300px;
    }


    .messages-chat-body {
        height:
                480px;

        padding:
                16px;
    }


    .message-bubble {
        max-width:
                88%;
    }


    .messages-composer {
        grid-template-columns:
            1fr;
    }


    .messages-send-button {
        width:
                100%;
    }


    .messages-composer-meta > span:first-child {
        display:
                none;
    }


    .messages-select-conversation {
        min-height:
                420px;
    }


    .messages-chat-header {
        padding:
                9px 11px;
    }


    .messages-profile-link {
        font-size:
                .56rem;
    }

}

/* =========================================================
   SWIFTDATING MATCH MODAL
========================================================= */

body.match-modal-open {
    overflow: hidden;
}


.match-modal-backdrop {
    position: fixed;

    z-index: 9999;

    inset: 0;

    padding: 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(21, 21, 21, .72);

    backdrop-filter: blur(3px);

    animation: matchBackdropIn .18s ease-out both;
}


.match-modal-backdrop.is-closing {
    animation: matchBackdropOut .16s ease-in both;
}


.match-modal {
    position: relative;

    width: min(520px, 100%);

    padding: 42px 38px 34px;

    overflow: hidden;

    border: 3px solid var(--black);

    background: var(--cream);

    box-shadow:
            10px 10px 0 var(--black);

    text-align: center;

    animation:
            matchModalIn .28s
            cubic-bezier(.2, .8, .2, 1.15)
            both;
}


.match-modal-backdrop.is-closing
.match-modal {
    animation:
            matchModalOut .15s
            ease-in
            both;
}


/* CLOSE */

.match-modal-close {
    position: absolute;

    z-index: 5;

    top: 12px;
    right: 12px;

    width: 38px;
    height: 38px;

    padding: 0;

    display: grid;

    place-items: center;

    border: 2px solid var(--black);

    border-radius: 50%;

    background: var(--white);

    box-shadow: 2px 2px 0 var(--black);

    color: var(--black);

    cursor: pointer;

    font: inherit;

    font-size: .9rem;

    font-weight: 900;
}


.match-modal-close:hover {
    background: var(--yellow);
}


/* HEADING */

.match-modal-eyebrow {
    display: inline-block;

    margin-bottom: 8px;

    padding: 5px 9px;

    border: 2px solid var(--black);

    background: var(--yellow);

    box-shadow: 2px 2px 0 var(--black);

    font-size: .6rem;

    font-weight: 900;

    letter-spacing: .08em;
}


.match-modal h2 {
    margin: 7px 0 8px;

    color: var(--red);

    font-size: clamp(
            2.8rem,
            10vw,
            4.5rem
    );

    line-height: .88;

    letter-spacing: -.075em;

    transform: rotate(-2deg);
}


.match-modal-intro {
    margin:
            12px auto
            28px;

    max-width: 360px;

    color: var(--black);

    font-size: .82rem;

    line-height: 1.45;
}


/* PHOTOS */

.match-modal-photos {
    position: relative;

    min-height: 190px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 8px;
}


.match-modal-photo {
    position: relative;

    z-index: 1;

    width: 168px;
    height: 168px;

    border: 3px solid var(--black);

    border-radius: 50%;

    overflow: hidden;

    background: var(--pink);

    box-shadow:
            6px 6px 0 var(--black);
}


.match-modal-photo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.match-modal-photo-me {
    transform:
            translateX(18px)
            rotate(-6deg);
}


.match-modal-photo-them {
    transform:
            translateX(-18px)
            rotate(6deg);
}


.match-modal-heart {
    position: relative;

    z-index: 4;

    width: 68px;
    height: 68px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border: 3px solid var(--black);

    border-radius: 50%;

    background: var(--red);

    color: white;

    box-shadow:
            4px 4px 0 var(--black);

    font-size: 1.8rem;

    transform: rotate(-6deg);

    animation:
            matchHeartBeat
            1.1s ease-in-out
            infinite;
}


/* NAMES */

.match-modal-names {
    margin:
            8px auto
            18px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 45px;

    font-size: .74rem;

    font-weight: 900;
}


.match-modal-message {
    margin:
            0 0 20px;

    font-size: .75rem;

    font-weight: 800;
}


/* BUTTONS */

.match-modal-actions {
    display: grid;

    gap: 10px;
}


.match-modal-message-button,
.match-modal-continue-button {
    width: 100%;

    min-height: 50px;

    padding: 11px 16px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 2px solid var(--black);

    color: var(--black);

    cursor: pointer;

    font: inherit;

    font-size: .74rem;

    font-weight: 900;

    text-decoration: none;
}


.match-modal-message-button {
    background: var(--red);

    color: white;

    box-shadow:
            4px 4px 0 var(--black);
}


.match-modal-message-button:hover {
    transform:
            translate(-1px, -1px);

    box-shadow:
            6px 6px 0 var(--black);
}


.match-modal-continue-button {
    background: var(--white);

    box-shadow:
            3px 3px 0 var(--black);
}


.match-modal-continue-button:hover {
    background: var(--yellow);
}


/* DECORATIONS */

.match-modal-confetti {
    position: absolute;

    pointer-events: none;

    font-weight: 900;
}


.match-modal-confetti-one {
    top: 75px;
    left: 30px;

    color: var(--red);

    font-size: 1.4rem;

    transform: rotate(-18deg);
}


.match-modal-confetti-two {
    top: 135px;
    right: 35px;

    color: var(--pink);

    font-size: 1.3rem;

    transform: rotate(14deg);
}


.match-modal-confetti-three {
    bottom: 145px;
    left: 26px;

    color: var(--blue);

    font-size: 1.5rem;

    transform: rotate(10deg);
}


.match-modal-confetti-four {
    bottom: 92px;
    right: 30px;

    color: var(--yellow);

    -webkit-text-stroke:
            1px var(--black);

    font-size: 1.3rem;
}


/* ANIMATION */

@keyframes matchModalIn {

    from {
        opacity: 0;

        transform:
                translateY(25px)
                scale(.88)
                rotate(-1deg);
    }

    to {
        opacity: 1;

        transform:
                translateY(0)
                scale(1)
                rotate(0);
    }

}


@keyframes matchModalOut {

    from {
        opacity: 1;

        transform:
                scale(1);
    }

    to {
        opacity: 0;

        transform:
                scale(.94);
    }

}


@keyframes matchBackdropIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}


@keyframes matchBackdropOut {

    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }

}


@keyframes matchHeartBeat {

    0%,
    100% {
        transform:
                rotate(-6deg)
                scale(1);
    }

    50% {
        transform:
                rotate(-6deg)
                scale(1.09);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .match-modal-backdrop {
        padding: 14px;
    }


    .match-modal {
        padding:
                42px 18px
                24px;

        box-shadow:
                6px 6px 0 var(--black);
    }


    .match-modal h2 {
        font-size: 3rem;
    }


    .match-modal-photo {
        width: 125px;
        height: 125px;
    }


    .match-modal-heart {
        width: 55px;
        height: 55px;

        font-size: 1.4rem;
    }


    .match-modal-photos {
        min-height: 145px;
    }


    .match-modal-photo-me {
        transform:
                translateX(12px)
                rotate(-5deg);
    }


    .match-modal-photo-them {
        transform:
                translateX(-12px)
                rotate(5deg);
    }


    .match-modal-names {
        gap: 30px;
    }

}

/* =========================================================
   SWIFTDATING RICH PROFILE UPGRADE
========================================================= */


/* =========================================================
   RELATIONSHIP GOALS
========================================================= */

.relationship-goal-grid {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
    gap: 12px;
    margin-top: 10px;
}


.relationship-goal-card:last-child {
    grid-column: 1 / -1;
}


.relationship-goal-card span {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 14px;
    text-align: center;
}


/* =========================================================
   INTEREST PICKER
========================================================= */

.interest-picker-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 15px;
}


.interest-picker-heading strong {
    color: var(--black);
    font-size: .88rem;
    font-weight: 900;
}


.interest-picker-heading span {
    padding: 5px 9px;
    border: var(--border);
    background: var(--yellow);
    box-shadow: 2px 2px 0 var(--black);
    color: var(--black);
    font-size: .62rem;
    font-weight: 900;
}


.interest-picker-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}


.interest-choice {
    position: relative;
    cursor: pointer;
}


.interest-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}


.interest-choice span {
    display: block;
    padding: 8px 12px;
    border: 2px solid var(--black);
    background: var(--white);
    box-shadow: 2px 2px 0 var(--black);
    color: var(--black);
    font-size: .68rem;
    font-weight: 850;
    transition:
            transform .12s ease,
            box-shadow .12s ease,
            background .12s ease;
}


.interest-choice:hover span {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--black);
}


.interest-choice input:checked + span {
    background: var(--pink);
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--black);
}


.interest-choice input:focus-visible + span {
    outline: 3px solid var(--blue);
    outline-offset: 3px;
}


.interest-choice input:disabled + span {
    opacity: .42;
    cursor: not-allowed;
    transform: none;
    box-shadow: 1px 1px 0 var(--black);
}


.form-help {
    margin: 14px 0 0;
    color: var(--grey);
    font-size: .68rem;
    line-height: 1.6;
}


/* =========================================================
   PROFILE PROMPT EDITOR
========================================================= */

.profile-prompt-editor {
    display: grid;
    gap: 15px;
    margin-top: 24px;
}


.profile-prompt-editor-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}


.profile-prompt-editor-heading strong {
    font-size: .9rem;
    font-weight: 900;
}


.profile-prompt-editor-heading span {
    color: var(--grey);
    font-size: .64rem;
    font-weight: 750;
}


.profile-prompt-edit-card {
    padding: 17px;
    border: var(--border);
    background: var(--cream);
    box-shadow: 4px 4px 0 var(--black);
}


.profile-prompt-edit-card .form-field + .form-field {
    margin-top: 13px;
}


.profile-prompt-edit-card select {
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    border: var(--border);
    background: var(--white);
    color: var(--black);
    font: inherit;
    font-size: .72rem;
    font-weight: 800;
}


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

.profile-edit-shell {
    max-width: 960px;
}


.profile-edit-heading {
    margin-bottom: 25px;
}


.profile-edit-form {
    display: grid;
    gap: 23px;
}


.profile-edit-section {
    padding: 24px;
    border: var(--border);
    background: var(--white);
    box-shadow: 6px 6px 0 var(--black);
}


.profile-edit-section-title {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
}


.profile-edit-section-title > span {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border: var(--border);
    background: var(--yellow);
    box-shadow: 2px 2px 0 var(--black);
    font-size: .67rem;
    font-weight: 950;
}


.profile-edit-section-title h2 {
    margin: 0 0 4px;
    font-size: 1.08rem;
}


.profile-edit-section-title p {
    margin: 0;
    color: var(--grey);
    font-size: .7rem;
    line-height: 1.5;
}


.profile-edit-grid {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
    gap: 16px;
}


.profile-edit-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding-bottom: 40px;
}


/* =========================================================
   PUBLIC PROFILE DETAILS
========================================================= */

.member-profile-details-rich {
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
}


.member-profile-goal-detail {
    grid-column: 1 / -1;
    background: var(--yellow);
}


/* =========================================================
   PUBLIC INTERESTS
========================================================= */

.member-profile-interests {
    margin-top: 25px;
}


.member-section-label {
    display: block;
    margin-bottom: 10px;
    font-size: .58rem;
    font-weight: 950;
    letter-spacing: .09em;
}


.member-interest-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}


.member-interest-tags span {
    padding: 7px 10px;
    border: 2px solid var(--black);
    background: var(--pink);
    box-shadow: 2px 2px 0 var(--black);
    font-size: .65rem;
    font-weight: 850;
}


/* =========================================================
   PUBLIC PROFILE PROMPTS
========================================================= */

.member-profile-prompts {
    display: grid;
    gap: 13px;
    margin-top: 25px;
    margin-bottom: 25px;
}


.member-prompt-card {
    padding: 18px;
    border: var(--border);
    background: var(--cream);
    box-shadow: 4px 4px 0 var(--black);
}


.member-prompt-card:nth-child(2n) {
    background: #e8f4ff;
}


.member-prompt-card:nth-child(3n) {
    background: #fff2b8;
}


.member-prompt-card > span {
    display: block;
    margin-bottom: 8px;
    color: var(--red-dark);
    font-size: .6rem;
    font-weight: 950;
    letter-spacing: .045em;
    text-transform: uppercase;
}


.member-prompt-card p {
    margin: 0;
    color: var(--black);
    font-size: .82rem;
    font-weight: 750;
    line-height: 1.55;
}


/* =========================================================
   LOCATION INFO
========================================================= */

.location-detected-box {
    margin-top: 10px;
    padding: 11px 13px;
    border-left: 4px solid var(--blue);
    background: #eaf4ff;
    color: var(--grey);
    font-size: .65rem;
    line-height: 1.55;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

    .relationship-goal-grid {
        grid-template-columns: 1fr;
    }


    .relationship-goal-card:last-child {
        grid-column: auto;
    }


    .profile-edit-grid {
        grid-template-columns: 1fr;
    }


    .profile-edit-section {
        padding: 17px;
        box-shadow: 4px 4px 0 var(--black);
    }


    .member-profile-details-rich {
        grid-template-columns: 1fr;
    }


    .member-profile-goal-detail {
        grid-column: auto;
    }


    .interest-picker-heading {
        align-items: flex-start;
        flex-direction: column;
    }


    .profile-prompt-editor-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

}

/* =========================================================
   PROFILE FORM VISUAL FIXES
========================================================= */

/* General form layout on setup/edit pages */
.setup-form,
.profile-edit-form {
    display: grid;
    gap: 22px;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-field > span {
    display: block;
    color: var(--black);
    font-size: .72rem;
    font-weight: 900;
    line-height: 1.3;
}

.form-field > span small {
    color: var(--grey);
    font-size: .62rem;
    font-weight: 700;
}

/* Make all form controls fill the available width */
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="password"],
.form-field input[type="number"],
.form-field select,
.form-field textarea {
    width: 100%;
    display: block;
    box-sizing: border-box;
    border: 2px solid var(--black);
    background: var(--white);
    color: var(--black);
    box-shadow: 3px 3px 0 var(--black);
    font: inherit;
    font-size: .78rem;
    line-height: 1.45;
}

/* Inputs / selects */
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="password"],
.form-field input[type="number"],
.form-field select {
    min-height: 50px;
    padding: 12px 14px;
}

/* Textareas */
.form-field textarea {
    min-height: 140px;
    padding: 12px 14px;
    resize: vertical;
}

/* Slightly larger bio */
.profile-edit-form textarea[name="bio"],
.setup-form textarea[name="bio"] {
    min-height: 170px;
}

/* Better focus styling */
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: 3px solid var(--blue);
    outline-offset: 2px;
}

/* Choice/fieldset cleanup */
.choice-fieldset {
    padding: 0;
    margin: 0;
    border: 0;
}

.choice-fieldset legend {
    margin-bottom: 10px;
    color: var(--black);
    font-size: .75rem;
    font-weight: 900;
}

/* Edit page sections */
.profile-edit-section {
    padding: 26px;
    border: var(--border);
    background: var(--white);
    box-shadow: 6px 6px 0 var(--black);
}

.profile-edit-section + .profile-edit-section {
    margin-top: 0;
}

.profile-edit-section-title {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
}

.profile-edit-section-title > span {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border: var(--border);
    background: var(--yellow);
    box-shadow: 2px 2px 0 var(--black);
    font-size: .7rem;
    font-weight: 900;
}

.profile-edit-section-title h2 {
    margin: 0 0 5px;
    font-size: 1.08rem;
    line-height: 1.2;
}

.profile-edit-section-title p {
    margin: 0;
    color: var(--grey);
    font-size: .7rem;
    line-height: 1.5;
}

/* Two-column basics area */
.profile-edit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

/* Prompt editor */
.profile-prompt-editor {
    display: grid;
    gap: 16px;
    margin-top: 22px;
}

.profile-prompt-editor-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.profile-prompt-editor-heading strong {
    font-size: .92rem;
    font-weight: 900;
}

.profile-prompt-editor-heading span {
    color: var(--grey);
    font-size: .65rem;
    font-weight: 750;
}

.profile-prompt-edit-card {
    padding: 18px;
    border: var(--border);
    background: var(--cream);
    box-shadow: 4px 4px 0 var(--black);
    display: grid;
    gap: 14px;
}

.profile-prompt-edit-card .form-field {
    margin: 0;
}

.profile-prompt-edit-card textarea {
    min-height: 110px;
}

.profile-prompt-edit-card select {
    background: var(--white);
}

/* Interests section */
.interest-picker-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.interest-picker-heading strong {
    font-size: .88rem;
    font-weight: 900;
}

.interest-picker-heading span {
    padding: 5px 10px;
    border: var(--border);
    background: var(--yellow);
    box-shadow: 2px 2px 0 var(--black);
    font-size: .62rem;
    font-weight: 900;
}

.interest-picker-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Better page width */
.profile-edit-shell {
    max-width: 980px;
}

.profile-edit-heading {
    margin-bottom: 24px;
}

/* Bottom actions */
.profile-edit-actions,
.setup-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 8px;
}

/* Setup page card */
.setup-form-card {
    max-width: 840px;
    padding: 28px;
    border: var(--border);
    background: var(--white);
    box-shadow: 6px 6px 0 var(--black);
}

/* Helpful location note */
.location-detected-box {
    margin-top: 10px;
    padding: 12px 14px;
    border-left: 4px solid var(--blue);
    background: #eaf4ff;
    color: var(--grey);
    font-size: .67rem;
    line-height: 1.55;
}

/* Mobile */
@media (max-width: 760px) {
    .profile-edit-grid {
        grid-template-columns: 1fr;
    }

    .profile-edit-section {
        padding: 18px;
        box-shadow: 4px 4px 0 var(--black);
    }

    .profile-prompt-editor-heading,
    .interest-picker-heading,
    .profile-edit-actions,
    .setup-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .setup-form-card {
        padding: 20px;
        box-shadow: 4px 4px 0 var(--black);
    }
}

/* =========================================================
   SWIFTDATING PROFILE BUILDER — PREMIUM PASS
   APPEND ONLY
========================================================= */


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

.edit-profile-page,
.setup-page {
    background:
            linear-gradient(
                    90deg,
                    rgba(21, 21, 21, .025) 1px,
                    transparent 1px
            ),
            linear-gradient(
                    rgba(21, 21, 21, .025) 1px,
                    transparent 1px
            ),
            var(--cream);

    background-size:
            28px 28px;

    color:
            var(--black);
}


.profile-edit-shell {
    width:
            min(
                    1040px,
                    calc(100% - 32px)
            );

    margin:
            0 auto;

    padding:
            40px 0 90px;
}


/* =========================================================
   PAGE HEADING
========================================================= */

.profile-edit-heading {
    position: relative;

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

    gap: 30px;

    margin-bottom:
            32px;

    padding:
            28px 30px;

    border:
            2px solid
            var(--black);

    background:
            var(--white);

    box-shadow:
            7px 7px 0
            var(--black);
}


.profile-edit-heading::before {
    content:
            "";

    position:
            absolute;

    top:
            -2px;

    left:
            -2px;

    width:
            118px;

    height:
            9px;

    border:
            2px solid
            var(--black);

    background:
            var(--red);
}


.profile-edit-heading h1 {
    margin:
            7px 0 8px;

    font-size:
            clamp(
                    1.7rem,
                    4vw,
                    2.7rem
            );

    line-height:
            .98;

    letter-spacing:
            -.04em;
}


.profile-edit-heading p {
    max-width:
            590px;

    margin:
            0;

    color:
            var(--grey);

    font-size:
            .76rem;

    font-weight:
            700;

    line-height:
            1.6;
}


/* =========================================================
   SECTION CARDS
========================================================= */

.profile-edit-form {
    display:
            grid;

    gap:
            30px;
}


.profile-edit-section {
    position:
            relative;

    overflow:
            hidden;

    padding:
            30px;

    border:
            2px solid
            var(--black);

    background:
            var(--white);

    box-shadow:
            7px 7px 0
            var(--black);
}


.profile-edit-section::after {
    content:
            "";

    position:
            absolute;

    top:
            0;

    right:
            0;

    width:
            74px;

    height:
            74px;

    transform:
            translate(
                    37px,
                    -37px
            )
            rotate(
                    45deg
            );

    border:
            2px solid
            var(--black);

    background:
            var(--blue);

    opacity:
            .65;

    pointer-events:
            none;
}


.profile-edit-section:nth-of-type(2)::after {
    background:
            var(--pink);
}


.profile-edit-section:nth-of-type(3)::after {
    background:
            var(--yellow);
}


.profile-edit-section:nth-of-type(4)::after {
    background:
            var(--red);
}


/* =========================================================
   SECTION TITLES
========================================================= */

.profile-edit-section-title {
    position:
            relative;

    z-index:
            1;

    display:
            flex;

    align-items:
            flex-start;

    gap:
            16px;

    margin-bottom:
            26px;

    padding-bottom:
            20px;

    border-bottom:
            2px solid
            var(--black);
}


.profile-edit-section-title > span {
    width:
            46px;

    height:
            46px;

    flex:
            0 0 46px;

    display:
            grid;

    place-items:
            center;

    border:
            2px solid
            var(--black);

    background:
            var(--yellow);

    box-shadow:
            3px 3px 0
            var(--black);

    font-size:
            .7rem;

    font-weight:
            950;
}


.profile-edit-section:nth-of-type(2)
.profile-edit-section-title > span {
    background:
            var(--pink);
}


.profile-edit-section:nth-of-type(3)
.profile-edit-section-title > span {
    background:
            var(--blue);
}


.profile-edit-section:nth-of-type(4)
.profile-edit-section-title > span {
    background:
            var(--red);

    color:
            var(--white);
}


.profile-edit-section-title h2 {
    margin:
            0 0 5px;

    font-size:
            1.25rem;

    font-weight:
            950;

    letter-spacing:
            -.025em;
}


.profile-edit-section-title p {
    max-width:
            620px;

    margin:
            0;

    color:
            var(--grey);

    font-size:
            .69rem;

    font-weight:
            700;

    line-height:
            1.55;
}


/* =========================================================
   LABELS
========================================================= */

.form-field {
    display:
            flex;

    flex-direction:
            column;

    gap:
            8px;

    min-width:
            0;
}


.form-field > span,
.choice-fieldset legend {
    color:
            var(--black);

    font-size:
            .68rem;

    font-weight:
            950;

    letter-spacing:
            .015em;
}


.form-field > span small {
    margin-left:
            5px;

    color:
            var(--grey);

    font-size:
            .59rem;

    font-weight:
            750;
}


/* =========================================================
   INPUTS
========================================================= */

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="password"],
.form-field input[type="number"],
.form-field select,
.form-field textarea {
    width:
            100%;

    box-sizing:
            border-box;

    border:
            2px solid
            var(--black);

    border-radius:
            0;

    background:
            var(--white);

    color:
            var(--black);

    box-shadow:
            3px 3px 0
            var(--black);

    font:
            inherit;

    font-size:
            .77rem;

    font-weight:
            700;

    line-height:
            1.5;

    transition:
            transform .12s ease,
            box-shadow .12s ease,
            background .12s ease;
}


.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="password"],
.form-field input[type="number"],
.form-field select {
    min-height:
            50px;

    padding:
            12px 14px;
}


.form-field textarea {
    min-height:
            125px;

    padding:
            14px;

    resize:
            vertical;
}


.profile-edit-form
textarea[name="bio"],
.setup-form
textarea[name="bio"] {
    min-height:
            190px;
}


.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover {
    background:
            #fffefb;
}


.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline:
            none;

    transform:
            translate(
                    -2px,
                    -2px
            );

    box-shadow:
            6px 6px 0
            var(--black);

    background:
            #fffef8;
}


.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
    outline:
            3px solid
            var(--blue);

    outline-offset:
            3px;
}


/* =========================================================
   BASIC GRID
========================================================= */

.profile-edit-grid {
    display:
            grid;

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

    gap:
            20px;
}


/* =========================================================
   CHOICE BOXES
========================================================= */

.choice-fieldset {
    min-width:
            0;

    margin:
            22px 0 0;

    padding:
            0;

    border:
            0;
}


.choice-fieldset legend {
    margin-bottom:
            12px;
}


.choice-card-grid {
    display:
            grid;

    gap:
            12px;
}


.choice-card-grid.two-column {
    grid-template-columns:
        repeat(
            2,
            minmax(
                    0,
                    1fr
            )
        );
}


.choice-card-grid.three-column {
    grid-template-columns:
        repeat(
            3,
            minmax(
                    0,
                    1fr
            )
        );
}


.choice-card {
    position:
            relative;

    cursor:
            pointer;
}


.choice-card input {
    position:
            absolute;

    opacity:
            0;

    pointer-events:
            none;
}


.choice-card > span {
    min-height:
            54px;

    box-sizing:
            border-box;

    display:
            flex;

    align-items:
            center;

    justify-content:
            center;

    padding:
            12px 14px;

    border:
            2px solid
            var(--black);

    background:
            var(--white);

    box-shadow:
            3px 3px 0
            var(--black);

    text-align:
            center;

    color:
            var(--black);

    font-size:
            .7rem;

    font-weight:
            900;

    transition:
            transform .12s ease,
            box-shadow .12s ease,
            background .12s ease;
}


.choice-card:hover > span {
    transform:
            translate(
                    -2px,
                    -2px
            );

    box-shadow:
            5px 5px 0
            var(--black);
}


.choice-card
input:checked + span {
    background:
            var(--pink);

    transform:
            translate(
                    -2px,
                    -2px
            );

    box-shadow:
            5px 5px 0
            var(--black);
}


.choice-card
input:checked + span::before {
    content:
            "✓";

    margin-right:
            7px;

    font-size:
            .75rem;

    font-weight:
            950;
}


/* =========================================================
   RELATIONSHIP GOALS
========================================================= */

.relationship-goal-grid {
    display:
            grid;

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

    gap:
            12px;
}


.relationship-goal-card:last-child {
    grid-column:
            1 / -1;
}


.relationship-goal-card
input:checked + span {
    background:
            var(--yellow);
}


/* =========================================================
   INTEREST HEADER
========================================================= */

.interest-picker-heading {
    display:
            flex;

    align-items:
            center;

    justify-content:
            space-between;

    gap:
            16px;

    margin-bottom:
            18px;
}


.interest-picker-heading strong {
    font-size:
            .82rem;

    font-weight:
            950;
}


.interest-picker-heading span {
    display:
            inline-flex;

    align-items:
            center;

    min-height:
            31px;

    padding:
            4px 10px;

    border:
            2px solid
            var(--black);

    background:
            var(--yellow);

    box-shadow:
            2px 2px 0
            var(--black);

    color:
            var(--black);

    font-size:
            .6rem;

    font-weight:
            950;
}


/* =========================================================
   INTEREST TAGS
========================================================= */

.interest-picker-grid {
    display:
            flex;

    flex-wrap:
            wrap;

    gap:
            11px;
}


.interest-choice {
    position:
            relative;

    cursor:
            pointer;

    user-select:
            none;
}


.interest-choice input {
    position:
            absolute;

    opacity:
            0;

    pointer-events:
            none;
}


.interest-choice span {
    display:
            flex;

    align-items:
            center;

    min-height:
            37px;

    padding:
            7px 12px;

    border:
            2px solid
            var(--black);

    background:
            var(--white);

    box-shadow:
            2px 2px 0
            var(--black);

    color:
            var(--black);

    font-size:
            .65rem;

    font-weight:
            900;

    transition:
            transform .12s ease,
            box-shadow .12s ease,
            background .12s ease;
}


.interest-choice span::before {
    content:
            "+";

    margin-right:
            6px;

    font-size:
            .75rem;

    font-weight:
            950;
}


.interest-choice:hover span {
    transform:
            translate(
                    -1px,
                    -1px
            );

    box-shadow:
            4px 4px 0
            var(--black);
}


.interest-choice
input:checked + span {
    background:
            var(--blue);

    transform:
            translate(
                    -2px,
                    -2px
            );

    box-shadow:
            4px 4px 0
            var(--black);
}


.interest-choice
input:checked + span::before {
    content:
            "✓";
}


.interest-choice
input:disabled + span {
    opacity:
            .32;

    transform:
            none;

    box-shadow:
            1px 1px 0
            var(--black);

    cursor:
            not-allowed;
}


/* =========================================================
   PROMPT EDITOR HEADER
========================================================= */

.profile-prompt-editor {
    display:
            grid;

    gap:
            20px;

    margin-top:
            28px;

    padding-top:
            24px;

    border-top:
            2px dashed
            var(--black);
}


.profile-prompt-editor-heading {
    display:
            flex;

    align-items:
            center;

    justify-content:
            space-between;

    gap:
            15px;
}


.profile-prompt-editor-heading strong {
    font-size:
            .95rem;

    font-weight:
            950;
}


.profile-prompt-editor-heading span {
    padding:
            4px 8px;

    background:
            var(--cream);

    color:
            var(--grey);

    font-size:
            .6rem;

    font-weight:
            800;
}


/* =========================================================
   PROMPT CARDS
========================================================= */

.profile-prompt-edit-card {
    position:
            relative;

    display:
            grid;

    grid-template-columns:
        minmax(
            0,
            .9fr
        )
        minmax(
            0,
            1.6fr
        );

    gap:
            18px;

    padding:
            20px;

    border:
            2px solid
            var(--black);

    background:
            #fff7d3;

    box-shadow:
            5px 5px 0
            var(--black);
}


.profile-prompt-edit-card:nth-child(3) {
    background:
            #eaf4ff;
}


.profile-prompt-edit-card:nth-child(4) {
    background:
            #ffe8f0;
}


.profile-prompt-edit-card::before {
    position:
            absolute;

    top:
            -12px;

    left:
            16px;

    min-width:
            26px;

    height:
            26px;

    display:
            grid;

    place-items:
            center;

    padding:
            0 5px;

    border:
            2px solid
            var(--black);

    background:
            var(--black);

    color:
            var(--white);

    font-size:
            .57rem;

    font-weight:
            950;
}


.profile-prompt-edit-card:nth-child(2)::before {
    content:
            "01";
}


.profile-prompt-edit-card:nth-child(3)::before {
    content:
            "02";
}


.profile-prompt-edit-card:nth-child(4)::before {
    content:
            "03";
}


.profile-prompt-edit-card
.form-field {
    margin:
            0;
}


.profile-prompt-edit-card
.form-field textarea {
    min-height:
            116px;

    background:
            var(--white);
}


.profile-prompt-edit-card
.form-field select {
    background:
            var(--white);
}


/* =========================================================
   BIO
========================================================= */

.profile-edit-section
textarea[name="bio"] {
    background:
            #fffdf8;
}


/* =========================================================
   SAVE AREA
========================================================= */

.profile-edit-actions {
    position:
            sticky;

    bottom:
            14px;

    z-index:
            50;

    display:
            flex;

    align-items:
            center;

    justify-content:
            flex-end;

    gap:
            12px;

    padding:
            14px;

    margin-top:
            2px;

    border:
            2px solid
            var(--black);

    background:
            rgba(
                    255,
                    253,
                    248,
                    .96
            );

    box-shadow:
            6px 6px 0
            var(--black);

    backdrop-filter:
            blur(
                    8px
            );
}


.profile-edit-actions
.primary-button {
    min-width:
            170px;
}


/* =========================================================
   BUTTON POLISH
========================================================= */

.profile-edit-page
.primary-button,
.setup-page
.primary-button {
    border:
            2px solid
            var(--black);

    background:
            var(--red);

    color:
            var(--white);

    box-shadow:
            4px 4px 0
            var(--black);

    font-weight:
            950;

    transition:
            transform .12s ease,
            box-shadow .12s ease;
}


.profile-edit-page
.primary-button:hover,
.setup-page
.primary-button:hover {
    transform:
            translate(
                    -2px,
                    -2px
            );

    box-shadow:
            6px 6px 0
            var(--black);
}


.profile-edit-page
.secondary-button,
.setup-page
.secondary-button {
    border:
            2px solid
            var(--black);

    background:
            var(--white);

    color:
            var(--black);

    box-shadow:
            3px 3px 0
            var(--black);

    font-weight:
            900;
}


/* =========================================================
   SUCCESS / ERROR
========================================================= */

.profile-edit-page
.admin-action-success {
    margin-bottom:
            24px;

    padding:
            14px 16px;

    border:
            2px solid
            var(--black);

    background:
            #dff5df;

    box-shadow:
            4px 4px 0
            var(--black);

    font-size:
            .7rem;

    font-weight:
            850;
}


.profile-edit-page
.form-error,
.setup-page
.form-error {
    margin-bottom:
            20px;

    padding:
            14px 16px;

    border:
            2px solid
            var(--black);

    background:
            #ffdadd;

    box-shadow:
            4px 4px 0
            var(--black);

    color:
            var(--black);

    font-size:
            .7rem;

    font-weight:
            850;
}


/* =========================================================
   SETUP PAGE POLISH
========================================================= */

.setup-form-card {
    width:
            min(
                    850px,
                    100%
            );

    box-sizing:
            border-box;

    padding:
            34px;

    border:
            2px solid
            var(--black);

    background:
            var(--white);

    box-shadow:
            8px 8px 0
            var(--black);
}


.setup-form-card h1 {
    margin:
            8px 0 9px;

    font-size:
            clamp(
                    1.65rem,
                    4vw,
                    2.45rem
            );

    line-height:
            1;
}


.setup-intro {
    max-width:
            620px;

    margin:
            0 0 27px;

    color:
            var(--grey);

    font-size:
            .73rem;

    font-weight:
            700;

    line-height:
            1.6;
}


.setup-actions {
    display:
            flex;

    align-items:
            center;

    justify-content:
            flex-end;

    gap:
            12px;

    margin-top:
            28px;

    padding-top:
            22px;

    border-top:
            2px solid
            var(--black);
}


/* =========================================================
   LOCATION NOTE
========================================================= */

.location-detected-box {
    margin-top:
            14px;

    padding:
            13px 15px;

    border:
            2px solid
            var(--black);

    border-left:
            8px solid
            var(--blue);

    background:
            #eaf4ff;

    box-shadow:
            3px 3px 0
            var(--black);

    color:
            var(--grey);

    font-size:
            .65rem;

    font-weight:
            700;

    line-height:
            1.55;
}


/* =========================================================
   MOBILE
========================================================= */

@media (
max-width: 820px
) {

    .profile-edit-heading {
        align-items:
                flex-start;

        flex-direction:
                column;

        padding:
                24px;
    }


    .profile-edit-grid {
        grid-template-columns:
            1fr;
    }


    .choice-card-grid.three-column {
        grid-template-columns:
            1fr;
    }


    .profile-prompt-edit-card {
        grid-template-columns:
            1fr;

        gap:
                14px;
    }


    .relationship-goal-grid {
        grid-template-columns:
            1fr;
    }


    .relationship-goal-card:last-child {
        grid-column:
                auto;
    }

}


@media (
max-width: 600px
) {

    .profile-edit-shell {
        width:
                min(
                        100% - 22px,
                        1040px
                );

        padding-top:
                24px;
    }


    .profile-edit-section {
        padding:
                20px;

        box-shadow:
                5px 5px 0
                var(--black);
    }


    .profile-edit-section-title {
        gap:
                12px;
    }


    .profile-edit-section-title > span {
        width:
                40px;

        height:
                40px;

        flex-basis:
                40px;
    }


    .choice-card-grid.two-column {
        grid-template-columns:
            1fr;
    }


    .interest-picker-heading {
        align-items:
                flex-start;

        flex-direction:
                column;
    }


    .profile-prompt-editor-heading {
        align-items:
                flex-start;

        flex-direction:
                column;
    }


    .profile-edit-actions {
        position:
                static;

        flex-direction:
                column-reverse;

        align-items:
                stretch;
    }


    .profile-edit-actions
    .primary-button,
    .profile-edit-actions
    .secondary-button {
        width:
                100%;

        box-sizing:
                border-box;

        text-align:
                center;
    }


    .setup-form-card {
        padding:
                22px;

        box-shadow:
                5px 5px 0
                var(--black);
    }


    .setup-actions {
        flex-direction:
                column-reverse;

        align-items:
                stretch;
    }

}

/* =========================================================
   SWIFTDATING DISTANCE MATCHING
========================================================= */

.discover-filter-grid {
    grid-template-columns:
        120px
        120px
        170px
        minmax(210px, 1fr);
}


.discover-distance-away {
    width: fit-content;

    display: inline-flex;
    align-items: center;

    margin-top: 7px;

    padding: 5px 8px;

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

    background: #eaf4ff;

    color: var(--black);

    font-size: .58rem;
    font-weight: 850;
}


.discover-distance-away::before {
    content: "⌖";

    margin-right: 5px;

    font-size: .72rem;
    font-weight: 950;
}


.discover-location-attribution {
    margin: 16px 0 0;

    color: var(--grey);

    font-size: .56rem;
    font-weight: 650;

    line-height: 1.5;
}


.discover-location-attribution a {
    color: inherit;
    font-weight: 850;
}


.discover-location-attribution a:hover {
    color: var(--red-dark);
}


@media (max-width: 900px) {

    .discover-filter-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 600px) {

    .discover-filter-grid {
        grid-template-columns:
            1fr;
    }

}

/* =========================================================
   SWIFTDATING — DISCOVER FILTER UPGRADE
========================================================= */

.discover-heading-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}


/* =========================================================
   FILTER BUTTON
========================================================= */

.discover-filter-toggle {
    min-height: 44px;
    padding: 9px 14px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    border: 2px solid var(--black);
    background: var(--white);
    box-shadow: 3px 3px 0 var(--black);

    color: var(--black);
    font: inherit;
    font-size: .68rem;
    font-weight: 950;

    cursor: pointer;
}


.discover-filter-toggle:hover {
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 var(--black);
}


.discover-filter-toggle > span {
    min-width: 22px;
    height: 22px;

    padding: 0 5px;

    display: inline-grid;
    place-items: center;

    border: 2px solid var(--black);
    border-radius: 50%;

    background: var(--yellow);

    font-size: .58rem;
    font-weight: 950;
}


/* =========================================================
   FILTER PANEL
========================================================= */

.discover-filter-panel {
    display: none;

    margin: 0 0 30px;
    padding: 24px;

    border: 2px solid var(--black);
    background: var(--white);
    box-shadow: 6px 6px 0 var(--black);
}


.discover-filter-panel.is-open {
    display: block;
}


.discover-filter-panel-heading {
    margin-bottom: 22px;
    padding-bottom: 18px;

    border-bottom: 2px solid var(--black);
}


.discover-filter-panel-heading h2 {
    margin: 5px 0 5px;

    font-size: 1.2rem;
    font-weight: 950;
}


.discover-filter-panel-heading p {
    max-width: 680px;

    margin: 0;

    color: var(--grey);
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.55;
}


/* =========================================================
   AGE / CITY
========================================================= */

.discover-filter-grid {
    display: grid;

    grid-template-columns:
        140px
        140px
        minmax(220px, 1fr);

    gap: 15px;
}


.discover-filter-city {
    min-width: 0;
}


/* =========================================================
   INCLUDE OTHER CITIES
========================================================= */

.discover-filter-checkbox {
    margin-top: 17px;
    padding: 13px 15px;

    display: flex;
    align-items: flex-start;
    gap: 11px;

    border: 2px solid var(--black);
    background: #eaf4ff;

    cursor: pointer;
}


.discover-filter-checkbox input {
    width: 18px;
    height: 18px;

    flex: 0 0 18px;

    margin-top: 2px;

    accent-color: var(--red);
}


.discover-filter-checkbox span {
    display: grid;
    gap: 2px;
}


.discover-filter-checkbox strong {
    font-size: .68rem;
    font-weight: 900;
}


.discover-filter-checkbox small {
    color: var(--grey);
    font-size: .61rem;
    font-weight: 700;
}


/* =========================================================
   FILTER GROUPS
========================================================= */

.discover-filter-group {
    margin: 24px 0 0;
    padding: 0;

    border: 0;
}


.discover-filter-group > legend {
    margin-bottom: 11px;

    font-size: .72rem;
    font-weight: 950;
}


.discover-filter-group-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 11px;
}


.discover-filter-group-heading legend {
    padding: 0;

    font-size: .72rem;
    font-weight: 950;
}


.discover-filter-group-heading > span {
    color: var(--grey);

    font-size: .6rem;
    font-weight: 750;
}


/* =========================================================
   RELATIONSHIP GOAL FILTER
========================================================= */

.discover-goal-filter-grid {
    display: grid;

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

    gap: 9px;
}


.discover-filter-choice {
    position: relative;

    cursor: pointer;
}


.discover-filter-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}


.discover-filter-choice span {
    min-height: 48px;

    box-sizing: border-box;

    padding: 9px 11px;

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

    border: 2px solid var(--black);
    background: var(--white);
    box-shadow: 2px 2px 0 var(--black);

    text-align: center;

    font-size: .63rem;
    font-weight: 850;
}


.discover-filter-choice:hover span {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--black);
}


.discover-filter-choice input:checked + span {
    background: var(--yellow);
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--black);
}


/* =========================================================
   INTEREST FILTERS
========================================================= */

.discover-interest-filter-grid {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}


.discover-filter-interest {
    position: relative;

    cursor: pointer;
}


.discover-filter-interest input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}


.discover-filter-interest span {
    display: inline-flex;
    align-items: center;

    min-height: 34px;

    padding: 6px 10px;

    border: 2px solid var(--black);
    background: var(--white);
    box-shadow: 2px 2px 0 var(--black);

    font-size: .61rem;
    font-weight: 850;
}


.discover-filter-interest span::before {
    content: "+";

    margin-right: 5px;

    font-weight: 950;
}


.discover-filter-interest input:checked + span {
    background: var(--blue);
}


.discover-filter-interest input:checked + span::before {
    content: "✓";
}


.discover-filter-interest input:disabled + span {
    opacity: .35;
    cursor: not-allowed;
}


/* =========================================================
   FILTER ACTIONS
========================================================= */

.discover-filter-actions {
    display: flex;
    justify-content: flex-end;

    margin-top: 24px;
    padding-top: 18px;

    border-top: 2px solid var(--black);
}


.discover-clear-filter-form {
    display: flex;
    justify-content: flex-end;

    margin-top: 10px;
}


/* =========================================================
   DISCOVER CARD UPGRADES
========================================================= */

.discover-photo {
    position: relative;
}


.discover-shared-badge {
    position: absolute;

    left: 12px;
    bottom: 12px;

    padding: 6px 9px;

    border: 2px solid var(--black);
    background: var(--yellow);
    box-shadow: 2px 2px 0 var(--black);

    color: var(--black);

    font-size: .58rem;
    font-weight: 950;
}


.discover-relationship-goal {
    width: fit-content;

    margin-top: 11px;
    padding: 6px 9px;

    border: 2px solid var(--black);
    background: #ffe8f0;
    box-shadow: 2px 2px 0 var(--black);

    font-size: .61rem;
    font-weight: 900;
}


.discover-interest-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;

    margin-top: 11px;
}


.discover-interest-tags span {
    padding: 5px 7px;

    border: 1px solid var(--black);
    background: #eaf4ff;

    font-size: .56rem;
    font-weight: 800;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {

    .discover-heading-row {
        align-items: flex-start;
        flex-direction: column;
    }


    .discover-filter-toggle {
        width: 100%;
    }


    .discover-filter-grid {
        grid-template-columns: 1fr;
    }


    .discover-goal-filter-grid {
        grid-template-columns: 1fr;
    }


    .discover-filter-panel {
        padding: 18px;

        box-shadow: 4px 4px 0 var(--black);
    }


    .discover-filter-actions,
    .discover-clear-filter-form {
        justify-content: stretch;
    }


    .discover-filter-actions .primary-button,
    .discover-clear-filter-form .secondary-button {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }

}

/* =========================================================
   FIX DISCOVER FILTER PANEL POSITION
   APPEND ONLY
========================================================= */

.dashboard-content {
    min-width: 0;
}


/* Keep the filter panel inside the normal page flow */
.discover-filter-panel {
    position: static !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    inset: auto !important;

    transform: none !important;

    float: none !important;

    width: 100% !important;
    max-width: none !important;

    height: auto !important;
    max-height: none !important;

    box-sizing: border-box;

    clear: both;

    margin:
            0
            0
            30px
            0 !important;

    padding: 24px;

    overflow: visible !important;

    z-index: auto !important;

    border:
            2px solid
            var(--black);

    background:
            var(--white);

    box-shadow:
            6px 6px 0
            var(--black);
}


/* Closed */
.discover-filter-panel:not(.is-open) {
    display: none !important;
}


/* Open */
.discover-filter-panel.is-open {
    display: block !important;
}


/* Keep heading + filter button behaving normally */
.discover-heading-row {
    position: relative;

    width: 100%;

    box-sizing: border-box;

    display: flex;

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

    gap: 20px;

    margin-bottom: 24px;
}


/* Filter form should fill the panel */
.discover-filter-form {
    width: 100%;

    box-sizing: border-box;
}


/* Age / distance / city */
.discover-filter-grid {
    width: 100%;

    display: grid;

    grid-template-columns:
        120px
        120px
        180px
        minmax(220px, 1fr);

    gap: 15px;

    box-sizing: border-box;
}


/* Relationship choices */
.discover-goal-filter-grid {
    width: 100%;

    display: grid;

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

    gap: 10px;
}


/* Interests should wrap inside the panel */
.discover-interest-filter-grid {
    width: 100%;

    display: flex;

    flex-wrap: wrap;

    gap: 9px;

    box-sizing: border-box;
}


/* Prevent clear button form floating elsewhere */
.discover-clear-filter-form {
    position: static !important;

    float: none !important;

    width: 100%;

    margin-top: 12px;

    display: flex;

    justify-content: flex-end;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .discover-filter-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .discover-heading-row {
        flex-direction: column;
        align-items: stretch;
    }


    .discover-filter-toggle {
        width: 100%;
    }


    .discover-filter-panel {
        padding: 18px;

        box-shadow:
                4px 4px 0
                var(--black);
    }


    .discover-filter-grid {
        grid-template-columns:
            1fr;
    }


    .discover-goal-filter-grid {
        grid-template-columns:
            1fr;
    }


    .discover-clear-filter-form {
        justify-content: stretch;
    }


    .discover-clear-filter-form
    .secondary-button,
    .discover-filter-actions
    .primary-button {
        width: 100%;

        box-sizing: border-box;

        text-align: center;
    }

}

/* =========================================================
   SWIFTDATING LIFESTYLE PROFILE UPGRADE
========================================================= */

.lifestyle-form-grid {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
    gap: 18px;
}


.lifestyle-privacy-note {
    margin-top: 18px;
    padding: 13px 15px;

    border:
            2px solid
            var(--black);

    border-left:
            8px solid
            var(--pink);

    background:
            #fff0f5;

    box-shadow:
            3px 3px 0
            var(--black);

    color:
            var(--grey);

    font-size:
            .66rem;

    font-weight:
            700;

    line-height:
            1.55;
}


/* Fifth edit section */
.profile-edit-section:nth-of-type(5)::after {
    background:
            var(--blue);
}


.profile-edit-section:nth-of-type(5)
.profile-edit-section-title > span {
    background:
            var(--pink);

    color:
            var(--black);
}


/* =========================================================
   PUBLIC PROFILE LIFESTYLE
========================================================= */

.member-profile-lifestyle {
    margin-top: 25px;
}


.member-lifestyle-grid {
    display: grid;

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

    gap: 10px;
}


.member-lifestyle-item {
    min-width: 0;

    padding: 13px 14px;

    border:
            2px solid
            var(--black);

    background:
            var(--white);

    box-shadow:
            3px 3px 0
            var(--black);
}


.member-lifestyle-item:nth-child(4n + 1) {
    background:
            #fff2b8;
}


.member-lifestyle-item:nth-child(4n + 2) {
    background:
            #eaf4ff;
}


.member-lifestyle-item:nth-child(4n + 3) {
    background:
            #ffe8f0;
}


.member-lifestyle-item:nth-child(4n + 4) {
    background:
            #e8f4e8;
}


.member-lifestyle-item span {
    display: block;

    margin-bottom: 4px;

    color:
            var(--grey);

    font-size:
            .56rem;

    font-weight:
            850;

    letter-spacing:
            .05em;

    text-transform:
            uppercase;
}


.member-lifestyle-item strong {
    display: block;

    overflow-wrap:
            anywhere;

    color:
            var(--black);

    font-size:
            .7rem;

    font-weight:
            950;

    line-height:
            1.35;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

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


    .member-lifestyle-grid {
        grid-template-columns:
            1fr;
    }

}

/* =========================================================
   DISCOVER LIFESTYLE FILTERS
   APPEND ONLY
========================================================= */

.discover-lifestyle-filter-section {
    margin-top: 26px;
    padding: 20px;

    border:
            2px solid
            var(--black);

    background:
            #fff8dc;

    box-shadow:
            4px 4px 0
            var(--black);
}


.discover-lifestyle-filter-grid {
    display: grid;

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

    gap: 14px;
}


.discover-lifestyle-filter-grid
.form-field {
    min-width: 0;
}


.discover-lifestyle-filter-grid
select {
    width: 100%;

    min-height: 46px;

    box-sizing:
            border-box;

    padding:
            9px 11px;

    border:
            2px solid
            var(--black);

    border-radius:
            0;

    background:
            var(--white);

    box-shadow:
            2px 2px 0
            var(--black);

    color:
            var(--black);

    font: inherit;

    font-size:
            .68rem;

    font-weight:
            800;
}


.discover-lifestyle-filter-grid
select:focus {
    outline:
            3px solid
            var(--blue);

    outline-offset:
            2px;
}


/* Keep full filter panel firmly in page flow */
.discover-filter-panel {
    position:
            static !important;

    inset:
            auto !important;

    transform:
            none !important;

    float:
            none !important;

    width:
            100% !important;

    max-width:
            none !important;

    box-sizing:
            border-box;
}


.discover-filter-panel:not(.is-open) {
    display:
            none !important;
}


.discover-filter-panel.is-open {
    display:
            block !important;
}


@media (max-width: 850px) {

    .discover-lifestyle-filter-grid {
        grid-template-columns:
            1fr;
    }

}

/* =========================================================
   SWIFTDATING PHOTO MANAGER
   APPEND ONLY
========================================================= */

.photo-manager-shell {
    width: min(
            1120px,
            calc(100% - 32px)
    );

    margin: 0 auto;

    padding:
            40px 0
            80px;
}


/* =========================================================
   HEADING
========================================================= */

.photo-manager-heading {
    position: relative;

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

    gap: 25px;

    margin-bottom: 28px;
    padding: 27px 30px;

    border:
            2px solid
            var(--black);

    background:
            var(--white);

    box-shadow:
            7px 7px 0
            var(--black);
}


.photo-manager-heading::before {
    content: "";

    position: absolute;

    top: -2px;
    left: -2px;

    width: 115px;
    height: 9px;

    border:
            2px solid
            var(--black);

    background:
            var(--pink);
}


.photo-manager-heading h1 {
    margin:
            7px 0
            7px;

    font-size:
            clamp(
                    1.8rem,
                    4vw,
                    2.7rem
            );

    line-height:
            1;
}


.photo-manager-heading p {
    max-width: 600px;

    margin: 0;

    color:
            var(--grey);

    font-size:
            .72rem;

    font-weight:
            700;

    line-height:
            1.6;
}


.photo-count-badge {
    flex: 0 0 auto;

    padding:
            9px 12px;

    border:
            2px solid
            var(--black);

    background:
            var(--yellow);

    box-shadow:
            3px 3px 0
            var(--black);

    font-size:
            .64rem;

    font-weight:
            950;
}


/* =========================================================
   LAYOUT
========================================================= */

.photo-manager-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        300px;

    gap: 28px;

    align-items: start;
}


.photo-manager-main {
    min-width: 0;
}


/* =========================================================
   HELP STRIP
========================================================= */

.photo-manager-help {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 17px;

    padding:
            12px 15px;

    border:
            2px solid
            var(--black);

    background:
            #eaf4ff;

    box-shadow:
            3px 3px 0
            var(--black);
}


.photo-manager-help strong {
    font-size:
            .7rem;

    font-weight:
            950;
}


.photo-manager-help span {
    color:
            var(--grey);

    font-size:
            .61rem;

    font-weight:
            700;

    line-height:
            1.45;
}


/* =========================================================
   PHOTO GRID
========================================================= */

.photo-sort-grid {
    display: grid;

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

    gap: 20px;
}


.photo-manager-card {
    position: relative;

    min-width: 0;

    border:
            2px solid
            var(--black);

    background:
            var(--white);

    box-shadow:
            5px 5px 0
            var(--black);

    transition:
            transform .15s ease,
            opacity .15s ease,
            box-shadow .15s ease;
}


.photo-manager-card.is-primary {
    border-width:
            3px;

    background:
            #fff8d5;
}


.photo-manager-card.is-dragging {
    opacity:
            .42;

    transform:
            scale(.98);
}


.photo-manager-card.drag-over {
    outline:
            4px solid
            var(--blue);

    outline-offset:
            3px;
}


/* =========================================================
   PHOTO
========================================================= */

.photo-manager-card-image {
    position: relative;

    aspect-ratio:
            4 / 5;

    overflow:
            hidden;

    border-bottom:
            2px solid
            var(--black);

    background:
            #ece6dd;
}


.photo-manager-card-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit:
            cover;
}


.photo-drag-handle {
    position: absolute;

    top: 11px;
    right: 11px;

    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    border:
            2px solid
            var(--black);

    background:
            rgba(
                    255,
                    253,
                    248,
                    .94
            );

    box-shadow:
            2px 2px 0
            var(--black);

    color:
            var(--black);

    font-size:
            .9rem;

    font-weight:
            950;

    cursor:
            grab;
}


.photo-manager-card:active
.photo-drag-handle {
    cursor:
            grabbing;
}


.photo-main-badge {
    position: absolute;

    left: 11px;
    top: 11px;

    padding:
            6px 9px;

    border:
            2px solid
            var(--black);

    background:
            var(--pink);

    box-shadow:
            2px 2px 0
            var(--black);

    font-size:
            .55rem;

    font-weight:
            950;

    letter-spacing:
            .04em;
}


.photo-order-number {
    position: absolute;

    left: 11px;
    bottom: 11px;

    width: 31px;
    height: 31px;

    display: grid;
    place-items: center;

    border:
            2px solid
            var(--black);

    background:
            var(--yellow);

    box-shadow:
            2px 2px 0
            var(--black);

    font-size:
            .6rem;

    font-weight:
            950;
}


/* =========================================================
   CARD ACTIONS
========================================================= */

.photo-manager-card-actions {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    padding: 13px;
}


.photo-inline-form {
    margin: 0;
}


.photo-main-button,
.photo-replace-toggle,
.photo-delete-button {
    min-height: 35px;

    box-sizing:
            border-box;

    padding:
            7px 9px;

    border:
            2px solid
            var(--black);

    border-radius:
            0;

    font: inherit;

    font-size:
            .59rem;

    font-weight:
            900;

    cursor:
            pointer;

    box-shadow:
            2px 2px 0
            var(--black);
}


.photo-main-button {
    background:
            var(--pink);

    color:
            var(--black);
}


.photo-replace-toggle {
    background:
            var(--blue);

    color:
            var(--black);
}


.photo-delete-button {
    background:
            var(--white);

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


.photo-main-button:hover,
.photo-replace-toggle:hover,
.photo-delete-button:hover {
    transform:
            translate(
                    -1px,
                    -1px
            );

    box-shadow:
            4px 4px 0
            var(--black);
}


.photo-current-main {
    display: inline-flex;
    align-items: center;

    min-height: 35px;

    box-sizing:
            border-box;

    padding:
            7px 9px;

    border:
            2px solid
            var(--black);

    background:
            var(--pink);

    font-size:
            .59rem;

    font-weight:
            950;
}


/* =========================================================
   REPLACE FORM
========================================================= */

.photo-replace-form {
    display:
            none;

    gap:
            10px;

    padding:
            13px;

    border-top:
            2px dashed
            var(--black);

    background:
            var(--cream);
}


.photo-replace-form.is-open {
    display:
            grid;
}


.photo-replace-picker {
    display:
            grid;

    gap:
            7px;

    font-size:
            .61rem;

    font-weight:
            900;
}


.photo-replace-picker input {
    width:
            100%;

    box-sizing:
            border-box;

    padding:
            8px;

    border:
            2px solid
            var(--black);

    background:
            var(--white);

    font-size:
            .62rem;
}


.photo-replace-submit {
    min-height:
            38px;

    border:
            2px solid
            var(--black);

    background:
            var(--red);

    color:
            var(--white);

    box-shadow:
            3px 3px 0
            var(--black);

    font: inherit;

    font-size:
            .62rem;

    font-weight:
            950;

    cursor:
            pointer;
}


/* =========================================================
   ORDER TOOLBAR
========================================================= */

.photo-order-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-top: 21px;

    padding:
            13px 15px;

    border:
            2px solid
            var(--black);

    background:
            var(--white);

    box-shadow:
            4px 4px 0
            var(--black);
}


.photo-order-toolbar.has-changes {
    background:
            #fff2b8;
}


.photo-order-toolbar > span {
    color:
            var(--grey);

    font-size:
            .62rem;

    font-weight:
            750;

    line-height:
            1.45;
}


.photo-order-toolbar
.primary-button:disabled {
    opacity:
            .45;

    cursor:
            not-allowed;

    transform:
            none;

    box-shadow:
            2px 2px 0
            var(--black);
}


/* =========================================================
   UPLOAD PANEL
========================================================= */

.photo-upload-panel {
    position:
            sticky;

    top:
            92px;

    padding:
            21px;

    border:
            2px solid
            var(--black);

    background:
            var(--white);

    box-shadow:
            6px 6px 0
            var(--black);
}


.photo-upload-panel h2 {
    margin:
            7px 0
            6px;

    font-size:
            1.1rem;

    font-weight:
            950;
}


.photo-upload-panel > p {
    margin:
            0 0
            17px;

    color:
            var(--grey);

    font-size:
            .66rem;

    font-weight:
            700;

    line-height:
            1.55;
}


.photo-upload-form {
    display:
            grid;

    gap:
            13px;
}


.photo-upload-dropzone {
    min-height:
            190px;

    box-sizing:
            border-box;

    display:
            flex;

    flex-direction:
            column;

    align-items:
            center;

    justify-content:
            center;

    gap:
            7px;

    padding:
            20px;

    border:
            2px dashed
            var(--black);

    background:
            var(--cream);

    text-align:
            center;

    cursor:
            pointer;

    transition:
            transform .12s ease,
            box-shadow .12s ease,
            background .12s ease;
}


.photo-upload-dropzone:hover {
    transform:
            translate(
                    -2px,
                    -2px
            );

    box-shadow:
            5px 5px 0
            var(--black);

    background:
            #fff6d9;
}


.photo-upload-dropzone input {
    position:
            absolute;

    width:
            1px;

    height:
            1px;

    opacity:
            0;

    pointer-events:
            none;
}


.photo-upload-icon {
    width:
            43px;

    height:
            43px;

    display:
            grid;

    place-items:
            center;

    border:
            2px solid
            var(--black);

    border-radius:
            50%;

    background:
            var(--pink);

    box-shadow:
            2px 2px 0
            var(--black);

    font-size:
            1.25rem;

    font-weight:
            900;
}


.photo-upload-dropzone strong {
    font-size:
            .72rem;

    font-weight:
            950;
}


.photo-upload-dropzone small {
    color:
            var(--grey);

    font-size:
            .58rem;

    font-weight:
            700;

    line-height:
            1.5;
}


.photo-upload-preview {
    overflow:
            hidden;

    border:
            2px solid
            var(--black);

    background:
            var(--white);
}


.photo-upload-preview img {
    width:
            100%;

    aspect-ratio:
            4 / 5;

    display:
            block;

    object-fit:
            cover;
}


.photo-upload-preview span {
    display:
            block;

    overflow:
            hidden;

    padding:
            7px 9px;

    text-overflow:
            ellipsis;

    white-space:
            nowrap;

    font-size:
            .57rem;

    font-weight:
            750;
}


.photo-upload-submit {
    width:
            100%;

    box-sizing:
            border-box;
}


/* =========================================================
   GUIDELINES
========================================================= */

.photo-guidelines {
    margin-top:
            20px;

    padding-top:
            17px;

    border-top:
            2px solid
            var(--black);
}


.photo-guidelines > strong {
    font-size:
            .68rem;

    font-weight:
            950;
}


.photo-guidelines ul {
    margin:
            9px 0
            0;

    padding-left:
            17px;

    color:
            var(--grey);

    font-size:
            .59rem;

    font-weight:
            700;

    line-height:
            1.65;
}


/* =========================================================
   EMPTY STATE
========================================================= */

.photo-manager-empty {
    min-height:
            430px;

    display:
            flex;

    flex-direction:
            column;

    align-items:
            center;

    justify-content:
            center;

    padding:
            30px;

    border:
            2px solid
            var(--black);

    background:
            var(--white);

    box-shadow:
            6px 6px 0
            var(--black);

    text-align:
            center;
}


.photo-manager-empty-icon {
    width:
            64px;

    height:
            64px;

    display:
            grid;

    place-items:
            center;

    margin-bottom:
            14px;

    border:
            2px solid
            var(--black);

    border-radius:
            50%;

    background:
            var(--pink);

    box-shadow:
            3px 3px 0
            var(--black);

    font-size:
            1.4rem;
}


.photo-manager-empty h2 {
    margin:
            0 0
            7px;

    font-size:
            1.35rem;
}


.photo-manager-empty p {
    max-width:
            390px;

    margin:
            0;

    color:
            var(--grey);

    font-size:
            .67rem;

    font-weight:
            700;

    line-height:
            1.55;
}


/* =========================================================
   BOTTOM CONTROLS
========================================================= */

.photo-manager-bottom-actions {
    display: flex;
    justify-content: flex-end;

    gap: 12px;

    margin-top:
            30px;

    padding-top:
            23px;

    border-top:
            2px solid
            var(--black);
}


/* =========================================================
   ACCOUNT FALLBACK
========================================================= */

.photo-account-fallback {
    width:
            31px;

    height:
            31px;

    flex:
            0 0 31px;

    display:
            grid;

    place-items:
            center;

    border:
            2px solid
            var(--black);

    border-radius:
            50%;

    background:
            var(--pink);

    font-size:
            .68rem;

    font-weight:
            950;
}


/* =========================================================
   TABLET
========================================================= */

@media (
max-width: 900px
) {

    .photo-manager-layout {
        grid-template-columns:
            1fr;
    }


    .photo-upload-panel {
        position:
                static;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (
max-width: 650px
) {

    .photo-manager-shell {
        width:
                calc(100% - 22px);

        padding-top:
                24px;
    }


    .photo-manager-heading {
        flex-direction:
                column;

        align-items:
                flex-start;

        padding:
                22px;
    }


    .photo-sort-grid {
        grid-template-columns:
            1fr;
    }


    .photo-manager-help {
        flex-direction:
                column;

        align-items:
                flex-start;
    }


    .photo-order-toolbar {
        flex-direction:
                column;

        align-items:
                stretch;
    }


    .photo-order-toolbar
    .primary-button {
        width:
                100%;

        box-sizing:
                border-box;

        text-align:
                center;
    }


    .photo-manager-bottom-actions {
        flex-direction:
                column-reverse;
    }


    .photo-manager-bottom-actions
    .primary-button,
    .photo-manager-bottom-actions
    .secondary-button {
        width:
                100%;

        box-sizing:
                border-box;

        text-align:
                center;
    }

}

/* Photo reorder arrow buttons */

.photo-move-button {
    width: 35px;
    min-height: 35px;

    padding: 0;

    border: 2px solid var(--black);

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

    box-shadow: 2px 2px 0 var(--black);

    font: inherit;
    font-size: .72rem;
    font-weight: 950;

    cursor: pointer;
}

.photo-move-button:hover:not(:disabled) {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--black);
}

.photo-move-button:disabled {
    opacity: .3;
    cursor: not-allowed;
}

.photo-drag-handle {
    padding: 0;
    font-family: inherit;
}

/* =========================================================
   SWIFTDATING — MESSAGES V3
   APPEND ONLY
========================================================= */

.messages-v3-shell {
    padding:
            36px 0
            70px;
}


.messages-v3-heading {
    margin-bottom:
            22px;
}


.messages-v3-heading h1 {
    margin:
            5px 0
            5px;

    font-size:
            clamp(
                    1.8rem,
                    4vw,
                    2.7rem
            );
}


.messages-v3-heading p {
    margin:
            0;

    color:
            var(--grey);

    font-size:
            .7rem;

    font-weight:
            700;
}


/* =========================================================
   MAIN MESSAGING WINDOW
========================================================= */

.messages-v3-layout {
    display:
            grid;

    grid-template-columns:
        340px
        minmax(
            0,
            1fr
        );

    min-height:
            680px;

    overflow:
            hidden;

    border:
            2px solid
            var(--black);

    background:
            var(--white);

    box-shadow:
            7px 7px 0
            var(--black);
}


/* =========================================================
   CONVERSATION SIDEBAR
========================================================= */

.messages-v3-sidebar {
    min-width:
            0;

    border-right:
            2px solid
            var(--black);

    background:
            var(--cream);
}


.messages-v3-sidebar-heading {
    height:
            67px;

    box-sizing:
            border-box;

    display:
            flex;

    align-items:
            center;

    justify-content:
            space-between;

    padding:
            15px 18px;

    border-bottom:
            2px solid
            var(--black);

    background:
            var(--yellow);
}


.messages-v3-sidebar-heading strong {
    font-size:
            .75rem;

    font-weight:
            950;
}


.messages-v3-sidebar-heading span {
    min-width:
            28px;

    height:
            28px;

    box-sizing:
            border-box;

    display:
            grid;

    place-items:
            center;

    padding:
            0 7px;

    border:
            2px solid
            var(--black);

    background:
            var(--white);

    box-shadow:
            2px 2px 0
            var(--black);

    font-size:
            .58rem;

    font-weight:
            950;
}


.messages-v3-conversation-list {
    max-height:
            611px;

    overflow-y:
            auto;
}


.messages-v3-conversation {
    position:
            relative;

    display:
            grid;

    grid-template-columns:
        54px
        minmax(
            0,
            1fr
        );

    gap:
            12px;

    padding:
            14px 15px;

    border-bottom:
            2px solid
            var(--black);

    color:
            var(--black);

    text-decoration:
            none;

    background:
            var(--white);

    transition:
            background .12s ease,
            transform .12s ease;
}


.messages-v3-conversation:hover {
    background:
            #fff5c7;
}


.messages-v3-conversation.active {
    background:
            #ffe3ed;
}


.messages-v3-conversation.active::before {
    content:
            "";

    position:
            absolute;

    top:
            0;

    bottom:
            0;

    left:
            0;

    width:
            7px;

    background:
            var(--red);
}


.messages-v3-conversation.has-unread {
    background:
            #eaf4ff;
}


.messages-v3-conversation.has-unread.active {
    background:
            #ffe3ed;
}


.messages-v3-conversation-photo,
.messages-v3-partner-photo {
    overflow:
            hidden;

    border:
            2px solid
            var(--black);

    border-radius:
            50%;

    background:
            var(--pink);
}


.messages-v3-conversation-photo {
    width:
            50px;

    height:
            50px;
}


.messages-v3-partner-photo {
    width:
            46px;

    height:
            46px;
}


.messages-v3-conversation-photo img,
.messages-v3-partner-photo img {
    width:
            100%;

    height:
            100%;

    display:
            block;

    object-fit:
            cover;
}


.messages-v3-conversation-photo > span,
.messages-v3-partner-photo > span {
    width:
            100%;

    height:
            100%;

    display:
            grid;

    place-items:
            center;

    font-size:
            .85rem;

    font-weight:
            950;
}


.messages-v3-conversation-copy {
    min-width:
            0;
}


.messages-v3-conversation-topline,
.messages-v3-conversation-bottomline {
    min-width:
            0;

    display:
            flex;

    align-items:
            center;

    justify-content:
            space-between;

    gap:
            8px;
}


.messages-v3-conversation-topline strong {
    overflow:
            hidden;

    text-overflow:
            ellipsis;

    white-space:
            nowrap;

    font-size:
            .68rem;

    font-weight:
            950;
}


.messages-v3-conversation-topline time {
    flex:
            0 0 auto;

    color:
            var(--grey);

    font-size:
            .51rem;

    font-weight:
            750;
}


.messages-v3-conversation-bottomline {
    margin-top:
            5px;
}


.messages-v3-preview {
    min-width:
            0;

    overflow:
            hidden;

    text-overflow:
            ellipsis;

    white-space:
            nowrap;

    color:
            var(--grey);

    font-size:
            .59rem;

    font-weight:
            700;
}


.has-unread
.messages-v3-preview {
    color:
            var(--black);

    font-weight:
            900;
}


.messages-v3-unread-badge {
    min-width:
            23px;

    height:
            23px;

    box-sizing:
            border-box;

    display:
            grid;

    place-items:
            center;

    flex:
            0 0 auto;

    padding:
            0 6px;

    border:
            2px solid
            var(--black);

    border-radius:
            50px;

    background:
            var(--red);

    color:
            var(--white);

    font-size:
            .5rem;

    font-weight:
            950;
}


.messages-v3-activity {
    display:
            block;

    margin-top:
            5px;

    color:
            var(--grey);

    font-size:
            .5rem;

    font-weight:
            650;
}


/* =========================================================
   CHAT
========================================================= */

.messages-v3-chat {
    min-width:
            0;

    display:
            grid;

    grid-template-rows:
        auto
        minmax(
            0,
            1fr
        )
        auto
        auto;

    background:
            #fffdf8;
}


.messages-v3-chat-header {
    min-height:
            67px;

    box-sizing:
            border-box;

    display:
            flex;

    align-items:
            center;

    padding:
            10px 18px;

    border-bottom:
            2px solid
            var(--black);

    background:
            var(--white);
}


.messages-v3-partner {
    display:
            flex;

    align-items:
            center;

    gap:
            11px;

    color:
            var(--black);

    text-decoration:
            none;
}


.messages-v3-partner > div:last-child {
    display:
            grid;

    gap:
            3px;
}


.messages-v3-partner strong {
    font-size:
            .73rem;

    font-weight:
            950;
}


.messages-v3-partner
> div:last-child
> span {
    color:
            var(--grey);

    font-size:
            .54rem;

    font-weight:
            700;
}


/* =========================================================
   MESSAGE THREAD
========================================================= */

.messages-v3-thread {
    min-height:
            0;

    max-height:
            520px;

    overflow-y:
            auto;

    padding:
            22px;

    background:
            #f9f4eb;

    scroll-behavior:
            smooth;
}


.messages-v3-message-row {
    display:
            flex;

    margin-bottom:
            11px;
}


.messages-v3-message-row.mine {
    justify-content:
            flex-end;
}


.messages-v3-message-row.theirs {
    justify-content:
            flex-start;
}


.messages-v3-message-bubble {
    max-width:
            min(
                    72%,
                    520px
            );

    padding:
            10px 12px;

    border:
            2px solid
            var(--black);

    box-shadow:
            3px 3px 0
            var(--black);
}


.messages-v3-message-row.mine
.messages-v3-message-bubble {
    background:
            var(--red);

    color:
            var(--white);
}


.messages-v3-message-row.theirs
.messages-v3-message-bubble {
    background:
            var(--white);

    color:
            var(--black);
}


.messages-v3-message-bubble p {
    margin:
            0;

    white-space:
            pre-wrap;

    overflow-wrap:
            anywhere;

    font-size:
            .69rem;

    font-weight:
            700;

    line-height:
            1.5;
}


.messages-v3-message-bubble time {
    display:
            block;

    margin-top:
            5px;

    text-align:
            right;

    font-size:
            .48rem;

    font-weight:
            750;

    opacity:
            .72;
}


/* =========================================================
   TYPING INDICATOR
========================================================= */

.messages-v3-typing {
    width:
            fit-content;

    display:
            flex;

    align-items:
            center;

    gap:
            4px;

    margin-top:
            6px;

    padding:
            8px 11px;

    border:
            2px solid
            var(--black);

    background:
            var(--blue);

    box-shadow:
            2px 2px 0
            var(--black);
}


.messages-v3-typing[hidden] {
    display:
            none !important;
}


.messages-v3-typing > span {
    width:
            6px;

    height:
            6px;

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

    border-radius:
            50%;

    background:
            var(--black);

    animation:
            swiftTypingBounce
            .9s infinite;
}


.messages-v3-typing > span:nth-child(2) {
    animation-delay:
            .15s;
}


.messages-v3-typing > span:nth-child(3) {
    animation-delay:
            .3s;
}


.messages-v3-typing strong {
    margin-left:
            5px;

    font-size:
            .54rem;

    font-weight:
            850;
}


@keyframes swiftTypingBounce {

    0%,
    60%,
    100% {
        transform:
                translateY(
                        0
                );
    }

    30% {
        transform:
                translateY(
                        -4px
                );
    }

}


/* =========================================================
   SEEN
========================================================= */

.messages-v3-seen {
    padding:
            5px 22px
            3px;

    background:
            var(--white);

    color:
            var(--grey);

    text-align:
            right;

    font-size:
            .52rem;

    font-weight:
            800;
}


.messages-v3-seen[hidden] {
    display:
            none;
}


/* =========================================================
   COMPOSER
========================================================= */

.messages-v3-composer {
    display:
            grid;

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

    gap:
            10px;

    padding:
            13px;

    border-top:
            2px solid
            var(--black);

    background:
            var(--white);
}


.messages-v3-composer-field {
    min-width:
            0;
}


.messages-v3-composer textarea {
    width:
            100%;

    min-height:
            45px;

    max-height:
            140px;

    box-sizing:
            border-box;

    display:
            block;

    resize:
            none;

    padding:
            11px 12px;

    border:
            2px solid
            var(--black);

    border-radius:
            0;

    background:
            var(--cream);

    color:
            var(--black);

    font:
            inherit;

    font-size:
            .68rem;

    font-weight:
            700;

    line-height:
            1.4;
}


.messages-v3-composer textarea:focus {
    outline:
            3px solid
            var(--blue);

    outline-offset:
            2px;
}


.messages-v3-send {
    min-width:
            86px;

    border:
            2px solid
            var(--black);

    background:
            var(--red);

    color:
            var(--white);

    box-shadow:
            3px 3px 0
            var(--black);

    font:
            inherit;

    font-size:
            .67rem;

    font-weight:
            950;

    cursor:
            pointer;
}


.messages-v3-send:hover {
    transform:
            translate(
                    -1px,
                    -1px
            );

    box-shadow:
            5px 5px 0
            var(--black);
}


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

.messages-v3-empty-chat {
    grid-row:
            1 / -1;

    min-height:
            620px;

    display:
            flex;

    flex-direction:
            column;

    align-items:
            center;

    justify-content:
            center;

    padding:
            30px;

    text-align:
            center;
}


.messages-v3-empty-icon {
    width:
            66px;

    height:
            66px;

    display:
            grid;

    place-items:
            center;

    margin-bottom:
            15px;

    border:
            2px solid
            var(--black);

    border-radius:
            50%;

    background:
            var(--pink);

    box-shadow:
            3px 3px 0
            var(--black);

    font-size:
            1.4rem;
}


.messages-v3-empty-chat h2 {
    margin:
            7px 0;
}


.messages-v3-empty-chat p {
    max-width:
            390px;

    margin:
            0 0
            18px;

    color:
            var(--grey);

    font-size:
            .67rem;

    font-weight:
            700;

    line-height:
            1.55;
}


.messages-v3-no-conversations {
    display:
            grid;

    gap:
            6px;

    padding:
            25px 18px;

    color:
            var(--grey);
}


.messages-v3-no-conversations strong {
    color:
            var(--black);

    font-size:
            .68rem;
}


.messages-v3-no-conversations span {
    font-size:
            .6rem;

    line-height:
            1.5;
}


/* =========================================================
   TABLET / MOBILE
========================================================= */

@media (
max-width: 850px
) {

    .messages-v3-layout {
        grid-template-columns:
            1fr;

        min-height:
                auto;
    }


    .messages-v3-sidebar {
        border-right:
                0;

        border-bottom:
                2px solid
                var(--black);
    }


    .messages-v3-conversation-list {
        max-height:
                280px;
    }


    .messages-v3-thread {
        min-height:
                480px;

        max-height:
                480px;
    }

}


@media (
max-width: 600px
) {

    .messages-v3-shell {
        width:
                calc(100% - 20px);

        padding-top:
                22px;
    }


    .messages-v3-layout {
        box-shadow:
                4px 4px 0
                var(--black);
    }


    .messages-v3-message-bubble {
        max-width:
                84%;
    }


    .messages-v3-thread {
        padding:
                15px;

        min-height:
                430px;

        max-height:
                430px;
    }


    .messages-v3-composer {
        grid-template-columns:
            minmax(
                0,
                1fr
            )
            72px;

        padding:
                10px;
    }


    .messages-v3-send {
        min-width:
                0;
    }

}

/* Messaging V3 AJAX sending */

.messages-v3-send:disabled {
    opacity: .6;
    cursor: wait;
    transform: none !important;
    box-shadow: 2px 2px 0 var(--black) !important;
}


/* ==========================================================
   STEP 7 - ADMIN PHOTO MODERATION
   Append this block to the BOTTOM of style.css
========================================================== */

.admin-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
}

.admin-photo-card {
    border: 2px solid #151515;
    background: #fffdf6;
    box-shadow: 6px 6px 0 #151515;
    overflow: hidden;
}

.admin-photo-image-link {
    display: block;
    background: #ece7db;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.admin-photo-image-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.admin-photo-card-body {
    padding: 18px;
}

.admin-photo-member {
    display: grid;
    gap: 4px;
    margin-bottom: 14px;
}

.admin-photo-member strong {
    font-size: 1.05rem;
}

.admin-photo-member span,
.admin-photo-member small,
.admin-photo-card-body .admin-muted {
    display: block;
    opacity: .72;
}

.admin-photo-actions {
    display: grid;
    gap: 14px;
    margin-top: 16px;
}

.admin-photo-actions form {
    margin: 0;
}

.admin-photo-reject-form {
    display: grid;
    gap: 10px;
    padding-top: 14px;
    border-top: 2px solid #151515;
}

.admin-photo-reject-form label {
    display: grid;
    gap: 7px;
    font-weight: 800;
}

.admin-photo-reject-form input {
    width: 100%;
    min-height: 44px;
    border: 2px solid #151515;
    background: #fff;
    padding: 9px 11px;
    font: inherit;
}

.admin-rejected-history {
    display: grid;
    gap: 14px;
}

.admin-rejected-item {
    border: 2px solid #151515;
    background: #fffdf6;
    padding: 18px;
    box-shadow: 4px 4px 0 #151515;
}

.admin-rejected-item > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.admin-rejected-item p {
    margin: 12px 0;
}

.admin-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 30px;
}

.admin-pagination a {
    border: 2px solid #151515;
    background: #fffdf6;
    color: #151515;
    box-shadow: 3px 3px 0 #151515;
    padding: 9px 13px;
    text-decoration: none;
    font-weight: 800;
}

@media (max-width: 680px) {
    .admin-photo-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   STEP 7 — ADMIN PAGINATION
   APPEND TO THE BOTTOM OF style.css
========================================================= */

.admin-pagination-summary {
    display: block;
    margin-top: 6px;
    font-weight: 700;
    opacity: .72;
}

.admin-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 2px solid #151515;
}

.admin-pagination a,
.admin-pagination > span:not(.admin-pagination-gap) {
    min-width: 42px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border: 2px solid #151515;
    box-shadow: 3px 3px 0 #151515;
    background: #fffaf0;
    color: #151515;
    text-decoration: none;
    font-weight: 800;
}

.admin-pagination a:hover,
.admin-pagination > span.active {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 #151515;
}

.admin-pagination > span.active {
    background: #ffd166;
}

.admin-pagination-gap {
    padding: 0 3px;
    font-weight: 900;
}

@media (max-width: 640px) {
    .admin-pagination {
        justify-content: flex-start;
    }

    .admin-pagination a,
    .admin-pagination > span:not(.admin-pagination-gap) {
        min-width: 38px;
        min-height: 38px;
        padding: 7px 10px;
    }
}



/* =========================================================
   SWIFTDATING LEGAL / SAFETY PAGES
   STEP 8
   APPEND THIS BLOCK TO THE BOTTOM OF style.css
   ========================================================= */

.legal-page {
    min-height: 100vh;
    background: #fff9ec;
    color: #171717;
}

.legal-header {
    border-bottom: 3px solid #171717;
    background: #fff9ec;
}

.legal-header-inner {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.legal-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.legal-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 12px;
    border: 2px solid transparent;
    color: #171717;
    font-weight: 800;
    text-decoration: none;
}

.legal-nav a:hover,
.legal-nav a.active {
    border-color: #171717;
    background: #ffd65a;
    box-shadow: 3px 3px 0 #171717;
}

.legal-main {
    padding: 48px 0 72px;
}

.legal-shell {
    max-width: 980px;
}

.legal-hero {
    margin-bottom: 28px;
}

.legal-hero h1 {
    max-width: 820px;
    margin: 8px 0 14px;
    font-size: clamp(2.4rem, 6vw, 5.2rem);
    line-height: .96;
    letter-spacing: -.05em;
}

.legal-hero p {
    max-width: 760px;
    font-size: 1.08rem;
    line-height: 1.7;
}

.legal-hero small {
    display: inline-block;
    margin-top: 8px;
    font-weight: 800;
}

.legal-card {
    margin: 0 0 22px;
    padding: 28px;
    border: 3px solid #171717;
    background: #ffffff;
    box-shadow: 7px 7px 0 #171717;
}

.legal-card:nth-of-type(3n + 1) {
    background: #fff3c4;
}

.legal-card:nth-of-type(3n + 2) {
    background: #ffe0df;
}

.legal-card:nth-of-type(3n + 3) {
    background: #e1f1ff;
}

.legal-card h2 {
    margin: 0 0 14px;
    font-size: 1.45rem;
    line-height: 1.15;
}

.legal-card h3 {
    margin: 24px 0 8px;
}

.legal-card p,
.legal-card li {
    line-height: 1.7;
}

.legal-card p:last-child,
.legal-card ul:last-child {
    margin-bottom: 0;
}

.legal-card ul,
.legal-card ol {
    padding-left: 24px;
}

.legal-card li + li {
    margin-top: 8px;
}

.legal-card a {
    color: inherit;
    font-weight: 900;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.legal-emergency-card {
    background: #ffcdc9 !important;
}

.legal-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.legal-table th,
.legal-table td {
    padding: 14px;
    border: 2px solid #171717;
    vertical-align: top;
    text-align: left;
    line-height: 1.55;
}

.legal-table th {
    background: #ffd65a;
}

.legal-footer {
    border-top: 3px solid #171717;
    background: #171717;
    color: #fff9ec;
}

.legal-footer-inner {
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.legal-footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.legal-footer a {
    color: #fff9ec;
    font-weight: 800;
}

@media (max-width: 760px) {
    .legal-header-inner,
    .legal-footer-inner {
        align-items: flex-start;
        flex-direction: column;
        padding-top: 18px;
        padding-bottom: 18px;
    }

    .legal-nav {
        width: 100%;
    }

    .legal-nav a {
        padding-left: 8px;
        padding-right: 8px;
    }

    .legal-main {
        padding-top: 32px;
    }

    .legal-card {
        padding: 20px;
        box-shadow: 5px 5px 0 #171717;
    }
}



/* =========================================================
   SWIFTDATING STEP 8 - REGISTRATION LEGAL LINKS
   APPEND TO THE BOTTOM OF style.css - DO NOT REPLACE
   ========================================================= */

.register-age-notice {
    margin: 8px 0 18px;
    padding: 14px 16px;
    border: 2px solid #171717;
    background: #fff3c4;
    font-weight: 800;
    line-height: 1.45;
    box-shadow: 3px 3px 0 #171717;
}

.register-policy-links {
    margin: 10px 0 22px;
    font-size: .92rem;
    line-height: 1.55;
}

.register-policy-links a,
.checkbox-row a {
    color: inherit;
    font-weight: 900;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}


/* =========================================================
   SWIFTDATING STEP 8C - EXPLICIT DATING PREFERENCE CONSENT
   APPEND TO THE BOTTOM OF style.css - DO NOT REPLACE
   ========================================================= */

.special-consent-card,
.consent-status-box,
.consent-management-card {
    margin: 22px 0;
    padding: 18px;
    border: 3px solid #171717;
    background: #fff3c4;
    box-shadow: 4px 4px 0 #171717;
}

.special-consent-card {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    cursor: pointer;
}

.special-consent-card input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 3px;
    flex: 0 0 auto;
}

.special-consent-card strong,
.consent-status-box strong,
.consent-management-card strong {
    display: block;
    margin-bottom: 7px;
}

.special-consent-card p,
.consent-status-box p,
.consent-management-card p {
    margin: 0;
    line-height: 1.6;
}

.special-consent-card a,
.consent-status-box a,
.consent-management-card a {
    color: inherit;
    font-weight: 900;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

.consent-status-box {
    background: #e3f7df;
}

.consent-management-card {
    margin-top: 26px;
    background: #ffe0df;
}

.consent-management-card form {
    margin-top: 14px;
}

.consent-withdraw-button {
    appearance: none;
    border: 2px solid #171717;
    background: #ffffff;
    color: #171717;
    padding: 11px 15px;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 3px 3px 0 #171717;
}

.consent-withdraw-button:hover {
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 0 #171717;
}


/* =========================================================
   SWIFTDATING STEP 8E - AGE ASSURANCE
   APPEND TO THE BOTTOM OF style.css - DO NOT REPLACE
   ========================================================= */

.age-assurance-main {
    min-height: calc(100vh - 80px);
    display: grid;
    place-items: center;
    padding: 42px 20px 70px;
    background: #fff9ec;
}

.age-assurance-card {
    width: min(720px, 100%);
    padding: 34px;
    border: 3px solid #171717;
    background: #ffffff;
    box-shadow: 8px 8px 0 #171717;
}

.age-assurance-card h1 {
    margin: 8px 0 14px;
    font-size: clamp(2.2rem, 6vw, 4.6rem);
    line-height: .95;
    letter-spacing: -.05em;
}

.age-assurance-lead {
    max-width: 620px;
    font-size: 1.08rem;
    line-height: 1.65;
}

.age-assurance-points {
    display: grid;
    gap: 12px;
    margin: 26px 0;
}

.age-assurance-points > div {
    padding: 16px;
    border: 2px solid #171717;
    background: #fff3c4;
}

.age-assurance-points > div:nth-child(2) {
    background: #e1f1ff;
}

.age-assurance-points > div:nth-child(3) {
    background: #ffe0df;
}

.age-assurance-points strong,
.age-assurance-points span {
    display: block;
}

.age-assurance-points strong {
    margin-bottom: 5px;
    font-size: 1rem;
}

.age-assurance-points span {
    line-height: 1.55;
}

.age-assurance-button {
    width: 100%;
    justify-content: center;
    margin-top: 4px;
}

.age-assurance-small {
    margin: 18px 0 0;
    font-size: .9rem;
    line-height: 1.55;
}

.age-assurance-small a {
    color: inherit;
    font-weight: 900;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

@media (max-width: 640px) {
    .age-assurance-card {
        padding: 22px;
        box-shadow: 5px 5px 0 #171717;
    }
}


/* =========================================================
   SWIFTDATING STEP 8E - AGE ASSURANCE
   APPEND TO THE BOTTOM OF style.css - DO NOT REPLACE
   ========================================================= */

.age-assurance-main {
    min-height: calc(100vh - 80px);
    display: grid;
    place-items: center;
    padding: 42px 20px 70px;
    background: #fff9ec;
}

.age-assurance-card {
    width: min(720px, 100%);
    padding: 34px;
    border: 3px solid #171717;
    background: #ffffff;
    box-shadow: 8px 8px 0 #171717;
}

.age-assurance-card h1 {
    margin: 8px 0 14px;
    font-size: clamp(2.2rem, 6vw, 4.6rem);
    line-height: .95;
    letter-spacing: -.05em;
}

.age-assurance-lead {
    max-width: 620px;
    font-size: 1.08rem;
    line-height: 1.65;
}

.age-assurance-points {
    display: grid;
    gap: 12px;
    margin: 26px 0;
}

.age-assurance-points > div {
    padding: 16px;
    border: 2px solid #171717;
    background: #fff3c4;
}

.age-assurance-points > div:nth-child(2) {
    background: #e1f1ff;
}

.age-assurance-points > div:nth-child(3) {
    background: #ffe0df;
}

.age-assurance-points strong,
.age-assurance-points span {
    display: block;
}

.age-assurance-points strong {
    margin-bottom: 5px;
    font-size: 1rem;
}

.age-assurance-points span {
    line-height: 1.55;
}

.age-assurance-button {
    width: 100%;
    justify-content: center;
    margin-top: 4px;
}

.age-assurance-small {
    margin: 18px 0 0;
    font-size: .9rem;
    line-height: 1.55;
}

.age-assurance-small a {
    color: inherit;
    font-weight: 900;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

@media (max-width: 640px) {
    .age-assurance-card {
        padding: 22px;
        box-shadow: 5px 5px 0 #171717;
    }
}