/* ==============================================================
   KONVICTED CUTIES
   Global Site Theme
   Black / Pink / White
============================================================== */


/* ==============================================================
   DESIGN SYSTEM
============================================================== */

:root {

    --primary:#fc5185;
    --primary-hover:#ff6d9a;
    --primary-dark:#d93468;

    --pink:#fc5185;
    --pink-bright:#ff73a1;
    --pink-soft:#ffb5cc;
    --pink-pale:#ffe4ed;

    --black:#050505;
    --black-soft:#090909;
    --surface:#101010;
    --surface-2:#161616;
    --surface-3:#1d1d1d;

    --white:#ffffff;
    --text:#f7f7f7;
    --muted:#aaaab2;

    --border:#303036;
    --border-light:#424249;

    --danger:#ff5d68;
    --success:#53d88b;
    --warning:#f3c969;

    --shadow:
        0 18px 45px rgba(0,0,0,.42);

    --pink-shadow:
        0 0 26px rgba(252,81,133,.17);

    --max:1200px;

    --radius-small:7px;
    --radius:12px;
    --radius-large:18px;

    --header-height:76px;
}


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

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

html {
    scroll-behavior:smooth;
}

body {

    min-height:100vh;

    display:flex;
    flex-direction:column;

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

    color:var(--text);

    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(252,81,133,.08),
            transparent 25%
        ),
        var(--black);

    line-height:1.6;
}

img {
    max-width:100%;
}

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

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

button {
    cursor:pointer;
}

.container {

    width:min(
        var(--max),
        92%
    );

    margin:auto;
}


/* ==============================================================
   TYPOGRAPHY
============================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {

    font-family:
        Outfit,
        Inter,
        Arial,
        sans-serif;

    color:var(--white);

    line-height:1.15;
}

h1 {

    font-size:
        clamp(
            2rem,
            5vw,
            3.5rem
        );

    margin-bottom:20px;
}

h2 {

    font-size:
        clamp(
            1.7rem,
            4vw,
            2.6rem
        );
}

h3 {
    font-size:1.35rem;
}

p {
    margin-bottom:1rem;
}

strong {
    color:var(--white);
}

::selection {
    background:var(--pink);
    color:var(--white);
}


/* ==============================================================
   UNIVERSAL SHARED HEADER
   Used by lib.php
============================================================== */

.site-header {

    position:sticky;
    top:0;
    z-index:1000;

    width:100%;

    background:
        rgba(5,5,5,.94);

    border-bottom:
        1px solid
        rgba(252,81,133,.22);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);
}

.header-inner {

    width:min(
        var(--max),
        92%
    );

    min-height:
        var(--header-height);

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:
        space-between;

    gap:30px;
}


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

.site-logo {

    display:inline-flex;

    align-items:center;

    gap:7px;

    flex-shrink:0;

    font-family:
        Outfit,
        sans-serif;

    font-size:25px;

    font-weight:800;

    letter-spacing:-.6px;

    line-height:1;
}

.logo-konvicted {
    color:var(--white);
}

.logo-cuties {
    color:var(--pink);
}

.site-logo:hover
.logo-cuties {

    text-shadow:
        0 0 16px
        rgba(252,81,133,.75);
}


/* ==============================================================
   MAIN NAVIGATION
============================================================== */

.site-navigation {

    display:flex;

    align-items:center;

    gap:5px;
}

.site-navigation a {

    position:relative;

    display:flex;

    align-items:center;

    min-height:42px;

    padding:
        9px 13px;

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

    color:#d8d8dc;

    font-size:14px;

    font-weight:600;

    transition:
        color .2s ease,
        background .2s ease;
}

.site-navigation a:hover {

    color:var(--white);

    background:
        rgba(252,81,133,.09);
}

.site-navigation a.active {

    color:var(--pink);

    background:
        rgba(252,81,133,.11);
}

.site-navigation a.active::after {

    content:"";

    position:absolute;

    left:14px;
    right:14px;
    bottom:3px;

    height:2px;

    border-radius:10px;

    background:var(--pink);

    box-shadow:
        0 0 9px
        rgba(252,81,133,.65);
}

.site-navigation
.nav-logout {

    margin-left:5px;

    border:
        1px solid
        rgba(252,81,133,.45);

    color:var(--pink);
}

.site-navigation
.nav-logout:hover {

    background:var(--pink);

    color:var(--white);
}


/* ==============================================================
   MOBILE MENU
============================================================== */

.mobile-menu-button {

    display:none;

    width:44px;
    height:44px;

    padding:0;

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

    border-radius:9px;

    background:
        var(--surface-2);
}

.mobile-menu-button span {

    display:block;

    width:21px;
    height:2px;

    margin:4px auto;

    border-radius:5px;

    background:
        var(--white);
}


/* ==============================================================
   UNIVERSAL PAGE AREA
============================================================== */

.site-main {

    width:min(
        var(--max),
        92%
    );

    flex:1;

    margin:
        0 auto;

    padding:
        48px 0 80px;
}


/* ==============================================================
   CARDS / PANELS
============================================================== */

.card,
.info-box,
.form-wrap {

    background:
        linear-gradient(
            145deg,
            var(--surface-2),
            var(--surface)
        );

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

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

    color:var(--text);

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

.card {

    padding:28px;

    margin-bottom:20px;

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

.card:hover {

    border-color:
        rgba(252,81,133,.42);

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

.card h2,
.card h3 {

    color:var(--white);
}


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

button,
.btn {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:46px;

    padding:
        11px 22px;

    border:
        1px solid
        transparent;

    border-radius:
        9px;

    background:
        var(--pink);

    color:
        var(--white);

    font-family:
        Inter,
        sans-serif;

    font-weight:700;

    text-decoration:none;

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

button:hover,
.btn:hover {

    background:
        var(--primary-hover);

    box-shadow:
        0 8px 24px
        rgba(252,81,133,.2);

    transform:
        translateY(-1px);
}

button:active,
.btn:active {

    transform:
        translateY(0);
}

.btn-primary {

    background:
        var(--pink);

    color:
        var(--white);
}

.btn-primary:hover {

    background:
        var(--primary-hover);
}

.btn-outline {

    border-color:
        var(--pink);

    background:
        transparent;

    color:
        var(--pink);
}

.btn-outline:hover {

    background:
        var(--pink);

    color:
        var(--white);
}

.btn-dark {

    background:
        var(--surface-3);

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

    color:
        var(--white);
}

.btn-danger,
.withdraw-button {

    background:
        #b62e45;

    color:#fff;
}

.btn-danger:hover,
.withdraw-button:hover {

    background:
        #d33b55;
}


/* ==============================================================
   FORMS
============================================================== */

.form-wrap {

    max-width:760px;

    margin:auto;

    padding:32px;
}

.form-grid {

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:18px;
}

.field.full {

    grid-column:
        1 / -1;
}

label {

    display:block;

    margin-bottom:6px;

    color:#eeeeef;

    font-size:14px;

    font-weight:600;
}

input,
select,
textarea {

    width:100%;

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

    border-radius:
        8px;

    padding:
        12px 13px;

    outline:none;

    background:
        #0b0b0c;

    color:
        var(--white);

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

input::placeholder,
textarea::placeholder {

    color:#73737b;
}

select {

    color:
        var(--white);
}

select option {

    background:
        #111;

    color:
        #fff;
}

textarea {

    min-height:130px;

    resize:vertical;
}

input:focus,
select:focus,
textarea:focus {

    border-color:
        var(--pink);

    background:
        #0e0e0f;

    box-shadow:
        0 0 0 3px
        rgba(252,81,133,.13);
}

input[readonly] {

    background:
        #18181a;

    color:
        #9d9da4;
}

input[type="checkbox"],
input[type="radio"] {

    width:auto;

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

input[type="file"] {

    background:
        var(--surface-2);
}


/* ==============================================================
   FIELDSETS
============================================================== */

fieldset {

    margin-bottom:24px;

    padding:22px;

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

    border-radius:
        var(--radius);

    background:
        var(--surface);
}

legend {

    padding:
        0 10px;

    color:
        var(--pink);

    font-family:
        Outfit,
        sans-serif;

    font-size:
        1.1rem;

    font-weight:
        700;
}


/* ==============================================================
   ALERTS
============================================================== */

.notice {

    padding:16px;

    margin-bottom:22px;

    border:
        1px solid
        rgba(252,81,133,.28);

    border-radius:
        var(--radius);

    background:
        rgba(252,81,133,.08);

    color:
        #ffd5e2;
}

.err,
.error-box {

    padding:
        14px 16px;

    margin-bottom:
        18px;

    border:
        1px solid
        rgba(255,93,104,.5);

    border-radius:
        var(--radius);

    background:
        rgba(255,93,104,.09);

    color:
        #ffd2d5;
}

.ok,
.success-box {

    padding:
        14px 16px;

    margin-bottom:
        18px;

    border:
        1px solid
        rgba(83,216,139,.4);

    border-radius:
        var(--radius);

    background:
        rgba(83,216,139,.08);

    color:
        #c6f5da;
}

.small,
.help,
.privacy-help {

    color:
        var(--muted);

    font-size:
        .9rem;
}


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

.hero {

    position:relative;

    min-height:620px;

    display:flex;

    align-items:center;

    padding:
        100px 0;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 82% 25%,
            rgba(252,81,133,.18),
            transparent 30%
        ),
        radial-gradient(
            circle at 15% 80%,
            rgba(252,81,133,.06),
            transparent 30%
        ),
        #050505;
}

.hero::after {

    content:"";

    position:absolute;

    width:430px;
    height:430px;

    right:-150px;
    top:80px;

    border-radius:50%;

    background:
        rgba(252,81,133,.06);

    filter:
        blur(30px);

    pointer-events:none;
}

.hero-content {

    position:relative;

    z-index:2;

    max-width:820px;
}

.badge {

    display:inline-block;

    padding:
        7px 14px;

    margin-bottom:
        20px;

    border:
        1px solid
        rgba(252,81,133,.3);

    border-radius:
        50px;

    background:
        rgba(252,81,133,.1);

    color:
        var(--pink);

    font-size:
        13px;

    font-weight:
        700;
}

.hero h1 {

    margin-bottom:
        24px;

    color:
        var(--white);

    font-size:
        clamp(
            45px,
            7vw,
            78px
        );

    line-height:
        1.02;

    letter-spacing:
        -2px;
}

.hero h1 span {

    color:
        var(--pink);

    text-shadow:
        0 0 25px
        rgba(252,81,133,.22);
}

.hero p {

    max-width:
        690px;

    margin-bottom:
        30px;

    color:
        #b9b9c0;

    font-size:
        19px;
}

.buttons {

    display:flex;

    flex-wrap:wrap;

    gap:12px;
}


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

.section {

    padding:
        80px 0;
}

.section.gray {

    background:
        #0b0b0c;
}

.heading {

    max-width:
        760px;

    margin:
        0 auto 42px;

    text-align:center;
}

.heading h2 {

    margin-bottom:
        12px;

    color:
        var(--white);

    font-size:
        clamp(
            32px,
            5vw,
            48px
        );
}

.heading h2 span {

    color:
        var(--pink);
}

.heading p {

    color:
        var(--muted);
}


/* ==============================================================
   FEATURE CARDS
============================================================== */

.cards {

    display:grid;

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

    gap:24px;
}

.card-icon {

    width:56px;
    height:56px;

    display:grid;

    place-items:center;

    margin-bottom:
        18px;

    border:
        1px solid
        rgba(252,81,133,.25);

    border-radius:
        12px;

    background:
        rgba(252,81,133,.08);

    color:
        var(--pink);

    font-size:
        25px;
}

.card p {

    color:
        var(--muted);
}


/* ==============================================================
   SEARCH
============================================================== */

.searchbar {

    display:flex;

    gap:8px;

    padding:8px;

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

    border-radius:
        12px;

    background:
        var(--surface);

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

.searchbar input {

    border:0;

    box-shadow:none;
}

.searchbar button {

    padding:
        0 24px;
}

.filters {

    display:grid;

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

    gap:12px;

    margin:
        20px 0 30px;
}


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

.profile-grid {

    display:grid;

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

    gap:22px;
}

.profile-card {

    overflow:hidden;

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

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

    background:
        var(--surface);

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.25);

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

.profile-card:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(252,81,133,.55);

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

.profile-photo {

    height:270px;

    display:grid;

    place-items:center;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #1b1b1d,
            #2b111b
        );

    color:
        var(--pink);

    font-size:
        50px;
}

.profile-photo img {

    width:100%;
    height:100%;

    object-fit:cover;
}

.profile-body {

    padding:20px;
}

.profile-body h3 {

    color:
        var(--white);

    font-size:
        23px;
}

.meta {

    margin:
        4px 0 12px;

    color:
        var(--pink-soft);

    font-size:
        14px;
}

.profile-body p {

    margin-bottom:
        15px;

    color:
        var(--muted);

    font-size:
        14px;
}


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

.profile-header {

    margin:
        -48px calc(50% - 50vw) 45px;

    padding:
        75px max(
            4%,
            calc((100vw - var(--max)) / 2)
        );

    background:
        radial-gradient(
            circle at 85% 30%,
            rgba(252,81,133,.28),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #090909,
            #17070d
        );

    border-bottom:
        1px solid
        rgba(252,81,133,.28);
}

.profile-layout {

    display:grid;

    grid-template-columns:
        330px 1fr;

    gap:
        35px;

    align-items:
        start;
}

.profile-main-photo {

    height:
        390px;

    display:grid;

    place-items:center;

    overflow:hidden;

    border:
        2px solid
        rgba(252,81,133,.6);

    border-radius:
        16px;

    background:
        linear-gradient(
            135deg,
            #161616,
            #32101c
        );

    color:
        var(--pink);

    font-size:
        70px;

    box-shadow:
        0 0 30px
        rgba(252,81,133,.16);
}

.profile-main-photo img {

    width:100%;
    height:100%;

    object-fit:cover;
}

.info-box {

    padding:
        25px;

    margin-bottom:
        20px;
}

.info-box h3 {

    margin-bottom:
        12px;

    color:
        var(--pink);

    font-size:
        24px;
}


/* ==============================================================
   TABLES
============================================================== */

table {

    width:100%;

    border-collapse:
        collapse;

    margin:
        20px 0;

    background:
        var(--surface);
}

th,
td {

    padding:
        12px 14px;

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

    text-align:left;
}

th {

    background:
        var(--surface-2);

    color:
        var(--pink);

    font-weight:
        700;
}

td {

    color:
        #d7d7db;
}

tr:hover td {

    background:
        rgba(252,81,133,.035);
}


/* ==============================================================
   LEGAL PAGES
============================================================== */

.legal {

    max-width:
        850px;

    margin:auto;
}

.legal h2 {

    margin:
        35px 0 10px;

    color:
        var(--pink);

    font-size:
        38px;
}

.legal h2:first-child {

    margin-top:0;
}

.legal h3 {

    margin:
        25px 0 8px;

    color:
        var(--white);

    font-size:
        23px;
}

.legal p,
.legal li {

    margin-bottom:
        12px;

    color:
        #b8b8be;
}

.legal ul {

    padding-left:
        22px;
}


/* ==============================================================
   CTA
============================================================== */

.cta {

    padding:
        75px 0;

    border-top:
        1px solid
        rgba(252,81,133,.18);

    border-bottom:
        1px solid
        rgba(252,81,133,.18);

    background:
        radial-gradient(
            circle at center,
            rgba(252,81,133,.18),
            transparent 60%
        ),
        #090909;

    color:
        var(--white);

    text-align:
        center;
}

.cta h2 {

    margin-bottom:
        12px;

    font-size:
        45px;
}

.cta p {

    max-width:
        650px;

    margin:
        0 auto 25px;

    color:
        rgba(255,255,255,.7);
}


/* ==============================================================
   PRIVACY / CONSENT
============================================================== */

.privacy-shell {

    max-width:
        850px;

    margin:auto;
}

.privacy-card {

    margin-bottom:
        22px;

    padding:
        24px;

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

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

    background:
        var(--surface);

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

.status-grid {

    display:grid;

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

    gap:12px;

    margin-top:
        18px;
}

.status-item {

    padding:
        14px;

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

    border-radius:
        9px;

    background:
        var(--surface-2);
}

.status-label {

    display:block;

    margin-bottom:
        4px;

    color:
        var(--muted);

    font-size:
        .8rem;

    font-weight:
        600;
}

.status-value {

    color:
        var(--white);

    font-weight:
        700;
}

.status-good {

    color:
        var(--success);
}

.status-private {

    color:
        var(--warning);
}

.consent-notice {

    margin:
        18px 0;

    padding:
        18px;

    border:
        1px solid
        rgba(252,81,133,.3);

    border-radius:
        10px;

    background:
        rgba(252,81,133,.055);
}

.consent-notice ul {

    margin:
        12px 0 12px 22px;
}

.consent-confirm {

    display:grid;

    grid-template-columns:
        auto 1fr;

    gap:11px;

    align-items:start;

    margin:
        18px 0;

    padding:
        15px;

    border:
        1px solid
        rgba(243,201,105,.4);

    border-radius:
        9px;

    background:
        rgba(243,201,105,.06);
}


/* ==============================================================
   OLD HEADER COMPATIBILITY
   Existing HTML pages can continue using these classes.
============================================================== */

header:not(.site-header) {

    position:sticky;

    top:0;

    z-index:1000;

    background:
        rgba(5,5,5,.95);

    border-bottom:
        1px solid
        rgba(252,81,133,.22);

    backdrop-filter:
        blur(18px);
}

.nav {

    min-height:
        var(--header-height);

    display:flex;

    align-items:center;

    justify-content:
        space-between;

    gap:20px;
}

.logo {

    font-family:
        Outfit,
        sans-serif;

    font-weight:
        800;

    font-size:
        27px;

    color:
        var(--white);
}

.logo span {

    color:
        var(--pink);
}

.navlinks {

    display:flex;

    align-items:center;

    gap:4px;

    list-style:none;
}

.navlinks a {

    display:block;

    padding:
        10px 12px;

    border-radius:
        7px;

    color:
        #d8d8dc;

    font-size:
        14px;

    font-weight:
        600;
}

.navlinks a:hover {

    background:
        rgba(252,81,133,.09);

    color:
        var(--pink);
}

.navlinks .active,
.navlinks .signup {

    background:
        rgba(252,81,133,.12);

    color:
        var(--pink);
}

.menu {

    display:none;

    width:44px;
    height:44px;

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

    border-radius:
        8px;

    background:
        var(--surface-2);
}

.menu span {

    display:block;

    width:21px;
    height:2px;

    margin:
        4px auto;

    background:
        var(--white);
}


/* ==============================================================
   UNIVERSAL SHARED FOOTER
============================================================== */

.site-footer {

    margin-top:auto;

    border-top:
        1px solid
        rgba(252,81,133,.2);

    background:
        #080808;

    color:
        #a6a6ad;
}

.footer-inner {

    width:min(
        var(--max),
        92%
    );

    margin:auto;

    display:grid;

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

    gap:
        40px;

    padding:
        55px 0 38px;
}

.footer-brand {

    max-width:
        360px;
}

.footer-logo {

    margin-bottom:
        15px;
}

.footer-brand p {

    max-width:
        330px;

    color:
        #888891;

    font-size:
        14px;
}

.footer-column h3 {

    margin-bottom:
        15px;

    color:
        var(--white);

    font-size:
        15px;

    text-transform:
        uppercase;

    letter-spacing:
        .8px;
}

.footer-column a {

    display:block;

    width:
        fit-content;

    margin-bottom:
        9px;

    color:
        #9b9ba3;

    font-size:
        14px;

    transition:
        color .18s ease;
}

.footer-column a:hover {

    color:
        var(--pink);
}

.footer-bottom {

    width:min(
        var(--max),
        92%
    );

    margin:auto;

    display:flex;

    justify-content:
        space-between;

    gap:20px;

    padding:
        20px 0 25px;

    border-top:
        1px solid
        #202023;

    color:
        #696970;

    font-size:
        12px;
}

.footer-tagline {

    color:
        #8a8a91;
}


/* ==============================================================
   OLD FOOTER COMPATIBILITY
============================================================== */

footer:not(.site-footer) {

    background:
        #080808;

    color:
        rgba(255,255,255,.65);

    padding:
        50px 0 22px;

    border-top:
        1px solid
        rgba(252,81,133,.2);
}

.footer-grid {

    display:grid;

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

    gap:
        35px;

    padding-bottom:
        35px;

    border-bottom:
        1px solid
        rgba(255,255,255,.1);
}

.footer-logo {

    font-family:
        Outfit,
        sans-serif;

    font-weight:
        800;

    font-size:
        25px;

    color:
        #fff;
}

.footer-logo span {

    color:
        var(--pink);
}

.footer-col h4 {

    margin-bottom:
        12px;

    color:
        #fff;
}

.footer-col a {

    display:block;

    margin-bottom:
        8px;

    color:
        #96969e;

    font-size:
        14px;
}

.footer-col a:hover {

    color:
        var(--pink);
}


/* ==============================================================
   SCROLLBAR
============================================================== */

::-webkit-scrollbar {

    width:11px;
}

::-webkit-scrollbar-track {

    background:
        #080808;
}

::-webkit-scrollbar-thumb {

    border:
        3px solid
        #080808;

    border-radius:
        20px;

    background:
        #333337;
}

::-webkit-scrollbar-thumb:hover {

    background:
        var(--pink);
}

/* ==============================================================
   SIGN UP PAGE
============================================================== */

.signup-hero {

    margin:
        -48px calc(50% - 50vw) 0;

    min-height:560px;

    display:flex;

    align-items:center;

    padding:
        80px max(
            4%,
            calc((100vw - var(--max)) / 2)
        );

    border-bottom:
        1px solid
        rgba(252,81,133,.18);

    background:
        radial-gradient(
            circle at 78% 35%,
            rgba(252,81,133,.2),
            transparent 27%
        ),
        linear-gradient(
            135deg,
            #050505,
            #10070a
        );
}

.signup-hero-inner {

    width:100%;

    display:grid;

    grid-template-columns:
        minmax(0,1.3fr)
        minmax(300px,.7fr);

    gap:70px;

    align-items:center;
}

.signup-hero-copy {

    max-width:720px;
}

.signup-hero h1 {

    font-size:
        clamp(
            46px,
            6vw,
            72px
        );

    letter-spacing:-2px;
}

.signup-hero h1 span {

    color:var(--pink);
}

.signup-lead {

    max-width:680px;

    color:#b7b7be;

    font-size:18px;
}

.signup-actions {

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:28px;
}


/* --------------------------------------------------------------
   Hero artwork
-------------------------------------------------------------- */

.signup-hero-art {

    position:relative;

    min-height:330px;

    display:grid;

    place-items:center;
}

.signup-art-card {

    position:relative;

    z-index:3;

    width:260px;
    min-height:310px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    padding:30px;

    border:
        1px solid
        rgba(252,81,133,.55);

    border-radius:28px;

    background:
        linear-gradient(
            145deg,
            #1b1014,
            #0c0c0d
        );

    box-shadow:
        0 25px 60px
        rgba(0,0,0,.55),
        0 0 40px
        rgba(252,81,133,.12);

    transform:
        rotate(3deg);

    text-align:center;
}

.signup-art-heart {

    margin-bottom:18px;

    color:var(--pink);

    font-size:75px;

    line-height:1;

    text-shadow:
        0 0 30px
        rgba(252,81,133,.4);
}

.signup-art-card strong {

    font-family:
        Outfit,
        sans-serif;

    font-size:29px;
}

.signup-art-card > span {

    color:var(--pink);

    font-family:
        Outfit,
        sans-serif;

    font-size:25px;

    font-weight:700;
}

.signup-art-card small {

    margin-top:7px;

    color:var(--muted);

    font-size:14px;
}

.signup-art-circle {

    position:absolute;

    border-radius:50%;

    border:
        1px solid
        rgba(252,81,133,.2);
}

.signup-art-circle-one {

    width:330px;
    height:330px;
}

.signup-art-circle-two {

    width:260px;
    height:260px;

    box-shadow:
        0 0 70px
        rgba(252,81,133,.1);
}


/* ==============================================================
   MEMBERSHIP STEPS
============================================================== */

.signup-process-section {

    margin-left:
        calc(50% - 50vw);

    margin-right:
        calc(50% - 50vw);

    padding-left:
        max(
            4%,
            calc((100vw - var(--max)) / 2)
        );

    padding-right:
        max(
            4%,
            calc((100vw - var(--max)) / 2)
        );
}

.signup-steps {

    display:grid;

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

    gap:16px;

    align-items:center;

    margin-top:45px;
}

.signup-step {

    min-height:260px;

    padding:25px;

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

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

    background:
        var(--surface);

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

.signup-step:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(252,81,133,.5);
}

.signup-step-number {

    margin-bottom:30px;

    color:
        var(--pink);

    font-family:
        Outfit,
        sans-serif;

    font-size:36px;

    font-weight:800;

    line-height:1;
}

.signup-step h3 {

    margin-bottom:10px;
}

.signup-step p {

    margin:0;

    color:var(--muted);

    font-size:14px;
}

.signup-step-arrow {

    color:
        rgba(252,81,133,.6);

    font-size:25px;
}


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

.signup-features-section {

    margin-left:
        calc(50% - 50vw);

    margin-right:
        calc(50% - 50vw);

    padding-left:
        max(
            4%,
            calc((100vw - var(--max)) / 2)
        );

    padding-right:
        max(
            4%,
            calc((100vw - var(--max)) / 2)
        );

    border-top:
        1px solid
        #18181a;

    border-bottom:
        1px solid
        #18181a;

    background:#090909;
}

.signup-feature-card {

    min-height:250px;
}


/* ==============================================================
   PRIVACY SECTION
============================================================== */

.signup-privacy-section {

    padding:85px 0;
}

.signup-privacy-box {

    display:grid;

    grid-template-columns:
        150px 1fr;

    gap:35px;

    align-items:center;

    padding:45px;

    border:
        1px solid
        rgba(252,81,133,.32);

    border-radius:22px;

    background:
        linear-gradient(
            135deg,
            #111112,
            #160a0e
        );

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

.signup-privacy-icon {

    width:120px;
    height:120px;

    display:grid;

    place-items:center;

    border:
        1px solid
        rgba(252,81,133,.35);

    border-radius:50%;

    background:
        rgba(252,81,133,.08);

    color:var(--pink);

    font-size:55px;
}

.signup-privacy-content {

    max-width:750px;
}

.signup-privacy-content h2 {

    margin-bottom:15px;
}

.signup-privacy-content p {

    color:var(--muted);
}

.signup-text-link {

    display:inline-block;

    margin-top:5px;

    color:var(--pink);

    font-weight:700;
}

.signup-text-link:hover {

    color:var(--pink-bright);
}


/* ==============================================================
   READY / CHECKLIST
============================================================== */

.signup-ready-grid {

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:60px;

    align-items:center;
}

.signup-ready-copy h2 {

    margin-bottom:18px;

    font-size:
        clamp(
            34px,
            5vw,
            52px
        );
}

.signup-ready-copy h2 span {

    color:var(--pink);
}

.signup-ready-copy p {

    color:var(--muted);
}

.signup-checklist {

    padding:30px;

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

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

    background:
        var(--surface);

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

.signup-checklist h3 {

    margin-bottom:20px;
}

.signup-check-item {

    display:grid;

    grid-template-columns:
        30px 1fr;

    gap:12px;

    align-items:center;

    padding:12px 0;

    border-bottom:
        1px solid
        #252528;
}

.signup-check-item:last-child {

    border-bottom:0;
}

.signup-check-item span {

    width:25px;
    height:25px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:
        rgba(252,81,133,.12);

    color:var(--pink);

    font-weight:800;
}

.signup-check-item p {

    margin:0;

    color:#d2d2d6;

    font-size:14px;
}


/* ==============================================================
   FINAL CTA
============================================================== */

.signup-final-cta {

    margin:
        30px calc(50% - 50vw) -80px;

    padding:
        90px max(
            4%,
            calc((100vw - var(--max)) / 2)
        );

    border-top:
        1px solid
        rgba(252,81,133,.2);

    background:
        radial-gradient(
            circle at center,
            rgba(252,81,133,.18),
            transparent 45%
        ),
        #070707;

    text-align:center;
}

.signup-final-inner {

    max-width:700px;

    margin:auto;
}

.signup-final-inner h2 {

    margin-bottom:15px;

    font-size:
        clamp(
            38px,
            6vw,
            58px
        );
}

.signup-final-inner > p {

    max-width:600px;

    margin:
        0 auto 26px;

    color:var(--muted);
}

.signup-start-button {

    min-width:240px;
}

.signup-login-note {

    margin-top:18px !important;

    color:#777780 !important;

    font-size:13px;
}

.signup-login-note a {

    color:var(--pink);

    font-weight:700;
}


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

@media(max-width:1000px) {

    .signup-steps {

        grid-template-columns:
            1fr 1fr;

        gap:18px;
    }

    .signup-step-arrow {

        display:none;
    }
}


@media(max-width:800px) {

    .signup-hero-inner {

        grid-template-columns:1fr;
    }

    .signup-hero-art {

        display:none;
    }

    .signup-privacy-box {

        grid-template-columns:1fr;
    }

    .signup-privacy-icon {

        width:85px;
        height:85px;

        font-size:40px;
    }

    .signup-ready-grid {

        grid-template-columns:1fr;

        gap:35px;
    }
}


@media(max-width:600px) {

    .signup-hero {

        margin-top:-32px;

        min-height:auto;

        padding-top:65px;

        padding-bottom:65px;
    }

    .signup-hero h1 {

        font-size:43px;

        letter-spacing:-1px;
    }

    .signup-actions {

        flex-direction:column;
    }

    .signup-actions .btn {

        width:100%;
    }

    .signup-steps {

        grid-template-columns:1fr;
    }

    .signup-step {

        min-height:auto;
    }

    .signup-privacy-box {

        padding:28px 22px;
    }

    .signup-final-cta {

        margin-bottom:-55px;

        padding-top:65px;

        padding-bottom:65px;
    }
}


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

@media(max-width:900px) {

    .mobile-menu-button {

        display:block;
    }

    .site-navigation {

        display:none;

        position:absolute;

        top:
            var(--header-height);

        left:0;
        right:0;

        padding:
            14px 4% 20px;

        border-bottom:
            1px solid
            rgba(252,81,133,.25);

        background:
            rgba(5,5,5,.98);

        box-shadow:
            0 20px 35px
            rgba(0,0,0,.5);

        flex-direction:
            column;

        align-items:
            stretch;
    }

    .site-navigation.open {

        display:flex;
    }

    .site-navigation a {

        padding:
            13px 15px;
    }

    .site-navigation
    .nav-logout {

        margin:
            8px 0 0;
    }


    /*
     * Legacy HTML navigation
     */

    .menu {

        display:block;
    }

    .navlinks {

        display:none;

        position:absolute;

        top:
            var(--header-height);

        left:0;
        right:0;

        padding:
            12px 4%;

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

        background:
            #080808;

        box-shadow:
            0 10px 30px
            rgba(0,0,0,.4);

        flex-direction:
            column;

        align-items:
            stretch;
    }

    .navlinks.open {

        display:flex;
    }

    .navlinks a {

        padding:
            13px;
    }


    .cards,
    .profile-grid {

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

    .profile-layout {

        grid-template-columns:
            1fr;
    }

    .profile-main-photo {

        height:
            430px;
    }

    .filters {

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

    .footer-inner,
    .footer-grid {

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


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

@media(max-width:600px) {

    :root {

        --header-height:
            68px;
    }

    .site-logo,
    .logo {

        font-size:
            21px;
    }

    .site-main {

        width:92%;

        padding:
            32px 0 55px;
    }

    .hero {

        min-height:
            auto;

        padding:
            70px 0;
    }

    .hero h1 {

        font-size:
            45px;

        letter-spacing:
            -1px;
    }

    .hero p {

        font-size:
            17px;
    }

    .buttons {

        flex-direction:
            column;
    }

    .buttons .btn {

        width:100%;
    }

    .section {

        padding:
            60px 0;
    }

    .cards,
    .profile-grid,
    .form-grid {

        grid-template-columns:
            1fr;
    }

    .field.full {

        grid-column:
            auto;
    }

    .searchbar {

        flex-direction:
            column;
    }

    .searchbar button {

        min-height:
            48px;
    }

    .filters {

        grid-template-columns:
            1fr;
    }

    .profile-main-photo {

        height:
            350px;
    }

    .status-grid {

        grid-template-columns:
            1fr;
    }

    .footer-inner,
    .footer-grid {

        grid-template-columns:
            1fr;

        gap:
            28px;
    }

    .footer-bottom {

        flex-direction:
            column;

        text-align:
            center;
    }

    .form-wrap,
    .card,
    .info-box,
    .privacy-card {

        padding:
            20px;
    }
}

/* ==============================================================
   SEARCH FORM — DARK THEME OVERRIDES
============================================================== */

/* Search form container */
.search-form,
.search-panel,
.search-shell form,
form.search-form {
    background:#101010;
    color:#ffffff;
    border:1px solid #303036;
    border-radius:16px;
    padding:28px;
    box-shadow:0 18px 45px rgba(0,0,0,.35);
}


/* --------------------------------------------------------------
   ALL SEARCH LABELS
-------------------------------------------------------------- */

.search-form label,
.search-panel label,
.search-shell label {
    color:#ffffff;
    font-weight:600;
    opacity:1;
}


/* Section/category titles such as:
   Race
   Sexual Orientation
   Racial Preference
-------------------------------------------------------------- */

.search-form legend,
.search-panel legend,
.search-shell legend,
.search-form .group-title,
.search-panel .group-title,
.search-shell .group-title {
    color:#fc5185;
    font-weight:700;
}


/* --------------------------------------------------------------
   INPUTS / SELECTS
-------------------------------------------------------------- */

.search-form input[type="text"],
.search-form input[type="number"],
.search-form input[type="search"],
.search-form select,

.search-panel input[type="text"],
.search-panel input[type="number"],
.search-panel input[type="search"],
.search-panel select,

.search-shell input[type="text"],
.search-shell input[type="number"],
.search-shell input[type="search"],
.search-shell select {

    width:100%;

    min-height:48px;

    background:#080808;

    color:#ffffff;

    border:1px solid #45454c;

    border-radius:8px;

    padding:11px 13px;

    outline:none;
}


/* Placeholder text */

.search-form input::placeholder,
.search-panel input::placeholder,
.search-shell input::placeholder {
    color:#777780;
}


/* Select dropdown text */

.search-form select,
.search-panel select,
.search-shell select {
    color:#ffffff;
}


/* Dropdown choices */

.search-form select option,
.search-panel select option,
.search-shell select option {
    background:#101010;
    color:#ffffff;
}


/* Focus state */

.search-form input:focus,
.search-form select:focus,

.search-panel input:focus,
.search-panel select:focus,

.search-shell input:focus,
.search-shell select:focus {

    border-color:#fc5185;

    box-shadow:
        0 0 0 3px rgba(252,81,133,.14);
}


/* --------------------------------------------------------------
   CHECKBOXES
-------------------------------------------------------------- */

.search-form input[type="checkbox"],
.search-panel input[type="checkbox"],
.search-shell input[type="checkbox"] {

    width:18px;
    height:18px;

    accent-color:#fc5185;

    cursor:pointer;
}


/* Checkbox labels */

.search-form input[type="checkbox"] + label,
.search-panel input[type="checkbox"] + label,
.search-shell input[type="checkbox"] + label {
    color:#eeeeee;
}


/* --------------------------------------------------------------
   FIELD GROUP DIVIDERS
-------------------------------------------------------------- */

.search-form fieldset,
.search-panel fieldset,
.search-shell fieldset {

    background:transparent;

    border:0;

    border-top:1px solid #303036;

    border-radius:0;

    padding:22px 0;

    margin:20px 0 0;
}


/* First fieldset doesn't need a top border */

.search-form fieldset:first-of-type,
.search-panel fieldset:first-of-type,
.search-shell fieldset:first-of-type {
    border-top:0;
}


/* --------------------------------------------------------------
   SEARCH BUTTON
-------------------------------------------------------------- */

.search-form button[type="submit"],
.search-panel button[type="submit"],
.search-shell button[type="submit"] {

    background:#fc5185;

    color:#ffffff;

    border:1px solid #fc5185;

    border-radius:9px;

    min-height:50px;

    padding:12px 24px;

    font-weight:700;
}

.search-form button[type="submit"]:hover,
.search-panel button[type="submit"]:hover,
.search-shell button[type="submit"]:hover {

    background:#ff6d9a;

    border-color:#ff6d9a;

    box-shadow:
        0 8px 25px rgba(252,81,133,.22);
}


/* --------------------------------------------------------------
   CLEAR SEARCH
-------------------------------------------------------------- */

.search-form a,
.search-panel a,
.search-shell form a {
    color:#fc5185;
    font-weight:600;
}

.search-form a:hover,
.search-panel a:hover,
.search-shell form a:hover {
    color:#ff8bad;
}


/* --------------------------------------------------------------
   SEARCH FORM TEXT
-------------------------------------------------------------- */

.search-form p,
.search-panel p,
.search-shell form p {
    color:#aaaab2;
}


/* --------------------------------------------------------------
   SEARCH RESPONSIVE
-------------------------------------------------------------- */

@media(max-width:700px) {

    .search-form,
    .search-panel,
    .search-shell form {
        padding:20px;
    }
}


/* ==============================================================
   HOMEPAGE FEATURED PUBLIC PROFILE CAROUSEL
============================================================== */

.home-gallery-section {
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    padding:72px max(4%, calc((100vw - var(--max)) / 2));
    border-top:1px solid #171719;
    border-bottom:1px solid #171719;
    background:
        radial-gradient(
            circle at 50% 15%,
            rgba(252,81,133,.10),
            transparent 32%
        ),
        #080808;
}

.home-gallery-heading {
    max-width:720px;
    margin:0 auto 28px;
    text-align:center;
}

.home-gallery-heading h2 {
    margin:0 0 10px;
    color:#fff;
    font-size:clamp(32px,5vw,48px);
}

.home-gallery-heading h2 span {
    color:#fc5185;
}

.home-gallery-heading p {
    margin:0;
    color:#aaaab2;
}

.home-gallery-stage {
    position:relative;
    max-width:940px;
    margin:0 auto;
}

.home-gallery-viewport {
    overflow:hidden;
    border:1px solid rgba(252,81,133,.32);
    border-radius:18px;
    background:#070707;
    box-shadow:
        0 18px 55px rgba(0,0,0,.5),
        0 0 24px rgba(252,81,133,.10);
}

.home-gallery-track {
    display:grid;
    grid-template-columns:minmax(0,3fr) minmax(0,2fr);
    gap:12px;
    min-height:430px;
    padding:12px;
}

.home-gallery-slide {
    position:relative;
    display:block;
    min-width:0;
    height:430px;
    overflow:hidden;
    border:2px solid rgba(252,81,133,.75);
    border-radius:13px;
    background:#0d0d0f;
    box-shadow:
        0 0 15px rgba(255,255,255,.10),
        0 0 22px rgba(252,81,133,.12);
}

.home-gallery-slide:hover {
    border-color:#ff7ba2;
    box-shadow:
        0 0 18px rgba(255,255,255,.12),
        0 0 30px rgba(252,81,133,.22);
}

.home-gallery-slide img {
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    background:#080808;
}

.home-gallery-caption {

/* ==========================================================
   KONVICTED CUTIES — GLOBAL DARK UI FIX
========================================================== */

:root {
    --kc-bg: #050505;
    --kc-surface: #0d0d0f;
    --kc-surface-2: #141416;
    --kc-surface-3: #1a1a1d;

    --kc-pink: #fc5185;
    --kc-pink-hover: #ff709c;
    --kc-pink-soft: rgba(252,81,133,.12);

    --kc-white: #ffffff;
    --kc-text: #f4f4f5;
    --kc-muted: #aaaab2;

    --kc-border: #303036;
    --kc-border-pink: rgba(252,81,133,.42);

    --kc-success: #59d98e;
    --kc-danger: #ff6b78;
}


/* ----------------------------------------------------------
   PAGE BACKGROUND
---------------------------------------------------------- */

html,
body {
    background: var(--kc-bg);
    color: var(--kc-text);
}


/* ----------------------------------------------------------
   STANDARD PAGE TEXT
---------------------------------------------------------- */

main {
    color: var(--kc-text);
}

main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
    color: var(--kc-white);
}

main p,
main li {
    color: var(--kc-muted);
}

main strong {
    color: var(--kc-white);
}


/* ----------------------------------------------------------
   CARDS / PANELS
---------------------------------------------------------- */

.card,
.form-wrap,
.info-box,
.notice,
.profile-card {
    background: var(--kc-surface);
    color: var(--kc-text);
    border-color: var(--kc-border);
}

.card h1,
.card h2,
.card h3,
.card h4,
.form-wrap h1,
.form-wrap h2,
.form-wrap h3,
.info-box h1,
.info-box h2,
.info-box h3 {
    color: var(--kc-white);
}

.card p,
.info-box p {
    color: var(--kc-muted);
}


/* ----------------------------------------------------------
   FORM LABELS
---------------------------------------------------------- */

label,
.f label,
.field label,
fieldset legend {
    color: var(--kc-text);
}


/* ----------------------------------------------------------
   ALL FORM CONTROLS
---------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="tel"],
input[type="url"],
input[type="search"],
select,
textarea {
    width: 100%;

    background: var(--kc-surface-2);
    color: var(--kc-white);

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

    border-radius: 8px;

    padding: 12px 13px;

    outline: none;
}


/* Placeholder text */

input::placeholder,
textarea::placeholder {
    color: #777780;
    opacity: 1;
}


/* Focus */

input:focus,
select:focus,
textarea:focus {
    border-color: var(--kc-pink);

    box-shadow:
        0 0 0 3px rgba(252,81,133,.12);
}


/* ----------------------------------------------------------
   SELECT MENUS
---------------------------------------------------------- */

select {
    color-scheme: dark;
}

select option {
    background: #151517;
    color: #fff;
}


/* ----------------------------------------------------------
   CHECKBOXES / RADIO BUTTONS
---------------------------------------------------------- */

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--kc-pink);
}


/* Make checkbox labels readable */

input[type="checkbox"] + label,
input[type="radio"] + label {
    color: var(--kc-text);
}


/* ----------------------------------------------------------
   FIELDSETS / FORM SECTIONS
---------------------------------------------------------- */

fieldset {
    border-color: var(--kc-border);
}

legend {
    color: var(--kc-pink);
}


/* ----------------------------------------------------------
   BUTTONS
---------------------------------------------------------- */

button,
.btn,
.btn-primary {
    background: var(--kc-pink);
    color: #fff;

    border-color: var(--kc-pink);
}

button:hover,
.btn:hover,
.btn-primary:hover {
    background: var(--kc-pink-hover);
    color: #fff;
}


/* Secondary / outline buttons */

.btn-outline {
    background: transparent;
    color: var(--kc-pink);

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

.btn-outline:hover {
    background: var(--kc-pink);
    color: #fff;
}


/* ----------------------------------------------------------
   LINKS INSIDE CONTENT
---------------------------------------------------------- */

main a:not(.btn):not(.card-link) {
    color: var(--kc-pink);
}

main a:not(.btn):not(.card-link):hover {
    color: var(--kc-pink-hover);
}


/* ----------------------------------------------------------
   SMALL / MUTED TEXT
---------------------------------------------------------- */

.small,
.meta,
.muted,
.help,
.help-text {
    color: var(--kc-muted);
}


/* ----------------------------------------------------------
   SUCCESS MESSAGE
---------------------------------------------------------- */

.ok,
.success {
    background: rgba(89,217,142,.08);

    color: #b9f6d1;

    border: 1px solid rgba(89,217,142,.40);
}


/* ----------------------------------------------------------
   ERROR MESSAGE
---------------------------------------------------------- */

.err,
.error {
    background: rgba(255,107,120,.08);

    color: #ffc2c8;

    border: 1px solid rgba(255,107,120,.40);
}


/* ----------------------------------------------------------
   TABLES
---------------------------------------------------------- */

table {
    width: 100%;
    color: var(--kc-text);
    border-color: var(--kc-border);
}

th {
    background: var(--kc-surface-3);
    color: var(--kc-white);
}

td {
    background: var(--kc-surface);
    color: var(--kc-text);
}

th,
td {
    border-color: var(--kc-border);
}


/* ----------------------------------------------------------
   SEARCH FILTER AREAS
---------------------------------------------------------- */

.filters,
.search-filters,
.search-form,
.filter-panel {
    color: var(--kc-text);
}

.filters label,
.search-filters label,
.search-form label,
.filter-panel label {
    color: var(--kc-text);
}


/* ----------------------------------------------------------
   SEARCH RESULT CARDS
---------------------------------------------------------- */

.profile-card {
    background: var(--kc-surface);
    border: 1px solid var(--kc-border);
}

.profile-body {
    background: var(--kc-surface);
}

.profile-body h3 {
    color: var(--kc-white);
}

.profile-body p,
.profile-body .meta {
    color: var(--kc-muted);
}


/* ----------------------------------------------------------
   HORIZONTAL LINES
---------------------------------------------------------- */

hr {
    border: 0;
    border-top: 1px solid var(--kc-border);
}


/* ----------------------------------------------------------
   WHITE BACKGROUND OVERRIDES FROM OLDER PAGES
---------------------------------------------------------- */

.section.gray {
    background: #0a0a0b;
}

.legal {
    color: var(--kc-text);
}

.legal p,
.legal li {
    color: var(--kc-muted);
}

.legal h2,
.legal h3 {
    color: var(--kc-white);
}


/* ----------------------------------------------------------
   AUTOFILL FIX
   Prevent Chrome from turning login fields bright white
---------------------------------------------------------- */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;

    -webkit-box-shadow:
        0 0 0 1000px #141416 inset;

    transition:
        background-color 9999s ease-in-out 0s;
}


/* ----------------------------------------------------------
   TEXT SELECTION
---------------------------------------------------------- */

::selection {
    background: var(--kc-pink);
    color: #fff;
}

/* ==========================================================
   PRIVACY SETTINGS — DARK THEME OVERRIDES
========================================================== */

body .privacy-card,
body .privacy-panel,
body .privacy-box,
body .consent-card,
body .settings-card,
body .status-card {
    background:#0d0d0f !important;
    color:#f4f4f5 !important;
    border-color:#303036 !important;
}


/* Main white cards on Privacy Settings */
body main .card {
    background:#0d0d0f !important;
    color:#f4f4f5 !important;
    border:1px solid #303036 !important;
    box-shadow:
        0 12px 35px rgba(0,0,0,.35),
        0 0 20px rgba(252,81,133,.04);
}


/* Status boxes such as:
   Public Profile Consent
   Profile Visibility
   Profile Completed
   Administrator Approved
*/
body main .status-item,
body main .status-box,
body main .status-grid > div {
    background:#151517 !important;
    color:#f4f4f5 !important;
    border-color:#303036 !important;
}


/* All text inside cards */
body main .card p,
body main .card li,
body main .card span,
body main .card label {
    color:#c4c4ca !important;
}

body main .card strong,
body main .card h2,
body main .card h3 {
    color:#fff !important;
}


/* Status titles */
body main .status-grid span,
body main .status-grid .label {
    color:#aaaab2 !important;
}


/* Status values */
body main .status-grid strong {
    color:#fff !important;
}


/* Granted status */
body main .status-grid .good,
body main .status-grid .granted {
    color:#59d98e !important;
}


/* Consent/disclosure area */
body main .consent-copy,
body main .consent-box,
body main .disclosure,
body main .notice {
    background:#121214 !important;
    color:#d0d0d5 !important;
    border-color:#303036 !important;
}

body main .consent-copy p,
body main .consent-copy li,
body main .consent-box p,
body main .consent-box li,
body main .disclosure p,
body main .disclosure li {
    color:#c4c4ca !important;
}


/* Divider lines */
body main hr {
    border-color:#303036 !important;
}


/* Checkbox text */
body main input[type="checkbox"] + label {
    color:#f4f4f5 !important;
}


/* Privacy page buttons */
body main button,
body main .btn {
    background:#fc5185;
    color:#fff !important;
    border-color:#fc5185;
}

body main button:hover,
body main .btn:hover {
    background:#ff709c;
    border-color:#ff709c;
}


/* Secondary/outline actions */
body main .btn-outline {
    background:transparent;
    color:#fc5185 !important;
    border-color:#fc5185;
}

body main .btn-outline:hover {
    background:#fc5185;
    color:#fff !important;
}