/*
 * LonexCommunity - Gaming Theme
 * Clean, modern gaming aesthetic
 */

:root {
    --bg-dark: #0c0c0c;
    --bg-darker: #080808;
    --bg-card: #141414;
    --bg-card-hover: #1a1a1a;
    --bg-input: #0f0f0f;
    
    --accent: #00a8ff;
    --accent-dim: rgba(0, 168, 255, 0.15);
    --accent-glow: rgba(0, 168, 255, 0.4);
    --success: #00d97e;
    --warning: #f5a623;
    --danger: #ff4757;
    
    --text: #ffffff;
    --text-dim: #a0a0a0;
    --text-muted: #606060;
    
    --border: #222222;
    --border-light: #2a2a2a;
    
    --radius: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;

    --font-display: system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body: system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* v1.34 — 90px on desktop; the mobile breakpoint drops it back to 64
       so the bar doesn't eat a phone screen. Everything that needs to know
       the bar height reads this token, including the drawer and overlay. */
    --nav-height: 90px;
    --container: 1140px;

    /* v1.34 — Navbar surfaces. The active chip's fill and text are
       emitted per-site from primary_color in templates/public/header.php
       (--accent-chip / --accent-chip-ink); these are the fallbacks for
       any page that loads this sheet without them. */
    --nav-bg: rgba(9, 9, 11, 0.72);
    --nav-hairline: rgba(255, 255, 255, 0.07);
    --nav-hover: rgba(255, 255, 255, 0.04);
    /* v1.34 — one height for every pill in the action cluster. Padding-based
       sizing gave three different heights (borders and line-height differ per
       control), so they're set explicitly instead. */
    --nav-control-h: 40px;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background: var(--bg-dark);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

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

img {
    max-width: 100%;
}

/* Container */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

main {
    min-height: calc(100vh - var(--nav-height));
    padding-top: var(--nav-height);
    position: relative;
    z-index: 1;
}

/* ============================================
   Navigation
   ============================================ */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-height);
    background: var(--nav-bg);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border-bottom: 1px solid var(--nav-hairline);
    z-index: 1000;
    overflow: visible;
}

/* v1.34 — brand and menu group on the left; .nav-menu's auto margin
   pushes .nav-actions out to the right edge. */
.navbar .container {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 100%;
}

/* v1.34 — no font-family here on purpose: the wordmark inherits from
   body, exactly like the nav links, so the two always match. Weight and
   letter-spacing are what set it apart, not a different typeface. */
/* v1.34 — brand and action cluster are equal-basis flex items so the menu
   between them lands dead centre in the bar whatever their content widths.
   min-width: max-content stops a long site name or a full action cluster from
   being squeezed: when the bar runs out of room the menu drifts off-centre
   rather than anything overlapping or wrapping. */
.nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 0;
    min-width: max-content;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--text);
}

.nav-brand img {
    height: 34px;
    border-radius: 6px;
}

.nav-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    list-style: none;
    /* Sizes to its own content; the equal-basis siblings do the centring. */
    flex: 0 1 auto;
}

.nav-menu a {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-dim);
    border-radius: 8px;
    white-space: nowrap;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.nav-menu a:hover {
    color: var(--text);
    background: var(--nav-hover);
}

/* v1.34 — Active page. A flat chip tinted with the site's accent; no
   underline and no border. The fill is over 3x the hover so the two
   can't be confused, and the weight step means it isn't colour alone. */
.nav-menu a.active {
    color: var(--accent-chip-ink, #8ed6ff);
    font-weight: 600;
    background: var(--accent-chip, rgba(0, 168, 255, 0.20));
}
/* ── Nav Dropdowns ──────────────────────────────── */
/* v1.34 — dropdown items span the full bar height so a submenu's
   `top: 100%` lands on the bar's bottom edge instead of the bottom of the
   link, and so the pointer stays inside the trigger on the way down to the
   submenu. The link itself keeps its own size, centred by the flex.
   Deliberately scoped to .nav-has-dropdown: a bare `.nav-menu > li` rule
   outranks `.nav-mobile-actions { display: none }` and spills the whole
   mobile drawer into the desktop bar. */
.nav-menu > li.nav-has-dropdown {
    position: relative;
    display: flex;
    align-items: center;
    align-self: stretch;
}

.nav-has-dropdown > .nav-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    user-select: none;
    padding: 8px 14px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-dim);
    border-radius: 8px;
    transition: color 0.15s ease, background-color 0.15s ease;
    white-space: nowrap;
}

.nav-has-dropdown > .nav-dropdown-toggle:hover,
.nav-has-dropdown.open > .nav-dropdown-toggle {
    color: var(--text);
    background: var(--nav-hover);
}

.nav-dropdown-toggle .nav-dropdown-caret {
    transition: transform 0.2s ease;
    flex-shrink: 0;
    opacity: 0.6;
}
.nav-has-dropdown.open .nav-dropdown-caret {
    transform: rotate(180deg);
}

.nav-submenu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 194px;
    background: #15171b;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6);
    list-style: none;
    padding: 5px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: all 0.15s ease;
    z-index: 1002;
}

.nav-has-dropdown:hover .nav-submenu,
.nav-has-dropdown.open .nav-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-submenu li a {
    display: block;
    padding: 9px 13px;
    font-size: 0.85rem;
    color: var(--text-dim);
    border-radius: 9px;
    white-space: nowrap;
}
.nav-submenu li a:hover {
    color: var(--text);
    background: rgba(255,255,255,0.05);
}
.nav-submenu li a.active {
    color: var(--accent-chip-ink, #8ed6ff);
    background: var(--accent-chip, rgba(0, 168, 255, 0.20));
}

/* Mobile: dropdowns expand inline */
@media (max-width: 768px) {
    .nav-has-dropdown > .nav-dropdown-toggle {
        width: 100%;
        justify-content: space-between;
    }
    .nav-submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        border-left: 2px solid var(--border);
        border-radius: 0;
        background: transparent;
        padding: 0 0 0 16px;
        display: none;
    }
    .nav-has-dropdown.open .nav-submenu {
        display: block;
    }
}

.nav-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 1 1 0;
    min-width: max-content;
}

.nav-actions-inner {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* v1.34 — plain-text link in the action cluster (Discord invite). */
.nav-link-plain {
    padding: 8px 12px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
    border-radius: 8px;
    opacity: 0.82;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}
.nav-link-plain:hover {
    opacity: 1;
    background: var(--nav-hover);
}

/* v1.34 — every pill in the cluster shares one height, so the user chip
   lines up with the CTA beside it. box-sizing is border-box globally, so
   the ghost pill's border is already inside the height. */
.navbar .btn-ghost,
.navbar .btn-primary,
.nav-user-toggle {
    height: var(--nav-control-h);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
}

/* v1.34 — Sign in. Was .btn-discord; the blurple block was the loudest
   thing in the bar and competed with the CTA next to it. */
.navbar .btn-ghost {
    padding: 0 20px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
}
.navbar .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.34);
}

/* v1.34 — the CTA keeps var(--accent); this only reshapes it. Scoped to
   .navbar so buttons elsewhere on the site are untouched. */
.navbar .btn-primary {
    padding: 0 22px;
    font-size: 0.875rem;
    font-weight: 700;
    box-shadow: none;
}
.navbar .btn-primary:hover {
    filter: brightness(1.08);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.09);
}

/* v1.34 — stretched for the same reason as .nav-menu > li: anchors the
   account dropdown to the bar's bottom edge, not the chip's. */
.nav-user {
    position: relative;
    display: flex;
    align-items: center;
    align-self: stretch;
}

/* v1.34 — matches the ghost pill it replaces once you're signed in, and
   the CTA sitting next to it. Height comes from the shared rule above.
   It's a <button> now (was a <div>), so the browser defaults need resetting. */
.nav-user-toggle {
    gap: 9px;
    padding: 0 17px 0 6px;
    font-family: inherit;
    color: var(--text);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.14);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.nav-user-caret {
    flex-shrink: 0;
    opacity: 0.5;
    transition: transform 0.2s ease;
}

.nav-user.open .nav-user-caret {
    transform: rotate(180deg);
}

.nav-user-toggle:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.26);
}

.nav-user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.nav-user-name {
    font-size: 0.85rem;
    font-weight: 600;
}

/* v1.34 — matches .nav-submenu so both dropdowns read as the same object. */
.nav-user-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 244px;
    padding: 5px;
    background: #15171b;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
    z-index: 1001;
}

.nav-user:hover .nav-user-dropdown,
.nav-user.open .nav-user-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* v1.34 — identity header. Replaces the bare "Website ID: #1" row: the
   thing you want at the top of an account menu is who you're signed in as,
   with the ID demoted to a subtitle. */
.dropdown-identity {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px 11px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.dropdown-identity-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.dropdown-identity-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.dropdown-identity-text strong {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropdown-identity-text span {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* v1.34 — sections draw their own separator, so adding or removing a group
   (store off, not an admin) can't leave a stray or missing divider. */
.dropdown-group + .dropdown-group {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* v1.34 — one row style for links and buttons alike, with a fixed icon
   column so every label starts on the same vertical line. Previously
   Admin Panel and Logout had no icon and sat out of alignment. */
.nav-user-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 11px;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    text-align: left;
    color: var(--text-dim);
    background: none;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    transition: color 0.12s ease, background-color 0.12s ease;
}

.nav-user-dropdown .dropdown-item:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.05);
}

.nav-user-dropdown .dropdown-item > svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.72;
}

.nav-user-dropdown .dropdown-item:hover > svg { opacity: 1; }

/* Long custom-page titles truncate instead of stretching the panel. */
.dropdown-item-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Terminal action, kept visually separate from navigation. */
.nav-user-dropdown .dropdown-item-danger:hover {
    color: var(--danger);
    background: rgba(255, 71, 87, 0.10);
}

.nav-user-dropdown .nav-dropdown-action:disabled { cursor: default; opacity: .7; }

/* Spinner shown on any avatar refresh control while a request is in flight */
.is-refreshing svg { animation: lc-avatar-spin .9s linear infinite; }

@keyframes lc-avatar-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.nav-user-dropdown .dropdown-divider {
    height: 1px;
    margin: 4px 0;
    background: var(--border);
}

/* v1.34 — .nav-dropdown-cart's layout rules (and their !important) are now
   handled by .dropdown-item, which every row in the menu shares. The class
   is kept in the markup only as a hook. */

.dropdown-cart-badge {
    font-size: 0.7rem;
    font-weight: 700;
    background: var(--accent);
    color: #000;
    border-radius: 99px;
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    line-height: 1;
    /* v1.34 — counts sit on the right edge of the row rather than trailing
       the label, so they line up down the menu. */
    margin-left: auto;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

/* Mobile nav */
/* v1.34 — 36px was under the ~44px minimum comfortable touch target, and this
   is the only way to open the menu on a phone. */
.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    padding: 6px;
    flex-shrink: 0;
}

.nav-toggle span {
    width: 18px;
    height: 2px;
    background: var(--text);
    transition: all 0.2s;
    display: block;
}

/* Mobile nav overlay */
.nav-overlay {
    display: none;
    position: fixed;
    /* v1.34 — follows --nav-height, same as the drawer it dims behind */
    top: var(--nav-height);
    left: 0;
    right: 0;
    height: calc(100vh - var(--nav-height));
    height: calc(100dvh - var(--nav-height));
    background: rgba(0, 0, 0, 0.6);
    z-index: 998;
}

.nav-overlay.active {
    display: block;
}

.nav-mobile-actions { display: none; }

@media (max-width: 768px) {
    .nav-toggle {
        display: flex;
    }

    .nav-actions-inner {
        display: none;
    }

    /* v1.34 — the 90px desktop bar is too tall for a phone. */
    :root {
        --nav-height: 64px;
    }

    /* v1.34 — undo the full-height stretch; in the drawer the toggle and its
       inline submenu stack, so the item must not be a flex row. Specificity
       matches the desktop rule and wins on source order. */
    .nav-menu > li.nav-has-dropdown {
        display: block;
        align-self: auto;
    }

    .nav-menu {
        position: fixed;
        /* v1.34 — follows --nav-height instead of a hardcoded 64 */
        top: var(--nav-height);
        right: 0;
        height: calc(100vh - var(--nav-height));
        height: calc(100dvh - var(--nav-height));
        width: min(300px, 88vw);
        flex-direction: column;
        align-items: stretch;
        /* v1.34 — the desktop rule centres the row; in the drawer that would
           centre the links vertically in a full-height column. */
        justify-content: flex-start;
        background: #141414;
        border-left: 1px solid rgba(255,255,255,0.12);
        border-top: 1px solid rgba(255,255,255,0.08);
        padding: 12px 12px 40px;
        gap: 2px;
        transform: translateX(100%);
        transition: transform 0.25s ease;
        z-index: 1002;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        list-style: none;
        box-shadow: -8px 0 32px rgba(0,0,0,0.5);
    }

    .nav-menu.active {
        transform: translateX(0);
    }

    .nav-menu > li > a {
        display: block;
        padding: 13px 16px;
        font-size: 1rem;
        font-weight: 500;
        color: rgba(255,255,255,0.85);
        border-radius: 8px;
        transition: all 0.15s;
    }

    .nav-menu > li > a:hover {
        background: rgba(255,255,255,0.06);
        color: #ffffff;
    }

    /* v1.34 — the drawer's active item gets the same tinted chip as the
       desktop bar; previously it was identical to hover. */
    .nav-menu > li > a.active {
        background: var(--accent-chip, rgba(0, 168, 255, 0.20));
        color: var(--accent-chip-ink, #8ed6ff);
        font-weight: 600;
    }

    .nav-mobile-actions {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 12px;
        padding-top: 16px;
        border-top: 1px solid rgba(255,255,255,0.1);
    }

    .nav-mobile-actions .btn {
        justify-content: center;
        width: 100%;
    }

    .nav-mobile-user {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 8px;
        font-size: 0.9rem;
        font-weight: 600;
        color: #fff;
    }

    .nav-mobile-user img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }

    .nav-mobile-actions > a:not(.btn) {
        display: block;
        padding: 11px 14px;
        font-size: 0.9rem;
        color: rgba(255,255,255,0.65);
        border-radius: 8px;
        transition: all 0.15s;
    }

    .nav-mobile-actions > a:not(.btn):hover {
        background: rgba(255,255,255,0.07);
        color: #fff;
    }
}

/* ============================================
   Buttons
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-primary {
    background: var(--accent);
    color: #000;
}

.btn-primary:hover {
    filter: brightness(1.15);
    box-shadow: 0 0 24px var(--accent-glow);
}

.btn-secondary {
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-light);
}

.btn-discord {
    background: #5865F2;
    color: #fff;
}

.btn-discord:hover {
    background: #6873f5;
}

.btn-danger {
    background: var(--danger);
    color: #fff;
}

/* v1.34 — base ghost button. .btn-ghost was already used in the hero and the
   signed-in CTA row but had no definition anywhere in the sheet, so it
   rendered as bare text with no box. .navbar .btn-ghost (0,2,0) still wins
   inside the bar. */
.btn-ghost {
    color: var(--text);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.18);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.13);
    border-color: rgba(255, 255, 255, 0.34);
}

.btn-lg {
    padding: 14px 28px;
    font-size: 0.95rem;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 0.8rem;
}

/* ============================================
   Hero
   ============================================ */
.hero {
    padding: 100px 0 80px;
    text-align: center;
}

/* Fullscreen Hero */
.hero-fullscreen {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background-color: var(--bg-darker);
    background-image: var(--hero-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: calc(-1 * var(--nav-height));
    padding-top: var(--nav-height);
}

/* v1.34 — The old scrim was a single 135deg wash that left the right half of
   the image bright; on a daylit screenshot the headline sat on near-white.
   Two stacked gradients now guarantee a dark ground under the text (left,
   where the content is) and under the navbar and footer edge, while leaving
   the middle-right of the image as legible as possible. */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        linear-gradient(90deg,
            rgba(6, 7, 10, 0.93) 0%,
            rgba(6, 7, 10, 0.78) 34%,
            rgba(6, 7, 10, 0.40) 66%,
            rgba(6, 7, 10, 0.50) 100%),
        linear-gradient(180deg,
            rgba(6, 7, 10, 0.80) 0%,
            rgba(6, 7, 10, 0.18) 26%,
            rgba(6, 7, 10, 0.22) 60%,
            rgba(6, 7, 10, 0.88) 100%);
    pointer-events: none;
}

.hero-fullscreen .container {
    position: relative;
    z-index: 1;
}

.hero-content {
    max-width: 660px;
    text-align: left;
}

/* v1.34 — Still used by the signed-in hero. Was accent-on-dark, which read as
   a low-contrast purple smudge; now a muted uppercase eyebrow. The signed-out
   hero uses .hero-stat below instead. */
.hero-label {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 14px;
}

/* v1.34 — Live member count, in the slot that used to repeat the site name an
   inch below the navbar wordmark. A real number is the one thing a visitor
   can't get anywhere else on this page. */
.hero-stat {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 15px 7px 12px;
    margin-bottom: 22px;
    background: rgba(12, 14, 18, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-pill);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    font-size: 0.82rem;
    color: var(--text-dim);
}

.hero-stat strong {
    color: var(--text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.hero-stat .hero-stat-dot {
    position: relative;
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--success);
}

.hero-stat .hero-stat-dot::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1px solid var(--success);
    opacity: 0.45;
    animation: heroPulse 2.6s ease-in-out infinite;
}

@keyframes heroPulse {
    0%, 100% { transform: scale(1);   opacity: 0.45; }
    50%      { transform: scale(1.6); opacity: 0; }
}

.hero-fullscreen h1 {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 5.4vw, 4rem);
    font-weight: 800;
    line-height: 1.05;
    margin-bottom: 20px;
    color: var(--text);
    letter-spacing: -0.028em;
    text-wrap: balance;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
}

/* v1.34 — the supporting line the hero never had. */
.hero-sub {
    font-size: 1.075rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    max-width: 46ch;
    margin-bottom: 34px;
    text-shadow: 0 1px 16px rgba(0, 0, 0, 0.45);
}

/* v1.34 — one row, three tiers. Was two identical accent buttons side by side
   with a third full-width accent button stacked under them: three competing
   primaries and three different widths. */
.hero-fullscreen .hero-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.hero-buttons-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.hero-fullscreen .hero-buttons .btn {
    height: 46px;
    padding: 0 24px;
    border-radius: var(--radius-pill);
    font-size: 0.925rem;
    justify-content: center;
}

.hero-fullscreen .hero-buttons .btn svg {
    flex-shrink: 0;
}

/* Third tier: no box at all. */
.hero-textlink {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 4px;
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.62);
    transition: color 0.15s ease, gap 0.15s ease;
}

.hero-textlink:hover {
    color: var(--text);
    gap: 11px;
}

@media (prefers-reduced-motion: reduce) {
    .hero-stat .hero-stat-dot::after { animation: none; }
    .hero-textlink:hover { gap: 7px; }
}

@media (max-width: 560px) {
    .hero-fullscreen .hero-buttons { width: 100%; }
    .hero-fullscreen .hero-buttons .btn { flex: 1 1 100%; }
    /* v1.34 — the text link isn't a .btn, so without this it sat as a short
       inline link under two full-width pills. */
    .hero-fullscreen .hero-buttons .hero-textlink {
        flex: 1 1 100%;
        justify-content: center;
        padding: 6px 0 2px;
    }
}

/* v1.34 — the wordmark carries min-width: max-content so the centred menu
   can't squash it; that also means it can't shrink on a narrow phone. Scale
   it down instead, or a long site name pushes the hamburger off-screen. */
@media (max-width: 560px) {
    .nav-brand {
        font-size: 1rem;
        letter-spacing: 0.03em;
        gap: 8px;
    }
    .nav-brand img { height: 28px; }
}

@media (max-width: 380px) {
    .nav-brand {
        font-size: 0.875rem;
        letter-spacing: 0.02em;
    }
    .nav-brand img { height: 24px; }
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    margin-bottom: 24px;
    background: var(--accent-dim);
    border: 1px solid rgba(0, 168, 255, 0.2);
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--accent);
}

.hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}

.hero h1 .highlight {
    color: var(--accent);
}

.hero p {
    font-size: 1.125rem;
    color: var(--text-dim);
    max-width: 540px;
    margin: 0 auto 36px;
}

.hero-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ============================================
   Getting Started (v1.34)
   Sits directly under the hero for signed-out visitors, who previously
   got a hero and then the footer with nothing in between.
   ============================================ */
.gs-section {
    position: relative;
    padding: 96px 0 104px;
    background: var(--bg-dark);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

/* Faint pool of light behind the heading so the block isn't flat black. */
.gs-section::before {
    content: "";
    position: absolute;
    top: -30%;
    left: 50%;
    width: min(1100px, 120%);
    height: 620px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.035), transparent 68%);
    pointer-events: none;
}

.gs-head {
    position: relative;
    text-align: center;
    max-width: 760px;
    margin: 0 auto 56px;
}

.gs-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    margin-bottom: 22px;
    background: var(--accent-dim);
    border: 1px solid var(--accent-glow);
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--accent);
}

.gs-eyebrow svg { width: 15px; height: 15px; flex-shrink: 0; }

.gs-title {
    font-family: var(--font-display);
    font-size: clamp(1.85rem, 4.2vw, 3rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.028em;
    color: var(--text);
    text-wrap: balance;
    margin-bottom: 18px;
}

/* Second half of the headline, in the site accent. */
.gs-title em {
    display: block;
    font-style: normal;
    color: var(--accent);
}

.gs-sub {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--text-dim);
    max-width: 62ch;
    margin: 0 auto;
}

.gs-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.gs-card {
    --gs-accent: var(--accent);
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 26px 26px 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    transition: border-color 0.18s ease, transform 0.18s ease, background-color 0.18s ease;
}

.gs-card:hover {
    border-color: var(--border-light); /* fallback where color-mix is unsupported */
    border-color: color-mix(in srgb, var(--gs-accent) 45%, var(--border));
    transform: translateY(-3px);
}

/* Step number as a watermark — it encodes the order, which is real here:
   these are sequential steps, not a decorative list. */
.gs-card-num {
    position: absolute;
    top: -6px;
    right: 14px;
    font-family: var(--font-display);
    font-size: 5.5rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--gs-accent);
    opacity: 0.13;
    pointer-events: none;
    user-select: none;
    font-variant-numeric: tabular-nums;
}

.gs-card-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 22px;
    border-radius: 13px;
    /* fallbacks first, for browsers without color-mix */
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: color-mix(in srgb, var(--gs-accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--gs-accent) 32%, transparent);
    color: var(--gs-accent);
}

.gs-card-icon svg { width: 21px; height: 21px; }

.gs-card h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.012em;
    color: var(--text);
    margin-bottom: 9px;
}

.gs-card p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-dim);
    margin-bottom: 22px;
    flex: 1;
}

.gs-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gs-accent);
    transition: gap 0.15s ease;
}

.gs-card-link svg { width: 15px; height: 15px; flex-shrink: 0; }
.gs-card:hover .gs-card-link { gap: 12px; }

.gs-foot {
    position: relative;
    margin-top: 44px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.gs-foot a {
    color: var(--accent);
    font-weight: 600;
}

.gs-foot a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
    .gs-card:hover { transform: none; }
    .gs-card:hover .gs-card-link { gap: 8px; }
}

@media (max-width: 768px) {
    .gs-section { padding: 68px 0 76px; }
    .gs-head { margin-bottom: 40px; }
}

/* ============================================
   Stats
   ============================================ */
.stats-section {
    padding: 48px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.stat-card {
    text-align: center;
}

.stat-number {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
    margin-bottom: 4px;
}

.stat-label {
    font-size: 0.875rem;
    color: var(--text-muted);
}

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

/* ============================================
   Cards
   ============================================ */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    transition: all 0.2s ease;
}

.card:hover {
    border-color: var(--border-light);
    background: var(--bg-card-hover);
}

.card-header {
    margin-bottom: 16px;
}

.card-title {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
}

/* ============================================
   Team
   ============================================ */
.team-section,
.team-preview {
    padding: 80px 0;
}

.section-header {
    text-align: center;
    margin-bottom: 48px;
}

.section-header h2 {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.section-header p {
    color: var(--text-dim);
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}

.team-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px;
    text-align: center;
    transition: all 0.2s ease;
}

.team-card:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
}

.team-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 16px;
    object-fit: cover;
    border: 2px solid var(--border);
}

.team-card:hover .team-avatar {
    border-color: var(--accent);
}

.team-card h4 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.team-role {
    font-size: 0.85rem;
    color: var(--accent);
    margin-bottom: 12px;
}

.team-category {
    margin-bottom: 56px;
}

.team-category:last-child {
    margin-bottom: 0;
}

.team-category-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.team-category-header h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--accent);
}

/* ============================================
   Gallery
   ============================================ */
/* ============================================
   Gallery
   ============================================ */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.gallery-item {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    cursor: pointer;
    background: var(--bg-card);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

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

.gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-caption {
    color: #fff;
}

.gallery-caption h4 {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.gallery-caption p {
    font-size: 0.85rem;
    opacity: 0.8;
    margin: 0;
}

.gallery-zoom {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s ease;
}

.gallery-item:hover .gallery-zoom {
    opacity: 1;
    transform: scale(1);
}

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}

.lightbox.active {
    display: flex;
}

.lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
}

.lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lightbox-image {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: var(--radius-lg);
}

.lightbox-title {
    margin-top: 16px;
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: #fff;
    text-align: center;
}

.lightbox-close {
    position: absolute;
    top: -50px;
    right: 0;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.2);
}

.lightbox-prev {
    left: -70px;
}

.lightbox-next {
    right: -70px;
}

@media (max-width: 768px) {
    .lightbox-nav {
        width: 40px;
        height: 40px;
        font-size: 24px;
    }
    
    .lightbox-prev {
        left: 10px;
    }
    
    .lightbox-next {
        right: 10px;
    }
    
    .lightbox-close {
        top: 10px;
        right: 10px;
    }
}

/* ============================================
   Status
   ============================================ */
.status-section {
    padding: 80px 0;
}

.status-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px;
    border-radius: var(--radius-lg);
    margin-bottom: 32px;
    font-family: var(--font-display);
    font-weight: 600;
}

.status-banner.operational {
    background: rgba(0, 217, 126, 0.1);
    border: 1px solid rgba(0, 217, 126, 0.2);
    color: var(--success);
}

.status-banner.degraded {
    background: rgba(245, 166, 35, 0.1);
    border: 1px solid rgba(245, 166, 35, 0.2);
    color: var(--warning);
}

.status-banner.outage {
    background: rgba(255, 71, 87, 0.1);
    border: 1px solid rgba(255, 71, 87, 0.2);
    color: var(--danger);
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentColor;
}

.status-list {
    max-width: 700px;
    margin: 0 auto;
}

.status-item {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 12px;
}

.status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
}

.status-indicator.status-operational { background: var(--success); }
.status-indicator.status-degraded { background: var(--warning); }
.status-indicator.status-outage { background: var(--danger); }

.status-content h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.status-content p {
    font-size: 0.9rem;
    color: var(--text-dim);
    margin-bottom: 6px;
}

.status-content small {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ============================================
   FAQ
   ============================================ */
.faq-section {
    padding: 80px 0;
}

.faq-list {
    max-width: 700px;
    margin: 0 auto;
}

.faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 12px;
    overflow: hidden;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.1s;
}

.faq-question:hover {
    background: rgba(255, 255, 255, 0.02);
}

.faq-icon {
    width: 20px;
    height: 20px;
    position: relative;
}

.faq-icon::before,
.faq-icon::after {
    content: '';
    position: absolute;
    background: var(--text-dim);
    transition: transform 0.2s;
}

.faq-icon::before {
    width: 12px;
    height: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.faq-icon::after {
    width: 2px;
    height: 12px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.faq-item.active .faq-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}

.faq-item.active .faq-answer {
    max-height: 300px;
}

.faq-answer p {
    padding: 0 20px 20px;
    color: var(--text-dim);
    font-size: 0.95rem;
}

/* ============================================
   CTA
   ============================================ */
.cta-section {
    padding: 80px 0;
    text-align: center;
}

.cta-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 56px 32px;
    max-width: 600px;
    margin: 0 auto;
}

.cta-card h2 {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.cta-card p {
    color: var(--text-dim);
    margin-bottom: 28px;
}

/* ============================================
   Page Header
   ============================================ */
.page-header {
    padding: 48px 0 32px;
    text-align: center;
}

.page-header h1 {
    font-family: var(--font-display);
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.page-header p {
    color: var(--text-dim);
    max-width: 500px;
    margin: 0 auto;
}

/* ============================================
   Simple Page Styles
   ============================================ */
.container-sm {
    max-width: 800px;
}

.page-section {
    padding: 60px 0 80px;
}

.page-title {
    text-align: center;
    margin-bottom: 48px;
}

.page-title h1 {
    font-family: var(--font-display);
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.page-title p {
    color: var(--text-dim);
    font-size: 1.1rem;
}

/* Prose - for markdown content */
.prose {
    line-height: 1.8;
    color: var(--text-dim);
    text-align: center;
}

.prose h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    margin-top: 40px;
    margin-bottom: 16px;
}

.prose h2:first-child {
    margin-top: 0;
}

.prose h3 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text);
    margin-top: 32px;
    margin-bottom: 12px;
}

.prose p {
    margin-bottom: 16px;
}

.prose ul,
.prose ol {
    margin-bottom: 16px;
    padding-left: 24px;
}

.prose li {
    margin-bottom: 8px;
}

.prose strong {
    color: var(--text);
    font-weight: 600;
}

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

.prose a:hover {
    text-decoration: underline;
}

.empty-state {
    text-align: center;
    padding: 80px 24px;
    color: var(--text-dim);
}

.empty-state svg {
    margin-bottom: 20px;
    opacity: 0.4;
}

.empty-state h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
}

.empty-state p {
    max-width: 400px;
    margin: 0 auto;
    font-size: 0.95rem;
}

.page-notice {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 40px;
    padding: 16px 20px;
    background: rgba(245, 166, 35, 0.1);
    border: 1px solid rgba(245, 166, 35, 0.2);
    border-radius: var(--radius);
    color: var(--warning);
    font-size: 0.9rem;
}

.page-notice svg {
    flex-shrink: 0;
}

/* ============================================
   Rules Page
   ============================================ */
.rules-container {
    max-width: 800px;
    margin: 0 auto;
}

.rules-content {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 40px;
}

.rules-content h2 {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--text);
    margin-top: 48px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 12px;
}

.rules-content h2:first-child {
    margin-top: 0;
}

.rules-content h2::before {
    content: '';
    width: 4px;
    height: 24px;
    background: var(--accent);
    border-radius: 2px;
}

.rules-content h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    margin-top: 28px;
    margin-bottom: 12px;
}

.rules-content p {
    color: var(--text-dim);
    line-height: 1.7;
    margin-bottom: 16px;
}

.rules-content ol {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
    counter-reset: rule-counter;
}

.rules-content ol li {
    position: relative;
    padding: 16px 20px 16px 60px;
    margin-bottom: 12px;
    background: var(--bg-dark);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    counter-increment: rule-counter;
    line-height: 1.6;
    color: var(--text-dim);
}

.rules-content ol li::before {
    content: counter(rule-counter);
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background: var(--accent);
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rules-content ol li strong {
    color: var(--text);
    font-weight: 600;
}

.rules-content ul {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.rules-content ul li {
    position: relative;
    padding: 12px 16px 12px 36px;
    margin-bottom: 8px;
    background: var(--bg-dark);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius) var(--radius) 0;
    line-height: 1.6;
    color: var(--text-dim);
}

.rules-content ul li::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 18px;
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 50%;
}

.rules-content ul li strong {
    color: var(--text);
}

/* Rules Footer */
.rules-footer {
    max-width: 800px;
    margin: 32px auto 0;
}

.rules-notice {
    display: flex;
    gap: 16px;
    padding: 20px 24px;
    background: rgba(245, 166, 35, 0.08);
    border: 1px solid rgba(245, 166, 35, 0.2);
    border-radius: var(--radius-lg);
    margin-bottom: 24px;
}

.notice-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: rgba(245, 166, 35, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--warning);
}

.notice-content strong {
    display: block;
    color: var(--warning);
    font-size: 1rem;
    margin-bottom: 4px;
}

.notice-content p {
    color: var(--text-dim);
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.5;
}

.rules-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.rules-cta p {
    color: var(--text-dim);
    margin: 0;
}

@media (max-width: 640px) {
    .rules-content {
        padding: 24px;
    }
    
    .rules-content ol li {
        padding: 14px 16px 14px 52px;
    }
    
    .rules-content ol li::before {
        left: 12px;
        width: 26px;
        height: 26px;
        font-size: 0.8rem;
    }
    
    .rules-cta {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }
}

.page-cta {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--border);
    text-align: center;
}

.page-cta p {
    color: var(--text-dim);
    margin-bottom: 16px;
}

/* ============================================
   Features Section
   ============================================ */
.features-section {
    padding: 60px 0;
    background: var(--bg-darker);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.section-title {
    text-align: center;
    margin-bottom: 40px;
}

.section-title h2 {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.section-title p {
    color: var(--text-dim);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}

.feature-item {
    text-align: center;
    padding: 32px 24px;
}

.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--accent-dim);
    border-radius: 12px;
    color: var(--accent);
    margin-bottom: 16px;
}

.feature-item h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.feature-item p {
    color: var(--text-dim);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* ============================================
   CTA Section
   ============================================ */
.cta-section {
    padding: 80px 0;
}

.cta-content {
    text-align: center;
}

.cta-content h2 {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.cta-content p {
    color: var(--text-dim);
    font-size: 1.1rem;
    margin-bottom: 32px;
}

.cta-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ============================================
   Team Page
   ============================================ */
.team-category {
    margin-bottom: 48px;
}

.team-category:last-child {
    margin-bottom: 0;
}

.category-header {
    text-align: center;
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--cat-color, var(--accent));
}

.category-header h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--cat-color, var(--accent));
}

.category-header p {
    color: var(--text-dim);
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 24px;
}

.team-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px 24px;
    text-align: center;
    transition: border-color 0.2s, transform 0.2s;
}

.team-card:hover {
    border-color: var(--border-light);
    transform: translateY(-2px);
}

.team-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 16px;
    border: 3px solid var(--border);
}

.team-card h4 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.team-role {
    color: var(--accent);
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 12px;
}

.team-bio {
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
}

.team-grid-center {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}

.team-grid-center .team-card {
    width: 220px;
    flex-shrink: 0;
}

/* ============================================
   Content
   ============================================ */
.content-section {
    padding: 40px 0 80px;
}

.content-block {
    max-width: 720px;
    margin: 0 auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 40px;
}

.content-block h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 32px;
    margin-bottom: 16px;
}

.content-block h2:first-child {
    margin-top: 0;
}

.content-block p {
    color: var(--text-dim);
    margin-bottom: 16px;
}

.content-block ul,
.content-block ol {
    color: var(--text-dim);
    margin: 0 0 16px 24px;
}

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

.rules-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rule-item {
    display: flex;
    gap: 16px;
    padding: 16px 20px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 12px;
}

.rule-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--accent);
    color: #000;
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 6px;
    flex-shrink: 0;
}

.rule-content h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.rule-content p {
    font-size: 0.9rem;
    margin: 0;
}

/* ============================================
   Forms
   ============================================ */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.9rem;
    font-weight: 500;
}

.form-control {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: inherit;
    font-size: 0.95rem;
    transition: all 0.15s;
}

.form-control:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
}

.form-control::placeholder {
    color: var(--text-muted);
}

textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

.form-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 6px;
}

/* ============================================
   Alerts
   ============================================ */
.alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    font-size: 0.9rem;
}

.alert-success {
    background: rgba(0, 217, 126, 0.1);
    border: 1px solid rgba(0, 217, 126, 0.2);
    color: var(--success);
}

.alert-error {
    background: rgba(255, 71, 87, 0.1);
    border: 1px solid rgba(255, 71, 87, 0.2);
    color: var(--danger);
}

.alert-warning {
    background: rgba(245, 166, 35, 0.1);
    border: 1px solid rgba(245, 166, 35, 0.2);
    color: var(--warning);
}

.alert-info {
    background: var(--accent-dim);
    border: 1px solid rgba(0, 168, 255, 0.2);
    color: var(--accent);
}

.alert-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    opacity: 0.6;
    color: inherit;
    line-height: 1;
}

.alert-close:hover {
    opacity: 1;
}

/* ============================================
   Toast Notifications
   ============================================ */
.toast-container {
    position: fixed;
    top: calc(var(--nav-height) + 16px);
    right: 16px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 400px;
}

/* v1.34 — Toasts used to be a 15%-opacity colour wash with the message set in
   that same colour. Over a photo hero the panel took on whatever was behind it
   and the coloured-on-coloured text became unreadable. Now: an opaque panel,
   white message text, and the type colour moved to an icon and a left stripe
   where it can't fight legibility. */
.toast {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 14px 16px 14px 17px;
    border-radius: var(--radius-lg);
    background: #16181d;
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
    font-size: 0.9rem;
    overflow: hidden;
    animation: toastSlideIn 0.3s ease-out;
}

/* The type colour reads as a stripe rather than a tint. */
.toast::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: var(--toast-accent, var(--accent));
}

.toast.hiding {
    animation: toastSlideOut 0.3s ease-in forwards;
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toastSlideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

/* v1.34 — each type now only sets the accent; the panel stays opaque. */
.toast-success { --toast-accent: var(--success); }
.toast-error   { --toast-accent: var(--danger); }
.toast-warning { --toast-accent: var(--warning); }
.toast-info    { --toast-accent: var(--accent); }

.toast-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--toast-accent, var(--accent));
}

/* White, not the type colour — this is the whole point of the rework. */
.toast-message {
    flex: 1;
    min-width: 0;
    font-weight: 500;
    line-height: 1.45;
    color: var(--text);
}

.toast-close {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin: -4px -4px 0 0;
    flex-shrink: 0;
    background: none;
    border: none;
    border-radius: 7px;
    font-size: 1.25rem;
    cursor: pointer;
    opacity: 0.55;
    color: var(--text);
    line-height: 1;
    padding: 0;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.toast-close:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.08);
}

@media (prefers-reduced-motion: reduce) {
    .toast { animation: none; }
    .toast.hiding { animation: none; opacity: 0; }
}

@media (max-width: 480px) {
    .toast-container {
        left: 16px;
        right: 16px;
        max-width: none;
    }
}

/* ============================================
   Badge
   ============================================ */
.badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
    background: var(--accent-dim);
    color: var(--accent);
}

.badge-success {
    background: rgba(0, 217, 126, 0.15);
    color: var(--success);
}

.badge-danger {
    background: rgba(255, 71, 87, 0.15);
    color: var(--danger);
}

.badge-warning {
    background: rgba(245, 166, 35, 0.15);
    color: var(--warning);
}

/* ============================================
   Footer
   ============================================ */
footer {
    background: var(--bg-darker);
    border-top: 1px solid var(--border);
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.footer-left {
    color: var(--text-muted);
}

.footer-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-version {
    color: var(--text-dim);
}

.footer-separator {
    opacity: 0.5;
}

.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    opacity: 0.8;
    transition: opacity 0.15s;
}

.footer-brand:hover {
    opacity: 1;
}

.footer-brand .lonexlabs-logo {
    height: 22px;
    width: auto;
}

@media (max-width: 768px) {
    .footer-bottom {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
    
    .footer-right {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ============================================
   Error Page
   ============================================ */
.error-page {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 20px;
}

.error-content {
    max-width: 500px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.error-code {
    font-family: var(--font-display);
    font-size: 6rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 16px;
}

.error-content h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    margin-bottom: 12px;
    color: var(--text);
}

.error-content p {
    color: var(--text-dim);
    margin-bottom: 28px;
    font-size: 1rem;
    line-height: 1.6;
}

.error-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ============================================
   Utilities
   ============================================ */
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.text-dim { color: var(--text-dim); }
.text-accent { color: var(--accent); }

.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.mb-4 { margin-bottom: 32px; }

.d-flex { display: flex; }
.justify-center { justify-content: center; }
.align-center { align-items: center; }
.gap-2 { gap: 16px; }

/* ============================================
   Scrollbar
   ============================================ */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-darker);
}

::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #3a3a3a;
}

/* ============================================
   Selection
   ============================================ */
::selection {
    background: var(--accent);
    color: #000;
}

/* ============================================
   Changelog Page
   ============================================ */
.changelog-timeline {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}

.changelog-entry {
    display: flex;
    gap: 24px;
    position: relative;
    padding-bottom: 48px;
}

.changelog-entry:last-child {
    padding-bottom: 0;
}

.changelog-entry:last-child .marker-line {
    display: none;
}

.changelog-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 20px;
}

.marker-dot {
    width: 16px;
    height: 16px;
    background: var(--bg-card);
    border: 3px solid var(--border);
    border-radius: 50%;
    z-index: 1;
    transition: all 0.3s;
}

.changelog-entry.latest .marker-dot {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-dim);
}

.marker-line {
    width: 2px;
    flex: 1;
    background: var(--border);
    margin-top: 8px;
}

.changelog-content {
    flex: 1;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all 0.3s;
}

.changelog-entry.latest .changelog-content {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent-dim);
}

.changelog-header {
    padding: 24px 24px 20px;
    border-bottom: 1px solid var(--border);
}

.changelog-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.version-tag {
    background: linear-gradient(135deg, var(--accent), #0084c7);
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: var(--font-display);
}

.changelog-meta time {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.latest-badge {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.changelog-header h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    color: var(--text);
}

.changelog-image {
    border-bottom: 1px solid var(--border);
}

.changelog-image img {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
}

.changelog-changes {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.change-section {
    background: var(--bg-dark);
    border-radius: var(--radius);
    padding: 20px;
    border-left: 4px solid;
}

.change-section.added {
    border-left-color: #10b981;
}

.change-section.fixed {
    border-left-color: #3b82f6;
}

.change-section.removed {
    border-left-color: #ef4444;
}

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

.change-section.added .change-header {
    color: #10b981;
}

.change-section.fixed .change-header {
    color: #3b82f6;
}

.change-section.removed .change-header {
    color: #ef4444;
}

.change-header h3 {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.change-section ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.change-section li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
    color: var(--text-dim);
    line-height: 1.5;
}

.change-section li:last-child {
    margin-bottom: 0;
}

.change-section li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.change-section.added li::before {
    background: #10b981;
}

.change-section.fixed li::before {
    background: #3b82f6;
}

.change-section.removed li::before {
    background: #ef4444;
}

/* v1.26 — custom changelog sections; colour from inline --change-color */
.change-section.custom {
    border-left-color: var(--change-color, #8b5cf6);
}

.change-section.custom .change-header {
    color: var(--change-color, #8b5cf6);
}

.change-section.custom li::before {
    background: var(--change-color, #8b5cf6);
}

@media (max-width: 640px) {
    .changelog-entry {
        gap: 16px;
    }
    
    .changelog-marker {
        width: 14px;
    }
    
    .marker-dot {
        width: 12px;
        height: 12px;
        border-width: 2px;
    }
    
    .changelog-header {
        padding: 20px;
    }
    
    .changelog-header h2 {
        font-size: 1.25rem;
    }
    
    .changelog-changes {
        padding: 20px;
    }
    
    .change-section {
        padding: 16px;
    }
}

/* ============================================
   Status Page
   ============================================ */
.status-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-radius: var(--radius);
    font-weight: 500;
    margin-bottom: 36px;
    border: 1px solid transparent;
}
.status-banner-ok       { background: rgba(34,197,94,0.1);  color: #22c55e; border-color: rgba(34,197,94,0.2);  }
.status-banner-issue    { background: rgba(239,68,68,0.1);  color: #ef4444; border-color: rgba(239,68,68,0.2);  }
.status-banner-scheduled{ background: rgba(99,102,241,0.1); color: #818cf8; border-color: rgba(99,102,241,0.2); }

.status-section { margin-bottom: 44px; }
.status-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 14px;
}

.status-list { display: flex; flex-direction: column; gap: 12px; }
.status-list-resolved { opacity: 0.7; }

.status-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
}
.status-card-bug      { border-left-color: #ef4444; }
.status-card-issue    { border-left-color: #f59e0b; }
.status-card-downtime { border-left-color: #818cf8; }
.status-card-resolved { border-left-color: #22c55e; }

.status-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.status-card-meta { display: flex; align-items: center; gap: 8px; }

.status-type-badge, .status-state-badge {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.status-type-badge.status-type-bug      { background: rgba(239,68,68,0.15);  color: #ef4444; }
.status-type-badge.status-type-issue    { background: rgba(245,158,11,0.15); color: #f59e0b; }
.status-type-badge.status-type-downtime { background: rgba(99,102,241,0.15); color: #818cf8; }
.status-state-badge.status-state-active    { background: rgba(239,68,68,0.12);  color: #ef4444; }
.status-state-badge.status-state-scheduled { background: rgba(99,102,241,0.12); color: #818cf8; }
.status-state-badge.status-state-resolved  { background: rgba(34,197,94,0.12);  color: #22c55e; }

.status-date { font-size: 0.8rem; color: var(--text-muted); }
.status-card-title { font-size: 1rem; font-weight: 600; margin: 0 0 6px; }
.status-card-body  { font-size: 0.9rem; color: var(--text-muted); }
.status-card-body p { margin: 0; }

/* ============================================
   Applications Page
   ============================================ */
.applications-login-prompt {
    display: flex;
    justify-content: center;
    padding: 60px 0;
}

.login-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 48px;
    text-align: center;
    max-width: 400px;
}

.login-icon {
    color: var(--accent);
    margin-bottom: 20px;
}

.login-card h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    margin: 0 0 12px 0;
}

.login-card p {
    color: var(--text-dim);
    margin-bottom: 24px;
}

.application-success {
    display: flex;
    justify-content: center;
    padding: 60px 0;
}

.success-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 48px;
    text-align: center;
    max-width: 500px;
}

.success-icon {
    color: #10b981;
    margin-bottom: 20px;
}

.success-card h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    margin: 0 0 12px 0;
}

.success-card p {
    color: var(--text-dim);
    margin-bottom: 24px;
}

.success-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.applications-layout {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.applications-forms h2,
.applications-history h2 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    margin: 0 0 20px 0;
}

.forms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.form-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px 24px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.2s;
}

.form-card:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}

.form-card.has-pending {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.04);
}

.form-card-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    width: 100%;
}

.form-card-header h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.form-card-logo {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    object-fit: contain;
    background: transparent;
    flex-shrink: 0;
    margin-bottom: 4px;
}

.form-header-logo {
    display: block;
    max-width: 80px;
    max-height: 80px;
    border-radius: 12px;
    object-fit: contain;
    margin-bottom: 16px;
}

.status-badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-badge.status-pending {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.status-badge.status-approved {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.status-badge.status-denied {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.form-card-desc {
    color: var(--text-dim);
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0 0 20px 0;
    flex: 1;
    width: 100%;
}

.form-card-footer {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: auto;
}

.form-card-footer .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.form-card-footer .text-muted,
.form-card-footer .text-success {
    font-size: 0.875rem;
    font-weight: 600;
}

.applications-history {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: var(--bg-dark);
    border-radius: var(--radius);
}

.history-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.history-info strong {
    font-size: 0.9rem;
}

.history-date {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Application Form */
.application-form-wrapper {
    max-width: 700px;
    margin: 0 auto;
}

.form-back {
    margin-bottom: 20px;
}

.form-back .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.application-form-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    position: relative;
}

.application-form-card > .alert {
    margin: 24px 32px 0 32px;
}

.form-header {
    padding: 32px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-dark);
    position: relative;
}

.form-header h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    margin: 0 0 12px 0;
}

.form-description {
    color: var(--text-dim);
    font-size: 0.95rem;
    line-height: 1.6;
}

.form-description p:last-child {
    margin-bottom: 0;
}

.application-form {
    padding: 32px;
    position: relative;
    pointer-events: auto;
}

.application-form .form-group {
    margin-bottom: 24px;
    position: relative;
    pointer-events: auto;
}

.application-form .form-control {
    display: block;
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: inherit;
    font-size: 0.95rem;
    transition: border-color 0.15s, box-shadow 0.15s;
    -webkit-appearance: none;
    appearance: none;
}

.application-form .form-control:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
}

.application-form textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

.application-form select.form-control {
    cursor: pointer;
}

.application-form .form-label {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 8px;
    font-weight: 500;
    width: 100%;
}

.application-form .form-label p {
    margin: 0;
    display: inline;
}

.application-form .form-label .required {
    color: #ef4444;
    flex-shrink: 0;
}

.form-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0 24px;
}

.form-divider::before,
.form-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.form-divider:not(.form-divider-titled)::before {
    display: none;
}

.form-divider:not(.form-divider-titled)::after {
    display: none;
}

.form-divider-title {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    white-space: nowrap;
}

.checkbox-group,
.radio-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.checkbox-label,
.radio-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 10px 12px;
    background: var(--bg-dark);
    border-radius: var(--radius);
    transition: background 0.2s;
}

.checkbox-label:hover,
.radio-label:hover {
    background: var(--bg-input);
}

.checkbox-label input,
.radio-label input {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
}

.application-form .form-actions {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.application-form .form-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

@media (max-width: 640px) {
    .login-card,
    .success-card {
        padding: 32px 24px;
    }
    
    .success-actions {
        flex-direction: column;
    }
    
    .form-header,
    .application-form {
        padding: 24px;
    }
}

/* ============================================
   Custom Pages
   ============================================ */

.custom-page-content {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 40px;
}

.custom-page-content h1,
.custom-page-content h2,
.custom-page-content h3,
.custom-page-content h4,
.custom-page-content h5,
.custom-page-content h6 {
    color: var(--text);
    margin-bottom: 16px;
}

.custom-page-content h1 { font-size: 2rem; }
.custom-page-content h2 { font-size: 1.5rem; }
.custom-page-content h3 { font-size: 1.25rem; }

.custom-page-content p {
    color: var(--text-dim);
    line-height: 1.7;
    margin-bottom: 16px;
}

.custom-page-content a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.2s;
}

.custom-page-content a:hover {
    color: var(--text);
}

.custom-page-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
}

.custom-page-content ul,
.custom-page-content ol {
    color: var(--text-dim);
    padding-left: 24px;
    margin-bottom: 16px;
}

.custom-page-content li {
    margin-bottom: 8px;
}

.custom-page-content code {
    background: var(--bg-dark);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 0.9em;
}

.custom-page-content pre {
    background: var(--bg-dark);
    padding: 20px;
    border-radius: var(--radius);
    overflow-x: auto;
    margin-bottom: 16px;
}

.custom-page-content pre code {
    background: transparent;
    padding: 0;
}

.custom-page-content blockquote {
    border-left: 4px solid var(--accent);
    padding-left: 20px;
    margin: 20px 0;
    color: var(--text-dim);
    font-style: italic;
}

.custom-page-content hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 30px 0;
}

.custom-page-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.custom-page-content th,
.custom-page-content td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.custom-page-content th {
    background: var(--bg-dark);
    color: var(--text);
    font-weight: 600;
}

.custom-page-full-width {
    width: 100%;
}

.page-subtitle {
    color: var(--text-dim);
    font-size: 1.1rem;
    margin-top: 8px;
}

@media (max-width: 768px) {
    .custom-page-content {
        padding: 24px;
    }
}

/* ============================================
   Mobile Improvements (v1.10)
   ============================================ */

@media (max-width: 640px) {
    /* Hero section */
    .hero {
        padding: 60px 0 40px;
        text-align: center;
    }

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

    .hero-buttons .btn {
        width: 100%;
        justify-content: center;
    }

    /* Nav user dropdown full-width on mobile */
    .nav-user-dropdown {
        position: fixed;
        top: var(--nav-height);
        left: 0;
        right: 0;
        width: 100%;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    /* Section padding */
    .section, section {
        padding: 48px 0;
    }

    .section-header h2 {
        font-size: 1.5rem;
    }

    /* Page header */
    .page-header {
        padding: 40px 0 24px;
    }

    .page-header h1 {
        font-size: 1.75rem;
    }

    /* Cards */
    .card {
        padding: 16px;
    }

    /* Team grid */
    .team-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    /* Gallery grid */
    .gallery-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    /* Applications */
    .application-form-card {
        padding: 20px;
    }

    /* Stats */
    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Forms */
    .form-row {
        flex-direction: column;
    }

    /* Buttons */
    .btn-group-mobile {
        flex-direction: column;
        width: 100%;
    }

    .btn-group-mobile .btn {
        width: 100%;
    }

    /* Tables */
    table {
        font-size: 0.875rem;
    }

    /* Modals full screen */
    .modal-content {
        width: 100%;
        max-width: 100%;
        min-height: 50vh;
        margin: auto 0 0;
        border-radius: 16px 16px 0 0;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

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

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

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

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

/* ============================================================
 * v1.19 — Posts (News + RP News) + Social Links
 * Redesigned for proper visual hierarchy + typography
 * ============================================================ */

/* ---- Shared eyebrow label ------------------------------------------- */
.post-eyebrow {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-dim);
    padding: 4px 10px;
    border-radius: 999px;
}

/* ============================================================
 * FOOTER + HERO SOCIAL ICONS
 * ============================================================ */
.footer-social {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    padding: 24px 0 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.footer-social-link {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    font-size: 18px;
    transition: color .15s, border-color .15s, background .15s, transform .15s;
    text-decoration: none;
}
.footer-social-link:hover {
    color: var(--accent);
    border-color: var(--accent-glow);
    background: var(--accent-dim);
    transform: translateY(-2px);
}
.hero-social-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
    flex-wrap: wrap;
}
.hero-social-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 18px;
    transition: transform .15s, background .15s, border-color .15s;
    text-decoration: none;
}
.hero-social-icon:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(41, 205, 150, 0.5);
}

/* ============================================================
 * LISTING PAGE (/news, /rp-news)
 * ============================================================ */
.post-listing-section {
    padding: 60px 0 80px;
}

.post-listing-header {
    text-align: center;
    margin-bottom: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.post-listing-header h1 {
    font-size: clamp(2rem, 4vw, 2.75rem);
    margin: 0;
    color: var(--text);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.post-listing-header p {
    color: var(--text-dim);
    font-size: 1.05rem;
    margin: 0;
    max-width: 520px;
}

.post-empty {
    text-align: center;
    padding: 80px 24px;
    background: var(--bg-card);
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
    color: var(--text-dim);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.post-empty h3 {
    margin: 0;
    color: var(--text);
    font-size: 1.2rem;
    font-weight: 700;
}
.post-empty p { margin: 0; max-width: 440px; }

/* ---- Featured post card (page 1 only, when 2+ posts) ---------------- */
.post-feature {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 28px;
    text-decoration: none;
    color: inherit;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.post-feature:hover {
    transform: translateY(-3px);
    border-color: var(--accent-glow);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}
.post-feature-image {
    background-size: cover;
    background-position: center;
    background-color: var(--bg-input);
    min-height: 320px;
}
.post-feature-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    background:
        radial-gradient(circle at 30% 30%, var(--accent-dim) 0%, transparent 60%),
        var(--bg-input);
}
.post-feature-body {
    padding: 36px 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    justify-content: center;
}
.post-feature-title {
    margin: 0;
    font-size: clamp(1.4rem, 2.2vw, 1.85rem);
    font-weight: 800;
    color: var(--text);
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.post-feature-excerpt {
    margin: 0;
    color: var(--text-dim);
    line-height: 1.65;
    font-size: 0.95rem;
}
.post-feature-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-top: 4px;
}
@media (max-width: 800px) {
    .post-feature { grid-template-columns: 1fr; }
    .post-feature-image { min-height: 200px; }
    .post-feature-body { padding: 24px; }
}

/* ---- Card grid ------------------------------------------------------- */
.post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 22px;
    margin-bottom: 40px;
}
.post-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .2s, border-color .2s, box-shadow .2s;
    position: relative;
}
.post-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent-glow);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.post-card-image {
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    background-color: var(--bg-input);
}
.post-card-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    background:
        radial-gradient(circle at 70% 30%, var(--accent-dim) 0%, transparent 70%),
        var(--bg-input);
}
.post-card-body {
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.post-card-date {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.9px;
    font-weight: 600;
}
.post-card-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.35;
    letter-spacing: -0.005em;
}
.post-card-excerpt {
    margin: 0;
    color: var(--text-dim);
    font-size: 0.875rem;
    line-height: 1.6;
    flex: 1;
}
.post-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 0.75rem;
    color: var(--text-muted);
}
.post-card-byline-inline { font-weight: 600; }

/* ---- RP card accents ------------------------------------------------- */
.rp-card { position: relative; }
.rp-card::before,
.rp-feature::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--rp-card-accent, var(--accent));
    z-index: 1;
}
.rp-feature::before { z-index: 2; }
.rp-card-outlet {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    color: var(--rp-card-accent, var(--accent));
    font-weight: 700;
}
.rp-card-outlet img {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    object-fit: cover;
}

/* ============================================================
 * SINGLE ARTICLE PAGE
 * ============================================================ */
.post-article {
    padding-bottom: 80px;
}

/* When no hero image, give the article a subtle top accent strip */
.post-article--no-hero {
    background:
        linear-gradient(180deg, var(--accent-dim) 0%, transparent 240px),
        transparent;
    padding-top: 8px;
}

.post-article-hero {
    height: 380px;
    background-image: var(--post-hero);
    background-size: cover;
    background-position: center;
    position: relative;
    margin-bottom: -120px;
}
.post-article-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, var(--bg-dark) 100%);
}

.post-article-shell {
    max-width: 760px;
    margin: 0 auto;
    position: relative;
    padding-top: 32px;
}

/* Breadcrumb -------------------------------------------------- */
.post-article-crumbs {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.post-crumb {
    color: var(--text-dim);
    text-decoration: none;
    font-weight: 600;
    transition: color .15s;
}
.post-crumb:hover { color: var(--accent); }
.post-crumb-sep { opacity: 0.4; }
.post-crumb-current {
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}

/* Article header --------------------------------------------- */
.post-article-head {
    margin-bottom: 44px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.post-article-head h1 {
    font-size: clamp(2rem, 4.4vw, 2.85rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--text);
    font-weight: 800;
}
.post-article-lede {
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--text-dim);
    margin: 0;
    font-weight: 400;
}

/* Meta strip with icons --------------------------------------- */
.post-article-meta {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    color: var(--text-muted);
    font-size: 0.85rem;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}
.post-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.post-meta-item svg { opacity: 0.7; flex-shrink: 0; }
.post-meta-byline {
    color: var(--text-dim);
    font-weight: 600;
}
.post-meta-byline img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-input);
}
.post-meta-sep { opacity: 0.4; }

/* Article body — typography ----------------------------------- */
.post-article-body {
    font-size: 1.0625rem;
    line-height: 1.78;
    color: var(--text);
}
.post-article-body h1,
.post-article-body h2,
.post-article-body h3,
.post-article-body h4 {
    color: var(--text);
    margin: 2em 0 0.6em;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}
.post-article-body h2 { font-size: 1.65rem; }
.post-article-body h3 { font-size: 1.3rem; }
.post-article-body h4 { font-size: 1.1rem; }
.post-article-body p {
    margin: 0 0 1.3em;
    color: var(--text-dim);
}
.post-article-body a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-color: var(--accent-glow);
    text-underline-offset: 3px;
}
.post-article-body strong { color: var(--text); }
.post-article-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
    margin: 1.4em 0;
    border: 1px solid var(--border);
}
.post-article-body code {
    background: var(--bg-card);
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 0.9em;
    color: var(--accent);
    font-family: ui-monospace, 'SF Mono', 'Monaco', monospace;
    border: 1px solid var(--border);
}
.post-article-body pre {
    background: var(--bg-darker);
    border: 1px solid var(--border);
    padding: 18px 20px;
    border-radius: var(--radius);
    overflow-x: auto;
    margin: 1.6em 0;
    line-height: 1.6;
}
.post-article-body pre code {
    background: transparent;
    padding: 0;
    color: var(--text);
    border: none;
    font-size: 0.92em;
}
.post-article-body blockquote {
    margin: 1.6em 0;
    padding: 16px 22px;
    border-left: 3px solid var(--accent);
    background: var(--bg-card);
    color: var(--text-dim);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-style: italic;
}
.post-article-body blockquote p { margin: 0; }
.post-article-body ul,
.post-article-body ol {
    padding-left: 28px;
    color: var(--text-dim);
    margin: 0 0 1.3em;
}
.post-article-body li { margin: 6px 0; }
.post-article-body hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 2.2em 0;
}
.post-article-body .md-table-wrap {
    overflow-x: auto;
    margin: 1.6em 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.post-article-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92em;
}
.post-article-body th,
.post-article-body td {
    padding: 11px 16px;
    border-bottom: 1px solid var(--border);
    text-align: left;
}
.post-article-body tr:last-child td { border-bottom: none; }
.post-article-body th {
    background: var(--bg-card);
    color: var(--text);
    font-weight: 700;
}

/* Article footer --------------------------------------------- */
.post-article-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 64px;
    padding-top: 28px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}
.post-foot-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-dim);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 8px 14px 8px 10px;
    border-radius: var(--radius);
    transition: color .15s, background .15s;
}
.post-foot-back:hover {
    color: var(--accent);
    background: var(--accent-dim);
}
.post-foot-share {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.post-foot-share-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 700;
    margin-right: 4px;
}
.post-share-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--text-dim);
    cursor: pointer;
    text-decoration: none;
    padding: 0;
    transition: color .15s, border-color .15s, background .15s, transform .15s;
}
.post-share-btn:hover {
    color: var(--accent);
    border-color: var(--accent-glow);
    background: var(--accent-dim);
    transform: translateY(-1px);
}
.post-share-btn--ok {
    color: var(--success);
    border-color: var(--success);
}

/* ============================================================
 * RP ARTICLE EXTRAS
 * ============================================================ */
.rp-article {
    /* Use the outlet's accent color throughout */
}
.rp-article.post-article--no-hero {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--rp-accent, var(--accent)) 18%, transparent) 0%,
            transparent 240px),
        transparent;
}
.rp-article .post-eyebrow {
    color: var(--rp-accent, var(--accent));
    background: color-mix(in srgb, var(--rp-accent, var(--accent)) 18%, transparent);
}

/* Outlet badge in article header */
.rp-outlet-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px 12px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--rp-accent, var(--accent));
    border-radius: var(--radius);
    max-width: 100%;
    align-self: flex-start;
}
.rp-outlet-badge img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}
.rp-outlet-badge-mark {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--rp-accent, var(--accent)) 22%, transparent);
    color: var(--rp-accent, var(--accent));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
.rp-outlet-badge-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.rp-outlet-badge-text strong {
    color: var(--rp-accent, var(--accent));
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.2px;
}
.rp-outlet-badge-text span {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.rp-outlet-byline {
    display: inline-block;
    color: var(--rp-accent, var(--accent));
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    font-size: 0.75rem;
    align-self: flex-start;
}

/* IC disclaimer just before the article footer */
.rp-disclaimer-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 48px;
    padding: 14px 18px;
    background: color-mix(in srgb, var(--warning) 8%, var(--bg-card));
    border: 1px solid color-mix(in srgb, var(--warning) 30%, var(--border));
    border-radius: var(--radius);
    color: var(--text-dim);
    font-size: 0.85rem;
    line-height: 1.55;
}
.rp-disclaimer-box svg {
    color: var(--warning);
    flex-shrink: 0;
    margin-top: 2px;
}
.rp-disclaimer-box p { margin: 0; }

/* ============================================================
 * PAGINATION
 * ============================================================ */
.post-pagination-public {
    display: flex;
    gap: 6px;
    margin: 36px 0 0;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.post-pagination-public a {
    min-width: 38px;
    padding: 8px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-dim);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    transition: border-color .15s, color .15s, background .15s;
}
.post-pagination-public a:hover {
    border-color: var(--accent-glow);
    color: var(--text);
}
.post-pagination-public a.active {
    background: var(--accent-dim);
    border-color: var(--accent-glow);
    color: var(--accent);
}
.post-pagination-step {
    color: var(--text-dim) !important;
}

/* ============================================================
 * MOBILE
 * ============================================================ */
@media (max-width: 720px) {
    .post-listing-section { padding: 36px 0 60px; }
    .post-listing-header  { margin-bottom: 32px; }
    .post-article-hero    { height: 240px; margin-bottom: -90px; }
    .post-article-shell   { padding-top: 24px; }
    .post-article-head    { margin-bottom: 32px; }
    .post-article-body    { font-size: 1rem; }
    .post-article-foot {
        flex-direction: column;
        align-items: flex-start;
    }
    .post-article-meta { gap: 14px; }
}

/* ============================================================== */
/* v1.21 — My Applications (public) + thread component             */
/* ============================================================== */

/* List page */
.my-apps-page {
    padding: 60px 20px 80px;
    max-width: 880px;
}

.my-apps-head {
    margin-bottom: 32px;
}

.my-apps-head h1 {
    font-size: 2rem;
    margin: 0 0 6px;
}

.my-apps-head p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.my-apps-empty {
    padding: 56px 24px;
    text-align: center;
    border: 1px dashed var(--border);
    border-radius: 12px;
    color: var(--text-muted);
}

.my-apps-empty svg { margin-bottom: 14px; }

.my-apps-empty h3 {
    margin: 0 0 4px;
    color: var(--text);
    font-size: 1.05rem;
}

.my-apps-empty a {
    color: var(--accent);
    text-decoration: underline;
}

.my-apps-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.my-app-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--card);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, transform 0.15s;
}

.my-app-card:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}

.my-app-card-main { flex: 1; min-width: 0; }

.my-app-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.my-app-card-form {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text);
}

.my-app-card-unread {
    background: var(--accent);
    color: #000;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}

.my-app-card-meta {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.my-app-card-status,
.my-app-status {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.05);
    color: var(--text-muted);
}

.my-app-card-status.status-pending,
.my-app-status.status-pending {
    background: rgba(120, 180, 255, 0.15);
    color: #78b4ff;
}

.my-app-card-status.status-approved,
.my-app-status.status-approved {
    background: rgba(41, 205, 150, 0.15);
    color: var(--accent);
}

.my-app-card-status.status-denied,
.my-app-status.status-denied {
    background: rgba(255, 100, 100, 0.15);
    color: #ff8080;
}

.my-app-card-status.status-needs-revision,
.my-app-status.status-needs-revision {
    background: rgba(255, 195, 0, 0.15);
    color: #ffcd3b;
}

/* Detail page */
.my-app-detail {
    padding: 40px 20px 80px;
    max-width: 880px;
}

.my-app-back {
    display: inline-block;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.88rem;
    margin-bottom: 16px;
    transition: color 0.15s;
}

.my-app-back:hover { color: var(--accent); }

.my-app-detail-head h1 {
    font-size: 1.6rem;
    margin: 0 0 8px;
}

.my-app-detail-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.my-app-detail-sep { opacity: 0.5; }

.my-app-revision-banner {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255, 195, 0, 0.08);
    border: 1px solid rgba(255, 195, 0, 0.25);
    border-radius: 10px;
    margin-bottom: 24px;
}

.my-app-revision-banner svg {
    color: #ffcd3b;
    flex-shrink: 0;
    margin-top: 2px;
}

.my-app-revision-banner strong { display: block; color: var(--text); margin-bottom: 2px; }
.my-app-revision-banner p { margin: 0; font-size: 0.88rem; color: var(--text-muted); }
.my-app-revision-banner a { color: var(--accent); text-decoration: underline; }

.my-app-answers {
    margin-bottom: 24px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card);
}

.my-app-answers summary {
    padding: 14px 18px;
    cursor: pointer;
    font-weight: 600;
    color: var(--text);
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
}

.my-app-answers summary::-webkit-details-marker { display: none; }

.my-app-answers summary::before {
    content: '▸';
    margin-right: 8px;
    color: var(--text-muted);
    transition: transform 0.15s;
    display: inline-block;
}

.my-app-answers[open] summary::before {
    transform: rotate(90deg);
}

.my-app-answers-body {
    padding: 0 18px 18px;
    border-top: 1px solid var(--border);
}

.my-app-answer-list {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 16px;
}

.my-app-answer-item dt {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 2px;
}

.my-app-answer-item dd {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Thread component — shared with admin (kept visually in sync with admin.css) */
.app-thread {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.app-thread-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 16px;
}

.app-thread-heading svg { opacity: 0.55; }

.app-thread-locked-pill {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    background: rgba(255,255,255,0.05);
    padding: 3px 8px;
    border-radius: 4px;
}

.app-thread-empty {
    padding: 24px;
    border-radius: 10px;
    background: var(--card);
    border: 1px dashed var(--border);
    text-align: center;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.app-thread-empty p { margin: 0 0 4px; }
.app-thread-empty-hint { font-size: 0.85rem; opacity: 0.7; }

.app-thread-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.app-thread-msg {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.app-thread-msg--staff {
    background: rgba(41, 205, 150, 0.05);
    border-color: rgba(41, 205, 150, 0.18);
}

.app-thread-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}

.app-thread-body { flex: 1; min-width: 0; }

.app-thread-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.app-thread-author { font-weight: 600; color: var(--text); }

.app-thread-badge {
    display: inline-block;
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 7px;
    border-radius: 3px;
}

.app-thread-badge-staff {
    background: rgba(41, 205, 150, 0.18);
    color: var(--accent);
}

.app-thread-content {
    font-size: 0.93rem;
    line-height: 1.55;
    color: var(--text);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.app-thread-locked {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-muted);
    font-size: 0.88rem;
}

.app-thread-locked svg { color: var(--text-muted); flex-shrink: 0; }

.app-thread-reply { margin-top: 8px; }

.app-thread-textarea {
    resize: vertical;
    min-height: 90px;
    width: 100%;
    padding: 12px 14px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.93rem;
    line-height: 1.5;
}

.app-thread-textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.app-thread-reply-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.app-thread-reply-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.app-thread-submit { margin-left: auto; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================== */
/* v1.20.1 — Suggestions header layout fix                        */
/* The inline-style flex container with align-items: flex-start   */
/* made the action button visually sit ABOVE the h1's text        */
/* baseline because global h1 line-height is 1.6× — button top    */
/* aligned with the h1 BOX top, not the visible glyph top.        */
/*                                                                */
/* Fix: tighten the h1 line-height locally so its line-box        */
/* (~41px) matches the button height (~42px). With both elements  */
/* roughly the same height, flex-start now produces visually      */
/* aligned items, and the subtitle stacks below without affecting */
/* the button's position.                                         */
/* ============================================================== */
.suggestions-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.suggestions-head-text { flex: 1 1 auto; min-width: 0; }

.suggestions-head-text h1 {
    margin: 0;
    line-height: 1.15;  /* tight box so it matches button height */
}

.suggestions-head-text p {
    margin: .35rem 0 0 0;
    color: var(--text-dim, var(--text-muted));
    font-size: .95rem;
}

.suggestions-head-action {
    flex-shrink: 0;
}

/* On narrow viewports, let the action wrap below the title fully */
@media (max-width: 560px) {
    .suggestions-head-action { width: 100%; justify-content: center; }
}

/* ===========================================================================
 * Public user profiles (v1.24)
 * ======================================================================== */
.profile-container { max-width: 1000px; }

.profile-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}
.profile-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-light);
    flex-shrink: 0;
}

/* v1.33.2 — refresh button tucked into the corner of the avatar */
.profile-avatar-wrap { position: relative; flex-shrink: 0; line-height: 0; }
.profile-avatar-refresh {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    border: 2px solid var(--bg-card);
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    opacity: .85;
    transition: opacity .15s ease, transform .15s ease;
}
.profile-avatar-refresh:hover { opacity: 1; transform: scale(1.06); }
.profile-avatar-refresh:disabled { cursor: default; transform: none; }

.profile-identity { flex: 1; min-width: 0; }
.profile-name { margin: 0; font-size: 1.6rem; line-height: 1.2; }
.profile-username { color: var(--text-dim); font-size: .95rem; margin-top: .15rem; }
.profile-roles { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.profile-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin-top: .75rem;
    color: var(--text-dim);
    font-size: .9rem;
}
.profile-stats strong { color: var(--text); }
.profile-joined { color: var(--text-muted); }
.profile-follow-form { flex-shrink: 0; align-self: flex-start; }

.profile-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 1.25rem;
    align-items: start;
}
.profile-side { display: flex; flex-direction: column; gap: 1.25rem; }
.profile-main { display: flex; flex-direction: column; gap: 1.25rem; }

.profile-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
}
.profile-box-title {
    margin: 0 0 .75rem;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: .5rem;
}
.profile-empty { color: var(--text-muted); font-size: .9rem; margin: 0; }
.profile-about-body { color: var(--text-dim); line-height: 1.6; word-wrap: break-word; }
.profile-about-body p:last-child { margin-bottom: 0; }
.profile-about-edit { margin-top: .9rem; }
.profile-about-edit summary { cursor: pointer; color: var(--accent); font-size: .9rem; }
.profile-about-edit form { margin-top: .6rem; }

/* Connected accounts (Discord name + socials) */
.profile-connections {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .9rem;
}
.profile-conn-item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .6rem;
    border: 1px solid var(--border-light);
    border-radius: 999px;
    font-size: .85rem;
    color: var(--text-dim);
    text-decoration: none;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
a.profile-conn-item:hover { background: var(--bg-card-hover); color: var(--text); }
.profile-conn-discord { color: var(--text); }
.profile-conn-icon { display: inline-flex; font-size: 1rem; line-height: 1; flex-shrink: 0; }

/* Social link editor (one row per platform) */
.profile-social-edit-label { display: block; margin-top: .9rem; }
.profile-social-edit { display: flex; flex-direction: column; gap: .45rem; margin-top: .4rem; }
.profile-social-row { display: flex; align-items: center; gap: .5rem; }
.profile-social-row .profile-conn-icon { width: 1.1rem; justify-content: center; color: var(--text-dim); }
.profile-social-row .form-control { flex: 1; }

.profile-departments { display: flex; flex-direction: column; gap: .5rem; }
.profile-dept-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .7rem;
    border: 1px solid var(--border-light);
    border-left-width: 3px;
    border-radius: var(--radius);
    color: var(--text);
    text-decoration: none;
    font-size: .9rem;
    transition: background .15s ease;
}
.profile-dept-badge:hover { background: var(--bg-card-hover); }
.profile-dept-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

.profile-composer textarea { resize: vertical; }
.profile-feed { display: flex; flex-direction: column; gap: .9rem; }
.profile-post {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .9rem 1rem;
    background: var(--bg-darker);
}
.profile-post-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .4rem;
}
.profile-post-time { color: var(--text-muted); font-size: .82rem; }
.profile-post-delete { margin: 0; }
.profile-post-delete-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 .25rem;
}
.profile-post-delete-btn:hover { color: var(--danger); }
.profile-post-body { color: var(--text-dim); line-height: 1.6; word-wrap: break-word; }
.profile-post-body p:last-child { margin-bottom: 0; }
.profile-pagination { margin-top: 1rem; display: flex; align-items: center; gap: 1rem; }

@media (max-width: 800px) {
    .profile-grid { grid-template-columns: 1fr; }
    .profile-header { flex-wrap: wrap; }
}