:root {
    --bg: #070809;
    --bg-soft: #0b0d0f;
    --panel: rgba(17, 19, 22, 0.92);
    --panel-solid: #111316;
    --panel-hover: #171a1e;
    --border: rgba(255,255,255,.08);
    --border-strong: rgba(255,255,255,.14);
    --text: #f5f7fa;
    --muted: #8d949d;
    --accent: #35a8ff;
    --accent-bright: #62bdff;
    --accent-soft: rgba(53,168,255,.12);
    --shadow: 0 24px 70px rgba(0,0,0,.45);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background:
        radial-gradient(circle at 50% -20%, rgba(53,168,255,.08), transparent 38%),
        var(--bg);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    min-height: 100vh;
}

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

button {
    font: inherit;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    height: 76px;
    border-bottom: 1px solid var(--border);
    background: rgba(7,8,9,.82);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.header-inner {
    width: min(1380px, calc(100% - 40px));
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 34px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
}

.brand-mark {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(53,168,255,.65);
    border-radius: 9px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: end;
    gap: 3px;
    padding: 7px;
    background: rgba(53,168,255,.08);
    box-shadow: inset 0 0 20px rgba(53,168,255,.08);
}

.brand-mark span {
    display: block;
    background: var(--accent);
    border-radius: 2px;
}

.brand-mark span:nth-child(1) {
    height: 45%;
}

.brand-mark span:nth-child(2) {
    height: 75%;
}

.brand-mark span:nth-child(3) {
    height: 100%;
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
    letter-spacing: .08em;
}

.brand-text strong {
    font-size: 13px;
    font-weight: 800;
}

.brand-text small {
    margin-top: 4px;
    color: var(--accent);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .27em;
}

.main-navigation {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 100%;
    flex: 1;
}

.nav-link {
    position: relative;
    height: 42px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #aeb4bc;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: .2s ease;
}

.nav-link:hover,
.nav-link.active {
    color: var(--text);
    background: rgba(255,255,255,.055);
}

.nav-link.active::after {
    content: "";
    position: absolute;
    left: 13px;
    right: 13px;
    bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
}

.nav-icon {
    width: 17px;
    height: 17px;
    display: inline-flex;
}

.nav-icon svg,
.header-action svg,
.browse-item-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nav-dropdown {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.nav-button {
    outline: none;
}

.chevron {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .2s ease;
}

.nav-dropdown.open .chevron {
    transform: rotate(180deg);
}

.browse-menu {
    position: absolute;
    top: calc(100% - 2px);
    left: 0;
    width: 330px;
    max-height: calc(100vh - 95px);
    overflow-y: auto;
    padding: 10px;
    border: 1px solid var(--border-strong);
    border-radius: 16px;
    background: rgba(13,15,18,.97);
    box-shadow: var(--shadow);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.nav-dropdown.open .browse-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.browse-heading {
    padding: 12px 12px 10px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 5px;
}

.browse-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: var(--accent);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .18em;
}

.browse-heading strong {
    font-size: 15px;
}

.browse-game {
    border-bottom: 1px solid rgba(255,255,255,.045);
}

.browse-game:last-child {
    border-bottom: 0;
}

.browse-game-button {
    width: 100%;
    min-height: 66px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 11px;
    border: 0;
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    border-radius: 10px;
    transition: background .18s ease;
}

.browse-game-button:hover {
    background: rgba(255,255,255,.045);
}

.browse-item-icon {
    width: 35px;
    height: 35px;
    flex: 0 0 35px;
    padding: 8px;
    display: inline-flex;
    border-radius: 9px;
    color: var(--accent);
    background: var(--accent-soft);
}

.browse-item-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.browse-item-text strong {
    font-size: 13px;
    font-weight: 700;
}

.browse-item-text small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 10px;
}

.submenu-chevron {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: #707780;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .2s ease;
}

.browse-game.expanded .submenu-chevron {
    transform: rotate(90deg);
    stroke: var(--accent);
}

.browse-submenu {
    display: none;
    padding: 0 10px 9px 58px;
}

.browse-game.expanded .browse-submenu {
    display: block;
    animation: submenuIn .18s ease;
}

@keyframes submenuIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.browse-submenu a {
    min-height: 37px;
    display: flex;
    align-items: center;
    padding: 0 11px;
    color: #969da6;
    border-radius: 8px;
    font-size: 12px;
    transition: .18s ease;
}

.browse-submenu a::before {
    content: "";
    width: 4px;
    height: 4px;
    margin-right: 10px;
    border-radius: 50%;
    background: #4c535b;
    transition: .18s ease;
}

.browse-submenu a:hover {
    color: var(--text);
    background: rgba(53,168,255,.07);
}

.browse-submenu a:hover::before {
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.header-action {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #9da4ad;
    cursor: pointer;
    transition: .2s ease;
}

.header-action svg {
    width: 18px;
    height: 18px;
}

.header-action:hover {
    color: var(--text);
    border-color: var(--border);
    background: rgba(255,255,255,.05);
}

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

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

.temporary-home {
    width: min(1000px, calc(100% - 40px));
    min-height: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.section-kicker {
    color: var(--accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .25em;
}

.temporary-home h1 {
    margin: 18px 0;
    max-width: 800px;
    font-size: clamp(48px, 7vw, 88px);
    line-height: .98;
    letter-spacing: -.055em;
}

.temporary-home h1 span {
    color: var(--accent);
}

.temporary-home p {
    max-width: 540px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.7;
}

.temporary-status {
    width: fit-content;
    margin-top: 25px;
    padding: 9px 13px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--border);
    border-radius: 100px;
    color: #aab1ba;
    background: rgba(255,255,255,.03);
    font-size: 11px;
}

.temporary-status span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #45dc8b;
    box-shadow: 0 0 10px rgba(69,220,139,.8);
}

.site-footer {
    border-top: 1px solid var(--border);
    background: #090b0d;
}

.footer-inner {
    width: min(1380px, calc(100% - 40px));
    margin: 0 auto;
    padding: 65px 0;
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: 50px;
}

.footer-brand p {
    max-width: 310px;
    margin: 20px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.footer-column h3 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.footer-column a {
    width: fit-content;
    color: #858c95;
    font-size: 12px;
    transition: color .18s ease;
}

.footer-column a:hover {
    color: var(--accent);
}

.footer-bottom {
    width: min(1380px, calc(100% - 40px));
    margin: 0 auto;
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid var(--border);
    color: #626971;
    font-size: 10px;
}

@media (max-width: 900px) {

    .header-inner {
        width: calc(100% - 24px);
        gap: 15px;
    }

    .main-navigation {
        position: fixed;
        top: 76px;
        left: 12px;
        right: 12px;
        height: auto;
        max-height: calc(100vh - 88px);
        overflow-y: auto;
        padding: 10px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        border: 1px solid var(--border-strong);
        border-radius: 16px;
        background: rgba(10,12,14,.97);
        box-shadow: var(--shadow);
        backdrop-filter: blur(24px);
    }

    .main-navigation.mobile-open {
        display: flex;
    }

    .nav-link {
        width: 100%;
        justify-content: flex-start;
    }

    .nav-link.active::after {
        display: none;
    }

    .nav-dropdown {
        height: auto;
        display: block;
    }

    .nav-button {
        width: 100%;
    }

    .browse-menu {
        position: static;
        width: 100%;
        max-height: none;
        margin-top: 3px;
        padding: 5px;
        border: 0;
        border-radius: 10px;
        background: rgba(255,255,255,.025);
        box-shadow: none;
        backdrop-filter: none;
        opacity: 0;
        visibility: hidden;
        display: none;
        transform: none;
    }

    .nav-dropdown.open .browse-menu {
        display: block;
        opacity: 1;
        visibility: visible;
    }

    .header-actions {
        margin-left: auto;
    }

    .mobile-menu-button {
        width: 40px;
        height: 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: transparent;
        cursor: pointer;
    }

    .mobile-menu-button span {
        width: 17px;
        height: 1.5px;
        background: #bfc5cc;
        transition: .2s ease;
    }

    .mobile-menu-button.open span:nth-child(1) {
        transform: translateY(5.5px) rotate(45deg);
    }

    .mobile-menu-button.open span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-button.open span:nth-child(3) {
        transform: translateY(-5.5px) rotate(-45deg);
    }

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

@media (max-width: 600px) {

    .brand-text {
        display: none;
    }

    .header-action {
        width: 36px;
    }

    .footer-inner {
        grid-template-columns: 1fr;
        gap: 35px;
        padding: 45px 0;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 7px;
    }

    .temporary-home {
        min-height: 550px;
    }
}

/* Real Simulation World logo */
.brand-logo {
    display: block;
    width: 150px;
    height: 58px;
    object-fit: contain;
    object-position: left center;
}

.footer-logo {
    width: 180px;
    height: 90px;
    object-position: left center;
}

@media (max-width: 600px) {
    .brand-logo {
        width: 125px;
        height: 52px;
    }
}

/* Simulation World header logo - final sizing */
.site-header .brand-logo {
    width: 105px !important;
    height: 64px !important;
    max-width: 105px !important;
    max-height: 64px !important;
    display: block;
    object-fit: contain;
    object-position: center;
    flex-shrink: 0;
}

.site-header .brand {
    width: 125px;
    height: 76px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

@media (max-width: 600px) {
    .site-header .brand {
        width: 105px;
    }

    .site-header .brand-logo {
        width: 90px !important;
        height: 60px !important;
        max-width: 90px !important;
    }
}

/* Smaller Simulation World header logo */
.site-header .brand {
    width: 90px;
}

.site-header .brand-logo {
    width: 72px !important;
    height: 52px !important;
    max-width: 72px !important;
    max-height: 52px !important;
}

@media (max-width: 600px) {
    .site-header .brand {
        width: 78px;
    }

    .site-header .brand-logo {
        width: 64px !important;
        height: 48px !important;
        max-width: 64px !important;
    }
}

/* FINAL HEADER LOGO FIX */
.site-header .brand {
    width: 90px !important;
    height: 76px !important;
    min-width: 90px !important;
    max-width: 90px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

.site-header .brand-logo {
    width: 62px !important;
    height: 52px !important;
    min-width: 62px !important;
    max-width: 62px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    object-fit: contain !important;
    display: block !important;
    flex: 0 0 62px !important;
}


/* =========================================================
   FLOATING GLASS HEADER
   ========================================================= */

.site-header {
    position: sticky;
    top: 0;
    width: 100%;
    height: 76px;
    z-index: 1000;

    transition:
        width .35s cubic-bezier(.22,1,.36,1),
        top .35s cubic-bezier(.22,1,.36,1),
        height .35s cubic-bezier(.22,1,.36,1),
        border-radius .35s cubic-bezier(.22,1,.36,1),
        background .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}


/* Scrolled state */
.site-header.header-scrolled {
    width: min(1180px, calc(100% - 32px));
    height: 64px;
    top: 12px;
    margin: 0 auto;

    border: 1px solid rgba(255,255,255,.11);
    border-radius: 18px;

    background: rgba(10,12,15,.62);

    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);

    box-shadow:
        0 14px 45px rgba(0,0,0,.32),
        inset 0 1px 0 rgba(255,255,255,.045);
}


/* Slightly compress the contents */
.site-header.header-scrolled .header-inner {
    width: calc(100% - 24px);
}


/* Make navigation slightly more compact */
.site-header.header-scrolled .nav-link {
    height: 38px;
    padding-left: 11px;
    padding-right: 11px;
}


/* Smaller logo area while floating */
.site-header.header-scrolled .brand {
    height: 64px !important;
}


/* Mobile */
@media (max-width: 900px) {

    .site-header.header-scrolled {
        width: calc(100% - 20px);
        top: 10px;
        border-radius: 16px;
    }

    .site-header.header-scrolled .main-navigation {
        top: 70px;
    }
}


@media (max-width: 600px) {

    .site-header.header-scrolled {
        width: calc(100% - 16px);
        top: 8px;
        height: 60px;
        border-radius: 15px;
    }

}

/* =========================================================
   STRONG FLOATING / SQUEEZING HEADER
   ========================================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;

    width: 100%;
    height: 76px;
    margin: 0 auto;

    border: 1px solid transparent;
    border-radius: 0;

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

    transition:
        width .45s cubic-bezier(.22, 1, .36, 1),
        top .45s cubic-bezier(.22, 1, .36, 1),
        height .45s cubic-bezier(.22, 1, .36, 1),
        border-radius .45s cubic-bezier(.22, 1, .36, 1),
        background .45s ease,
        box-shadow .45s ease,
        transform .45s cubic-bezier(.22, 1, .36, 1);
}


/* SCROLLED */
.site-header.header-scrolled {

    width: min(1120px, calc(100% - 56px));
    height: 64px;

    top: 12px;

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

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 20px;

    background: rgba(9, 11, 14, .58);

    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);

    box-shadow:
        0 18px 55px rgba(0,0,0,.42),
        0 4px 15px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.06);

    transform: scaleX(.97);
}


/* Compress the contents slightly */
.site-header.header-scrolled .header-inner {
    width: calc(100% - 28px);
}


/* Smaller navigation */
.site-header.header-scrolled .nav-link {
    height: 38px;
    padding-left: 9px;
    padding-right: 9px;
}


/* Logo becomes smaller */
.site-header.header-scrolled .brand {
    transform: scale(.86);
    transform-origin: left center;
}


/* Header actions compress */
.site-header.header-scrolled .header-actions {
    transform: scale(.92);
    transform-origin: right center;
}


/* Mobile */
@media (max-width: 900px) {

    .site-header.header-scrolled {
        width: calc(100% - 24px);
        top: 10px;
        border-radius: 17px;
        transform: scaleX(.98);
    }

}


@media (max-width: 600px) {

    .site-header.header-scrolled {
        width: calc(100% - 16px);
        height: 60px;
        top: 8px;
        border-radius: 16px;
        transform: scaleX(.97);
    }

}

/* =========================================================
   FINAL FLOATING PILL HEADER
   ========================================================= */

.site-header.header-scrolled {
    position: fixed !important;

    top: 14px !important;
    left: 50% !important;
    right: auto !important;

    width: min(1080px, calc(100% - 40px)) !important;
    height: 62px !important;

    margin: 0 !important;

    transform: translateX(-50%) !important;

    border: 1px solid rgba(255,255,255,.13) !important;
    border-radius: 22px !important;

    background: rgba(8,11,14,.58) !important;

    backdrop-filter: blur(30px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(170%) !important;

    box-shadow:
        0 20px 60px rgba(0,0,0,.48),
        0 5px 20px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.07) !important;

    animation: floatingHeaderIn .35s cubic-bezier(.22,1,.36,1);
}

@keyframes floatingHeaderIn {
    from {
        opacity: .75;
        transform: translateX(-50%) translateY(-12px) scale(.94) !important;
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1) !important;
    }
}


/* Compact contents */
.site-header.header-scrolled .header-inner {
    width: calc(100% - 24px) !important;
    height: 100% !important;
}

.site-header.header-scrolled .brand {
    width: 76px !important;
    min-width: 76px !important;
    height: 62px !important;
}

.site-header.header-scrolled .brand-logo {
    width: 52px !important;
    height: 48px !important;
    max-width: 52px !important;
    max-height: 48px !important;
}

.site-header.header-scrolled .nav-link {
    height: 38px !important;
    padding-left: 9px !important;
    padding-right: 9px !important;
}

.site-header.header-scrolled .header-actions {
    gap: 0 !important;
}


/* Mobile */
@media (max-width: 900px) {

    .site-header.header-scrolled {
        width: calc(100% - 24px) !important;
        top: 10px !important;
        border-radius: 18px !important;
    }

}

@media (max-width: 600px) {

    .site-header.header-scrolled {
        width: calc(100% - 16px) !important;
        height: 58px !important;
        top: 8px !important;
        border-radius: 16px !important;
    }

}

.temporary-home {
    min-height: 1400px !important;
}

/* =========================================================
   ACCOUNT PAGE
   ========================================================= */

.account-page {
    min-height: calc(100vh - 76px);
    padding: 80px 0 120px;
}

.account-container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

.account-header {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-bottom: 45px;
}

.account-avatar {
    width: 82px;
    height: 82px;
    flex: 0 0 82px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(53,168,255,.35);
    border-radius: 24px;
    background:
        linear-gradient(145deg, rgba(53,168,255,.15), rgba(255,255,255,.025));
    box-shadow:
        inset 0 0 30px rgba(53,168,255,.08),
        0 15px 45px rgba(0,0,0,.25);
}

.account-avatar span {
    color: var(--accent);
    font-size: 20px;
    font-weight: 800;
}

.account-heading {
    flex: 1;
}

.account-heading h1 {
    margin: 7px 0 7px;
    font-size: clamp(32px, 4vw, 48px);
    letter-spacing: -.04em;
}

.account-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

.account-settings {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 15px;
    border: 1px solid var(--border);
    border-radius: 11px;
    color: #aeb4bc;
    background: rgba(255,255,255,.025);
    font-size: 12px;
    transition: .2s ease;
}

.account-settings svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
}

.account-settings:hover {
    color: var(--text);
    border-color: var(--border-strong);
    background: rgba(255,255,255,.05);
}

.account-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 18px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: rgba(255,255,255,.025);
    overflow: hidden;
}

.account-stat {
    padding: 24px;
    border-right: 1px solid var(--border);
}

.account-stat:last-child {
    border-right: 0;
}

.account-stat strong {
    display: block;
    font-size: 25px;
    letter-spacing: -.03em;
}

.account-stat span {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 11px;
}

.account-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.account-card {
    min-height: 300px;
    padding: 25px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
    transition: border-color .2s ease, transform .2s ease;
}

.account-card:hover {
    border-color: rgba(255,255,255,.13);
}

.card-title {
    display: flex;
    align-items: center;
    gap: 13px;
}

.card-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: var(--accent);
    background: var(--accent-soft);
}

.card-icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.card-title h2 {
    margin: 0;
    font-size: 15px;
}

.card-title p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 11px;
}

.profile-details {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.profile-details div {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(255,255,255,.05);
}

.profile-details span {
    color: #777f88;
    font-size: 11px;
}

.profile-details strong {
    color: #cbd0d6;
    font-size: 11px;
    font-weight: 600;
}

.card-action {
    margin-top: 22px;
    display: flex;
    justify-content: space-between;
    color: var(--accent);
    font-size: 11px;
    font-weight: 600;
}

.empty-account-state {
    min-height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.empty-account-state.compact {
    min-height: 190px;
}

.empty-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--accent);
    font-size: 18px;
    background: rgba(53,168,255,.05);
}

.empty-account-state strong {
    font-size: 13px;
}

.empty-account-state p {
    max-width: 270px;
    margin: 7px 0 15px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.6;
}

.primary-account-button,
.secondary-account-button {
    padding: 10px 14px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 700;
    transition: .2s ease;
}

.primary-account-button {
    color: #06101a;
    background: var(--accent);
}

.primary-account-button:hover {
    background: var(--accent-bright);
}

.secondary-account-button {
    border: 1px solid var(--border);
    color: #b5bbc2;
    background: rgba(255,255,255,.03);
}

.secondary-account-button:hover {
    color: #fff;
    border-color: var(--border-strong);
}

.security-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
}

.security-row:first-of-type {
    margin-top: 20px;
}

.security-row strong,
.security-row span {
    display: block;
}

.security-row strong {
    color: #d2d6db;
    font-size: 12px;
}

.security-row span {
    margin-top: 4px;
    color: var(--muted);
    font-size: 10px;
}

.security-row a {
    color: var(--accent);
    font-size: 10px;
    white-space: nowrap;
}

@media (max-width: 800px) {

    .account-page {
        padding: 55px 0 80px;
    }

    .account-header {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .account-settings {
        margin-left: 104px;
    }

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

    .account-stat:nth-child(2) {
        border-right: 0;
    }

    .account-stat:nth-child(-n+2) {
        border-bottom: 1px solid var(--border);
    }

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

}

@media (max-width: 500px) {

    .account-container {
        width: calc(100% - 24px);
    }

    .account-header {
        gap: 15px;
    }

    .account-avatar {
        width: 65px;
        height: 65px;
        flex-basis: 65px;
        border-radius: 19px;
    }

    .account-heading h1 {
        font-size: 30px;
    }

    .account-settings {
        margin-left: 80px;
    }

}

/* =========================================================
   FINAL ACCOUNT LAYOUT FIX
   ========================================================= */

.account-page {
    width: 100% !important;
    min-height: auto !important;
    padding: 90px 0 50px !important;
    box-sizing: border-box !important;
}

.account-page .account-container {
    width: calc(100% - 48px) !important;
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

.account-page .account-header {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 22px !important;
    margin-bottom: 45px !important;
    box-sizing: border-box !important;
}

.account-page .account-stats {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    box-sizing: border-box !important;
}

.account-page .account-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    box-sizing: border-box !important;
}

.account-page .account-card {
    width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 800px) {

    .account-page .account-container {
        width: calc(100% - 32px) !important;
    }

    .account-page .account-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .account-page .account-grid {
        grid-template-columns: 1fr !important;
    }

}

@media (max-width: 500px) {

    .account-page .account-container {
        width: calc(100% - 24px) !important;
    }

    .account-page {
        padding-top: 65px !important;
    }

}

/* =========================================================
   AUTH PAGES
   ========================================================= */

.auth-page {
    min-height: calc(100vh - 76px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 70px 20px 100px;
    box-sizing: border-box;
}

.auth-card {
    width: min(430px, 100%);
    padding: 38px;
    border: 1px solid var(--border);
    border-radius: 24px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
    box-shadow:
        0 30px 90px rgba(0,0,0,.38),
        inset 0 1px 0 rgba(255,255,255,.04);
}

.auth-brand {
    display: flex;
    justify-content: center;
    margin-bottom: 28px;
}

.auth-brand img {
    width: 82px;
    height: 82px;
    object-fit: contain;
    display: block;
}

.auth-card .section-kicker {
    display: block;
    margin-bottom: 12px;
}

.auth-card h1 {
    margin: 0;
    font-size: clamp(34px, 5vw, 48px);
    line-height: 1.02;
    letter-spacing: -.045em;
}

.auth-card h1 span {
    color: var(--text);
}

.auth-intro {
    margin: 16px 0 28px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.auth-form label {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.auth-form label > span {
    color: #b8bec6;
    font-size: 11px;
    font-weight: 600;
}

.auth-form input[type="email"],
.auth-form input[type="password"] {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    outline: none;
    color: var(--text);
    background: rgba(255,255,255,.035);
    font: inherit;
    font-size: 13px;
    transition: .2s ease;
    box-sizing: border-box;
}

.auth-form input[type="email"]:focus,
.auth-form input[type="password"]:focus {
    border-color: rgba(53,168,255,.55);
    background: rgba(255,255,255,.05);
    box-shadow: 0 0 0 3px rgba(53,168,255,.08);
}

.auth-remember {
    flex-direction: row !important;
    align-items: center;
    gap: 9px !important;
    margin-top: -2px;
}

.auth-remember input {
    width: 14px;
    height: 14px;
    accent-color: var(--accent);
}

.auth-remember span {
    color: #8f969e !important;
    font-size: 11px !important;
    font-weight: 500 !important;
}

.auth-submit {
    height: 48px;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    color: #06101a;
    background: var(--accent);
    font-size: 13px;
    font-weight: 800;
    transition: .2s ease;
}

.auth-submit:hover {
    background: var(--accent-bright);
    transform: translateY(-1px);
}

.auth-error {
    margin-bottom: 20px;
    padding: 12px 14px;
    border: 1px solid rgba(255,80,80,.22);
    border-radius: 10px;
    color: #ff9b9b;
    background: rgba(255,70,70,.06);
    font-size: 11px;
}

.auth-switch {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 24px;
    color: #777f88;
    font-size: 11px;
}

.auth-switch a {
    color: var(--accent);
    font-weight: 700;
}

@media (max-width: 500px) {

    .auth-page {
        padding: 45px 14px 70px;
    }

    .auth-card {
        padding: 28px 22px;
        border-radius: 20px;
    }

    .auth-brand img {
        width: 70px;
        height: 70px;
    }

}

.auth-form input[type="text"] {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    outline: none;
    color: var(--text);
    background: rgba(255,255,255,.035);
    font: inherit;
    font-size: 13px;
    transition: .2s ease;
    box-sizing: border-box;
}

.auth-form input[type="text"]:focus {
    border-color: rgba(53,168,255,.55);
    background: rgba(255,255,255,.05);
    box-shadow: 0 0 0 3px rgba(53,168,255,.08);
}

.auth-form input[type="text"]::placeholder {
    color: #777f88;
}

/* =========================================================
   USERNAME AVAILABILITY
   ========================================================= */

.username-status {
    display: block;
    min-height: 16px;
    margin-top: 6px;
    font-size: 10px;
    line-height: 1.4;
}

.username-neutral {
    color: #777f88;
}

.username-checking {
    color: #8d949d;
}

.username-available {
    color: #5ed694;
}

.username-taken {
    color: #ff8585;
}

/* =========================================================
   STABLE FLOATING HEADER - NO SCROLL FLICKER
   ========================================================= */

.site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 76px !important;
    margin: 0 !important;
    transform: none !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
}

body {
    padding-top: 76px;
}

.site-header.header-scrolled {
    position: fixed !important;
    top: 12px !important;
    left: 50% !important;
    width: min(1080px, calc(100% - 40px)) !important;
    height: 64px !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    border-radius: 20px !important;
}

@media (max-width: 600px) {

    .site-header.header-scrolled {
        top: 8px !important;
        width: calc(100% - 16px) !important;
        height: 60px !important;
        border-radius: 15px !important;
    }

}

.account-logout-form {
    margin: 0;
}

.account-logout-button {
    border: 1px solid rgba(255,255,255,.08);
    cursor: pointer;
    font: inherit;
}

.account-logout-button:hover {
    color: #ff8f8f;
    border-color: rgba(255,100,100,.22);
    background: rgba(255,70,70,.06);
}

.account-logout-button svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.auth-success {
    margin-bottom: 20px;
    padding: 12px 14px;
    border: 1px solid rgba(94,214,148,.20);
    border-radius: 10px;
    color: #7be3a5;
    background: rgba(94,214,148,.06);
    font-size: 11px;
    line-height: 1.5;
}

.auth-forgot {
    margin-top: -8px;
    text-align: right;
}

.auth-forgot a {
    color: var(--accent);
    font-size: 11px;
    font-weight: 600;
}

.auth-forgot a:hover {
    color: var(--accent-bright);
}

.auth-link-button {
    padding: 0;
    border: 0;
    color: var(--accent);
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
}

.auth-link-button:hover {
    color: var(--accent-bright);
}

.auth-form input[type="url"],
.auth-form select {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    outline: none;
    color: var(--text);
    background: rgba(255,255,255,.035);
    font: inherit;
    font-size: 13px;
    transition: .2s ease;
    box-sizing: border-box;
}

.auth-form select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.auth-form input[type="url"]:focus,
.auth-form select:focus {
    border-color: rgba(53,168,255,.55);
    background: rgba(255,255,255,.05);
    box-shadow: 0 0 0 3px rgba(53,168,255,.08);
}

.auth-form input[type="url"]::placeholder {
    color: #777f88;
}

.auth-form label small {
    color: #666e77;
    font-size: 9px;
    font-weight: 500;
}

.profile-details strong a {
    color: var(--accent);
}

.profile-details strong a:hover {
    color: var(--accent-bright);
}

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

.creator-page {
    min-height: calc(100vh - 76px);
    padding: 90px 0 120px;
}

.creator-container {
    width: calc(100% - 48px);
    max-width: 1180px;
    margin: 0 auto;
}

.creator-hero {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 45px;
}

.creator-avatar {
    width: 96px;
    height: 96px;
    flex: 0 0 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(53,168,255,.32);
    border-radius: 28px;
    background: linear-gradient(
        145deg,
        rgba(53,168,255,.14),
        rgba(255,255,255,.025)
    );
    box-shadow:
        inset 0 0 30px rgba(53,168,255,.07),
        0 20px 55px rgba(0,0,0,.28);
}

.creator-avatar span {
    color: var(--accent);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.04em;
}

.creator-heading h1 {
    margin: 8px 0 8px;
    font-size: clamp(38px, 5vw, 58px);
    letter-spacing: -.05em;
}

.creator-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.creator-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.creator-links a {
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: #abb2bb;
    background: rgba(255,255,255,.025);
    font-size: 10px;
    font-weight: 600;
}

.creator-links a:hover {
    color: var(--accent);
    border-color: rgba(53,168,255,.28);
    background: rgba(53,168,255,.05);
}

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

@media (max-width: 700px) {

    .creator-container {
        width: calc(100% - 32px);
    }

    .creator-hero {
        align-items: flex-start;
        flex-direction: column;
    }

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

}

@media (max-width: 500px) {

    .creator-container {
        width: calc(100% - 24px);
    }

    .creator-page {
        padding-top: 65px;
    }

}

/* =========================================================
   CREATORS DIRECTORY
   ========================================================= */

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

.creator-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-height: 180px;
    padding: 22px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease;
}

.creator-card:hover {
    transform: translateY(-3px);
    border-color: rgba(53,168,255,.25);
    background:
        linear-gradient(145deg, rgba(53,168,255,.055), rgba(255,255,255,.018));
}

.creator-card-avatar {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(53,168,255,.25);
    border-radius: 16px;
    background: rgba(53,168,255,.07);
}

.creator-card-avatar span {
    color: var(--accent);
    font-size: 14px;
    font-weight: 800;
}

.creator-card-content {
    min-width: 0;
}

.creator-card-kicker {
    color: var(--accent);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .18em;
}

.creator-card h2 {
    margin: 6px 0 6px;
    color: var(--text);
    font-size: 18px;
    letter-spacing: -.03em;
}

.creator-card p {
    margin: 0;
    color: var(--muted);
    font-size: 10px;
}

.creator-card-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
}

.creator-card-links span {
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 7px;
    color: #969da6;
    background: rgba(255,255,255,.02);
    font-size: 8px;
}

.creator-card-arrow {
    position: absolute;
    right: 20px;
    bottom: 18px;
    color: var(--accent);
    font-size: 14px;
    transition: transform .2s ease;
}

.creator-card:hover .creator-card-arrow {
    transform: translateX(3px);
}

@media (max-width: 950px) {

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

}

@media (max-width: 650px) {

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

}

/* =========================================================
   HORIZONTAL CREATORS DIRECTORY
   ========================================================= */

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

.creators-list .creator-card {
    width: 100%;
    min-height: 104px;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    gap: 18px;
    box-sizing: border-box;
}

.creators-list .creator-card-avatar {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    border-radius: 17px;
}

.creators-list .creator-card-content {
    flex: 1;
    min-width: 180px;
}

.creators-list .creator-card-content h2 {
    margin: 4px 0 3px;
    font-size: 18px;
}

.creators-list .creator-card-content p {
    margin: 0;
}

.creator-card-socials {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px;
    min-width: 150px;
}

.creator-card-socials span {
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: #9299a2;
    background: rgba(255,255,255,.02);
    font-size: 9px;
}

.creators-list .creator-card-arrow {
    position: static;
    margin-left: 8px;
    flex: 0 0 auto;
    font-size: 16px;
}

.creator-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 28px;
}

.pagination-button,
.pagination-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    border: 1px solid var(--border);
    border-radius: 9px;
    color: #aab1ba;
    background: rgba(255,255,255,.025);
    font-size: 10px;
    font-weight: 600;
    transition: .2s ease;
}

.pagination-button {
    padding: 0 13px;
}

.pagination-page {
    width: 36px;
}

.pagination-pages {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pagination-button:hover,
.pagination-page:hover {
    color: var(--accent);
    border-color: rgba(53,168,255,.28);
    background: rgba(53,168,255,.05);
}

.pagination-page.active {
    color: #06101a;
    border-color: var(--accent);
    background: var(--accent);
}

.pagination-button.disabled {
    opacity: .35;
    pointer-events: none;
}

@media (max-width: 700px) {

    .creators-list .creator-card {
        padding: 16px;
        gap: 14px;
    }

    .creator-card-socials {
        display: none;
    }

    .creators-list .creator-card-content {
        min-width: 0;
    }

    .creator-pagination {
        gap: 8px;
    }

    .pagination-button {
        padding: 0 10px;
    }

}

@media (max-width: 500px) {

    .creators-list .creator-card-avatar {
        width: 50px;
        height: 50px;
        flex-basis: 50px;
    }

    .creator-pagination {
        flex-wrap: wrap;
    }

}

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

.creator-search-form {
    margin: -10px 0 22px;
}

.creator-search-box {
    display: flex;
    align-items: center;
    width: 100%;
    height: 52px;
    padding: 0 7px 0 16px;
    gap: 10px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(255,255,255,.025);
    box-sizing: border-box;
    transition: .2s ease;
}

.creator-search-box:focus-within {
    border-color: rgba(53,168,255,.4);
    background: rgba(255,255,255,.035);
    box-shadow: 0 0 0 3px rgba(53,168,255,.06);
}

.creator-search-box svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    fill: none;
    stroke: #747c85;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.creator-search-box input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    color: var(--text);
    background: transparent;
    font: inherit;
    font-size: 13px;
}

.creator-search-box input::placeholder {
    color: #666e77;
}

.creator-search-box input::-webkit-search-cancel-button {
    display: none;
}

.creator-search-box button,
.creator-search-clear {
    flex: 0 0 auto;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: #aeb5bd;
    background: rgba(255,255,255,.025);
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    box-sizing: border-box;
}

.creator-search-box button:hover,
.creator-search-clear:hover {
    color: var(--accent);
    border-color: rgba(53,168,255,.28);
    background: rgba(53,168,255,.05);
}

@media (max-width: 500px) {

    .creator-search-box {
        padding-left: 12px;
    }

    .creator-search-box button {
        padding: 0 11px;
    }

}

/* =========================================================
   CREATOR FOLLOW
   ========================================================= */

.creator-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 13px;
}

.creator-meta span,
.creator-own-profile {
    padding: 6px 9px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: #8f969f;
    background: rgba(255,255,255,.02);
    font-size: 9px;
    font-weight: 600;
}

.creator-follow-form {
    display: inline-flex;
    margin: 0;
}

.creator-follow-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 13px;
    border: 1px solid rgba(53,168,255,.3);
    border-radius: 10px;
    color: #06101a;
    background: var(--accent);
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
    transition: .2s ease;
}

.creator-follow-button:hover {
    background: var(--accent-bright);
    transform: translateY(-1px);
}

.creator-follow-button.following {
    color: #aeb6bf;
    border-color: var(--border);
    background: rgba(255,255,255,.04);
}

.creator-follow-button.following:hover {
    color: #ff9999;
    border-color: rgba(255,100,100,.2);
    background: rgba(255,70,70,.05);
}

.creator-links {
    align-items: center;
}

/* =========================================================
   CHOOSE GAME FOR MOD UPLOAD
   ========================================================= */

.game-upload-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.game-upload-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    min-height: 105px;
    padding: 20px 24px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
    box-sizing: border-box;
    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease;
}

.game-upload-card:hover {
    transform: translateX(4px);
    border-color: rgba(53,168,255,.28);
    background:
        linear-gradient(145deg, rgba(53,168,255,.05), rgba(255,255,255,.018));
}

.game-upload-icon {
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(53,168,255,.25);
    border-radius: 17px;
    color: var(--accent);
    background: rgba(53,168,255,.06);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
}

.game-upload-card > div:nth-child(2) {
    min-width: 0;
}

.game-upload-card h2 {
    margin: 5px 0 4px;
    color: var(--text);
    font-size: 17px;
    letter-spacing: -.025em;
}

.game-upload-card p {
    margin: 0;
    color: var(--muted);
    font-size: 10px;
}

.game-upload-arrow {
    margin-left: auto;
    color: var(--accent);
    font-size: 17px;
}

@media (max-width: 500px) {

    .game-upload-card {
        padding: 16px;
    }

    .game-upload-icon {
        width: 52px;
        height: 52px;
        flex-basis: 52px;
        border-radius: 14px;
        font-size: 9px;
    }

    .game-upload-card h2 {
        font-size: 14px;
    }

}

/* =========================================================
   UPLOAD GAME CHOOSER - COMPACT WIDTH
   ========================================================= */

.upload-page .upload-container {
    width: min(1000px, calc(100% - 48px)) !important;
    max-width: 1000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (max-width: 700px) {
    .upload-page .upload-container {
        width: calc(100% - 32px) !important;
    }
}

@media (max-width: 500px) {
    .upload-page .upload-container {
        width: calc(100% - 24px) !important;
    }
}

/* =========================================================
   BUSSID / BUSSIN MOD UPLOAD
   ========================================================= */

.bussid-upload-card {
    padding-bottom: 32px;
}

.upload-section-spacing {
    margin-top: 12px;
}

.upload-help {
    color: #747c85;
    font-size: 10px;
    line-height: 1.5;
}

.screenshot-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.screenshot-upload {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.screenshot-number {
    color: #aeb5bd;
    font-size: 9px;
    font-weight: 600;
}

.screenshot-box {
    position: relative;
    min-height: 105px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed rgba(255,255,255,.13);
    border-radius: 12px;
    color: #717983;
    background: rgba(255,255,255,.018);
    font-size: 9px;
    cursor: pointer;
    overflow: hidden;
    transition: .2s ease;
}

.screenshot-box:hover {
    color: var(--accent);
    border-color: rgba(53,168,255,.28);
    background: rgba(53,168,255,.025);
}

.screenshot-box input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.editor-shell {
    border: 1px solid var(--border);
    border-radius: 13px;
    overflow: hidden;
    background: rgba(255,255,255,.025);
}

.editor-toolbar {
    display: flex;
    align-items: center;
    gap: 3px;
    min-height: 42px;
    padding: 5px 8px;
    border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,.02);
}

.editor-toolbar span {
    width: 1px;
    height: 20px;
    margin: 0 5px;
    background: var(--border);
}

.editor-toolbar button {
    width: 31px;
    height: 31px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    color: #9299a2;
    background: transparent;
    cursor: pointer;
    font-size: 11px;
}

.editor-toolbar button:hover {
    color: var(--accent);
    background: rgba(53,168,255,.07);
}

.editor-content {
    min-height: 190px;
    padding: 15px;
    outline: none;
    color: #c7cdd4;
    font-size: 13px;
    line-height: 1.7;
}

.editor-content:empty::before {
    content: attr(data-placeholder);
    color: #66707a;
    pointer-events: none;
}

.youtube-preview {
    margin-top: 15px;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    background: #050607;
}

.youtube-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    padding: 0 12px;
    border-bottom: 1px solid var(--border);
}

.youtube-preview-header span {
    color: var(--accent);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .16em;
}

.youtube-preview-header button {
    border: 0;
    color: #777f88;
    background: transparent;
    cursor: pointer;
    font-size: 9px;
}

.youtube-preview-header button:hover {
    color: #ff8b8b;
}

.youtube-frame-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
}

.youtube-frame-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.bussid-upload-page .upload-actions {
    margin-top: 8px;
}

@media (max-width: 900px) {

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

}

@media (max-width: 600px) {

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

    .screenshot-box {
        min-height: 95px;
    }

}

@media (max-width: 420px) {

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

}

/* =========================================================
   UPLOAD FORM BASE STYLES
   ========================================================= */

.upload-page {
    min-height: calc(100vh - 76px);
    padding: 90px 0 120px;
}

.upload-container {
    width: min(1000px, calc(100% - 48px));
    max-width: 1000px;
    margin: 0 auto;
    box-sizing: border-box;
}

.upload-card {
    width: 100%;
    padding: 28px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
    box-sizing: border-box;
}

.upload-section-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
}

.upload-step {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(53,168,255,.22);
    border-radius: 11px;
    color: var(--accent);
    background: rgba(53,168,255,.06);
    font-size: 10px;
    font-weight: 800;
}

.upload-section-heading h2 {
    margin: 0;
    color: var(--text);
    font-size: 17px;
    letter-spacing: -.02em;
}

.upload-section-heading p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 11px;
}

.upload-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

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

.upload-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.upload-field > label {
    color: #b8bec6;
    font-size: 11px;
    font-weight: 700;
}

.upload-field input[type="text"],
.upload-field input[type="url"],
.upload-field select,
.upload-field textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 12px;
    outline: none;
    color: var(--text);
    background: rgba(255,255,255,.035);
    font: inherit;
    font-size: 13px;
    box-sizing: border-box;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.upload-field input[type="text"],
.upload-field input[type="url"],
.upload-field select {
    height: 48px;
    padding: 0 14px;
}

.upload-field textarea {
    min-height: 145px;
    padding: 14px;
    resize: vertical;
    line-height: 1.6;
}

.upload-field input[type="text"]:focus,
.upload-field input[type="url"]:focus,
.upload-field select:focus,
.upload-field textarea:focus {
    border-color: rgba(53,168,255,.5);
    background: rgba(255,255,255,.05);
    box-shadow: 0 0 0 3px rgba(53,168,255,.06);
}

.upload-field input::placeholder,
.upload-field textarea::placeholder {
    color: #68717b;
}

.upload-field select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.upload-field input[readonly] {
    color: #c5cbd2;
    cursor: default;
}

.upload-help {
    color: #737c86;
    font-size: 10px;
    line-height: 1.5;
}

.upload-dropzone {
    position: relative;
    min-height: 145px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px dashed rgba(255,255,255,.15);
    border-radius: 14px;
    background: rgba(255,255,255,.02);
    transition: border-color .2s ease, background .2s ease;
}

.upload-dropzone:hover {
    border-color: rgba(53,168,255,.3);
    background: rgba(53,168,255,.025);
}

.upload-dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.upload-dropzone-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    text-align: center;
    pointer-events: none;
}

.upload-dropzone-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--accent);
    background: rgba(53,168,255,.05);
    font-size: 18px;
}

.upload-dropzone-content strong {
    color: #c9cfd6;
    font-size: 12px;
}

.upload-dropzone-content span:last-child {
    color: #747c85;
    font-size: 10px;
}

.upload-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 8px;
}

.upload-actions .secondary-account-button,
.upload-actions .primary-account-button {
    border: 0;
    cursor: pointer;
}

@media (max-width: 700px) {

    .upload-container {
        width: calc(100% - 32px);
    }

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

}

@media (max-width: 500px) {

    .upload-container {
        width: calc(100% - 24px);
    }

    .upload-page {
        padding-top: 65px;
    }

    .upload-card {
        padding: 20px;
        border-radius: 18px;
    }

    .upload-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

}

/* Dark native dropdown menus */
.upload-field select {
    color-scheme: dark;
}

.upload-field select option {
    background: #17191d;
    color: #e8edf2;
}

.upload-field select option:checked {
    background: #1f6fbe;
    color: #ffffff;
}

/* Live uploaded image previews */
.live-image-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 10px;
    border: 1px solid rgba(53,168,255,.18);
    border-radius: 14px;
    background: rgba(255,255,255,.025);
    overflow: hidden;
}

.live-image-preview img {
    width: 84px;
    height: 64px;
    object-fit: cover;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,.08);
    background: #101214;
    flex-shrink: 0;
}

.live-image-preview-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.live-image-preview-info strong {
    color: #e8edf2;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.live-image-preview-info span {
    color: #737c86;
    font-size: 10px;
}

.screenshot-upload .live-image-preview img {
    width: 100%;
    height: 120px;
}

.screenshot-upload .live-image-preview {
    display: block;
}

.screenshot-upload .live-image-preview-info {
    padding-top: 8px;
}


/* =========================================================
   Improved live image previews
   ========================================================= */

.upload-dropzone:has(.live-image-preview) {
    min-height: 190px;
    padding: 12px;
    box-sizing: border-box;
}

.upload-dropzone:has(.live-image-preview) .upload-dropzone-content {
    display: none;
}

.upload-dropzone .live-image-preview {
    position: absolute;
    inset: 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    align-items: center;
    gap: 18px;
    margin: 0;
    padding: 10px;
    border: 1px solid rgba(53,168,255,.16);
    border-radius: 11px;
    background: rgba(8,11,14,.72);
    box-sizing: border-box;
    pointer-events: none;
}

.upload-dropzone .live-image-preview img {
    width: 100%;
    height: 145px;
    object-fit: cover;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,.08);
    background: #101214;
}

.upload-dropzone .live-image-preview-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden;
}

.upload-dropzone .live-image-preview-info strong {
    display: block;
    color: #e8edf2;
    font-size: 11px;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: anywhere;
}

.upload-dropzone .live-image-preview-info span {
    color: #737c86;
    font-size: 10px;
}

/* Screenshot preview */
.screenshot-box:has(.live-image-preview) {
    min-height: 125px;
    padding: 6px;
    box-sizing: border-box;
}

.screenshot-box:has(.live-image-preview) > span {
    display: none;
}

.screenshot-box .live-image-preview {
    position: absolute;
    inset: 6px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    pointer-events: none;
}

.screenshot-box .live-image-preview img {
    width: 100%;
    height: 82px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.08);
}

.screenshot-box .live-image-preview-info {
    min-width: 0;
    display: block;
    overflow: hidden;
}

.screenshot-box .live-image-preview-info strong {
    display: block;
    color: #aeb5bd;
    font-size: 8px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.screenshot-box .live-image-preview-info span {
    display: none;
}

/* Keep the invisible file picker above the preview */
.upload-dropzone input[type="file"],
.screenshot-box input[type="file"] {
    z-index: 5;
}


/* ==========================================================
   MOD PAGES
   ========================================================== */

.mod-page {
    --mod-max: 1380px;
    background:
        radial-gradient(circle at 70% 0%, rgba(53,168,255,.07), transparent 35%),
        var(--bg);
}

.mod-container {
    width: min(var(--mod-max), calc(100% - 40px));
    margin: 0 auto;
}

.mod-hero {
    padding: 28px 0 55px;
    border-bottom: 1px solid var(--border);
    background:
        linear-gradient(180deg, rgba(53,168,255,.035), transparent 70%);
}

.mod-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
    color: #6f7780;
    font-size: 11px;
}

.mod-breadcrumb a:hover {
    color: var(--accent);
}

.mod-hero-grid {
    display: grid;
    grid-template-columns: minmax(300px, 560px) minmax(0, 1fr);
    gap: 42px;
    align-items: center;
}

.mod-cover {
    overflow: hidden;
    border: 1px solid var(--border-strong);
    border-radius: 18px;
    background: var(--panel-solid);
    box-shadow: var(--shadow);
    aspect-ratio: 16 / 10;
}

.mod-cover img,
.mod-gallery-item img,
.mod-related-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.mod-cover-empty {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: var(--muted);
    font-size: 13px;
}

.mod-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.mod-badge {
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
}

.mod-badge-category {
    color: var(--accent-bright);
    background: var(--accent-soft);
    border: 1px solid rgba(53,168,255,.18);
}

.mod-badge-free {
    color: #67e3a1;
    background: rgba(69,220,139,.09);
    border: 1px solid rgba(69,220,139,.18);
}

.mod-badge-paid {
    color: #ffd36a;
    background: rgba(255,190,60,.09);
    border: 1px solid rgba(255,190,60,.18);
}

.mod-hero-info h1 {
    margin: 0;
    max-width: 850px;
    color: var(--text);
    font-size: clamp(34px, 5vw, 64px);
    line-height: 1.02;
    letter-spacing: -.045em;
}

.mod-lead {
    max-width: 760px;
    margin: 20px 0 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.75;
}

.mod-meta-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin-top: 30px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--border);
}

.mod-meta-grid > div {
    min-width: 0;
    padding: 14px;
    background: rgba(17,19,22,.82);
}

.mod-meta-grid span {
    display: block;
    margin-bottom: 6px;
    color: #6f7780;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.mod-meta-grid strong {
    display: block;
    overflow: hidden;
    color: #dce1e7;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mod-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin-top: 18px;
    color: var(--muted);
    font-size: 11px;
}

.mod-stats strong {
    color: var(--text);
    margin-right: 4px;
}

.mod-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
}

.mod-download-button {
    min-height: 48px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border: 1px solid rgba(53,168,255,.45);
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(135deg, #168fe7, #35a8ff);
    box-shadow: 0 12px 35px rgba(53,168,255,.18);
    font-size: 13px;
    font-weight: 800;
    transition: .2s ease;
}

.mod-download-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 42px rgba(53,168,255,.25);
}

.mod-creator-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 6px 6px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255,255,255,.025);
}

.mod-creator-link:hover {
    border-color: var(--border-strong);
    background: rgba(255,255,255,.045);
}

.mod-avatar,
.mod-comment-avatar {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--accent-bright);
    background: var(--accent-soft);
    font-weight: 800;
}

.mod-avatar {
    width: 34px;
    height: 34px;
    font-size: 12px;
}

.mod-creator-link small,
.mod-creator-link strong {
    display: block;
}

.mod-creator-link small {
    color: #686f78;
    font-size: 9px;
}

.mod-creator-link strong {
    margin-top: 2px;
    color: #dfe4e9;
    font-size: 11px;
}

.mod-main {
    padding: 55px 0 80px;
}

.mod-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 28px;
    align-items: start;
}

.mod-primary {
    min-width: 0;
}

.mod-panel,
.mod-sidebar-panel {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--panel);
    box-shadow: 0 15px 50px rgba(0,0,0,.18);
}

.mod-panel {
    padding: 28px;
    margin-bottom: 24px;
}

.mod-panel-heading {
    margin-bottom: 22px;
}

.mod-panel-kicker,
.mod-sidebar-heading span,
.mod-section-heading > div > span {
    display: block;
    margin-bottom: 7px;
    color: var(--accent);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .2em;
}

.mod-panel-heading h2,
.mod-section-heading h2 {
    margin: 0;
    color: var(--text);
    font-size: 23px;
    letter-spacing: -.025em;
}

.mod-rich-content {
    color: #aab1ba;
    font-size: 14px;
    line-height: 1.85;
}

.mod-rich-content > *:first-child {
    margin-top: 0;
}

.mod-rich-content > *:last-child {
    margin-bottom: 0;
}

.mod-rich-content h2,
.mod-rich-content h3 {
    margin: 28px 0 10px;
    color: #e9edf1;
}

.mod-rich-content p {
    margin: 0 0 16px;
}

.mod-rich-content ul,
.mod-rich-content ol {
    margin: 0 0 18px;
    padding-left: 22px;
}

.mod-rich-content a {
    color: var(--accent-bright);
}

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

.mod-gallery-item {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--panel-solid);
}

.mod-gallery-item:hover img {
    transform: scale(1.035);
}

.mod-gallery-item img {
    transition: transform .3s ease;
}

.mod-video {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #000;
}

.mod-video iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}

.mod-download-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 24px;
    padding: 28px;
    border: 1px solid rgba(53,168,255,.22);
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0, rgba(53,168,255,.1), transparent 45%),
        var(--panel);
}

.mod-download-panel h2 {
    margin: 0;
    color: #fff;
    font-size: 20px;
}

.mod-download-panel p {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.mod-sidebar {
    position: sticky;
    top: 100px;
}

.mod-sidebar-panel {
    padding: 20px;
    margin-bottom: 18px;
}

.mod-sidebar-heading {
    margin-bottom: 15px;
}

.mod-sidebar-heading h3 {
    margin: 0;
    color: var(--text);
    font-size: 16px;
}

.mod-category-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mod-category-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
    border-radius: 9px;
    color: #989fa8;
    font-size: 11px;
    transition: .18s ease;
}

.mod-category-list a:hover {
    color: #fff;
    background: rgba(53,168,255,.07);
}

.mod-category-list small {
    color: #59616a;
}

.mod-sidebar-mods {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mod-sidebar-mod {
    display: grid;
    grid-template-columns: 68px minmax(0,1fr);
    gap: 11px;
    align-items: center;
    padding: 7px;
    border-radius: 10px;
    transition: .18s ease;
}

.mod-sidebar-mod:hover {
    background: rgba(255,255,255,.035);
}

.mod-sidebar-thumb {
    overflow: hidden;
    aspect-ratio: 1.25;
    border-radius: 7px;
    background: #0a0c0e;
}

.mod-sidebar-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.mod-sidebar-mod strong,
.mod-sidebar-mod small {
    display: block;
}

.mod-sidebar-mod strong {
    overflow: hidden;
    color: #dce1e6;
    font-size: 11px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mod-sidebar-mod small {
    margin-top: 4px;
    color: #666e77;
    font-size: 9px;
}

.mod-sidebar-empty {
    margin: 0;
    color: #68707a;
    font-size: 11px;
}

.mod-alert {
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 12px;
}

.mod-alert-success {
    border: 1px solid rgba(69,220,139,.18);
    color: #7de8ae;
    background: rgba(69,220,139,.07);
}

.mod-alert-error {
    border: 1px solid rgba(255,90,90,.2);
    color: #ff9a9a;
    background: rgba(255,90,90,.07);
}

.mod-comment-form {
    margin-bottom: 30px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
}

.mod-comment-form-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.mod-comment-form-header strong,
.mod-comment-form-header span {
    display: block;
}

.mod-comment-form-header strong {
    color: #dfe4e9;
    font-size: 12px;
}

.mod-comment-form-header span {
    margin-top: 3px;
    color: #68707a;
    font-size: 10px;
}

.mod-comment-form textarea {
    width: 100%;
    min-height: 125px;
    resize: vertical;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 11px;
    outline: none;
    color: #e9edf1;
    background: rgba(255,255,255,.025);
    font: inherit;
    font-size: 12px;
    line-height: 1.6;
}

.mod-comment-form textarea:focus {
    border-color: rgba(53,168,255,.45);
    box-shadow: 0 0 0 3px rgba(53,168,255,.07);
}

.mod-comment-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px;
}

.mod-comment-form-actions button {
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 9px;
    color: #dce2e8;
    background: rgba(255,255,255,.04);
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
}

.mod-comment-form-actions button[type="submit"] {
    border-color: rgba(53,168,255,.3);
    color: #fff;
    background: rgba(53,168,255,.16);
}

.mod-comment-form-actions button:hover {
    background: rgba(255,255,255,.08);
}

.mod-login-comment {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 25px;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: rgba(255,255,255,.025);
}

.mod-login-comment p {
    margin: 0;
    color: #8c949d;
    font-size: 11px;
}

.mod-login-comment a {
    flex: 0 0 auto;
    padding: 8px 13px;
    border-radius: 8px;
    color: #fff;
    background: var(--accent);
    font-size: 10px;
    font-weight: 800;
}

.mod-comments-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mod-comment {
    display: flex;
    gap: 11px;
}

.mod-comment-avatar {
    width: 34px;
    height: 34px;
    font-size: 10px;
}

.mod-comment-body {
    flex: 1;
    min-width: 0;
}

.mod-comment-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.mod-comment-top strong {
    color: #dfe4e9;
    font-size: 11px;
}

.mod-comment-top time {
    margin-left: 7px;
    color: #5e6670;
    font-size: 9px;
}

.mod-reply-button {
    border: 0;
    padding: 0;
    color: var(--accent);
    background: transparent;
    cursor: pointer;
    font-size: 9px;
    font-weight: 700;
}

.mod-comment-text {
    margin-top: 7px;
    color: #969ea7;
    font-size: 11px;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.mod-replies {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 16px;
    margin-left: 8px;
    padding-left: 15px;
    border-left: 1px solid var(--border);
}

.mod-comment-reply .mod-comment-avatar {
    width: 29px;
    height: 29px;
}

.mod-empty-comments {
    padding: 25px 0 5px;
    color: #626a73;
    text-align: center;
    font-size: 11px;
}

.mod-related {
    margin-top: 55px;
}

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

.mod-section-heading > div > span {
    margin-bottom: 6px;
}

.mod-section-heading a {
    color: var(--accent);
    font-size: 10px;
    font-weight: 700;
}

.mod-related-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 16px;
}

.mod-related-card {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--panel);
    transition: .2s ease;
}

.mod-related-card:hover {
    transform: translateY(-3px);
    border-color: var(--border-strong);
}

.mod-related-image {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: #0a0c0e;
}

.mod-related-content {
    padding: 13px;
}

.mod-related-content > span {
    color: var(--accent);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.mod-related-content h3 {
    margin: 7px 0 5px;
    color: #e6eaee;
    font-size: 12px;
    line-height: 1.45;
}

.mod-related-content small {
    color: #626a73;
    font-size: 9px;
}

@media (max-width: 1000px) {

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

    .mod-cover {
        max-width: 700px;
    }

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

    .mod-sidebar {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }

    .mod-sidebar-panel {
        margin-bottom: 0;
    }

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

@media (max-width: 700px) {

    .mod-container {
        width: calc(100% - 24px);
    }

    .mod-hero {
        padding: 20px 0 35px;
    }

    .mod-hero-grid {
        gap: 25px;
    }

    .mod-hero-info h1 {
        font-size: 36px;
    }

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

    .mod-main {
        padding: 30px 0 55px;
    }

    .mod-panel {
        padding: 20px;
        border-radius: 13px;
    }

    .mod-gallery {
        grid-template-columns: 1fr;
    }

    .mod-download-panel {
        align-items: flex-start;
        flex-direction: column;
        padding: 20px;
    }

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

    .mod-related-grid {
        grid-template-columns: 1fr 1fr;
    }

    .mod-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 480px) {

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

    .mod-hero-info h1 {
        font-size: 31px;
    }

    .mod-stats {
        gap: 13px;
    }

    .mod-hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .mod-download-button,
    .mod-creator-link {
        width: 100%;
    }

    .mod-login-comment {
        align-items: stretch;
        flex-direction: column;
    }

    .mod-related-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   BUSSINMODS-STYLE MOD DETAIL PAGE
   ========================================================== */

.bm-detail-page {
    background:
        radial-gradient(circle at 50% 0, rgba(53,168,255,.06), transparent 32%),
        var(--bg);
    padding: 38px 0 80px;
}

.bm-detail-container {
    width: min(980px, calc(100% - 32px));
    margin: 0 auto;
}

.bm-main-image {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #0b0d0f;
}

.bm-main-image img {
    width: 100%;
    display: block;
    max-height: 620px;
    object-fit: cover;
}

.bm-section {
    margin-top: 34px;
}

.bm-section-title {
    margin: 0 0 18px;
    color: var(--text);
    font-size: 22px;
    line-height: 1.25;
    letter-spacing: -.025em;
}

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

.bm-screenshot {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: #0b0d0f;
}

.bm-screenshot img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .25s ease;
}

.bm-screenshot:hover img {
    transform: scale(1.03);
}

.bm-title-block {
    margin-top: 34px;
}

.bm-title-block h1 {
    margin: 0;
    color: var(--text);
    font-size: clamp(32px, 5vw, 52px);
    line-height: 1.08;
    letter-spacing: -.04em;
}

.bm-subtitle {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 11px;
    color: #8d949d;
    font-size: 13px;
}

.bm-subtitle a {
    color: var(--accent);
}

.bm-created-by {
    margin-top: 10px;
    color: #707780;
    font-size: 12px;
}

.bm-created-by a {
    color: #cbd1d7;
    font-weight: 700;
}

.bm-details {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--panel);
}

.bm-detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 49px;
    padding: 0 16px;
    border-bottom: 1px solid var(--border);
}

.bm-detail-row:last-child {
    border-bottom: 0;
}

.bm-detail-row span {
    color: #727a83;
    font-size: 12px;
}

.bm-detail-row strong {
    color: #dce1e6;
    font-size: 12px;
    text-align: right;
}

.bm-rich-content {
    color: #a6adb6;
    font-size: 14px;
    line-height: 1.85;
}

.bm-rich-content p {
    margin: 0 0 17px;
}

.bm-rich-content > :last-child {
    margin-bottom: 0;
}

.bm-rich-content h3 {
    margin: 25px 0 12px;
    color: #e5e9ed;
    font-size: 17px;
}

.bm-rich-content ul,
.bm-rich-content ol {
    margin: 0;
    padding-left: 23px;
}

.bm-rich-content li {
    margin-bottom: 8px;
}

.bm-rich-content a {
    color: var(--accent);
}

.bm-video {
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: #000;
}

.bm-video iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}

.bm-download-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-top: 34px;
    padding: 24px;
    border: 1px solid rgba(53,168,255,.2);
    border-radius: 14px;
    background:
        radial-gradient(circle at 100% 0, rgba(53,168,255,.09), transparent 45%),
        var(--panel);
}

.bm-download-label {
    display: block;
    margin-bottom: 7px;
    color: var(--accent);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .18em;
}

.bm-download-box h2 {
    margin: 0;
    color: #fff;
    font-size: 21px;
}

.bm-download-box p {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.bm-download-button {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 0 19px;
    border-radius: 10px;
    color: #fff;
    background: var(--accent);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    transition: .2s ease;
}

.bm-download-button:hover {
    background: var(--accent-bright);
    transform: translateY(-1px);
}

.bm-comment-heading {
    margin: -7px 0 19px;
    color: #656d76;
    font-size: 11px;
}

.bm-comment-form {
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
}

.bm-comment-form textarea {
    width: 100%;
    min-height: 125px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 11px;
    outline: none;
    resize: vertical;
    color: #e6eaee;
    background: rgba(255,255,255,.025);
    font: inherit;
    font-size: 12px;
    line-height: 1.6;
}

.bm-comment-form textarea:focus {
    border-color: rgba(53,168,255,.4);
    box-shadow: 0 0 0 3px rgba(53,168,255,.06);
}

.bm-comment-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 10px;
}

.bm-comment-actions button {
    min-height: 37px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 9px;
    color: #dfe4e9;
    background: rgba(255,255,255,.04);
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
}

.bm-comment-actions button[type="submit"] {
    border-color: rgba(53,168,255,.3);
    color: #fff;
    background: rgba(53,168,255,.15);
}

.bm-login-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: rgba(255,255,255,.025);
}

.bm-login-box p {
    margin: 0;
    color: #858d96;
    font-size: 11px;
}

.bm-login-box a {
    padding: 8px 12px;
    border-radius: 8px;
    color: #fff;
    background: var(--accent);
    font-size: 10px;
    font-weight: 800;
}

.bm-comments-list {
    margin-top: 24px;
}

.bm-comment {
    display: flex;
    gap: 11px;
    padding: 18px 0;
    border-bottom: 1px solid var(--border);
}

.bm-comment:last-child {
    border-bottom: 0;
}

.bm-comment-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--accent-bright);
    background: var(--accent-soft);
    font-size: 10px;
    font-weight: 800;
}

.bm-comment-content {
    min-width: 0;
    flex: 1;
}

.bm-comment-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.bm-comment-top strong {
    color: #dde2e7;
    font-size: 11px;
}

.bm-comment-top time {
    margin-left: 7px;
    color: #59616a;
    font-size: 9px;
}

.bm-reply-button {
    border: 0;
    padding: 0;
    color: var(--accent);
    background: transparent;
    cursor: pointer;
    font-size: 9px;
    font-weight: 700;
}

.bm-comment-text {
    margin-top: 7px;
    color: #929aa3;
    font-size: 11px;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.bm-replies {
    margin-top: 14px;
    margin-left: 7px;
    padding-left: 15px;
    border-left: 1px solid var(--border);
}

.bm-comment-reply {
    padding: 9px 0;
    border-bottom: 0;
}

.bm-comment-reply .bm-comment-avatar {
    width: 29px;
    height: 29px;
    flex-basis: 29px;
}

.bm-empty-comments {
    padding: 30px 0 5px;
    color: #626a73;
    text-align: center;
    font-size: 11px;
}

.bm-alert {
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 11px;
}

.bm-alert-success {
    color: #78e5a9;
    border: 1px solid rgba(69,220,139,.18);
    background: rgba(69,220,139,.07);
}

.bm-alert-error {
    color: #ff9b9b;
    border: 1px solid rgba(255,90,90,.18);
    background: rgba(255,90,90,.06);
}

@media (max-width: 700px) {

    .bm-detail-page {
        padding: 24px 0 55px;
    }

    .bm-detail-container {
        width: calc(100% - 24px);
    }

    .bm-title-block h1 {
        font-size: 34px;
    }

    .bm-section {
        margin-top: 28px;
    }

    .bm-section-title {
        font-size: 20px;
    }

    .bm-screenshots {
        grid-template-columns: 1fr;
    }

    .bm-download-box {
        align-items: stretch;
        flex-direction: column;
    }

    .bm-download-button {
        width: 100%;
    }

    .bm-login-box {
        align-items: stretch;
        flex-direction: column;
    }

}

@media (max-width: 480px) {

    .bm-detail-container {
        width: calc(100% - 18px);
    }

    .bm-main-image {
        border-radius: 10px;
    }

    .bm-detail-row {
        min-height: 46px;
        padding: 0 12px;
    }

    .bm-detail-row span,
    .bm-detail-row strong {
        font-size: 11px;
    }

    .bm-title-block h1 {
        font-size: 29px;
    }

}

/* Final mod detail viewport fix */
html,
body {
    overflow-x: hidden;
}

.bm-detail-page {
    width: 100%;
    overflow-x: clip;
}

.bm-detail-container {
    width: min(980px, calc(100% - 32px));
    margin-left: auto;
    margin-right: auto;
}

.bm-main-image {
    width: 100%;
}

.bm-main-image img {
    width: 100%;
    height: auto;
}

@media (max-width: 700px) {
    .bm-detail-container {
        width: calc(100% - 24px);
    }
}

/* FINAL BUSSIN MOD DETAIL POSITIONING */
.site-main {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

.bm-detail-page {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
}

.bm-detail-container {
    width: min(980px, calc(100% - 32px)) !important;
    max-width: 980px !important;
    margin: 0 auto !important;
    justify-self: center !important;
}

@media (max-width: 700px) {
    .bm-detail-container {
        width: calc(100% - 24px) !important;
        max-width: none !important;
    }
}

/* ==========================================================
   MOD DETAIL SIDEBAR
   ========================================================== */

.bm-detail-container {
    width: min(1180px, calc(100% - 32px)) !important;
    max-width: 1180px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 30px;
    align-items: start;
}

.bm-detail-container > *:not(.bm-sidebar) {
    grid-column: 1;
}

.bm-sidebar {
    grid-column: 2;
    grid-row: 1 / -1;
    position: sticky;
    top: 96px;
    min-width: 0;
}

.bm-sidebar-panel {
    margin-bottom: 18px;
    padding: 19px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--panel);
}

.bm-sidebar-heading {
    margin-bottom: 14px;
}

.bm-sidebar-heading span {
    display: block;
    margin-bottom: 5px;
    color: var(--accent);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .2em;
}

.bm-sidebar-heading h2 {
    margin: 0;
    color: var(--text);
    font-size: 16px;
    letter-spacing: -.02em;
}

.bm-sidebar-categories {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bm-sidebar-categories a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 8px;
    color: #949ca5;
    font-size: 11px;
    transition: .18s ease;
}

.bm-sidebar-categories a:hover {
    color: #fff;
    background: rgba(53,168,255,.07);
}

.bm-sidebar-categories small {
    color: #59616a;
    font-size: 9px;
}

.bm-sidebar-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bm-sidebar-mod {
    display: grid;
    grid-template-columns: 64px minmax(0,1fr);
    gap: 10px;
    align-items: center;
    padding: 6px;
    border-radius: 9px;
    transition: .18s ease;
}

.bm-sidebar-mod:hover {
    background: rgba(255,255,255,.035);
}

.bm-sidebar-thumb {
    width: 64px;
    height: 48px;
    overflow: hidden;
    border-radius: 7px;
    background: #0a0c0e;
}

.bm-sidebar-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.bm-sidebar-mod-info {
    min-width: 0;
}

.bm-sidebar-mod-info strong {
    display: block;
    overflow: hidden;
    color: #dce1e6;
    font-size: 10px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bm-sidebar-mod-info small {
    display: block;
    margin-top: 4px;
    color: #626a73;
    font-size: 8px;
}

.bm-sidebar-empty {
    margin: 0;
    color: #646c75;
    font-size: 10px;
}

@media (max-width: 1000px) {
    .bm-detail-container {
        display: block !important;
        width: min(850px, calc(100% - 24px)) !important;
        max-width: 850px !important;
    }

    .bm-sidebar {
        margin-top: 30px;
        position: static;
    }
}

@media (max-width: 600px) {
    .bm-detail-container {
        width: calc(100% - 18px) !important;
    }

    .bm-sidebar-panel {
        padding: 16px;
    }
}

/* FINAL SIDEBAR DESKTOP LAYOUT */
@media (min-width: 901px) {

    .bm-detail-container {
        width: min(1180px, calc(100% - 32px)) !important;
        max-width: 1180px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 300px !important;
        gap: 30px !important;
        align-items: start !important;
    }

    .bm-detail-container > *:not(.bm-sidebar) {
        grid-column: 1 !important;
    }

    .bm-sidebar {
        grid-column: 2 !important;
        grid-row: 1 / -1 !important;
        position: sticky !important;
        top: 96px !important;
        align-self: start !important;
    }
}

@media (max-width: 900px) {

    .bm-detail-container {
        display: block !important;
        width: calc(100% - 24px) !important;
        max-width: none !important;
    }

    .bm-sidebar {
        position: static !important;
        margin-top: 30px !important;
    }
}

/* ==========================================================
   MOD SPECIFICATIONS DASHBOARD
   ========================================================== */

.bm-specs-section {
    position: relative;
}

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

.bm-specs-eyebrow {
    display: block;
    margin-bottom: 6px;
    color: var(--accent);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .2em;
}

.bm-specs-heading .bm-section-title {
    margin-bottom: 0;
}

.bm-specs-count {
    padding: 6px 10px;
    border: 1px solid rgba(53,168,255,.2);
    border-radius: 999px;
    color: var(--accent-bright);
    background: var(--accent-soft);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .04em;
}

.bm-specs-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.bm-spec-card {
    position: relative;
    min-height: 96px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 13px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 13px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.025), rgba(255,255,255,.008)),
        var(--panel);
    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease;
}

.bm-spec-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 18px;
    right: 18px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(53,168,255,.35),
        transparent
    );
    opacity: .55;
}

.bm-spec-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255,255,255,.13);
    background:
        linear-gradient(145deg, rgba(53,168,255,.045), rgba(255,255,255,.012)),
        var(--panel);
}

.bm-spec-card-wide {
    grid-column: span 2;
}

.bm-spec-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(53,168,255,.17);
    border-radius: 11px;
    color: var(--accent-bright);
    background: rgba(53,168,255,.08);
    font-size: 12px;
    font-weight: 900;
}

.bm-spec-content {
    min-width: 0;
}

.bm-spec-content span {
    display: block;
    margin-bottom: 6px;
    color: #666e77;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.bm-spec-content strong {
    display: block;
    overflow: hidden;
    color: #e1e6eb;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bm-spec-highlight {
    border-color: rgba(53,168,255,.22);
    background:
        radial-gradient(
            circle at 100% 0,
            rgba(53,168,255,.11),
            transparent 55%
        ),
        var(--panel);
}

.bm-spec-highlight .bm-spec-icon {
    color: #fff;
    background: rgba(53,168,255,.14);
    border-color: rgba(53,168,255,.3);
}

.bm-spec-free {
    border-color: rgba(69,220,139,.15);
}

.bm-spec-free .bm-spec-icon {
    color: #73e6a8;
    background: rgba(69,220,139,.08);
    border-color: rgba(69,220,139,.16);
}

.bm-spec-paid {
    border-color: rgba(255,190,60,.16);
}

.bm-spec-paid .bm-spec-icon {
    color: #ffd56f;
    background: rgba(255,190,60,.08);
    border-color: rgba(255,190,60,.17);
}

@media (max-width: 900px) {

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

    .bm-spec-card-wide {
        grid-column: span 2;
    }

}

@media (max-width: 600px) {

    .bm-specs-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .bm-specs-grid {
        grid-template-columns: 1fr;
    }

    .bm-spec-card,
    .bm-spec-card-wide {
        grid-column: auto;
    }

    .bm-spec-card {
        min-height: 84px;
        padding: 15px;
    }

}


/* ==========================================================
   FINAL MOD SECTION CARD DESIGN
   ========================================================== */

.bm-section {
    margin-top: 22px !important;
    padding: 22px !important;
    border: 1px solid rgba(255,255,255,.075) !important;
    border-radius: 14px !important;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.025),
            rgba(255,255,255,.008)
        ),
        rgba(17,19,22,.88) !important;
    box-shadow:
        0 10px 35px rgba(0,0,0,.14),
        inset 0 1px 0 rgba(255,255,255,.02) !important;
}

.bm-section:first-of-type {
    margin-top: 28px !important;
}

.bm-section:hover {
    border-color: rgba(255,255,255,.105) !important;
}

.bm-section-title {
    position: relative;
    margin: 0 0 15px !important;
    padding-left: 11px !important;
    color: #f3f6f9 !important;
    font-size: 19px !important;
    line-height: 1.25 !important;
    letter-spacing: -.025em;
}

.bm-section-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 3px;
    height: calc(100% - 6px);
    border-radius: 3px;
    background: var(--accent);
    box-shadow: 0 0 12px rgba(53,168,255,.35);
}

.bm-section-title::after {
    content: "";
    display: block;
    width: 34px;
    height: 1px;
    margin-top: 9px;
    background: rgba(53,168,255,.35);
}

.bm-rich-content {
    color: #a9b0b8 !important;
    font-size: 13px !important;
    line-height: 1.8 !important;
}

.bm-rich-content p {
    margin: 0 0 13px !important;
}

.bm-rich-content h3 {
    margin: 21px 0 10px !important;
    color: #e4e9ed !important;
    font-size: 15px !important;
}

.bm-rich-content ul,
.bm-rich-content ol {
    margin: 10px 0 0 !important;
    padding-left: 21px !important;
}

.bm-rich-content li {
    margin-bottom: 7px !important;
}

.bm-screenshots {
    margin-top: 3px;
}

.bm-video {
    margin-top: 3px;
    border-radius: 10px !important;
}

.bm-download-box {
    margin-top: 22px !important;
    padding: 21px !important;
    border-radius: 14px !important;
    box-shadow:
        0 10px 35px rgba(0,0,0,.14),
        inset 0 1px 0 rgba(255,255,255,.025) !important;
}

.bm-comments {
    margin-top: 22px !important;
}

.bm-specs-section {
    padding: 22px !important;
}

.bm-specs-grid {
    margin-top: 3px;
}

/* Make each card visually separate from the page */
.bm-spec-card {
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.028),
            rgba(255,255,255,.01)
        ),
        #111316 !important;
}

/* Better mobile card proportions */
@media (max-width: 600px) {

    .bm-section {
        padding: 17px !important;
        margin-top: 17px !important;
        border-radius: 12px !important;
    }

    .bm-section-title {
        font-size: 18px !important;
    }

    .bm-rich-content {
        font-size: 12px !important;
        line-height: 1.75 !important;
    }

    .bm-download-box,
    .bm-specs-section {
        padding: 17px !important;
    }

}

/* ==========================================================
   SCREENSHOT SHOWCASE
   ========================================================== */

.bm-screenshots-section {
    overflow: hidden;
}

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

.bm-media-heading > div > span {
    display: block;
    margin-bottom: 6px;
    color: var(--accent);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .2em;
}

.bm-media-heading .bm-section-title {
    margin-bottom: 0 !important;
}

.bm-media-count {
    padding: 6px 10px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px;
    color: #737b84;
    background: rgba(255,255,255,.025);
    font-size: 9px;
    font-weight: 700;
}

/* Featured + supporting screenshots */
.bm-screenshot-showcase {
    display: grid;
    grid-template-columns: 1.65fr 1fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.bm-shot-card {
    position: relative;
    display: block;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #0b0d0f;
    isolation: isolate;
}

.bm-shot-card img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition:
        transform .45s cubic-bezier(.2,.7,.2,1),
        filter .3s ease;
}

.bm-shot-featured {
    grid-row: span 2;
    min-height: 420px;
}

.bm-shot-card:not(.bm-shot-featured) {
    min-height: 204px;
}

.bm-shot-overlay {
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px;
    background: linear-gradient(
        180deg,
        transparent,
        rgba(0,0,0,.72)
    );
    opacity: 0;
    transform: translateY(5px);
    transition:
        opacity .25s ease,
        transform .25s ease;
}

.bm-shot-card:hover img {
    transform: scale(1.035);
    filter: brightness(.82);
}

.bm-shot-card:hover .bm-shot-overlay {
    opacity: 1;
    transform: translateY(0);
}

.bm-shot-number {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 8px;
    color: #e9edf1;
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(8px);
    font-size: 9px;
    font-weight: 800;
}

.bm-shot-view {
    padding: 7px 9px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    color: #fff;
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(8px);
    font-size: 9px;
    font-weight: 700;
}

@media (max-width: 800px) {

    .bm-screenshot-showcase {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }

    .bm-shot-featured {
        grid-column: span 2;
        grid-row: auto;
        min-height: 360px;
    }

    .bm-shot-card:not(.bm-shot-featured) {
        min-height: 180px;
    }

}

@media (max-width: 600px) {

    .bm-media-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .bm-screenshot-showcase {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .bm-shot-featured {
        grid-column: auto;
        min-height: 250px;
    }

    .bm-shot-card:not(.bm-shot-featured) {
        min-height: 190px;
    }

    .bm-shot-overlay {
        opacity: 1;
        transform: none;
    }

}


.bm-rich-content code {
    display: inline-block;
    padding: 2px 5px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 4px;
    color: #ff6f6f;
    background: rgba(255,255,255,.035);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .86em;
}

.bm-rich-content ol > li {
    padding-left: 4px;
    margin-bottom: 13px;
}

.bm-rich-content ol > li > strong {
    color: #f1f4f7;
}

.bm-rich-content ul {
    margin-top: 9px !important;
}

.bm-rich-content ul li {
    margin-bottom: 8px !important;
}


/* MOBILE: SIDEBAR AT THE VERY END */
@media (max-width: 900px) {

    .bm-detail-container {
        display: flex !important;
        flex-direction: column !important;
        width: calc(100% - 24px) !important;
        max-width: none !important;
    }

    .bm-sidebar {
        order: 999 !important;
        width: 100% !important;
        position: static !important;
        margin-top: 30px !important;
    }

}

/* ==========================================================
   FINAL MOBILE MOD PAGE ALIGNMENT
   ========================================================== */

@media (max-width: 900px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    .site-main {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .bm-detail-page {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .bm-detail-container {
        width: calc(100% - 24px) !important;
        max-width: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    .bm-sidebar {
        order: 999 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-top: 28px !important;
    }

    /* Every content element stays inside the viewport */
    .bm-detail-container > *,
    .bm-section,
    .bm-download-box,
    .bm-comments,
    .bm-specs-section {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Main image */
    .bm-main-image {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 10px !important;
    }

    .bm-main-image img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: none !important;
        object-fit: contain !important;
    }

    /* Section cards */
    .bm-section {
        margin-top: 18px !important;
        padding: 17px !important;
        border-radius: 12px !important;
    }

    .bm-section-title {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 18px !important;
        line-height: 1.3 !important;
        overflow-wrap: anywhere !important;
    }

    /* Title */
    .bm-title-block {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 22px !important;
    }

    .bm-title-block h1 {
        width: 100% !important;
        max-width: 100% !important;
        font-size: clamp(27px, 8vw, 34px) !important;
        line-height: 1.12 !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    .bm-subtitle {
        width: 100% !important;
        max-width: 100% !important;
        line-height: 1.6 !important;
    }

    .bm-created-by {
        line-height: 1.6 !important;
    }

    /* Screenshot gallery */
    .bm-screenshot-showcase {
        width: 100% !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .bm-shot-featured,
    .bm-shot-card:not(.bm-shot-featured) {
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        aspect-ratio: 16 / 10 !important;
        grid-column: auto !important;
        grid-row: auto !important;
    }

    .bm-shot-card img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* Specification cards */
    .bm-specs-section {
        padding: 17px !important;
    }

    .bm-specs-heading {
        width: 100% !important;
        display: flex !important;
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .bm-specs-grid {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 9px !important;
    }

    .bm-spec-card,
    .bm-spec-card-wide {
        width: 100% !important;
        min-width: 0 !important;
        grid-column: auto !important;
    }

    .bm-spec-card {
        min-height: 78px !important;
        padding: 14px !important;
    }

    .bm-spec-content {
        min-width: 0 !important;
        flex: 1 !important;
    }

    .bm-spec-content strong {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    /* Text content */
    .bm-rich-content {
        width: 100% !important;
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    .bm-rich-content p,
    .bm-rich-content li {
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
    }

    .bm-rich-content ol,
    .bm-rich-content ul {
        padding-left: 20px !important;
    }

    .bm-rich-content code {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* Download card */
    .bm-download-box {
        width: 100% !important;
        margin-top: 18px !important;
        padding: 18px !important;
        display: flex !important;
        align-items: stretch !important;
        flex-direction: column !important;
        gap: 15px !important;
    }

    .bm-download-box h2,
    .bm-download-box p {
        overflow-wrap: anywhere !important;
    }

    .bm-download-button {
        width: 100% !important;
        min-height: 45px !important;
    }

    /* Video */
    .bm-video {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 16 / 9 !important;
    }

    /* Comments */
    .bm-comments {
        width: 100% !important;
        max-width: 100% !important;
    }

    .bm-comment-form textarea {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .bm-comment-actions {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
    }

    .bm-comment-actions button {
        max-width: 100% !important;
    }

    .bm-login-box {
        width: 100% !important;
        max-width: 100% !important;
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .bm-login-box a {
        width: 100% !important;
        text-align: center !important;
    }

    .bm-comment {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .bm-comment-content {
        min-width: 0 !important;
        max-width: calc(100% - 45px) !important;
    }

    .bm-comment-top {
        min-width: 0 !important;
        flex-wrap: wrap !important;
    }

    .bm-comment-text {
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    .bm-replies {
        max-width: 100% !important;
        margin-left: 2px !important;
        padding-left: 12px !important;
    }

    /* Sidebar at bottom */
    .bm-sidebar-panel {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 12px !important;
    }

    .bm-sidebar-mod {
        min-width: 0 !important;
    }

    .bm-sidebar-mod-info {
        min-width: 0 !important;
    }

    .bm-sidebar-mod-info strong {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

}

@media (max-width: 480px) {

    .bm-detail-container {
        width: calc(100% - 18px) !important;
    }

    .bm-section,
    .bm-specs-section {
        padding: 15px !important;
    }

    .bm-title-block h1 {
        font-size: 28px !important;
    }

    .bm-detail-row {
        gap: 12px !important;
    }

    .bm-detail-row strong {
        max-width: 58% !important;
        overflow-wrap: anywhere !important;
    }

    .bm-spec-card {
        padding: 13px !important;
    }

    .bm-spec-icon {
        width: 36px !important;
        height: 36px !important;
        flex-basis: 36px !important;
    }

    .bm-comment-top time {
        display: block !important;
        margin-left: 0 !important;
        margin-top: 3px !important;
    }

}


.bm-delete-comment-form {
    display: inline-flex;
    margin-left: 10px;
}

.bm-delete-comment {
    border: 0 !important;
    padding: 0 !important;
    color: #ff7373 !important;
    background: transparent !important;
    cursor: pointer;
    font-size: 9px !important;
    font-weight: 700;
}

.bm-delete-comment:hover {
    color: #ff9a9a !important;
}

.bm-comment-top > div:first-child {
    min-width: 0;
}


/* ==========================================================
   MOD FAVORITE BUTTON
   ========================================================== */

.bm-favorite-bar {
    display: flex;
    align-items: center;
    margin-top: 22px;
}

.bm-favorite-bar form {
    margin: 0;
}

.bm-favorite-button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 10px;
    color: #b9c0c8;
    background: rgba(255,255,255,.025);
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: 750;
    text-decoration: none;
    transition:
        .2s ease;
}

.bm-favorite-button:hover {
    border-color: rgba(255,105,125,.28);
    color: #fff;
    background: rgba(255,105,125,.06);
    transform: translateY(-1px);
}

.bm-favorite-heart {
    color: #ff7186;
    font-size: 19px;
    line-height: 1;
}

.bm-favorite-text {
    white-space: nowrap;
}

.bm-favorite-count {
    min-width: 22px;
    padding: 4px 6px;
    border-radius: 6px;
    color: #737b84;
    background: rgba(255,255,255,.045);
    font-size: 9px;
    text-align: center;
}

.bm-favorite-button.is-favorited {
    border-color: rgba(255,105,125,.3);
    color: #fff;
    background: rgba(255,105,125,.08);
}

.bm-favorite-button.is-favorited .bm-favorite-heart {
    color: #ff667d;
}

.bm-favorite-button.is-favorited .bm-favorite-count {
    color: #ff91a1;
    background: rgba(255,105,125,.1);
}

@media (max-width: 600px) {

    .bm-favorite-bar {
        margin-top: 17px;
    }

    .bm-favorite-button {
        width: 100%;
        justify-content: center;
    }

}


/* ==========================================================
   FAVORITE + SHARE ACTIONS
   ========================================================== */

.bm-action-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 22px;
}

.bm-action-bar form {
    margin: 0;
}

.bm-action-bar .bm-favorite-button {
    min-height: 44px;
}

.bm-share-button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 14px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 10px;
    color: #b9c0c8;
    background: rgba(255,255,255,.025);
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: 750;
    transition:
        border-color .2s ease,
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.bm-share-button:hover {
    border-color: rgba(53,168,255,.28);
    color: #fff;
    background: rgba(53,168,255,.06);
    transform: translateY(-1px);
}

.bm-share-icon {
    font-size: 16px;
    line-height: 1;
    color: var(--accent-bright);
}

@media (max-width: 600px) {

    .bm-action-bar {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .bm-action-bar form {
        width: 100%;
    }

    .bm-action-bar .bm-favorite-button,
    .bm-share-button {
        width: 100%;
    }

}

@media (max-width: 430px) {

    .bm-action-bar {
        grid-template-columns: 1fr;
    }

}


/* ==========================================================
   FINAL MOD ARTICLE + SIDEBAR STRUCTURE
   ========================================================== */

.bm-detail-container {
    width: min(1180px, calc(100% - 32px)) !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 300px !important;
    gap: 30px !important;
    align-items: start !important;
}

.bm-main-column {
    min-width: 0 !important;
    width: 100% !important;
}

.bm-sidebar {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    position: sticky !important;
    top: 96px !important;
    align-self: start !important;
}

/* Main content always stays in column 1 */
.bm-main-column > * {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* Desktop cover */
.bm-main-image {
    width: min(620px, 100%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Desktop title sits naturally above the cover */
.bm-title-block {
    width: 100% !important;
    margin-top: 0 !important;
}

@media (max-width: 900px) {

    .bm-detail-container {
        width: calc(100% - 24px) !important;
        max-width: none !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    .bm-main-column {
        order: 1 !important;
        width: 100% !important;
    }

    .bm-sidebar {
        order: 2 !important;
        width: 100% !important;
        position: static !important;
        margin-top: 30px !important;
    }

    .bm-main-image {
        width: min(430px, 100%) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

}

@media (max-width: 600px) {

    .bm-detail-container {
        width: calc(100% - 18px) !important;
    }

    .bm-main-image {
        width: 100% !important;
    }

}


/* ==========================================================
   ADMIN CONTROL CENTER
   ========================================================== */

.admin-dashboard {
    margin-bottom: 30px;
    padding: 24px;
    border: 1px solid rgba(53,168,255,.18);
    border-radius: 18px;
    background:
        radial-gradient(circle at 100% 0, rgba(53,168,255,.08), transparent 38%),
        rgba(17,19,22,.94);
    box-shadow:
        0 20px 55px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.025);
}

.admin-dashboard-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.admin-dashboard-header h2 {
    margin: 7px 0 5px;
    color: #f5f7fa;
    font-size: 23px;
}

.admin-dashboard-header p {
    margin: 0;
    color: #7d858e;
    font-size: 12px;
}

.admin-badge {
    padding: 7px 11px;
    border: 1px solid rgba(53,168,255,.25);
    border-radius: 999px;
    color: var(--accent-bright);
    background: var(--accent-soft);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
}

.admin-alert {
    margin-bottom: 18px;
    padding: 11px 13px;
    border: 1px solid rgba(69,220,139,.16);
    border-radius: 9px;
    color: #7de3a8;
    background: rgba(69,220,139,.06);
    font-size: 11px;
}

.admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 9px;
    margin-bottom: 20px;
}

.admin-stat-card {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: rgba(255,255,255,.018);
}

.admin-stat-card span,
.admin-stat-card strong {
    display: block;
}

.admin-stat-card span {
    color: #656d76;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.admin-stat-card strong {
    margin-top: 7px;
    color: #e7ebef;
    font-size: 20px;
}

.admin-stat-warning {
    border-color: rgba(255,190,60,.14);
}

.admin-stat-warning strong {
    color: #ffd26b;
}

.admin-stat-success {
    border-color: rgba(69,220,139,.14);
}

.admin-stat-success strong {
    color: #72e4a4;
}

.admin-panel {
    margin-top: 14px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: rgba(255,255,255,.012);
}

.admin-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 16px;
    border-bottom: 1px solid var(--border);
}

.admin-panel-header span {
    display: block;
    margin-bottom: 4px;
    color: var(--accent);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .18em;
}

.admin-panel-header h3 {
    margin: 0;
    color: #e4e8ec;
    font-size: 14px;
}

.admin-panel-header > strong {
    min-width: 27px;
    padding: 5px 7px;
    border-radius: 7px;
    color: #b7c0c8;
    background: rgba(255,255,255,.045);
    font-size: 10px;
    text-align: center;
}

.admin-moderation-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}

.admin-moderation-item:last-child {
    border-bottom: 0;
}

.admin-item-main,
.admin-comment-preview {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.admin-item-thumb {
    width: 65px;
    height: 48px;
    flex: 0 0 65px;
    overflow: hidden;
    border-radius: 7px;
    background: #0a0c0e;
}

.admin-item-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.admin-item-info,
.admin-comment-preview > div:last-child {
    min-width: 0;
}

.admin-item-info strong,
.admin-item-info span,
.admin-item-info small,
.admin-comment-preview strong,
.admin-comment-preview span,
.admin-comment-preview small {
    display: block;
}

.admin-item-info strong,
.admin-comment-preview strong {
    color: #dfe4e9;
    font-size: 11px;
}

.admin-item-info span,
.admin-comment-preview span {
    margin-top: 3px;
    color: #737b84;
    font-size: 9px;
}

.admin-item-info small,
.admin-comment-preview small {
    margin-top: 4px;
    color: #555d66;
    font-size: 8px;
}

.admin-item-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
    flex-shrink: 0;
}

.admin-item-actions form {
    margin: 0;
}

.admin-item-actions button,
.admin-action-view,
.admin-reject-details summary {
    min-height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 7px;
    color: #aab2ba;
    background: rgba(255,255,255,.025);
    cursor: pointer;
    font-size: 9px;
    font-weight: 700;
    text-decoration: none;
}

.admin-action-view:hover {
    color: #fff;
    border-color: rgba(53,168,255,.2);
}

.admin-action-approve {
    color: #71dfa0 !important;
    border-color: rgba(69,220,139,.16) !important;
    background: rgba(69,220,139,.05) !important;
}

.admin-action-reject {
    color: #ffd06a !important;
    border-color: rgba(255,190,60,.16) !important;
    background: rgba(255,190,60,.05) !important;
}

.admin-action-delete {
    color: #ff7b7b !important;
    border-color: rgba(255,90,90,.16) !important;
    background: rgba(255,90,90,.045) !important;
}

.admin-reject-details {
    position: relative;
}

.admin-reject-details summary {
    list-style: none;
}

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

.admin-reject-form {
    position: absolute;
    z-index: 20;
    top: calc(100% + 7px);
    right: 0;
    width: 260px;
    padding: 10px;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: #0d0f12;
    box-shadow: var(--shadow);
}

.admin-reject-form textarea {
    width: 100%;
    min-height: 80px;
    padding: 9px;
    resize: vertical;
    border: 1px solid var(--border);
    border-radius: 7px;
    outline: none;
    color: #e5e9ed;
    background: rgba(255,255,255,.025);
    font: inherit;
    font-size: 10px;
}

.admin-reject-form button {
    width: 100%;
    margin-top: 7px;
    color: #fff !important;
    background: rgba(255,190,60,.12) !important;
}

.admin-comment-preview {
    align-items: flex-start;
    flex: 1;
}

.admin-comment-preview p {
    max-width: 580px;
    margin: 7px 0 0;
    color: #969ea7;
    font-size: 10px;
    line-height: 1.5;
}

.admin-comment-avatar {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--accent-bright);
    background: var(--accent-soft);
    font-size: 10px;
    font-weight: 800;
}

.admin-empty {
    padding: 25px;
    color: #606872;
    text-align: center;
    font-size: 10px;
}

.admin-quick-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-top: 14px;
}

.admin-quick-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: #9da5ae;
    background: rgba(255,255,255,.018);
    font-size: 10px;
    transition: .18s ease;
}

.admin-quick-links a:hover {
    color: #fff;
    border-color: rgba(53,168,255,.2);
    background: rgba(53,168,255,.035);
}

.admin-quick-links strong {
    color: var(--accent);
}

@media (max-width: 900px) {

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

    .admin-moderation-item {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-item-actions {
        justify-content: flex-start;
    }

}

@media (max-width: 600px) {

    .admin-dashboard {
        padding: 17px;
        border-radius: 13px;
    }

    .admin-dashboard-header {
        align-items: flex-start;
        flex-direction: column;
    }

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

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

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

    .admin-item-actions form,
    .admin-item-actions .admin-action-view,
    .admin-item-actions button {
        flex: 1;
    }

    .admin-reject-form {
        position: fixed;
        top: 50%;
        left: 50%;
        right: auto;
        width: min(300px, calc(100vw - 30px));
        transform: translate(-50%, -50%);
    }

}

/* ==========================================================
   ADMIN DASHBOARD LAUNCH BUTTON
   ========================================================== */

.admin-dashboard-launcher {
    margin: 0 0 18px;
}

.admin-dashboard-toggle {
    width: 100%;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 0 18px;
    border: 1px solid rgba(53,168,255,.2);
    border-radius: 13px;
    color: #dfe5ea;
    background:
        linear-gradient(
            135deg,
            rgba(53,168,255,.08),
            rgba(53,168,255,.025)
        ),
        rgba(17,19,22,.92);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    text-align: left;
    transition:
        border-color .2s ease,
        background .2s ease,
        transform .2s ease;
}

.admin-dashboard-toggle:hover {
    border-color: rgba(53,168,255,.38);
    background:
        linear-gradient(
            135deg,
            rgba(53,168,255,.12),
            rgba(53,168,255,.035)
        ),
        rgba(17,19,22,.96);
    transform: translateY(-1px);
}

.admin-dashboard-toggle strong {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(53,168,255,.18);
    border-radius: 8px;
    color: var(--accent-bright);
    background: var(--accent-soft);
    font-size: 14px;
}

.admin-dashboard-toggle.is-open {
    border-color: rgba(53,168,255,.3);
}

#admin-dashboard-panel[hidden] {
    display: none !important;
}

.admin-dashboard-panel {
    scroll-margin-top: 95px;
}

@media (max-width: 600px) {

    .admin-dashboard-launcher {
        margin-bottom: 14px;
    }

    .admin-dashboard-toggle {
        min-height: 51px;
        padding: 0 14px;
    }

}


/* ==========================================================
   SEPARATE ADMIN DASHBOARD
   ========================================================== */

.admin-page {
    min-height: calc(100vh - 76px);
    padding: 40px 0 80px;
    background:
        radial-gradient(
            circle at 70% 0,
            rgba(53,168,255,.06),
            transparent 35%
        ),
        var(--bg);
}

.admin-page-container {
    width: min(1280px, calc(100% - 40px));
    margin: 0 auto;
}

.admin-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 25px;
}

.admin-page-header h1 {
    margin: 8px 0 6px;
    color: var(--text);
    font-size: clamp(30px, 5vw, 48px);
    line-height: 1.05;
    letter-spacing: -.045em;
}

.admin-page-header p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.admin-page-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

.admin-back-button {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 0 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: #9ca4ad;
    background: rgba(255,255,255,.025);
    font-size: 9px;
    font-weight: 700;
}

.admin-back-button:hover {
    color: #fff;
    border-color: var(--border-strong);
}

.admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0,1fr));
    gap: 9px;
}

.admin-panel {
    margin-top: 22px;
    overflow: visible;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: rgba(17,19,22,.88);
    box-shadow: 0 18px 55px rgba(0,0,0,.16);
}

.admin-panel-header {
    min-height: 68px;
    padding: 14px 17px;
}

.admin-panel-header h2 {
    margin: 0;
    color: #e7ebef;
    font-size: 16px;
}

.admin-queue-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 17px;
    border-bottom: 1px solid var(--border);
}

.admin-queue-item:last-child {
    border-bottom: 0;
}

.admin-queue-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.admin-queue-thumb {
    width: 82px;
    height: 58px;
    flex: 0 0 82px;
    overflow: hidden;
    border-radius: 8px;
    background: #0a0c0e;
}

.admin-queue-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.admin-queue-info {
    min-width: 0;
}

.admin-queue-info h3 {
    margin: 0;
    color: #e1e6eb;
    font-size: 12px;
    line-height: 1.4;
}

.admin-queue-info p {
    margin: 4px 0;
    color: #737b84;
    font-size: 9px;
}

.admin-queue-info > span {
    display: block;
    max-width: 700px;
    overflow: hidden;
    color: #8e969f;
    font-size: 9px;
    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-queue-info small {
    display: block;
    margin-top: 5px;
    color: #555d66;
    font-size: 8px;
}

.admin-queue-actions {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

.admin-queue-actions form {
    margin: 0;
}

.admin-queue-actions button,
.admin-queue-actions summary {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: rgba(255,255,255,.025);
    cursor: pointer;
    font-size: 9px;
    font-weight: 700;
}

.admin-reject-details {
    position: relative;
}

.admin-reject-form {
    position: absolute;
    z-index: 100;
    top: calc(100% + 7px);
    right: 0;
    width: 280px;
    padding: 10px;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: #0d0f12;
    box-shadow: var(--shadow);
}

.admin-reject-form textarea {
    width: 100%;
    min-height: 90px;
    padding: 9px;
    resize: vertical;
    border: 1px solid var(--border);
    border-radius: 7px;
    outline: none;
    color: #e6eaee;
    background: rgba(255,255,255,.025);
    font: inherit;
    font-size: 10px;
}

.admin-reject-form button {
    width: 100%;
    margin-top: 7px;
    color: #fff !important;
    background: rgba(255,190,60,.12) !important;
}

.admin-comment-queue {
    align-items: flex-start;
}

.admin-comment-avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--accent-bright);
    background: var(--accent-soft);
    font-size: 11px;
    font-weight: 800;
}

.admin-comment-body {
    max-width: 800px !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
}

.admin-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 17px;
    border-top: 1px solid var(--border);
}

.admin-pagination a,
.admin-pagination > span {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 7px;
    color: #9ba3ac;
    background: rgba(255,255,255,.02);
    font-size: 9px;
    font-weight: 700;
}

.admin-pagination a:hover {
    color: #fff;
    border-color: rgba(53,168,255,.24);
}

.admin-pagination .disabled {
    color: #414850;
    cursor: default;
}

.admin-pagination .page-status {
    border-color: transparent;
    background: transparent;
    color: #626a73;
}

@media (max-width: 1000px) {

    .admin-stat-grid {
        grid-template-columns: repeat(3, minmax(0,1fr));
    }

}

@media (max-width: 750px) {

    .admin-page-container {
        width: calc(100% - 24px);
    }

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

    .admin-page-actions {
        width: 100%;
        justify-content: space-between;
    }

    .admin-queue-item {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-queue-actions {
        justify-content: flex-start;
    }

}

@media (max-width: 600px) {

    .admin-page {
        padding: 25px 0 55px;
    }

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

    .admin-panel-header {
        padding: 13px;
    }

    .admin-queue-item {
        padding: 13px;
    }

    .admin-queue-thumb {
        width: 70px;
        height: 50px;
        flex-basis: 70px;
    }

    .admin-queue-info > span {
        white-space: normal;
        overflow-wrap: anywhere;
    }

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

    .admin-queue-actions form,
    .admin-queue-actions button,
    .admin-queue-actions summary {
        flex: 1;
    }

    .admin-reject-form {
        position: fixed;
        top: 50%;
        left: 50%;
        right: auto;
        width: min(300px, calc(100vw - 30px));
        transform: translate(-50%, -50%);
    }

}

.admin-dashboard-toggle {
    text-decoration: none;
}


/* Admin user management */
.admin-stat-card-link {
    text-decoration: none;
    color: inherit;
    position: relative;
    cursor: pointer;
}

.admin-stat-card-link small {
    display: block;
    margin-top: 8px;
    opacity: .7;
    font-size: 12px;
}

.admin-user-search {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 18px;
}

.admin-user-search input {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    background: rgba(255,255,255,.04);
    color: inherit;
}

.admin-users-table-wrap {
    overflow-x: auto;
}

.admin-users-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

.admin-users-table th,
.admin-users-table td {
    padding: 14px 12px;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,.08);
    vertical-align: middle;
}

.admin-users-table th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .65;
}

.admin-user-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
}

.admin-user-link:hover strong {
    text-decoration: underline;
}

.admin-user-link small {
    display: block;
    margin-top: 3px;
    opacity: .6;
}

.admin-status-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(255,255,255,.07);
}

.admin-status-active {
    background: rgba(46,204,113,.13);
}

.admin-status-blocked {
    background: rgba(231,76,60,.14);
}

.admin-status-admin {
    background: rgba(155,89,182,.15);
}

.admin-user-profile-card {
    padding: 24px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    background: rgba(255,255,255,.03);
    margin-bottom: 22px;
}

.admin-user-profile-main {
    display: flex;
    align-items: center;
    gap: 16px;
}

.admin-user-large-avatar {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    font-size: 24px;
    font-weight: 800;
}

.admin-user-profile-main h2 {
    margin: 0 0 5px;
}

.admin-user-profile-main p {
    margin: 0;
    opacity: .68;
}

.admin-user-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px;
}

.admin-user-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 22px;
}

.admin-user-stats-grid > div {
    padding: 14px;
    border-radius: 12px;
    background: rgba(255,255,255,.035);
}

.admin-user-stats-grid span {
    display: block;
    font-size: 11px;
    opacity: .6;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.admin-user-stats-grid strong {
    display: block;
    font-size: 20px;
    margin-top: 5px;
}

.admin-user-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 18px;
    font-size: 12px;
    opacity: .58;
}

.admin-user-action-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.admin-user-action-grid form {
    margin: 0;
}

.admin-user-action {
    min-height: 42px;
    padding: 0 15px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    background: rgba(255,255,255,.05);
    color: inherit;
    cursor: pointer;
    font: inherit;
}

.admin-user-action:hover {
    background: rgba(255,255,255,.09);
}

.admin-user-action-delete {
    border-color: rgba(231,76,60,.35);
}

.admin-self-warning {
    margin-bottom: 15px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(241,196,15,.1);
    border: 1px solid rgba(241,196,15,.18);
    font-size: 13px;
}

.admin-action-view {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 9px;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.05);
    color: inherit;
}

.admin-alert-error {
    border-color: rgba(231,76,60,.25);
}

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

    .admin-user-search button,
    .admin-user-search a {
        width: 100%;
    }

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

    .admin-user-profile-card {
        padding: 18px;
    }
}

/* Users management table */
.admin-users-panel {
    overflow: hidden;
}

.admin-users-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.admin-users-table {
    width: 100%;
    min-width: 820px;
    border-collapse: separate;
    border-spacing: 0;
}

.admin-users-table th {
    padding: 15px 18px;
    text-align: left;
    white-space: nowrap;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
    background: rgba(255,255,255,.025);
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.admin-users-table td {
    padding: 16px 18px;
    vertical-align: middle;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.admin-users-table tbody tr {
    transition: background .18s ease;
}

.admin-users-table tbody tr:hover {
    background: rgba(255,255,255,.025);
}

.admin-users-table tbody tr:last-child td {
    border-bottom: 0;
}

.admin-users-table th:first-child,
.admin-users-table td:first-child {
    min-width: 330px;
}

.admin-users-table th:nth-child(2),
.admin-users-table td:nth-child(2) {
    min-width: 110px;
}

.admin-users-table th:nth-child(3),
.admin-users-table td:nth-child(3) {
    min-width: 80px;
}

.admin-users-table th:nth-child(4),
.admin-users-table td:nth-child(4) {
    min-width: 130px;
    white-space: nowrap;
}

.admin-users-table th:nth-child(5),
.admin-users-table td:nth-child(5) {
    min-width: 100px;
}

.admin-user-link {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
}

.admin-user-link strong {
    display: block;
    font-size: 14px;
    line-height: 1.25;
}

.admin-user-link small {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    opacity: .55;
    line-height: 1.3;
}

.admin-comment-avatar {
    width: 42px;
    height: 42px;
    min-width: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(26,154,255,.10);
    border: 1px solid rgba(26,154,255,.20);
    font-size: 12px;
    font-weight: 800;
}

.admin-user-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.admin-user-search input {
    flex: 1;
    width: auto;
    min-width: 0;
    height: 42px;
    box-sizing: border-box;
    padding: 0 14px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    background: rgba(255,255,255,.045);
    color: inherit;
    outline: none;
    font: inherit;
}

.admin-user-search input:focus {
    border-color: rgba(26,154,255,.45);
    box-shadow: 0 0 0 3px rgba(26,154,255,.08);
}

.admin-user-search input::placeholder {
    color: rgba(255,255,255,.42);
}

.admin-user-search button,
.admin-user-search a {
    flex: 0 0 auto;
}

.admin-action-view {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.admin-users-table .admin-status-pill {
    white-space: nowrap;
}

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

    .admin-user-search button,
    .admin-user-search a {
        width: 100%;
    }

    .admin-users-table {
        min-width: 760px;
    }
}


.admin-user-row {
    cursor: pointer;
}

.admin-user-row:hover {
    background: rgba(255,255,255,.035);
}

.admin-user-row:focus {
    outline: 2px solid rgba(26,154,255,.35);
    outline-offset: -2px;
}


/* Admin mod management */
.admin-mod-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.admin-mod-search input,
.admin-mod-search select {
    height: 42px;
    box-sizing: border-box;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    background: rgba(255,255,255,.045);
    color: inherit;
    font: inherit;
    outline: none;
}

.admin-mod-search input {
    flex: 1;
    min-width: 0;
}

.admin-mod-search select {
    min-width: 150px;
}

.admin-mod-list {
    width: 100%;
}

.admin-mod-item {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr) auto 28px;
    align-items: center;
    gap: 15px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    cursor: pointer;
    transition: background .18s ease;
}

.admin-mod-item:last-child {
    border-bottom: 0;
}

.admin-mod-item:hover {
    background: rgba(255,255,255,.03);
}

.admin-mod-item:focus {
    outline: 2px solid rgba(26,154,255,.35);
    outline-offset: -2px;
}

.admin-mod-thumb {
    width: 82px;
    height: 58px;
    overflow: hidden;
    border-radius: 9px;
    background: rgba(255,255,255,.05);
    display: grid;
    place-items: center;
    font-size: 10px;
    opacity: .7;
}

.admin-mod-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-mod-info {
    min-width: 0;
}

.admin-mod-info h3 {
    margin: 0;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-mod-info p {
    margin: 4px 0 0;
    font-size: 12px;
    opacity: .62;
}

.admin-mod-info small {
    display: block;
    margin-top: 5px;
    font-size: 11px;
    opacity: .45;
}

.admin-mod-status {
    white-space: nowrap;
}

.admin-mod-arrow {
    opacity: .4;
    font-size: 18px;
}

.admin-status-pending {
    background: rgba(241,196,15,.12);
}

.admin-mod-detail-card {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 24px;
    padding: 22px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    background: rgba(255,255,255,.03);
    margin-bottom: 22px;
}

.admin-mod-detail-image {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 13px;
    background: rgba(255,255,255,.05);
    display: grid;
    place-items: center;
}

.admin-mod-detail-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-mod-detail-content h2 {
    margin: 10px 0 8px;
}

.admin-mod-description {
    margin: 0;
    opacity: .68;
    line-height: 1.6;
}

.admin-mod-detail-top {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.admin-mod-meta-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 20px;
}

.admin-mod-meta-grid > div {
    padding: 12px;
    border-radius: 10px;
    background: rgba(255,255,255,.035);
}

.admin-mod-meta-grid span {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .5;
}

.admin-mod-meta-grid strong {
    display: block;
    margin-top: 5px;
    font-size: 12px;
}

.admin-mod-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
}

.admin-mod-actions form {
    margin: 0;
}

.admin-mod-reject-details {
    position: relative;
}

.admin-mod-reject-details summary {
    list-style: none;
}

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

.admin-mod-reject-form {
    width: 300px;
    margin-top: 10px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.08);
}

.admin-mod-reject-form textarea {
    width: 100%;
    min-height: 110px;
    resize: vertical;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(0,0,0,.12);
    color: inherit;
    font: inherit;
    margin-bottom: 9px;
}

.admin-rejection-box {
    margin-top: 18px;
    padding: 13px;
    border-radius: 10px;
    background: rgba(231,76,60,.08);
    border: 1px solid rgba(231,76,60,.18);
}

.admin-rejection-box strong {
    display: block;
    font-size: 12px;
}

.admin-rejection-box p {
    margin: 6px 0 0;
    font-size: 13px;
    opacity: .78;
}

@media (max-width: 800px) {
    .admin-mod-search {
        flex-wrap: wrap;
    }

    .admin-mod-search input {
        flex-basis: 100%;
    }

    .admin-mod-detail-card {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 600px) {
    .admin-mod-item {
        grid-template-columns: 62px minmax(0, 1fr) 20px;
        gap: 10px;
        padding: 12px;
    }

    .admin-mod-thumb {
        width: 62px;
        height: 46px;
    }

    .admin-mod-status {
        display: none;
    }

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

    .admin-mod-reject-form {
        width: min(300px, calc(100vw - 50px));
    }
}


/* Admin mod editing */
.admin-mod-edit-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid rgba(26,154,255,.25);
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
}

.admin-mod-edit-link:hover {
    background: rgba(26,154,255,.08);
}

.admin-mod-edit-button {
    text-decoration: none;
}

.admin-edit-mod-panel {
    overflow: hidden;
}

.admin-edit-mod-form {
    padding: 22px;
}

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

.admin-form-field {
    min-width: 0;
}

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

.admin-form-field label {
    display: block;
    margin-bottom: 7px;
    font-size: 12px;
    font-weight: 700;
    opacity: .72;
}

.admin-form-field input,
.admin-form-field select,
.admin-form-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 13px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 10px;
    background: rgba(255,255,255,.035);
    color: inherit;
    font: inherit;
    outline: none;
}

.admin-form-field input,
.admin-form-field select {
    min-height: 44px;
}

.admin-form-field textarea {
    resize: vertical;
    line-height: 1.55;
}

.admin-form-field input:focus,
.admin-form-field select:focus,
.admin-form-field textarea:focus {
    border-color: rgba(26,154,255,.42);
    box-shadow: 0 0 0 3px rgba(26,154,255,.07);
}

.admin-field-error {
    display: block;
    margin-top: 6px;
    color: inherit;
    opacity: .8;
    font-size: 11px;
}

.admin-edit-notice {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 20px;
    padding: 13px 14px;
    border-radius: 10px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.07);
    font-size: 12px;
}

.admin-edit-notice strong {
    white-space: nowrap;
}

.admin-edit-notice span {
    opacity: .58;
}

.admin-edit-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

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

    .admin-form-field-full {
        grid-column: auto;
    }

    .admin-edit-form-actions {
        flex-direction: column;
    }

    .admin-edit-form-actions a,
    .admin-edit-form-actions button {
        width: 100%;
    }

    .admin-edit-notice {
        align-items: flex-start;
        flex-direction: column;
    }
}


.admin-mod-status {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.admin-mod-edit-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid rgba(26,154,255,.25);
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.admin-mod-edit-link:hover {
    background: rgba(26,154,255,.08);
}

@media (max-width: 600px) {
    .admin-mod-status {
        display: none;
    }
}


/* Admin media editing */
.admin-media-edit-section {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 24px;
    padding: 22px;
}

.admin-cover-editor,
.admin-screenshots-editor {
    min-width: 0;
}

.admin-cover-editor > label,
.admin-screenshots-editor > label {
    display: block;
    margin-bottom: 9px;
    font-size: 12px;
    font-weight: 700;
}

.admin-cover-preview {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 12px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    display: grid;
    place-items: center;
    margin-bottom: 10px;
}

.admin-cover-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-cover-editor input[type="file"],
.admin-screenshot-edit-controls input[type="file"],
.admin-add-screenshots input[type="file"] {
    width: 100%;
    margin-top: 8px;
    font-size: 11px;
}

.admin-upload-button,
.admin-upload-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid rgba(26,154,255,.2);
    border-radius: 9px;
    background: rgba(26,154,255,.06);
    cursor: pointer;
    font-size: 12px;
}

.admin-cover-editor > small,
.admin-add-screenshots > small {
    display: block;
    margin-top: 7px;
    opacity: .5;
    font-size: 10px;
}

.admin-screenshot-edit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.admin-screenshot-edit-card {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    background: rgba(255,255,255,.025);
}

.admin-screenshot-edit-card > img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.admin-screenshot-edit-controls {
    padding: 10px;
}

.admin-screenshot-edit-controls > label:first-child {
    display: block;
    margin-bottom: 9px;
    font-size: 11px;
}

.admin-add-screenshots {
    margin-top: 14px;
    padding: 14px;
    border-radius: 11px;
    border: 1px dashed rgba(255,255,255,.12);
}

.admin-add-screenshots > label {
    display: block;
    font-size: 12px;
    font-weight: 700;
}

.admin-rich-editor {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 10px;
    background: rgba(255,255,255,.025);
}

.admin-rich-editor .editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 9px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.025);
}

.admin-rich-editor .editor-toolbar button,
.admin-rich-editor .editor-toolbar select {
    min-height: 32px;
    padding: 0 9px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 7px;
    background: rgba(255,255,255,.035);
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.admin-rich-editor .editor-content {
    min-height: 180px;
    padding: 14px;
    line-height: 1.6;
    outline: none;
    overflow-wrap: anywhere;
}

.admin-rich-editor .editor-content:focus {
    box-shadow: inset 0 0 0 1px rgba(26,154,255,.35);
}

@media (max-width: 850px) {
    .admin-media-edit-section {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 550px) {
    .admin-screenshot-edit-grid {
        grid-template-columns: 1fr;
    }

    .admin-rich-editor .editor-toolbar {
        gap: 4px;
    }

    .admin-rich-editor .editor-toolbar button,
    .admin-rich-editor .editor-toolbar select {
        min-height: 30px;
        padding: 0 7px;
    }
}


/* Fix Admin Mod rich-text editor toolbar */
.admin-rich-editor .editor-toolbar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 9px !important;
}

.admin-rich-editor .editor-toolbar .editor-format,
.admin-rich-editor .editor-toolbar select {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 135px !important;
    max-width: 190px !important;
    height: 34px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

.admin-rich-editor .editor-toolbar button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 34px !important;
    max-width: none !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

.admin-rich-editor .editor-toolbar button[data-editor-command="insertUnorderedList"],
.admin-rich-editor .editor-toolbar button[data-editor-command="insertOrderedList"] {
    min-width: 62px !important;
}

.admin-rich-editor .editor-toolbar button[data-editor-command="createLink"] {
    min-width: 48px !important;
}

@media (max-width: 600px) {
    .admin-rich-editor .editor-toolbar {
        gap: 5px !important;
    }

    .admin-rich-editor .editor-toolbar .editor-format {
        min-width: 120px !important;
        max-width: 150px !important;
    }

    .admin-rich-editor .editor-toolbar button {
        min-width: 32px !important;
        padding: 0 8px !important;
    }

    .admin-rich-editor .editor-toolbar button[data-editor-command="insertUnorderedList"],
    .admin-rich-editor .editor-toolbar button[data-editor-command="insertOrderedList"] {
        min-width: 58px !important;
    }
}


/* Admin comments management */
.admin-comment-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.admin-comment-search input,
.admin-comment-search select {
    height: 42px;
    box-sizing: border-box;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    background: rgba(255,255,255,.045);
    color: inherit;
    font: inherit;
    outline: none;
}

.admin-comment-search input {
    flex: 1;
    min-width: 0;
}

.admin-comment-search select {
    min-width: 145px;
}

.admin-comment-list {
    width: 100%;
}

.admin-comment-item {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr) auto;
    gap: 20px;
    padding: 18px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.admin-comment-item:last-child {
    border-bottom: 0;
}

.admin-comment-user {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.admin-comment-user strong {
    display: block;
    font-size: 13px;
}

.admin-comment-user small {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    opacity: .48;
    overflow-wrap: anywhere;
}

.admin-comment-content {
    min-width: 0;
}

.admin-comment-mod {
    margin-bottom: 7px;
    font-size: 11px;
    opacity: .58;
}

.admin-comment-mod a {
    color: inherit;
    text-decoration: none;
    font-weight: 700;
}

.admin-comment-mod a:hover {
    text-decoration: underline;
}

.admin-comment-body-large {
    line-height: 1.6;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.admin-comment-date {
    display: block;
    margin-top: 8px;
    font-size: 11px;
    opacity: .42;
}

.admin-comment-status {
    align-self: start;
    white-space: nowrap;
}

.admin-comment-actions {
    grid-column: 2 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.admin-comment-actions form {
    margin: 0;
}

.admin-comment-actions button,
.admin-comment-actions a {
    min-height: 36px;
    box-sizing: border-box;
}

@media (max-width: 800px) {
    .admin-comment-search {
        flex-wrap: wrap;
    }

    .admin-comment-search input {
        flex-basis: 100%;
    }

    .admin-comment-item {
        grid-template-columns: 1fr auto;
        gap: 12px;
    }

    .admin-comment-content {
        grid-column: 1 / -1;
    }

    .admin-comment-actions {
        grid-column: 1 / -1;
    }

    .admin-comment-status {
        justify-self: end;
    }
}

@media (max-width: 550px) {
    .admin-comment-search {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-comment-search button,
    .admin-comment-search a,
    .admin-comment-search select {
        width: 100%;
    }
}


/* Admin game selection */
.admin-game-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.admin-game-card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 16px;
    min-height: 130px;
    padding: 22px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    background: rgba(255,255,255,.025);
    color: inherit;
    text-decoration: none;
    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

.admin-game-card:hover {
    background: rgba(255,255,255,.045);
    border-color: rgba(26,154,255,.28);
    transform: translateY(-2px);
}

.admin-game-card:focus {
    outline: 2px solid rgba(26,154,255,.35);
    outline-offset: 2px;
}

.admin-game-card-icon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(26,154,255,.08);
    border: 1px solid rgba(26,154,255,.16);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
}

.admin-game-card-content span {
    display: block;
    font-size: 10px;
    letter-spacing: .12em;
    opacity: .5;
}

.admin-game-card-content h2 {
    margin: 5px 0 5px;
    font-size: 20px;
}

.admin-game-card-content p {
    margin: 0;
    font-size: 12px;
    opacity: .55;
}

.admin-game-card-arrow {
    font-size: 22px;
    opacity: .45;
}

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

@media (max-width: 500px) {
    .admin-game-card {
        grid-template-columns: 52px minmax(0, 1fr) 24px;
        padding: 16px;
        min-height: 105px;
    }

    .admin-game-card-icon {
        width: 52px;
        height: 52px;
    }

    .admin-game-card-content h2 {
        font-size: 17px;
    }
}


/* =========================================================
   PUBLIC MODS - GAME SELECTOR
   ========================================================= */

.mods-games-page {
    min-height: calc(100vh - 80px);
    background: #f8fafc;
}

.mods-games-container {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}

.mods-games-hero {
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
}

.mods-games-hero .mods-games-container {
    padding-top: 56px;
    padding-bottom: 56px;
}

.mods-games-eyebrow {
    margin-bottom: 8px;
    color: #4f46e5;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.mods-games-title {
    margin: 0;
    color: #0f172a;
    font-size: 42px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.025em;
}

.mods-games-subtitle {
    margin: 10px 0 0;
    color: #64748b;
    font-size: 15px;
    line-height: 1.7;
}

.mods-games-main {
    padding-top: 40px;
    padding-bottom: 60px;
}

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

.mods-game-card {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
    padding: 24px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
    text-decoration: none;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.mods-game-card:hover {
    transform: translateY(-3px);
    border-color: #c7d2fe;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.10);
}

.mods-game-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 68px;
    width: 68px;
    height: 68px;
    border-radius: 18px;
    background: #eef2ff;
    color: #4338ca;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.05em;
}

.mods-game-info {
    min-width: 0;
    flex: 1;
}

.mods-game-label {
    display: block;
    margin-bottom: 4px;
    color: #94a3b8;
    font-size: 11px;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.mods-game-info h2 {
    margin: 0;
    color: #0f172a;
    font-size: 21px;
    line-height: 1.3;
    font-weight: 800;
}

.mods-game-info p {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.5;
}

.mods-game-arrow {
    flex: 0 0 auto;
    color: #cbd5e1;
    font-size: 25px;
    line-height: 1;
    transition:
        transform 0.2s ease,
        color 0.2s ease;
}

.mods-game-card:hover .mods-game-arrow {
    transform: translateX(4px);
    color: #6366f1;
}

@media (max-width: 760px) {
    .mods-games-container {
        width: min(100% - 24px, 1180px);
    }

    .mods-games-hero .mods-games-container {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .mods-games-title {
        font-size: 34px;
    }

    .mods-games-main {
        padding-top: 28px;
        padding-bottom: 40px;
    }

    .mods-games-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .mods-game-card {
        padding: 18px;
        gap: 16px;
        border-radius: 16px;
    }

    .mods-game-icon {
        flex-basis: 58px;
        width: 58px;
        height: 58px;
        border-radius: 15px;
    }

    .mods-game-info h2 {
        font-size: 18px;
    }
}


/* =========================================================
   PUBLIC MODS - GAME SELECTOR DARK THEME
   ========================================================= */

.mods-games-page {
    min-height: calc(100vh - 80px);
    background: var(--bg);
}

.mods-games-hero {
    background: var(--bg-soft);
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.mods-games-eyebrow {
    color: var(--accent);
}

.mods-games-title {
    color: #f5f7fa;
}

.mods-games-subtitle {
    color: #9aa3ad;
}

.mods-games-main {
    background: var(--bg);
}

.mods-game-card {
    background: var(--panel-solid);
    border-color: rgba(255,255,255,.08);
    box-shadow: 0 8px 28px rgba(0,0,0,.18);
}

.mods-game-card:hover {
    background: var(--panel-hover);
    border-color: rgba(53,168,255,.35);
    box-shadow: 0 14px 34px rgba(0,0,0,.28);
}

.mods-game-icon {
    background: rgba(53,168,255,.08);
    color: var(--accent);
}

.mods-game-label {
    color: #737d88;
}

.mods-game-info h2 {
    color: #f2f5f8;
}

.mods-game-info p {
    color: #8e98a3;
}

.mods-game-arrow {
    color: #59636e;
}

.mods-game-card:hover .mods-game-arrow {
    color: var(--accent);
}


/* =========================================================
   PUBLIC MODS LISTING - DARK THEME
   ========================================================= */

.mods-listing-page {
    min-height: calc(100vh - 80px);
    background: var(--bg);
    color: #f2f5f8;
}

.mods-listing-container {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}

.mods-listing-hero {
    background:
        radial-gradient(circle at 15% 0%, rgba(53,168,255,.06), transparent 34%),
        var(--bg-soft);
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.mods-listing-hero .mods-listing-container {
    padding-top: 42px;
    padding-bottom: 34px;
}

.mods-listing-eyebrow {
    margin-bottom: 10px;
    color: var(--accent);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .05em;
}

.mods-listing-heading-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.mods-listing-heading h1 {
    margin: 0;
    color: #f4f7fa;
    font-size: 42px;
    line-height: 1.12;
    font-weight: 850;
    letter-spacing: -.03em;
}

.mods-listing-heading p {
    max-width: 720px;
    margin: 10px 0 0;
    color: #919aa5;
    font-size: 15px;
    line-height: 1.7;
}

.mods-listing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.mods-primary-button,
.mods-secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
    transition: .2s ease;
}

.mods-primary-button {
    color: #06101a;
    background: var(--accent);
    border: 1px solid var(--accent);
}

.mods-primary-button:hover {
    background: var(--accent-bright);
    border-color: var(--accent-bright);
    transform: translateY(-1px);
}

.mods-secondary-button {
    color: #c7ced6;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.09);
}

.mods-secondary-button:hover {
    color: #ffffff;
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.15);
}

.mods-search {
    display: flex;
    gap: 10px;
    margin-top: 28px;
}

.mods-search-field {
    position: relative;
    flex: 1;
    min-width: 0;
}

.mods-search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-51%);
    color: #68737e;
    font-size: 22px;
    line-height: 1;
    pointer-events: none;
}

.mods-search-field input {
    width: 100%;
    height: 46px;
    padding: 0 16px 0 43px;
    color: #e8edf2;
    background: #0e1013;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 11px;
    outline: none;
    font: inherit;
    font-size: 14px;
}

.mods-search-field input::placeholder {
    color: #68737e;
}

.mods-search-field input:focus {
    border-color: rgba(53,168,255,.45);
    box-shadow: 0 0 0 3px rgba(53,168,255,.08);
}

.mods-search > .mods-primary-button {
    height: 46px;
}

.mods-listing-main {
    padding-top: 34px;
    padding-bottom: 70px;
}

.mods-listing-layout {
    display: grid;
    grid-template-columns: 238px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.mods-sidebar-panel {
    position: sticky;
    top: 100px;
    padding: 16px;
    background: var(--panel-solid);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(0,0,0,.16);
}

.mods-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 2px 12px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.mods-sidebar-header h2 {
    margin: 0;
    color: #e9edf1;
    font-size: 14px;
    font-weight: 800;
}

.mods-sidebar-header a {
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.mods-sidebar-header a:hover {
    color: var(--accent-bright);
}

.mods-category-nav {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 10px;
}

.mods-category-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 10px;
    color: #919aa5;
    border-radius: 8px;
    text-decoration: none;
    font-size: 13px;
    transition: .18s ease;
}

.mods-category-nav a:hover {
    color: #e6ebf0;
    background: rgba(255,255,255,.045);
}

.mods-category-nav a.is-active {
    color: var(--accent);
    background: rgba(53,168,255,.08);
    font-weight: 750;
}

.mods-category-nav small {
    color: #66717c;
    font-size: 11px;
    font-weight: 700;
}

.mods-category-nav a.is-active small {
    color: rgba(53,168,255,.8);
}

.mods-results-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.mods-results-kicker {
    margin-bottom: 4px;
    color: #68737e;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.mods-results-header h2 {
    margin: 0;
    color: #f0f3f6;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 800;
}

.mods-results-count {
    color: #75808b;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

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

.mods-mod-card {
    overflow: hidden;
    background: var(--panel-solid);
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,.13);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.mods-mod-card:hover {
    transform: translateY(-2px);
    border-color: rgba(53,168,255,.25);
    box-shadow: 0 14px 32px rgba(0,0,0,.24);
}

.mods-mod-image-link {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #0a0c0e;
    text-decoration: none;
}

.mods-mod-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.mods-mod-card:hover .mods-mod-image {
    transform: scale(1.025);
}

.mods-mod-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at center, rgba(53,168,255,.08), transparent 55%),
        #0a0c0e;
    color: #4f5963;
    text-align: center;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 850;
    letter-spacing: .08em;
}

.mods-mod-type-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 5px 8px;
    color: #e9f4fb;
    background: rgba(7,8,9,.76);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 7px;
    backdrop-filter: blur(8px);
    font-size: 10px;
    line-height: 1;
    font-weight: 850;
    letter-spacing: .08em;
}

.mods-mod-body {
    padding: 16px;
}

.mods-mod-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
    color: #68737e;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.mods-mod-meta span + span::before {
    content: "•";
    margin-right: 8px;
    color: #434b54;
}

.mods-mod-body h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 800;
}

.mods-mod-body h3 a {
    color: #f0f3f6;
    text-decoration: none;
}

.mods-mod-body h3 a:hover {
    color: var(--accent);
}

.mods-mod-description {
    display: -webkit-box;
    overflow: hidden;
    margin: 8px 0 0;
    color: #858f9a;
    font-size: 13px;
    line-height: 1.6;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.mods-mod-details {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
}

.mods-mod-details span {
    padding: 4px 7px;
    color: #7d8791;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
}

.mods-mod-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 15px;
    padding-top: 13px;
    border-top: 1px solid rgba(255,255,255,.06);
}

.mods-mod-creator {
    min-width: 0;
}

.mods-mod-creator a,
.mods-mod-creator span {
    display: block;
    overflow: hidden;
    color: #818b95;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 700;
}

.mods-mod-creator a:hover {
    color: #cbd3da;
}

.mods-view-link {
    flex: 0 0 auto;
    color: var(--accent);
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
}

.mods-view-link:hover {
    color: var(--accent-bright);
}

.mods-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 28px;
}

.mods-page-button,
.mods-page-current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 750;
}

.mods-page-button {
    min-width: 38px;
    color: #c8d0d8;
    background: var(--panel-solid);
    border: 1px solid rgba(255,255,255,.08);
    text-decoration: none;
    transition: .18s ease;
}

.mods-page-button:hover {
    color: #ffffff;
    border-color: rgba(53,168,255,.28);
    background: var(--panel-hover);
}

.mods-page-button.is-disabled {
    color: #424b54;
    cursor: default;
}

.mods-page-current {
    padding: 0 12px;
    color: #737e89;
    background: transparent;
}

.mods-empty-state {
    padding: 64px 24px;
    text-align: center;
    background: var(--panel-solid);
    border: 1px dashed rgba(255,255,255,.11);
    border-radius: 14px;
}

.mods-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto;
    border-radius: 50%;
    background: rgba(53,168,255,.07);
    font-size: 22px;
}

.mods-empty-state h3 {
    margin: 15px 0 0;
    color: #e9edf1;
    font-size: 19px;
    font-weight: 800;
}

.mods-empty-state p {
    max-width: 420px;
    margin: 8px auto 0;
    color: #7d8791;
    font-size: 13px;
    line-height: 1.6;
}

.mods-empty-state .mods-primary-button {
    margin-top: 20px;
}

@media (max-width: 900px) {
    .mods-listing-heading-row {
        align-items: flex-start;
        flex-direction: column;
    }

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

    .mods-sidebar-panel {
        position: static;
    }

    .mods-category-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
    }
}

@media (max-width: 680px) {
    .mods-listing-container {
        width: min(100% - 24px, 1180px);
    }

    .mods-listing-hero .mods-listing-container {
        padding-top: 32px;
        padding-bottom: 28px;
    }

    .mods-listing-heading h1 {
        font-size: 34px;
    }

    .mods-listing-actions {
        width: 100%;
    }

    .mods-listing-actions a {
        flex: 1;
    }

    .mods-search {
        flex-direction: column;
    }

    .mods-search > .mods-primary-button {
        width: 100%;
    }

    .mods-mod-grid {
        grid-template-columns: 1fr;
    }

    .mods-results-header {
        align-items: flex-start;
    }

    .mods-category-nav {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   PUBLIC MOD CARDS - COMPACT + INTERACTIVE
   ========================================================= */

.mods-mod-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.mods-mod-card {
    border-radius: 12px;
    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.mods-mod-card:hover {
    transform: translateY(-4px);
    border-color: rgba(53,168,255,.30);
    box-shadow:
        0 12px 28px rgba(0,0,0,.30),
        0 0 0 1px rgba(53,168,255,.06);
}

.mods-mod-image-link {
    aspect-ratio: 16 / 9;
}

.mods-mod-image {
    transition: transform .3s ease, filter .3s ease;
}

.mods-mod-card:hover .mods-mod-image {
    transform: scale(1.045);
    filter: brightness(1.05);
}

.mods-mod-type-badge {
    top: 9px;
    left: 9px;
    padding: 4px 7px;
    font-size: 9px;
}

.mods-mod-body {
    padding: 13px;
}

.mods-mod-meta {
    margin-bottom: 5px;
    font-size: 9px;
}

.mods-mod-body h3 {
    font-size: 15px;
    line-height: 1.35;
}

.mods-mod-description {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.5;
    -webkit-line-clamp: 2;
}

.mods-mod-details {
    margin-top: 9px;
    gap: 5px;
}

.mods-mod-details span {
    padding: 3px 6px;
    font-size: 9px;
}

.mods-mod-footer {
    margin-top: 11px;
    padding-top: 10px;
}

.mods-mod-creator a,
.mods-mod-creator span,
.mods-view-link {
    font-size: 10px;
}

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

@media (max-width: 680px) {
    .mods-mod-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}


/* =========================================================
   PUBLIC MOD CARDS - EXTRA COMPACT
   ========================================================= */

.mods-mod-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.mods-mod-card {
    border-radius: 10px;
}

.mods-mod-image-link {
    aspect-ratio: 16 / 9;
}

.mods-mod-body {
    padding: 10px;
}

.mods-mod-meta {
    margin-bottom: 4px;
    font-size: 8px;
}

.mods-mod-body h3 {
    font-size: 13px;
    line-height: 1.3;
}

.mods-mod-description {
    margin-top: 5px;
    font-size: 10px;
    line-height: 1.45;
}

.mods-mod-details {
    margin-top: 7px;
    gap: 4px;
}

.mods-mod-details span {
    padding: 2px 5px;
    font-size: 8px;
}

.mods-mod-footer {
    margin-top: 8px;
    padding-top: 8px;
}

.mods-mod-creator a,
.mods-mod-creator span,
.mods-view-link {
    font-size: 9px;
}

.mods-mod-type-badge {
    top: 7px;
    left: 7px;
    padding: 3px 6px;
    font-size: 8px;
}

@media (max-width: 1100px) {
    .mods-mod-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .mods-mod-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .mods-mod-grid {
        grid-template-columns: 1fr;
    }
}


/* Upload image previews */
.upload-dropzone {
    position: relative;
    overflow: hidden;
}

.upload-dropzone.has-image-preview {
    padding: 0;
}

.upload-cover-preview {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 145px;
    object-fit: cover;
    border-radius: inherit;
}

.upload-dropzone.has-image-preview .upload-dropzone-content {
    display: none;
}

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

.screenshot-box {
    position: relative;
    overflow: hidden;
}

.screenshot-box.has-image-preview {
    padding: 0;
}

.upload-screenshot-preview {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 105px;
    object-fit: cover;
    border-radius: inherit;
}

.screenshot-box.has-image-preview .screenshot-placeholder {
    display: none;
}

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


/* ETS2 contact details */
.bm-contact-section {
    margin-top: 24px;
}

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

.bm-contact-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--border, #252a31);
    border-radius: 12px;
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease;
}

.bm-contact-card:hover {
    transform: translateY(-2px);
}

.bm-contact-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
}

.bm-contact-card > span:nth-child(2) {
    min-width: 0;
    flex: 1;
}

.bm-contact-card small {
    display: block;
    margin-bottom: 3px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .6;
}

.bm-contact-card strong {
    display: block;
    font-size: 14px;
}

.bm-contact-arrow {
    font-size: 18px;
    opacity: .65;
}

@media (max-width: 640px) {
    .bm-contact-grid {
        grid-template-columns: 1fr;
    }
}


/* CREATOR CONTACT PREMIUM */

.bm-contact-section {
    margin-top: 30px;
    padding: 26px;
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.08);
    background:
        radial-gradient(circle at 90% 10%, rgba(125,92,255,.13), transparent 36%),
        radial-gradient(circle at 10% 100%, rgba(37,211,102,.05), transparent 35%),
        linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
    box-shadow: 0 20px 55px rgba(0,0,0,.22);
}

.bm-contact-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        120deg,
        transparent 20%,
        rgba(255,255,255,.025) 50%,
        transparent 80%
    );
}

.bm-contact-heading {
    position: relative;
    z-index: 1;
    margin-bottom: 20px;
}

.bm-contact-eyebrow {
    display: inline-block;
    margin-bottom: 7px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #858c9a;
}

.bm-contact-heading h2 {
    margin: 0;
    color: #fff;
    font-size: 23px;
    font-weight: 800;
    line-height: 1.2;
}

.bm-contact-heading p {
    margin: 7px 0 0;
    color: #8d94a2;
    font-size: 13px;
    line-height: 1.55;
}

.bm-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    position: relative;
    z-index: 1;
}

.bm-contact-card {
    min-height: 94px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.075);
    background: rgba(255,255,255,.035);
    transition:
        transform .22s ease,
        border-color .22s ease,
        background .22s ease,
        box-shadow .22s ease;
}

.bm-contact-card::before {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    right: -85px;
    top: -80px;
    border-radius: 50%;
    background: rgba(255,255,255,.035);
    transition: transform .3s ease;
}

.bm-contact-card:hover {
    transform: translateY(-4px);
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.14);
    box-shadow: 0 16px 35px rgba(0,0,0,.24);
}

.bm-contact-card:hover::before {
    transform: scale(1.4);
}

.bm-contact-icon-wrap {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: grid;
    place-items: center;
    position: relative;
    z-index: 1;
    border-radius: 16px;
    color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 8px 22px rgba(0,0,0,.18);
}

.bm-contact-icon-wrap svg {
    width: 27px;
    height: 27px;
}

.bm-contact-whatsapp .bm-contact-icon-wrap {
    background: linear-gradient(145deg, #25d366, #128c4a);
}

.bm-contact-instagram .bm-contact-icon-wrap {
    background: linear-gradient(
        135deg,
        #833ab4 0%,
        #c13584 35%,
        #e1306c 58%,
        #fd1d1d 78%,
        #fcb045 100%
    );
}

.bm-contact-content {
    min-width: 0;
    flex: 1;
    position: relative;
    z-index: 1;
}

.bm-contact-label {
    display: block;
    margin-bottom: 3px;
    color: #858c99;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .9px;
    text-transform: uppercase;
}

.bm-contact-content strong {
    display: block;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
}

.bm-contact-content small {
    display: block;
    margin-top: 4px;
    color: #727a89;
    font-size: 11px;
    line-height: 1.4;
}

.bm-contact-arrow {
    width: 35px;
    height: 35px;
    flex: 0 0 35px;
    display: grid;
    place-items: center;
    position: relative;
    z-index: 1;
    border-radius: 50%;
    background: rgba(255,255,255,.055);
    color: #fff;
    font-size: 17px;
    transition: transform .22s ease, background .22s ease;
}

.bm-contact-card:hover .bm-contact-arrow {
    transform: translateX(4px);
    background: rgba(255,255,255,.11);
}

.bm-contact-whatsapp:hover {
    border-color: rgba(37,211,102,.35);
}

.bm-contact-instagram:hover {
    border-color: rgba(225,48,108,.35);
}

@media (max-width: 700px) {
    .bm-contact-section {
        padding: 20px;
        border-radius: 19px;
    }

    .bm-contact-grid {
        grid-template-columns: 1fr;
    }

    .bm-contact-heading h2 {
        font-size: 21px;
    }
}

@media (max-width: 480px) {
    .bm-contact-section {
        padding: 17px;
    }

    .bm-contact-card {
        min-height: 84px;
        padding: 13px;
        gap: 11px;
    }

    .bm-contact-icon-wrap {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
        border-radius: 13px;
    }

    .bm-contact-icon-wrap svg {
        width: 23px;
        height: 23px;
    }

    .bm-contact-content strong {
        font-size: 14px;
    }
}

/* FIX: Contact icon sizing */
.bm-contact-card .bm-contact-icon-wrap {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    flex: 0 0 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    position: relative !important;
}

.bm-contact-card .bm-contact-icon-wrap svg {
    width: 27px !important;
    min-width: 27px !important;
    max-width: 27px !important;
    height: 27px !important;
    min-height: 27px !important;
    max-height: 27px !important;
    display: block !important;
    flex: 0 0 27px !important;
}

.bm-contact-card {
    display: flex !important;
    align-items: center !important;
}

.bm-contact-card .bm-contact-content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.bm-contact-card .bm-contact-arrow {
    flex: 0 0 35px !important;
}


/* ETS2 compatibility: keep version range on one line */
.bm-spec-card-wide .bm-spec-content strong {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
}

.bm-spec-card-wide .bm-spec-content strong span {
    display: inline !important;
    flex: 0 0 auto !important;
}


/* ETS2 VERSION RANGE - FORCE INLINE */
.bm-spec-card .bm-version-range {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    width: max-content !important;
    max-width: 100% !important;
}

.bm-spec-card .bm-version-range .bm-version-value,
.bm-spec-card .bm-version-range .bm-version-separator {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    white-space: nowrap !important;
}

.bm-spec-card .bm-version-separator {
    opacity: .55;
    font-weight: 700;
}


/* FINAL FIX — ETS2 VERSION RANGE */
.bm-spec-card.bm-spec-card-wide.bm-spec-highlight .bm-spec-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.bm-spec-card.bm-spec-card-wide.bm-spec-highlight .bm-version-range {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
}

.bm-spec-card.bm-spec-card-wide.bm-spec-highlight .bm-version-range > .bm-version-value,
.bm-spec-card.bm-spec-card-wide.bm-spec-highlight .bm-version-range > .bm-version-separator {
    display: inline !important;
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
    flex: none !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.bm-spec-card.bm-spec-card-wide.bm-spec-highlight .bm-version-separator {
    opacity: .55 !important;
    display: inline !important;
}


/* ETS2 compatibility range — single line */
.bm-version-range {
    display: block !important;
    width: auto !important;
    white-space: nowrap !important;
    line-height: 1.3 !important;
}


/* =========================================
   INTERACTIVE DOWNLOAD PANEL
   ========================================= */

.bm-download-button {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    transform: translateZ(0);
    transition:
        transform .22s ease,
        box-shadow .22s ease,
        background .22s ease !important;
}

/* Moving light sweep */
.bm-download-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -130%;
    width: 65%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent,
        rgba(255,255,255,.08),
        rgba(255,255,255,.28),
        rgba(255,255,255,.08),
        transparent
    );
    transform: skewX(-20deg);
    transition: left .65s ease;
    pointer-events: none;
    z-index: -1;
}

.bm-download-button:hover {
    transform: translateY(-3px) !important;
    box-shadow:
        0 10px 28px rgba(53,168,255,.25),
        0 0 0 1px rgba(98,189,255,.18) inset !important;
}

.bm-download-button:hover::before {
    left: 145%;
}

/* Download arrow */
.bm-download-button > span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 10px !important;
    transition:
        transform .22s ease,
        background .22s ease !important;
}

.bm-download-button:hover > span {
    transform: translateY(3px) !important;
}

/* Press interaction */
.bm-download-button:active {
    transform: translateY(0) scale(.97) !important;
}

/* Add subtle hover motion to the entire panel */
.bm-download-section,
.bottom-download {
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease !important;
}

.bm-download-section:hover,
.bottom-download:hover {
    transform: translateY(-2px);
}

/* Animated download indicator */
.bm-download-section::after {
    content: "";
    position: absolute;
    width: 130px;
    height: 130px;
    right: -60px;
    top: -65px;
    border-radius: 50%;
    background: rgba(53,168,255,.055);
    pointer-events: none;
    animation: bmDownloadPulse 3s ease-in-out infinite;
}

@keyframes bmDownloadPulse {
    0%, 100% {
        transform: scale(.9);
        opacity: .55;
    }

    50% {
        transform: scale(1.12);
        opacity: 1;
    }
}

/* Keep panel content above glow */
.bm-download-section > * {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .bm-download-button,
    .bm-download-button::before,
    .bm-download-button > span,
    .bm-download-section,
    .bottom-download,
    .bm-download-section::after {
        animation: none !important;
        transition: none !important;
    }
}


/* =========================================
   DOWNLOAD BOX — INTERACTIVE
   ========================================= */

.bm-download-box {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    border: 1px solid rgba(53,168,255,.24) !important;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(53,168,255,.13),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            rgba(17,22,27,.98),
            rgba(13,17,21,.98)
        ) !important;
    box-shadow:
        0 18px 45px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.035) !important;
    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease !important;
}

/* Ambient animated glow */
.bm-download-box::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -100px;
    top: -120px;
    border-radius: 50%;
    background: rgba(53,168,255,.10);
    filter: blur(25px);
    pointer-events: none;
    animation: bmDownloadGlow 4s ease-in-out infinite;
}

.bm-download-box::after {
    content: "";
    position: absolute;
    left: -25%;
    top: 0;
    width: 25%;
    height: 100%;
    transform: skewX(-20deg);
    background: linear-gradient(
        100deg,
        transparent,
        rgba(255,255,255,.055),
        transparent
    );
    pointer-events: none;
    animation: bmDownloadSweep 5s ease-in-out infinite;
}

.bm-download-box:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(53,168,255,.42) !important;
    box-shadow:
        0 22px 55px rgba(0,0,0,.32),
        0 0 35px rgba(53,168,255,.07),
        inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* Small ready indicator */
.bm-download-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
}

.bm-download-label::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #35a8ff;
    box-shadow: 0 0 0 4px rgba(53,168,255,.10);
    animation: bmDownloadDot 1.8s ease-in-out infinite;
}

/* Button */
.bm-download-box .bm-download-button {
    position: relative !important;
    z-index: 2 !important;
    overflow: hidden !important;
    min-width: 160px !important;
    box-shadow:
        0 8px 20px rgba(53,168,255,.18),
        inset 0 1px 0 rgba(255,255,255,.15) !important;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        filter .2s ease !important;
}

/* Button shine */
.bm-download-box .bm-download-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 65%;
    height: 100%;
    transform: skewX(-22deg);
    background: linear-gradient(
        100deg,
        transparent,
        rgba(255,255,255,.30),
        transparent
    );
    pointer-events: none;
    animation: bmButtonShine 3.8s ease-in-out infinite;
}

/* Arrow */
.bm-download-box .bm-download-button > span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 9px !important;
    transition: transform .2s ease !important;
}

.bm-download-box .bm-download-button:hover {
    transform: translateY(-2px) scale(1.025) !important;
    filter: brightness(1.06);
    box-shadow:
        0 12px 28px rgba(53,168,255,.28),
        0 0 0 1px rgba(98,189,255,.20) inset !important;
}

.bm-download-box .bm-download-button:hover > span {
    transform: translateY(3px) !important;
}

.bm-download-box .bm-download-button:active {
    transform: translateY(0) scale(.97) !important;
}

/* Animations */
@keyframes bmDownloadGlow {
    0%, 100% {
        transform: scale(.90);
        opacity: .45;
    }

    50% {
        transform: scale(1.12);
        opacity: .85;
    }
}

@keyframes bmDownloadSweep {
    0%, 60%, 100% {
        left: -30%;
        opacity: 0;
    }

    20% {
        left: 120%;
        opacity: 1;
    }
}

@keyframes bmButtonShine {
    0%, 45% {
        left: -120%;
    }

    65% {
        left: 145%;
    }

    100% {
        left: 145%;
    }
}

@keyframes bmDownloadDot {
    0%, 100% {
        box-shadow: 0 0 0 3px rgba(53,168,255,.08);
        opacity: .75;
    }

    50% {
        box-shadow: 0 0 0 6px rgba(53,168,255,.14);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bm-download-box::before,
    .bm-download-box::after,
    .bm-download-box .bm-download-button::before,
    .bm-download-label::before {
        animation: none !important;
    }
}


/* =========================================
   CREATOR CONTACT FORM — PREMIUM
   ========================================= */

.creator-contact-form-section {
    margin-top: 26px;
}

.creator-contact-form-card {
    position: relative;
    overflow: hidden;
    padding: 22px;
    border: 1px solid rgba(53,168,255,.14);
    border-radius: 20px;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(53,168,255,.09),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.015)
        );
    box-shadow:
        0 15px 40px rgba(0,0,0,.14),
        inset 0 1px 0 rgba(255,255,255,.035);
}

.creator-contact-form-card::after {
    content: "";
    position: absolute;
    width: 160px;
    height: 160px;
    right: -80px;
    bottom: -90px;
    border-radius: 50%;
    background: rgba(53,168,255,.05);
    pointer-events: none;
}

.creator-contact-form-intro {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.creator-contact-form-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #fff;
    font-size: 18px;
    background:
        linear-gradient(
            145deg,
            rgba(53,168,255,.9),
            rgba(53,168,255,.35)
        );
    box-shadow:
        0 8px 20px rgba(53,168,255,.12),
        inset 0 1px 0 rgba(255,255,255,.16);
}

.creator-contact-form-intro strong {
    display: block;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

.creator-contact-form-intro span {
    display: block;
    margin-top: 4px;
    color: #7f8795;
    font-size: 12px;
    line-height: 1.5;
}

.creator-contact-form-card .upload-row {
    position: relative;
    z-index: 1;
}

.creator-contact-form-card .upload-field input {
    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.creator-contact-form-card .upload-field input:focus {
    border-color: rgba(53,168,255,.50) !important;
    background: rgba(53,168,255,.025) !important;
    box-shadow:
        0 0 0 3px rgba(53,168,255,.08),
        0 8px 25px rgba(0,0,0,.10);
}

@media (max-width: 700px) {

    .creator-contact-form-card {
        padding: 17px;
        border-radius: 17px;
    }

    .creator-contact-form-card .upload-row {
        display: block;
    }

    .creator-contact-form-card .upload-field + .upload-field {
        margin-top: 16px;
    }

}


/* Creator contact form layout fix */
.creator-contact-form-intro {
    display: flex !important;
    align-items: flex-start !important;
    gap: 13px !important;
}

.creator-contact-form-intro > div:last-child {
    min-width: 0 !important;
    flex: 1 !important;
}

.creator-contact-form-intro strong {
    display: block !important;
    margin: 0 !important;
    line-height: 1.35 !important;
}

.creator-contact-form-intro span {
    display: block !important;
    margin-top: 5px !important;
    line-height: 1.5 !important;
}

.creator-contact-form-section {
    margin-bottom: 24px !important;
}


/* =========================================
   ADMIN CREATOR CONTACT
   ========================================= */

.admin-contact-edit-section {
    grid-column: 1 / -1;
    margin-top: 8px;
    padding: 20px;
    border: 1px solid rgba(53,168,255,.14);
    border-radius: 16px;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(53,168,255,.08),
            transparent 40%
        ),
        rgba(255,255,255,.018);
}

.admin-contact-edit-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.admin-contact-edit-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(
        145deg,
        rgba(53,168,255,.9),
        rgba(53,168,255,.35)
    );
    box-shadow:
        0 8px 20px rgba(53,168,255,.12),
        inset 0 1px 0 rgba(255,255,255,.15);
}

.admin-contact-edit-heading > div:last-child {
    min-width: 0;
}

.admin-contact-edit-heading span {
    display: block;
    margin-bottom: 3px;
    color: #6f7887;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.admin-contact-edit-heading strong {
    display: block;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
}

.admin-contact-edit-heading small {
    display: block;
    margin-top: 4px;
    color: #727b89;
    font-size: 11px;
}

.admin-contact-edit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.admin-contact-edit-grid .admin-form-field {
    min-width: 0;
}

.admin-contact-edit-grid input {
    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.admin-contact-edit-grid input:focus {
    border-color: rgba(53,168,255,.45) !important;
    box-shadow: 0 0 0 3px rgba(53,168,255,.07);
    background: rgba(53,168,255,.025) !important;
}

@media (max-width: 700px) {
    .admin-contact-edit-section {
        padding: 16px;
    }

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


/* =========================================================
   ACCOUNT — MY MODS
   ========================================================= */

.account-mod-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
}

.account-mod-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 16px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;
    background: rgba(255,255,255,.018);
}

.account-mod-info {
    min-width: 0;
}

.account-mod-info strong {
    display: block;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-mod-info span {
    display: block;
    margin-top: 4px;
    color: #747e8d;
    font-size: 10px;
}

.account-mod-side {
    display: flex;
    align-items: center;
    gap: 10px;
}

.account-mod-status {
    display: inline-flex;
    align-items: center;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .5px;
    white-space: nowrap;
}

.account-mod-status-approved {
    color: #79e8a6;
    background: rgba(50,205,110,.08);
    border: 1px solid rgba(50,205,110,.15);
}

.account-mod-status-rejected {
    color: #ff8d8d;
    background: rgba(255,70,70,.08);
    border: 1px solid rgba(255,70,70,.15);
}

.account-mod-status-pending {
    color: #ffd76f;
    background: rgba(255,190,50,.08);
    border: 1px solid rgba(255,190,50,.15);
}

.account-mod-status-draft {
    color: #9bb6d8;
    background: rgba(70,130,190,.08);
    border: 1px solid rgba(70,130,190,.15);
}

.account-mod-action {
    color: #35a8ff;
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.account-mod-action:hover {
    color: #74c4ff;
}

.account-mod-rejection {
    grid-column: 1 / -1;
    padding: 10px 12px;
    border-left: 2px solid rgba(255,70,70,.65);
    border-radius: 0 8px 8px 0;
    background: rgba(255,70,70,.035);
}

.account-mod-rejection span {
    display: block;
    margin-bottom: 4px;
    color: #ff9292;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.1px;
}

.account-mod-rejection p {
    margin: 0;
    color: #abb3bf;
    font-size: 11px;
    line-height: 1.55;
}

@media (max-width: 650px) {
    .account-mod-row {
        grid-template-columns: 1fr;
    }

    .account-mod-side {
        justify-content: space-between;
    }
}


/* =========================================================
   ACCOUNT — MY MODS PAGE
   ========================================================= */

.account-mods-dashboard-content {
    margin-top: 18px;
}

.account-mods-dashboard-content > strong {
    display: block;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}

.account-mods-dashboard-content > p {
    margin: 6px 0 16px;
    color: #747e8d;
    font-size: 11px;
    line-height: 1.5;
}

.account-mods-page-section {
    margin-top: 18px;
}

.account-mod-page-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
}

.account-mod-page-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 18px;
    padding: 15px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;
    background: rgba(255,255,255,.018);
}

.account-mod-page-row > div:first-child {
    min-width: 0;
}

.account-mod-page-row strong {
    display: block;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}

.account-mod-page-row > div:first-child span {
    display: block;
    margin-top: 5px;
    color: #747e8d;
    font-size: 10px;
}

.account-mod-page-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.account-mod-page-empty {
    margin-top: 16px;
    padding: 18px;
    border: 1px dashed rgba(255,255,255,.08);
    border-radius: 12px;
    color: #737c8a;
    font-size: 11px;
    text-align: center;
}

.account-mod-page-row-rejected {
    border-color: rgba(255,70,70,.12);
}

.account-mod-page-reason {
    grid-column: 1 / -1;
    padding: 11px 13px;
    border-left: 2px solid rgba(255,70,70,.65);
    border-radius: 0 8px 8px 0;
    background: rgba(255,70,70,.035);
}

.account-mod-page-reason span {
    display: block;
    margin-bottom: 5px;
    color: #ff9292;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.1px;
}

.account-mod-page-reason p {
    margin: 0;
    color: #abb3bf;
    font-size: 11px;
    line-height: 1.55;
}

.account-mods-page-footer {
    display: flex;
    justify-content: flex-start;
    margin-top: 20px;
}

@media (max-width: 650px) {
    .account-mod-page-row {
        grid-template-columns: 1fr;
    }

    .account-mod-page-actions {
        justify-content: space-between;
    }
}


/* =========================================================
   MY MODS — STATUS SECTIONS + PAGINATION
   ========================================================= */

.account-status-icon-approved {
    color: #6dffae !important;
}

.account-status-icon-pending {
    color: #ffd76f !important;
}

.account-status-icon-rejected {
    color: #ff9292 !important;
}

.account-mod-page-main {
    min-width: 0;
}

.account-mod-page-main strong {
    display: block;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
}

.account-mod-page-main span {
    display: block;
    margin-top: 5px;
    color: #747e8d;
    font-size: 10px;
    line-height: 1.4;
}

.account-mod-pagination {
    display: flex;
    justify-content: center;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.06);
}

.account-mod-pagination nav {
    display: flex;
    align-items: center;
    gap: 5px;
}

.account-mod-pagination svg {
    width: 14px;
    height: 14px;
}

.account-mod-pagination a,
.account-mod-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 9px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    color: #8993a1;
    background: rgba(255,255,255,.02);
    font-size: 10px;
    font-weight: 700;
    text-decoration: none;
}

.account-mod-pagination a:hover {
    color: #fff;
    border-color: rgba(53,168,255,.3);
    background: rgba(53,168,255,.06);
}

.account-mod-pagination span[aria-current="page"] {
    color: #fff;
    border-color: rgba(53,168,255,.35);
    background: rgba(53,168,255,.12);
}

.account-mod-pagination span[aria-disabled="true"] {
    opacity: .4;
}

@media (max-width: 650px) {

    .account-mod-page-actions {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .account-mod-pagination a,
    .account-mod-pagination span {
        min-width: 30px;
        height: 30px;
        padding: 0 7px;
    }

}


/* =========================================================
   MY MODS — PREMIUM DASHBOARD STYLE
   ========================================================= */

.account-mods-page-section {
    position: relative;
    overflow: hidden;
    margin-top: 22px;
    padding: 24px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 20px;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(53,168,255,.075),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.025),
            rgba(255,255,255,.008)
        );
    box-shadow:
        0 20px 50px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.025);
}

.account-mods-page-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            120deg,
            transparent 25%,
            rgba(255,255,255,.018) 50%,
            transparent 75%
        );
    opacity: .6;
}

.account-mods-page-section .card-title {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.account-mods-page-section .card-title > div {
    min-width: 0;
}

.account-mods-page-section .card-title h2 {
    margin: 0;
    color: #fff;
    font-size: 17px;
    font-weight: 850;
    letter-spacing: -.2px;
}

.account-mods-page-section .card-title p {
    margin: 4px 0 0;
    color: #707a89;
    font-size: 10px;
    line-height: 1.5;
}

.account-status-icon-approved,
.account-status-icon-pending,
.account-status-icon-rejected {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.07);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 10px 24px rgba(0,0,0,.15);
    font-size: 17px !important;
    font-weight: 800;
}

.account-status-icon-approved {
    color: #67f3a2 !important;
    background:
        radial-gradient(
            circle at 30% 20%,
            rgba(103,243,162,.15),
            transparent 60%
        ),
        rgba(103,243,162,.045);
    border-color: rgba(103,243,162,.16);
}

.account-status-icon-pending {
    color: #ffd568 !important;
    background:
        radial-gradient(
            circle at 30% 20%,
            rgba(255,213,104,.15),
            transparent 60%
        ),
        rgba(255,213,104,.045);
    border-color: rgba(255,213,104,.16);
}

.account-status-icon-rejected {
    color: #ff8585 !important;
    background:
        radial-gradient(
            circle at 30% 20%,
            rgba(255,133,133,.15),
            transparent 60%
        ),
        rgba(255,133,133,.045);
    border-color: rgba(255,133,133,.16);
}


/* ---------------------------------------------------------
   MOD LIST
   --------------------------------------------------------- */

.account-mod-page-list {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.account-mod-page-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 14px 20px;
    padding: 17px 18px;
    border: 1px solid rgba(255,255,255,.065);
    border-radius: 14px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.028),
            rgba(255,255,255,.012)
        );
    transition:
        transform .22s ease,
        border-color .22s ease,
        background .22s ease,
        box-shadow .22s ease;
}

.account-mod-page-row:hover {
    transform: translateY(-2px);
    border-color: rgba(53,168,255,.18);
    background:
        linear-gradient(
            145deg,
            rgba(53,168,255,.055),
            rgba(255,255,255,.012)
        );
    box-shadow:
        0 12px 30px rgba(0,0,0,.18);
}

.account-mod-page-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.account-mod-page-main strong {
    display: block;
    overflow: hidden;
    color: #f7f9fc;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.45;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.account-mod-page-main span {
    display: inline-flex;
    align-items: center;
    margin-top: 6px;
    color: #747f8e;
    font-size: 10px;
    line-height: 1.4;
}

.account-mod-page-main span::before {
    content: "";
    width: 4px;
    height: 4px;
    margin-right: 7px;
    border-radius: 50%;
    background: rgba(53,168,255,.75);
    box-shadow: 0 0 8px rgba(53,168,255,.25);
}


/* ---------------------------------------------------------
   ACTION AREA
   --------------------------------------------------------- */

.account-mod-page-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-width: max-content;
}

.account-mod-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 27px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 8px !important;
    font-weight: 850 !important;
    line-height: 1;
    letter-spacing: .8px;
    text-transform: uppercase;
    white-space: nowrap;
}

.account-mod-status-approved {
    color: #72efaa;
    border: 1px solid rgba(72,224,137,.18);
    background: rgba(72,224,137,.07);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.account-mod-status-pending {
    color: #ffd66f;
    border: 1px solid rgba(255,203,78,.18);
    background: rgba(255,203,78,.07);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.account-mod-status-rejected {
    color: #ff9292;
    border: 1px solid rgba(255,84,84,.18);
    background: rgba(255,84,84,.07);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.account-mod-status-draft {
    color: #9ab7d9;
    border: 1px solid rgba(93,150,205,.18);
    background: rgba(93,150,205,.07);
}


/* ---------------------------------------------------------
   VIEW MOD BUTTON
   --------------------------------------------------------- */

.account-mod-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 11px;
    border: 1px solid rgba(53,168,255,.14);
    border-radius: 8px;
    color: #69bbff !important;
    background: rgba(53,168,255,.045);
    font-size: 9px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease;
}

.account-mod-action:hover {
    color: #fff !important;
    border-color: rgba(53,168,255,.35);
    background: rgba(53,168,255,.10);
    transform: translateX(2px);
}


/* ---------------------------------------------------------
   REJECTED
   --------------------------------------------------------- */

.account-mod-page-row-rejected {
    border-color: rgba(255,84,84,.10);
}

.account-mod-page-row-rejected:hover {
    border-color: rgba(255,84,84,.22);
    background:
        linear-gradient(
            145deg,
            rgba(255,84,84,.045),
            rgba(255,255,255,.012)
        );
}

.account-mod-page-reason {
    grid-column: 1 / -1;
    position: relative;
    margin-top: 2px;
    padding: 13px 15px 13px 16px;
    border: 1px solid rgba(255,84,84,.10);
    border-left: 2px solid rgba(255,91,91,.72);
    border-radius: 10px;
    background:
        linear-gradient(
            145deg,
            rgba(255,84,84,.055),
            rgba(255,255,255,.008)
        );
}

.account-mod-page-reason::before {
    content: "";
    position: absolute;
    left: -2px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    border-radius: 2px;
    background: rgba(255,110,110,.8);
    box-shadow: 0 0 12px rgba(255,90,90,.15);
}

.account-mod-page-reason span {
    display: block;
    margin-bottom: 6px;
    color: #ff9090;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 1.15px;
}

.account-mod-page-reason p {
    margin: 0;
    color: #aab2be;
    font-size: 11px;
    line-height: 1.65;
}


/* ---------------------------------------------------------
   EMPTY STATE
   --------------------------------------------------------- */

.account-mod-page-empty {
    position: relative;
    z-index: 1;
    margin-top: 14px;
    padding: 30px 20px;
    border: 1px dashed rgba(255,255,255,.08);
    border-radius: 14px;
    color: #687281;
    background: rgba(255,255,255,.012);
    font-size: 11px;
    text-align: center;
}


/* ---------------------------------------------------------
   PAGINATION
   --------------------------------------------------------- */

.account-mod-pagination {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    margin-top: 19px;
    padding-top: 17px;
    border-top: 1px solid rgba(255,255,255,.055);
}

.account-mod-pagination nav {
    display: flex;
    align-items: center;
    gap: 5px;
}

.account-mod-pagination nav > div:first-child {
    display: none;
}

.account-mod-pagination nav > div:last-child {
    width: auto;
}

.account-mod-pagination nav > div:last-child > span,
.account-mod-pagination nav > div:last-child > a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.account-mod-pagination a,
.account-mod-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 31px;
    height: 31px;
    padding: 0 9px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 8px;
    color: #7d8795;
    background: rgba(255,255,255,.02);
    font-size: 9px;
    font-weight: 800;
    text-decoration: none;
    transition:
        border-color .2s ease,
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.account-mod-pagination a:hover {
    color: #fff;
    border-color: rgba(53,168,255,.28);
    background: rgba(53,168,255,.07);
    transform: translateY(-1px);
}

.account-mod-pagination span[aria-current="page"] {
    color: #fff;
    border-color: rgba(53,168,255,.32);
    background:
        linear-gradient(
            145deg,
            rgba(53,168,255,.18),
            rgba(53,168,255,.07)
        );
    box-shadow:
        0 0 18px rgba(53,168,255,.06),
        inset 0 1px 0 rgba(255,255,255,.05);
}

.account-mod-pagination span[aria-disabled="true"] {
    opacity: .3;
}


/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */

.account-mods-page-footer {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

.account-mods-page-footer .primary-account-button {
    min-width: 170px;
    justify-content: center;
}


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

@media (max-width: 760px) {

    .account-mods-page-section {
        padding: 18px;
        border-radius: 16px;
    }

    .account-mod-page-row {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 15px;
    }

    .account-mod-page-actions {
        justify-content: space-between;
        min-width: 0;
    }

}

@media (max-width: 480px) {

    .account-mods-page-section .card-title h2 {
        font-size: 15px;
    }

    .account-mods-page-main strong {
        font-size: 12px;
    }

    .account-mod-page-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .account-mod-action,
    .account-mod-status {
        width: 100%;
    }

    .account-mod-pagination a,
    .account-mod-pagination span {
        min-width: 29px;
        height: 29px;
    }

}


/* =========================================================
   CREATOR — EDIT & RESUBMIT
   ========================================================= */

.account-mod-resubmit-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 11px;
    border: 1px solid rgba(255,176,73,.20);
    border-radius: 8px;
    color: #ffc06b !important;
    background: rgba(255,176,73,.055);
    font-size: 9px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease;
}

.account-mod-resubmit-action:hover {
    color: #fff !important;
    border-color: rgba(255,176,73,.38);
    background: rgba(255,176,73,.10);
    transform: translateX(2px);
}

.account-edit-alert {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 18px 0;
    padding: 14px 16px;
    border: 1px solid rgba(255,84,84,.16);
    border-radius: 12px;
    background: rgba(255,84,84,.045);
}

.account-edit-alert strong {
    color: #ff9999;
    font-size: 11px;
}

.account-edit-alert span {
    color: #a8b0bc;
    font-size: 10px;
}

.account-edit-rejection {
    display: flex;
    gap: 14px;
    margin-bottom: 18px;
    padding: 17px;
    border: 1px solid rgba(255,84,84,.15);
    border-radius: 14px;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(255,84,84,.07),
            transparent 38%
        ),
        rgba(255,255,255,.015);
}

.account-edit-rejection-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #ff8b8b;
    border: 1px solid rgba(255,84,84,.18);
    background: rgba(255,84,84,.055);
    font-weight: 900;
}

.account-edit-rejection span {
    display: block;
    color: #ff9292;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 1.2px;
}

.account-edit-rejection strong {
    display: block;
    margin-top: 4px;
    color: #fff;
    font-size: 12px;
}

.account-edit-rejection p {
    margin: 7px 0 0;
    color: #aab2be;
    font-size: 11px;
    line-height: 1.6;
}

.account-edit-mod-card {
    padding: 24px;
}

.account-edit-mod-form {
    margin-top: 22px;
}

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

.account-edit-full {
    grid-column: 1 / -1;
}

.account-edit-field {
    min-width: 0;
}

.account-edit-field label {
    display: block;
    margin-bottom: 7px;
    color: #aab4c2;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.account-edit-field input,
.account-edit-field select,
.account-edit-field textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    outline: none;
    color: #eef3f9;
    background: rgba(255,255,255,.025);
    font: inherit;
    font-size: 11px;
    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.account-edit-field input,
.account-edit-field select {
    min-height: 42px;
    padding: 0 12px;
}

.account-edit-field textarea {
    min-height: 100px;
    padding: 11px 12px;
    resize: vertical;
    line-height: 1.55;
}

.account-edit-field input:focus,
.account-edit-field select:focus,
.account-edit-field textarea:focus {
    border-color: rgba(53,168,255,.35);
    background: rgba(53,168,255,.025);
    box-shadow: 0 0 0 3px rgba(53,168,255,.055);
}

.account-edit-field small {
    display: block;
    margin-top: 6px;
    color: #697483;
    font-size: 9px;
    line-height: 1.5;
}

.account-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.06);
}

.account-edit-cancel,
.account-edit-submit {
    min-height: 40px;
    padding: 0 17px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.account-edit-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.08);
    color: #8f99a7;
    background: rgba(255,255,255,.02);
}

.account-edit-submit {
    border: 1px solid rgba(53,168,255,.28);
    color: #fff;
    background:
        linear-gradient(
            145deg,
            rgba(53,168,255,.30),
            rgba(53,168,255,.12)
        );
    box-shadow:
        0 8px 24px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.06);
}

.account-edit-submit:hover {
    border-color: rgba(53,168,255,.42);
    background:
        linear-gradient(
            145deg,
            rgba(53,168,255,.38),
            rgba(53,168,255,.15)
        );
}

@media (max-width: 700px) {

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

    .account-edit-full {
        grid-column: auto;
    }

    .account-edit-actions {
        flex-direction: column-reverse;
    }

    .account-edit-cancel,
    .account-edit-submit {
        width: 100%;
    }

    .account-mod-resubmit-action {
        width: 100%;
    }

}


/* Larger Edit & Resubmit button */
.account-mod-page-row-rejected .account-mod-resubmit-action {
    min-height: 42px;
    min-width: 190px;
    padding: 0 20px;
    border-radius: 10px;
    font-size: 11px !important;
    font-weight: 850 !important;
    letter-spacing: .15px;
    border-color: rgba(255,176,73,.28);
    background:
        linear-gradient(
            145deg,
            rgba(255,176,73,.14),
            rgba(255,176,73,.055)
        );
    box-shadow:
        0 8px 22px rgba(0,0,0,.15),
        inset 0 1px 0 rgba(255,255,255,.05);
}

.account-mod-page-row-rejected .account-mod-resubmit-action:hover {
    border-color: rgba(255,176,73,.48);
    background:
        linear-gradient(
            145deg,
            rgba(255,176,73,.22),
            rgba(255,176,73,.08)
        );
    box-shadow:
        0 10px 28px rgba(0,0,0,.20),
        0 0 18px rgba(255,176,73,.06),
        inset 0 1px 0 rgba(255,255,255,.07);
    transform: translateY(-1px);
}

@media (max-width: 760px) {
    .account-mod-page-row-rejected .account-mod-resubmit-action {
        width: 100%;
        min-width: 0;
    }
}


/* Rejected mod — separate status badge and resubmit action */
.account-mod-page-row-rejected .account-mod-page-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 9px;
    min-width: 205px;
}

.account-mod-page-row-rejected .account-mod-status {
    min-height: 27px;
}

.account-mod-page-row-rejected .account-mod-resubmit-action {
    position: relative;
    z-index: 2;
    width: 190px;
    min-width: 190px;
    min-height: 42px;
    box-sizing: border-box;
}

@media (max-width: 760px) {
    .account-mod-page-row-rejected .account-mod-page-actions {
        width: 100%;
        min-width: 0;
        align-items: stretch;
    }

    .account-mod-page-row-rejected .account-mod-resubmit-action {
        width: 100%;
        min-width: 0;
    }
}


/* Final rejected action layout */
.account-mod-page-row-rejected .account-mod-page-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    min-width: 205px !important;
}

.account-mod-page-row-rejected .account-mod-resubmit-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 190px !important;
    min-width: 190px !important;
    min-height: 42px !important;
    box-sizing: border-box !important;
}

@media (max-width: 760px) {
    .account-mod-page-row-rejected .account-mod-page-actions {
        width: 100% !important;
        min-width: 0 !important;
        align-items: stretch !important;
    }

    .account-mod-page-row-rejected .account-mod-resubmit-action {
        width: 100% !important;
        min-width: 0 !important;
    }
}


/* =========================================================
   ACCOUNT PAGE — MOBILE RESPONSIVE FIX
   ========================================================= */

@media (max-width: 700px) {

    .account-page {
        width: 100%;
        min-width: 0;
        overflow-x: hidden;
        padding: 48px 0 70px;
    }

    .account-container {
        width: calc(100% - 28px) !important;
        max-width: none !important;
        margin: 0 auto !important;
        min-width: 0;
    }

    .account-heading {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        min-width: 0;
    }

    .account-heading h1 {
        margin: 12px 0 8px !important;
        font-size: clamp(38px, 11vw, 52px) !important;
        line-height: .98 !important;
        letter-spacing: -.045em !important;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .account-heading p {
        max-width: 100% !important;
        font-size: 12px !important;
        line-height: 1.6 !important;
    }

    .account-settings {
        max-width: 100%;
    }

    /* Admin dashboard button */
    .admin-dashboard-toggle {
        width: 100%;
        min-height: 48px;
        box-sizing: border-box;
        margin: 20px 0 0;
        padding: 0 14px;
    }

    /* Statistics */
    .account-stats {
        width: 100%;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        overflow: hidden;
        border-radius: 16px !important;
    }

    .account-stat {
        min-width: 0;
        width: 100%;
        min-height: 82px;
        padding: 18px 18px !important;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,.07);
    }

    .account-stat:last-child {
        border-bottom: 0;
    }

    .account-stat strong {
        font-size: 25px !important;
        line-height: 1 !important;
    }

    .account-stat span {
        margin-top: 6px !important;
        font-size: 10px !important;
    }

    /* Main cards become one column */
    .account-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        width: 100%;
        min-width: 0;
    }

    .account-card {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        overflow: hidden;
        border-radius: 16px !important;
    }

    .account-card .card-title {
        gap: 11px;
        min-width: 0;
    }

    .account-card .card-title > div {
        min-width: 0;
    }

    .account-card .card-title h2 {
        font-size: 15px !important;
        line-height: 1.3 !important;
    }

    .account-card .card-title p {
        max-width: 100%;
        font-size: 10px !important;
    }

    /* Profile card */
    .account-profile-details {
        width: 100%;
        min-width: 0;
    }

    .account-profile-row {
        width: 100%;
        min-width: 0;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 5px !important;
        padding: 12px 0 !important;
    }

    .account-profile-row > * {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .account-profile-row strong {
        text-align: left !important;
    }

    .account-profile-meta {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Prevent long email / Instagram / YouTube values from pushing the page */
    .account-card strong,
    .account-card a,
    .account-card span,
    .account-card p {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* My Mods dashboard */
    .account-mods-dashboard-content {
        width: 100%;
        min-width: 0;
    }

    .account-mods-dashboard-content .primary-account-button {
        width: 100%;
        min-height: 44px;
        justify-content: center;
        box-sizing: border-box;
    }

    /* Buttons */
    .card-action {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 40px;
        box-sizing: border-box;
    }

}


/* Smaller phones */
@media (max-width: 430px) {

    .account-page {
        padding-top: 34px;
    }

    .account-container {
        width: calc(100% - 20px) !important;
    }

    .account-heading h1 {
        font-size: 36px !important;
    }

    .account-heading p {
        font-size: 11px !important;
    }

    .account-stat {
        min-height: 76px;
        padding: 16px !important;
    }

    .account-card {
        padding: 16px !important;
    }

    .account-card .card-icon {
        width: 38px !important;
        height: 38px !important;
        flex: 0 0 38px;
    }

}


/* =========================================================
   HEADER — MOBILE ACCOUNT PAGE
   ========================================================= */

@media (max-width: 760px) {

    .site-header {
        height: 64px;
    }

    .header-inner {
        width: calc(100% - 20px) !important;
        gap: 8px !important;
    }

    .brand {
        min-width: 0;
    }

    .brand-text {
        display: none;
    }

    .nav {
        display: none !important;
    }

    .header-actions {
        margin-left: auto;
    }

    .mobile-menu-button {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
    }

}


/* =========================================================
   ACCOUNT — FAVORITES
   ========================================================= */

.account-favorites-card {
    overflow: hidden;
}

.account-favorites-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 18px;
}

.account-favorite-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
    padding: 13px 14px;
    border: 1px solid rgba(255,255,255,.065);
    border-radius: 11px;
    background: rgba(255,255,255,.018);
    text-decoration: none;
    transition:
        border-color .2s ease,
        background .2s ease,
        transform .2s ease;
}

.account-favorite-item:hover {
    border-color: rgba(53,168,255,.20);
    background: rgba(53,168,255,.045);
    transform: translateY(-1px);
}

.account-favorite-item-main {
    min-width: 0;
}

.account-favorite-item-main strong {
    display: block;
    overflow: hidden;
    color: #f5f7fa;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.4;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.account-favorite-item-main span {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: #727d8b;
    font-size: 9px;
    line-height: 1.4;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.account-favorite-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border: 1px solid rgba(53,168,255,.12);
    border-radius: 8px;
    color: #69bbff;
    background: rgba(53,168,255,.045);
    font-size: 12px;
    font-weight: 800;
}

.account-favorites-more {
    margin-top: 10px;
    color: #687382;
    font-size: 9px;
    line-height: 1.5;
}

.account-coming-soon {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 0 10px;
    border: 1px solid rgba(53,168,255,.15);
    border-radius: 999px;
    color: #69bbff;
    background: rgba(53,168,255,.045);
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .75px;
    text-transform: uppercase;
    white-space: nowrap;
}

@media (max-width: 700px) {

    .account-favorite-item {
        padding: 12px;
    }

    .account-favorite-item-main strong {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .account-favorite-item-main span {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .account-coming-soon {
        min-height: 30px;
    }

}


/* =========================================================
   ACCOUNT — FAVORITES PAGE
   ========================================================= */

.account-favorites-see-all {
    margin-top: 12px;
}

.account-favorites-see-all-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 42px;
    box-sizing: border-box;
    padding: 0 13px 0 15px;
    border: 1px solid rgba(53,168,255,.14);
    border-radius: 10px;
    color: #6fc0ff !important;
    background:
        linear-gradient(
            145deg,
            rgba(53,168,255,.055),
            rgba(255,255,255,.012)
        );
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
    transition:
        border-color .2s ease,
        background .2s ease,
        transform .2s ease;
}

.account-favorites-see-all-button span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    border-radius: 7px;
    background: rgba(53,168,255,.07);
}

.account-favorites-see-all-button:hover {
    border-color: rgba(53,168,255,.30);
    background:
        linear-gradient(
            145deg,
            rgba(53,168,255,.10),
            rgba(255,255,255,.015)
        );
    transform: translateY(-1px);
}


/* ---------------------------------------------------------
   ALL FAVORITES PAGE
   --------------------------------------------------------- */

.account-favorites-page-card {
    margin-top: 22px;
    padding: 24px;
}

.account-favorites-page-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.account-favorite-page-item {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) auto;
    align-items: center;
    gap: 13px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.065);
    border-radius: 13px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.025),
            rgba(255,255,255,.008)
        );
    text-decoration: none;
    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease;
}

.account-favorite-page-item:hover {
    transform: translateY(-2px);
    border-color: rgba(53,168,255,.20);
    background:
        linear-gradient(
            145deg,
            rgba(53,168,255,.05),
            rgba(255,255,255,.01)
        );
}

.account-favorite-page-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(53,168,255,.13);
    border-radius: 11px;
    color: #51b4ff;
    background: rgba(53,168,255,.045);
}

.account-favorite-page-icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
}

.account-favorite-page-main {
    min-width: 0;
}

.account-favorite-page-main strong {
    display: block;
    overflow: hidden;
    color: #f5f7fa;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.account-favorite-page-main span {
    display: block;
    margin-top: 5px;
    overflow: hidden;
    color: #747e8d;
    font-size: 9px;
    line-height: 1.4;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.account-favorite-page-arrow {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(53,168,255,.12);
    border-radius: 8px;
    color: #69bbff;
    background: rgba(53,168,255,.045);
    font-size: 12px;
    font-weight: 800;
}

.account-favorites-pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.055);
}

.account-favorites-pagination nav {
    display: flex;
    align-items: center;
    gap: 5px;
}

.account-favorites-pagination nav > div:first-child {
    display: none;
}

.account-favorites-pagination a,
.account-favorites-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 31px;
    height: 31px;
    padding: 0 9px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 8px;
    color: #7d8795;
    background: rgba(255,255,255,.02);
    font-size: 9px;
    font-weight: 800;
    text-decoration: none;
}

.account-favorites-pagination a:hover {
    color: #fff;
    border-color: rgba(53,168,255,.28);
    background: rgba(53,168,255,.07);
}

.account-favorites-pagination span[aria-current="page"] {
    color: #fff;
    border-color: rgba(53,168,255,.32);
    background: rgba(53,168,255,.12);
}

@media (max-width: 600px) {

    .account-favorite-page-item {
        grid-template-columns: 38px minmax(0,1fr) 30px;
        gap: 10px;
        padding: 12px;
    }

    .account-favorite-page-icon {
        width: 38px;
        height: 38px;
    }

    .account-favorite-page-main strong {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .account-favorite-page-main span {
        white-space: normal;
        overflow-wrap: anywhere;
    }

}


/* Account page: allow main area to end naturally */
.site-main:has(.account-page) {
    min-height: auto !important;
}


/* Account page: remove global viewport minimum from main */
body:has(.account-page) .site-main {
    min-height: auto !important;
}


/* Final account page height fix */
.account-page {
    min-height: auto !important;
    padding-bottom: 50px !important;
}


/* Permanent delete button in admin mod management list */
.admin-mod-delete-form {
    display: inline-flex;
    margin: 0;
    flex: 0 0 auto;
}

.admin-mod-delete-link {
    appearance: none;
    border: 1px solid rgba(255, 92, 92, .22);
    border-radius: 8px;
    padding: 7px 10px;
    color: #ff8b8b;
    background: rgba(255, 70, 70, .06);
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: .18s ease;
}

.admin-mod-delete-link:hover {
    color: #fff;
    border-color: rgba(255, 92, 92, .45);
    background: rgba(255, 70, 70, .12);
}

/* FINAL MOD DETAIL STICKY SIDEBAR FIX */
.bm-detail-page {
    overflow: visible !important;
}

.bm-detail-container {
    overflow: visible !important;
}

@media (min-width: 901px) {
    .bm-sidebar {
        position: sticky !important;
        top: 96px !important;
        align-self: start !important;
        height: max-content !important;
    }
}

@media (max-width: 900px) {
    .bm-sidebar {
        position: static !important;
    }
}

/* FINAL STICKY SIDEBAR FULL-PAGE FIX */
@media (min-width: 901px) {
    .bm-detail-container {
        align-items: start !important;
    }

    .bm-sidebar {
        grid-column: 2 !important;
        grid-row: 1 / -1 !important;
        position: sticky !important;
        top: 96px !important;
        align-self: start !important;
        height: max-content !important;
    }
}

/* ABSOLUTE FINAL DESKTOP SIDEBAR BEHAVIOR */
@media (min-width: 1001px) {

    .bm-detail-container {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 300px !important;
        gap: 30px !important;
        align-items: start !important;
    }

    .bm-main-column {
        grid-column: 1 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
        align-self: start !important;
    }

    .bm-sidebar {
        grid-column: 2 !important;
        grid-row: 1 !important;
        position: sticky !important;
        top: 96px !important;
        align-self: start !important;
        width: 300px !important;
        height: max-content !important;
        margin: 0 !important;
        transform: none !important;
    }
}

@media (max-width: 1000px) {
    .bm-sidebar {
        position: static !important;
        width: 100% !important;
        transform: none !important;
    }
}

/* FINAL SIDEBAR - VIEWPORT STICKY */
@media (min-width: 1001px) {

    .bm-detail-container {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 300px !important;
        gap: 30px !important;
        align-items: start !important;
    }

    .bm-main-column {
        grid-column: 1 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
    }

    .bm-sidebar {
        grid-column: 2 !important;
        grid-row: 1 !important;
        position: sticky !important;
        top: 96px !important;
        align-self: start !important;
        width: 300px !important;
        max-width: 300px !important;
        height: calc(100vh - 112px) !important;
        max-height: calc(100vh - 112px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        margin: 0 !important;
        transform: none !important;
    }

    .bm-sidebar::-webkit-scrollbar {
        width: 4px;
    }

    .bm-sidebar {
        scrollbar-width: thin;
    }
}

@media (max-width: 1000px) {
    .bm-sidebar {
        position: static !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
}

/* Creator All Mods page width */
.creator-mods-page {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 1200px) {
    .creator-mods-page {
        max-width: calc(100% - 32px);
    }
}


/* Creator All Mods - narrower content area */
.creator-mods-card {
    width: min(1100px, 100%) !important;
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* FINAL: Creator All Mods page width */
.site-main .creator-mods-page {
    width: 1100px !important;
    max-width: calc(100% - 40px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

.site-main .creator-mods-page .creator-mods-card {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

@media (max-width: 700px) {
    .site-main .creator-mods-page {
        width: calc(100% - 24px) !important;
        max-width: none !important;
    }
}


/* =========================================================
   SIMULATION WORLD — HOMEPAGE
   ========================================================= */

.sw-home {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 30px 24px 70px;
    box-sizing: border-box;
}

.sw-home-hero {
    position: relative;
    overflow: hidden;
    padding: 55px 50px;
    margin-bottom: 30px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    background:
        radial-gradient(circle at 85% 20%, rgba(0,220,255,.12), transparent 30%),
        radial-gradient(circle at 10% 90%, rgba(110,70,255,.10), transparent 35%),
        linear-gradient(135deg, #111722, #0b0f17);
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
}

.sw-home-hero::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    right: -100px;
    top: -100px;
    border: 1px solid rgba(0,220,255,.15);
    border-radius: 50%;
    box-shadow:
        0 0 0 35px rgba(0,220,255,.025),
        0 0 0 70px rgba(0,220,255,.015);
    pointer-events: none;
}

.sw-home-hero .section-kicker {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
    color: #63ddff;
}

.sw-home-hero h1 {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0;
    font-size: clamp(38px, 5vw, 68px);
    line-height: 1.02;
    letter-spacing: -2px;
    color: #fff;
}

.sw-home-hero h1 span {
    color: #63ddff;
}

.sw-home-hero p {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 20px 0 25px;
    color: #aeb8c8;
    font-size: 16px;
    line-height: 1.7;
}

.sw-home-actions {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.sw-home-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 20px;
    border-radius: 9px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    transition: .2s ease;
}

.sw-home-button-primary {
    background: #63ddff;
    color: #061018;
}

.sw-home-button-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(99,221,255,.18);
}

.sw-home-button-secondary {
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.035);
    color: #dbe4ef;
}

.sw-home-button-secondary:hover {
    background: rgba(255,255,255,.07);
}


/* Main layout */

.sw-home-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 25px;
    align-items: start;
}

.sw-home-main {
    min-width: 0;
}

.sw-home-sidebar {
    position: sticky;
    top: 90px;
    min-width: 0;
}


/* Game block */

.sw-home-game {
    margin-bottom: 42px;
}

.sw-home-game-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 18px;
}

.sw-home-game-title {
    margin: 0;
    color: #fff;
    font-size: 26px;
    line-height: 1.15;
}

.sw-home-game-subtitle {
    margin: 5px 0 0;
    color: #8490a3;
    font-size: 13px;
}


/* Section */

.sw-home-section {
    margin-bottom: 26px;
}

.sw-home-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.sw-home-section-header h3 {
    margin: 0;
    color: #f2f6fb;
    font-size: 17px;
}

.sw-home-section-link {
    color: #63ddff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
}


/* Horizontal carousel */

.sw-home-carousel {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(190px, 1fr);
    grid-template-rows: 1fr;
    gap: 13px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 10px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}

.sw-home-carousel > * {
    min-width: 0;
    scroll-snap-align: start;
}


/* Trending categories */

.sw-home-category {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 105px;
    padding: 16px 10px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;
    background: linear-gradient(145deg, #111722, #0d121b);
    text-decoration: none;
    transition: .2s ease;
}

.sw-home-category:hover {
    transform: translateY(-3px);
    border-color: rgba(99,221,255,.25);
    background: #121b27;
}

.sw-home-category-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: 9px;
    border-radius: 10px;
    background: rgba(99,221,255,.08);
    color: #63ddff;
    font-size: 18px;
}

.sw-home-category-name {
    color: #e7edf5;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.sw-home-category-count {
    margin-top: 4px;
    color: #687589;
    font-size: 10px;
}


/* Mod cards */

.sw-home-mod-card {
    overflow: hidden;
    min-width: 0;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;
    background: #10151e;
    box-shadow: 0 8px 25px rgba(0,0,0,.15);
}

.sw-home-mod-image-link {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #0b1017;
    text-decoration: none;
}

.sw-home-mod-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.sw-home-mod-card:hover .sw-home-mod-image {
    transform: scale(1.04);
}

.sw-home-mod-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at center, rgba(99,221,255,.09), transparent 55%),
        #0b1017;
    color: #536276;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    line-height: 1.5;
    text-align: center;
}

.sw-home-mod-badge {
    position: absolute;
    top: 9px;
    right: 9px;
    padding: 4px 7px;
    border-radius: 5px;
    background: rgba(5,10,16,.82);
    color: #63ddff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .7px;
}

.sw-home-mod-body {
    padding: 12px;
}

.sw-home-mod-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 7px;
    color: #687589;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.sw-home-mod-body h4 {
    margin: 0;
    min-height: 36px;
    font-size: 13px;
    line-height: 1.4;
}

.sw-home-mod-body h4 a {
    color: #f0f4f8;
    text-decoration: none;
}

.sw-home-mod-body h4 a:hover {
    color: #63ddff;
}

.sw-home-mod-body p {
    display: -webkit-box;
    overflow: hidden;
    margin: 7px 0 10px;
    color: #7e899b;
    font-size: 10px;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.sw-home-mod-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 9px;
    border-top: 1px solid rgba(255,255,255,.05);
    font-size: 9px;
}

.sw-home-mod-creator {
    overflow: hidden;
    color: #9ba7b7;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sw-home-mod-downloads {
    flex-shrink: 0;
    color: #63ddff;
}


/* See all */

.sw-home-see-all {
    margin-top: 3px;
    text-align: center;
}

.sw-home-see-all a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 22px;
    border: 1px solid rgba(99,221,255,.25);
    border-radius: 8px;
    color: #63ddff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    background: rgba(99,221,255,.04);
    transition: .2s ease;
}

.sw-home-see-all a:hover {
    background: rgba(99,221,255,.1);
    transform: translateY(-2px);
}


/* Sidebar cards */

.sw-home-sidebar-card {
    margin-bottom: 16px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px;
    background: linear-gradient(145deg, #111722, #0c1119);
}

.sw-home-sidebar-card h3 {
    margin: 0 0 13px;
    color: #f0f4f8;
    font-size: 15px;
}

.sw-home-browse-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sw-home-browse-list a {
    display: flex;
    align-items: center;
    min-height: 35px;
    padding: 0 9px;
    border-radius: 7px;
    color: #9ba7b7;
    text-decoration: none;
    font-size: 11px;
    transition: .15s ease;
}

.sw-home-browse-list a:hover {
    background: rgba(99,221,255,.06);
    color: #63ddff;
}


/* Top creators */

.sw-home-creator {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
}

.sw-home-creator:last-child {
    border-bottom: 0;
}

.sw-home-creator-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    background: #182331;
    color: #63ddff;
    font-size: 12px;
    font-weight: 900;
}

.sw-home-creator-info {
    min-width: 0;
}

.sw-home-creator-name {
    overflow: hidden;
    color: #e4eaf2;
    font-size: 11px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sw-home-creator-count {
    margin-top: 3px;
    color: #687589;
    font-size: 9px;
}


/* FAQ */

.sw-home-faq details {
    padding: 9px 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
}

.sw-home-faq details:last-child {
    border-bottom: 0;
}

.sw-home-faq summary {
    cursor: pointer;
    color: #b8c2d0;
    font-size: 11px;
    font-weight: 700;
    list-style: none;
}

.sw-home-faq summary::-webkit-details-marker {
    display: none;
}

.sw-home-faq summary::after {
    content: "+";
    float: right;
    color: #63ddff;
    font-size: 14px;
}

.sw-home-faq details[open] summary::after {
    content: "−";
}

.sw-home-faq p {
    margin: 8px 0 2px;
    color: #737f91;
    font-size: 10px;
    line-height: 1.6;
}


/* Empty sections */

.sw-home-empty {
    padding: 25px;
    border: 1px dashed rgba(255,255,255,.08);
    border-radius: 10px;
    color: #657184;
    text-align: center;
    font-size: 11px;
}


/* Responsive */

@media (max-width: 1050px) {

    .sw-home-layout {
        grid-template-columns: minmax(0, 1fr) 260px;
    }

    .sw-home-carousel {
        grid-auto-columns: 210px;
    }

}

@media (max-width: 800px) {

    .sw-home {
        padding: 20px 14px 50px;
    }

    .sw-home-hero {
        padding: 35px 25px;
    }

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

    .sw-home-sidebar {
        position: static;
    }

    .sw-home-carousel {
        grid-auto-columns: 220px;
    }

}

@media (max-width: 500px) {

    .sw-home-hero {
        padding: 30px 20px;
    }

    .sw-home-hero h1 {
        font-size: 38px;
        letter-spacing: -1.5px;
    }

    .sw-home-hero p {
        font-size: 14px;
    }

    .sw-home-game-title {
        font-size: 22px;
    }

    .sw-home-carousel {
        grid-auto-columns: 205px;
    }

}

/* =========================================================
   HOMEPAGE — ACTIVE BLADE CLASS STYLES
   ========================================================= */

.sw-home-kicker,
.sw-section-kicker {
    display: inline-block;
    margin-bottom: 8px;
    color: #63ddff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.sw-game-section {
    margin-bottom: 42px;
}

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

.sw-game-heading h2 {
    margin: 4px 0 7px;
    color: #f1f5f9;
    font-size: 25px;
    line-height: 1.2;
}

.sw-game-heading p {
    max-width: 700px;
    margin: 0;
    color: #8995a7;
    font-size: 13px;
    line-height: 1.6;
}

.sw-see-all-link {
    flex-shrink: 0;
    color: #63ddff;
    text-decoration: none;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.sw-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.sw-section-header h3 {
    margin: 0;
    color: #f0f4f8;
    font-size: 17px;
}

.sw-carousel-controls {
    display: flex;
    gap: 6px;
}

.sw-carousel-prev,
.sw-carousel-next {
    width: 31px;
    height: 31px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 7px;
    background: #111822;
    color: #9eabba;
    cursor: pointer;
    transition: .2s ease;
}

.sw-carousel-prev:hover,
.sw-carousel-next:hover {
    border-color: rgba(99,221,255,.3);
    color: #63ddff;
}

.sw-category-carousel,
.sw-mod-carousel {
    display: flex;
    gap: 13px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 10px;
    scroll-behavior: smooth;
    scrollbar-width: thin;
}

.sw-category-card {
    flex: 0 0 145px;
    min-height: 102px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 14px 10px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 11px;
    background: linear-gradient(145deg, #111722, #0d121b);
    color: #dce4ed;
    text-decoration: none;
    transition: .2s ease;
}

.sw-category-card:hover {
    transform: translateY(-3px);
    border-color: rgba(99,221,255,.25);
}

.sw-category-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-bottom: 8px;
    border-radius: 9px;
    background: rgba(99,221,255,.08);
    color: #63ddff;
}

.sw-category-card strong {
    font-size: 11px;
    text-align: center;
}

.sw-category-card small {
    margin-top: 4px;
    color: #687589;
    font-size: 9px;
}

.sw-mod-carousel > .sw-home-mod-card {
    flex: 0 0 calc((100% - 52px) / 5);
}

.sw-game-cta {
    display: flex;
    justify-content: center;
    margin-top: 17px;
}

.sw-home-primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 41px;
    padding: 0 19px;
    border: 1px solid rgba(99,221,255,.25);
    border-radius: 8px;
    background: rgba(99,221,255,.04);
    color: #63ddff;
    text-decoration: none;
    font-size: 11px;
    font-weight: 800;
}

.sw-home-primary-button span {
    margin-left: 8px;
}

.sw-home-sidebar {
    position: sticky;
    top: 90px;
}

.sw-sidebar-card {
    margin-bottom: 15px;
    padding: 17px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 13px;
    background: linear-gradient(145deg, #111722, #0c1119);
}

.sw-sidebar-heading h3 {
    margin: 2px 0 13px;
    color: #f0f4f8;
    font-size: 15px;
}

.sw-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sw-sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 8px;
    border-radius: 6px;
    color: #9ba7b7;
    text-decoration: none;
    font-size: 11px;
}

.sw-sidebar-nav a span {
    color: #63ddff;
}

.sw-sidebar-nav a:hover {
    background: rgba(99,221,255,.05);
    color: #63ddff;
}

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

    .sw-mod-carousel > .sw-home-mod-card {
        flex: 0 0 205px;
    }

    .sw-home-sidebar {
        position: static;
    }
}

@media (max-width: 500px) {
    .sw-category-card {
        flex-basis: 135px;
    }

    .sw-mod-carousel > .sw-home-mod-card {
        flex-basis: 195px;
    }
}

/* =========================================================
   HOMEPAGE — ALL CATEGORIES + INTERACTIVE MOD CARDS
   ========================================================= */

.sw-category-carousel {
    gap: 12px;
}

.sw-category-card {
    flex: 0 0 145px;
    min-height: 112px;
    position: relative;
    overflow: hidden;
    border-radius: 13px;
    background:
        radial-gradient(circle at 50% 0%, rgba(99,221,255,.08), transparent 55%),
        linear-gradient(145deg, #121923, #0b1018);
    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.sw-category-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 30px rgba(99,221,255,.025);
    pointer-events: none;
}

.sw-category-card:hover {
    transform: translateY(-4px);
    border-color: rgba(99,221,255,.3);
    box-shadow: 0 14px 30px rgba(0,0,0,.24);
}

.sw-category-icon {
    width: 42px;
    height: 42px;
    margin-bottom: 9px;
    border: 1px solid rgba(99,221,255,.11);
    border-radius: 12px;
    background: rgba(99,221,255,.06);
}

.sw-category-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sw-category-card strong {
    max-width: 120px;
    line-height: 1.3;
}

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


/* Exactly four mod cards visible on desktop */

.sw-mod-carousel {
    gap: 14px;
    scroll-snap-type: x proximity;
}

.sw-mod-carousel > .sw-home-mod-card {
    flex: 0 0 calc((100% - 42px) / 4);
    min-width: 0;
    scroll-snap-align: start;
}


/* Whole-card link */

.sw-home-mod-card {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 14px;
    background: #10161f;
    box-shadow: 0 8px 25px rgba(0,0,0,.16);
    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

.sw-home-mod-card:hover {
    transform: translateY(-5px);
    border-color: rgba(99,221,255,.24);
    box-shadow:
        0 18px 38px rgba(0,0,0,.25),
        0 0 25px rgba(99,221,255,.035);
}

.sw-home-mod-card-link {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
}


/* Media */

.sw-home-mod-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #090e15;
}

.sw-home-mod-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform .4s ease,
        filter .3s ease;
}

.sw-home-mod-card:hover .sw-home-mod-image {
    transform: scale(1.07);
    filter: saturate(1.08);
}

.sw-home-mod-media-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(3,7,12,.15) 0%,
            transparent 42%,
            rgba(3,7,12,.68) 100%
        );
    pointer-events: none;
}

.sw-home-mod-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 5px 8px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 6px;
    background: rgba(6,11,17,.76);
    backdrop-filter: blur(8px);
    color: #63ddff;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .9px;
}

.sw-home-mod-hover-arrow {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    background: rgba(5,10,16,.68);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 15px;
    opacity: 0;
    transform: translateX(5px);
    transition: .22s ease;
}

.sw-home-mod-card:hover .sw-home-mod-hover-arrow {
    opacity: 1;
    transform: translateX(0);
}

.sw-home-mod-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at center, rgba(99,221,255,.1), transparent 55%),
        #0b1017;
    color: #586678;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.7px;
    line-height: 1.5;
    text-align: center;
}


/* Body */

.sw-home-mod-body {
    padding: 13px;
}

.sw-home-mod-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 7px;
}

.sw-home-mod-category {
    overflow: hidden;
    color: #63ddff;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .7px;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.sw-home-mod-version {
    flex-shrink: 0;
    color: #687588;
    font-size: 8px;
}

.sw-home-mod-title {
    display: -webkit-box;
    overflow: hidden;
    min-height: 38px;
    margin: 0;
    color: #f1f5f9;
    font-size: 13px;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.sw-home-mod-description {
    display: -webkit-box;
    overflow: hidden;
    min-height: 30px;
    margin: 7px 0 12px;
    color: #778496;
    font-size: 10px;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}


/* Footer */

.sw-home-mod-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.055);
}

.sw-home-mod-creator {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 7px;
}

.sw-home-mod-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border: 1px solid rgba(99,221,255,.12);
    border-radius: 50%;
    background: #172331;
    color: #63ddff;
    font-size: 9px;
    font-weight: 900;
}

.sw-home-mod-creator-name {
    overflow: hidden;
    color: #a5afbd;
    font-size: 9px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sw-home-mod-stats {
    display: flex;
    flex-shrink: 0;
    gap: 7px;
    color: #687588;
    font-size: 8px;
}

.sw-home-mod-stats span {
    white-space: nowrap;
}


/* Responsive */

@media (max-width: 1100px) {

    .sw-mod-carousel > .sw-home-mod-card {
        flex-basis: calc((100% - 28px) / 3);
    }

}

@media (max-width: 800px) {

    .sw-mod-carousel > .sw-home-mod-card {
        flex-basis: 220px;
    }

    .sw-category-card {
        flex-basis: 135px;
    }

}

@media (max-width: 500px) {

    .sw-mod-carousel > .sw-home-mod-card {
        flex-basis: 195px;
    }

}

/* =========================================================
   MOD CARD — VIEW MOD HOVER
   ========================================================= */

.sw-home-mod-view {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 112px;
    height: 38px;
    padding: 0 15px;
    box-sizing: border-box;
    border: 1px solid rgba(99,221,255,.45);
    border-radius: 8px;
    background: rgba(5,11,18,.78);
    backdrop-filter: blur(10px);
    color: #ffffff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0;
    transform: translate(-50%, -42%);
    box-shadow:
        0 8px 25px rgba(0,0,0,.3),
        0 0 20px rgba(99,221,255,.08);
    transition:
        opacity .22s ease,
        transform .22s ease,
        background .22s ease,
        border-color .22s ease;
    pointer-events: none;
}

.sw-home-mod-view::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    box-shadow: inset 0 0 18px rgba(99,221,255,.05);
    pointer-events: none;
}

.sw-home-mod-card:hover .sw-home-mod-view {
    opacity: 1;
    transform: translate(-50%, -50%);
}

.sw-home-mod-card:hover .sw-home-mod-media-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(3,7,12,.28) 0%,
            rgba(3,7,12,.18) 35%,
            rgba(3,7,12,.82) 100%
        );
}

.sw-home-mod-card:hover .sw-home-mod-view {
    border-color: rgba(99,221,255,.7);
    background: rgba(6,15,23,.88);
    color: #63ddff;
}


/* =========================================================
   HOMEPAGE — GAME CATEGORY SEPARATORS
   ========================================================= */

.sw-game-section {
    position: relative;
    margin-bottom: 70px;
}

.sw-game-section:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -36px;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(99,221,255,.04) 8%,
            rgba(99,221,255,.22) 30%,
            rgba(99,221,255,.42) 50%,
            rgba(99,221,255,.22) 70%,
            rgba(99,221,255,.04) 92%,
            transparent 100%
        );
}

.sw-game-section:not(:last-child)::before {
    content: "◆";
    position: absolute;
    left: 50%;
    bottom: -41px;
    z-index: 2;
    width: 34px;
    height: 11px;
    margin-left: -17px;
    background: #0a0f15;
    color: #63ddff;
    font-size: 8px;
    line-height: 11px;
    text-align: center;
    letter-spacing: 2px;
}

.sw-game-section:not(:last-child) {
    padding-bottom: 1px;
}

@media (max-width: 800px) {

    .sw-game-section {
        margin-bottom: 58px;
    }

    .sw-game-section:not(:last-child)::after {
        bottom: -29px;
    }

    .sw-game-section:not(:last-child)::before {
        bottom: -34px;
    }

}


/* Slightly smaller homepage mod cards */
.sw-mod-carousel > .sw-home-mod-card {
    flex-basis: calc((100% - 58px) / 4);
}

.sw-home-mod-body {
    padding: 11px;
}

.sw-home-mod-title {
    font-size: 12px;
}

.sw-home-mod-description {
    font-size: 9px;
    margin-top: 6px;
    margin-bottom: 10px;
}

.sw-home-mod-bottom {
    padding-top: 8px;
}

.sw-home-mod-avatar {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
}

.sw-home-mod-creator-name,
.sw-home-mod-stats {
    font-size: 8px;
}

@media (max-width: 1100px) {
    .sw-mod-carousel > .sw-home-mod-card {
        flex-basis: calc((100% - 42px) / 3);
    }
}

@media (max-width: 800px) {
    .sw-mod-carousel > .sw-home-mod-card {
        flex-basis: 210px;
    }
}

@media (max-width: 500px) {
    .sw-mod-carousel > .sw-home-mod-card {
        flex-basis: 185px;
    }
}


/* =========================================================
   SIMULATION WORLD — FUTURISTIC SIDEBAR
   ========================================================= */

.sw-home-sidebar {
    position: sticky;
    top: 90px;
    min-width: 0;
}

.sw-sidebar-card {
    position: relative;
    overflow: hidden;
    margin-bottom: 14px;
    padding: 17px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 15px;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(99,221,255,.055),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #121923,
            #0c1118
        );
    box-shadow:
        0 10px 28px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.02);
}

.sw-sidebar-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 42px;
    height: 1px;
    background: #63ddff;
    box-shadow: 0 0 12px rgba(99,221,255,.45);
}

.sw-sidebar-card::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 14px;
    width: 34px;
    height: 34px;
    border-top: 1px solid rgba(99,221,255,.08);
    border-right: 1px solid rgba(99,221,255,.08);
    pointer-events: none;
}

.sw-sidebar-heading {
    position: relative;
    z-index: 1;
    margin-bottom: 12px;
}

.sw-sidebar-heading .sw-section-kicker {
    margin-bottom: 6px;
    font-size: 9px;
    letter-spacing: 2px;
}

.sw-sidebar-heading h3 {
    margin: 0;
    color: #f1f5f9;
    font-size: 15px;
    line-height: 1.25;
    font-weight: 800;
}


/* Browse */

.sw-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sw-sidebar-nav a {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 37px;
    gap: 10px;
    padding: 0 9px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #9aa7b7;
    text-decoration: none;
    font-size: 10px;
    font-weight: 600;
    transition:
        background .18s ease,
        border-color .18s ease,
        color .18s ease,
        transform .18s ease;
}

.sw-sidebar-nav a span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    border: 1px solid rgba(99,221,255,.08);
    border-radius: 7px;
    background: rgba(99,221,255,.045);
    color: #63ddff;
    font-size: 10px;
}

.sw-sidebar-nav a:hover {
    transform: translateX(2px);
    border-color: rgba(99,221,255,.11);
    background: rgba(99,221,255,.045);
    color: #e7edf4;
}

.sw-sidebar-nav a:hover span {
    border-color: rgba(99,221,255,.18);
    background: rgba(99,221,255,.08);
}


/* Top creators */

.sw-top-creators {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sw-creator-row {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0,1fr) auto;
    align-items: center;
    gap: 9px;
    min-height: 49px;
    padding: 6px 5px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: inherit;
    text-decoration: none;
    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

.sw-creator-row:hover {
    transform: translateX(2px);
    border-color: rgba(99,221,255,.11);
    background: rgba(99,221,255,.035);
}

.sw-creator-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(99,221,255,.14);
    border-radius: 10px;
    background:
        linear-gradient(
            145deg,
            rgba(99,221,255,.12),
            rgba(99,221,255,.035)
        );
    color: #63ddff;
    font-size: 11px;
    font-weight: 900;
}

.sw-creator-row > div:nth-child(2) {
    min-width: 0;
}

.sw-creator-row strong {
    display: block;
    overflow: hidden;
    color: #e7edf4;
    font-size: 11px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sw-creator-row small {
    display: block;
    margin-top: 4px;
    color: #697688;
    font-size: 9px;
    line-height: 1;
}

.sw-creator-row::after {
    content: "→";
    color: #506072;
    font-size: 12px;
    opacity: .45;
    transition: .18s ease;
}

.sw-creator-row:hover::after {
    color: #63ddff;
    opacity: 1;
    transform: translateX(2px);
}


/* Quick tips / FAQ */

.sw-tips-list {
    display: flex;
    flex-direction: column;
}

.sw-tips-list details {
    margin: 0;
    border-top: 1px solid rgba(255,255,255,.05);
}

.sw-tips-list details:first-child {
    border-top: 0;
}

.sw-tips-list summary {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: 0 24px 0 0;
    cursor: pointer;
    color: #b4bfcd;
    font-size: 10px;
    font-weight: 700;
    list-style: none;
    transition: color .18s ease;
}

.sw-tips-list summary::-webkit-details-marker {
    display: none;
}

.sw-tips-list summary::before {
    content: "";
    width: 5px;
    height: 5px;
    margin-right: 9px;
    flex: 0 0 5px;
    border-radius: 50%;
    background: #456071;
    transition:
        background .18s ease,
        box-shadow .18s ease;
}

.sw-tips-list summary::after {
    content: "+";
    position: absolute;
    right: 2px;
    top: 50%;
    color: #627082;
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    transform: translateY(-50%);
}

.sw-tips-list details[open] summary {
    color: #e8eef5;
}

.sw-tips-list details[open] summary::before {
    background: #63ddff;
    box-shadow: 0 0 8px rgba(99,221,255,.45);
}

.sw-tips-list details[open] summary::after {
    content: "−";
    color: #63ddff;
}

.sw-tips-list summary:hover {
    color: #63ddff;
}

.sw-tips-list details p {
    margin: 0 0 11px 14px;
    padding: 0 17px 0 8px;
    border-left: 1px solid rgba(99,221,255,.12);
    color: #748195;
    font-size: 9px;
    line-height: 1.6;
}


/* Empty state */

.sw-sidebar-empty {
    margin: 4px 0;
    color: #6b7788;
    font-size: 10px;
    line-height: 1.5;
}


/* Mobile */

@media (max-width: 900px) {

    .sw-home-sidebar {
        position: static;
    }

}


/* =========================================================
   SIDEBAR — CLEAN SVG NAVIGATION ICONS
   ========================================================= */

.sw-sidebar-nav a {
    min-height: 40px;
    padding: 0 8px;
    gap: 11px;
    border-radius: 9px;
}

.sw-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    border: 0 !important;
    background: transparent !important;
    color: #637487;
}

.sw-nav-icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition:
        color .2s ease,
        transform .2s ease,
        filter .2s ease;
}

.sw-sidebar-nav a:hover .sw-nav-icon {
    color: #63ddff;
}

.sw-sidebar-nav a:hover .sw-nav-icon svg {
    transform: scale(1.08);
    filter: drop-shadow(0 0 5px rgba(99,221,255,.35));
}

.sw-sidebar-nav a:hover {
    transform: translateX(3px);
}


/* =========================================================
   HOMEPAGE SIDEBAR — GAME BROWSE ACCORDION
   ========================================================= */

.sw-sidebar-game-list {
    display: flex;
    flex-direction: column;
}

.sw-side-game {
    border-top: 1px solid rgba(255,255,255,.055);
}

.sw-side-game:first-child {
    border-top: 0;
}

.sw-side-game-button {
    width: 100%;
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 2px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.sw-side-game-button:hover {
    background: rgba(99,221,255,.035);
}

.sw-side-game-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 8px;
    background: rgba(99,221,255,.055);
    color: #637487;
}

.sw-side-game-icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sw-side-game-button:hover .sw-side-game-icon,
.sw-side-game.expanded .sw-side-game-icon {
    color: #63ddff;
}

.sw-side-game-text {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.sw-side-game-text strong {
    color: #dfe7ef;
    font-size: 10px;
    font-weight: 800;
}

.sw-side-game-text small {
    margin-top: 3px;
    overflow: hidden;
    color: #697688;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sw-side-chevron {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    fill: none;
    stroke: #586779;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .2s ease, color .2s ease;
}

.sw-side-game.expanded .sw-side-chevron {
    transform: rotate(90deg);
    stroke: #63ddff;
}

.sw-side-submenu {
    display: none;
    margin: 0 0 7px 39px;
    padding-left: 11px;
    border-left: 1px solid rgba(99,221,255,.12);
}

.sw-side-game.expanded .sw-side-submenu {
    display: block;
    animation: swSidebarSubmenu .18s ease;
}

.sw-side-submenu a {
    display: flex;
    align-items: center;
    min-height: 29px;
    position: relative;
    padding: 0 7px;
    border-radius: 6px;
    color: #7f8b9c;
    text-decoration: none;
    font-size: 9px;
    transition: .16s ease;
}

.sw-side-submenu a::before {
    content: "";
    width: 4px;
    height: 4px;
    margin-right: 8px;
    flex: 0 0 4px;
    border-radius: 50%;
    background: #465569;
}

.sw-side-submenu a:hover {
    background: rgba(99,221,255,.045);
    color: #63ddff;
}

.sw-side-submenu a:hover::before {
    background: #63ddff;
    box-shadow: 0 0 7px rgba(99,221,255,.45);
}

@keyframes swSidebarSubmenu {
    from {
        opacity: 0;
        transform: translateY(-3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Sidebar Browse — slightly larger typography */
.sw-side-game-text strong {
    font-size: 11px;
}

.sw-side-game-text small {
    font-size: 9px;
}

.sw-side-submenu a {
    min-height: 31px;
    font-size: 10px;
}

.sw-sidebar-heading h3 {
    font-size: 16px;
}


/* Sidebar Browse — larger typography */
.sw-side-game-text strong {
    font-size: 13px;
}

.sw-side-game-text small {
    font-size: 10px;
}

.sw-side-submenu a {
    min-height: 34px;
    font-size: 11px;
}

.sw-sidebar-heading h3 {
    font-size: 17px;
}


/* =========================================================
   SIMULATION WORLD — INTERACTIVE BUTTON SYSTEM
   ========================================================= */

.sw-home-primary-button,
.sw-home-secondary-button,
.sw-carousel-prev,
.sw-carousel-next,
.nav-button,
.header-action,
.mobile-menu-button,
.sw-side-game-button {
    -webkit-tap-highlight-color: transparent;
}

/* Homepage hero buttons */

.sw-home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.sw-home-primary-button,
.sw-home-secondary-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 9px;
    text-decoration: none;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .15px;
    overflow: hidden;
    transition:
        transform .2s cubic-bezier(.22,1,.36,1),
        border-color .2s ease,
        background .2s ease,
        color .2s ease,
        box-shadow .2s ease;
}

.sw-home-primary-button::before,
.sw-home-secondary-button::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        transparent 20%,
        rgba(255,255,255,.08) 48%,
        transparent 78%
    );
    transform: translateX(-130%);
    transition: transform .5s ease;
}

.sw-home-primary-button::after,
.sw-home-secondary-button::after {
    content: "→";
    margin-left: 9px;
    transition: transform .2s ease;
}

.sw-home-primary-button {
    border: 1px solid rgba(99,221,255,.55);
    background:
        linear-gradient(
            135deg,
            #63ddff,
            #55ccef
        );
    color: #061019;
    box-shadow:
        0 8px 24px rgba(99,221,255,.12),
        inset 0 1px 0 rgba(255,255,255,.22);
}

.sw-home-secondary-button {
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.035);
    color: #dce4ed;
    box-shadow:
        0 6px 18px rgba(0,0,0,.12),
        inset 0 1px 0 rgba(255,255,255,.025);
}

.sw-home-primary-button:hover,
.sw-home-secondary-button:hover {
    transform: translateY(-3px);
}

.sw-home-primary-button:hover {
    border-color: rgba(99,221,255,.9);
    box-shadow:
        0 14px 32px rgba(99,221,255,.18),
        0 0 22px rgba(99,221,255,.07);
}

.sw-home-secondary-button:hover {
    border-color: rgba(99,221,255,.3);
    background: rgba(99,221,255,.06);
    color: #63ddff;
    box-shadow:
        0 12px 26px rgba(0,0,0,.18),
        0 0 18px rgba(99,221,255,.04);
}

.sw-home-primary-button:hover::before,
.sw-home-secondary-button:hover::before {
    transform: translateX(130%);
}

.sw-home-primary-button:hover::after,
.sw-home-secondary-button:hover::after {
    transform: translateX(3px);
}

.sw-home-primary-button:active,
.sw-home-secondary-button:active {
    transform: translateY(-1px) scale(.98);
}

.sw-home-primary-button:focus-visible,
.sw-home-secondary-button:focus-visible {
    outline: 2px solid rgba(99,221,255,.65);
    outline-offset: 3px;
}


/* Section CTA buttons */

.sw-game-cta .sw-home-primary-button {
    min-height: 42px;
    padding: 0 20px;
}


/* Carousel buttons */

.sw-carousel-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sw-carousel-prev,
.sw-carousel-next {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px;
    background: rgba(255,255,255,.035);
    color: #8998a9;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        color .18s ease,
        box-shadow .18s ease;
}

.sw-carousel-prev:hover,
.sw-carousel-next:hover {
    transform: translateY(-2px);
    border-color: rgba(99,221,255,.3);
    background: rgba(99,221,255,.06);
    color: #63ddff;
    box-shadow:
        0 7px 18px rgba(0,0,0,.18),
        0 0 14px rgba(99,221,255,.045);
}

.sw-carousel-prev:active,
.sw-carousel-next:active {
    transform: translateY(0) scale(.94);
}

.sw-carousel-prev:focus-visible,
.sw-carousel-next:focus-visible {
    outline: 2px solid rgba(99,221,255,.5);
    outline-offset: 2px;
}


/* Sidebar game buttons */

.sw-side-game-button {
    transition:
        background .18s ease,
        transform .18s ease;
}

.sw-side-game-button:hover {
    transform: translateX(2px);
}

.sw-side-game-button:active {
    transform: translateX(1px) scale(.99);
}

.sw-side-game-button:focus-visible {
    outline: 2px solid rgba(99,221,255,.4);
    outline-offset: 2px;
}


/* Header Browse button */

.nav-button {
    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

.nav-button:hover {
    transform: translateY(-1px);
}

.nav-button:active {
    transform: translateY(0) scale(.98);
}

.nav-button:focus-visible {
    outline: 2px solid rgba(99,221,255,.5);
    outline-offset: 2px;
}


/* Header action buttons */

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

.header-action:hover {
    transform: translateY(-2px);
    color: #63ddff;
    border-color: rgba(99,221,255,.2);
    background: rgba(99,221,255,.045);
    box-shadow: 0 8px 18px rgba(0,0,0,.16);
}

.header-action:active {
    transform: translateY(0) scale(.95);
}

.header-action:focus-visible {
    outline: 2px solid rgba(99,221,255,.5);
    outline-offset: 2px;
}


/* Mobile menu button */

.mobile-menu-button {
    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease;
}

.mobile-menu-button:hover {
    transform: translateY(-2px);
    border-color: rgba(99,221,255,.25);
    background: rgba(99,221,255,.045);
}

.mobile-menu-button:active {
    transform: scale(.96);
}

.mobile-menu-button:focus-visible {
    outline: 2px solid rgba(99,221,255,.5);
    outline-offset: 2px;
}


/* Browse submenu links */

.sw-side-submenu a {
    position: relative;
    transition:
        padding-left .18s ease,
        color .18s ease,
        background .18s ease;
}

.sw-side-submenu a:hover {
    padding-left: 11px;
}


/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
    .sw-home-primary-button,
    .sw-home-secondary-button,
    .sw-carousel-prev,
    .sw-carousel-next,
    .nav-button,
    .header-action,
    .mobile-menu-button,
    .sw-side-game-button {
        transition: none;
    }

    .sw-home-primary-button::before,
    .sw-home-secondary-button::before {
        display: none;
    }
}


/* =========================================================
   ALL MODS PAGE
   ========================================================= */

.sw-all-mods-page {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
    padding: 35px 0 70px;
}

.sw-all-mods-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
    padding: 42px 42px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 17px;
    background:
        radial-gradient(circle at 85% 0%, rgba(99,221,255,.09), transparent 35%),
        linear-gradient(145deg, #121923, #0b1017);
}

.sw-all-mods-hero h1 {
    margin: 8px 0 12px;
    color: #f3f6fa;
    font-size: clamp(34px, 5vw, 54px);
    line-height: 1.05;
}

.sw-all-mods-hero h1 span {
    color: #63ddff;
}

.sw-all-mods-hero p {
    max-width: 650px;
    margin: 0;
    color: #8995a7;
    font-size: 14px;
    line-height: 1.7;
}

.sw-all-mods-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.sw-all-mods-heading h2 {
    margin: 0;
    color: #f0f4f8;
    font-size: 22px;
}

.sw-all-mods-count {
    color: #687588;
    font-size: 11px;
}

.sw-all-mods-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.sw-all-mods-pagination {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.sw-all-mods-pagination nav {
    display: flex;
    align-items: center;
    gap: 5px;
}

.sw-all-mods-pagination a,
.sw-all-mods-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 9px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    background: rgba(255,255,255,.025);
    color: #9aa7b7;
    text-decoration: none;
    font-size: 10px;
}

.sw-all-mods-pagination .current span {
    border-color: rgba(99,221,255,.4);
    background: rgba(99,221,255,.08);
    color: #63ddff;
}

.sw-all-mods-pagination a:hover {
    border-color: rgba(99,221,255,.25);
    color: #63ddff;
}

@media (max-width: 950px) {
    .sw-all-mods-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .sw-all-mods-page {
        width: calc(100% - 24px);
    }

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

    .sw-all-mods-hero {
        padding: 30px 24px;
    }
}

@media (max-width: 450px) {
    .sw-all-mods-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   ALL MODS — FINAL LAYOUT OVERRIDE
   ========================================================= */

.site-main .sw-all-mods-page {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;

    display: block !important;

    width: min(1200px, calc(100vw - 48px)) !important;
    max-width: 1200px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding: 35px 0 70px !important;

    box-sizing: border-box !important;
}

.site-main .sw-all-mods-hero,
.site-main .sw-all-mods-content {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.site-main .sw-all-mods-grid {
    display: grid !important;

    width: 100% !important;
    max-width: 100% !important;

    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

    gap: 16px !important;

    box-sizing: border-box !important;
}

.site-main .sw-all-mods-grid .sw-home-mod-card {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    flex: none !important;

    box-sizing: border-box !important;
}

.site-main .sw-all-mods-grid .sw-home-mod-card-link {
    width: 100% !important;
    max-width: 100% !important;
}

.site-main .sw-all-mods-grid .sw-home-mod-media {
    width: 100% !important;
}

@media (max-width: 1050px) {
    .site-main .sw-all-mods-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 700px) {
    .site-main .sw-all-mods-page {
        width: calc(100vw - 24px) !important;
        max-width: none !important;
        padding-top: 25px !important;
    }

    .site-main .sw-all-mods-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 450px) {
    .site-main .sw-all-mods-grid {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   ALL MODS — GAME-WISE LIBRARY
   ========================================================= */

.site-main .sw-all-mods-page {
    width: min(1200px, calc(100% - 40px));
    max-width: 1200px;
    margin: 0 auto;
    padding: 34px 0 70px;
    box-sizing: border-box;
}

.sw-all-game-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 28px;
    padding: 7px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;
    background: rgba(255,255,255,.02);
}

.sw-all-game-filter a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #8996a7;
    text-decoration: none;
    font-size: 10px;
    font-weight: 700;
    transition: .18s ease;
}

.sw-all-game-filter a small {
    color: #5f6d7e;
    font-size: 8px;
}

.sw-all-game-filter a:hover {
    background: rgba(99,221,255,.045);
    color: #63ddff;
}

.sw-all-game-filter a.is-active {
    border-color: rgba(99,221,255,.2);
    background: rgba(99,221,255,.07);
    color: #63ddff;
}

.sw-all-game-filter a.is-active small {
    color: #63ddff;
}

.sw-all-game-sections {
    display: flex;
    flex-direction: column;
    gap: 42px;
}

.sw-all-game-section {
    position: relative;
    padding-bottom: 42px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.sw-all-game-section:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.sw-all-game-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 15px;
}

.sw-all-game-heading h3 {
    margin: 0;
    color: #f0f4f8;
    font-size: 20px;
    line-height: 1.2;
}

.sw-all-game-link {
    flex-shrink: 0;
    color: #63ddff;
    text-decoration: none;
    font-size: 10px;
    font-weight: 800;
}

.sw-all-mods-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
}

.sw-all-mods-grid .sw-home-mod-card {
    width: 100%;
    min-width: 0;
    max-width: none;
    flex: none;
    box-sizing: border-box;
}

.sw-all-mods-grid .sw-home-mod-card-link {
    display: block;
    width: 100%;
}

.sw-all-mods-grid .sw-home-mod-media {
    width: 100%;
}

.sw-all-mods-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 35px;
}

.sw-all-mods-pagination a,
.sw-all-mods-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 8px;
    background: rgba(255,255,255,.025);
    color: #8996a7;
    text-decoration: none;
    font-size: 9px;
    font-weight: 700;
    transition: .18s ease;
}

.sw-all-mods-pagination a:hover {
    border-color: rgba(99,221,255,.28);
    background: rgba(99,221,255,.055);
    color: #63ddff;
    transform: translateY(-1px);
}

.sw-all-mods-pagination .is-current {
    border-color: rgba(99,221,255,.35);
    background: rgba(99,221,255,.09);
    color: #63ddff;
}

.sw-all-mods-pagination .is-disabled {
    opacity: .35;
    cursor: default;
}

.sw-all-mods-empty {
    padding: 55px 20px;
    border: 1px dashed rgba(255,255,255,.09);
    border-radius: 14px;
    text-align: center;
}

.sw-all-mods-empty-icon {
    margin-bottom: 12px;
    color: #63ddff;
    font-size: 25px;
}

.sw-all-mods-empty h3 {
    margin: 0 0 7px;
    color: #e8edf3;
    font-size: 17px;
}

.sw-all-mods-empty p {
    margin: 0;
    color: #6f7c8d;
    font-size: 10px;
}

@media (max-width: 1050px) {
    .sw-all-mods-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {

    .site-main .sw-all-mods-page {
        width: calc(100% - 24px);
        padding-top: 25px;
    }

    .sw-all-game-filter {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: thin;
    }

    .sw-all-game-filter a {
        flex-shrink: 0;
    }

    .sw-all-game-heading {
        align-items: flex-start;
        flex-direction: column;
    }

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

}

@media (max-width: 450px) {

    .sw-all-mods-grid {
        grid-template-columns: 1fr;
    }

    .sw-all-mods-pagination a,
    .sw-all-mods-pagination span {
        min-width: 32px;
        height: 32px;
        padding: 0 8px;
    }

}


/* =========================================================
   SIMULATION WORLD — ARTICLES
   ========================================================= */

.sw-articles-page,
.sw-article-page {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
    padding: 34px 0 70px;
}

.sw-articles-hero {
    position: relative;
    overflow: hidden;
    padding: 40px;
    margin-bottom: 30px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    background:
        radial-gradient(circle at 90% 0%, rgba(99,221,255,.09), transparent 36%),
        linear-gradient(145deg, #121923, #0b1017);
}

.sw-articles-hero h1 {
    margin: 8px 0 12px;
    color: #f3f6fa;
    font-size: clamp(34px, 5vw, 52px);
    line-height: 1.05;
}

.sw-articles-hero h1 span {
    color: #63ddff;
}

.sw-articles-hero p {
    max-width: 650px;
    margin: 0;
    color: #7d8a9b;
    font-size: 13px;
    line-height: 1.7;
}

.sw-articles-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 17px;
}

.sw-articles-heading h2 {
    margin: 3px 0 0;
    color: #edf2f7;
    font-size: 23px;
}

.sw-articles-heading > span {
    color: #6c798b;
    font-size: 10px;
}

.sw-articles-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 15px;
}

.sw-article-card {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 14px;
    background: #10161f;
    color: inherit;
    text-decoration: none;
    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

.sw-article-card:hover {
    transform: translateY(-5px);
    border-color: rgba(99,221,255,.25);
    box-shadow: 0 18px 36px rgba(0,0,0,.25);
}

.sw-article-card-image {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #090e15;
}

.sw-article-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.sw-article-card:hover .sw-article-card-image img {
    transform: scale(1.06);
}

.sw-article-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at center, rgba(99,221,255,.09), transparent 60%),
        #0b1118;
    color: #586878;
    text-align: center;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 2px;
    line-height: 1.5;
}

.sw-article-card-arrow {
    position: absolute;
    right: 11px;
    bottom: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 8px;
    background: rgba(5,10,16,.75);
    color: #63ddff;
    opacity: 0;
    transform: translateX(5px);
    transition: .2s ease;
}

.sw-article-card:hover .sw-article-card-arrow {
    opacity: 1;
    transform: translateX(0);
}

.sw-article-card-body {
    padding: 14px;
}

.sw-article-category {
    color: #63ddff;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.sw-article-card h3 {
    margin: 8px 0 8px;
    color: #edf2f7;
    font-size: 15px;
    line-height: 1.35;
}

.sw-article-card p {
    margin: 0;
    color: #788698;
    font-size: 10px;
    line-height: 1.6;
}

.sw-article-card-footer {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.055);
    color: #667486;
    font-size: 8px;
}

.sw-article-card-footer span:last-child {
    color: #63ddff;
    font-weight: 800;
}

.sw-articles-pagination {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.sw-articles-pagination nav {
    display: flex;
    gap: 5px;
}

.sw-articles-pagination a,
.sw-articles-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 35px;
    height: 35px;
    padding: 0 9px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    background: rgba(255,255,255,.025);
    color: #8996a7;
    text-decoration: none;
    font-size: 9px;
}

.sw-articles-pagination a:hover,
.sw-articles-pagination .current span {
    border-color: rgba(99,221,255,.3);
    background: rgba(99,221,255,.07);
    color: #63ddff;
}

.sw-articles-empty {
    padding: 60px 20px;
    border: 1px dashed rgba(255,255,255,.1);
    border-radius: 14px;
    text-align: center;
}

.sw-articles-empty h3 {
    margin: 0 0 7px;
    color: #edf2f7;
}

.sw-articles-empty p {
    margin: 0;
    color: #718093;
    font-size: 11px;
}


/* Individual article */

.sw-article-back {
    display: inline-flex;
    margin-bottom: 22px;
    color: #788698;
    text-decoration: none;
    font-size: 10px;
    font-weight: 700;
}

.sw-article-back:hover {
    color: #63ddff;
}

.sw-article {
    max-width: 900px;
    margin: 0 auto;
}

.sw-article-header {
    margin-bottom: 24px;
}

.sw-article-header h1 {
    margin: 8px 0 12px;
    color: #f3f6fa;
    font-size: clamp(32px, 5vw, 52px);
    line-height: 1.08;
}

.sw-article-meta {
    display: flex;
    gap: 8px;
    color: #6e7b8d;
    font-size: 9px;
}

.sw-article-cover {
    overflow: hidden;
    margin-bottom: 30px;
    border-radius: 15px;
    border: 1px solid rgba(255,255,255,.08);
}

.sw-article-cover img {
    display: block;
    width: 100%;
    max-height: 560px;
    object-fit: cover;
}

.sw-article-content {
    color: #bbc5d0;
    font-size: 14px;
    line-height: 1.85;
}

.sw-article-content h2,
.sw-article-content h3 {
    margin-top: 30px;
    color: #edf2f7;
}

.sw-article-content p {
    margin: 0 0 18px;
}

.sw-article-content a {
    color: #63ddff;
}

.sw-article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

@media (max-width: 850px) {
    .sw-articles-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 600px) {
    .sw-articles-page,
    .sw-article-page {
        width: calc(100% - 24px);
    }

    .sw-articles-hero {
        padding: 28px 22px;
    }

    .sw-articles-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   HOMEPAGE — LATEST 3 ARTICLES
   ========================================================= */

.sw-home-articles {
    margin-bottom: 58px;
}

.sw-home-articles-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 17px;
}

.sw-home-articles-heading h2 {
    margin: 4px 0 6px;
    color: #f0f4f8;
    font-size: 23px;
}

.sw-home-articles-heading p {
    margin: 0;
    color: #788698;
    font-size: 11px;
}

.sw-home-articles-see-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid rgba(99,221,255,.14);
    border-radius: 8px;
    background: rgba(99,221,255,.035);
    color: #9eafbe;
    text-decoration: none;
    font-size: 9px;
    font-weight: 800;
    transition: .2s ease;
}

.sw-home-articles-see-all span {
    color: #63ddff;
    font-size: 13px;
    transition: transform .2s ease;
}

.sw-home-articles-see-all:hover {
    border-color: rgba(99,221,255,.32);
    background: rgba(99,221,255,.07);
    color: #63ddff;
    transform: translateY(-2px);
}

.sw-home-articles-see-all:hover span {
    transform: translateX(3px);
}

.sw-home-articles-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.sw-home-article-card {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 14px;
    background: #10161f;
    color: inherit;
    text-decoration: none;
    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

.sw-home-article-card:hover {
    transform: translateY(-5px);
    border-color: rgba(99,221,255,.25);
    box-shadow:
        0 17px 35px rgba(0,0,0,.24),
        0 0 20px rgba(99,221,255,.035);
}

.sw-home-article-image {
    position: relative;
    aspect-ratio: 16 / 8.5;
    overflow: hidden;
    background: #090e15;
}

.sw-home-article-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.sw-home-article-card:hover .sw-home-article-image img {
    transform: scale(1.06);
}

.sw-home-article-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at center, rgba(99,221,255,.09), transparent 60%),
        #0b1118;
    color: #596979;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 2px;
    line-height: 1.5;
    text-align: center;
}

.sw-home-article-read {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 6px 9px;
    border: 1px solid rgba(99,221,255,.26);
    border-radius: 6px;
    background: rgba(4,10,16,.8);
    backdrop-filter: blur(8px);
    color: #63ddff;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .7px;
    opacity: 0;
    transform: translateY(5px);
    transition: .2s ease;
}

.sw-home-article-card:hover .sw-home-article-read {
    opacity: 1;
    transform: translateY(0);
}

.sw-home-article-content {
    padding: 14px;
}

.sw-home-article-category {
    color: #63ddff;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.sw-home-article-content h3 {
    margin: 7px 0 7px;
    color: #edf2f7;
    font-size: 15px;
    line-height: 1.35;
}

.sw-home-article-content p {
    margin: 0;
    color: #788698;
    font-size: 10px;
    line-height: 1.6;
}

.sw-home-article-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 13px;
    padding-top: 9px;
    border-top: 1px solid rgba(255,255,255,.055);
    color: #667486;
    font-size: 8px;
}

@media (max-width: 800px) {

    .sw-home-articles-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 500px) {

    .sw-home-articles-heading {
        align-items: flex-start;
        flex-direction: column;
    }

}


/* =========================================================
   ADMIN ARTICLE MANAGEMENT
   ========================================================= */

.admin-articles-panel {
    overflow:hidden;
}

.admin-article-filters {
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:18px;
}

.admin-article-filters a {
    display:inline-flex;
    align-items:center;
    min-height:32px;
    padding:0 11px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:7px;
    background:rgba(255,255,255,.025);
    color:#8795a5;
    text-decoration:none;
    font-size:10px;
    font-weight:800;
    transition:.2s ease;
}

.admin-article-filters a:hover,
.admin-article-filters a.active {
    border-color:rgba(99,221,255,.28);
    background:rgba(99,221,255,.07);
    color:#63ddff;
}

.admin-article-list {
    display:flex;
    flex-direction:column;
    gap:10px;
}

.admin-article-item {
    display:grid;
    grid-template-columns:86px minmax(0,1fr) auto;
    align-items:center;
    gap:16px;
    padding:13px;
    border:1px solid rgba(255,255,255,.07);
    border-radius:11px;
    background:#10161f;
    transition:border-color .2s ease, transform .2s ease, background .2s ease;
}

.admin-article-item:hover {
    border-color:rgba(99,221,255,.18);
    background:#121a24;
    transform:translateY(-1px);
}

.admin-article-thumb {
    width:86px;
    height:62px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    background:#18212c;
    color:#607082;
    font-size:8px;
    font-weight:900;
    letter-spacing:.08em;
    text-align:center;
}

.admin-article-thumb img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.admin-article-info {
    min-width:0;
}

.admin-article-title-row {
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

.admin-article-info h3 {
    margin:0;
    color:#eaf0f5;
    font-size:14px;
    line-height:1.35;
}

.admin-article-info p {
    margin:4px 0 5px;
    color:#697889;
    font-size:9px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.admin-article-info > span {
    display:block;
    margin-bottom:5px;
    color:#7f8d9b;
    font-size:9px;
    line-height:1.45;
}

.admin-article-info small {
    color:#586777;
    font-size:8px;
}

.admin-article-actions {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:7px;
    flex-wrap:wrap;
}

.admin-article-actions form {
    margin:0;
}

.admin-empty-state {
    min-height:190px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:30px;
    border:1px dashed rgba(255,255,255,.09);
    border-radius:11px;
    text-align:center;
}

.admin-empty-state strong {
    color:#dce5ec;
    font-size:14px;
}

.admin-empty-state span {
    color:#6d7c8c;
    font-size:10px;
}

.admin-empty-state .admin-action-view {
    margin-top:6px;
}

/* Article create/edit */

.admin-article-editor {
    overflow:hidden;
}

.admin-article-form-grid {
    display:grid;
    grid-template-columns:minmax(0,1fr) 300px;
    gap:22px;
}

.admin-article-form-main,
.admin-article-form-sidebar {
    min-width:0;
}

.admin-form-group {
    margin-bottom:17px;
}

.admin-form-group label {
    display:block;
    margin-bottom:7px;
    color:#aab8c5;
    font-size:10px;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.admin-form-group input,
.admin-form-group select,
.admin-form-group textarea {
    width:100%;
    box-sizing:border-box;
    border:1px solid rgba(255,255,255,.09);
    border-radius:8px;
    background:#0d131b;
    color:#e8eef3;
    font:inherit;
    font-size:11px;
    outline:none;
    transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.admin-form-group input,
.admin-form-group select {
    min-height:42px;
    padding:0 11px;
}

.admin-form-group textarea {
    min-height:105px;
    padding:11px;
    resize:vertical;
    line-height:1.55;
}

.admin-form-group input[type="file"] {
    padding:9px;
    cursor:pointer;
}

.admin-form-group input:focus,
.admin-form-group select:focus,
.admin-form-group textarea:focus {
    border-color:rgba(99,221,255,.34);
    background:#101923;
    box-shadow:0 0 0 3px rgba(99,221,255,.06);
}

.admin-form-group input::placeholder,
.admin-form-group textarea::placeholder {
    color:#485666;
}

.admin-form-help {
    display:block;
    margin-top:6px;
    color:#5f6e7e;
    font-size:8px;
    line-height:1.5;
}

.admin-form-error {
    display:block;
    margin-top:6px;
    color:#ff7d86;
    font-size:9px;
}

.admin-current-thumbnail {
    width:100%;
    aspect-ratio:16 / 9;
    overflow:hidden;
    margin-bottom:10px;
    border-radius:9px;
    border:1px solid rgba(255,255,255,.08);
    background:#121a23;
}

.admin-current-thumbnail img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.admin-checkbox {
    display:flex !important;
    align-items:center;
    gap:7px;
    margin-bottom:10px;
    color:#7b8998 !important;
    font-size:9px !important;
    font-weight:600 !important;
    text-transform:none !important;
    letter-spacing:0 !important;
}

.admin-checkbox input {
    width:auto !important;
    min-height:auto !important;
}

.admin-article-form-actions {
    display:flex;
    align-items:center;
    gap:9px;
    padding-top:7px;
}

.admin-pagination {
    margin-top:20px;
}

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

    .admin-article-form-sidebar {
        order:-1;
    }

    .admin-article-item {
        grid-template-columns:72px minmax(0,1fr);
    }

    .admin-article-actions {
        grid-column:1 / -1;
        justify-content:flex-start;
    }

    .admin-article-thumb {
        width:72px;
        height:54px;
    }
}

@media (max-width: 600px) {
    .admin-article-item {
        grid-template-columns:1fr;
    }

    .admin-article-thumb {
        width:100%;
        height:auto;
        aspect-ratio:16 / 7;
    }

    .admin-article-actions {
        grid-column:auto;
    }

    .admin-article-actions a,
    .admin-article-actions button {
        min-height:34px;
    }
}

/* =========================================================
   TEXT-ONLY ARTICLES
   ========================================================= */

.sw-home-articles {
    margin-bottom:58px;
}

.sw-home-articles-heading {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:17px;
}

.sw-home-articles-heading h2 {
    margin:4px 0 6px;
    color:#f0f4f8;
    font-size:23px;
}

.sw-home-articles-heading p {
    margin:0;
    color:#788698;
    font-size:11px;
}

.sw-home-articles-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}

.sw-home-article-card {
    position:relative;
    min-height:205px;
    overflow:hidden;
    display:flex;
    text-decoration:none;
    color:inherit;
    border:1px solid rgba(255,255,255,.075);
    border-radius:14px;
    background:#10161f;
    transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}

.sw-home-article-card::after {
    content:"";
    position:absolute;
    inset:auto 0 0 0;
    height:2px;
    background:rgba(99,221,255,.65);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .25s ease;
}

.sw-home-article-card:hover {
    transform:translateY(-5px);
    border-color:rgba(99,221,255,.25);
    box-shadow:0 17px 35px rgba(0,0,0,.24);
}

.sw-home-article-card:hover::after {
    transform:scaleX(1);
}

.sw-home-article-content {
    width:100%;
    display:flex;
    flex-direction:column;
    padding:20px;
}

.sw-home-article-category {
    display:inline-flex;
    align-items:center;
    align-self:flex-start;
    min-height:23px;
    padding:0 8px;
    border:1px solid rgba(99,221,255,.15);
    border-radius:5px;
    background:rgba(99,221,255,.045);
    color:#63ddff;
    font-size:8px;
    font-weight:800;
    letter-spacing:.07em;
    text-transform:uppercase;
}

.sw-home-article-card h3 {
    margin:14px 0 9px;
    color:#e8eef3;
    font-size:17px;
    line-height:1.35;
}

.sw-home-article-card p {
    margin:0;
    color:#788797;
    font-size:10px;
    line-height:1.6;
}

.sw-home-article-meta {
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-top:auto;
    padding-top:18px;
    color:#596878;
    font-size:8px;
}

.sw-home-article-card:hover h3 {
    color:#63ddff;
}

/* All articles */

.sw-articles-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:15px;
}

.sw-article-card {
    display:flex;
    min-height:220px;
    overflow:hidden;
    text-decoration:none;
    color:inherit;
    border:1px solid rgba(255,255,255,.075);
    border-radius:13px;
    background:#10161f;
    transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}

.sw-article-card:hover {
    transform:translateY(-4px);
    border-color:rgba(99,221,255,.24);
    box-shadow:0 16px 32px rgba(0,0,0,.23);
}

.sw-article-card-body {
    width:100%;
    display:flex;
    flex-direction:column;
    padding:20px;
}

.sw-article-category {
    color:#63ddff;
    font-size:8px;
    font-weight:800;
    letter-spacing:.07em;
    text-transform:uppercase;
}

.sw-article-card h3 {
    margin:12px 0 9px;
    color:#e8eef3;
    font-size:17px;
    line-height:1.4;
}

.sw-article-card p {
    margin:0;
    color:#788797;
    font-size:10px;
    line-height:1.6;
}

.sw-article-card-footer {
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-top:auto;
    padding-top:18px;
    color:#5d6b7a;
    font-size:8px;
}

.sw-article-card-footer span:last-child {
    color:#63ddff;
    font-weight:800;
}

.sw-article-card:hover h3 {
    color:#63ddff;
}

/* Article detail */

.sw-article-content {
    max-width:820px;
    margin:0 auto;
    color:#aab6c2;
    font-size:13px;
    line-height:1.8;
}

.sw-article-content h2,
.sw-article-content h3,
.sw-article-content h4 {
    margin:28px 0 10px;
    color:#e7edf2;
}

.sw-article-content p {
    margin:0 0 18px;
}

.sw-article-content ul,
.sw-article-content ol {
    margin:0 0 18px;
    padding-left:22px;
}

.sw-article-content a {
    color:#63ddff;
}

/* Admin article list without thumbnails */

.admin-article-item {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:18px;
}

.admin-article-actions {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:7px;
    flex-wrap:wrap;
}

@media (max-width:900px) {
    .sw-home-articles-grid,
    .sw-articles-grid {
        grid-template-columns:1fr;
    }

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

    .admin-article-actions {
        justify-content:flex-start;
    }
}

@media (max-width:600px) {
    .sw-home-articles-heading {
        align-items:flex-start;
        flex-direction:column;
    }

    .sw-home-article-card,
    .sw-article-card {
        min-height:195px;
    }

    .sw-home-article-content,
    .sw-article-card-body {
        padding:16px;
    }
}

/* =========================================================
   STATIC CMS PAGES
   ========================================================= */

.sw-static-page {
    width:min(1000px,calc(100% - 40px));
    margin:0 auto;
    padding:45px 0 70px;
}

.sw-static-page-header {
    margin-bottom:28px;
    padding-bottom:20px;
    border-bottom:1px solid rgba(255,255,255,.07);
}

.sw-static-page-header h1 {
    margin:7px 0 0;
    color:#eef3f7;
    font-size:34px;
    line-height:1.2;
}

.sw-static-page-content {
    padding:28px 30px;
    border:1px solid rgba(255,255,255,.07);
    border-radius:14px;
    background:#10161f;
    color:#aab6c2;
    font-size:13px;
    line-height:1.8;
}

.sw-static-page-content h2,
.sw-static-page-content h3,
.sw-static-page-content h4 {
    margin:30px 0 12px;
    color:#e8eef3;
    line-height:1.35;
}

.sw-static-page-content h2:first-child,
.sw-static-page-content h3:first-child,
.sw-static-page-content h4:first-child {
    margin-top:0;
}

.sw-static-page-content p {
    margin:0 0 18px;
}

.sw-static-page-content ul,
.sw-static-page-content ol {
    margin:0 0 18px;
    padding-left:25px;
}

.sw-static-page-content li {
    margin-bottom:7px;
}

.sw-static-page-content a {
    color:#63ddff;
}

.sw-static-page-content blockquote {
    margin:20px 0;
    padding:14px 18px;
    border-left:3px solid #63ddff;
    background:rgba(99,221,255,.04);
    color:#95a6b6;
}

/* =========================================================
   ADMIN SITE PAGES
   ========================================================= */

.admin-site-page-list {
    display:flex;
    flex-direction:column;
    gap:10px;
}

.admin-site-page-item {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:16px;
    border:1px solid rgba(255,255,255,.07);
    border-radius:11px;
    background:#10161f;
    transition:.2s ease;
}

.admin-site-page-item:hover {
    border-color:rgba(99,221,255,.2);
    background:#121a24;
    transform:translateY(-1px);
}

.admin-site-page-info {
    min-width:0;
}

.admin-site-page-info h3 {
    margin:0;
    color:#e9eef3;
    font-size:14px;
}

.admin-site-page-info p {
    margin:5px 0;
    color:#63ddff;
    font-size:9px;
}

.admin-site-page-info small {
    color:#596878;
    font-size:8px;
}

.admin-site-page-actions {
    display:flex;
    align-items:center;
    gap:8px;
    flex-shrink:0;
}

.admin-page-editor {
    overflow:hidden;
}

.admin-page-editor .wordpress-editor {
    width:100%;
}

@media (max-width:700px) {

    .sw-static-page {
        width:calc(100% - 24px);
        padding:28px 0 45px;
    }

    .sw-static-page-header h1 {
        font-size:27px;
    }

    .sw-static-page-content {
        padding:20px;
        font-size:12px;
    }

    .admin-site-page-item {
        align-items:flex-start;
        flex-direction:column;
    }

    .admin-site-page-actions {
        width:100%;
    }

    .admin-site-page-actions a {
        flex:1;
        justify-content:center;
    }

}

/* =========================================================
   CONTACT US PAGE
   ========================================================= */

.sw-contact-page {
    width:min(1120px,calc(100% - 40px));
    margin:0 auto;
    padding:48px 0 72px;
}

.sw-contact-hero {
    position:relative;
    min-height:245px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:35px;
    margin-bottom:24px;
    padding:38px 42px;
    border:1px solid rgba(99,221,255,.12);
    border-radius:18px;
    background:
        radial-gradient(circle at 88% 20%, rgba(99,221,255,.09), transparent 32%),
        linear-gradient(135deg,#101923,#0b1118);
}

.sw-contact-hero h1 {
    max-width:700px;
    margin:8px 0 12px;
    color:#eef3f7;
    font-size:40px;
    line-height:1.12;
}

.sw-contact-hero h1 span {
    color:#63ddff;
}

.sw-contact-hero p {
    max-width:650px;
    margin:0;
    color:#8291a0;
    font-size:12px;
    line-height:1.7;
}

.sw-contact-hero-mark {
    width:125px;
    height:125px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(99,221,255,.18);
    border-radius:50%;
    background:rgba(99,221,255,.035);
    box-shadow:
        0 0 0 12px rgba(99,221,255,.018),
        0 0 55px rgba(99,221,255,.08);
}

.sw-contact-hero-mark span {
    color:#63ddff;
    font-size:28px;
    font-weight:900;
    letter-spacing:.08em;
}

.sw-contact-layout {
    display:grid;
    grid-template-columns:minmax(0,1.55fr) minmax(280px,.85fr);
    gap:18px;
}

.sw-contact-content-card {
    padding:27px 29px;
    border:1px solid rgba(255,255,255,.075);
    border-radius:15px;
    background:#10161f;
}

.sw-contact-card-heading {
    padding-bottom:17px;
    margin-bottom:22px;
    border-bottom:1px solid rgba(255,255,255,.07);
}

.sw-contact-card-heading span {
    color:#63ddff;
    font-size:8px;
    font-weight:900;
    letter-spacing:.1em;
}

.sw-contact-card-heading h2 {
    margin:5px 0 0;
    color:#eaf0f4;
    font-size:22px;
}

.sw-contact-rich-content {
    color:#aab6c2;
    font-size:13px;
    line-height:1.85;
}

.sw-contact-rich-content h2,
.sw-contact-rich-content h3,
.sw-contact-rich-content h4 {
    color:#e8eef3;
    margin:27px 0 10px;
}

.sw-contact-rich-content p {
    margin:0 0 17px;
}

.sw-contact-rich-content ul,
.sw-contact-rich-content ol {
    margin:0 0 18px;
    padding-left:24px;
}

.sw-contact-rich-content li {
    margin-bottom:7px;
}

.sw-contact-rich-content a {
    color:#63ddff;
}

.sw-contact-rich-content blockquote {
    margin:20px 0;
    padding:14px 17px;
    border-left:3px solid #63ddff;
    background:rgba(99,221,255,.04);
    color:#8e9eae;
}

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

.sw-contact-action-card {
    min-height:80px;
    display:grid;
    grid-template-columns:40px minmax(0,1fr) 18px;
    align-items:center;
    gap:12px;
    padding:14px 16px;
    border:1px solid rgba(255,255,255,.07);
    border-radius:12px;
    background:#10161f;
    color:inherit;
    text-decoration:none;
    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.sw-contact-action-card:hover {
    transform:translateX(4px);
    border-color:rgba(99,221,255,.24);
    background:#121b25;
    box-shadow:0 12px 26px rgba(0,0,0,.2);
}

.sw-contact-action-icon {
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(99,221,255,.14);
    border-radius:9px;
    background:rgba(99,221,255,.045);
    color:#63ddff;
}

.sw-contact-action-icon svg {
    width:18px;
    height:18px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.sw-contact-action-card strong {
    display:block;
    margin-bottom:3px;
    color:#e7edf2;
    font-size:11px;
}

.sw-contact-action-card small {
    display:block;
    color:#68788a;
    font-size:8px;
    line-height:1.45;
}

.sw-contact-action-card b {
    color:#63ddff;
    font-size:15px;
    transition:transform .2s ease;
}

.sw-contact-action-card:hover b {
    transform:translateX(3px);
}

/* Admin dashboard contact shortcut */

.admin-contact-quick-panel {
    overflow:hidden;
}

.admin-contact-quick-content {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    flex-wrap:wrap;
}

.admin-contact-quick-content strong {
    display:block;
    margin-bottom:4px;
    color:#e7edf2;
    font-size:13px;
}

.admin-contact-quick-content p {
    margin:0;
    color:#667687;
    font-size:9px;
}

.admin-contact-quick-actions {
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

@media (max-width:850px) {
    .sw-contact-hero {
        padding:30px;
    }

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

    .sw-contact-actions {
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width:600px) {
    .sw-contact-page {
        width:calc(100% - 24px);
        padding:28px 0 45px;
    }

    .sw-contact-hero {
        min-height:auto;
        padding:24px;
    }

    .sw-contact-hero-mark {
        display:none;
    }

    .sw-contact-hero h1 {
        font-size:30px;
    }

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

    .sw-contact-content-card {
        padding:21px;
    }

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


/* =========================================================
   QUICK MESSAGE US
   ========================================================= */

.sw-contact-message-card {
    grid-column:1;
    margin-top:18px;
    padding:25px;
    border:1px solid rgba(99,221,255,.12);
    border-radius:15px;
    background:
        radial-gradient(circle at 100% 0,rgba(99,221,255,.055),transparent 34%),
        #10161f;
}

.sw-contact-message-heading {
    margin-bottom:18px;
}

.sw-contact-message-heading > span {
    color:#63ddff;
    font-size:8px;
    font-weight:900;
    letter-spacing:.1em;
}

.sw-contact-message-heading h2 {
    margin:5px 0 5px;
    color:#eaf0f4;
    font-size:22px;
}

.sw-contact-message-heading p {
    margin:0;
    color:#718193;
    font-size:10px;
    line-height:1.5;
}

.sw-contact-message-form {
    display:flex;
    flex-direction:column;
    gap:14px;
}

.sw-contact-message-fields {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.sw-contact-field {
    min-width:0;
}

.sw-contact-field label {
    display:block;
    margin-bottom:6px;
    color:#99a8b7;
    font-size:9px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.05em;
}

.sw-contact-field input,
.sw-contact-field textarea {
    width:100%;
    box-sizing:border-box;
    border:1px solid rgba(255,255,255,.08);
    border-radius:8px;
    background:#0c131b;
    color:#e6edf2;
    font:inherit;
    font-size:10px;
    outline:none;
    transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}

.sw-contact-field input {
    min-height:41px;
    padding:0 11px;
}

.sw-contact-field textarea {
    min-height:145px;
    padding:11px;
    resize:vertical;
    line-height:1.55;
}

.sw-contact-field input::placeholder,
.sw-contact-field textarea::placeholder {
    color:#485665;
}

.sw-contact-field input:focus,
.sw-contact-field textarea:focus {
    border-color:rgba(99,221,255,.35);
    background:#101923;
    box-shadow:0 0 0 3px rgba(99,221,255,.055);
}

.sw-contact-field small {
    display:block;
    margin-top:5px;
    color:#ff7d86;
    font-size:8px;
}

.sw-contact-send-button {
    min-height:43px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    border:1px solid rgba(99,221,255,.3);
    border-radius:8px;
    background:linear-gradient(135deg,rgba(99,221,255,.13),rgba(99,221,255,.045));
    color:#63ddff;
    font:inherit;
    font-size:10px;
    font-weight:900;
    letter-spacing:.04em;
    cursor:pointer;
    transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease;
}

.sw-contact-send-button b {
    font-size:14px;
    transition:transform .2s ease;
}

.sw-contact-send-button:hover {
    transform:translateY(-2px);
    border-color:rgba(99,221,255,.5);
    background:linear-gradient(135deg,rgba(99,221,255,.18),rgba(99,221,255,.07));
    box-shadow:0 10px 24px rgba(0,0,0,.2);
}

.sw-contact-send-button:hover b {
    transform:translateX(4px);
}

.sw-contact-send-button:active {
    transform:translateY(0) scale(.99);
}

.sw-contact-message-success,
.sw-contact-message-error {
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:14px;
    padding:10px 12px;
    border-radius:8px;
    font-size:9px;
}

.sw-contact-message-success {
    border:1px solid rgba(90,220,150,.2);
    background:rgba(90,220,150,.045);
    color:#8de0ad;
}

.sw-contact-message-success span {
    font-size:12px;
}

.sw-contact-message-error {
    border:1px solid rgba(255,125,134,.2);
    background:rgba(255,125,134,.045);
    color:#ff9ba2;
}

@media (max-width:850px) {
    .sw-contact-message-card {
        grid-column:1 / -1;
        margin-top:0;
    }
}

@media (max-width:600px) {
    .sw-contact-message-card {
        padding:20px;
    }

    .sw-contact-message-fields {
        grid-template-columns:1fr;
    }
}


/* =========================================================
   ABOUT US — GAME DEVELOPER THANKS
   ========================================================= */

.sw-developer-thanks {
    margin-top: 34px;
    padding: 34px 30px 38px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px;
    background: #10161f;
}

.sw-developer-thanks-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 30px;
}

.sw-developer-thanks-header h2 {
    margin: 8px 0 10px;
    color: #eef3f7;
    font-size: 28px;
    line-height: 1.25;
}

.sw-developer-thanks-header p {
    margin: 0;
    color: #8fa0b0;
    font-size: 13px;
    line-height: 1.7;
}

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

.sw-developer-card {
    min-height: 340px;
    padding: 22px 18px 24px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    background: #0b1016;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease, border-color .2s ease;
}

.sw-developer-card:hover {
    transform: translateY(-3px);
    border-color: rgba(99,221,255,.28);
}

.sw-developer-logo {
    width: 100%;
    height: 205px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    overflow: hidden;
    border-radius: 10px;
}

.sw-developer-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sw-developer-card h3 {
    margin: 0;
    color: #eef3f7;
    font-size: 18px;
    line-height: 1.35;
}

.sw-developer-card p {
    margin: 8px 0 0;
    color: #8fa0b0;
    font-size: 14px;
    line-height: 1.5;
}

@media (max-width: 700px) {
    .sw-developer-thanks {
        padding: 26px 18px 28px;
    }

    .sw-developer-thanks-header h2 {
        font-size: 23px;
    }

    .sw-developer-grid {
        grid-template-columns: 1fr;
    }

    .sw-developer-card {
        min-height: 310px;
    }

    .sw-developer-logo {
        height: 190px;
    }
}

/* Header Support dropdown */

.support-nav-button {
    cursor: pointer;
    border: 0;
    background: transparent;
    font: inherit;
}

.support-menu {
    width: 320px;
    padding: 10px;
}

.support-menu-link {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 58px;
    padding: 9px 10px;
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
    transition: background .18s ease, transform .18s ease;
}

.support-menu-link:hover {
    background: rgba(255,255,255,.045);
    transform: translateX(2px);
}

.support-menu-link > span:last-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.support-menu-link strong {
    font-size: 13px;
    line-height: 1.35;
    color: var(--text);
}

.support-menu-link small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.4;
}

.support-menu-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    padding: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: var(--accent);
    background: var(--accent-soft);
}

.support-menu-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 900px) {
    .support-menu {
        width: 100%;
    }

    .support-menu-link {
        min-height: 52px;
    }
}

/* Header Premium button */

.premium-link {
    position: relative;
}

.premium-link .nav-icon {
    color: var(--accent);
}

.premium-link:hover {
    color: var(--accent);
}

.premium-link::after {
    content: "PREMIUM";
    position: absolute;
    top: -7px;
    right: -5px;
    padding: 2px 5px;
    border-radius: 5px;
    background: var(--accent);
    color: #081017;
    font-size: 6px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .08em;
}

/* =========================================================
   MOD DETAILS — FUTURISTIC LOADING SCREEN
   ========================================================= */

.sw-mod-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(circle at center, rgba(20,42,57,.42), transparent 34%),
        radial-gradient(circle at 50% 50%, rgba(99,221,255,.055), transparent 55%),
        #04080c;
    transition: opacity .55s ease, visibility .55s ease;
}

.sw-mod-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.sw-mod-loader-grid,
.sw-mod-loader-noise {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.sw-mod-loader-grid {
    opacity: .25;
    background-image:
        linear-gradient(rgba(99,221,255,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99,221,255,.055) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(circle, #000 15%, transparent 78%);
}

.sw-mod-loader-noise {
    opacity: .06;
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 2px,
            rgba(255,255,255,.2) 3px
        );
    animation: swLoaderNoise .12s steps(2) infinite;
}

.sw-mod-loader-core {
    position: relative;
    width: 250px;
    height: 250px;
    display: grid;
    place-items: center;
    filter: drop-shadow(0 0 30px rgba(99,221,255,.13));
}

.sw-loader-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(99,221,255,.22);
}

.sw-loader-ring-outer {
    inset: 0;
    border-top-color: rgba(99,221,255,.95);
    border-right-color: rgba(99,221,255,.08);
    animation: swLoaderSpin 7s linear infinite;
}

.sw-loader-ring-middle {
    inset: 24px;
    border-bottom-color: rgba(255,255,255,.6);
    border-left-color: rgba(99,221,255,.08);
    animation: swLoaderSpinReverse 4.5s linear infinite;
}

.sw-loader-ring-inner {
    inset: 49px;
    border-top-color: rgba(99,221,255,.8);
    border-bottom-color: rgba(99,221,255,.1);
    animation: swLoaderSpin 2.8s linear infinite;
}

.sw-loader-orbit {
    position: absolute;
    width: 214px;
    height: 82px;
    border: 1px solid rgba(99,221,255,.18);
    border-radius: 50%;
    transform: rotate(-28deg);
}

.sw-loader-orbit-one {
    animation: swLoaderOrbit 4s linear infinite;
}

.sw-loader-orbit-two {
    transform: rotate(62deg);
    animation: swLoaderOrbitReverse 5.5s linear infinite;
}

.sw-loader-center {
    position: relative;
    z-index: 3;
    width: 92px;
    height: 92px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(99,221,255,.32);
    border-radius: 50%;
    background: rgba(5,11,16,.92);
    box-shadow:
        0 0 0 8px rgba(99,221,255,.025),
        0 0 30px rgba(99,221,255,.18),
        inset 0 0 24px rgba(99,221,255,.06);
    animation: swLoaderPulse 2s ease-in-out infinite;
}

.sw-loader-logo {
    color: #eef8fc;
    font-size: 27px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -.08em;
}

.sw-loader-status {
    margin-top: 8px;
    color: #63ddff;
    font-size: 6px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .18em;
}

.sw-loader-scan {
    position: absolute;
    top: 16px;
    left: 50%;
    width: 2px;
    height: 108px;
    transform-origin: 50% 109px;
    background: linear-gradient(
        180deg,
        transparent,
        rgba(99,221,255,.8),
        transparent
    );
    box-shadow: 0 0 18px rgba(99,221,255,.6);
    animation: swLoaderScan 2.2s linear infinite;
}

.sw-mod-loader-info {
    position: relative;
    z-index: 4;
    width: min(360px, calc(100% - 40px));
    margin-top: 30px;
    text-align: center;
}

.sw-loader-kicker {
    display: block;
    margin-bottom: 8px;
    color: #63ddff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .22em;
}

.sw-mod-loader-info strong {
    display: block;
    color: #edf4f8;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .12em;
}

.sw-loader-progress-track {
    position: relative;
    width: 100%;
    height: 3px;
    margin-top: 18px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
}

.sw-loader-progress-track span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: #63ddff;
    box-shadow: 0 0 16px rgba(99,221,255,.65);
    transition: width .15s linear;
}

.sw-loader-meta {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 8px;
    color: #657888;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .12em;
}

.sw-loader-meta span:first-child {
    color: #a9eefe;
}

@keyframes swLoaderSpin {
    to { transform: rotate(360deg); }
}

@keyframes swLoaderSpinReverse {
    to { transform: rotate(-360deg); }
}

@keyframes swLoaderOrbit {
    to { transform: rotate(332deg); }
}

@keyframes swLoaderOrbitReverse {
    to { transform: rotate(-298deg); }
}

@keyframes swLoaderScan {
    to { transform: rotate(360deg); }
}

@keyframes swLoaderPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow:
            0 0 0 8px rgba(99,221,255,.025),
            0 0 30px rgba(99,221,255,.18),
            inset 0 0 24px rgba(99,221,255,.06);
    }

    50% {
        transform: scale(1.07);
        box-shadow:
            0 0 0 15px rgba(99,221,255,.018),
            0 0 45px rgba(99,221,255,.28),
            inset 0 0 32px rgba(99,221,255,.1);
    }
}

@keyframes swLoaderNoise {
    0% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
    100% { transform: translateY(1px); }
}

@media (max-width: 600px) {
    .sw-mod-loader-core {
        width: 205px;
        height: 205px;
    }

    .sw-loader-ring-middle {
        inset: 20px;
    }

    .sw-loader-ring-inner {
        inset: 41px;
    }

    .sw-loader-orbit {
        width: 174px;
        height: 68px;
    }

    .sw-loader-center {
        width: 78px;
        height: 78px;
    }

    .sw-loader-logo {
        font-size: 23px;
    }

    .sw-loader-scan {
        top: 13px;
        height: 88px;
        transform-origin: 50% 90px;
    }
}

/* Prevent page movement while mod loader is active */

html.sw-loader-active,
html.sw-loader-active body {
    overflow: hidden !important;
}

.sw-mod-loader {
    cursor: wait;
}

.sw-mod-loader::after {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(99,221,255,.05);
    border-radius: 18px;
    pointer-events: none;
}

.sw-loader-status {
    animation: swLoaderStatus 1.6s ease-in-out infinite;
}

@keyframes swLoaderStatus {
    0%, 100% {
        opacity: .45;
    }

    50% {
        opacity: 1;
    }
}

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

    .sw-loader-ring-outer,
    .sw-loader-ring-middle,
    .sw-loader-ring-inner,
    .sw-loader-orbit-one,
    .sw-loader-orbit-two,
    .sw-loader-scan,
    .sw-loader-center,
    .sw-loader-status,
    .sw-mod-loader-noise {
        animation: none !important;
    }

    .sw-mod-loader,
    .sw-mod-loader::before {
        transition: none !important;
    }
}

/* =========================================================
   COMMON MOD DOWNLOAD PAGE
   ========================================================= */

.sw-download-page {
    min-height: calc(100vh - 180px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 55px 20px 70px;
    background:
        radial-gradient(circle at 50% 20%, rgba(99,221,255,.07), transparent 32%),
        #070b10;
}

.sw-download-shell {
    width: min(980px, 100%);
}

.sw-download-kicker {
    margin-bottom: 12px;
    color: #63ddff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .22em;
}

.sw-download-card {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 20px;
    background: #0d131a;
    box-shadow: 0 30px 90px rgba(0,0,0,.35);
}

.sw-download-visual {
    position: relative;
    min-height: 430px;
    overflow: hidden;
    background: #080d12;
}

.sw-download-visual img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    filter: saturate(.9);
}

.sw-download-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 35%, rgba(3,7,11,.9)),
        linear-gradient(90deg, rgba(3,7,11,.1), rgba(3,7,11,.28));
}

.sw-download-placeholder {
    width: 100%;
    height: 100%;
    min-height: 430px;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle, rgba(99,221,255,.13), transparent 40%),
        #080d12;
}

.sw-download-placeholder span {
    width: 110px;
    height: 110px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(99,221,255,.4);
    border-radius: 50%;
    color: #63ddff;
    font-size: 32px;
    font-weight: 900;
    letter-spacing: -.08em;
    box-shadow: 0 0 40px rgba(99,221,255,.14);
}

.sw-download-status {
    position: absolute;
    left: 20px;
    bottom: 20px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 999px;
    background: rgba(4,9,14,.72);
    backdrop-filter: blur(12px);
    color: #d7e3ea;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .11em;
}

.sw-download-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #63ddff;
    box-shadow: 0 0 10px rgba(99,221,255,.8);
}

.sw-download-content {
    padding: 46px 48px 42px;
}

.sw-download-eyebrow {
    color: #63ddff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .2em;
}

.sw-download-content h1 {
    margin: 10px 0 10px;
    color: #edf4f8;
    font-size: 30px;
    line-height: 1.2;
}

.sw-download-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #7f91a0;
    font-size: 11px;
}

.sw-download-description {
    max-width: 560px;
    margin: 25px 0;
    color: #9caebb;
    font-size: 13px;
    line-height: 1.75;
}

.sw-download-process {
    margin: 26px 0 20px;
}

.sw-download-process-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 9px;
}

.sw-download-process-top span {
    color: #718391;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .13em;
}

.sw-download-process-top strong {
    color: #bcefff;
    font-size: 11px;
}

.sw-download-progress {
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
}

.sw-download-progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: #63ddff;
    box-shadow: 0 0 18px rgba(99,221,255,.6);
    transition: width .35s ease;
}

.sw-download-main-button {
    width: 100%;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 0 18px;
    border: 1px solid rgba(99,221,255,.35);
    border-radius: 11px;
    background: rgba(99,221,255,.07);
    color: #e8f8fc;
    text-decoration: none;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.sw-download-main-button:hover {
    transform: translateY(-2px);
    border-color: rgba(99,221,255,.75);
    background: rgba(99,221,255,.12);
    box-shadow: 0 12px 35px rgba(99,221,255,.08);
}

.sw-download-main-button b {
    font-size: 20px;
    font-weight: 400;
}

.sw-download-main-button.is-loading {
    cursor: wait;
    opacity: .72;
}

.sw-download-ready-button {
    background: #63ddff;
    border-color: #63ddff;
    color: #061017;
    box-shadow: 0 0 30px rgba(99,221,255,.15);
    animation: swDownloadReadyPulse 1.6s ease-in-out infinite;
}

.sw-download-ready-button:hover {
    color: #061017;
    background: #78e3ff;
    border-color: #78e3ff;
}

.sw-download-back {
    display: block;
    margin-top: 19px;
    color: #718391;
    text-align: center;
    text-decoration: none;
    font-size: 11px;
}

.sw-download-back:hover {
    color: #63ddff;
}

.sw-download-footer {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 13px;
    color: #536371;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .12em;
}

@keyframes swDownloadReadyPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(99,221,255,.1);
    }

    50% {
        box-shadow: 0 0 34px rgba(99,221,255,.28);
    }
}

@media (max-width: 800px) {

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

    .sw-download-visual,
    .sw-download-placeholder {
        min-height: 250px;
        height: 250px;
    }

    .sw-download-content {
        padding: 32px 24px;
    }

    .sw-download-content h1 {
        font-size: 25px;
    }
}

@media (max-width: 500px) {

    .sw-download-page {
        padding: 30px 12px 45px;
    }

    .sw-download-card {
        border-radius: 15px;
    }

    .sw-download-footer {
        flex-direction: column;
        gap: 5px;
    }
}

/* Download Ready stays hidden until the 7-second countdown finishes */
.sw-download-main-button[hidden] {
    display: none !important;
}

/* =========================================================
   COMMON DOWNLOAD PAGE — GAME GUIDES
   ========================================================= */

.sw-download-guides {
    margin-top: 26px;
}

.sw-download-guide-heading {
    margin-bottom: 17px;
}

.sw-download-guide-kicker {
    display: block;
    margin-bottom: 7px;
    color: #63ddff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .18em;
}

.sw-download-guide-heading h2 {
    margin: 0 0 8px;
    color: #edf4f8;
    font-size: 24px;
    line-height: 1.25;
}

.sw-download-guide-heading p {
    max-width: 720px;
    margin: 0;
    color: #7f919f;
    font-size: 12px;
    line-height: 1.7;
}

.sw-download-guide-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.sw-download-guide-card {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 15px;
    background: #0d131a;
}

.sw-download-guide-card-head {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    background: rgba(255,255,255,.015);
}

.sw-download-guide-number {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(99,221,255,.25);
    border-radius: 9px;
    color: #63ddff;
    background: rgba(99,221,255,.05);
    font-size: 10px;
    font-weight: 900;
}

.sw-download-guide-card-head > div > span {
    display: block;
    margin-bottom: 3px;
    color: #627584;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .15em;
}

.sw-download-guide-card-head h3 {
    margin: 0;
    color: #eaf2f6;
    font-size: 16px;
    line-height: 1.35;
}

.sw-download-guide-content {
    padding: 20px;
    color: #9eacb7;
    font-size: 12px;
    line-height: 1.75;
}

.sw-download-guide-content p {
    margin: 0 0 16px;
}

.sw-download-guide-content ol,
.sw-download-guide-content ul {
    margin: 0;
    padding-left: 21px;
}

.sw-download-guide-content li {
    margin-bottom: 12px;
    padding-left: 3px;
}

.sw-download-guide-content li:last-child {
    margin-bottom: 0;
}

.sw-download-guide-content strong {
    color: #dfe9ee;
}

.sw-download-guide-content code {
    padding: 2px 5px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 5px;
    background: rgba(255,255,255,.04);
    color: #c9f4ff;
    font-size: 11px;
}

.sw-download-troubleshooting {
    border-color: rgba(99,221,255,.1);
}

.sw-download-troubleshooting .sw-download-guide-number {
    border-color: rgba(99,221,255,.35);
    background: rgba(99,221,255,.07);
}

.sw-download-troubleshooting .sw-download-guide-content li::marker {
    color: #63ddff;
}

@media (max-width: 780px) {
    .sw-download-guide-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 500px) {
    .sw-download-guide-heading h2 {
        font-size: 21px;
    }

    .sw-download-guide-content {
        padding: 17px;
    }

    .sw-download-guide-card-head {
        padding: 15px 17px;
    }
}


/* =========================================================
   DOWNLOAD PAGE — PROPER CONTENT CANVAS
   ========================================================= */

.sw-download-guides {
    width: min(980px, calc(100% - 40px));
    margin: 34px auto 0;
}

.sw-download-guide-heading {
    width: 100%;
    margin-bottom: 18px;
}

.sw-download-guide-grid {
    width: 100%;
}

.sw-download-guide-card {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

@media (max-width: 500px) {
    .sw-download-guides {
        width: calc(100% - 24px);
    }
}


/* =========================================================
   Header Search Panel
   ========================================================= */

.header-actions {
    position: relative;
}

.sw-header-search-panel {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: min(460px, calc(100vw - 32px));
    z-index: 3000;
    padding: 14px;
    border: 1px solid rgba(99,221,255,.16);
    border-radius: 16px;
    background:
        linear-gradient(
            145deg,
            rgba(12,18,28,.98),
            rgba(7,12,20,.98)
        );
    box-shadow:
        0 24px 60px rgba(0,0,0,.42),
        0 0 35px rgba(99,221,255,.07);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    overflow: hidden;
}

.sw-header-search-panel[hidden] {
    display: none !important;
}

.sw-header-search-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            120deg,
            transparent 0%,
            rgba(99,221,255,.045) 45%,
            transparent 100%
        );
}

.sw-header-search-box {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 10px 0 14px;
    border: 1px solid rgba(99,221,255,.14);
    border-radius: 12px;
    background: rgba(255,255,255,.035);
    box-shadow: inset 0 0 20px rgba(99,221,255,.018);
}

.sw-header-search-box > svg {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    fill: none;
    stroke: #63ddff;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sw-header-search-box input {
    min-width: 0;
    flex: 1;
    height: 100%;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 14px;
}

.sw-header-search-box input::placeholder {
    color: rgba(255,255,255,.42);
}

.sw-header-search-box input::-webkit-search-cancel-button {
    display: none;
}

.sw-header-search-box > button {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: rgba(255,255,255,.5);
    cursor: pointer;
    transition:
        color .18s ease,
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

.sw-header-search-box > button:hover {
    color: #63ddff;
    border-color: rgba(99,221,255,.14);
    background: rgba(99,221,255,.06);
    transform: rotate(3deg);
}

.sw-header-search-box > button svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.sw-header-search-meta {
    position: relative;
    padding: 11px 4px 8px;
    color: rgba(255,255,255,.42);
    font-size: 11px;
    letter-spacing: .03em;
}

.sw-header-search-results {
    position: relative;
    display: grid;
    gap: 6px;
    max-height: min(420px, calc(100vh - 220px));
    overflow-y: auto;
    scrollbar-width: thin;
}

.sw-header-search-results::-webkit-scrollbar {
    width: 5px;
}

.sw-header-search-results::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(99,221,255,.18);
}

.sw-header-search-result {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 68px;
    padding: 8px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: inherit;
    text-decoration: none;
    background: rgba(255,255,255,.018);
    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

.sw-header-search-result:hover {
    transform: translateX(2px);
    border-color: rgba(99,221,255,.16);
    background: rgba(99,221,255,.045);
    box-shadow: 0 8px 22px rgba(0,0,0,.18);
}

.sw-header-search-thumb {
    flex: 0 0 54px;
    width: 54px;
    height: 50px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    background: rgba(255,255,255,.035);
}

.sw-header-search-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sw-header-search-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(99,221,255,.55);
}

.sw-header-search-thumb-placeholder svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sw-header-search-info {
    min-width: 0;
    flex: 1;
}

.sw-header-search-title {
    overflow: hidden;
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sw-header-search-details {
    margin-top: 3px;
    overflow: hidden;
    color: rgba(255,255,255,.48);
    font-size: 10px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sw-header-search-creator {
    margin-top: 3px;
    overflow: hidden;
    color: rgba(99,221,255,.72);
    font-size: 10px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sw-header-search-arrow {
    flex: 0 0 auto;
    color: rgba(99,221,255,.6);
    font-size: 17px;
    transition: transform .18s ease, color .18s ease;
}

.sw-header-search-result:hover .sw-header-search-arrow {
    color: #63ddff;
    transform: translateX(3px);
}

.sw-header-search-empty {
    position: relative;
    padding: 22px 12px;
    border: 1px dashed rgba(99,221,255,.12);
    border-radius: 11px;
    color: rgba(255,255,255,.46);
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
    background: rgba(255,255,255,.015);
}

.sw-header-search-empty strong {
    color: rgba(255,255,255,.75);
}

.sw-header-search-all {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 9px;
    padding: 11px 12px;
    border: 1px solid rgba(99,221,255,.12);
    border-radius: 10px;
    color: #63ddff;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    background: rgba(99,221,255,.035);
    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

.sw-header-search-all:hover {
    transform: translateY(-1px);
    border-color: rgba(99,221,255,.24);
    background: rgba(99,221,255,.07);
}

.sw-header-search-all[hidden] {
    display: none !important;
}

@media (max-width: 900px) {
    .sw-header-search-panel {
        position: fixed;
        top: 72px;
        right: 16px;
        left: 16px;
        width: auto;
        max-width: none;
    }
}

@media (max-width: 520px) {
    .sw-header-search-panel {
        top: 66px;
        right: 10px;
        left: 10px;
        padding: 11px;
        border-radius: 14px;
    }

    .sw-header-search-result {
        min-height: 62px;
    }

    .sw-header-search-thumb {
        flex-basis: 48px;
        width: 48px;
        height: 46px;
    }
}


/* =========================================================
   MOBILE HEADER SEARCH FIX
   ========================================================= */

@media (max-width: 900px) {

    .sw-header-search-panel {
        position: fixed !important;
        top: 76px !important;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        max-width: none !important;
        max-height: calc(100dvh - 88px) !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        margin: 0 !important;
    }

    .sw-header-search-box {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .sw-header-search-box input {
        width: 0;
        min-width: 0;
    }

    .sw-header-search-results {
        width: 100%;
        max-width: 100%;
        max-height: calc(100dvh - 220px);
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .sw-header-search-result {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

}


@media (max-width: 600px) {

    .sw-header-search-panel {
        top: 70px !important;
        left: 8px !important;
        right: 8px !important;
        padding: 10px !important;
        border-radius: 14px !important;
        max-height: calc(100dvh - 80px) !important;
    }

    .sw-header-search-box {
        height: 46px;
        gap: 8px;
        padding-left: 11px;
        padding-right: 7px;
    }

    .sw-header-search-box > svg {
        width: 18px;
        height: 18px;
    }

    .sw-header-search-box input {
        font-size: 13px;
    }

    .sw-header-search-results {
        max-height: calc(100dvh - 205px);
    }

    .sw-header-search-result {
        min-height: 58px;
        gap: 9px;
        padding: 7px;
    }

    .sw-header-search-thumb {
        flex: 0 0 46px;
        width: 46px;
        height: 44px;
    }

    .sw-header-search-title {
        font-size: 12px;
    }

    .sw-header-search-details,
    .sw-header-search-creator {
        font-size: 9px;
    }

    .sw-header-search-arrow {
        font-size: 15px;
    }

    .sw-header-search-meta {
        padding: 9px 3px 7px;
    }

}


/* =========================================================
   MOBILE SEARCH PANEL - HEADER WIDTH FIX
   ========================================================= */

@media (max-width: 900px) {

    .header-actions {
        position: static !important;
    }

    .sw-header-search-panel {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-width: none !important;
        max-height: calc(100vh - 90px) !important;
        box-sizing: border-box !important;
    }

}


@media (max-width: 600px) {

    .sw-header-search-panel {
        top: calc(100% + 7px) !important;
        left: 7px !important;
        right: 7px !important;
        width: auto !important;
        max-height: calc(100vh - 82px) !important;
        padding: 10px !important;
    }

}


/* =========================================================
   MOBILE SEARCH - FIX FLOATING/SCROLLED HEADER
   ========================================================= */

@media (max-width: 900px) {

    .site-header.header-scrolled .header-actions {
        position: static !important;
    }

    .site-header.header-scrolled .sw-header-search-panel {
        position: fixed !important;
        top: 70px !important;
        left: 50% !important;
        right: auto !important;
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        transform: translateX(-50%) !important;
    }

}


@media (max-width: 600px) {

    .site-header.header-scrolled .sw-header-search-panel {
        top: 67px !important;
        width: calc(100vw - 14px) !important;
        max-width: calc(100vw - 14px) !important;
    }

}


/* =========================================================
   MOBILE SEARCH - ALIGN WITH FLOATING HEADER
   ========================================================= */

@media (max-width: 900px) {

    .site-header.header-scrolled .sw-header-search-panel {
        left: 7px !important;
        right: 7px !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
    }

}


@media (max-width: 600px) {

    .site-header.header-scrolled .sw-header-search-panel {
        left: 6px !important;
        right: 6px !important;
        width: auto !important;
    }

}


/* =========================================================
   FINAL MOBILE SEARCH PANEL POSITION
   ========================================================= */

@media (max-width: 900px) {

    .site-header .header-actions {
        position: static !important;
    }

    .site-header .sw-header-search-panel {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        left: 50% !important;
        right: auto !important;

        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;

        margin: 0 !important;
        box-sizing: border-box !important;

        transform: translateX(-50%) !important;

        max-height: calc(100vh - 90px) !important;
        overflow: hidden !important;
    }

}


@media (max-width: 600px) {

    .site-header .sw-header-search-panel {
        top: calc(100% + 7px) !important;

        width: calc(100vw - 14px) !important;
        max-width: calc(100vw - 14px) !important;

        transform: translateX(-50%) !important;
    }

}


/* =========================================================
   FINAL HEADER SEARCH - VIEWPORT POSITIONING
   ========================================================= */

body > .sw-header-search-panel {
    position: fixed !important;
    top: 84px !important;
    right: 20px !important;
    left: auto !important;

    width: min(460px, calc(100vw - 40px)) !important;
    max-width: 460px !important;

    margin: 0 !important;
    box-sizing: border-box !important;

    transform: none !important;
    z-index: 99999 !important;
}


@media (max-width: 900px) {

    body > .sw-header-search-panel {
        top: 75px !important;
        right: 8px !important;
        left: 8px !important;

        width: auto !important;
        max-width: none !important;

        transform: none !important;
    }

}


@media (max-width: 600px) {

    body > .sw-header-search-panel {
        top: 75px !important;
        right: 7px !important;
        left: 7px !important;

        width: auto !important;
    }

}

/* =========================================================
   SIMULATION WORLD — DARK / LIGHT THEME
   ========================================================= */

:root {
    color-scheme: dark;
}

html.light-theme {
    color-scheme: light;
}

/* Light theme — page */
html.light-theme body {
    background: #f5f7fa;
    color: #17202b;
}

/* Light theme — header */
html.light-theme .site-header {
    background: rgba(255,255,255,.82);
    border-bottom-color: rgba(15,23,42,.10);
}

html.light-theme .site-header.header-scrolled {
    background: rgba(255,255,255,.94);
    box-shadow: 0 10px 35px rgba(15,23,42,.08);
}

/* Navigation */
html.light-theme .nav-link {
    color: #5c6673;
}

html.light-theme .nav-link:hover,
html.light-theme .nav-link.active {
    color: var(--text);
}

html.light-theme .header-action {
    color: #5c6673;
}

html.light-theme .header-action:hover {
    color: var(--text);
    border-color: rgba(15,23,42,.10);
    background: rgba(15,23,42,.05);
}

/* Theme icon */
.theme-toggle {
    position: relative;
}

.theme-icon {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .25s ease, opacity .2s ease;
}

.theme-icon-moon {
    display: none;
}

html.light-theme .theme-icon-sun {
    display: none;
}

html.light-theme .theme-icon-moon {
    display: block;
}

.theme-toggle:active .theme-icon {
    transform: rotate(25deg) scale(.9);
}

/* Light theme — dropdown menus */
html.light-theme .browse-menu {
    background: rgba(255,255,255,.98);
    border-color: rgba(15,23,42,.10);
    box-shadow: 0 18px 50px rgba(15,23,42,.14);
}

html.light-theme .browse-item-text strong,
html.light-theme .browse-heading strong,
html.light-theme .support-menu-link strong {
    color: #17202b;
}

html.light-theme .browse-item-text small,
html.light-theme .support-menu-link small {
    color: #737d8b;
}

html.light-theme .browse-submenu a {
    color: #5c6673;
}

html.light-theme .browse-submenu a:hover {
    background: rgba(53,168,255,.08);
    color: #17202b;
}

/* Light theme — common form elements */
html.light-theme input,
html.light-theme textarea,
html.light-theme select {
    background: #ffffff;
    color: #17202b;
    border-color: rgba(15,23,42,.10);
}

html.light-theme ::placeholder {
    color: #8b95a3;
}


/* =========================================================
   SIMULATION WORLD — LIGHT THEME VARIABLES
   ========================================================= */

html.light-theme {
    color-scheme: light;

    --bg: #f5f7fa;
    --bg-soft: #eef2f6;

    --panel: rgba(255,255,255,.92);
    --panel-solid: #ffffff;
    --panel-hover: #f0f4f8;

    --border: rgba(15,23,42,.10);
    --border-strong: rgba(15,23,42,.16);

    --text: #17202b;
    --muted: #667085;

    --accent: #168de2;
    --accent-bright: #35a8ff;
    --accent-soft: rgba(22,141,226,.10);

    --shadow: 0 24px 70px rgba(15,23,42,.12);
}


/* =========================================================
   HOMEPAGE — LIGHT THEME COMPONENT OVERRIDES
   ========================================================= */

html.light-theme .sw-home-articles-heading h2 {
    color: #17202b;
}

html.light-theme .sw-home-articles-heading p {
    color: #667085;
}

html.light-theme .sw-home-articles-see-all {
    border-color: rgba(22,141,226,.16);
    background: rgba(22,141,226,.04);
    color: #667085;
}

html.light-theme .sw-home-articles-see-all:hover {
    border-color: rgba(22,141,226,.30);
    background: rgba(22,141,226,.08);
    color: #168de2;
}

/* Latest article cards */
html.light-theme .sw-home-article-card {
    background: #ffffff;
    border-color: rgba(15,23,42,.10);
    box-shadow: 0 8px 28px rgba(15,23,42,.06);
}

html.light-theme .sw-home-article-card:hover {
    border-color: rgba(22,141,226,.28);
    box-shadow: 0 17px 35px rgba(15,23,42,.10);
}

html.light-theme .sw-home-article-card h3 {
    color: #17202b;
}

html.light-theme .sw-home-article-card p {
    color: #667085;
}

html.light-theme .sw-home-article-meta {
    border-top-color: rgba(15,23,42,.08);
    color: #7a8492;
}

html.light-theme .sw-home-article-image {
    background: #eef2f6;
}

html.light-theme .sw-home-article-placeholder {
    background:
        radial-gradient(circle at center, rgba(22,141,226,.08), transparent 60%),
        #eef2f6;
    color: #7a8492;
}

html.light-theme .sw-home-article-read {
    background: rgba(255,255,255,.88);
    border-color: rgba(22,141,226,.22);
    color: #168de2;
}

/* Homepage sidebar cards */
html.light-theme .sw-home-sidebar-card {
    background: linear-gradient(145deg, #ffffff, #f3f6f9);
    border-color: rgba(15,23,42,.10);
    box-shadow: 0 10px 30px rgba(15,23,42,.07);
}

html.light-theme .sw-home-sidebar-card h3 {
    color: #17202b;
}

html.light-theme .sw-home-browse-list a {
    color: #5c6673;
}

html.light-theme .sw-home-browse-list a:hover {
    background: rgba(22,141,226,.07);
    color: #168de2;
}

/* Homepage creators */
html.light-theme .sw-home-creator {
    border-bottom-color: rgba(15,23,42,.07);
}

html.light-theme .sw-home-creator-avatar {
    background: #eef2f6;
    color: #168de2;
}

html.light-theme .sw-home-creator-name {
    color: #344054;
}

html.light-theme .sw-home-creator-count {
    color: #7a8492;
}

/* Homepage FAQ */
html.light-theme .sw-home-faq details {
    border-bottom-color: rgba(15,23,42,.07);
}

html.light-theme .sw-home-faq summary {
    color: #344054;
}

html.light-theme .sw-home-faq p {
    color: #667085;
}

/* Homepage empty state */
html.light-theme .sw-home-empty {
    border-color: rgba(15,23,42,.12);
    color: #667085;
}

/* All article listing cards */
html.light-theme .sw-article-card {
    background: #ffffff;
    border-color: rgba(15,23,42,.10);
    box-shadow: 0 8px 28px rgba(15,23,42,.06);
}

html.light-theme .sw-article-card:hover {
    border-color: rgba(22,141,226,.26);
    box-shadow: 0 16px 32px rgba(15,23,42,.10);
}

html.light-theme .sw-article-card h3 {
    color: #17202b;
}

html.light-theme .sw-article-card p {
    color: #667085;
}

html.light-theme .sw-article-card-footer {
    color: #7a8492;
}


/* =========================================================
   HOMEPAGE SIDEBAR — LIGHT THEME
   ========================================================= */

html.light-theme .sw-sidebar-card {
    background: linear-gradient(145deg, #ffffff, #f3f6f9);
    border-color: rgba(15,23,42,.10);
    box-shadow:
        0 10px 28px rgba(15,23,42,.08),
        inset 0 1px 0 rgba(255,255,255,.9);
}

html.light-theme .sw-sidebar-heading h3 {
    color: #17202b;
}

html.light-theme .sw-side-game {
    border-top-color: rgba(15,23,42,.08);
}

html.light-theme .sw-side-game-button:hover {
    background: rgba(22,141,226,.05);
}

html.light-theme .sw-side-game-icon {
    background: rgba(22,141,226,.07);
    color: #667085;
}

html.light-theme .sw-side-game-button:hover .sw-side-game-icon,
html.light-theme .sw-side-game.expanded .sw-side-game-icon {
    color: #168de2;
}

html.light-theme .sw-side-game-text strong {
    color: #344054;
}

html.light-theme .sw-side-game-text small {
    color: #7a8492;
}

html.light-theme .sw-side-chevron {
    stroke: #8a94a3;
}

html.light-theme .sw-side-game.expanded .sw-side-chevron {
    stroke: #168de2;
}

html.light-theme .sw-side-submenu {
    border-left-color: rgba(22,141,226,.14);
}

html.light-theme .sw-side-submenu a {
    color: #667085;
}

html.light-theme .sw-side-submenu a::before {
    background: #aab4c0;
}

html.light-theme .sw-side-submenu a:hover {
    background: rgba(22,141,226,.05);
    color: #168de2;
}

html.light-theme .sw-side-submenu a:hover::before {
    background: #168de2;
}

/* Top Creators */
html.light-theme .sw-creator-row {
    color: #344054;
}

html.light-theme .sw-creator-row:hover {
    border-color: rgba(22,141,226,.12);
    background: rgba(22,141,226,.04);
}

html.light-theme .sw-creator-avatar {
    background: linear-gradient(
        145deg,
        rgba(22,141,226,.10),
        rgba(22,141,226,.035)
    );
    border-color: rgba(22,141,226,.14);
    color: #168de2;
}

html.light-theme .sw-creator-row strong {
    color: #344054;
}

html.light-theme .sw-creator-row small {
    color: #7a8492;
}


/* =========================================================
   SIMULATION WORLD — HOMEPAGE COMPLETE LIGHT THEME
   ========================================================= */

/* Hero */
html.light-theme .sw-home-hero {
    background:
        radial-gradient(circle at 85% 20%, rgba(0,180,235,.10), transparent 30%),
        radial-gradient(circle at 10% 90%, rgba(110,70,255,.06), transparent 35%),
        linear-gradient(135deg, #ffffff, #eef3f8);
    border-color: rgba(15,23,42,.10);
    box-shadow: 0 20px 60px rgba(15,23,42,.10);
}

html.light-theme .sw-home-hero h1 {
    color: #17202b;
}

html.light-theme .sw-home-hero p {
    color: #667085;
}

html.light-theme .sw-home-button-secondary {
    border-color: rgba(15,23,42,.12);
    background: rgba(15,23,42,.035);
    color: #344054;
}

html.light-theme .sw-home-button-secondary:hover {
    background: rgba(15,23,42,.06);
}

/* Homepage game headings */
html.light-theme .sw-home-game-title,
html.light-theme .sw-game-heading h2 {
    color: #17202b;
}

html.light-theme .sw-home-game-subtitle,
html.light-theme .sw-game-heading p {
    color: #667085;
}

html.light-theme .sw-home-section-header h3,
html.light-theme .sw-section-header h3 {
    color: #17202b;
}

/* Category cards */
html.light-theme .sw-category-card {
    background:
        radial-gradient(circle at 50% 0%, rgba(22,141,226,.07), transparent 55%),
        linear-gradient(145deg, #ffffff, #f1f5f9);
    border-color: rgba(15,23,42,.10);
    color: #344054;
    box-shadow: 0 8px 24px rgba(15,23,42,.06);
}

html.light-theme .sw-category-card:hover {
    border-color: rgba(22,141,226,.25);
    box-shadow: 0 14px 30px rgba(15,23,42,.10);
}

html.light-theme .sw-category-icon {
    border-color: rgba(22,141,226,.12);
    background: rgba(22,141,226,.07);
}

html.light-theme .sw-category-card strong {
    color: #344054;
}

html.light-theme .sw-category-card small {
    color: #7a8492;
}

/* Mod cards */
html.light-theme .sw-home-mod-card {
    background: #ffffff;
    border-color: rgba(15,23,42,.10);
    box-shadow: 0 8px 25px rgba(15,23,42,.07);
}

html.light-theme .sw-home-mod-card:hover {
    border-color: rgba(22,141,226,.25);
    box-shadow:
        0 18px 38px rgba(15,23,42,.11),
        0 0 25px rgba(22,141,226,.035);
}

html.light-theme .sw-home-mod-media,
html.light-theme .sw-home-mod-image-link {
    background: #eef2f6;
}

html.light-theme .sw-home-mod-placeholder {
    background:
        radial-gradient(circle at center, rgba(22,141,226,.08), transparent 55%),
        #eef2f6;
    color: #7a8492;
}

html.light-theme .sw-home-mod-media-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0) 0%,
            transparent 48%,
            rgba(15,23,42,.12) 100%
        );
}

html.light-theme .sw-home-mod-badge {
    border-color: rgba(22,141,226,.15);
    background: rgba(255,255,255,.86);
    color: #168de2;
}

html.light-theme .sw-home-mod-hover-arrow {
    border-color: rgba(22,141,226,.20);
    background: rgba(255,255,255,.88);
    color: #168de2;
}

html.light-theme .sw-home-mod-category {
    color: #168de2;
}

html.light-theme .sw-home-mod-version {
    color: #7a8492;
}

html.light-theme .sw-home-mod-title {
    color: #17202b;
}

html.light-theme .sw-home-mod-description {
    color: #667085;
}

html.light-theme .sw-home-mod-bottom {
    border-top-color: rgba(15,23,42,.08);
}

html.light-theme .sw-home-mod-avatar {
    border-color: rgba(22,141,226,.14);
    background: rgba(22,141,226,.07);
    color: #168de2;
}

html.light-theme .sw-home-mod-creator-name {
    color: #667085;
}

html.light-theme .sw-home-mod-stats {
    color: #7a8492;
}

/* Homepage carousel buttons */
html.light-theme .sw-carousel-prev,
html.light-theme .sw-carousel-next {
    border-color: rgba(15,23,42,.10);
    background: #ffffff;
    color: #667085;
}

html.light-theme .sw-carousel-prev:hover,
html.light-theme .sw-carousel-next:hover {
    border-color: rgba(22,141,226,.25);
    background: rgba(22,141,226,.05);
    color: #168de2;
}

/* Homepage primary/secondary action buttons */
html.light-theme .sw-home-secondary-button {
    border-color: rgba(15,23,42,.12);
    background: rgba(15,23,42,.035);
    color: #344054;
}

html.light-theme .sw-home-secondary-button:hover {
    background: rgba(22,141,226,.06);
    color: #168de2;
}


/* =========================================================
   FINAL LIGHT THEME — FLOATING HEADER
   ========================================================= */

html.light-theme .site-header {
    background: rgba(255,255,255,.86) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
    box-shadow:
        0 14px 45px rgba(15,23,42,.10),
        inset 0 1px 0 rgba(255,255,255,.80) !important;
}

html.light-theme .site-header.header-scrolled {
    background: rgba(255,255,255,.78) !important;
    border-color: rgba(15,23,42,.12) !important;
    box-shadow:
        0 14px 45px rgba(15,23,42,.14),
        inset 0 1px 0 rgba(255,255,255,.85) !important;
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
}

html.light-theme .site-header .nav-link,
html.light-theme .site-header .header-action {
    color: var(--text);
}

html.light-theme .site-header .nav-link:hover,
html.light-theme .site-header .header-action:hover {
    color: var(--accent);
}


/* =========================================================
   ACCOUNT — MONETIZATION COMING SOON
   ========================================================= */

.account-monetization-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: 118px;
}

.account-monetization-content strong {
    margin-top: 14px;
    color: var(--text);
    font-size: 16px;
    font-weight: 800;
}

.account-monetization-content p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
    max-width: 360px;
}

.account-coming-soon-badge {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 10px;
    border: 1px solid rgba(53,168,255,.28);
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.4px;
}

html.light-theme .account-coming-soon-badge {
    border-color: rgba(22,141,226,.24);
}


/* =========================================================
   FINAL LIGHT THEME — GAMES PAGE
   ========================================================= */

html.light-theme .mods-games-hero {
    background: var(--bg-soft);
    border-bottom-color: var(--border);
}

html.light-theme .mods-games-title {
    color: var(--text) !important;
}

html.light-theme .mods-games-subtitle {
    color: var(--muted) !important;
}

html.light-theme .mods-game-card {
    background: var(--panel-solid) !important;
    border-color: var(--border) !important;
    box-shadow: 0 8px 28px rgba(15,23,42,.08) !important;
}

html.light-theme .mods-game-card:hover {
    background: var(--panel-hover) !important;
    border-color: rgba(22,141,226,.35) !important;
    box-shadow: 0 14px 34px rgba(15,23,42,.12) !important;
}

html.light-theme .mods-game-icon {
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
}

html.light-theme .mods-game-label {
    color: var(--muted) !important;
}

html.light-theme .mods-game-info h2 {
    color: var(--text) !important;
}

html.light-theme .mods-game-info p {
    color: var(--muted) !important;
}

html.light-theme .mods-game-arrow {
    color: #64748b !important;
}

html.light-theme .mods-game-card:hover .mods-game-arrow {
    color: var(--accent) !important;
}


/* =========================================================
   FINAL LIGHT THEME — GAME DETAIL PAGES
   Applies to BUSSID / BUSSIN / KBS / ETS2 / GTA V
   ========================================================= */

html.light-theme .bussid-store-page {
    background: var(--bg) !important;
    color: var(--text) !important;
}

html.light-theme .bussid-store-container {
    color: var(--text) !important;
}

html.light-theme .bussid-breadcrumb {
    color: var(--muted) !important;
}

html.light-theme .bussid-breadcrumb strong {
    color: var(--text) !important;
}

html.light-theme .bussid-app-header {
    background: var(--panel-solid) !important;
    border-color: var(--border) !important;
    box-shadow: 0 10px 30px rgba(15,23,42,.07) !important;
}

html.light-theme .bussid-app-icon {
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
    border-color: rgba(22,141,226,.20) !important;
}

html.light-theme .bussid-kicker,
html.light-theme .bussid-panel-heading > span,
html.light-theme .bussid-app-label {
    color: var(--accent) !important;
}

html.light-theme .bussid-app-main h1,
html.light-theme .bussid-app-title {
    color: var(--text) !important;
}

html.light-theme .bussid-developer,
html.light-theme .bussid-app-developer {
    color: var(--muted) !important;
}

html.light-theme .bussid-rating-row {
    color: var(--muted) !important;
}

html.light-theme .bussid-rating {
    color: var(--text) !important;
}

html.light-theme .bussid-tags span {
    background: var(--panel-hover) !important;
    border-color: var(--border) !important;
    color: var(--muted) !important;
}

html.light-theme .bussid-content-grid {
    color: var(--text) !important;
}

html.light-theme .bussid-panel {
    background: var(--panel-solid) !important;
    border-color: var(--border) !important;
    box-shadow: 0 8px 28px rgba(15,23,42,.07) !important;
}

html.light-theme .bussid-panel-heading h2 {
    color: var(--text) !important;
}

html.light-theme .bussid-panel p {
    color: var(--muted) !important;
}

html.light-theme .bussid-feature {
    background: var(--panel-hover) !important;
    border-color: var(--border) !important;
}

html.light-theme .bussid-feature strong {
    color: var(--text) !important;
}

html.light-theme .bussid-feature span {
    color: var(--muted) !important;
}

html.light-theme .bussid-mods-button {
    border-color: var(--border) !important;
}

html.light-theme .bussid-info-row {
    border-color: var(--border) !important;
}

html.light-theme .bussid-info-row span {
    color: var(--muted) !important;
}

html.light-theme .bussid-info-row strong {
    color: var(--text) !important;
}

html.light-theme .bussid-side-download {
    background: var(--panel-solid) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

html.light-theme .bussid-side-download strong {
    color: var(--text) !important;
}

html.light-theme .bussid-side-download span,
html.light-theme .bussid-download-area small {
    color: var(--muted) !important;
}

html.light-theme .bussid-download-area {
    color: var(--text) !important;
}

html.light-theme .bussid-store-buttons {
    color: var(--text) !important;
}

html.light-theme .bussid-ios-button {
    background: var(--panel-solid) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}


/* =========================================================
   FINAL LIGHT THEME — FOOTER
   ========================================================= */

html.light-theme .site-footer {
    background: var(--panel-solid) !important;
    border-top-color: var(--border) !important;
    color: var(--text) !important;
}

html.light-theme .footer-brand p {
    color: var(--muted) !important;
}

html.light-theme .footer-column h3 {
    color: var(--text) !important;
}

html.light-theme .footer-column a {
    color: var(--muted) !important;
}

html.light-theme .footer-column a:hover {
    color: var(--accent) !important;
}

html.light-theme .footer-bottom {
    border-top-color: var(--border) !important;
    color: var(--muted) !important;
}


/* =========================================================
   FINAL LIGHT THEME — HOMEPAGE SIDEBAR
   ========================================================= */

html.light-theme .sw-sidebar-card,
html.light-theme .sw-home-sidebar-card {
    background: var(--panel-solid) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

html.light-theme .sw-sidebar-heading h3,
html.light-theme .sw-home-sidebar-card h3 {
    color: var(--text) !important;
}

html.light-theme .sw-sidebar-nav a,
html.light-theme .sw-home-browse-list a {
    color: var(--muted) !important;
}

html.light-theme .sw-sidebar-nav a:hover,
html.light-theme .sw-home-browse-list a:hover {
    color: var(--accent) !important;
    background: var(--accent-soft) !important;
}

html.light-theme .sw-creator-row {
    color: var(--text) !important;
    border-color: transparent !important;
}

html.light-theme .sw-creator-row:hover {
    background: var(--accent-soft) !important;
    border-color: rgba(22,141,226,.12) !important;
}

html.light-theme .sw-home-creator {
    border-bottom-color: var(--border) !important;
}

html.light-theme .sw-home-creator-avatar,
html.light-theme .sw-creator-avatar {
    background: var(--accent-soft) !important;
    border-color: rgba(22,141,226,.14) !important;
    color: var(--accent) !important;
}

html.light-theme .sw-home-creator-name,
html.light-theme .sw-creator-name {
    color: var(--text) !important;
}

html.light-theme .sw-home-creator-count,
html.light-theme .sw-creator-count {
    color: var(--muted) !important;
}

html.light-theme .sw-home-faq details {
    border-bottom-color: var(--border) !important;
}

html.light-theme .sw-home-faq summary {
    color: var(--text) !important;
}

html.light-theme .sw-home-faq summary::after {
    color: var(--accent) !important;
}

html.light-theme .sw-home-faq p {
    color: var(--muted) !important;
}

html.light-theme .sw-home-empty {
    color: var(--muted) !important;
    border-color: var(--border) !important;
}


/* =========================================================
   FINAL LIGHT THEME — HOMEPAGE SIDEBAR TEXT FIX
   ========================================================= */

html.light-theme .sw-sidebar-empty {
    color: #667085 !important;
}

html.light-theme .sw-creator-row strong {
    color: #17202b !important;
}

html.light-theme .sw-creator-row small {
    color: #667085 !important;
}

html.light-theme .sw-creator-row::after {
    color: #7a8492 !important;
}

html.light-theme .sw-tips-list details {
    border-top-color: rgba(15,23,42,.08) !important;
}

html.light-theme .sw-tips-list summary {
    color: #344054 !important;
}

html.light-theme .sw-tips-list summary::before {
    background: #64748b !important;
}

html.light-theme .sw-tips-list summary::after {
    color: #667085 !important;
}

html.light-theme .sw-tips-list details[open] summary {
    color: #17202b !important;
}

html.light-theme .sw-tips-list details[open] summary::before {
    background: #168de2 !important;
}

html.light-theme .sw-tips-list details[open] summary::after {
    color: #168de2 !important;
}

html.light-theme .sw-tips-list summary:hover {
    color: #168de2 !important;
}

html.light-theme .sw-tips-list details p {
    color: #667085 !important;
    border-left-color: rgba(22,141,226,.16) !important;
}


/* =========================================================
   FINAL LIGHT THEME — ALL MODS PAGE
   ========================================================= */

html.light-theme .sw-all-mods-page {
    color: var(--text) !important;
}

html.light-theme .sw-all-mods-page h1,
html.light-theme .sw-all-mods-page h2,
html.light-theme .sw-all-mods-page h3 {
    color: var(--text) !important;
}

html.light-theme .sw-all-mods-page p {
    color: var(--muted) !important;
}

/* Game filters */
html.light-theme .sw-all-game-filter a {
    color: #344054 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

html.light-theme .sw-all-game-filter a:hover {
    color: var(--accent) !important;
}

html.light-theme .sw-all-game-filter a.active,
html.light-theme .sw-all-game-filter a.is-active {
    color: var(--accent) !important;
    background: var(--accent-soft) !important;
    border-color: rgba(22,141,226,.22) !important;
}

html.light-theme .sw-all-mods-page .sw-all-game-filter a span,
html.light-theme .sw-all-mods-page .sw-all-game-filter a small {
    color: inherit !important;
}

/* Section heading */
html.light-theme .sw-all-game-heading,
html.light-theme .sw-all-game-heading h2 {
    color: var(--text) !important;
}

html.light-theme .sw-all-game-heading p,
html.light-theme .sw-all-game-heading small,
html.light-theme .sw-all-game-count {
    color: var(--muted) !important;
}

/* Empty state */
html.light-theme .sw-all-mods-empty {
    background: var(--panel-solid) !important;
    border-color: rgba(15,23,42,.12) !important;
}

html.light-theme .sw-all-mods-empty h3 {
    color: var(--text) !important;
}

html.light-theme .sw-all-mods-empty p {
    color: var(--muted) !important;
}

html.light-theme .sw-all-mods-empty-icon {
    color: var(--accent) !important;
}


/* =========================================================
   FINAL LIGHT THEME — ALL MODS / GAME-WISE PAGE
   ========================================================= */

html.light-theme .site-main .sw-all-mods-page {
    color: var(--text) !important;
}

/* Hero */
html.light-theme .site-main .sw-all-mods-hero {
    background:
        radial-gradient(circle at 85% 0%, rgba(22,141,226,.08), transparent 35%),
        linear-gradient(145deg, #ffffff, #eef3f8) !important;
    border-color: rgba(15,23,42,.10) !important;
    box-shadow: 0 14px 35px rgba(15,23,42,.08) !important;
}

html.light-theme .site-main .sw-all-mods-hero h1 {
    color: #17202b !important;
}

html.light-theme .site-main .sw-all-mods-hero h1 span {
    color: #168de2 !important;
}

html.light-theme .site-main .sw-all-mods-hero p {
    color: #667085 !important;
}

/* Game filter */
html.light-theme .site-main .sw-all-game-filter {
    background: rgba(255,255,255,.72) !important;
    border-color: rgba(15,23,42,.10) !important;
}

html.light-theme .site-main .sw-all-game-filter a {
    color: #344054 !important;
    font-size: 12px !important;
    font-weight: 750 !important;
}

html.light-theme .site-main .sw-all-game-filter a small {
    color: #667085 !important;
    font-size: 9px !important;
}

html.light-theme .site-main .sw-all-game-filter a:hover {
    background: rgba(22,141,226,.06) !important;
    color: #168de2 !important;
}

html.light-theme .site-main .sw-all-game-filter a.is-active {
    background: rgba(22,141,226,.09) !important;
    border-color: rgba(22,141,226,.24) !important;
    color: #168de2 !important;
}

html.light-theme .site-main .sw-all-game-filter a.is-active small {
    color: #168de2 !important;
}

/* Game section headings */
html.light-theme .site-main .sw-all-game-heading h3 {
    color: #17202b !important;
}

html.light-theme .site-main .sw-all-game-heading {
    color: #17202b !important;
}

html.light-theme .site-main .sw-all-game-section {
    border-bottom-color: rgba(15,23,42,.08) !important;
}

/* Empty state */
html.light-theme .site-main .sw-all-mods-empty {
    background: #ffffff !important;
    border-color: rgba(15,23,42,.12) !important;
}

html.light-theme .site-main .sw-all-mods-empty h3 {
    color: #17202b !important;
}

html.light-theme .site-main .sw-all-mods-empty p {
    color: #667085 !important;
}

html.light-theme .site-main .sw-all-mods-empty-icon {
    color: #168de2 !important;
}


/* =========================================================
   FINAL LIGHT THEME — GAME MODS LISTING
   ========================================================= */

html.light-theme .mods-listing-page {
    background: var(--bg) !important;
    color: var(--text) !important;
}

/* Hero */
html.light-theme .mods-listing-hero {
    background:
        radial-gradient(circle at 15% 0%, rgba(22,141,226,.07), transparent 34%),
        var(--bg-soft) !important;
    border-bottom-color: var(--border) !important;
}

html.light-theme .mods-listing-eyebrow {
    color: var(--accent) !important;
}

html.light-theme .mods-listing-heading h1 {
    color: var(--text) !important;
}

html.light-theme .mods-listing-heading p {
    color: var(--muted) !important;
}

/* Hero buttons */
html.light-theme .mods-secondary-button {
    color: var(--text) !important;
    background: rgba(15,23,42,.035) !important;
    border-color: var(--border) !important;
}

html.light-theme .mods-secondary-button:hover {
    color: var(--accent) !important;
    background: var(--accent-soft) !important;
    border-color: rgba(22,141,226,.22) !important;
}

/* Search */
html.light-theme .mods-search-field {
    background: var(--panel-solid) !important;
    border-color: var(--border) !important;
}

html.light-theme .mods-search-field input {
    color: var(--text) !important;
}

html.light-theme .mods-search-field input::placeholder {
    color: var(--muted) !important;
}

/* Sidebar */
html.light-theme .mods-sidebar-panel {
    background: var(--panel-solid) !important;
    border-color: var(--border) !important;
    box-shadow: 0 10px 28px rgba(15,23,42,.08) !important;
}

html.light-theme .mods-sidebar-header {
    border-bottom-color: var(--border) !important;
}

html.light-theme .mods-sidebar-header h2 {
    color: var(--text) !important;
}

html.light-theme .mods-sidebar-header a {
    color: var(--accent) !important;
}

/* Categories */
html.light-theme .mods-category-nav a {
    color: var(--muted) !important;
}

html.light-theme .mods-category-nav a small {
    color: var(--muted) !important;
}

html.light-theme .mods-category-nav a:hover {
    color: var(--accent) !important;
    background: var(--accent-soft) !important;
}

html.light-theme .mods-category-nav a.is-active {
    color: var(--accent) !important;
    background: var(--accent-soft) !important;
    border-color: rgba(22,141,226,.18) !important;
}

html.light-theme .mods-category-nav a.is-active small {
    color: var(--accent) !important;
}

/* Results heading */
html.light-theme .mods-results-kicker {
    color: var(--accent) !important;
}

html.light-theme .mods-results-header h2 {
    color: var(--text) !important;
}

html.light-theme .mods-results-count {
    color: var(--muted) !important;
}

/* Empty state */
html.light-theme .mods-empty-state {
    background: var(--panel-solid) !important;
    border-color: rgba(15,23,42,.12) !important;
}

html.light-theme .mods-empty-state h3 {
    color: var(--text) !important;
}

html.light-theme .mods-empty-state p {
    color: var(--muted) !important;
}


/* =========================================================
   FINAL LIGHT THEME — MOBILE NAVIGATION MENU
   ========================================================= */

@media (max-width: 900px) {

    html.light-theme .main-navigation {
        background: rgba(255,255,255,.97) !important;
        border-color: rgba(15,23,42,.12) !important;
        box-shadow: 0 18px 50px rgba(15,23,42,.14) !important;
        color: #17202b !important;
    }

    html.light-theme .main-navigation .nav-link,
    html.light-theme .main-navigation .nav-button {
        color: #344054 !important;
        background: transparent !important;
    }

    html.light-theme .main-navigation .nav-link:hover,
    html.light-theme .main-navigation .nav-button:hover {
        color: #168de2 !important;
        background: rgba(22,141,226,.06) !important;
    }

    html.light-theme .main-navigation .nav-link.active {
        color: #168de2 !important;
    }

    html.light-theme .main-navigation .nav-icon {
        color: inherit !important;
    }

    html.light-theme .main-navigation .nav-icon svg {
        stroke: currentColor !important;
    }

    html.light-theme .main-navigation .browse-menu {
        background: rgba(22,141,226,.035) !important;
        border-color: rgba(15,23,42,.08) !important;
    }

    html.light-theme .main-navigation .browse-heading strong,
    html.light-theme .main-navigation .browse-item-text strong {
        color: #17202b !important;
    }

    html.light-theme .main-navigation .browse-heading,
    html.light-theme .main-navigation .browse-item-text small {
        color: #667085 !important;
    }

    html.light-theme .main-navigation .browse-game-button {
        color: #344054 !important;
    }

    html.light-theme .main-navigation .browse-game-button:hover {
        background: rgba(22,141,226,.06) !important;
        color: #168de2 !important;
    }

    html.light-theme .main-navigation .browse-submenu a {
        color: #667085 !important;
    }

    html.light-theme .main-navigation .browse-submenu a:hover {
        color: #168de2 !important;
        background: rgba(22,141,226,.05) !important;
    }

}

/* =========================================================
   FINAL LIGHT THEME — ARTICLE DETAIL PAGE
   ========================================================= */

html.light-theme .sw-article-content {
    color: #344054 !important;
}

html.light-theme .sw-article-content h1,
html.light-theme .sw-article-content h2,
html.light-theme .sw-article-content h3,
html.light-theme .sw-article-content h4,
html.light-theme .sw-article-content h5,
html.light-theme .sw-article-content h6 {
    color: #17202b !important;
}

html.light-theme .sw-article-content p,
html.light-theme .sw-article-content li {
    color: #667085 !important;
}

html.light-theme .sw-article-content strong,
html.light-theme .sw-article-content b {
    color: #344054 !important;
}

html.light-theme .sw-article-content a {
    color: #168de2 !important;
}

html.light-theme .sw-article-content a:hover {
    color: #0f75bd !important;
}

html.light-theme .sw-article-content blockquote {
    background: rgba(22,141,226,.04) !important;
    border-left-color: #168de2 !important;
    color: #667085 !important;
}

html.light-theme .sw-article-category {
    color: #168de2 !important;
}

html.light-theme .sw-article-meta {
    color: #7a8492 !important;
}

html.light-theme .sw-article-meta span {
    color: inherit !important;
}


/* =========================================================
   FINAL LIGHT THEME — ARTICLE HEADER
   ========================================================= */

html.light-theme .sw-article {
    color: #344054 !important;
}

html.light-theme .sw-article-back {
    color: #667085 !important;
}

html.light-theme .sw-article-back:hover {
    color: #168de2 !important;
}

html.light-theme .sw-article-header {
    color: #344054 !important;
}

html.light-theme .sw-article-header .sw-section-kicker {
    color: #168de2 !important;
}

html.light-theme .sw-article-header h1 {
    color: #17202b !important;
}

html.light-theme .sw-article-meta {
    color: #667085 !important;
}

html.light-theme .sw-article-meta span {
    color: inherit !important;
}


/* Google sign-in */
.auth-google-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
}
.auth-google-divider::before,
.auth-google-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}
.auth-google-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    background: var(--panel-solid);
    color: var(--text);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.auth-google-button:hover {
    background: var(--panel-hover);
    border-color: var(--accent);
    color: var(--text);
    transform: translateY(-1px);
}
.auth-google-button svg {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
}

/* SW COOKIE CONSENT STYLES */
.sw-cookie-consent-root[hidden],
.sw-cookie-preferences[hidden],
.sw-cookie-actions[hidden] {
    display: none !important;
}

.sw-cookie-consent-root {
    position: fixed;
    inset: auto 0 0;
    z-index: 2147483000;
    display: flex;
    justify-content: center;
    padding: 18px;
    pointer-events: none;
    font-family: inherit;
}

.sw-cookie-banner,
.sw-cookie-banner * {
    box-sizing: border-box;
}

.sw-cookie-banner {
    width: min(100%, 1040px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px 24px;
    padding: 22px;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 18px;
    background: #0d1624;
    color: #edf4fb;
    box-shadow: 0 20px 70px rgba(0, 0, 0, .42);
    pointer-events: auto;
}

.sw-cookie-banner-content { min-width: 0; }

.sw-cookie-banner-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 9px;
}

.sw-cookie-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    border: 1px solid rgba(45, 212, 191, .3);
    border-radius: 13px;
    background: rgba(45, 212, 191, .12);
    color: #5eead4;
    font-size: 27px;
}

.sw-cookie-eyebrow {
    display: block;
    margin-bottom: 3px;
    color: #5eead4;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.sw-cookie-banner h2 {
    margin: 0;
    color: #fff;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.3;
}

.sw-cookie-banner p {
    margin: 0 0 9px;
    color: #c5d0df;
    font-size: 13px;
    line-height: 1.65;
}

.sw-cookie-privacy-link {
    color: #5eead4;
    font-size: 12px;
    font-weight: 700;
    text-underline-offset: 3px;
}

.sw-cookie-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.sw-cookie-button {
    min-height: 42px;
    padding: 10px 14px;
    border: 1px solid rgba(148, 163, 184, .34);
    border-radius: 10px;
    background: #172334;
    color: #eef4fb;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease;
}

.sw-cookie-button:hover { border-color: #5eead4; }

.sw-cookie-button:focus-visible,
.sw-cookie-settings-link:focus-visible,
.sw-cookie-privacy-link:focus-visible {
    outline: 2px solid #5eead4;
    outline-offset: 3px;
}

.sw-cookie-button-primary {
    border-color: transparent;
    background: linear-gradient(110deg, #5eead4, #67d4f5);
    color: #09212b;
}

.sw-cookie-preferences {
    grid-column: 1 / -1;
    padding-top: 17px;
    border-top: 1px solid rgba(148, 163, 184, .22);
}

.sw-cookie-preferences h3 {
    margin: 0 0 5px;
    color: #fff;
    font-size: 16px;
}

.sw-cookie-settings-intro { margin-bottom: 12px !important; }

.sw-cookie-category-row,
.sw-cookie-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 13px 0;
    border-top: 1px solid rgba(148, 163, 184, .16);
}

.sw-cookie-category-row strong,
.sw-cookie-toggle-row strong {
    display: block;
    color: #f2f6fc;
    font-size: 13px;
}

.sw-cookie-category-row p { margin: 4px 0 0; }

.sw-cookie-always-on {
    flex: 0 0 auto;
    color: #5eead4;
    font-size: 11px;
    font-weight: 800;
}

.sw-cookie-toggle-row { cursor: pointer; }

.sw-cookie-toggle-row small {
    display: block;
    margin-top: 4px;
    color: #c5d0df;
    font-size: 12px;
    line-height: 1.5;
}

.sw-cookie-toggle-row input {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    accent-color: #5eead4;
}

.sw-cookie-ad-note {
    margin-top: 9px !important;
    padding: 11px 12px;
    border-radius: 9px;
    background: rgba(148, 163, 184, .09);
    font-size: 12px !important;
}

.sw-cookie-ad-note strong { color: #f2f6fc; }

.sw-cookie-preferences-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.sw-cookie-settings-link {
    margin-left: 12px;
    padding: 5px 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 12px;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.sw-cookie-settings-link:hover { color: #5eead4; }

@media (max-width: 760px) {
    .sw-cookie-consent-root { padding: 10px; }

    .sw-cookie-banner {
        grid-template-columns: minmax(0, 1fr);
        gap: 15px;
        max-height: 86vh;
        overflow-y: auto;
        padding: 17px;
        border-radius: 15px;
    }

    .sw-cookie-banner h2 { font-size: 17px; }
    .sw-cookie-banner p { font-size: 12px; }

    .sw-cookie-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .sw-cookie-button-primary { grid-column: 1 / -1; }
    .sw-cookie-preferences { grid-column: 1; }

    .sw-cookie-preferences-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .sw-cookie-preferences-actions .sw-cookie-button { width: 100%; }
    .sw-cookie-settings-link { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .sw-cookie-button { transition: none; }
}