Library
/
style.css


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

:root {
    --bg: #F7F7F4;
    --surface: #FFFFFF;
    --surface-2: #F0F0EB;
    --border: #DDDDD5;
    --text: #111111;
    --muted: #6B6B66;

    /* Legacy variable names retained so existing layouts keep working.
       Purple is intentionally removed from the brand system. */
    --purple: #E6E45E;
    --purple-light: #8B891A;

    --green: #178A4A;

    --brand-yellow: #E6E45E;
    --brand-black: #111111;
    --brand-white: #FFFFFF;

    --max-width: 1440px;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Inter, Arial, Helvetica, sans-serif;
    background:
        radial-gradient(
            circle at 75% 10%,
            rgba(230, 228, 94, 0.10),
            transparent 30%
        ),
        var(--bg);

    color: var(--text);
    line-height: 1.5;
}

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

.site-header {
    width: 100%;
    min-height: 78px;

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

    padding: 0 4vw;

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

    background: rgba(7, 9, 13, 0.88);

    backdrop-filter: blur(18px);

    position: sticky;
    top: 0;

    z-index: 1000;
}

.logo {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -1px;
}

.logo span {
    color: var(--purple-light);
}

.tagline {
    color: var(--muted);
    font-size: 9px;

    margin-top: -3px;

    letter-spacing: 1.8px;
}

.main-nav {
    display: flex;
    align-items: center;

    gap: 30px;

    font-size: 14px;
}

.main-nav a {
    color: #222222;
}

.main-nav a:hover {
    color: white;
}

.nav-cta {
    background: var(--purple);

    padding: 11px 18px;

    border-radius: 8px;

    color: white !important;

    font-weight: 700;
}

main {
    overflow: hidden;
}

.hero {
    max-width: var(--max-width);

    margin: 0 auto;

    min-height: 650px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    padding: 80px 4vw 70px;

    gap: 60px;
}

.eyebrow {
    display: inline-block;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.7px;

    color: var(--purple-light);

    margin-bottom: 18px;
}

.hero h1 {
    font-size: clamp(52px, 6vw, 86px);

    line-height: 0.98;

    letter-spacing: -4px;

    max-width: 850px;
}

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

.hero p {
    max-width: 650px;

    color: var(--muted);

    margin-top: 26px;

    font-size: 18px;

    line-height: 1.7;
}

.hero-actions {
    margin-top: 32px;

    display: flex;

    gap: 12px;

    flex-wrap: wrap;
}

.btn {
    padding: 15px 22px;

    border-radius: 9px;

    font-weight: 800;

    display: inline-flex;

    align-items: center;

    justify-content: center;
}

.btn-primary {
    background: linear-gradient(
        135deg,
        var(--purple),
        #D8D64E
    );

    color: white;
}

.btn-secondary {
    background: var(--surface-2);

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

    color: white;
}

.community-proof {
    margin-top: 38px;

    display: flex;

    align-items: center;

    gap: 16px;

    color: var(--muted);

    font-size: 13px;
}

.community-proof strong {
    color: white;
}

.avatars {
    display: flex;
}

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

    border-radius: 50%;

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

    background: var(--surface-2);

    display: grid;
    place-items: center;

    margin-left: -8px;

    font-weight: 800;
}

.avatar:first-child {
    margin-left: 0;
}

.hero-visual {
    position: relative;

    min-height: 500px;
}

.creative-card {
    position: absolute;

    width: 330px;

    background: rgba(15, 20, 28, 0.94);

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

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 30px 70px rgba(0,0,0,0.55);
}

.card-one {
    left: 5%;
    top: 30px;

    transform: rotate(-4deg);
}

.card-two {
    right: 0;
    top: 140px;

    transform: rotate(5deg);
}

.card-image {
    height: 360px;
}

.placeholder-photo {
    background-size: cover;
    background-position: center;
}

.placeholder-photo.model {
    background:
        linear-gradient(
            135deg,
            rgba(230, 228, 94, 0.35),
            rgba(0,0,0,0.15)
        ),
        linear-gradient(
            140deg,
            #1d2532,
            #0f1319
        );
}

.placeholder-photo.photographer {
    background:
        radial-gradient(
            circle at 70% 30%,
            rgba(230, 228, 94,0.25),
            transparent 30%
        ),
        linear-gradient(
            160deg,
            #252a34,
            #0b0d12
        );
}

.placeholder-photo.mua {
    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(255, 118, 180, 0.18),
            transparent 25%
        ),
        linear-gradient(
            145deg,
            #261722,
            #0e1015
        );
}

.creative-meta {
    padding: 18px;

    display: flex;

    justify-content: space-between;

    align-items: center;
}

.creative-meta strong {
    display: block;

    font-size: 15px;
}

.creative-meta span {
    display: block;

    color: var(--muted);

    font-size: 12px;

    margin-top: 3px;
}

.score {
    width: 42px;
    height: 42px;

    border-radius: 50%;

    display: grid;
    place-items: center;

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

    color: var(--green);

    font-weight: 900;
}

.floating-badge {
    position: absolute;

    bottom: 55px;

    left: 145px;

    padding: 13px 18px;

    background: #10151c;

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

    border-radius: 40px;

    color: white;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 0.6px;

    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

.floating-badge span {
    color: var(--green);

    margin-right: 8px;
}

.role-strip {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);

    display: flex;

    justify-content: center;

    gap: 10px;

    flex-wrap: wrap;

    padding: 22px 4vw;
}

.role-strip a {
    padding: 11px 16px;

    background: var(--surface);

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

    border-radius: 8px;

    color: #444444;

    font-size: 13px;
}

.section {
    max-width: var(--max-width);

    margin: 0 auto;

    padding: 90px 4vw;
}

.section-heading {
    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    margin-bottom: 32px;

    gap: 30px;
}

.section-heading h2,
.score-section h2,
.cta-section h2 {
    font-size: clamp(34px, 4vw, 54px);

    line-height: 1.05;

    letter-spacing: -2px;
}

.text-link {
    color: var(--purple-light);

    font-weight: 700;

    font-size: 14px;
}

.creative-grid,
.shoot-grid {
    display: grid;

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

    gap: 20px;
}

.profile-card,
.shoot-card {
    background: var(--surface);

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

    border-radius: 14px;

    overflow: hidden;
}

.profile-photo {
    height: 360px;
}

.profile-info {
    padding: 20px;
}

.status {
    color: var(--green);

    font-size: 11px;

    font-weight: 800;

    margin-bottom: 10px;

    letter-spacing: 0.4px;
}

.status span {
    display: inline-block;

    width: 7px;
    height: 7px;

    background: var(--green);

    border-radius: 50%;

    margin-right: 6px;
}

.profile-card h3,
.shoot-card h3 {
    font-size: 21px;

    margin-bottom: 4px;
}

.profile-card p {
    color: var(--muted);

    font-size: 13px;
}

.profile-footer {
    display: flex;

    justify-content: space-between;

    margin-top: 22px;

    padding-top: 18px;

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

.profile-footer small {
    display: block;

    font-size: 9px;

    color: var(--muted);

    margin-bottom: 5px;

    letter-spacing: 0.7px;
}

.profile-footer strong {
    font-size: 20px;
}

.shoot-image {
    height: 240px;
}

.editorial {
    background:
        radial-gradient(
            circle at 40% 40%,
            rgba(230, 228, 94,0.35),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #181b25,
            #0b0d12
        );
}

.streetwear {
    background:
        linear-gradient(
            135deg,
            rgba(112,112,112,0.14),
            rgba(0,0,0,0.2)
        ),
        #10141a;
}

.fashion {
    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(192,68,120,0.22),
            transparent 35%
        ),
        #101217;
}

.shoot-body {
    padding: 20px;
}

.shoot-badges {
    display: flex;

    gap: 7px;

    margin-bottom: 14px;
}

.badge {
    font-size: 10px;

    padding: 5px 8px;

    border-radius: 6px;

    font-weight: 900;

    letter-spacing: 0.4px;
}

.badge.purple {
    color: #8B891A;

    background: rgba(230, 228, 94,0.16);
}

.badge.green {
    color: var(--green);

    background: rgba(49,233,129,0.12);
}

.badge.paid {
    color: #ffcc63;

    background: rgba(255,190,50,0.13);
}

.shoot-location,
.shoot-date {
    color: var(--muted);

    font-size: 13px;

    margin-top: 7px;
}

.roles-needed {
    margin-top: 20px;
}

.roles-needed strong {
    font-size: 11px;

    color: #555555;
}

.role-tags {
    display: flex;

    gap: 7px;

    flex-wrap: wrap;

    margin-top: 9px;
}

.role-tags span {
    padding: 7px 10px;

    border-radius: 6px;

    background: var(--surface-2);

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

    color: #444444;

    font-size: 11px;
}

.card-button {
    margin-top: 20px;

    width: 100%;

    display: block;

    text-align: center;

    border: 1px solid rgba(230, 228, 94,0.5);

    padding: 11px;

    border-radius: 7px;

    color: var(--purple-light);

    font-weight: 700;

    font-size: 13px;
}

.score-section {
    max-width: calc(var(--max-width) - 8vw);

    margin: 80px auto;

    padding: 70px;

    border-radius: 20px;

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

    background:
        radial-gradient(
            circle at 80% 40%,
            rgba(230, 228, 94,0.14),
            transparent 35%
        ),
        var(--surface);

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    align-items: center;
}

.score-copy p {
    color: var(--muted);

    max-width: 560px;

    margin: 24px 0 0;

    line-height: 1.8;
}

.score-demo {
    display: flex;

    align-items: center;

    gap: 40px;

    justify-content: center;
}

.score-circle {
    min-width: 150px;
    height: 150px;

    border-radius: 50%;

    border: 3px solid var(--green);

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    font-size: 48px;

    font-weight: 900;

    color: var(--green);
}

.score-circle span {
    font-size: 9px;

    color: var(--muted);

    letter-spacing: 1px;

    margin-top: -6px;
}

.score-stats {
    min-width: 220px;
}

.score-stats > div {
    display: flex;

    justify-content: space-between;

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

    padding: 12px 0;

    gap: 30px;
}

.score-stats span {
    color: var(--muted);

    font-size: 12px;
}

.score-stats strong {
    color: white;
}

.cta-section {
    text-align: center;

    padding: 120px 4vw;

    max-width: 900px;

    margin: auto;
}

.cta-section p {
    color: var(--muted);

    margin-top: 18px;

    font-size: 17px;
}

.cta-section .hero-actions {
    justify-content: center;
}

footer {
    border-top: 1px solid var(--border);

    padding: 50px 4vw;

    text-align: center;

    color: var(--muted);
}

footer .logo {
    color: white;

    margin-bottom: 10px;
}

.copyright {
    font-size: 11px;

    margin-top: 18px;
}

@media (max-width: 1000px) {

    .main-nav a:not(.nav-cta) {
        display: none;
    }

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

        padding-top: 60px;
    }

    .hero-visual {
        min-height: 550px;
    }

    .creative-grid,
    .shoot-grid {
        grid-template-columns: 1fr 1fr;
    }

    .score-section {
        grid-template-columns: 1fr;

        padding: 45px;
    }
}

@media (max-width: 680px) {

    .site-header {
        padding: 0 18px;
    }

    .tagline {
        display: none;
    }

    .hero {
        padding-left: 20px;
        padding-right: 20px;
    }

    .hero h1 {
        font-size: 51px;

        letter-spacing: -2.5px;
    }

    .hero-visual {
        min-height: 420px;
    }

    .creative-card {
        width: 240px;
    }

    .card-image {
        height: 260px;
    }

    .card-one {
        left: 0;
    }

    .card-two {
        right: -30px;

        top: 100px;
    }

    .floating-badge {
        left: 10px;

        bottom: 20px;
    }

    .creative-grid,
    .shoot-grid {
        grid-template-columns: 1fr;
    }

    .section {
        padding: 70px 20px;
    }

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

        flex-direction: column;
    }

    .profile-photo {
        height: 430px;
    }

    .score-section {
        margin: 40px 20px;

        padding: 35px 25px;
    }

    .score-demo {
        flex-direction: column;
    }

    .score-stats {
        width: 100%;
    }
}
/* =========================================
   AUTHENTICATION
========================================= */

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

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(230, 228, 94,0.14),
            transparent 35%
        ),
        var(--bg);
}

.auth-shell {
    width: min(100% - 32px, 520px);

    margin: 0 auto;

    padding: 50px 0 80px;
}

.auth-logo {
    display: block;

    text-align: center;

    font-size: 28px;

    font-weight: 900;

    letter-spacing: -1px;

    margin-bottom: 32px;
}

.auth-logo span {
    color: var(--purple-light);
}

.auth-card,
.onboarding-card {
    background: rgba(14,18,24,0.95);

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

    border-radius: 18px;

    padding: 38px;

    box-shadow:
        0 30px 80px rgba(0,0,0,0.35);
}

.auth-heading h1 {
    font-size: 42px;

    letter-spacing: -2px;

    line-height: 1;

    margin-bottom: 14px;
}

.auth-heading p {
    color: var(--muted);

    margin-bottom: 30px;

    line-height: 1.6;
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;

    font-size: 12px;

    font-weight: 800;

    margin-bottom: 8px;

    color: #222222;
}

.form-row {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 14px;
}

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

    background: #FFFFFF;

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

    color: white;

    border-radius: 9px;

    padding: 14px 15px;

    outline: none;

    font: inherit;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--purple);
}

.form-group textarea {
    resize: vertical;
}

.auth-submit {
    width: 100%;

    border: none;

    background:
        linear-gradient(
            135deg,
            var(--purple),
            #D8D64E
        );

    color: white;

    padding: 15px;

    border-radius: 9px;

    font-size: 14px;

    font-weight: 900;

    cursor: pointer;

    margin-top: 8px;
}

.auth-bottom {
    text-align: center;

    color: var(--muted);

    font-size: 13px;

    margin-top: 25px;
}

.auth-bottom a {
    color: var(--purple-light);

    font-weight: 800;
}

.form-errors {
    background:
        rgba(255,70,90,0.08);

    border: 1px solid
        rgba(255,70,90,0.25);

    color: #ff9ba8;

    padding: 14px;

    border-radius: 9px;

    margin-bottom: 20px;

    font-size: 13px;
}


/* =========================================
   ONBOARDING
========================================= */

.onboarding-shell {
    width: min(100% - 32px, 800px);

    margin: 0 auto;

    padding: 50px 0 100px;
}

.role-select-grid {
    display: grid;

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

    gap: 10px;
}

.role-option input {
    display: none;
}

.role-option span {
    display: block;

    padding: 16px;

    text-align: center;

    background: #FFFFFF;

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

    border-radius: 9px;

    color: #444444;

    cursor: pointer;

    transition: 0.2s ease;
}

.role-option input:checked + span {
    border-color: var(--purple);

    background:
        rgba(230, 228, 94,0.14);

    color: white;
}


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

.member-dashboard {
    max-width: var(--max-width);

    margin: auto;

    padding: 70px 4vw;
}

.dashboard-welcome {
    margin-bottom: 45px;
}

.dashboard-welcome h1 {
    font-size: clamp(
        42px,
        6vw,
        72px
    );

    letter-spacing: -3px;

    line-height: 1;
}

.dashboard-welcome p {
    color: var(--muted);

    margin-top: 12px;
}

.dashboard-grid {
    display: grid;

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

    gap: 15px;
}

.dashboard-card {
    background: var(--surface);

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

    border-radius: 14px;

    padding: 25px;
}

.dashboard-label {
    color: var(--muted);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1px;
}

.dashboard-number {
    display: block;

    font-size: 42px;

    margin: 12px 0;
}

.dashboard-card p {
    color: var(--muted);

    font-size: 12px;

    line-height: 1.6;
}


@media (max-width: 800px) {

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

    .role-select-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 550px) {

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

    .auth-card,
    .onboarding-card {
        padding: 26px 20px;
    }

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

}
/* =========================================
   CREATIVE DIRECTORY
========================================= */

.nav-active {
    color: var(--purple-light) !important;
}


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

    background:
        radial-gradient(
            circle at 75% 5%,
            rgba(230, 228, 94,0.10),
            transparent 25%
        ),
        var(--bg);
}


/* HERO */

.directory-hero {
    max-width: var(--max-width);

    margin: 0 auto;

    padding: 90px 4vw 55px;

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 50px;
}


.directory-hero h1 {
    font-size: clamp(
        48px,
        6vw,
        78px
    );

    line-height: 0.98;

    letter-spacing: -4px;

    max-width: 800px;
}


.directory-hero h1 span {
    color: var(--purple-light);
}


.directory-hero p {
    color: var(--muted);

    max-width: 650px;

    font-size: 17px;

    line-height: 1.7;

    margin-top: 24px;
}


.directory-count {
    min-width: 180px;

    text-align: right;
}


.directory-count strong {
    display: block;

    color: white;

    font-size: 52px;

    line-height: 1;

    letter-spacing: -2px;
}


.directory-count span {
    display: block;

    color: var(--muted);

    font-size: 12px;

    margin-top: 8px;

    letter-spacing: 0.5px;
}


/* FILTER AREA */

.directory-filter-wrap {
    border-top: 1px solid var(--border);

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

    background: rgba(
        14,
        18,
        24,
        0.75
    );

    backdrop-filter: blur(14px);
}


.directory-filters {
    max-width: var(--max-width);

    margin: auto;

    padding: 22px 4vw;

    display: grid;

    grid-template-columns:
        1.15fr
        0.8fr
        1.05fr
        0.9fr
        1fr
        auto
        auto;

    gap: 10px;

    align-items: end;
}


.directory-filter label {
    display: block;

    color: var(--muted);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 1px;

    margin-bottom: 7px;

    text-transform: uppercase;
}


.directory-filter select,
.directory-filter input {
    width: 100%;

    height: 46px;

    background: #FFFFFF;

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

    color: white;

    border-radius: 8px;

    padding: 0 13px;

    outline: none;

    font: inherit;

    font-size: 13px;
}


.directory-filter select:focus,
.directory-filter input:focus {
    border-color: var(--purple);
}

.directory-filter select[name="availability"] {
    border-color: rgba(49,233,129,0.22);
}

.directory-filter select[name="availability"]:focus {
    border-color: var(--green);
}


.directory-search-btn {
    height: 46px;

    padding: 0 22px;

    border: none;

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            var(--purple),
            #D8D64E
        );

    color: white;

    font-weight: 900;

    cursor: pointer;

    white-space: nowrap;
}


.clear-filter {
    height: 46px;

    padding: 0 14px;

    display: flex;

    align-items: center;

    color: var(--muted);

    font-size: 12px;

    font-weight: 800;
}


/* RESULTS */

.directory-results {
    max-width: var(--max-width);

    margin: auto;

    padding: 65px 4vw 110px;
}


.directory-results-header {
    display: flex;

    justify-content: space-between;

    align-items: end;

    margin-bottom: 26px;
}


.directory-results-header h2 {
    font-size: 29px;

    letter-spacing: -1px;
}


.directory-results-header p {
    color: var(--muted);

    font-size: 13px;

    margin-top: 5px;
}


/* GRID */

.directory-grid {
    display: grid;

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

    gap: 18px;
}


.directory-card {
    border: 1px solid var(--border);

    background: var(--surface);

    border-radius: 14px;

    overflow: hidden;

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


.directory-card:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(230, 228, 94,0.45);

    box-shadow:
        0 24px 60px
        rgba(0,0,0,0.35);
}


/* PHOTO */

.directory-photo {
    height: 320px;

    position: relative;

    display: block;

    overflow: hidden;

    background: #11151c;
}


.directory-photo img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
}


.directory-photo-placeholder {
    width: 100%;

    height: 100%;

    display: grid;

    place-items: center;

    background:
        radial-gradient(
            circle at 70% 25%,
            rgba(230, 228, 94,0.25),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #191e28,
            #0c0f14
        );
}


.directory-photo-placeholder span {
    width: 90px;

    height: 90px;

    display: grid;

    place-items: center;

    border-radius: 50%;

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

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

    font-size: 26px;

    font-weight: 900;

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


.role-model {
    background:
        radial-gradient(
            circle at 40% 35%,
            rgba(230, 228, 94,0.26),
            transparent 34%
        ),
        linear-gradient(
            150deg,
            #211526,
            #0c0f14
        );
}


.role-photographer {
    background:
        radial-gradient(
            circle at 72% 28%,
            rgba(77,113,255,0.24),
            transparent 31%
        ),
        linear-gradient(
            150deg,
            #151d2a,
            #0c0f14
        );
}


.role-mua {
    background:
        radial-gradient(
            circle at 45% 30%,
            rgba(255,80,162,0.24),
            transparent 31%
        ),
        linear-gradient(
            150deg,
            #251520,
            #0c0f14
        );
}


.verified-badge {
    position: absolute;

    top: 14px;

    left: 14px;

    padding: 7px 10px;

    border-radius: 30px;

    background:
        rgba(7,9,13,0.82);

    backdrop-filter: blur(10px);

    color: #8B891A;

    font-size: 10px;

    font-weight: 900;

    border:
        1px solid
        rgba(230, 228, 94,0.35);
}


.available-badge {
    position: absolute;

    bottom: 13px;

    left: 13px;

    padding: 8px 11px;

    border-radius: 30px;

    background:
        rgba(7,9,13,0.88);

    backdrop-filter: blur(10px);

    color: white;

    font-size: 10px;

    font-weight: 800;

    border:
        1px solid
        rgba(255,255,255,0.09);
}


.available-badge span {
    display: inline-block;

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: var(--green);

    margin-right: 6px;

    box-shadow:
        0 0 12px
        rgba(49,233,129,0.75);
}


/* CARD BODY */

.directory-card-body {
    padding: 18px;
}


.directory-card-top {
    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 15px;
}


.directory-card h3 {
    font-size: 18px;

    letter-spacing: -0.4px;
}


.directory-card h3 a:hover {
    color: var(--purple-light);
}


.directory-role {
    color: var(--muted);

    font-size: 12px;

    margin-top: 3px;
}


.collab-score-mini {
    width: 45px;

    height: 45px;

    border-radius: 50%;

    border:
        1px solid
        rgba(49,233,129,0.5);

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    flex-shrink: 0;
}


.collab-score-mini span {
    color: var(--green);

    font-size: 16px;

    font-weight: 900;

    line-height: 1;
}


.collab-score-mini small {
    color: var(--muted);

    font-size: 6px;

    margin-top: 3px;

    letter-spacing: 0.5px;
}


.directory-location {
    color: #444444;

    font-size: 11px;

    margin-top: 13px;
}


.directory-bio {
    color: var(--muted);

    font-size: 12px;

    line-height: 1.6;

    margin-top: 13px;

    min-height: 57px;
}


.muted-bio {
    opacity: 0.7;
}


.directory-tags {
    display: flex;

    gap: 6px;

    margin-top: 15px;
}


.directory-tags span {
    padding: 5px 8px;

    background:
        rgba(230, 228, 94,0.12);

    color: #8B891A;

    border-radius: 5px;

    font-size: 9px;

    font-weight: 900;
}


.directory-tags .paid-tag {
    background:
        rgba(255,190,50,0.10);

    color: #ffca64;
}


/* CARD ACTIONS */

.directory-card-actions {
    display: flex;

    gap: 8px;

    margin-top: 17px;

    padding-top: 16px;

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


.view-profile-btn {
    flex: 1;

    height: 39px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(230, 228, 94,0.45);

    border-radius: 7px;

    color: var(--purple-light);

    font-size: 11px;

    font-weight: 900;
}


.view-profile-btn:hover {
    background:
        rgba(230, 228, 94,0.10);
}


.instagram-btn {
    width: 39px;

    height: 39px;

    display: grid;

    place-items: center;

    border-radius: 7px;

    background: var(--surface-2);

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

    font-size: 10px;

    font-weight: 900;

    color: white;
}


/* EMPTY */

.directory-empty {
    text-align: center;

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

    background: var(--surface);

    border-radius: 16px;

    padding: 80px 30px;
}


.directory-empty-icon {
    color: var(--purple-light);

    font-size: 34px;

    margin-bottom: 15px;
}


.directory-empty h3 {
    font-size: 25px;
}


.directory-empty p {
    color: var(--muted);

    margin:
        8px 0 24px;
}


/* RESPONSIVE */

@media (max-width: 1200px) {

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


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

}


@media (max-width: 900px) {

    .directory-hero {
        flex-direction: column;

        align-items: flex-start;

        padding-top: 60px;
    }


    .directory-count {
        text-align: left;
    }


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


    .directory-filters {
        grid-template-columns:
            1fr 1fr;
    }

}


@media (max-width: 620px) {

    .directory-hero {
        padding:
            55px 20px
            40px;
    }


    .directory-hero h1 {
        font-size: 50px;

        letter-spacing: -2.5px;
    }


    .directory-filters {
        padding:
            20px;

        grid-template-columns:
            1fr;
    }


    .directory-results {
        padding:
            50px 20px
            80px;
    }


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


    .directory-photo {
        height: 430px;
    }

}
/* =========================================
   PUBLIC PROFILE
========================================= */

.public-profile-page {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 75% 10%,
            rgba(230, 228, 94,0.10),
            transparent 28%
        ),
        var(--bg);
}


.public-profile-hero {
    max-width: var(--max-width);

    margin: 0 auto;

    padding: 80px 4vw 70px;

    display: grid;

    grid-template-columns:
        340px
        1fr
        300px;

    gap: 45px;

    align-items: start;
}


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

    aspect-ratio: 4 / 5;

    border-radius: 18px;

    overflow: hidden;

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

    background: var(--surface);
}


.public-profile-photo img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
}


.public-profile-placeholder {
    width: 100%;

    height: 100%;

    display: grid;

    place-items: center;

    background:
        radial-gradient(
            circle at 70% 25%,
            rgba(230, 228, 94,0.28),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #181d27,
            #0c0f14
        );
}


.public-profile-placeholder span {
    width: 110px;

    height: 110px;

    border-radius: 50%;

    display: grid;

    place-items: center;

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

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

    color: white;

    font-size: 32px;

    font-weight: 900;
}


.public-profile-intro {
    padding-top: 10px;
}


.public-profile-topline {
    display: flex;

    justify-content: space-between;

    gap: 20px;

    align-items: flex-start;
}


.public-profile-intro h1 {
    font-size: clamp(
        52px,
        6vw,
        82px
    );

    line-height: 0.95;

    letter-spacing: -4px;
}


.profile-verified {
    color: #8B891A;

    padding: 8px 11px;

    border-radius: 30px;

    background:
        rgba(230, 228, 94,0.12);

    border:
        1px solid
        rgba(230, 228, 94,0.35);

    font-size: 11px;

    font-weight: 900;

    white-space: nowrap;
}


.public-profile-role {
    color: var(--muted);

    font-size: 16px;

    margin-top: 16px;
}


.public-profile-tags {
    display: flex;

    gap: 7px;

    margin-top: 18px;
}


.public-profile-tags span {
    padding: 6px 9px;

    border-radius: 6px;

    background:
        rgba(230, 228, 94,0.12);

    color: #8B891A;

    font-size: 10px;

    font-weight: 900;
}


.public-profile-tags .paid-tag {
    background:
        rgba(255,190,50,0.10);

    color: #ffcb69;
}


.public-profile-bio {
    color: #444444;

    max-width: 680px;

    font-size: 15px;

    line-height: 1.8;

    margin-top: 25px;
}


.public-profile-actions {
    display: flex;

    gap: 10px;

    flex-wrap: wrap;

    margin-top: 28px;
}


.public-profile-score {
    border: 1px solid var(--border);

    background: var(--surface);

    border-radius: 16px;

    padding: 25px;
}


.public-profile-score > strong {
    display: block;

    font-size: 58px;

    margin: 14px 0 8px;

    color: var(--green);
}


.public-profile-score > p {
    color: var(--muted);

    font-size: 12px;

    line-height: 1.6;
}


.profile-score-breakdown {
    margin-top: 22px;

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


.profile-score-breakdown div {
    display: flex;

    justify-content: space-between;

    gap: 20px;

    padding: 13px 0;

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


.profile-score-breakdown span {
    color: var(--muted);

    font-size: 11px;
}


.profile-score-breakdown strong {
    font-size: 12px;
}


.public-profile-content {
    max-width: var(--max-width);

    margin: 0 auto;

    padding: 10px 4vw 110px;

    display: grid;

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

    gap: 45px;
}


.profile-section-heading {
    display: flex;

    justify-content: space-between;

    align-items: end;

    gap: 30px;

    margin-bottom: 25px;
}


.profile-section-heading h2 {
    font-size: 34px;

    letter-spacing: -1.5px;
}


.public-portfolio-grid {
    display: grid;

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

    gap: 12px;
}


.public-portfolio-item {
    aspect-ratio: 4 / 5;

    border-radius: 10px;

    overflow: hidden;

    position: relative;

    background: var(--surface);

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


.public-portfolio-item img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
}


.portfolio-caption {
    position: absolute;

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

    padding: 35px 12px 12px;

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

    color: white;

    font-size: 11px;
}


.profile-empty-state {
    border:
        1px dashed
        rgba(255,255,255,0.12);

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

    border-radius: 14px;

    padding: 70px 30px;

    text-align: center;
}


.profile-empty-state.compact {
    padding: 40px 25px;
}


.profile-empty-state h3 {
    font-size: 22px;
}


.profile-empty-state p {
    color: var(--muted);

    margin: 8px 0 22px;

    font-size: 13px;
}


.availability-heading {
    margin-top: 75px;
}


.availability-list {
    display: grid;

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

    gap: 12px;
}


.availability-item {
    background: var(--surface);

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

    border-radius: 11px;

    padding: 18px;
}


.availability-item strong {
    display: block;

    font-size: 15px;
}


.availability-item span {
    color: var(--green);

    display: block;

    font-size: 11px;

    margin-top: 4px;
}


.availability-item p {
    color: var(--muted);

    font-size: 11px;

    margin-top: 10px;
}


.public-profile-sidebar {
    display: flex;

    flex-direction: column;

    gap: 15px;
}


.profile-sidebar-card {
    background: var(--surface);

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

    border-radius: 14px;

    padding: 22px;
}


.profile-detail-row {
    display: flex;

    justify-content: space-between;

    gap: 20px;

    padding: 13px 0;

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


.profile-detail-row:last-child {
    border-bottom: none;
}


.profile-detail-row span {
    color: var(--muted);

    font-size: 11px;
}


.profile-detail-row strong {
    font-size: 11px;

    text-align: right;
}


.profile-network-number {
    font-size: 46px;

    font-weight: 900;

    margin-top: 12px;
}


.profile-sidebar-card p {
    color: var(--muted);

    font-size: 11px;

    margin-top: 4px;
}


@media (max-width: 1100px) {

    .public-profile-hero {
        grid-template-columns:
            280px
            1fr;
    }

    .public-profile-score {
        grid-column:
            1 / -1;
    }

}


@media (max-width: 850px) {

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

    .public-profile-photo {
        max-width: 420px;
    }

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

    .public-profile-sidebar {
        display: grid;

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

}


@media (max-width: 620px) {

    .public-profile-hero {
        padding:
            55px 20px
            45px;
    }

    .public-profile-content {
        padding:
            0 20px
            80px;
    }

    .public-profile-intro h1 {
        font-size: 54px;

        letter-spacing: -2.5px;
    }

    .public-portfolio-grid {
        grid-template-columns:
            1fr 1fr;
    }

    .availability-list {
        grid-template-columns:
            1fr;
    }

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

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

.edit-profile-page {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 78% 5%,
            rgba(230, 228, 94,0.10),
            transparent 28%
        ),
        var(--bg);

    padding-bottom: 100px;
}


.edit-profile-header {
    max-width: var(--max-width);

    margin: 0 auto;

    padding: 75px 4vw 38px;
}


.edit-profile-header h1 {
    font-size: clamp(
        46px,
        6vw,
        72px
    );

    line-height: 0.98;

    letter-spacing: -3.5px;

    max-width: 850px;
}


.edit-profile-header p {
    color: var(--muted);

    margin-top: 18px;

    font-size: 15px;

    line-height: 1.7;
}


.edit-profile-layout {
    max-width: var(--max-width);

    margin: 0 auto;

    padding: 0 4vw;

    display: grid;

    grid-template-columns:
        290px
        minmax(0, 760px);

    gap: 35px;

    align-items: start;
}


.edit-profile-preview {
    position: sticky;

    top: 105px;

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

    background: var(--surface);

    border-radius: 16px;

    padding: 18px;
}


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

    aspect-ratio: 4 / 5;

    border-radius: 12px;

    overflow: hidden;

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

    background: #11151c;
}


.edit-photo-preview img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
}


.edit-profile-preview h2 {
    font-size: 25px;

    letter-spacing: -1px;

    margin-top: 17px;
}


.edit-profile-preview p {
    color: var(--muted);

    font-size: 12px;

    margin-top: 4px;
}


.view-public-profile-link {
    display: inline-block;

    margin-top: 17px;

    color: var(--purple-light);

    font-size: 11px;

    font-weight: 800;
}


.edit-profile-card {
    border: 1px solid var(--border);

    background: var(--surface);

    border-radius: 17px;

    padding: 32px;
}


.form-success {
    background:
        rgba(49,233,129,0.08);

    border:
        1px solid
        rgba(49,233,129,0.25);

    color: #77f4ab;

    padding: 13px 15px;

    border-radius: 9px;

    margin-bottom: 20px;

    font-size: 12px;
}


.edit-section {
    padding: 30px 0;

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


.edit-section:first-child {
    padding-top: 0;
}


.edit-section:last-of-type {
    border-bottom: none;
}


.edit-section-heading {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 17px;
}


.edit-section h3 {
    font-size: 20px;

    letter-spacing: -0.5px;

    margin-top: 6px;
}


.photo-upload-row {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 25px;

    padding: 18px;

    border: 1px dashed
        rgba(255,255,255,0.13);

    border-radius: 11px;

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


.photo-upload-copy p {
    color: #d5d9e1;

    font-size: 12px;
}


.photo-upload-copy small {
    display: block;

    color: var(--muted);

    font-size: 10px;

    margin-top: 5px;
}


.file-upload-btn {
    position: relative;

    overflow: hidden;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 42px;

    padding: 0 17px;

    border-radius: 8px;

    background:
        rgba(230, 228, 94,0.12);

    border:
        1px solid
        rgba(230, 228, 94,0.35);

    color: var(--purple-light);

    font-size: 11px;

    font-weight: 900;

    cursor: pointer;

    white-space: nowrap;
}


.file-upload-btn input {
    position: absolute;

    inset: 0;

    opacity: 0;

    cursor: pointer;
}


.edit-form-row {
    margin-top: 17px;
}


.edit-profile-actions {
    display: flex;

    gap: 10px;

    align-items: center;

    margin-top: 28px;
}


.edit-save-btn {
    width: auto;

    min-width: 170px;

    padding-left: 25px;

    padding-right: 25px;

    margin-top: 0;
}


@media (max-width: 900px) {

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


    .edit-profile-preview {
        position: static;

        max-width: 330px;
    }

}


@media (max-width: 620px) {

    .edit-profile-header {
        padding:
            55px 20px
            30px;
    }


    .edit-profile-layout {
        padding: 0 20px;
    }


    .edit-profile-card {
        padding: 23px 18px;
    }


    .photo-upload-row {
        flex-direction: column;

        align-items: flex-start;
    }


    .file-upload-btn {
        width: 100%;
    }


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


    .edit-save-btn,
    .edit-profile-actions .btn {
        width: 100%;
    }

}
/* =========================================
   PORTFOLIO MANAGER
========================================= */

.portfolio-manager-page {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 80% 5%,
            rgba(230, 228, 94,0.10),
            transparent 28%
        ),
        var(--bg);

    padding-bottom: 110px;
}


.portfolio-manager-header {
    max-width: var(--max-width);

    margin: 0 auto;

    padding: 75px 4vw 42px;

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 40px;
}


.portfolio-manager-header h1 {
    font-size: clamp(
        48px,
        6vw,
        76px
    );

    line-height: 0.98;

    letter-spacing: -4px;
}


.portfolio-manager-header p {
    color: var(--muted);

    margin-top: 17px;

    font-size: 15px;

    line-height: 1.7;
}


.portfolio-count-box {
    text-align: right;
}


.portfolio-count-box strong {
    display: block;

    font-size: 42px;

    letter-spacing: -2px;
}


.portfolio-count-box span {
    color: var(--muted);

    font-size: 11px;
}


.portfolio-manager-layout {
    max-width: var(--max-width);

    margin: 0 auto;

    padding: 0 4vw;

    display: grid;

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

    gap: 35px;

    align-items: start;
}


/* UPLOAD */

.portfolio-upload-card {
    background: var(--surface);

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

    border-radius: 16px;

    padding: 25px;

    position: sticky;

    top: 100px;
}


.portfolio-upload-card h2 {
    font-size: 23px;

    letter-spacing: -1px;

    margin-top: 8px;
}


.portfolio-upload-card > p {
    color: var(--muted);

    font-size: 12px;

    line-height: 1.7;

    margin: 10px 0 20px;
}


.portfolio-dropzone {
    min-height: 220px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    border:
        1px dashed
        rgba(230, 228, 94,0.40);

    background:
        rgba(230, 228, 94,0.04);

    border-radius: 13px;

    cursor: pointer;

    padding: 24px;

    transition: 0.2s ease;
}


.portfolio-dropzone:hover {
    background:
        rgba(230, 228, 94,0.08);

    border-color:
        var(--purple-light);
}


.portfolio-dropzone input {
    display: none;
}


.portfolio-drop-icon {
    width: 50px;

    height: 50px;

    border-radius: 50%;

    display: grid;

    place-items: center;

    background:
        rgba(230, 228, 94,0.15);

    color: var(--purple-light);

    font-size: 28px;

    margin-bottom: 14px;
}


.portfolio-dropzone strong {
    font-size: 14px;
}


.portfolio-dropzone span {
    color: var(--muted);

    font-size: 11px;

    margin-top: 5px;
}


.portfolio-dropzone small {
    color: #697382;

    font-size: 9px;

    margin-top: 3px;
}


.portfolio-preview-grid {
    display: grid;

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

    gap: 7px;

    margin-top: 14px;
}


.portfolio-preview-item {
    aspect-ratio: 1;

    border-radius: 7px;

    overflow: hidden;

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

    background: #FFFFFF;
}


.portfolio-preview-item img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
}


.selected-file-message {
    color: var(--green);

    font-size: 10px;

    line-height: 1.5;

    margin-top: 12px;
}


.portfolio-upload-submit {
    margin-top: 16px;
}


.portfolio-upload-submit:disabled {
    opacity: 0.35;

    cursor: not-allowed;
}


.portfolio-limit-message {
    padding: 20px;

    border-radius: 10px;

    border:
        1px solid
        rgba(255,190,50,0.25);

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

    color: #ffd580;

    font-size: 12px;

    line-height: 1.6;
}


/* EXISTING */

.portfolio-existing-header {
    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 20px;

    margin-bottom: 22px;
}


.portfolio-existing-header h2 {
    font-size: 31px;

    letter-spacing: -1.3px;

    margin-top: 6px;
}


.portfolio-manage-grid {
    display: grid;

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

    gap: 16px;
}


.portfolio-manage-item {
    background: var(--surface);

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

    border-radius: 13px;

    overflow: hidden;
}


.portfolio-manage-image {
    aspect-ratio: 4 / 5;

    background: #FFFFFF;

    overflow: hidden;
}


.portfolio-manage-image img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
}


.portfolio-manage-controls {
    padding: 12px;
}


.portfolio-caption-form {
    display: flex;

    gap: 6px;
}


.portfolio-caption-form input {
    flex: 1;

    min-width: 0;

    background: #FFFFFF;

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

    border-radius: 7px;

    color: white;

    padding: 9px 10px;

    font: inherit;

    font-size: 10px;

    outline: none;
}


.portfolio-caption-form input:focus {
    border-color: var(--purple);
}


.portfolio-caption-form button {
    border: none;

    background:
        rgba(230, 228, 94,0.13);

    color: var(--purple-light);

    border:
        1px solid
        rgba(230, 228, 94,0.30);

    border-radius: 7px;

    padding: 0 10px;

    font-size: 9px;

    font-weight: 900;

    cursor: pointer;
}


.portfolio-delete-btn {
    margin-top: 8px;

    width: 100%;

    border: none;

    background:
        rgba(255,70,90,0.07);

    border:
        1px solid
        rgba(255,70,90,0.18);

    color: #ff8d9a;

    border-radius: 7px;

    padding: 9px;

    font-size: 9px;

    font-weight: 900;

    cursor: pointer;
}


@media (max-width: 1000px) {

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


    .portfolio-upload-card {
        position: static;
    }


    .portfolio-manage-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 620px) {

    .portfolio-manager-header {
        padding:
            55px 20px
            35px;

        flex-direction: column;

        align-items: flex-start;
    }


    .portfolio-count-box {
        text-align: left;
    }


    .portfolio-manager-layout {
        padding: 0 20px;
    }


    .portfolio-manage-grid {
        grid-template-columns: 1fr;
    }

}
/* =========================================
   AVAILABILITY MANAGER
========================================= */

.availability-manager-page {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 78% 5%,
            rgba(230, 228, 94,0.10),
            transparent 28%
        ),
        var(--bg);

    padding-bottom: 110px;
}


.availability-manager-header {
    max-width: var(--max-width);

    margin: 0 auto;

    padding: 75px 4vw 42px;

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 40px;
}


.availability-manager-header h1 {
    font-size: clamp(
        48px,
        6vw,
        76px
    );

    line-height: 0.98;

    letter-spacing: -4px;
}


.availability-manager-header p {
    max-width: 650px;

    color: var(--muted);

    margin-top: 17px;

    font-size: 15px;

    line-height: 1.7;
}


.availability-count-box {
    text-align: right;
}


.availability-count-box strong {
    display: block;

    font-size: 48px;

    line-height: 1;

    letter-spacing: -2px;

    color: var(--green);
}


.availability-count-box span {
    display: block;

    color: var(--muted);

    font-size: 11px;

    margin-top: 6px;
}


.availability-manager-layout {
    max-width: var(--max-width);

    margin: 0 auto;

    padding: 0 4vw;

    display: grid;

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

    gap: 35px;

    align-items: start;
}


/* CREATE */

.availability-create-card {
    background: var(--surface);

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

    border-radius: 16px;

    padding: 26px;

    position: sticky;

    top: 100px;
}


.availability-create-card h2 {
    font-size: 25px;

    letter-spacing: -1px;

    margin-top: 7px;
}


.availability-create-card > p {
    color: var(--muted);

    font-size: 12px;

    line-height: 1.7;

    margin: 9px 0 23px;
}


.availability-time-grid {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 10px;
}


/* UPCOMING */

.availability-upcoming-header {
    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 25px;

    margin-bottom: 22px;
}


.availability-upcoming-header h2 {
    font-size: 31px;

    letter-spacing: -1.3px;

    margin-top: 6px;
}


.availability-manage-list {
    display: flex;

    flex-direction: column;

    gap: 10px;
}


.availability-manage-item {
    display: grid;

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

    gap: 18px;

    align-items: center;

    background: var(--surface);

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

    border-radius: 13px;

    padding: 16px;

    transition:
        border-color 0.2s ease,
        transform 0.2s ease;
}


.availability-manage-item:hover {
    border-color:
        rgba(230, 228, 94,0.35);

    transform:
        translateY(-2px);
}


/* DATE BLOCK */

.availability-date-block {
    width: 72px;

    height: 72px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    background:
        rgba(230, 228, 94,0.08);

    border:
        1px solid
        rgba(230, 228, 94,0.20);
}


.availability-month {
    color: var(--purple-light);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 1px;
}


.availability-date-block strong {
    color: white;

    font-size: 28px;

    line-height: 1;

    margin-top: 4px;
}


/* INFO */

.availability-manage-info h3 {
    font-size: 16px;

    letter-spacing: -0.3px;
}


.availability-manage-time {
    display: flex;

    align-items: center;

    gap: 7px;

    color: var(--green);

    font-size: 11px;

    font-weight: 700;

    margin-top: 5px;
}


.availability-manage-time > span {
    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: var(--green);

    box-shadow:
        0 0 12px
        rgba(49,233,129,0.65);
}


.availability-manage-info p {
    color: var(--muted);

    font-size: 11px;

    line-height: 1.6;

    margin-top: 9px;
}


/* REMOVE */

.availability-remove-btn {
    border:
        1px solid
        rgba(255,70,90,0.18);

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

    color: #ff8e9a;

    border-radius: 7px;

    padding: 9px 12px;

    font-size: 9px;

    font-weight: 900;

    cursor: pointer;
}


.availability-remove-btn:hover {
    background:
        rgba(255,70,90,0.11);
}


.availability-empty-icon {
    color: var(--purple-light);

    font-size: 32px;

    margin-bottom: 12px;
}


/* RESPONSIVE */

@media (max-width: 900px) {

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


    .availability-create-card {
        position: static;
    }

}


@media (max-width: 620px) {

    .availability-manager-header {
        padding:
            55px 20px
            35px;

        flex-direction: column;

        align-items: flex-start;
    }


    .availability-count-box {
        text-align: left;
    }


    .availability-manager-layout {
        padding: 0 20px;
    }


    .availability-time-grid {
        grid-template-columns: 1fr;
    }


    .availability-upcoming-header {
        align-items: flex-start;

        flex-direction: column;
    }


    .availability-manage-item {
        grid-template-columns:
            62px 1fr;
    }


    .availability-date-block {
        width: 62px;

        height: 62px;
    }


    .availability-manage-item form {
        grid-column:
            1 / -1;
    }


    .availability-remove-btn {
        width: 100%;
    }

}
/* =========================================
   CREATE COLLABORATION
========================================= */

.create-shoot-page {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 78% 5%,
            rgba(230, 228, 94,0.11),
            transparent 28%
        ),
        var(--bg);

    padding-bottom: 120px;
}


.create-shoot-header {
    max-width: var(--max-width);

    margin: 0 auto;

    padding: 75px 4vw 42px;
}


.create-shoot-header h1 {
    font-size: clamp(
        52px,
        6vw,
        82px
    );

    line-height: 0.96;

    letter-spacing: -4px;

    max-width: 900px;
}


.create-shoot-header h1 span {
    color: var(--purple-light);
}


.create-shoot-header p {
    max-width: 650px;

    color: var(--muted);

    margin-top: 20px;

    font-size: 15px;

    line-height: 1.7;
}


/* LAYOUT */

.create-shoot-layout {
    max-width: var(--max-width);

    margin: 0 auto;

    padding: 0 4vw;

    display: grid;

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

    gap: 38px;

    align-items: start;
}


/* FORM CARD */

.create-shoot-card {
    background: var(--surface);

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

    border-radius: 18px;

    padding: 34px;
}


.create-shoot-section {
    padding: 35px 0;

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


.create-shoot-section:first-of-type {
    padding-top: 0;
}


.create-shoot-section:last-of-type {
    border-bottom: none;
}


.create-shoot-section h2 {
    font-size: 27px;

    letter-spacing: -1px;

    margin:
        7px 0
        24px;
}


.create-section-description {
    color: var(--muted);

    font-size: 12px;

    margin:
        -15px 0
        22px;
}


.optional-label {
    color: var(--muted);

    font-size: 9px;

    font-weight: 500;

    margin-left: 5px;
}


.create-shoot-two-column {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 12px;
}


/* COVER IMAGE */

.shoot-cover-upload {
    display: block;

    cursor: pointer;
}


.shoot-cover-upload input {
    display: none;
}


.shoot-cover-preview {
    width: 100%;

    aspect-ratio: 16 / 8;

    border:
        1px dashed
        rgba(230, 228, 94,0.35);

    border-radius: 12px;

    overflow: hidden;

    background:
        rgba(230, 228, 94,0.035);
}


.shoot-cover-placeholder {
    width: 100%;

    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 5px;

    color: var(--purple-light);
}


.shoot-cover-placeholder strong {
    font-size: 13px;
}


.shoot-cover-placeholder span {
    color: var(--muted);

    font-size: 10px;
}


.shoot-cover-preview img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
}


/* COMPENSATION */

.compensation-options {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 10px;
}


.compensation-option input {
    display: none;
}


.compensation-option > span {
    min-height: 100px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 18px;

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

    border-radius: 11px;

    background: #FFFFFF;

    cursor: pointer;

    transition:
        0.2s ease;
}


.compensation-option strong {
    font-size: 16px;
}


.compensation-option small {
    color: var(--muted);

    margin-top: 5px;

    font-size: 10px;
}


.compensation-option
input:checked + span {
    border-color:
        var(--purple);

    background:
        rgba(230, 228, 94,0.11);
}


.paid-budget-wrap {
    display: none;

    margin-top: 18px;
}


.paid-budget-wrap.visible {
    display: block;
}


.money-input {
    position: relative;
}


.money-input > span {
    position: absolute;

    left: 14px;

    top: 50%;

    transform:
        translateY(-50%);

    color: var(--muted);

    z-index: 2;
}


.money-input input {
    padding-left:
        30px !important;
}


/* ROLES */

.shoot-role-grid {
    display: grid;

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

    gap: 10px;
}


.shoot-role-option {
    display: grid;

    grid-template-columns:
        1fr auto;

    gap: 8px;

    padding: 8px;

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

    border-radius: 10px;

    background: #FFFFFF;

    transition:
        0.2s ease;
}


.shoot-role-option.selected {
    border-color:
        rgba(230, 228, 94,0.55);

    background:
        rgba(230, 228, 94,0.06);
}


.shoot-role-option label {
    display: block;
}


.shoot-role-checkbox {
    display: none;
}


.shoot-role-select {
    height: 42px;

    display: flex;

    align-items: center;

    padding: 0 12px;

    color: #cad0da;

    font-size: 11px;

    font-weight: 800;

    cursor: pointer;
}


.shoot-role-option.selected
.shoot-role-select {
    color: white;
}


/* SLOT SELECTOR */

.role-slot-selector {
    display: flex;

    align-items: center;

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

    border-radius: 7px;

    overflow: hidden;

    height: 42px;
}


.role-slot-selector button {
    width: 31px;

    height: 100%;

    border: none;

    background: var(--surface-2);

    color: white;

    cursor: pointer;

    font-size: 15px;
}


.role-slot-selector input {
    width: 35px;

    height: 100%;

    border: none;

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

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

    background: #FFFFFF;

    color: white;

    text-align: center;

    outline: none;

    font-size: 11px;

    -moz-appearance: textfield;
}


.role-slot-selector input::-webkit-inner-spin-button,
.role-slot-selector input::-webkit-outer-spin-button {
    -webkit-appearance: none;

    margin: 0;
}


/* SUBMIT */

.create-shoot-submit {
    padding-top: 30px;

    text-align: center;
}


.create-shoot-button {
    font-size: 15px;

    min-height: 52px;
}


.create-shoot-submit p {
    color: var(--muted);

    font-size: 10px;

    margin-top: 10px;
}


/* SIDEBAR */

.create-shoot-sidebar {
    position: sticky;

    top: 105px;
}


.create-shoot-sidebar > h3 {
    font-size: 22px;

    letter-spacing: -0.8px;

    margin:
        7px 0
        15px;
}


.shoot-preview-card {
    overflow: hidden;

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

    border-radius: 15px;

    background: var(--surface);

    box-shadow:
        0 25px 70px
        rgba(0,0,0,0.25);
}


.shoot-preview-image {
    width: 100%;

    aspect-ratio:
        16 / 10;

    display: grid;

    place-items: center;

    background:
        radial-gradient(
            circle at 60% 35%,
            rgba(230, 228, 94,0.25),
            transparent 35%
        ),
        #10141a;

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

    font-weight: 900;

    font-size: 11px;

    letter-spacing: 2px;
}


.shoot-preview-image img {
    width: 100%;

    height: 100%;

    object-fit: cover;
}


.shoot-preview-body {
    padding: 20px;
}


.shoot-preview-badges {
    display: flex;

    gap: 6px;

    margin-bottom: 13px;
}


.shoot-preview-body h4 {
    font-size: 20px;

    letter-spacing: -0.7px;

    line-height: 1.2;
}


.shoot-preview-body > p {
    color: var(--muted);

    font-size: 11px;

    margin-top: 7px;
}


.shoot-preview-divider {
    height: 1px;

    background: var(--border);

    margin: 20px 0;
}


.shoot-preview-role-list {
    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-top: 12px;

    color: var(--muted);

    font-size: 10px;
}


.shoot-preview-role-list span {
    padding: 6px 8px;

    border-radius: 6px;

    background:
        rgba(230, 228, 94,0.10);

    color: #baa1ff;

    font-size: 9px;

    font-weight: 800;
}


/* RESPONSIVE */

@media (max-width: 1000px) {

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


    .create-shoot-sidebar {
        position: static;

        max-width: 430px;
    }

}


@media (max-width: 620px) {

    .create-shoot-header {
        padding:
            55px 20px
            35px;
    }


    .create-shoot-header h1 {
        font-size: 52px;

        letter-spacing: -2.5px;
    }


    .create-shoot-layout {
        padding: 0 20px;
    }


    .create-shoot-card {
        padding: 24px 18px;
    }


    .create-shoot-two-column,
    .compensation-options,
    .shoot-role-grid {
        grid-template-columns:
            1fr;
    }

}
/* =========================================
   COLLABORATION BOARD
========================================= */

.collab-board-page {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 78% 4%,
            rgba(230, 228, 94,0.10),
            transparent 28%
        ),
        var(--bg);
}


.collab-board-hero {
    max-width: var(--max-width);

    margin: 0 auto;

    padding: 82px 4vw 45px;

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 45px;
}


.collab-board-hero h1 {
    font-size: clamp(
        52px,
        6vw,
        80px
    );

    line-height: 0.97;

    letter-spacing: -4px;

    max-width: 850px;
}


.collab-board-hero h1 span {
    color: var(--purple-light);
}


.collab-board-hero p {
    max-width: 650px;

    color: var(--muted);

    font-size: 16px;

    line-height: 1.7;

    margin-top: 20px;
}


.collab-board-actions {
    padding-bottom: 5px;

    white-space: nowrap;
}


/* STATS */

.collab-board-stats {
    max-width: var(--max-width);

    margin: 0 auto;

    padding: 0 4vw 45px;

    display: grid;

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

    gap: 12px;
}


.collab-board-stats > div {
    background: var(--surface);

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

    border-radius: 12px;

    padding: 20px;
}


.collab-board-stats strong {
    display: block;

    font-size: 30px;

    letter-spacing: -1.4px;
}


.collab-board-stats span {
    display: block;

    color: var(--muted);

    font-size: 10px;

    margin-top: 4px;
}


/* FILTERS */

.collab-filter-wrap {
    border-top:
        1px solid var(--border);

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

    background:
        rgba(14,18,24,0.75);

    backdrop-filter:
        blur(14px);
}


.collab-filters {
    max-width: var(--max-width);

    margin: auto;

    padding: 22px 4vw;

    display: grid;

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

    gap: 10px;

    align-items: end;
}


/* RESULTS */

.collab-results {
    max-width: var(--max-width);

    margin: 0 auto;

    padding: 65px 4vw 110px;
}


.collab-results-header {
    margin-bottom: 25px;
}


.collab-results-header h2 {
    font-size: 34px;

    letter-spacing: -1.4px;
}


.collab-results-header p {
    color: var(--muted);

    font-size: 12px;

    margin-top: 5px;
}


/* GRID */

.collab-board-grid {
    display: grid;

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

    gap: 18px;
}


.collab-listing-card {
    background: var(--surface);

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

    border-radius: 15px;

    overflow: hidden;

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}


.collab-listing-card:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(230, 228, 94,.42);

    box-shadow:
        0 24px 60px
        rgba(0,0,0,.35);
}


/* IMAGE */

.collab-listing-image {
    display: block;

    height: 260px;

    position: relative;

    overflow: hidden;

    background: #10141a;
}


.collab-listing-image img {
    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;
}


.collab-image-placeholder {
    width: 100%;

    height: 100%;

    display: grid;

    place-items: center;

    background:
        radial-gradient(
            circle at 60% 35%,
            rgba(230, 228, 94,.25),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #171d26,
            #0c0f14
        );
}


.collab-image-placeholder span {
    color:
        rgba(255,255,255,.17);

    font-size: 11px;

    letter-spacing: 2px;

    font-weight: 900;
}


.collab-date-badge {
    position: absolute;

    bottom: 13px;

    left: 13px;

    padding: 8px 11px;

    background:
        rgba(7,9,13,.88);

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius: 30px;

    color: white;

    backdrop-filter:
        blur(10px);

    font-size: 10px;

    font-weight: 800;
}


/* BODY */

.collab-listing-body {
    padding: 20px;
}


.collab-card-badges {
    display: flex;

    gap: 6px;

    margin-bottom: 13px;
}


.collab-listing-body h3 {
    font-size: 22px;

    line-height: 1.2;

    letter-spacing: -.7px;
}


.collab-listing-body h3 a:hover {
    color: var(--purple-light);
}


.collab-location {
    color: #d0d5dd;

    font-size: 12px;

    margin-top: 10px;
}


.collab-time {
    color: var(--muted);

    font-size: 11px;

    margin-top: 4px;
}


.collab-budget {
    margin-top: 16px;

    padding: 12px;

    border-radius: 8px;

    background:
        rgba(255,190,50,.07);

    border:
        1px solid
        rgba(255,190,50,.17);

    color: #ffd273;

    font-size: 18px;

    font-weight: 900;
}


.collab-budget span {
    color: var(--muted);

    font-size: 9px;

    font-weight: 600;

    margin-left: 4px;
}


.collab-roles {
    margin-top: 21px;

    padding-top: 18px;

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


.collab-role-tags {
    display: flex;

    gap: 6px;

    flex-wrap: wrap;

    margin-top: 9px;
}


.collab-role-tags span {
    padding: 6px 8px;

    border-radius: 6px;

    background:
        rgba(230, 228, 94,.10);

    color: #baa3ff;

    font-size: 9px;

    font-weight: 900;
}


/* CREATOR */

.collab-listing-footer {
    margin-top: 20px;

    padding-top: 16px;

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

    display: flex;

    justify-content:
        space-between;

    align-items: center;

    gap: 14px;
}


.collab-posted-by {
    display: flex;

    align-items: center;

    gap: 9px;
}


.collab-creator-avatar {
    width: 34px;

    height: 34px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    overflow: hidden;

    border-radius: 50%;

    background:
        var(--surface-2);

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

    font-size: 9px;

    font-weight: 900;
}


.collab-creator-avatar img {
    width: 100%;

    height: 100%;

    object-fit: cover;
}


.collab-posted-by span {
    display: block;

    color: var(--muted);

    font-size: 8px;
}


.collab-posted-by strong {
    display: block;

    font-size: 10px;

    margin-top: 2px;
}


.collab-application-count {
    color: var(--muted);

    font-size: 9px;
}


/* BUTTON */

.collab-view-btn {
    width: 100%;

    min-height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-top: 17px;

    border:
        1px solid
        rgba(230, 228, 94,.42);

    border-radius: 8px;

    color: var(--purple-light);

    font-size: 10px;

    font-weight: 900;

    transition: .2s ease;
}


.collab-view-btn:hover {
    background:
        rgba(230, 228, 94,.10);
}


/* RESPONSIVE */

@media (max-width: 1100px) {

    .collab-board-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


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

}


@media (max-width: 760px) {

    .collab-board-hero {
        flex-direction: column;

        align-items: flex-start;

        padding-top: 60px;
    }


    .collab-board-stats {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .collab-filters {
        grid-template-columns:
            1fr 1fr;
    }

}


@media (max-width: 620px) {

    .collab-board-hero {
        padding:
            55px 20px
            35px;
    }


    .collab-board-hero h1 {
        font-size: 52px;

        letter-spacing:
            -2.5px;
    }


    .collab-board-stats {
        padding:
            0 20px
            35px;
    }


    .collab-filters {
        padding: 20px;

        grid-template-columns:
            1fr;
    }


    .collab-results {
        padding:
            50px 20px
            80px;
    }


    .collab-board-grid {
        grid-template-columns:
            1fr;
    }


    .collab-listing-image {
        height: 320px;
    }

}
/* =========================================
   SHOOT DETAIL / APPLICATION
========================================= */

.shoot-detail-page {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 80% 5%,
            rgba(230, 228, 94,0.10),
            transparent 28%
        ),
        var(--bg);

    padding-bottom: 120px;
}


/* HERO */

.shoot-detail-hero {
    max-width: var(--max-width);

    margin: 0 auto;

    padding: 70px 4vw 55px;

    display: grid;

    grid-template-columns:
        1fr
        520px;

    gap: 55px;

    align-items: center;
}


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

    color: var(--muted);

    font-size: 11px;

    font-weight: 800;

    margin-bottom: 30px;
}


.shoot-back-link:hover {
    color: white;
}


.shoot-detail-badges {
    display: flex;

    gap: 7px;

    margin-bottom: 17px;
}


.shoot-detail-copy h1 {
    font-size: clamp(
        50px,
        6vw,
        82px
    );

    line-height: .96;

    letter-spacing: -4px;

    max-width: 780px;
}


.shoot-detail-meta {
    display: grid;

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

    gap: 10px;

    margin-top: 32px;
}


.shoot-detail-meta > div {
    padding: 16px;

    background:
        rgba(255,255,255,.02);

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

    border-radius: 10px;
}


.shoot-detail-meta span {
    display: block;

    color: var(--muted);

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 1px;
}


.shoot-detail-meta strong {
    display: block;

    color: white;

    font-size: 12px;

    margin-top: 6px;
}


.shoot-detail-budget {
    display: inline-flex;

    flex-direction: column;

    margin-top: 18px;

    padding: 13px 17px;

    border:
        1px solid
        rgba(255,190,50,.2);

    background:
        rgba(255,190,50,.06);

    border-radius: 10px;
}


.shoot-detail-budget span {
    color: var(--muted);

    font-size: 8px;

    font-weight: 900;
}


.shoot-detail-budget strong {
    color: #ffd06d;

    font-size: 25px;

    margin-top: 2px;
}


/* COVER */

.shoot-detail-cover {
    width: 100%;

    aspect-ratio: 4 / 3;

    border-radius: 18px;

    overflow: hidden;

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

    background: var(--surface);
}


.shoot-detail-cover img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
}


.shoot-detail-placeholder {
    width: 100%;

    height: 100%;

    display: grid;

    place-items: center;

    background:
        radial-gradient(
            circle at 55% 35%,
            rgba(230, 228, 94,.25),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #171d26,
            #0c0f14
        );
}


.shoot-detail-placeholder span {
    color:
        rgba(255,255,255,.18);

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 2px;
}


/* MAIN LAYOUT */

.shoot-detail-layout {
    max-width: var(--max-width);

    margin: 0 auto;

    padding: 10px 4vw 0;

    display: grid;

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

    gap: 45px;

    align-items: start;
}


.shoot-detail-main {
    min-width: 0;
}


/* SECTIONS */

.shoot-detail-section {
    padding: 42px 0;

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


.shoot-detail-section:first-child {
    padding-top: 0;
}


.shoot-detail-section h2,
.shoot-application-section h2 {
    font-size: 34px;

    letter-spacing: -1.5px;

    margin-bottom: 20px;
}


.shoot-description {
    color: #444444;

    font-size: 14px;

    line-height: 1.9;

    max-width: 850px;
}


/* INFO */

.shoot-info-grid {
    display: grid;

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

    gap: 12px;
}


.shoot-info-card {
    background: var(--surface);

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

    border-radius: 11px;

    padding: 18px;
}


.shoot-info-card span {
    display: block;

    color: var(--muted);

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 1px;
}


.shoot-info-card strong {
    display: block;

    font-size: 13px;

    margin-top: 7px;
}


/* ROLES */

.shoot-open-role-list {
    display: flex;

    flex-direction: column;

    gap: 10px;
}


.shoot-open-role-card {
    display: grid;

    grid-template-columns:
        1fr
        auto
        auto;

    gap: 18px;

    align-items: center;

    padding: 18px;

    background: var(--surface);

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

    border-radius: 12px;
}


.shoot-open-role-card.filled {
    opacity: .55;
}


.shoot-open-role-card h3 {
    font-size: 17px;

    margin-top: 5px;
}


.shoot-open-role-card p {
    color: var(--muted);

    font-size: 10px;

    margin-top: 3px;
}


.shoot-role-count {
    min-width: 48px;

    text-align: center;

    padding: 9px;

    border-radius: 7px;

    background: #FFFFFF;

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

    color: var(--muted);

    font-size: 10px;

    font-weight: 900;
}


.apply-role-btn {
    min-width: 90px;

    height: 38px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(230, 228, 94,.45);

    background:
        rgba(230, 228, 94,.08);

    color: var(--purple-light);

    border-radius: 7px;

    font-size: 10px;

    font-weight: 900;

    cursor: pointer;
}


.apply-role-btn.selected {
    background: var(--purple);

    color: white;

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


.shoot-role-status {
    min-width: 90px;

    text-align: center;

    padding: 10px;

    border-radius: 7px;

    font-size: 9px;

    font-weight: 900;
}


.shoot-role-status.filled {
    color: var(--muted);

    background:
        rgba(255,255,255,.04);
}


.shoot-role-status.owner {
    color: #c2adff;

    background:
        rgba(230, 228, 94,.09);
}


.shoot-role-status.application {
    color: var(--green);

    background:
        rgba(49,233,129,.08);
}


/* APPLICATION */

.shoot-application-section {
    margin-top: 45px;

    padding: 30px;

    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(230, 228, 94,.10),
            transparent 35%
        ),
        var(--surface);

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

    border-radius: 15px;
}


.shoot-application-section > p {
    color: var(--muted);

    font-size: 12px;

    line-height: 1.7;

    margin-bottom: 22px;
}


.selected-application-role {
    padding: 13px;

    border-radius: 8px;

    background:
        rgba(230, 228, 94,.08);

    border:
        1px solid
        rgba(230, 228, 94,.22);

    color: #bea9ff;

    font-size: 11px;

    font-weight: 900;

    margin-bottom: 18px;
}


/* SIDEBAR */

.shoot-detail-sidebar {
    position: sticky;

    top: 100px;

    display: flex;

    flex-direction: column;

    gap: 14px;
}


.shoot-sidebar-card {
    background: var(--surface);

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

    border-radius: 14px;

    padding: 22px;
}


.shoot-creator-profile {
    display: flex;

    align-items: center;

    gap: 12px;

    margin:
        15px 0
        18px;
}


.shoot-creator-photo {
    width: 52px;

    height: 52px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    overflow: hidden;

    border-radius: 50%;

    background: var(--surface-2);

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

    font-size: 12px;

    font-weight: 900;
}


.shoot-creator-photo img {
    width: 100%;

    height: 100%;

    object-fit: cover;
}


.shoot-creator-profile h3 {
    font-size: 16px;
}


.shoot-creator-profile p {
    color: var(--muted);

    font-size: 10px;

    margin-top: 3px;
}


.shoot-sidebar-stat {
    display: flex;

    justify-content: space-between;

    gap: 15px;

    padding: 13px 0;

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


.shoot-sidebar-stat:last-child {
    border-bottom: none;
}


.shoot-sidebar-stat span {
    color: var(--muted);

    font-size: 10px;
}


.shoot-sidebar-stat strong {
    font-size: 11px;
}


.owner-card h3 {
    font-size: 18px;

    margin-top: 10px;
}


.owner-card p {
    color: var(--muted);

    font-size: 11px;

    line-height: 1.6;

    margin:
        8px 0
        18px;
}


/* RESPONSIVE */

@media (max-width: 1050px) {

    .shoot-detail-hero {
        grid-template-columns:
            1fr;
    }


    .shoot-detail-cover {
        max-width: 700px;
    }


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


    .shoot-detail-sidebar {
        position: static;

        display: grid;

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

}


@media (max-width: 700px) {

    .shoot-detail-hero {
        padding:
            55px 20px
            40px;
    }


    .shoot-detail-copy h1 {
        font-size: 50px;

        letter-spacing: -2.5px;
    }


    .shoot-detail-meta {
        grid-template-columns:
            1fr;
    }


    .shoot-detail-layout {
        padding:
            0 20px;
    }


    .shoot-info-grid {
        grid-template-columns:
            1fr;
    }


    .shoot-open-role-card {
        grid-template-columns:
            1fr;
    }


    .shoot-role-count,
    .apply-role-btn,
    .shoot-role-status {
        width: 100%;
    }


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


    .shoot-application-section {
        padding: 22px 18px;
    }

}
/* =========================================
   SHOOT APPLICANTS
========================================= */

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

    background:
        radial-gradient(
            circle at 80% 4%,
            rgba(230, 228, 94,.10),
            transparent 28%
        ),
        var(--bg);

    padding-bottom: 120px;
}


.applicants-hero {
    max-width: var(--max-width);

    margin: 0 auto;

    padding: 70px 4vw 38px;
}


.applicants-hero h1 {
    font-size: clamp(
        52px,
        6vw,
        80px
    );

    line-height: .96;

    letter-spacing: -4px;
}


.applicants-hero h1 span {
    color: var(--purple-light);
}


.applicants-hero p {
    max-width: 700px;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.7;

    margin-top: 18px;
}


.applicants-hero p strong {
    color: white;
}


/* STATS */

.applicant-stats {
    max-width: var(--max-width);

    margin: 0 auto;

    padding: 0 4vw 45px;

    display: grid;

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

    gap: 12px;
}


.applicant-stats > div {
    padding: 20px;

    background: var(--surface);

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

    border-radius: 12px;
}


.applicant-stats strong {
    display: block;

    font-size: 31px;

    letter-spacing: -1px;
}


.applicant-stats span {
    display: block;

    color: var(--muted);

    font-size: 9px;

    margin-top: 4px;
}


/* CONTENT */

.applicants-content {
    max-width: var(--max-width);

    margin: 0 auto;

    padding: 0 4vw;
}


.applicant-role-section {
    padding: 35px 0;

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


.applicant-role-header {
    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 25px;

    margin-bottom: 20px;
}


.applicant-role-header h2 {
    font-size: 31px;

    letter-spacing: -1.2px;

    margin-top: 6px;
}


.applicant-role-header p {
    color: var(--muted);

    font-size: 10px;

    margin-top: 4px;
}


.role-capacity-badge {
    padding: 8px 12px;

    border-radius: 30px;

    background:
        rgba(49,233,129,.08);

    border:
        1px solid
        rgba(49,233,129,.20);

    color: var(--green);

    font-size: 9px;

    font-weight: 900;
}


.role-capacity-badge.full {
    color: var(--muted);

    border-color: var(--border);

    background:
        rgba(255,255,255,.03);
}


/* APPLICANT GRID */

.applicant-grid {
    display: grid;

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

    gap: 14px;
}


.applicant-card {
    background: var(--surface);

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

    border-radius: 14px;

    padding: 18px;

    transition:
        border-color .2s ease,
        transform .2s ease;
}


.applicant-card:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(230, 228, 94,.30);
}


.applicant-card.status-accepted {
    border-color:
        rgba(49,233,129,.28);

    background:
        linear-gradient(
            rgba(49,233,129,.025),
            rgba(49,233,129,.025)
        ),
        var(--surface);
}


.applicant-card.status-declined {
    opacity: .62;
}


/* TOP */

.applicant-card-top {
    display: flex;

    gap: 14px;
}


.applicant-photo {
    width: 70px;

    height: 70px;

    flex-shrink: 0;

    overflow: hidden;

    border-radius: 12px;

    background: var(--surface-2);

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

    display: grid;

    place-items: center;
}


.applicant-photo img {
    width: 100%;

    height: 100%;

    object-fit: cover;
}


.applicant-photo span {
    font-size: 13px;

    font-weight: 900;

    color: #d6d9df;
}


.applicant-main-info {
    min-width: 0;

    flex: 1;
}


.applicant-name-row {
    display: flex;

    justify-content: space-between;

    gap: 12px;

    align-items: flex-start;
}


.applicant-name-row h3 {
    font-size: 17px;

    letter-spacing: -.4px;
}


.applicant-name-row h3 a:hover {
    color: var(--purple-light);
}


.applicant-name-row p {
    color: var(--muted);

    font-size: 9px;

    margin-top: 4px;
}


.applicant-bio {
    color: #b8bec8;

    font-size: 10px;

    line-height: 1.6;

    margin-top: 10px;
}


/* STATUS */

.applicant-status {
    flex-shrink: 0;

    padding: 6px 8px;

    border-radius: 30px;

    font-size: 8px;

    font-weight: 900;
}


.applicant-status.pending {
    color: #ffd375;

    background:
        rgba(255,190,50,.08);
}


.applicant-status.accepted {
    color: var(--green);

    background:
        rgba(49,233,129,.08);
}


.applicant-status.declined {
    color: #ff929d;

    background:
        rgba(255,70,90,.07);
}


.applicant-status.withdrawn {
    color: var(--muted);

    background:
        rgba(255,255,255,.04);
}


/* MESSAGE */

.applicant-message {
    margin-top: 18px;

    padding-top: 16px;

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


.applicant-message p {
    color: #c8cdd5;

    font-size: 11px;

    line-height: 1.7;

    margin-top: 8px;
}


/* ACTIONS */

.applicant-actions {
    display: flex;

    gap: 7px;

    flex-wrap: wrap;

    margin-top: 17px;
}


.applicant-actions form {
    display: contents;
}


.applicant-profile-btn,
.applicant-accept-btn,
.applicant-decline-btn {
    min-height: 38px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0 13px;

    border-radius: 7px;

    font-size: 9px;

    font-weight: 900;

    cursor: pointer;
}


.applicant-profile-btn {
    background:
        var(--surface-2);

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

    color: white;
}


.applicant-accept-btn {
    border:
        1px solid
        rgba(49,233,129,.25);

    background:
        rgba(49,233,129,.08);

    color: var(--green);
}


.applicant-accept-btn:hover {
    background:
        rgba(49,233,129,.14);
}


.applicant-accept-btn:disabled {
    opacity: .35;

    cursor: not-allowed;
}


.applicant-decline-btn {
    border:
        1px solid
        rgba(255,70,90,.18);

    background:
        rgba(255,70,90,.06);

    color: #ff8e99;
}


.applicant-decline-btn:hover {
    background:
        rgba(255,70,90,.11);
}


/* EMPTY ROLE */

.role-no-applicants {
    padding: 35px;

    border:
        1px dashed
        rgba(255,255,255,.10);

    border-radius: 12px;

    text-align: center;

    color: var(--muted);

    font-size: 11px;
}


/* RESPONSIVE */

@media (max-width: 900px) {

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


    .applicant-stats {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 620px) {

    .applicants-hero {
        padding:
            55px 20px
            35px;
    }


    .applicants-hero h1 {
        font-size: 52px;

        letter-spacing:
            -2.5px;
    }


    .applicant-stats {
        padding:
            0 20px
            35px;
    }


    .applicants-content {
        padding: 0 20px;
    }


    .applicant-role-header {
        align-items: flex-start;

        flex-direction: column;
    }


    .applicant-name-row {
        flex-direction: column;
    }


    .applicant-actions {
        flex-direction: column;
    }


    .applicant-profile-btn,
    .applicant-accept-btn,
    .applicant-decline-btn {
        width: 100%;
    }

}
/* =========================================
   DASHBOARD — LIVE SHOOTS
========================================= */

.availability-on {
    color: var(--green);
}


.dashboard-upcoming-section {
    max-width: var(--max-width);

    margin: 70px auto 0;

    padding: 0 4vw 110px;
}


.dashboard-section-header {
    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 25px;

    margin-bottom: 22px;
}


.dashboard-section-header h2 {
    font-size: 34px;

    letter-spacing: -1.4px;

    margin-top: 6px;
}


.dashboard-shoot-list {
    display: flex;

    flex-direction: column;

    gap: 10px;
}


.dashboard-shoot-item {
    display: grid;

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

    gap: 18px;

    align-items: center;

    padding: 18px;

    background: var(--surface);

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

    border-radius: 13px;

    transition:
        transform .2s ease,
        border-color .2s ease;
}


.dashboard-shoot-item:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(230, 228, 94,.35);
}


.dashboard-shoot-date {
    width: 72px;

    height: 72px;

    border-radius: 10px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background:
        rgba(230, 228, 94,.08);

    border:
        1px solid
        rgba(230, 228, 94,.20);
}


.dashboard-shoot-date span {
    color: var(--purple-light);

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 1px;
}


.dashboard-shoot-date strong {
    font-size: 27px;

    line-height: 1;

    margin-top: 4px;
}


.dashboard-shoot-badges {
    display: flex;

    gap: 6px;

    margin-bottom: 7px;
}


.dashboard-shoot-info h3 {
    font-size: 18px;

    letter-spacing: -.4px;
}


.dashboard-shoot-info > p {
    color: var(--muted);

    font-size: 10px;

    margin-top: 5px;
}


.dashboard-shoot-context {
    display: block;

    color: #c5cad2;

    font-size: 10px;

    margin-top: 8px;
}


.dashboard-shoot-action {
    display: flex;

    gap: 8px;
}


.dashboard-shoot-action .btn {
    min-height: 39px;

    padding:
        0 14px;

    white-space: nowrap;

    font-size: 9px;
}


@media (max-width: 800px) {

    .dashboard-shoot-item {
        grid-template-columns:
            62px 1fr;
    }


    .dashboard-shoot-date {
        width: 62px;

        height: 62px;
    }


    .dashboard-shoot-action {
        grid-column:
            1 / -1;
    }

}


@media (max-width: 620px) {

    .dashboard-upcoming-section {
        padding:
            0 20px
            80px;
    }


    .dashboard-section-header {
        align-items: flex-start;

        flex-direction: column;
    }


    .dashboard-shoot-action {
        flex-direction: column;
    }


    .dashboard-shoot-action .btn {
        width: 100%;
    }

}
/* =========================================
   MY APPLICATIONS
========================================= */

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


.applications-hero {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 75px 4vw 45px;
}


.applications-back {
    display: inline-block;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    margin-bottom: 45px;
    transition: color .2s ease;
}


.applications-back:hover {
    color: white;
}


.applications-hero h1 {
    font-size: clamp(48px, 6vw, 82px);
    letter-spacing: -4px;
    line-height: .95;
    margin-top: 16px;
}


.applications-hero h1 span {
    color: var(--purple-light);
}


.applications-hero > p {
    color: var(--muted);
    font-size: 15px;
    margin-top: 22px;
    max-width: 550px;
    line-height: 1.6;
}


/* STATS */

.applications-stats {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 4vw 55px;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}


.applications-stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 13px;
    padding: 24px;
}


.applications-stat strong {
    display: block;
    font-size: 34px;
    letter-spacing: -1px;
}


.applications-stat span {
    display: block;
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .6px;
    margin-top: 10px;
    text-transform: uppercase;
}


/* CONTENT */

.applications-content {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 4vw;
}


.applications-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 22px;
}


.applications-section-heading h2 {
    font-size: 34px;
    letter-spacing: -1.4px;
    margin-top: 7px;
}


.applications-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}


/* APPLICATION CARD */

.application-item {
    display: grid;
    grid-template-columns: 78px 1fr 300px;
    gap: 24px;

    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px;

    transition:
        transform .2s ease,
        border-color .2s ease;
}


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


.application-item-accepted {
    border-color: rgba(41, 211, 125, .25);
}


.application-item-pending {
    border-color: rgba(255, 193, 7, .15);
}


.application-item-declined {
    opacity: .75;
}


/* DATE */

.application-date-box {
    width: 78px;
    height: 78px;

    border-radius: 11px;

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

    background: rgba(230, 228, 94, .08);
    border: 1px solid rgba(230, 228, 94, .22);
}


.application-date-box span {
    color: var(--purple-light);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1px;
}


.application-date-box strong {
    font-size: 29px;
    line-height: 1;
    margin-top: 5px;
}


/* MAIN */

.application-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 9px;
}


.application-status {
    display: inline-flex;
    align-items: center;

    min-height: 20px;
    padding: 0 8px;

    border-radius: 5px;

    font-size: 7px;
    font-weight: 900;
    letter-spacing: .5px;
}


.application-status-accepted {
    color: #35e98c;
    background: rgba(41, 211, 125, .12);
}


.application-status-pending {
    color: #ffd45c;
    background: rgba(255, 193, 7, .10);
}


.application-status-declined {
    color: #ff7070;
    background: rgba(255, 80, 80, .10);
}


.application-main h3 {
    font-size: 23px;
    letter-spacing: -.8px;
}


.application-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;

    color: var(--muted);
    font-size: 10px;
    margin-top: 7px;
}


.application-role {
    margin-top: 17px;
}


.application-role span,
.application-message span,
.application-creator span {
    display: block;

    color: var(--muted);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .8px;

    margin-bottom: 5px;
}


.application-role strong {
    font-size: 12px;
}


.application-message {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}


.application-message p {
    color: #c9ced7;
    font-size: 11px;
    line-height: 1.6;
}


/* SIDE */

.application-side {
    border-left: 1px solid var(--border);
    padding-left: 22px;

    display: flex;
    flex-direction: column;
}


.application-creator strong {
    font-size: 12px;
}


.application-result {
    margin-top: 20px;
    padding: 13px;

    border-radius: 9px;
}


.application-result strong {
    display: block;
    font-size: 11px;
}


.application-result p {
    font-size: 9px;
    line-height: 1.5;
    margin-top: 5px;
}


.accepted-result {
    background: rgba(41, 211, 125, .07);
    border: 1px solid rgba(41, 211, 125, .16);
}


.accepted-result strong {
    color: #35e98c;
}


.accepted-result p {
    color: #9eb5aa;
}


.pending-result {
    background: rgba(255, 193, 7, .05);
    border: 1px solid rgba(255, 193, 7, .12);
}


.pending-result strong {
    color: #ffd45c;
}


.pending-result p {
    color: var(--muted);
}


.declined-result {
    background: rgba(255, 80, 80, .05);
    border: 1px solid rgba(255, 80, 80, .12);
}


.declined-result strong {
    color: #ff7777;
}


.declined-result p {
    color: var(--muted);
}


.application-actions {
    display: flex;
    gap: 7px;
    margin-top: auto;
    padding-top: 18px;
}


.application-actions .btn {
    min-height: 38px;
    padding: 0 12px;
    font-size: 8px;
}


/* EMPTY */

.applications-empty {
    min-height: 300px;

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

    text-align: center;

    border: 1px dashed var(--border);
    border-radius: 14px;
}


.applications-empty-icon {
    width: 45px;
    height: 45px;

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

    border-radius: 50%;

    background: rgba(230, 228, 94, .1);
    color: var(--purple-light);

    font-size: 24px;
}


.applications-empty h3 {
    font-size: 20px;
    margin-top: 15px;
}


.applications-empty p {
    max-width: 390px;

    color: var(--muted);
    font-size: 11px;
    line-height: 1.6;

    margin: 8px 0 18px;
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .application-item {
        grid-template-columns: 70px 1fr;
    }

    .application-side {
        grid-column: 1 / -1;

        border-left: 0;
        border-top: 1px solid var(--border);

        padding-left: 0;
        padding-top: 18px;
    }

}


@media (max-width: 700px) {

    .applications-stats {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 550px) {

    .applications-hero,
    .applications-stats,
    .applications-content {
        padding-left: 20px;
        padding-right: 20px;
    }

    .applications-hero h1 {
        letter-spacing: -2.5px;
    }

    .applications-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .application-item {
        grid-template-columns: 1fr;
    }

    .application-date-box {
        width: 64px;
        height: 64px;
    }

    .application-side {
        grid-column: auto;
    }

    .application-actions {
        flex-direction: column;
    }

    .application-actions .btn {
        width: 100%;
    }

}
/* =========================================
   SHOOT ROOM
========================================= */

.shoot-room-page {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 82% 4%,
            rgba(230, 228, 94,.10),
            transparent 28%
        ),
        var(--bg);

    padding-bottom: 120px;
}


/* HERO */

.shoot-room-hero {
    max-width: var(--max-width);

    margin: 0 auto;

    padding: 70px 4vw 40px;

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 35px;
}


.shoot-room-hero h1 {
    font-size: clamp(
        50px,
        6vw,
        82px
    );

    line-height: .96;

    letter-spacing: -4px;

    margin-top: 12px;
}


.shoot-room-hero > div > p {
    color: var(--muted);

    margin-top: 16px;

    font-size: 13px;

    line-height: 1.6;
}


.shoot-room-status {
    min-width: 145px;

    padding: 18px;

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

    background: var(--surface);

    border-radius: 12px;
}


.shoot-room-status strong {
    display: block;

    color: var(--green);

    font-size: 17px;

    margin-top: 8px;
}


/* SUMMARY */

.shoot-room-summary {
    max-width: var(--max-width);

    margin: 0 auto;

    padding: 0 4vw 45px;

    display: grid;

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

    gap: 10px;
}


.shoot-room-summary-card {
    background: var(--surface);

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

    border-radius: 11px;

    padding: 18px;
}


.shoot-room-summary-card span {
    display: block;

    color: var(--muted);

    font-size: 8px;

    font-weight: 900;

    letter-spacing: .8px;
}


.shoot-room-summary-card strong {
    display: block;

    margin-top: 7px;

    font-size: 12px;
}


/* LAYOUT */

.shoot-room-layout {
    max-width: var(--max-width);

    margin: 0 auto;

    padding: 0 4vw;

    display: grid;

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

    gap: 40px;

    align-items: start;
}


.shoot-room-main {
    min-width: 0;
}


/* SECTIONS */

.shoot-room-section {
    padding: 35px 0;

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


.shoot-room-section:first-child {
    padding-top: 0;

    border-top: none;
}


.shoot-room-section h2 {
    font-size: 31px;

    letter-spacing: -1.3px;

    margin:
        7px 0
        20px;
}


.shoot-room-section-heading {
    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 20px;
}


.shoot-room-crew-count {
    color: var(--green);

    font-size: 10px;

    font-weight: 900;
}


/* CONCEPT */

.shoot-room-concept {
    display: grid;

    grid-template-columns:
        280px
        1fr;

    gap: 22px;

    align-items: start;
}


.shoot-room-cover {
    width: 100%;

    aspect-ratio: 4 / 3;

    overflow: hidden;

    border-radius: 12px;

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

    background: var(--surface);
}


.shoot-room-cover img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
}


.shoot-room-description {
    color: #444444;

    font-size: 13px;

    line-height: 1.85;
}


/* CREW */

.shoot-room-crew-grid {
    display: grid;

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

    gap: 12px;
}


.shoot-room-member {
    display: flex;

    gap: 13px;

    padding: 17px;

    background: var(--surface);

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

    border-radius: 12px;
}


.shoot-room-member.creator {
    border-color:
        rgba(230, 228, 94,.25);
}


.shoot-room-member-photo {
    width: 62px;

    height: 62px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border-radius: 10px;

    overflow: hidden;

    background: var(--surface-2);

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

    font-size: 11px;

    font-weight: 900;
}


.shoot-room-member-photo img {
    width: 100%;

    height: 100%;

    object-fit: cover;
}


.shoot-room-member-info {
    min-width: 0;

    flex: 1;
}


.shoot-room-member-top {
    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 10px;
}


.shoot-room-member-top h3 {
    font-size: 16px;
}


.shoot-room-member-top p {
    color: var(--muted);

    font-size: 9px;

    margin-top: 3px;
}


.shoot-room-member-info .text-link {
    display: inline-block;

    margin-top: 12px;

    font-size: 9px;
}


/* NOTES */

.shoot-room-notes {
    display: grid;

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

    gap: 10px;
}


.shoot-room-notes > div {
    padding: 16px;

    background: var(--surface);

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

    border-radius: 10px;
}


.shoot-room-notes span {
    display: block;

    color: var(--muted);

    font-size: 8px;

    font-weight: 900;
}


.shoot-room-notes strong {
    display: block;

    font-size: 12px;

    margin-top: 7px;
}


/* SIDEBAR */

.shoot-room-sidebar {
    position: sticky;

    top: 100px;

    display: flex;

    flex-direction: column;

    gap: 12px;
}


.shoot-room-sidebar-card {
    background: var(--surface);

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

    border-radius: 13px;

    padding: 20px;
}


.shoot-room-sidebar-title {
    display: block;

    font-size: 21px;

    margin-top: 10px;
}


.shoot-room-sidebar-card > p {
    color: var(--muted);

    font-size: 10px;

    line-height: 1.6;

    margin-top: 7px;
}


.shoot-room-sidebar-card .btn {
    width: 100%;

    margin-top: 10px;
}


.shoot-room-role-row {
    display: flex;

    justify-content: space-between;

    gap: 12px;

    padding: 11px 0;

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


.shoot-room-role-row:last-child {
    border-bottom: none;
}


.shoot-room-role-row span {
    color: var(--muted);

    font-size: 9px;
}


.shoot-room-role-row strong {
    font-size: 10px;
}


.shoot-room-coming h3 {
    font-size: 17px;

    margin-top: 10px;
}


/* RESPONSIVE */

@media (max-width: 1000px) {

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

    .shoot-room-sidebar {
        position: static;

        display: grid;

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

}


@media (max-width: 800px) {

    .shoot-room-summary {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .shoot-room-concept {
        grid-template-columns: 1fr;
    }

    .shoot-room-cover {
        max-width: 500px;
    }

}


@media (max-width: 650px) {

    .shoot-room-hero {
        padding:
            55px 20px
            35px;

        flex-direction: column;

        align-items: flex-start;
    }

    .shoot-room-summary,
    .shoot-room-layout {
        padding-left: 20px;
        padding-right: 20px;
    }

    .shoot-room-summary {
        grid-template-columns: 1fr;
    }

    .shoot-room-crew-grid {
        grid-template-columns: 1fr;
    }

    .shoot-room-notes {
        grid-template-columns: 1fr;
    }

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

}
/* =========================================
   SHOOT UPDATES — AVATAR FIX
========================================= */

.shoot-update-feed {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 18px !important;
}


.shoot-update-item {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    gap: 13px !important;

    align-items: start !important;

    padding: 17px !important;

    background: var(--surface) !important;

    border: 1px solid var(--border) !important;
    border-radius: 11px !important;

    overflow: hidden !important;
}


.shoot-update-avatar {
    width: 46px !important;
    height: 46px !important;

    min-width: 46px !important;
    max-width: 46px !important;

    min-height: 46px !important;
    max-height: 46px !important;

    display: grid !important;
    place-items: center !important;

    overflow: hidden !important;

    border-radius: 9px !important;

    background: var(--surface-2) !important;

    border: 1px solid var(--border) !important;
}


.shoot-update-avatar img {
    display: block !important;

    width: 46px !important;
    height: 46px !important;

    min-width: 46px !important;
    max-width: 46px !important;

    min-height: 46px !important;
    max-height: 46px !important;

    object-fit: cover !important;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: 0 !important;
}


.shoot-update-avatar span {
    font-size: 9px !important;
    font-weight: 900 !important;
}


.shoot-update-content {
    min-width: 0 !important;
    width: 100% !important;
}


.shoot-update-meta {
    display: flex !important;

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

    gap: 18px !important;
}


.shoot-update-meta > div {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
}


.shoot-update-meta strong {
    font-size: 11px !important;
}


.shoot-update-meta time {
    color: var(--muted) !important;

    font-size: 8px !important;

    white-space: nowrap !important;
}


.shoot-update-message {
    color: #444444 !important;

    font-size: 11px !important;
    line-height: 1.7 !important;

    margin-top: 9px !important;

    overflow-wrap: anywhere !important;
}


@media (max-width: 650px) {

    .shoot-update-meta {
        align-items: flex-start !important;
        flex-direction: column !important;

        gap: 5px !important;
    }

}
/* =========================================
   DMVTFP GLOBAL MOBILE NAVIGATION
========================================= */

.mobile-menu-button,
.mobile-menu,
.mobile-menu-backdrop {
    display: none;
}


/* HAMBURGER */

.mobile-menu-button {
    width: 44px;
    height: 44px;

    padding: 0;

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

    border-radius: 9px;

    background: var(--surface);

    cursor: pointer;

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

    flex-direction: column;

    gap: 5px;
}


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

    display: block;

    border-radius: 10px;

    background: white;
}


/* OVERLAY */

.mobile-menu-backdrop {
    position: fixed;

    inset: 0;

    z-index: 4998;

    background:
        rgba(0,0,0,.68);

    backdrop-filter:
        blur(5px);

    opacity: 0;

    pointer-events: none;

    transition:
        opacity .25s ease;
}


.mobile-menu-backdrop.open {
    opacity: 1;

    pointer-events: auto;
}


/* DRAWER */

.mobile-menu {
    position: fixed;

    top: 0;
    right: 0;

    width:
        min(
            88vw,
            390px
        );

    height: 100dvh;

    z-index: 4999;

    background:
        radial-gradient(
            circle at 80% 5%,
            rgba(230, 228, 94,.15),
            transparent 30%
        ),
        #FFFFFF;

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

    transform:
        translateX(105%);

    transition:
        transform .28s ease;

    overflow-y: auto;

    box-shadow:
        -30px 0 80px
        rgba(0,0,0,.45);
}


.mobile-menu.open {
    transform:
        translateX(0);
}


.mobile-menu-inner {
    min-height: 100%;

    display: flex;

    flex-direction: column;

    padding:
        22px 20px
        28px;
}


/* TOP */

.mobile-menu-top {
    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 20px;

    padding-bottom: 24px;

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


.mobile-menu-close {
    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

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

    border-radius: 9px;

    background: var(--surface);

    color: white;

    cursor: pointer;

    font-size: 26px;

    font-weight: 300;

    line-height: 1;
}


/* LINKS */

.mobile-menu-links {
    display: flex;

    flex-direction: column;

    padding-top: 18px;
}


.mobile-menu-links a {
    min-height: 61px;

    display: flex !important;

    align-items: center;

    justify-content:
        space-between;

    gap: 15px;

    padding:
        0 4px;

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

    color: #222222 !important;

    font-size: 15px;

    font-weight: 800;
}


.mobile-menu-links a span {
    display: block;
}


.mobile-menu-links a strong {
    color: var(--muted);

    font-size: 15px;

    font-weight: 500;

    transition:
        transform .2s ease,
        color .2s ease;
}


.mobile-menu-links a:hover {
    color: white !important;
}


.mobile-menu-links a:hover strong {
    color:
        var(--purple-light);

    transform:
        translateX(3px);
}


.mobile-menu-links a.nav-active {
    color:
        var(--purple-light)
        !important;
}


.mobile-menu-links
a.nav-active strong {
    color:
        var(--purple-light);
}


/* SPECIAL LINKS */

.mobile-logout-link {
    margin-top: 14px;

    color:
        #ff8c96
        !important;
}


.mobile-join-link {
    margin-top: 15px;

    justify-content: center !important;

    border:
        1px solid
        rgba(230, 228, 94,.35)
        !important;

    border-radius: 9px;

    background:
        rgba(230, 228, 94,.12);
}


/* FOOTER */

.mobile-menu-footer {
    margin-top: auto;

    padding-top: 35px;

    color: var(--muted);

    font-size: 9px;

    text-align: center;

    letter-spacing: .6px;
}


body.mobile-menu-open {
    overflow: hidden;
}


/* =========================================
   MOBILE BREAKPOINT
========================================= */

@media (max-width: 1000px) {

    /*
    Override the older CSS rule
    that hides nav links.
    */

    .desktop-nav {
        display: none !important;
    }


    .mobile-menu-button {
        display: flex;
    }


    .mobile-menu {
        display: block;
    }


    .mobile-menu-backdrop {
        display: block;
    }


    .site-header {
        min-height: 70px;

        padding:
            0 20px;
    }


    .site-header .logo {
        font-size: 24px;
    }

}
/* =========================================
   DASHBOARD — COMPLETED COLLABORATIONS
========================================= */

.dashboard-completed-section {
    max-width: var(--max-width);

    margin:
        20px auto 0;

    padding:
        0 4vw
        120px;
}


.dashboard-section-description {
    color: var(--muted);

    font-size: 10px;

    line-height: 1.6;

    margin-top: 6px;
}


.completed-count-pill {
    padding: 8px 11px;

    border-radius: 30px;

    background:
        rgba(49,233,129,.07);

    border:
        1px solid
        rgba(49,233,129,.18);

    color: var(--green);

    font-size: 8px;

    font-weight: 900;
}


.completed-collab-list {
    display: flex;

    flex-direction: column;

    gap: 10px;
}


.completed-collab-item {
    display: grid;

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

    gap: 17px;

    align-items: center;

    padding: 18px;

    border-radius: 13px;

    border:
        1px solid
        rgba(49,233,129,.18);

    background:
        radial-gradient(
            circle at 95% 0%,
            rgba(49,233,129,.035),
            transparent 30%
        ),
        var(--surface);
}


.completed-collab-check {
    width: 54px;
    height: 54px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    border:
        1px solid
        rgba(49,233,129,.25);

    background:
        rgba(49,233,129,.08);

    color: var(--green);

    font-size: 18px;

    font-weight: 900;
}


.completed-collab-badges {
    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-bottom: 7px;
}


.completed-collab-main h3 {
    font-size: 18px;

    letter-spacing: -.4px;
}


.completed-collab-main > p {
    color: var(--muted);

    font-size: 10px;

    margin-top: 5px;
}


.completed-collab-context {
    display: block;

    color: #b8c3bd;

    font-size: 9px;

    margin-top: 7px;
}


.completed-collab-action .btn {
    min-height: 39px;

    white-space: nowrap;

    padding:
        0 14px;

    font-size: 9px;
}


.completed-collab-empty {
    min-height: 220px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    border:
        1px dashed
        rgba(255,255,255,.09);

    border-radius: 13px;
}


.completed-collab-empty > div {
    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        rgba(49,233,129,.08);

    color: var(--green);

    font-weight: 900;
}


.completed-collab-empty h3 {
    font-size: 17px;

    margin-top: 12px;
}


.completed-collab-empty p {
    color: var(--muted);

    font-size: 9px;

    line-height: 1.6;

    margin-top: 6px;
}


@media (max-width: 760px) {

    .dashboard-completed-section {
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 90px;
    }


    .completed-collab-item {
        grid-template-columns:
            48px
            1fr;
    }


    .completed-collab-check {
        width: 48px;
        height: 48px;
    }


    .completed-collab-action {
        grid-column:
            1 / -1;
    }


    .completed-collab-action .btn {
        width: 100%;
    }


    .completed-count-pill {
        align-self: flex-start;
    }

}
/* =========================================
   MOBILE NAV — FINAL OVERRIDE
   KEEP THIS AT ABSOLUTE BOTTOM OF STYLE.CSS
========================================= */

.mobile-menu-button {
    display: none;
}

.mobile-menu,
.mobile-menu-backdrop {
    display: none;
}


/* =========================================
   MOBILE / TABLET
========================================= */

@media screen and (max-width: 1000px) {

    /* Hide desktop navigation */
    .site-header .desktop-nav {
        display: none !important;
    }


    /* HEADER */

    .site-header {
        min-height: 70px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: space-between !important;

        padding: 0 18px !important;
    }


    .site-header .logo-wrap {
        display: block !important;
    }


    .site-header .logo {
        font-size: 24px !important;
    }


    /* HAMBURGER */

    .site-header .mobile-menu-button {
        width: 44px !important;
        height: 44px !important;

        display: flex !important;

        flex-direction: column !important;

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

        gap: 5px !important;

        padding: 0 !important;

        margin: 0 !important;

        flex-shrink: 0 !important;

        border: 1px solid var(--border) !important;

        border-radius: 9px !important;

        background: var(--surface) !important;

        cursor: pointer !important;

        position: relative !important;

        z-index: 5100 !important;
    }


    .site-header .mobile-menu-button span {
        display: block !important;

        width: 19px !important;
        height: 2px !important;

        padding: 0 !important;
        margin: 0 !important;

        border-radius: 10px !important;

        background: #ffffff !important;
    }


    /* BACKDROP */

    .mobile-menu-backdrop {
        display: block !important;

        position: fixed !important;

        inset: 0 !important;

        z-index: 4998 !important;

        background: rgba(0,0,0,.72) !important;

        backdrop-filter: blur(5px);

        opacity: 0 !important;

        visibility: hidden !important;

        pointer-events: none !important;

        transition:
            opacity .25s ease,
            visibility .25s ease !important;
    }


    .mobile-menu-backdrop.open {
        opacity: 1 !important;

        visibility: visible !important;

        pointer-events: auto !important;
    }


    /* MOBILE DRAWER */

    .mobile-menu {
        display: block !important;

        position: fixed !important;

        top: 0 !important;
        right: 0 !important;

        width: min(88vw, 390px) !important;

        height: 100vh !important;
        height: 100dvh !important;

        z-index: 4999 !important;

        overflow-y: auto !important;

        background:
            radial-gradient(
                circle at 80% 5%,
                rgba(230, 228, 94,.16),
                transparent 30%
            ),
            #FFFFFF !important;

        border-left:
            1px solid var(--border) !important;

        transform:
            translateX(105%) !important;

        transition:
            transform .28s ease !important;

        box-shadow:
            -30px 0 80px
            rgba(0,0,0,.5) !important;
    }


    .mobile-menu.open {
        transform:
            translateX(0) !important;
    }


    .mobile-menu-inner {
        min-height: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        padding:
            22px 20px
            28px !important;
    }


    /* DRAWER TOP */

    .mobile-menu-top {
        display: flex !important;

        align-items: center !important;

        justify-content:
            space-between !important;

        gap: 20px !important;

        padding-bottom: 24px !important;

        border-bottom:
            1px solid
            var(--border) !important;
    }


    .mobile-menu-close {
        width: 42px !important;
        height: 42px !important;

        display: grid !important;

        place-items: center !important;

        padding: 0 !important;

        border:
            1px solid
            var(--border) !important;

        border-radius: 9px !important;

        background:
            var(--surface) !important;

        color: white !important;

        font-size: 26px !important;

        line-height: 1 !important;

        cursor: pointer !important;
    }


    /* LINKS */

    .mobile-menu-links {
        display: flex !important;

        flex-direction: column !important;

        padding-top: 18px !important;
    }


    .mobile-menu-links a {
        min-height: 61px !important;

        display: flex !important;

        align-items: center !important;

        justify-content:
            space-between !important;

        gap: 15px !important;

        padding:
            0 4px !important;

        border-bottom:
            1px solid
            var(--border) !important;

        color:
            #222222 !important;

        font-size: 15px !important;

        font-weight: 800 !important;
    }


    .mobile-menu-links a.nav-active {
        color:
            var(--purple-light)
            !important;
    }


    .mobile-menu-links a strong {
        color:
            var(--muted) !important;

        font-size: 15px !important;
    }


    .mobile-menu-links
    a.nav-active strong {
        color:
            var(--purple-light)
            !important;
    }


    .mobile-logout-link {
        margin-top: 14px !important;

        color:
            #ff8c96 !important;
    }


    .mobile-join-link {
        margin-top: 15px !important;

        justify-content:
            center !important;

        border:
            1px solid
            rgba(230, 228, 94,.35)
            !important;

        border-radius:
            9px !important;

        background:
            rgba(230, 228, 94,.12)
            !important;
    }


    .mobile-menu-footer {
        margin-top: auto !important;

        padding-top: 35px !important;

        color:
            var(--muted) !important;

        font-size: 9px !important;

        text-align: center !important;
    }


    body.mobile-menu-open {
        overflow: hidden !important;
    }

}
/* =========================================
   DMVTFP GLOBAL FORM SYSTEM
========================================= */

.dmvtfp-form {
    width: 100%;
}


/* FIELD GROUP */

.dmvtfp-form .form-group {
    margin-bottom: 20px;
}


.dmvtfp-form .form-group label {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 9px;

    color: #dfe4ec;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .15px;
}


/* OPTIONAL */

.optional-label {
    padding: 3px 6px;

    border-radius: 5px;

    background:
        rgba(255,255,255,.045);

    color: var(--muted);

    font-size: 7px;

    font-weight: 800;

    letter-spacing: .5px;

    text-transform: uppercase;
}


/* INPUTS */

.dmvtfp-form input[type="text"],
.dmvtfp-form input[type="email"],
.dmvtfp-form input[type="password"],
.dmvtfp-form input[type="number"],
.dmvtfp-form input[type="url"],
.dmvtfp-form input[type="date"],
.dmvtfp-form input[type="time"],
.dmvtfp-form select,
.dmvtfp-form textarea {

    width: 100%;

    min-height: 48px;

    display: block;

    padding: 13px 14px;

    border:
        1px solid
        #242c38;

    border-radius: 9px;

    outline: none;

    background:
        #FFFFFF;

    color: #f5f7fb;

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

    font-size: 13px;

    line-height: 1.4;

    transition:
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}


/* TEXTAREA */

.dmvtfp-form textarea {
    min-height: 120px;

    resize: vertical;

    line-height: 1.65;
}


/* PLACEHOLDER */

.dmvtfp-form input::placeholder,
.dmvtfp-form textarea::placeholder {
    color: #5e6877;

    opacity: 1;
}


/* FOCUS */

.dmvtfp-form input:focus,
.dmvtfp-form select:focus,
.dmvtfp-form textarea:focus {

    border-color:
        rgba(230, 228, 94,.85);

    background:
        #0b0f15;

    box-shadow:
        0 0 0 3px
        rgba(230, 228, 94,.09);
}


/* DATE / TIME FIX */

.dmvtfp-form input[type="date"],
.dmvtfp-form input[type="time"] {
    color-scheme: dark;
}


/* SELECT */

.dmvtfp-form select {
    appearance: none;

    -webkit-appearance: none;

    padding-right: 42px;

    cursor: pointer;

    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            #777777 50%
        ),
        linear-gradient(
            135deg,
            #777777 50%,
            transparent 50%
        );

    background-position:
        calc(100% - 18px) 21px,
        calc(100% - 13px) 21px;

    background-size:
        5px 5px,
        5px 5px;

    background-repeat: no-repeat;
}


/* HELPER */

.form-helper {
    margin-top: 7px;

    color: #697585;

    font-size: 8px;

    line-height: 1.5;
}


/* SUBMIT */

.form-main-submit {
    width: 100%;

    min-height: 48px;

    border: none;

    cursor: pointer;

    font-size: 11px;
}


/* REMOVE MOBILE BROWSER ODDITIES */

.dmvtfp-form input,
.dmvtfp-form textarea,
.dmvtfp-form select {
    -webkit-tap-highlight-color:
        transparent;
}


/* MOBILE */

@media (max-width: 650px) {

    .dmvtfp-form input[type="text"],
    .dmvtfp-form input[type="email"],
    .dmvtfp-form input[type="password"],
    .dmvtfp-form input[type="number"],
    .dmvtfp-form input[type="url"],
    .dmvtfp-form input[type="date"],
    .dmvtfp-form input[type="time"],
    .dmvtfp-form select,
    .dmvtfp-form textarea {

        /*
        Prevent iPhone auto-zoom.
        */

        font-size: 16px;
    }

}
/* =========================================
   CREATE COLLABORATION — FORM POLISH
========================================= */

/* Prevent the global form input styling
   from messing with role slot counters */

.dmvtfp-form
.role-slot-selector input[type="number"] {
    min-height: 34px;
    height: 34px;

    padding: 0 4px;

    border: 0;

    border-radius: 0;

    background: transparent;

    box-shadow: none;

    text-align: center;

    font-size: 11px;
}


/* MONEY FIELD */

.dmvtfp-form .money-input {
    position: relative;
}


.dmvtfp-form .money-input > span {
    position: absolute;

    left: 15px;
    top: 50%;

    transform: translateY(-50%);

    z-index: 2;

    color: var(--muted);

    font-size: 13px;

    pointer-events: none;
}


.dmvtfp-form
.money-input input[type="number"] {
    padding-left: 32px;
}


/* CONCEPT IMAGE UPLOAD */

.dmvtfp-form .shoot-cover-upload {
    display: block;

    width: 100%;

    margin: 0;

    cursor: pointer;
}


.dmvtfp-form
.shoot-cover-upload
input[type="file"] {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;

    overflow: hidden;

    pointer-events: none;
}


.dmvtfp-form .shoot-cover-preview {
    min-height: 190px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    border:
        1px dashed
        #303947;

    border-radius: 10px;

    background:
        #FFFFFF;

    transition:
        border-color .2s ease,
        background .2s ease;
}


.dmvtfp-form
.shoot-cover-upload:hover
.shoot-cover-preview {
    border-color:
        rgba(230, 228, 94,.65);

    background:
        rgba(230, 228, 94,.025);
}


.dmvtfp-form
.shoot-cover-preview img {
    width: 100%;
    height: 100%;

    min-height: 190px;

    max-height: 340px;

    display: block;

    object-fit: cover;
}


.dmvtfp-form .shoot-cover-placeholder {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 7px;

    padding: 35px 20px;

    text-align: center;
}


.dmvtfp-form
.shoot-cover-placeholder strong {
    color: #e8ecf2;

    font-size: 11px;
}


.dmvtfp-form
.shoot-cover-placeholder span {
    color: var(--muted);

    font-size: 8px;
}


/* COMPENSATION CARDS */

.dmvtfp-form .compensation-option {
    cursor: pointer;
}


.dmvtfp-form
.compensation-option input[type="radio"] {
    accent-color: var(--purple);
}


/* ROLE CHECKBOXES */

.dmvtfp-form
.shoot-role-checkbox {
    accent-color: var(--purple);
}


/* SUBMIT BUTTON */

.dmvtfp-form .create-shoot-button {
    min-height: 50px;

    border-radius: 9px;

    cursor: pointer;
}


/* MOBILE */

@media (max-width: 650px) {

    .dmvtfp-form .shoot-cover-preview {
        min-height: 160px;
    }


    .dmvtfp-form
    .role-slot-selector
    input[type="number"] {

        /*
        Keep iPhone from zooming while
        preserving the compact counter.
        */

        font-size: 16px;
    }
    /* =========================================
   AUTH PAGES — GLOBAL HEADER VERSION
========================================= */

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

.auth-main {
    min-height:
        calc(100vh - 70px);

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        60px 20px
        80px;
}

.auth-main .auth-shell {
    width: 100%;

    display: flex;

    justify-content: center;
}

.auth-main .auth-card {
    width:
        min(
            100%,
            520px
        );
}

.auth-main .form-row {
    display: grid;

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

    gap: 14px;
}

@media (max-width: 620px) {

    .auth-main {
        align-items: flex-start;

        padding-top: 35px;
    }

    .auth-main .form-row {
        grid-template-columns:
            1fr;
    }

}

}
/* =========================================
   POST-SHOOT FEEDBACK
========================================= */

.feedback-page {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding: 70px 0 100px;
}


.feedback-hero {
    max-width: 850px;
    margin-bottom: 45px;
}


.feedback-hero h1 {
    margin: 15px 0 14px;
    font-size: clamp(46px, 7vw, 82px);
    line-height: .98;
}


.feedback-hero > p {
    max-width: 700px;
    color: var(--muted);
    line-height: 1.7;
}


.feedback-progress-card {
    margin-top: 30px;
    padding: 20px 22px;

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

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

    background: var(--surface);
}


.feedback-progress-card strong {
    display: block;
    margin-top: 5px;
    font-size: 28px;
}


.feedback-progress-card p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 11px;
}


.feedback-message-wrap {
    margin-bottom: 24px;
}


.feedback-content {
    display: grid;
    gap: 25px;
}


.feedback-person-card {
    padding: 25px;

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

    background: var(--surface);
}


.feedback-person-card.feedback-submitted {
    border-color: rgba(31, 223, 125, .25);
}


.feedback-person-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;

    padding-bottom: 22px;

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


.feedback-person-identity {
    display: flex;
    align-items: center;
    gap: 14px;
}


.feedback-person-photo {
    width: 54px;
    height: 54px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    overflow: hidden;

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

    background: #FFFFFF;

    font-weight: 800;
}


.feedback-person-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.feedback-person-header h2 {
    margin: 4px 0;
    font-size: 23px;
}


.feedback-person-header p {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
}


.feedback-form {
    padding-top: 10px;
}


.feedback-rating-row {
    min-height: 100px;

    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 30px;

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


.feedback-rating-row strong,
.feedback-again-section > strong {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
}


.feedback-rating-row p {
    margin: 0;
    color: var(--muted);
    font-size: 10px;
}


.feedback-rating-options {
    display: flex;
    gap: 7px;
}


.feedback-rating-options label,
.feedback-again-options label {
    cursor: pointer;
}


.feedback-rating-options input,
.feedback-again-options input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}


.feedback-rating-options span {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

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

    background: #FFFFFF;

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

    transition: .18s ease;
}


.feedback-rating-options label:hover span {
    border-color: rgba(230, 228, 94, .65);
}


.feedback-rating-options input:checked + span {
    border-color: var(--purple);
    background: rgba(230, 228, 94, .18);
    color: #fff;

    box-shadow:
        0 0 0 2px
        rgba(230, 228, 94, .08);
}


.feedback-again-section {
    padding: 26px 0;
}


.feedback-again-options {
    display: flex;
    gap: 10px;
    margin-top: 13px;
}


.feedback-again-options span {
    min-width: 90px;

    display: inline-flex;
    justify-content: center;

    padding: 11px 18px;

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

    background: #FFFFFF;

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


.feedback-again-options input:checked + span {
    border-color: var(--purple);
    background: rgba(230, 228, 94, .18);
}


.feedback-submitted-summary {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 12px;

    padding-top: 22px;
}


.feedback-submitted-summary > div {
    padding: 16px;

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

    background: #FFFFFF;
}


.feedback-submitted-summary span {
    display: block;

    margin-bottom: 7px;

    color: var(--muted);

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

    text-transform: uppercase;
}


.feedback-submitted-summary strong {
    font-size: 17px;
}


.feedback-footer-action {
    margin-top: 35px;

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


.feedback-complete-box {
    display: flex;
    align-items: center;
    gap: 14px;
}


.feedback-complete-box > span {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: rgba(31, 223, 125, .12);
    color: #1fdf7d;

    font-weight: 900;
}


.feedback-complete-box strong {
    display: block;
    margin-bottom: 4px;
}


.feedback-complete-box p {
    margin: 0;
    color: var(--muted);
    font-size: 10px;
}


@media (max-width: 700px) {

    .feedback-page {
        width: min(100% - 28px, 1180px);
        padding-top: 40px;
    }


    .feedback-person-card {
        padding: 18px;
    }


    .feedback-person-header {
        align-items: flex-start;
        flex-direction: column;
    }


    .feedback-rating-row {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 22px 0;
    }


    .feedback-rating-options {
        width: 100%;
    }


    .feedback-rating-options label {
        flex: 1;
    }


    .feedback-rating-options span {
        width: 100%;
    }


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


    .feedback-footer-action {
        align-items: stretch;
        flex-direction: column;
    }

}
/* =========================================
   COMPLETED COLLAB — FEEDBACK STATUS
========================================= */

.completed-feedback-done {
    border:
        1px solid
        rgba(31,223,125,.28);

    background:
        rgba(31,223,125,.08);

    color:
        #1fdf7d;
}


.completed-collab-action {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    flex-wrap: wrap;

    gap: 9px;
}


@media (max-width: 700px) {

    .completed-collab-action {
        width: 100%;

        justify-content: stretch;
    }


    .completed-collab-action .btn {
        flex: 1;

        text-align: center;
    }

}
/* =========================================
   SHOOT ROOM — POST-SHOOT FEEDBACK
========================================= */

.completion-complete-content {
    flex: 1;
}


.shoot-room-feedback-status {
    margin-top: 22px;

    padding-top: 20px;

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

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 22px;
}


.shoot-room-feedback-copy strong {
    display: block;

    margin-top: 10px;

    color: #fff;

    font-size: 14px;
}


.shoot-room-feedback-copy p {
    margin:
        5px 0 0;

    color:
        var(--muted);

    font-size: 10px;

    line-height: 1.6;
}


.shoot-room-sidebar-feedback {
    margin-top: 16px;
}


.shoot-room-sidebar-feedback .btn {
    width: 100%;

    text-align: center;
}


.feedback-sidebar-done {
    display: block;

    padding: 11px 12px;

    border:
        1px solid
        rgba(31,223,125,.28);

    border-radius: 8px;

    background:
        rgba(31,223,125,.08);

    color: #1fdf7d;

    font-size: 10px;

    font-weight: 800;

    text-align: center;
}


@media (max-width: 700px) {

    .shoot-room-feedback-status {
        align-items: stretch;

        flex-direction: column;
    }


    .shoot-room-feedback-status .btn {
        width: 100%;

        text-align: center;
    }

}
/* =========================================
   COLLAB SCORE V2 CARD
========================================= */

.collab-score-card {
    position: relative;
}


.collab-score-main {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 14px;

    margin-top: 6px;
}


.collab-score-confidence {
    margin-bottom: 9px;

    padding: 5px 8px;

    border:
        1px solid
        rgba(230, 228, 94,.28);

    border-radius: 999px;

    background:
        rgba(230, 228, 94,.08);

    color:
        var(--purple-light);

    font-size: 8px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .4px;
}


.collab-score-breakdown {
    display: grid;

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

    gap: 8px;

    margin-top: 18px;
}


.collab-score-breakdown > div {
    padding: 11px 12px;

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

    border-radius: 8px;

    background:
        rgba(255,255,255,.018);
}


.collab-score-breakdown span {
    display: block;

    margin-bottom: 5px;

    color:
        var(--muted);

    font-size: 7px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .4px;
}


.collab-score-breakdown strong {
    display: block;

    color:
        #fff;

    font-size: 13px;
}


.collab-score-footer {
    margin-top: 10px;

    padding-top: 11px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

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


.collab-score-footer span {
    color:
        var(--muted);

    font-size: 8px;

    font-weight: 800;

    text-transform: uppercase;
}


.collab-score-footer strong {
    color:
        #fff;

    font-size: 12px;
}


@media (max-width: 600px) {

    .collab-score-breakdown {
        grid-template-columns: 1fr;
    }

}
/* =========================================
   PUBLIC PROFILE — COLLAB SCORE
========================================= */

.public-profile-score-number {
    display: block;

    margin: 10px 0 8px;

    font-size: 64px;

    line-height: .95;

    letter-spacing: -2px;
}


.public-score-stats {
    display: grid;

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

    gap: 8px;

    margin-top: 18px;
}


.public-score-stats > div {
    padding: 11px;

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

    border-radius: 8px;

    background:
        rgba(255,255,255,.018);
}


.public-score-stats span {
    display: block;

    margin-bottom: 5px;

    color:
        var(--muted);

    font-size: 7px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .35px;
}


.public-score-stats strong {
    color: #fff;

    font-size: 14px;
}


.public-score-verified {
    margin-top: 12px;

    padding-top: 12px;

    display: flex;

    align-items: center;

    gap: 8px;

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

    color:
        #1fdf7d;
}


.public-score-verified span {
    width: 22px;
    height: 22px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        rgba(31,223,125,.10);

    font-size: 10px;
}


.public-score-verified strong {
    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: .35px;
}


@media (max-width: 700px) {

    .public-score-stats {
        grid-template-columns:
            1fr 1fr;
    }

}
/* =========================================
   CREATIVE DIRECTORY — REPUTATION
========================================= */

.directory-reputation {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-top: 11px;
    margin-bottom: 9px;

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

    letter-spacing: .45px;
    text-transform: uppercase;
}


.directory-reputation-score {
    color: var(--muted);
}


.directory-reputation-score strong {
    color: #fff;
    font-size: 10px;
}


.directory-reputation-divider {
    color: rgba(255,255,255,.25);
}


.directory-reputation-verified {
    color: #1fdf7d;
}


.directory-reputation-new {
    color: var(--muted);
}


.collab-score-new span {
    font-size: 10px;
    letter-spacing: .2px;
}


.collab-score-new small {
    font-size: 6px;
}
/* =========================================
   INVITE TO SHOOT
========================================= */

.invite-page {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding: 70px 0 100px;
}


.invite-hero {
    max-width: 760px;
    margin-bottom: 38px;
}


.invite-hero h1 {
    margin: 14px 0;
    font-size: clamp(48px, 7vw, 82px);
    line-height: .98;
}


.invite-hero > p {
    max-width: 650px;
    color: var(--muted);
    line-height: 1.7;
}


.invite-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}


.invite-person-card,
.invite-form-card {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
}


.invite-person-card {
    padding: 22px;
}


.invite-form-card {
    padding: 28px;
}


.invite-form-card h2 {
    margin: 8px 0;
    font-size: 30px;
}


.invite-form-card > p {
    margin: 0 0 24px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.6;
}


.invite-person {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 18px 0;
}


.invite-person-photo {
    width: 58px;
    height: 58px;
    flex-shrink: 0;

    display: grid;
    place-items: center;

    overflow: hidden;

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

    background: #FFFFFF;

    font-weight: 800;
}


.invite-person-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.invite-person h2 {
    margin: 0 0 4px;
    font-size: 18px;
}


.invite-person p {
    margin: 0;
    color: var(--muted);
    font-size: 10px;
}


@media (max-width: 780px) {

    .invite-page {
        width: min(100% - 28px, 1180px);
        padding-top: 40px;
    }


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


    .invite-person-card {
        order: 2;
    }


    .invite-form-card {
        padding: 20px;
    }

}
/* =========================================
   MY APPLICATIONS — INVITATIONS
========================================= */

.invitation-item {
    border-color:
        rgba(230, 228, 94, .28);
}


.invitation-response-actions {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 14px;
}


.invitation-response-actions form {
    flex: 1;
    margin: 0;
}


.invitation-response-actions .btn {
    width: 100%;
    text-align: center;
}


@media (max-width: 700px) {

    .invitation-response-actions {
        flex-direction: column;
        align-items: stretch;
    }

}
/* =========================================
   NOTIFICATIONS
========================================= */

.notifications-page {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding: 70px 0 100px;
}


.notifications-hero {
    margin-bottom: 32px;
}


.notifications-hero-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}


.notifications-hero h1 {
    margin: 12px 0 10px;
    font-size: clamp(48px, 7vw, 82px);
    line-height: .98;
}


.notifications-hero p {
    margin: 0;
    color: var(--muted);
}


.notifications-content {
    margin-top: 24px;
}


.notifications-list {
    display: grid;
    gap: 12px;
}


.notification-item {
    display: grid;

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

    align-items: center;

    gap: 16px;

    padding: 20px;

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

    border-radius: 12px;

    background:
        var(--surface);
}


.notification-unread {
    border-color:
        rgba(230, 228, 94,.32);

    background:
        linear-gradient(
            90deg,
            rgba(230, 228, 94,.07),
            var(--surface)
        );
}


.notification-avatar {
    width: 54px;
    height: 54px;

    display: grid;
    place-items: center;

    overflow: hidden;

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

    border-radius: 10px;

    background:
        #FFFFFF;

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


.notification-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.notification-main {
    min-width: 0;
}


.notification-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}


.notification-badges {
    display: flex;
    align-items: center;
    gap: 7px;
}


.notification-type-label {
    color: var(--muted);

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

    letter-spacing: .45px;
}


.notification-time {
    flex-shrink: 0;

    color: var(--muted);

    font-size: 9px;
}


.notification-main h2 {
    margin: 8px 0 5px;

    font-size: 17px;
}


.notification-main p {
    margin: 0;

    color: var(--muted);

    font-size: 11px;

    line-height: 1.6;
}


.notification-actor {
    display: block;

    margin-top: 8px;

    color: rgba(255,255,255,.55);

    font-size: 9px;
}


.notification-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}


.notification-actions form {
    margin: 0;
}


.notifications-empty {
    padding: 65px 25px;

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

    border-radius: 14px;

    background:
        var(--surface);

    text-align: center;
}


.notifications-empty-icon {
    margin-bottom: 12px;

    font-size: 28px;
}


.notifications-empty h2 {
    margin: 0 0 8px;
}


.notifications-empty p {
    max-width: 470px;

    margin: 0 auto 20px;

    color: var(--muted);

    line-height: 1.7;
}


@media (max-width: 760px) {

    .notifications-page {
        width: min(100% - 28px, 1180px);
        padding-top: 40px;
    }


    .notifications-hero-row {
        align-items: stretch;
        flex-direction: column;
    }


    .notification-item {
        grid-template-columns:
            46px
            minmax(0, 1fr);
    }


    .notification-avatar {
        width: 46px;
        height: 46px;
    }


    .notification-actions {
        grid-column: 1 / -1;

        width: 100%;

        align-items: stretch;
    }


    .notification-actions .btn,
    .notification-actions form {
        flex: 1;
    }


    .notification-actions form .btn {
        width: 100%;
    }

}

/* =========================================================
   DMVTFP — FINAL MOBILE WIDTH / IOS SAFETY OVERRIDE
========================================================= */

@media screen and (max-width: 700px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body {
        position: relative;
    }

    .mobile-menu {
        right: 0 !important;
        transform: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition:
            opacity .2s ease,
            visibility .2s ease !important;
    }

    .mobile-menu.open {
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .site-header {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .site-header .logo-wrap {
        min-width: 0 !important;
    }

    .site-header .mobile-menu-button {
        margin-left: auto !important;
        flex: 0 0 44px !important;
    }

    main,
    .auth-main,
    .auth-shell,
    .auth-card,
    .member-dashboard,
    .availability-manager-layout,
    .availability-create-card,
    .application-item,
    .invitation-item,
    .completed-collab-item,
    .shoot-room-page,
    .shoot-room-layout,
    .shoot-room-content,
    .shoot-room-main,
    .shoot-room-sidebar {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .auth-main {
        width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .auth-main .auth-shell {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .auth-main .auth-card {
        width: 100% !important;
        overflow: hidden;
    }

    form,
    .dmvtfp-form,
    .form-group,
    .form-row {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea,
    button,
    .btn {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .dmvtfp-form input:not([type="checkbox"]):not([type="radio"]),
    .dmvtfp-form select,
    .dmvtfp-form textarea,
    .dmvtfp-form .form-main-submit {
        width: 100% !important;
    }

    .availability-manager-layout {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .availability-create-card {
        position: static !important;
    }

    .availability-time-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .application-actions,
    .invitation-response-actions,
    .completed-collab-action,
    .notification-actions,
    .shoot-room-feedback-status {
        min-width: 0 !important;
        max-width: 100% !important;
        flex-wrap: wrap !important;
    }

    .application-actions .btn,
    .invitation-response-actions .btn,
    .completed-collab-action .btn,
    .notification-actions .btn,
    .shoot-room-feedback-status .btn,
    .shoot-room-sidebar-feedback .btn {
        width: 100% !important;
        max-width: 100% !important;
    }

    .completed-collab-item {
        grid-template-columns: 48px minmax(0, 1fr) !important;
    }

    .completed-collab-action {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    .dashboard-completed-section .section-heading h2,
    .dashboard-completed-section h2 {
        font-size: clamp(34px, 11vw, 48px) !important;
        line-height: 1 !important;
        overflow-wrap: anywhere;
    }
}
/* =========================================================
   DMVTFP — AUTHORITATIVE MOBILE HEADER FIX
   Keep this as the LAST block in style.css
========================================================= */

@media screen and (max-width: 1000px) {

    .site-header {
        position: sticky !important;
        top: 0 !important;

        width: 100% !important;
        max-width: 100% !important;
        min-height: 70px !important;

        display: block !important;

        padding:
            0 76px
            0 18px !important;

        box-sizing: border-box !important;
    }


    .site-header .logo-wrap {
        height: 70px !important;

        display: flex !important;
        align-items: center !important;

        width: auto !important;
        max-width: calc(100% - 10px) !important;
    }


    .site-header .logo {
        font-size: 24px !important;
    }


    .site-header .desktop-nav {
        display: none !important;
    }


    /*
     * Do not let flex/grid calculations decide
     * where the hamburger sits.
     */
    .site-header .mobile-menu-button {
        position: absolute !important;

        top: 50% !important;
        right: 18px !important;
        left: auto !important;

        transform:
            translateY(-50%) !important;

        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;

        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;

        display: flex !important;

        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 5px !important;

        margin: 0 !important;
        padding: 0 !important;

        border:
            1px solid
            var(--border) !important;

        border-radius: 9px !important;

        background:
            var(--surface) !important;

        box-sizing: border-box !important;

        z-index: 5200 !important;
    }


    .site-header
    .mobile-menu-button span {
        width: 19px !important;
        height: 2px !important;

        min-width: 19px !important;

        display: block !important;

        padding: 0 !important;
        margin: 0 !important;

        background: #fff !important;

        border-radius: 10px !important;
    }


    .mobile-menu-notification-dot {
        position: absolute !important;

        right: 4px !important;
        bottom: 2px !important;
    }


    /*
     * Mobile drawer remains fixed to viewport.
     */
    .mobile-menu {
        position: fixed !important;

        top: 0 !important;
        right: 0 !important;
        left: auto !important;

        width: min(88vw, 390px) !important;
        max-width: 88vw !important;

        height: 100dvh !important;

        transform: none !important;

        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;

        z-index: 4999 !important;
    }


    .mobile-menu.open {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}

/* =========================================================
   DMVTFP — MOBILE UI V2
   Authoritative mobile header, alignment and color polish.
   Keep this at the absolute bottom of style.css.
========================================================= */

@media screen and (max-width: 700px) {

    /* -----------------------------------------------------
       VIEWPORT / PAGE
    ----------------------------------------------------- */

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body {
        padding-top: 70px;
    }

    main {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: visible !important;
    }


    /* -----------------------------------------------------
       FIXED MOBILE HEADER
       Always reachable while scrolling.
    ----------------------------------------------------- */

    .site-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;
        max-width: 100% !important;
        min-height: 70px !important;
        height: 70px !important;

        display: block !important;

        padding:
            0 76px
            0 18px !important;

        background:
            rgba(11, 15, 20, .92) !important;

        backdrop-filter:
            blur(18px) !important;

        -webkit-backdrop-filter:
            blur(18px) !important;

        border-bottom:
            1px solid
            var(--border) !important;

        box-sizing:
            border-box !important;

        z-index: 6000 !important;
    }

    .site-header .desktop-nav {
        display: none !important;
    }

    .site-header .logo-wrap {
        height: 70px !important;

        display: flex !important;
        align-items: center !important;

        width: auto !important;
        max-width: calc(100% - 10px) !important;

        min-width: 0 !important;
    }

    .site-header .logo {
        font-size: 24px !important;
    }

    .site-header .mobile-menu-button {
        position: absolute !important;

        top: 50% !important;
        right: 18px !important;
        left: auto !important;

        transform:
            translateY(-50%) !important;

        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;

        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;

        display: flex !important;

        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 5px !important;

        margin: 0 !important;
        padding: 0 !important;

        border:
            1px solid
            var(--border) !important;

        border-radius: 9px !important;

        background:
            var(--surface) !important;

        box-sizing:
            border-box !important;

        z-index: 6200 !important;
    }

    .site-header
    .mobile-menu-button span {
        width: 19px !important;
        height: 2px !important;

        min-width: 19px !important;

        display: block !important;

        padding: 0 !important;
        margin: 0 !important;

        background: #fff !important;

        border-radius: 10px !important;
    }

    .mobile-menu-notification-dot {
        position: absolute !important;
        right: 4px !important;
        bottom: 2px !important;
    }


    /* -----------------------------------------------------
       MOBILE DRAWER
    ----------------------------------------------------- */

    .mobile-menu {
        position: fixed !important;

        top: 0 !important;
        right: 0 !important;
        left: auto !important;

        width: min(88vw, 390px) !important;
        max-width: 88vw !important;

        height: 100vh !important;
        height: 100dvh !important;

        transform: none !important;

        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;

        z-index: 6100 !important;
    }

    .mobile-menu.open {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .mobile-menu-backdrop {
        position: fixed !important;
        inset: 0 !important;

        z-index: 6050 !important;
    }


    /* -----------------------------------------------------
       STANDARD 20PX MOBILE GUTTER
    ----------------------------------------------------- */

    .member-dashboard,
    .dashboard-upcoming-section,
    .dashboard-completed-section,
    .applications-hero,
    .applications-stats,
    .applications-content,
    .availability-manager-header,
    .availability-manager-layout,
    .notifications-page,
    .feedback-page,
    .shoot-room-hero,
    .shoot-room-layout {
        width:
            calc(100% - 40px) !important;

        max-width:
            none !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;

        padding-left:
            0 !important;

        padding-right:
            0 !important;

        min-width:
            0 !important;
    }


    /* -----------------------------------------------------
       LOGIN / SIGNUP ALIGNMENT
    ----------------------------------------------------- */

    .auth-main {
        width: 100% !important;
        max-width: 100% !important;

        min-height:
            calc(100vh - 70px) !important;

        display: flex !important;
        justify-content: center !important;
        align-items: flex-start !important;

        padding:
            35px 20px
            80px !important;

        margin: 0 !important;
    }

    .auth-main .auth-shell {
        width: 100% !important;
        max-width: 520px !important;

        margin:
            0 auto !important;

        padding: 0 !important;

        display: block !important;

        min-width: 0 !important;
    }

    .auth-main .auth-card {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        min-width: 0 !important;

        box-sizing:
            border-box !important;
    }

    .auth-main .dmvtfp-form,
    .auth-main .form-group,
    .auth-main .form-row,
    .auth-main .auth-bottom {
        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;
    }

    .auth-main
    input:not([type="checkbox"]):not([type="radio"]),
    .auth-main select,
    .auth-main textarea,
    .auth-main button,
    .auth-main .btn {
        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;

        box-sizing:
            border-box !important;
    }


    /* -----------------------------------------------------
       AVAILABILITY — POST A DATE
    ----------------------------------------------------- */

    .availability-manager-header {
        padding-top:
            50px !important;

        padding-bottom:
            32px !important;

        flex-direction:
            column !important;

        align-items:
            flex-start !important;
    }

    .availability-manager-layout {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr) !important;

        gap: 24px !important;
    }

    .availability-create-card {
        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;

        position: static !important;

        margin: 0 !important;

        box-sizing:
            border-box !important;
    }

    .availability-create-card form,
    .availability-create-card .dmvtfp-form,
    .availability-create-card .form-group,
    .availability-create-card .form-row {
        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;
    }

    .availability-time-grid {
        width: 100% !important;

        grid-template-columns:
            minmax(0, 1fr) !important;

        gap: 10px !important;
    }

    .availability-create-card
    input:not([type="checkbox"]):not([type="radio"]),
    .availability-create-card select,
    .availability-create-card textarea,
    .availability-create-card button,
    .availability-create-card .btn {
        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;

        box-sizing:
            border-box !important;
    }


    /* -----------------------------------------------------
       CARD / BUTTON SAFETY
    ----------------------------------------------------- */

    .dashboard-card,
    .dashboard-shoot-item,
    .completed-collab-item,
    .application-item,
    .availability-create-card,
    .availability-manage-item,
    .notification-item,
    .feedback-person-card,
    .shoot-room-card,
    .shoot-room-sidebar-card {
        max-width: 100% !important;
        min-width: 0 !important;

        box-sizing:
            border-box !important;
    }

    form,
    .dmvtfp-form,
    .form-group,
    .form-row {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        max-width: 100% !important;
        min-width: 0 !important;

        box-sizing:
            border-box !important;
    }


    /* -----------------------------------------------------
       COMPLETED COLLAB HEADING
    ----------------------------------------------------- */

    .dashboard-completed-section
    .section-heading h2,
    .dashboard-completed-section h2 {
        font-size:
            clamp(
                34px,
                10vw,
                46px
            ) !important;

        line-height:
            1 !important;

        letter-spacing:
            -2px !important;
    }
}


/* Extra-tight phones */
@media screen and (max-width: 420px) {

    .auth-card,
    .onboarding-card {
        padding:
            26px
            20px !important;
    }
}
/* =========================================================
   DMVTFP — DESKTOP HEADER CONTAINMENT
========================================================= */

@media screen and (min-width: 1001px) {

    .site-header {
        width: 100% !important;
        max-width: 100% !important;

        padding-left:
            clamp(22px, 3vw, 52px) !important;

        padding-right:
            clamp(22px, 3vw, 52px) !important;

        box-sizing:
            border-box !important;

        gap: 30px !important;
    }


    .site-header .logo-wrap {
        flex: 0 0 auto;
    }


    .site-header .desktop-nav {
        flex: 0 1 auto;

        min-width: 0;

        margin-left: auto;

        display: flex;

        align-items: center;

        justify-content: flex-end;

        gap:
            clamp(
                14px,
                1.6vw,
                26px
            );
    }


    .site-header .desktop-nav a {
        flex-shrink: 0;

        white-space: nowrap;
    }


    .site-header
    .header-notification-link {
        min-width: 0;
    }


    .site-header .nav-cta {
        margin-right: 0 !important;
    }
}


/* Compact desktop / large tablet */

@media screen and
(min-width: 1001px) and
(max-width: 1180px) {

    .site-header {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }


    .site-header .desktop-nav {
        gap: 13px !important;

        font-size: 12px !important;
    }


    .site-header .nav-cta {
        padding:
            10px
            13px !important;
    }


    .site-header
    .header-notification-text {
        display: none;
    }
}

/* =========================================================
   DMVTFP — LIGHT SOCIAL THEME V1
   Brand: Black + legacy DMVTFP yellow #E6E45E
   This is the authoritative visual layer.
========================================================= */

html {
    background: var(--bg);
}

body {
    background:
        radial-gradient(
            circle at 75% 8%,
            rgba(230, 228, 94, .13),
            transparent 28%
        ),
        var(--bg);

    color: var(--text);
}


/* ---------------------------------------------------------
   HEADER / NAV
--------------------------------------------------------- */

.site-header {
    background:
        rgba(255, 255, 255, .94) !important;

    border-bottom:
        1px solid var(--border) !important;

    box-shadow:
        0 1px 0 rgba(17,17,17,.03);

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

.logo {
    color:
        var(--brand-black);
}

.logo span,
.nav-active,
.main-nav .nav-active,
.desktop-nav .nav-active {
    color:
        var(--brand-black) !important;
}

.main-nav a,
.desktop-nav a {
    color:
        #242424 !important;
}

.main-nav a:hover,
.desktop-nav a:hover {
    color:
        #000000 !important;
}

.nav-cta {
    background:
        var(--brand-yellow) !important;

    color:
        var(--brand-black) !important;

    border:
        1px solid
        #D2D044 !important;
}

.nav-cta:hover {
    background:
        #DAD84F !important;

    color:
        var(--brand-black) !important;
}

.mobile-menu-button,
.site-header .mobile-menu-button {
    background:
        #FFFFFF !important;

    border:
        1px solid
        #D8D8D1 !important;
}

.mobile-menu-button span,
.site-header .mobile-menu-button span {
    background:
        #111111 !important;
}

.mobile-menu {
    background:
        #FFFFFF !important;

    color:
        #111111 !important;

    border-left:
        1px solid
        var(--border) !important;

    box-shadow:
        -20px 0 55px
        rgba(17,17,17,.10) !important;
}

.mobile-menu a,
.mobile-menu strong {
    color:
        #111111 !important;
}

.mobile-menu a:hover,
.mobile-menu a.nav-active {
    background:
        #F3F3EE !important;
}

.mobile-menu-backdrop {
    background:
        rgba(17,17,17,.30) !important;
}


/* ---------------------------------------------------------
   BRAND ACCENTS
--------------------------------------------------------- */

.eyebrow,
.text-link,
.auth-bottom a,
.directory-card h3 a:hover,
.card-button,
.view-profile-btn,
.directory-empty-icon {
    color:
        #6F6E12 !important;
}

.btn-primary,
.auth-submit,
.form-main-submit,
.create-shoot-button,
.directory-search-btn {
    background:
        var(--brand-yellow) !important;

    color:
        var(--brand-black) !important;

    border:
        1px solid
        #D2D044 !important;

    box-shadow:
        none !important;
}

.btn-primary:hover,
.auth-submit:hover,
.form-main-submit:hover,
.create-shoot-button:hover,
.directory-search-btn:hover {
    background:
        #DAD84F !important;

    color:
        #111111 !important;
}

.btn-secondary,
.card-button,
.view-profile-btn {
    background:
        #FFFFFF !important;

    border:
        1px solid
        #CECEC6 !important;

    color:
        #111111 !important;
}

.btn-secondary:hover,
.card-button:hover,
.view-profile-btn:hover {
    background:
        #F2F2EC !important;

    border-color:
        #BDBDB4 !important;
}


/* ---------------------------------------------------------
   PAGE BACKGROUNDS
--------------------------------------------------------- */

.auth-page,
.directory-page,
.public-profile-page,
.edit-profile-page,
.member-dashboard,
.applications-page,
.notifications-page,
.feedback-page,
.shoot-room-page,
.availability-manager-page {
    background:
        var(--bg) !important;

    color:
        var(--text) !important;
}


/* ---------------------------------------------------------
   CARDS / PANELS
--------------------------------------------------------- */

.auth-card,
.onboarding-card,
.dashboard-card,
.profile-card,
.shoot-card,
.directory-card,
.directory-empty,
.public-profile-score,
.profile-sidebar-card,
.availability-item,
.edit-profile-preview,
.application-item,
.invitation-item,
.notification-item,
.feedback-person-card,
.shoot-room-card,
.shoot-room-sidebar-card,
.availability-create-card,
.availability-manage-item,
.completed-collab-item,
.resources-toc,
.resource-jump,
.resource-step,
.resource-faq details {
    background:
        #FFFFFF !important;

    border-color:
        var(--border) !important;

    color:
        var(--text) !important;

    box-shadow:
        0 8px 28px
        rgba(17,17,17,.035);
}

.directory-card:hover {
    border-color:
        #C9C73E !important;

    box-shadow:
        0 16px 38px
        rgba(17,17,17,.08) !important;
}


/* ---------------------------------------------------------
   FILTER BARS / SECONDARY SURFACES
--------------------------------------------------------- */

.directory-filter-wrap {
    background:
        rgba(255,255,255,.92) !important;

    border-color:
        var(--border) !important;
}

.role-strip a,
.role-tags span,
.instagram-btn {
    background:
        var(--surface-2) !important;

    border-color:
        var(--border) !important;

    color:
        #333333 !important;
}


/* ---------------------------------------------------------
   FORMS
--------------------------------------------------------- */

.form-group label,
.dmvtfp-form label,
.directory-filter label {
    color:
        #333333 !important;
}

.form-group input,
.form-group select,
.form-group textarea,
.dmvtfp-form input,
.dmvtfp-form select,
.dmvtfp-form textarea,
.directory-filter select,
.directory-filter input,
.resources-search {
    background:
        #FFFFFF !important;

    border:
        1px solid
        #D4D4CC !important;

    color:
        #111111 !important;

    box-shadow:
        none !important;
}

.form-group input::placeholder,
.form-group textarea::placeholder,
.dmvtfp-form input::placeholder,
.dmvtfp-form textarea::placeholder,
.directory-filter input::placeholder,
.resources-search::placeholder {
    color:
        #98988F !important;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.dmvtfp-form input:focus,
.dmvtfp-form select:focus,
.dmvtfp-form textarea:focus,
.directory-filter select:focus,
.directory-filter input:focus,
.resources-search:focus {
    border-color:
        #B8B62C !important;

    box-shadow:
        0 0 0 3px
        rgba(230,228,94,.25) !important;
}


/* ---------------------------------------------------------
   TYPOGRAPHY
--------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6,
strong {
    color:
        var(--text);
}

p,
.directory-role,
.directory-results-header p,
.public-profile-role,
.profile-detail-row span,
.dashboard-card p,
.resource-step p,
.resource-jump p,
.resource-faq p {
    color:
        var(--muted);
}

.directory-location,
.public-profile-bio {
    color:
        #444444 !important;
}


/* ---------------------------------------------------------
   DIRECTORY / HOMEPAGE
--------------------------------------------------------- */

.directory-count strong {
    color:
        #111111 !important;
}

.directory-photo {
    background:
        #EDEDE7 !important;
}

.directory-photo-placeholder {
    background:
        linear-gradient(
            145deg,
            #F0F0EA,
            #DEDED6
        ) !important;
}

.directory-photo-placeholder span {
    background:
        rgba(255,255,255,.72) !important;

    border:
        1px solid
        rgba(17,17,17,.10) !important;

    color:
        #111111 !important;
}

.verified-badge {
    background:
        rgba(255,255,255,.92) !important;

    color:
        #111111 !important;

    border:
        1px solid
        rgba(17,17,17,.16) !important;
}

.available-badge {
    background:
        rgba(255,255,255,.94) !important;

    color:
        #111111 !important;

    border:
        1px solid
        rgba(17,17,17,.12) !important;
}

.directory-tags span,
.public-profile-tags span {
    background:
        rgba(230,228,94,.34) !important;

    color:
        #4F4E0B !important;
}

.directory-tags .paid-tag,
.public-profile-tags .paid-tag,
.badge.paid {
    background:
        #FFF3D5 !important;

    color:
        #7B5700 !important;
}


/* ---------------------------------------------------------
   COLLAB SCORE / STATUS COLORS
--------------------------------------------------------- */

.score,
.score-circle,
.collab-score-mini,
.public-profile-score > strong,
.collab-score-mini span {
    color:
        var(--green);
}

.collab-score-mini {
    border-color:
        rgba(23,138,74,.40) !important;
}

.badge.green,
.status,
.availability-item span,
.directory-reputation-verified {
    color:
        var(--green) !important;
}

.badge.green {
    background:
        rgba(23,138,74,.10) !important;
}

.badge.purple {
    background:
        var(--brand-yellow) !important;

    color:
        #111111 !important;
}


/* ---------------------------------------------------------
   AUTH
--------------------------------------------------------- */

.auth-page {
    background:
        linear-gradient(
            180deg,
            #FFFFFF 0%,
            #F7F7F4 100%
        ) !important;
}

.auth-card,
.onboarding-card {
    box-shadow:
        0 18px 60px
        rgba(17,17,17,.07) !important;
}


/* ---------------------------------------------------------
   PROFILE
--------------------------------------------------------- */

.public-profile-photo,
.public-portfolio-item {
    background:
        #ECECE6 !important;

    border-color:
        var(--border) !important;
}

.public-profile-placeholder {
    background:
        linear-gradient(
            145deg,
            #ECECE6,
            #DCDCD4
        ) !important;
}

.public-profile-placeholder span {
    background:
        rgba(255,255,255,.72) !important;

    border:
        1px solid
        rgba(17,17,17,.10) !important;

    color:
        #111111 !important;
}

.profile-verified {
    background:
        rgba(230,228,94,.40) !important;

    border-color:
        #D1CF43 !important;

    color:
        #111111 !important;
}

.profile-empty-state {
    background:
        #FFFFFF !important;

    border-color:
        #D4D4CC !important;
}


/* ---------------------------------------------------------
   NOTIFICATIONS
--------------------------------------------------------- */

.notification-item {
    background:
        #FFFFFF !important;
}

.notification-item.is-unread,
.notification-item.unread {
    background:
        #FFFEE8 !important;

    border-color:
        #D7D54A !important;
}

.notification-badge,
.notification-new-badge {
    background:
        var(--brand-yellow) !important;

    color:
        #111111 !important;
}


/* ---------------------------------------------------------
   FOOTER
--------------------------------------------------------- */

footer {
    background:
        #FFFFFF;

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

    color:
        var(--muted);
}

footer .logo {
    color:
        #111111;
}


/* ---------------------------------------------------------
   MOBILE LIGHT HEADER
--------------------------------------------------------- */

@media screen and (max-width: 700px) {

    body {
        background:
            var(--bg);
    }

    .site-header {
        background:
            rgba(255,255,255,.96) !important;
    }

    .mobile-menu {
        background:
            #FFFFFF !important;
    }
}
/* =========================================
   DELETE ACCOUNT
========================================= */

.account-danger-section {
    margin-top: 34px;
    padding-top: 34px;
    border-top: 1px solid #deded8;
}

.account-danger-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    margin-top: 18px;
}

.account-danger-copy {
    max-width: 560px;
}

.account-danger-copy h3 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    color: #111;
}

.account-danger-copy p {
    margin: 0;
    color: #666;
    font-size: 14px;
    line-height: 1.6;
}

.delete-account-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    min-height: 48px;
    padding: 0 20px;

    border: 1px solid #b42318;
    border-radius: 10px;

    color: #b42318;
    background: transparent;

    font-size: 14px;
    font-weight: 700;
    text-decoration: none;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.delete-account-link:hover {
    background: #b42318;
    color: #fff;
}

@media (max-width: 700px) {

    .account-danger-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .delete-account-link {
        width: 100%;
    }
}