:root{--red:#d61c1c;--blue:#3b82f6;--ink:#050607;--panel:#111418;--line:#2b3038;--text:#f4f6f8;--muted:#a9b0ba}*{box-sizing:border-box}body{margin:0;background:var(--ink);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif;line-height:1.55}a{color:inherit}.site-header{min-height:92px;padding:16px clamp(20px,5vw,80px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #20242a;background:#070809;position:sticky;top:0;z-index:10}.brand{display:flex;align-items:center;gap:13px;text-decoration:none;font-weight:900;letter-spacing:1.5px}.brand small{display:block;color:var(--muted);font-size:9px;letter-spacing:1px}.brand-mark{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:linear-gradient(145deg,var(--red),#641010);font-size:19px}.brand-mark span{font-size:10px}.site-header nav{display:flex;align-items:center;gap:22px}.site-header nav a,.nav-button{background:none;border:0;color:#ddd;text-decoration:none;font:inherit;cursor:pointer}.join-link,.primary{display:inline-flex!important;justify-content:center;align-items:center;background:linear-gradient(135deg,#e32929,#a40e0e)!important;color:#fff!important;border:0;border-radius:8px;padding:13px 20px;text-decoration:none;font-weight:800;cursor:pointer;box-shadow:0 8px 24px #d61c1c33}.secondary{display:inline-flex;padding:12px 20px;border:1px solid #59616d;border-radius:8px;text-decoration:none}.welcome{color:#9bc2ff}.hero{min-height:580px;padding:85px clamp(24px,8vw,140px);display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);align-items:center;gap:8vw;background:radial-gradient(circle at 14% 30%,#14336088,transparent 35%),linear-gradient(120deg,#07090c 40%,#180707)}.eyebrow{color:#69a5ff;font-size:12px;font-weight:900;letter-spacing:3px}.hero h1,.auth-message h1{font-size:clamp(48px,7vw,90px);line-height:.96;margin:18px 0 25px;letter-spacing:-4px}.hero h1 em{color:var(--red);font-style:normal}.hero-copy>p{max-width:680px;color:#c0c5cc;font-size:19px}.hero-actions{display:flex;gap:14px;margin-top:32px}.promise{padding:32px;border:1px solid #39414b;border-top:4px solid var(--blue);border-radius:12px;background:#10141acc;box-shadow:0 25px 70px #000}.promise>span{font-size:11px;color:#8cbaff;letter-spacing:2px;font-weight:800}.promise h2{font-size:28px}.promise li{margin:12px 0;color:#c7ccd2}.layout{max-width:1400px;margin:auto;padding:70px 30px;display:grid;grid-template-columns:260px 1fr;gap:55px}.sidebar{position:sticky;top:125px;align-self:start}.sidebar h2{margin-top:0}.category{display:block;padding:12px 14px;margin:4px 0;text-decoration:none;color:#b8bec7;border-left:3px solid transparent}.category:hover,.category.active{color:#fff;border-color:var(--blue);background:#182333}.rules{margin-top:30px;padding:20px;background:#161111;border:1px solid #492323;border-radius:9px}.rules p{font-size:13px;color:#c1aaaa}.feed-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:25px}.feed-head h2{font-size:36px;margin:5px 0}.search{display:flex}.search input,.dialog-form input,.dialog-form select,.dialog-form textarea,.auth-card input,.reply-form textarea,.admin input,.admin select{width:100%;background:#0b0d10;color:#fff;border:1px solid #3b424d;border-radius:7px;padding:13px;font:inherit}.search button,.admin button{border:0;background:var(--blue);color:#fff;padding:0 18px;border-radius:0 7px 7px 0;font-weight:700}.post-card{padding:28px;margin-bottom:18px;background:linear-gradient(145deg,#13171c,#0d0f12);border:1px solid var(--line);border-radius:12px;transition:.2s}.post-card:hover{border-color:#48515e;transform:translateY(-2px)}.post-top{display:flex;align-items:center;gap:12px}.avatar{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#2969c6,#15315b);font-weight:900}.avatar.small{width:36px;height:36px}.post-top small,.replies small,.admin small{display:block;color:var(--muted)}.topic{margin-left:auto;color:#8dbaff;background:#14243b;padding:5px 10px;border-radius:20px;font-size:12px}.badge{color:#ff8e8e;margin-left:7px;font-size:11px;text-transform:uppercase}.post-card h3{font-size:25px;margin:20px 0 8px}.post-card h3 a{text-decoration:none}.post-card p{color:#c3c7cd}.post-meta{display:flex;gap:25px;border-top:1px solid #282d34;margin-top:20px;padding-top:18px;color:#8f98a4;font-size:13px}.post-meta a{margin-left:auto;color:#82aff1;text-decoration:none}.empty{text-align:center;padding:80px;border:1px dashed #3a414a;border-radius:12px}.alerts{position:fixed;z-index:20;top:105px;right:25px}.alert{padding:13px 18px;margin:8px;border-radius:7px;background:#213047;box-shadow:0 8px 30px #000}.alert.error{background:#5b1818}.alert.success{background:#164b34}dialog{width:min(650px,calc(100% - 30px));padding:0;color:#fff;background:#11151a;border:1px solid #3b4654;border-radius:13px;box-shadow:0 30px 100px #000}dialog::backdrop{background:#000c;backdrop-filter:blur(5px)}.dialog-form{padding:36px}.dialog-form h2{font-size:32px}.dialog-form label,.auth-card label,.reply-form label{display:block;margin:18px 0;font-weight:700}.dialog-form label>* ,.auth-card label>*{margin-top:7px}.close{float:right;background:none;border:0;color:#fff;font-size:30px;cursor:pointer}.privacy-note,.muted{color:var(--muted);font-size:13px}.auth-wrap{min-height:750px;display:grid;grid-template-columns:1fr 520px;gap:8vw;align-items:center;padding:70px clamp(25px,10vw,160px);background:radial-gradient(circle at 15% 50%,#143363,transparent 30%)}.auth-message p{font-size:19px;color:#bac1ca}.auth-card{padding:40px;border-radius:14px;border:1px solid #333b46;background:#11151a;box-shadow:0 30px 80px #000}.auth-card h2{font-size:32px}.auth-card small{color:var(--muted)}.accept{display:flex!important;align-items:center;gap:12px}.accept input{width:20px!important}.thread{max-width:980px;margin:60px auto;padding:0 24px}.back{display:inline-block;margin-bottom:25px;color:#9fc2f6}.feature{padding:40px}.feature h1{font-size:clamp(34px,5vw,56px);line-height:1.1}.full-body{white-space:pre-wrap;font-size:18px;line-height:1.8}.post-actions{display:flex;gap:18px;margin-top:30px}.support-button{padding:11px 16px;border:1px solid #46505d;border-radius:7px;background:#15191e;color:#ddd;cursor:pointer}.support-button.active{background:#4e151a;border-color:var(--red);color:#ffaaaa}.text-button{border:0;background:none;color:#9fb5d3;cursor:pointer}.replies{margin:45px 0}.replies>article{display:grid;grid-template-columns:42px 1fr;gap:15px;padding:24px 0;border-bottom:1px solid #282d34}.reply-form{margin-top:35px}.admin{max-width:1400px;margin:60px auto;padding:0 30px}.admin>h1{font-size:48px}.admin section{margin:45px 0}.admin-list article,.member-table article,.table-head{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:18px;border-bottom:1px solid #303640;background:#111419}.admin-list form{display:flex;align-items:center;justify-content:end;gap:10px}.admin .danger{background:var(--red)}.table-head,.member-table article{grid-template-columns:1fr 120px 120px 2fr}.table-head{font-weight:800;background:#1c222a}.member-table form{display:grid;grid-template-columns:130px 1fr 80px;gap:7px}.status{padding:4px 8px;height:max-content;border-radius:20px;text-align:center;background:#26303b}.status.active{color:#8ff0b8}.status.banned{color:#ff9292}footer{text-align:center;padding:55px 20px;border-top:1px solid #252a31;color:#aeb5bf}footer strong{display:block;color:#fff;font-size:22px}footer span{display:block}footer p{font-size:12px;margin-top:25px}@media(max-width:900px){.site-header{position:relative}.site-header nav>a:not(.join-link),.welcome{display:none}.hero,.auth-wrap{grid-template-columns:1fr}.hero{padding-top:60px}.hero h1,.auth-message h1{letter-spacing:-2px}.layout{grid-template-columns:1fr}.sidebar{position:static}.category{display:inline-block}.feed-head{align-items:stretch;flex-direction:column;gap:15px}.post-meta{flex-wrap:wrap}.post-meta a{width:100%;margin:0}.table-head{display:none}.member-table article{grid-template-columns:1fr}.member-table form{grid-template-columns:1fr}.admin-list article{grid-template-columns:1fr}}@media(max-width:560px){.brand>span:last-child{display:none}.hero{min-height:auto;padding:55px 22px}.hero-actions{flex-direction:column}.layout{padding:45px 18px}.search{flex-direction:column}.search button{padding:12px;border-radius:7px}.post-card{padding:20px}.topic{display:none}.feature{padding:23px}.application-heading h1{font-size:38px}}

/* Allow the header and navigation to scroll away with the page */
.site-header {
    position: relative;
    top: auto;
}

/* Main community navigation */
.site-header {
    position: relative;
    top: auto;
    padding: 20px;
    background: #000;
}

.community-logo-container {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr) auto;
    align-items: center;
    gap: 25px;
}

.community-logo-link {
    display: block;
    width: 80px;
    height: 80px;
}

.brand-logo {
    display: block;
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 50%;
}

/* Main page links */
.main-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.main-nav a {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 42px;
    padding: 0 16px;

    color: white;
    text-decoration: none;
    white-space: nowrap;
    font-size: 16px;
    font-weight: bold;

    background: linear-gradient(
        180deg,
        #2f4fff,
        #1734b5
    );

    border: 2px solid #3560ff;
    border-radius: 30px;

    box-shadow: 0 0 12px rgba(30, 76, 255, 0.5);
    transition: all 0.3s ease;
}

.main-nav a:hover,
.main-nav a:focus {
    background: linear-gradient(
        45deg,
        #750000,
        #d61c1c
    );

    border-color: #d61c1c;
    box-shadow: 0 0 15px rgba(214, 28, 28, 0.65);
    transform: translateY(-3px);
}

/* Sign-in and member controls */
.account-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
}

.account-nav a,
.account-nav .nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 17px;

    color: white;
    text-decoration: none;
    white-space: nowrap;
    font-size: 14px;
    font-weight: bold;

    background: #171a20;
    border: 1px solid #49515e;
    border-radius: 22px;
    cursor: pointer;
}

.account-nav .join-link {
    background: linear-gradient(45deg, #750000, #d61c1c);
    border-color: #d61c1c;
}

.account-nav form {
    margin: 0;
}

.welcome {
    width: 100%;
    color: #9bc2ff;
    text-align: right;
    font-size: 14px;
    font-weight: bold;
}

/* Red, white and blue divider */
.community-divider {
    height: 4px;
    background: linear-gradient(
        to right,
        #1e4cff,
        #ffffff,
        #d61c1c
    );
}

/* Smaller screens */
@media (max-width: 1200px) {
    .community-logo-container {
        grid-template-columns: 110px 1fr;
    }

    .account-nav {
        grid-column: 1 / -1;
        justify-content: center;
    }

    .welcome {
        width: auto;
        text-align: center;
    }
}

@media (max-width: 700px) {
    .community-logo-container {
        display: flex;
        flex-direction: column;
    }

    .community-logo-link,
    .brand-logo {
        width: 90px;
        height: 90px;
    }

    .main-nav {
        gap: 10px;
    }

    .main-nav a {
        min-height: 42px;
        padding: 0 16px;
        font-size: 15px;
    }

    .account-nav {
        justify-content: center;
    }
}

/* Keep the new main navigation visible */
.site-header {
    display: block;
}

.community-logo-container {
    width: 100%;
}

.site-header .main-nav {
    display: flex;
}

.site-header .main-nav a {
    display: flex !important;
}

/* Override the old mobile navigation rule */
@media (max-width: 900px) {
    .site-header .main-nav a {
        display: flex !important;
    }
}

/* ==================================================
   COMMUNITY RULES AND SAFETY PAGE
================================================== */

.rules-hero {
    padding: 90px 25px;
    text-align: center;
    background:
        radial-gradient(
            circle at center,
            rgba(30, 76, 255, 0.18),
            transparent 45%
        ),
        linear-gradient(
            135deg,
            #050607,
            #0c1119,
            #180707
        );
    border-bottom: 1px solid #2d333c;
}

.rules-hero h1 {
    margin: 18px 0 25px;
    color: white;
    font-size: clamp(48px, 7vw, 82px);
    line-height: 1;
    letter-spacing: -3px;
}

.rules-hero h1 span {
    color: #d61c1c;
}

.rules-hero p {
    max-width: 820px;
    margin: auto;
    color: #c3c9d1;
    font-size: 19px;
    line-height: 1.8;
}

.rules-page {
    width: min(1250px, calc(100% - 40px));
    margin: 0 auto;
    padding: 70px 0;
}


/* Community promise */

.rules-introduction {
    display: grid;
    grid-template-columns: 110px 1fr;
    align-items: center;
    gap: 30px;
    margin-bottom: 55px;
    padding: 35px;

    background: linear-gradient(
        135deg,
        #111821,
        #101215
    );

    border: 1px solid #36475e;
    border-left: 5px solid #3b82f6;
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
}

.rules-shield {
    display: grid;
    place-items: center;
    width: 95px;
    height: 95px;

    color: white;
    font-size: 42px;
    font-weight: bold;

    background: linear-gradient(
        145deg,
        #3b82f6,
        #173c78
    );

    border-radius: 50%;
    box-shadow: 0 0 25px rgba(59, 130, 246, 0.35);
}

.rules-introduction h2 {
    margin: 8px 0;
    font-size: 32px;
}

.rules-introduction p {
    max-width: 850px;
    margin-bottom: 0;
    color: #bdc5cf;
    font-size: 17px;
}


/* Rule cards */

.rules-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.rule-card {
    position: relative;
    overflow: hidden;
    padding: 32px;

    background: linear-gradient(
        145deg,
        #13171c,
        #0c0f12
    );

    border: 1px solid #303740;
    border-radius: 13px;

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

.rule-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;

    width: 5px;
    height: 100%;

    background: linear-gradient(
        #3b82f6,
        #d61c1c
    );
}

.rule-card:hover {
    transform: translateY(-5px);
    border-color: #526175;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.rule-number {
    display: inline-block;
    margin-bottom: 18px;

    color: #72a9fa;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 3px;
}

.rule-card h2 {
    margin: 0 0 13px;
    color: white;
    font-size: 25px;
}

.rule-card p {
    margin: 0;
    color: #b9c0c9;
    line-height: 1.75;
}


/* Moderation policy */

.moderation-policy {
    margin-top: 80px;
    padding: 50px;

    background: linear-gradient(
        135deg,
        #15100f,
        #0d0f13
    );

    border: 1px solid #472928;
    border-top: 4px solid #d61c1c;
    border-radius: 15px;
}

.policy-heading {
    max-width: 780px;
    margin: 0 auto 40px;
    text-align: center;
}

.policy-heading h2 {
    margin: 10px 0;
    font-size: 37px;
}

.policy-heading p {
    color: #c1c5cb;
    font-size: 17px;
}

.policy-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.policy-steps article {
    padding: 24px;
    text-align: center;

    background: rgba(255, 255, 255, 0.035);
    border: 1px solid #3b3535;
    border-radius: 11px;
}

.policy-steps article > span {
    display: grid;
    place-items: center;

    width: 45px;
    height: 45px;
    margin: 0 auto 15px;

    color: white;
    font-size: 18px;
    font-weight: bold;

    background: #d61c1c;
    border-radius: 50%;
}

.policy-steps h3 {
    margin: 10px 0;
    font-size: 20px;
}

.policy-steps p {
    color: #b9bdc3;
    font-size: 14px;
}


/* Crisis section */

.crisis-safety {
    display: grid;
    grid-template-columns: 145px 1fr;
    align-items: center;
    gap: 35px;

    margin-top: 55px;
    padding: 42px;

    background: linear-gradient(
        135deg,
        #10213d,
        #10151d
    );

    border: 1px solid #315988;
    border-radius: 15px;
}

.crisis-icon {
    display: grid;
    place-items: center;

    width: 130px;
    height: 130px;

    color: white;
    font-size: 39px;
    font-weight: 900;

    background: linear-gradient(
        145deg,
        #3b82f6,
        #17447e
    );

    border-radius: 50%;
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.4);
}

.crisis-safety h2 {
    margin: 8px 0;
    font-size: 33px;
}

.crisis-safety p {
    max-width: 850px;
    color: #c5ccd5;
    line-height: 1.75;
}

.crisis-safety .primary,
.crisis-safety .secondary {
    margin-top: 12px;
    margin-right: 10px;
}


/* Agreement section */

.rules-agreement {
    margin-top: 55px;
    padding: 60px 25px;
    text-align: center;

    background:
        radial-gradient(
            circle at center,
            rgba(214, 28, 28, 0.16),
            transparent 45%
        ),
        #0d0f12;

    border: 1px solid #333a44;
    border-radius: 15px;
}

.rules-agreement h2 {
    margin: 12px 0;
    font-size: 40px;
}

.rules-agreement p {
    max-width: 750px;
    margin: 0 auto 28px;
    color: #bec5ce;
    font-size: 17px;
    line-height: 1.75;
}


/* Rules page responsive design */

@media (max-width: 900px) {
    .rules-grid {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 600px) {
    .rules-hero {
        padding: 65px 20px;
    }

    .rules-hero h1 {
        letter-spacing: -2px;
    }

    .rules-page {
        width: min(100% - 28px, 1250px);
        padding-top: 40px;
    }

    .rules-introduction,
    .crisis-safety {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .rules-shield,
    .crisis-icon {
        margin: auto;
    }

    .moderation-policy {
        padding: 35px 20px;
    }

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

    .rule-card {
        padding: 27px;
    }
}

.rules-link {
    color: #72a9fa;
    font-weight: bold;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rules-link:hover {
    color: #ffffff;
}

/* Contact message cards */
.contact-message {
    display: block !important;
    border: 1px solid #29313d;
    border-radius: 14px;
    padding: 24px !important;
    margin-bottom: 18px;
    background: #11151b;
}

.contact-message > div {
    width: 100%;
}

.contact-message p {
    line-height: 1.6;
}

/* Contact-message status badge */
.contact-message .status {
    display: inline-block;
    width: auto;
    margin-top: 12px;
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.contact-message .status.new {
    color: #ffffff;
    background: #174d2a;
    border: 1px solid #35d06f;
    box-shadow: 0 0 12px rgba(53, 208, 111, 0.35);
}

/* Admin contact counters — must remain at bottom */
.admin-count-heading .badge {
    position: static !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    margin-left: 10px !important;
    padding: 6px 13px !important;

    background: #252d39 !important;
    color: #ffffff !important;
    border: 1px solid #536176 !important;
    border-radius: 999px !important;

    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-transform: uppercase;
}

.admin-count-heading .new-count {
    background: #176b35 !important;
    color: #ffffff !important;
    border-color: #35d06f !important;
    box-shadow: 0 0 12px rgba(53, 208, 111, 0.45);
}

.new-count {
    background: #176b35 !important;
    border: 1px solid #35d06f !important;
    color: white !important;
    box-shadow: 0 0 10px rgba(53, 208, 111, 0.4) !important;
}

.reply-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: 10px;
    padding: 9px 16px;

    color: #ffffff;
    text-decoration: none;
    font-weight: 800;

    background: linear-gradient(180deg, #2f4fff, #1734b5);
    border: 2px solid #3560ff;
    border-radius: 999px;

    box-shadow: 0 0 12px rgba(30, 76, 255, 0.45);
    transition: 0.25s ease;
}

.reply-btn:hover {
    background: linear-gradient(45deg, #750000, #d61c1c);
    border-color: #d61c1c;
    box-shadow: 0 0 15px rgba(214, 28, 28, 0.6);
    transform: translateY(-2px);
}

/* Contact-message action row */
.message-actions-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.message-actions-row form {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.message-status-new,
.message-status-read {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    min-height: 40px;
    padding: 8px 16px;
    border-radius: 999px;
    color: white;
    font-weight: 800;
    text-transform: uppercase;
}

.message-status-new {
    background: #176b35;
    border: 2px solid #35d06f;
    box-shadow: 0 0 14px rgba(53, 208, 111, 0.55);
}

.message-status-read {
    background: #303846;
    border: 2px solid #657185;
}

.message-actions-row .reply-btn,
.message-actions-row button {
    min-height: 40px;
    padding: 8px 18px;
    border-radius: 999px;
    color: white;
    font-weight: 800;
    cursor: pointer;
}

.message-actions-row .reply-btn {
    margin: 0;
    background: linear-gradient(180deg, #2f4fff, #1734b5);
    border: 2px solid #3560ff;
}

.message-actions-row .read-btn {
    background: #325f9f;
    border: 2px solid #5d94df;
}

.message-actions-row .new-btn {
    background: #176b35;
    border: 2px solid #35d06f;
}

.message-actions-row .delete-btn {
    background: #9d1919;
    border: 2px solid #e33a3a;
}

.message-actions-row .reply-btn:hover,
.message-actions-row button:hover {
    transform: translateY(-2px);
    filter: brightness(1.15);
}

/* Admin contact-message search */
.contact-search-form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 22px;
}

.contact-search-form input {
    flex: 1;
    min-height: 46px;
    padding: 10px 16px;

    color: white;
    background: #0b0d10;
    border: 1px solid #3b424d;
    border-radius: 999px;
}

.contact-search-form button,
.clear-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 46px;
    padding: 10px 20px;

    color: white;
    text-decoration: none;
    font-weight: 800;

    border-radius: 999px;
}

.contact-search-form button {
    background: linear-gradient(180deg, #2f4fff, #1734b5);
    border: 2px solid #3560ff;
}

.clear-search-btn {
    background: #303846;
    border: 2px solid #657185;
}

.contact-search-form button:hover,
.clear-search-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.12);
}

@media (max-width: 700px) {
    .contact-search-form {
        align-items: stretch;
        flex-direction: column;
    }
}

.contact-search-form select {
    min-height: 46px;
    padding: 10px 16px;

    color: white;
    background: #0b0d10;
    border: 1px solid #3b424d;
    border-radius: 999px;
    font: inherit;
}

/* Administration dashboard statistics */
.admin-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    margin: 32px 0 50px;
}

.stat-card {
    min-height: 130px;
    padding: 22px;

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

    background: linear-gradient(145deg, #151a21, #0e1115);
    border: 1px solid #343d49;
    border-top: 4px solid #3b82f6;
    border-radius: 14px;

    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.3);
}

.stat-card span {
    color: #b7c0cc;
    font-size: 14px;
    font-weight: 700;
}

.stat-card strong {
    color: white;
    font-size: 40px;
    line-height: 1;
}

.stat-new {
    border-top-color: #35d06f;
}

.stat-read {
    border-top-color: #7f8ea3;
}

.stat-members {
    border-top-color: #3b82f6;
}

.stat-reports {
    border-top-color: #d61c1c;
}

@media (max-width: 1050px) {
    .admin-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .admin-stats {
        grid-template-columns: 1fr;
    }
}

/* Delete all read contact messages */
.delete-read-form {
    display: flex;
    justify-content: flex-end;
    margin: -8px 0 24px;
}

.delete-read-btn {
    min-height: 44px;
    padding: 9px 18px;

    color: #ffffff;
    font-weight: 800;

    background: linear-gradient(180deg, #b82121, #781010);
    border: 2px solid #e33a3a;
    border-radius: 999px;

    box-shadow: 0 0 12px rgba(227, 58, 58, 0.35);
    cursor: pointer;
    transition: 0.2s ease;
}

.delete-read-btn:hover {
    filter: brightness(1.15);
    transform: translateY(-2px);
    box-shadow: 0 0 16px rgba(227, 58, 58, 0.55);
}

@media (max-width: 700px) {
    .delete-read-form {
        justify-content: stretch;
    }

    .delete-read-btn {
        width: 100%;
    }
}

.report-preview{
    margin-top:15px;
    padding:18px;

    background:#171c24;

    border-left:4px solid #3b82f6;
    border-radius:8px;
}

.report-preview h4{
    margin:10px 0;
    color:white;
}

.report-preview p{
    margin:0;
    color:#c7cdd6;
}

/* Recent community activity */

.recent-activity-section {
    margin: 55px auto;
    max-width: 1400px;
}

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

.activity-heading h2 {
    margin: 6px 0 0;
    font-size: 32px;
}

.activity-count {
    padding: 7px 15px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    background: #202733;
    border: 1px solid #475366;
    border-radius: 999px;
}

.activity-list {
    display: grid;
    gap: 12px;
}

.activity-item {
    display: grid;
    grid-template-columns: 52px 1fr;
    align-items: center;
    gap: 18px;

    padding: 10px 16px;

    background: linear-gradient(145deg, #14191f, #0d1014);
    border: 1px solid #313946;
    border-left: 4px solid #3b82f6;
    border-radius: 12px;
}

.activity-icon {
    display: grid;
    place-items: center;

    width: 36px;
    height: 36px;

    color: #ffffff;
    font-weight: 900;

    background: #234f91;
    border-radius: 50%;
}

.activity-content strong {
    color: #ffffff;
    font-size: 16px;
}

.activity-content p {
    margin: 4px 0;
    color: #d4d9df;
}

.activity-content small {
    color: #929ba7;
}

.activity-comment {
    border-left-color: #8b5cf6;
}

.activity-comment .activity-icon {
    background: #5b35a5;
}

.activity-member {
    border-left-color: #35d06f;
}

.activity-member .activity-icon {
    background: #176b35;
}

.activity-report {
    border-left-color: #d61c1c;
}

.activity-report .activity-icon {
    background: #8f1717;
}

@media (max-width: 650px) {
    .activity-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .activity-item {
        grid-template-columns: 42px 1fr;
        padding: 16px;
    }

    .activity-icon {
        width: 40px;
        height: 40px;
    }
}

.activity-item {
    display: flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.activity-item:hover {
    transform: translateY(-2px);
    border-color: #5b88d6;
    box-shadow: 0 10px 26px rgba(0,0,0,.35);
}

/* Collapsible admin sections */

.admin-collapse {
    margin: 38px 0;
    border: 1px solid #303946;
    border-radius: 14px;
    background: #0d1014;
    overflow: hidden;
}

.admin-collapse summary {
    padding: 20px 24px;
    color: #ffffff;
    font-size: 26px;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
    background: linear-gradient(145deg, #171c23, #101318);
    border-left: 4px solid #3b82f6;
}

.admin-collapse summary::-webkit-details-marker {
    display: none;
}

.admin-collapse summary::after {
    content: "＋";
    float: right;
    color: #75a8ff;
    font-size: 28px;
    line-height: 1;
}

.admin-collapse[open] summary::after {
    content: "−";
}

.admin-collapse > section {
    margin: 0;
    padding: 24px;
}

.admin-collapse > section > h2 {
    display: none;
}

.member-notes {
    grid-column: 1 / -1;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #303946;
}

.member-notes h4 {
    margin: 0 0 14px;
    color: #ffffff;
    font-size: 20px;
}

.admin-note-form {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

.admin-note-form textarea {
    flex: 1;
    min-height: 85px;
    padding: 14px;
    resize: vertical;
    color: #ffffff;
    background: #0c1015;
    border: 1px solid #394453;
    border-radius: 10px;
    font: inherit;
}

.admin-note-form button {
    padding: 12px 20px;
    align-self: flex-end;
}

.saved-admin-notes {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.saved-note {
    padding: 14px;
    background: #161c24;
    border-left: 4px solid #3b82f6;
    border-radius: 8px;
}

.saved-note p {
    margin: 0 0 8px;
    white-space: pre-wrap;
}

.saved-note small {
    color: #9fb0c7;
}

.member-notes {
    grid-column: 1 / -1;
    margin-top: 12px;
}

.member-notes summary {
    cursor: pointer;
    padding: 10px 14px;
    background: #1a2028;
    border: 1px solid #303946;
    border-radius: 8px;
    font-weight: 700;
    color: #9bc2ff;
}

.member-notes[open] summary {
    margin-bottom: 12px;
}

.admin-note-form textarea {
    min-height: 60px;
}

/* Compact expanded admin notes */

.member-notes[open] {
    padding-bottom: 4px;
}

.member-notes h4 {
    margin: 6px 0 8px;
    font-size: 15px;
}

.admin-note-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
}

.admin-note-form textarea {
    width: 100%;
    min-height: 48px;
    max-height: 100px;
    padding: 10px 12px;
    resize: vertical;
}

.admin-note-form button {
    width: auto;
    min-width: 110px;
    min-height: 48px;
    padding: 10px 16px;
    border-radius: 8px;
}

.saved-admin-notes {
    margin-top: 10px;
}

.saved-note {
    padding: 10px 12px;
}

@media (max-width: 700px) {
    .admin-note-form {
        grid-template-columns: 1fr;
    }

    .admin-note-form button {
        width: 100%;
    }
}

/* Force admin note form to stay compact */
.member-table .admin-note-form {
    display: grid !important;
    grid-template-columns: minmax(280px, 1fr) 120px !important;
    gap: 10px !important;
    align-items: end;
    max-width: 760px;
}

.member-table .admin-note-form textarea {
    width: 100% !important;
    min-height: 42px !important;
    max-height: 80px;
}

.member-table .admin-note-form button {
    width: 120px !important;
    min-height: 52px;
    padding: 10px 14px;
    border-radius: 8px;
}

@media (max-width: 700px) {
    .member-table .admin-note-form {
        grid-template-columns: 1fr !important;
        max-width: none;
    }

    .member-table .admin-note-form button {
        width: 100% !important;
    }
}

.edit-note-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 110px !important;
    gap: 10px !important;
}

.edit-note-form textarea {
    width: 100%;
    min-height: 52px;
    max-height: 120px;
    padding: 10px 12px;

    color: white;
    background: #0c1015;
    border: 1px solid #394453;
    border-radius: 8px;
    resize: vertical;
    font: inherit;
}

.edit-note-btn {
    min-height: 52px;
    padding: 10px 14px;
    border-radius: 8px !important;
}

.saved-note-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

.saved-note-footer form {
    margin: 0;
}

.delete-note-btn {
    min-height: 36px;
    padding: 7px 14px !important;

    color: white;
    background: #9d1919 !important;
    border: 1px solid #e33a3a !important;
    border-radius: 999px !important;
    cursor: pointer;
}

@media (max-width: 700px) {
    .edit-note-form {
        grid-template-columns: 1fr !important;
    }

    .saved-note-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

.note-display p {
    margin: 0 0 12px;
    white-space: pre-wrap;
}

.note-action-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
}

.note-action-buttons form {
    margin: 0;
}

.edit-note-btn,
.save-edit-btn,
.cancel-edit-btn,
.delete-note-btn {
    min-height: 38px;
    padding: 8px 15px !important;
    border-radius: 999px !important;
    cursor: pointer;
}

.edit-note-btn {
    background: #325f9f !important;
}

.save-edit-btn {
    background: #176b35 !important;
}

.cancel-edit-btn {
    background: #303846 !important;
}

.delete-note-btn {
    background: #9d1919 !important;
    border: 1px solid #e33a3a !important;
}

.edit-note-form[hidden],
.note-display[hidden] {
    display: none !important;
}

.member-table .edit-note-form {
    max-width: 760px;
}

.member-table .edit-note-form[hidden] {
    display: none !important;
}

.member-table .edit-note-form:not([hidden]) {
    display: block !important;
}

.member-table .edit-note-form textarea {
    width: 100% !important;
    min-height: 70px;
    padding: 12px;
}

.edit-note-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

/* Member warning system */

.member-warnings {
    grid-column: 1 / -1;
    margin-top: 12px;
}

.member-warnings summary {
    cursor: pointer;
    padding: 10px 14px;

    color: #ffb8b8;
    font-weight: 800;

    background: #241516;
    border: 1px solid #5a292c;
    border-radius: 8px;
}

.member-warnings[open] summary {
    margin-bottom: 12px;
}

.member-warnings h4 {
    margin: 6px 0 8px;
    font-size: 15px;
}

.member-table .warning-form {
    display: grid !important;
    grid-template-columns: minmax(280px, 1fr) 140px !important;
    gap: 10px !important;
    max-width: 760px;
}

.member-table .warning-form input {
    width: 100%;
}

.member-table .warning-form button {
    width: 140px;
    min-height: 48px;

    background: #a81d22;
    border-radius: 8px;
}

.warning-list {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.warning-card {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    gap: 15px;

    padding: 12px 14px !important;

    background: #1d1214 !important;
    border-left: 4px solid #d61c1c;
    border-radius: 8px;
}

.warning-card small {
    margin-top: 5px;
}

.warning-card form {
    margin: 0;
}

.remove-warning-btn {
    min-height: 36px;
    padding: 7px 14px !important;

    color: white;
    background: #7f171b !important;
    border: 1px solid #dd3940 !important;
    border-radius: 999px !important;
}

@media (max-width: 700px) {
    .member-table .warning-form {
        grid-template-columns: 1fr !important;
        max-width: none;
    }

    .member-table .warning-form button {
        width: 100%;
    }

    .warning-card {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Member note and warning totals */

.member-info {
    display: block;
}

.member-history-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.member-note-count,
.member-warning-count {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 4px 9px;

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

    border-radius: 999px;
}

.member-note-count {
    color: #b9d4ff;
    background: #18263a;
    border: 1px solid #355b8f;
}

.member-warning-count {
    color: #ffb9b9;
    background: #301719;
    border: 1px solid #743036;
}

.member-warning-count:not(:has(*)) {
    opacity: 0.7;
}

@media (max-width: 700px) {
    .member-history-counts {
        margin-top: 10px;
    }
}

.forgot-password-link {
    margin-top: -10px;
    margin-bottom: 15px;
    text-align: right;
}

.forgot-password-link a {
    color: #4da3ff;
    text-decoration: none;
    font-size: 0.9rem;
}

.forgot-password-link a:hover {
    text-decoration: underline;
}

/* Forgot password page */

.forgot-password-card form {
    margin-top: 24px;
}

.forgot-password-card .primary {
    margin-top: 8px;
}

.password-help-contact {
    margin-top: 24px;
    color: var(--muted);
}

.password-help-contact a,
.back-to-login {
    color: #69a5ff;
    font-weight: 700;
    text-decoration: none;
}

.password-help-contact a:hover,
.back-to-login:hover {
    color: #ffffff;
    text-decoration: underline;
}

.back-to-login {
    display: inline-block;
    margin-top: 10px;
}

/* ==================================================
   COMPACT RESPONSIVE COMMUNITY HEADER
   Keeps the desktop navigation on one line.
================================================== */

@media (min-width: 1451px) {
    .site-header {
        padding: 14px 18px;
    }

    .community-logo-container {
        grid-template-columns: 90px minmax(0, 1fr) auto;
        gap: 12px;
    }

    .community-logo-link,
    .brand-logo {
        width: 68px;
        height: 68px;
    }

    .main-nav {
        flex-wrap: nowrap;
        gap: 8px;
    }

    .main-nav a {
        min-height: 40px;
        padding: 0 12px;
        font-size: 15px;
    }

    .account-nav {
        flex-wrap: wrap;
        gap: 8px;
    }

    .account-nav a,
    .account-nav .nav-button {
        min-height: 40px;
        padding: 0 13px;
        font-size: 13px;
    }

    .welcome {
        font-size: 13px;
    }
}

@media (min-width: 1101px) and (max-width: 1450px) {
    .community-logo-container {
        grid-template-columns: 90px minmax(0, 1fr);
        gap: 12px;
    }

    .community-logo-link,
    .brand-logo {
        width: 68px;
        height: 68px;
    }

    .main-nav {
        gap: 8px;
    }

    .main-nav a {
        min-height: 40px;
        padding: 0 12px;
        font-size: 14px;
    }

    .account-nav {
        grid-column: 1 / -1;
        justify-content: center;
    }

    .welcome {
        width: auto;
        text-align: center;
    }
}

/* ==================================================
   MOBILE NAVIGATION
   Desktop navigation remains unchanged above 1100px.
================================================== */

.mobile-menu-toggle {
    display: none;
}

.main-nav a.active,
.main-nav a[aria-current="page"] {
    background: linear-gradient(45deg, #750000, #d61c1c);
    border-color: #d61c1c;
    box-shadow: 0 0 15px rgba(214, 28, 28, 0.65);
}

@media (max-width: 1100px) {
    .site-header {
        padding: 12px 16px;
    }

    .community-logo-container {
        display: grid;
        grid-template-columns: 64px 48px;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
    }

    .community-logo-link,
    .brand-logo {
        width: 64px;
        height: 64px;
    }

    .mobile-menu-toggle {
        display: inline-flex;
        width: 48px;
        height: 48px;
        padding: 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        color: white;
        background: #11151c;
        border: 1px solid #3560ff;
        border-radius: 12px;
        box-shadow: 0 0 12px rgba(30, 76, 255, 0.45);
        cursor: pointer;
    }

    .mobile-menu-toggle span {
        width: 24px;
        height: 3px;
        background: white;
        border-radius: 999px;
        transition:
            transform 0.25s ease,
            opacity 0.25s ease;
    }

    .mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }

    .mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

    .site-header .main-nav,
    .site-header .account-nav {
        display: none !important;
        grid-column: 1 / -1;
        width: 100%;
    }

    .site-header.mobile-menu-open .main-nav,
    .site-header.mobile-menu-open .account-nav {
        display: flex !important;
    }

    .site-header.mobile-menu-open .main-nav {
        padding-top: 14px;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 9px;
        border-top: 1px solid #252b35;
    }

    .site-header.mobile-menu-open .main-nav a {
        width: 100%;
        min-height: 46px;
        font-size: 16px;
    }

    .site-header.mobile-menu-open .account-nav {
        padding-top: 12px;
        flex-direction: column;
        align-items: stretch;
        gap: 9px;
    }

    .site-header.mobile-menu-open .account-nav .welcome {
        width: 100%;
        padding: 8px;
        text-align: center;
    }

    .site-header.mobile-menu-open .account-nav a,
    .site-header.mobile-menu-open .account-nav form,
    .site-header.mobile-menu-open .account-nav .nav-button {
        width: 100%;
    }

    .site-header.mobile-menu-open .account-nav a,
    .site-header.mobile-menu-open .account-nav .nav-button {
        min-height: 46px;
    }
}