:root {
    --bg-dark: #090908;
    --bg-card: #141312;
    --bg-card-hover: #1b1a18;
    --bg-card-deep: #090908;
    --bg-card-mid: #181715;
    --bg-navbar: rgba(9, 9, 8, 0.82);
    --bg-footer: #0e0d0c;
    --border: rgba(255, 250, 240, 0.06);
    --border-glow: rgba(255, 250, 240, 0.11);
    --text: #f7f3ed;
    --text-muted: #a39e96;
    --accent: #62d9a0;
    --accent-dim: #3fbf7f;
    --accent-rgb: 98, 217, 160;
    --accent-glow: rgba(98, 217, 160, 0.14);
    --blood: #e85d5d;
    --blood-glow: rgba(232, 93, 93, 0.2);
    --warning: #e9a64c;
    --warm: #e9a64c;
    --warm-rgb: 233, 166, 76;
    --radius: 14px;
    --radius-lg: 20px;
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
    --font: 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
    --layout-max: clamp(1200px, 88vw, 1560px);
}

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

@media (min-width: 2200px) {
    html { font-size: 17px; }
}

body {
    font-family: var(--font);
    background: var(--bg-dark);
    color: var(--text);
    min-height: 100vh;
    line-height: 1.6;
    font-size: 1rem;
    font-weight: 500;
}

.bg-fog {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(var(--accent-rgb), 0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(220, 38, 38, 0.05) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, 0.8) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.bg-grid {
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(var(--accent-rgb), 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--accent-rgb), 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 0;
}

/* Navbar */
.navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    min-height: 3.8rem;
    padding: 0.6rem 1.6rem;
    background: var(--bg-navbar);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

.nav-brand {
    flex: 0 0 auto;
    min-width: 0;
    max-width: min(252px, 34vw);
}

.nav-brand-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--text);
    min-width: 0;
}

.nav-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    min-width: 0;
}

.brand-icon {
    flex-shrink: 0;
    font-size: 1.65rem;
    color: var(--accent);
    filter: drop-shadow(0 0 6px var(--accent-glow));
    animation: pulse-glow 3s ease-in-out infinite;
}

.brand-mark {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    padding: 7px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    background:
        linear-gradient(155deg, rgba(var(--accent-rgb), 0.16) 0%, rgba(var(--accent-rgb), 0.05) 48%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(var(--accent-rgb), 0.22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 2px 10px rgba(0, 0, 0, 0.18);
    user-select: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.brand-mark-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.brand-mark-svg .brand-mark-reticle {
    opacity: 0.9;
}

.brand-mark-svg .brand-mark-cs {
    fill: currentColor;
    font-family: var(--font-display);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.brand-mark-svg .brand-mark-pill {
    fill: currentColor;
}

.brand-mark-svg .brand-mark-ver {
    fill: var(--bg-dark);
    font-family: var(--font);
    font-size: 6.1px;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.brand-mark--sm {
    width: 30px;
    height: 30px;
    padding: 5px;
    border-radius: 9px;
}

.brand-mark--lg {
    width: 52px;
    height: 52px;
    padding: 9px;
    border-radius: 14px;
}

.nav-brand-link:hover .brand-mark,
.login-brand:hover .brand-mark,
.install-header:hover .brand-mark {
    border-color: rgba(var(--accent-rgb), 0.34);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        0 4px 14px rgba(var(--accent-rgb), 0.12);
}

@keyframes pulse-glow {
    0%, 100% { filter: drop-shadow(0 0 6px var(--accent-glow)); }
    50% { filter: drop-shadow(0 0 14px var(--accent-glow)); }
}

.brand-text {
    font-family: var(--font-display);
    font-size: 1.38rem;
    letter-spacing: 0.5px;
    color: var(--accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.brand-tag {
    display: block;
    font-size: 0.68rem;
    color: var(--text-muted);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 0.2rem;
    align-items: center;
    flex: 1 1 auto;
    justify-content: flex-end;
    flex-wrap: nowrap;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.nav-links::-webkit-scrollbar { display: none; }

.nav-links li { flex-shrink: 0; }

.nav-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex: 1 1 auto;
    justify-content: flex-end;
}

.nav-sep {
    display: none;
    list-style: none;
}

.nav-user {
    display: none;
}

.nav-links a {
    display: flex;
    align-items: center;
    gap: 0.42rem;
    padding: 0.52rem 0.78rem;
    text-decoration: none;
    color: var(--text-muted);
    border-radius: 9px;
    transition: color 0.2s, background 0.2s, box-shadow 0.2s;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.nav-links a:hover {
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.08);
}

.nav-links a.active {
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.12);
    box-shadow: inset 0 -2px 0 var(--accent);
}

.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.3rem;
    margin-left: 0.15rem;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.45);
}

.nav-admin { color: var(--warning) !important; }
.nav-login { border: 1px solid var(--border-glow); }

.nav-toggle {
    display: none;
    background: none;
    border: 1px solid var(--border);
    color: var(--text);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 1.1rem;
}

/* Container */
.container {
    position: relative;
    z-index: 1;
    max-width: var(--layout-max);
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}

/* Page hero */
.page-hero {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.page-hero-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--accent-rgb), 0.1);
    border: 1px solid var(--border-glow);
    border-radius: var(--radius);
    font-size: 1.8rem;
    color: var(--accent);
}

.page-hero h1 {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--accent);
    letter-spacing: 1px;
}

.page-hero p { color: var(--text-muted); }

/* Cards */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.2);
}

.card-header h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text);
}

.card-header-text {
    min-width: 0;
}

.card-header-desc {
    display: none;
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 400;
    margin-top: 0.15rem;
    text-transform: none;
    letter-spacing: 0;
}

.card-body { padding: 1.25rem; }

.chart-card {
    display: flex;
    flex-direction: column;
    height: 380px;
    max-height: 380px;
    min-height: 0;
    overflow: hidden;
}

.chart-card .card-header {
    flex-shrink: 0;
}

.chart-card-body {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
}

.chart-card-body canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* Stat grid */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* Home: Status → Hostname → Players + Map */
.stat-grid-home {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-grid-home > .stat-card[data-stat="status"],
.stat-grid-home > .stat-card[data-stat="hostname"] {
    grid-column: 1 / -1;
}

.stat-grid-home > .stat-card {
    min-height: 88px;
}

.stat-card.stat-hostname {
    justify-content: center;
    text-align: center;
}

.stat-card.stat-hostname .stat-icon {
    display: none;
}

.stat-card.stat-hostname .stat-body {
    width: 100%;
    text-align: center;
}

.stat-card.stat-hostname .stat-value {
    font-size: 1.1rem;
    line-height: 1.4;
    word-break: break-word;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 0.2s, transform 0.2s;
}

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

.stat-card.online { border-color: var(--accent-dim); box-shadow: 0 0 20px var(--accent-glow); }
.stat-card.offline { border-color: var(--blood); box-shadow: 0 0 15px var(--blood-glow); }
.stat-card.mini { flex-direction: column; text-align: center; gap: 0.25rem; }

.stat-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--accent-rgb), 0.1);
    border-radius: var(--radius);
    font-size: 1.3rem;
    color: var(--accent);
}

.stat-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
}

.stat-value {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text);
}

.stat-map, .stat-host {
    font-size: 1rem;
    word-break: break-word;
}

/* Dashboard */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
    align-items: stretch;
}

.players-card {
    display: flex;
    flex-direction: column;
    height: 380px;
    max-height: 380px;
    min-height: 0;
    overflow: hidden;
}

.players-card .card-header {
    flex-shrink: 0;
}

.players-scroll-box {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0 1rem 1rem;
    padding: 3px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.35), rgba(45, 90, 46, 0.2), rgba(var(--accent-rgb), 0.15));
    box-shadow:
        0 0 0 1px rgba(var(--accent-rgb), 0.12),
        inset 0 0 24px rgba(0, 0, 0, 0.35);
}

.players-scroll {
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 0.65rem 0.85rem 0.85rem;
    box-sizing: border-box;
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(8, 12, 8, 0.98) 0%, rgba(5, 8, 5, 0.98) 100%);
    border: 1px solid rgba(31, 53, 32, 0.9);
    scrollbar-width: thin;
    scrollbar-color: var(--accent-dim) rgba(0, 0, 0, 0.35);
}

.badge-live {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.badge-live i { animation: blink 1.5s infinite; font-size: 0.5rem; }

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.player-count {
    background: var(--accent);
    color: #000;
    font-weight: 700;
    padding: 0.15rem 0.6rem;
    border-radius: 20px;
    font-size: 0.85rem;
}

.players-scroll::-webkit-scrollbar {
    width: 8px;
}

.players-scroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.35);
    border-radius: 4px;
    margin: 4px 0;
}

.players-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--accent-dim), var(--border-glow));
    border-radius: 4px;
    border: 1px solid rgba(var(--accent-rgb), 0.2);
}

.players-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

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

.player-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.65rem;
    margin-bottom: 0.35rem;
    border: 1px solid rgba(31, 53, 32, 0.75);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.22);
    transition: border-color 0.2s, background 0.2s;
}

.player-list li:hover {
    border-color: rgba(var(--accent-rgb), 0.35);
    background: rgba(var(--accent-rgb), 0.05);
}

.player-list li:last-child { margin-bottom: 0; }

.players-scroll .empty-state {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--text-muted);
}

.pl-rank {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--accent-rgb), 0.15);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent);
}

.pl-name {
    flex: 1;
    font-weight: 600;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    overflow: hidden;
}
.pl-name .text-link {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.pl-score { color: var(--text-muted); font-size: 0.85rem; white-space: nowrap; }

.pl-bot {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.05rem 0.35rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.35);
    border-radius: 4px;
    vertical-align: middle;
}

/* Shop — plan cards */
.shop-showcase {
    margin-bottom: 2rem;
    width: 100%;
}

.shop-plans {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
    align-items: stretch;
    width: 100%;
}

.shop-plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: linear-gradient(180deg, var(--bg-card-mid) 0%, var(--bg-card-deep) 100%);
    border: 2px solid var(--border-glow);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(var(--accent-rgb), 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        var(--shadow);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.shop-plan-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow:
        0 0 0 1px rgba(var(--accent-rgb), 0.25),
        0 0 20px rgba(var(--accent-rgb), 0.1),
        var(--shadow);
}

.shop-plan-accent {
    flex-shrink: 0;
    height: 4px;
    background: linear-gradient(90deg, #dc2626, #a855f7, var(--accent));
}

.shop-plan-head {
    flex-shrink: 0;
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.25);
    text-align: center;
}

.shop-plan-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.7rem;
    margin-bottom: 0.65rem;
    background: rgba(var(--accent-rgb), 0.08);
    border: 1px solid var(--badge-color, var(--accent));
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--badge-color, var(--accent));
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.shop-plan-title {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 0.65rem;
    line-height: 1.3;
}

.shop-plan-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.shop-price-amount {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--accent);
}

.shop-price-currency {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
}

.shop-plan-body {
    flex: 1 1 auto;
    padding: 1rem 1.25rem 1.25rem;
    background: rgba(0, 0, 0, 0.2);
}

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

.shop-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.5rem 0.65rem;
    margin-bottom: 0.4rem;
    border: 1px solid rgba(31, 53, 32, 0.8);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.2);
    font-size: 0.9rem;
    line-height: 1.4;
    color: #c8dcc9;
}

.shop-features li:last-child {
    margin-bottom: 0;
}

.shop-features li i {
    flex-shrink: 0;
    margin-top: 0.15rem;
    color: var(--accent);
    font-size: 0.8rem;
}

.shop-features li span {
    flex: 1;
    min-width: 0;
}

.shop-desc-fallback {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.55;
}

.shop-desc-fallback p {
    margin: 0 0 0.5rem;
}

.shop-desc-fallback p:last-child {
    margin-bottom: 0;
}

.shop-desc-empty {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-style: italic;
}

.shop-contact-box {
    margin-top: 1rem;
    padding: 1rem 0.85rem;
    text-align: center;
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(var(--accent-rgb), 0.06) 0%, rgba(0, 0, 0, 0.28) 100%);
    border: 1px solid rgba(var(--accent-rgb), 0.22);
    box-shadow:
        0 0 0 1px rgba(var(--accent-rgb), 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.shop-contact-eyebrow {
    margin: 0 0 0.45rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.shop-contact-eyebrow i {
    color: var(--accent);
    font-size: 0.8rem;
}

.shop-contact-nick {
    margin: 0 0 0.75rem;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: #fff;
    line-height: 1.2;
    word-break: break-word;
}

.shop-contact-channels {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.shop-contact-channel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    border: 1px solid rgba(var(--accent-rgb), 0.28);
    background: rgba(0, 0, 0, 0.35);
    color: var(--accent);
    text-decoration: none;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.shop-contact-channel:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.2);
}

.shop-contact-discord { color: #5865f2; border-color: rgba(88, 101, 242, 0.45); }
.shop-contact-discord:hover { color: #fff; background: rgba(88, 101, 242, 0.35); }

.shop-contact-steam { color: #c7d5e0; border-color: rgba(199, 213, 224, 0.35); }
.shop-contact-steam:hover { color: #fff; background: rgba(102, 192, 244, 0.22); }

.shop-contact-whatsapp,
.shop-contact-wa { color: #25d366; border-color: rgba(37, 211, 102, 0.4); }
.shop-contact-whatsapp:hover,
.shop-contact-wa:hover { color: #fff; background: rgba(37, 211, 102, 0.25); }

.shop-contact-telegram,
.shop-contact-tg { color: #2aabee; border-color: rgba(42, 171, 238, 0.4); }
.shop-contact-telegram:hover,
.shop-contact-tg:hover { color: #fff; background: rgba(42, 171, 238, 0.25); }

.shop-contact-email,
.shop-contact-mail { color: #f59e0b; border-color: rgba(245, 158, 11, 0.4); }

.shop-plan-footer {
    flex-shrink: 0;
    padding: 0.85rem 1.25rem 1rem;
    border-top: 1px solid var(--border);
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
}

/* ── v2: shop ── */

.shop-hero-v2 {
    position: relative;
    margin-bottom: 1.5rem;
    padding: 1.5rem 1.75rem;
    background: linear-gradient(135deg, rgba(15, 22, 16, 0.98) 0%, rgba(10, 15, 10, 0.98) 100%);
    border: 1px solid rgba(var(--accent-rgb), 0.22);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow), 0 0 36px rgba(var(--accent-rgb), 0.05);
    overflow: hidden;
}

.shop-hero-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 12% 55%, rgba(var(--accent-rgb), 0.09) 0%, transparent 55%),
        radial-gradient(ellipse at 88% 0%, rgba(168, 85, 247, 0.07) 0%, transparent 45%),
        radial-gradient(ellipse at 70% 100%, rgba(250, 204, 21, 0.05) 0%, transparent 40%);
    pointer-events: none;
}

.shop-hero-content { position: relative; }

.shop-hero-v2 h1 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 3vw, 2.1rem);
    color: var(--accent);
    margin: 0 0 0.35rem;
}

.shop-hero-v2 p {
    margin: 0 0 1rem;
    color: var(--text-muted);
    max-width: 52ch;
}

.shop-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.shop-chip-count {
    font-weight: 700;
    color: var(--accent);
    border-color: rgba(var(--accent-rgb), 0.4);
    background: rgba(var(--accent-rgb), 0.1);
}

.shop-chip-action {
    text-decoration: none;
    color: #fde68a;
    border-color: rgba(251, 191, 36, 0.4);
    background: rgba(251, 191, 36, 0.1);
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.shop-chip-action:hover {
    color: #fff;
    border-color: rgba(251, 191, 36, 0.55);
    background: rgba(251, 191, 36, 0.18);
}

.shop-showcase-v2 { margin-bottom: 2rem; }

.shop-plans-v2 {
    gap: 1.35rem;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.shop-plan-card-v2 {
    --shop-accent: var(--accent);
    border-radius: var(--radius-lg);
    border-color: color-mix(in srgb, var(--shop-accent) 28%, var(--border-glow));
    background:
        linear-gradient(180deg, rgba(18, 26, 18, 0.98) 0%, rgba(8, 12, 8, 0.98) 100%);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--shop-accent) 12%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 14px 40px rgba(0, 0, 0, 0.35);
}

.shop-plan-card-v2:hover {
    border-color: color-mix(in srgb, var(--shop-accent) 55%, var(--accent));
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--shop-accent) 25%, transparent),
        0 0 28px color-mix(in srgb, var(--shop-accent) 12%, transparent),
        0 18px 44px rgba(0, 0, 0, 0.4);
}

.shop-plan-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--shop-accent) 14%, transparent) 0%, transparent 58%);
    pointer-events: none;
    opacity: 0.85;
}

.shop-plan-card-v2 .shop-plan-accent {
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--shop-accent), transparent);
}

.shop-plan-corner {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid color-mix(in srgb, var(--shop-accent) 55%, transparent);
    pointer-events: none;
    z-index: 2;
}

.shop-plan-corner--tl { top: 0.55rem; left: 0.55rem; border-right: none; border-bottom: none; border-radius: 4px 0 0 0; }
.shop-plan-corner--tr { top: 0.55rem; right: 0.55rem; border-left: none; border-bottom: none; border-radius: 0 4px 0 0; }
.shop-plan-corner--bl { bottom: 0.55rem; left: 0.55rem; border-right: none; border-top: none; border-radius: 0 0 0 4px; }
.shop-plan-corner--br { bottom: 0.55rem; right: 0.55rem; border-left: none; border-top: none; border-radius: 0 0 4px 0; }

.shop-plan-card-v2 .shop-plan-head {
    position: relative;
    z-index: 1;
    padding: 1.35rem 1.35rem 1.1rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.28) 100%);
}

.shop-plan-card-v2 .shop-plan-badge {
    background: color-mix(in srgb, var(--shop-accent) 12%, transparent);
    border-color: color-mix(in srgb, var(--shop-accent) 45%, transparent);
    color: var(--shop-accent);
    box-shadow: 0 0 14px color-mix(in srgb, var(--shop-accent) 10%, transparent);
}

.shop-plan-card-v2 .shop-plan-title {
    font-family: var(--font-display);
    font-size: clamp(1rem, 2vw, 1.2rem);
    letter-spacing: 0.06em;
}

.shop-plan-card-v2 .shop-price-amount {
    color: var(--shop-accent);
    text-shadow: 0 0 24px color-mix(in srgb, var(--shop-accent) 25%, transparent);
}

.shop-plan-card-v2 .shop-plan-body {
    position: relative;
    z-index: 1;
    padding: 1.1rem 1.35rem 1.35rem;
}

.shop-features-v2 li {
    border-color: color-mix(in srgb, var(--shop-accent) 15%, var(--border));
    background: rgba(0, 0, 0, 0.28);
    transition: border-color 0.2s, background 0.2s;
}

.shop-plan-card-v2:hover .shop-features-v2 li {
    border-color: color-mix(in srgb, var(--shop-accent) 22%, var(--border));
}

.shop-features-v2 li i {
    color: var(--shop-accent);
}

.shop-plan-card-v2 .shop-contact-box {
    border-color: color-mix(in srgb, var(--shop-accent) 28%, transparent);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--shop-accent) 8%, transparent) 0%, rgba(0, 0, 0, 0.32) 100%);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--shop-accent) 8%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.shop-plan-card-v2 .shop-contact-eyebrow i {
    color: var(--shop-accent);
}

.shop-plan-card-v2 .shop-contact-channel {
    border-color: color-mix(in srgb, var(--shop-accent) 25%, transparent);
}

.shop-plan-card-v2 .shop-plan-footer {
    position: relative;
    z-index: 1;
    background: rgba(0, 0, 0, 0.35);
}

.shop-empty-v2 {
    border: 1px dashed rgba(var(--accent-rgb), 0.22);
    border-radius: var(--radius-lg);
    padding: 2.5rem 1.5rem;
    background: rgba(0, 0, 0, 0.2);
}

@media (max-width: 900px) {
    .shop-hero-v2 { padding: 1.15rem 1.2rem; }
    .shop-plans-v2 { grid-template-columns: 1fr; }
}

/* ── v2: staff ── */

.staff-hero-v2 {
    position: relative;
    margin-bottom: 1.5rem;
    padding: 1.5rem 1.75rem;
    background: linear-gradient(135deg, rgba(15, 22, 16, 0.98) 0%, rgba(10, 15, 10, 0.98) 100%);
    border: 1px solid rgba(var(--accent-rgb), 0.22);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow), 0 0 36px rgba(var(--accent-rgb), 0.05);
    overflow: hidden;
}

.staff-hero-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 14% 50%, rgba(var(--accent-rgb), 0.08) 0%, transparent 55%),
        radial-gradient(ellipse at 90% 0%, rgba(96, 165, 250, 0.07) 0%, transparent 45%),
        radial-gradient(ellipse at 75% 100%, rgba(168, 85, 247, 0.06) 0%, transparent 42%);
    pointer-events: none;
}

.staff-hero-content { position: relative; }

.staff-hero-v2 h1 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 3vw, 2.1rem);
    color: var(--accent);
    margin: 0 0 0.35rem;
}

.staff-hero-v2 p {
    margin: 0 0 1rem;
    color: var(--text-muted);
    max-width: 52ch;
}

.staff-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.staff-chip-count {
    font-weight: 700;
    color: var(--accent);
    border-color: rgba(var(--accent-rgb), 0.4);
    background: rgba(var(--accent-rgb), 0.1);
}

.staff-chip-action {
    text-decoration: none;
    color: #c4b5fd;
    border-color: rgba(167, 139, 250, 0.4);
    background: rgba(167, 139, 250, 0.1);
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.staff-chip-action:hover {
    color: #fff;
    border-color: rgba(167, 139, 250, 0.55);
    background: rgba(167, 139, 250, 0.18);
}

.staff-grouped-v2 {
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
    margin-bottom: 2rem;
}

.staff-group-card {
    --staff-rank-color: var(--accent);
    position: relative;
    padding: 1rem 1.15rem 1.15rem;
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb, var(--staff-rank-color) 28%, var(--border));
    background: linear-gradient(180deg, rgba(14, 20, 14, 0.96) 0%, rgba(8, 12, 8, 0.98) 100%);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--staff-rank-color) 10%, transparent),
        0 12px 36px rgba(0, 0, 0, 0.32);
    overflow: hidden;
}

.staff-group-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--staff-rank-color) 12%, transparent) 0%, transparent 55%);
    pointer-events: none;
}

.staff-group-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid color-mix(in srgb, var(--staff-rank-color) 18%, var(--border));
}

.staff-group-title-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.staff-group-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.05rem;
    color: var(--staff-rank-color);
    background: color-mix(in srgb, var(--staff-rank-color) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--staff-rank-color) 35%, transparent);
    box-shadow: 0 0 16px color-mix(in srgb, var(--staff-rank-color) 10%, transparent);
}

.staff-group-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1rem, 2vw, 1.2rem);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--staff-rank-color);
}

.staff-group-sub {
    margin: 0.2rem 0 0;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.staff-group-pill {
    flex-shrink: 0;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--staff-rank-color);
    background: color-mix(in srgb, var(--staff-rank-color) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--staff-rank-color) 32%, transparent);
}

.staff-grid-v2 {
    position: relative;
    z-index: 1;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.85rem;
}

.staff-card-v2 {
    position: relative;
    padding: 1rem 1rem 1rem 0.95rem;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--staff-rank-color) 20%, var(--border));
    background: rgba(0, 0, 0, 0.28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.staff-card-v2:hover {
    border-color: color-mix(in srgb, var(--staff-rank-color) 42%, var(--border-glow));
    transform: translateY(-2px);
    box-shadow:
        0 0 18px color-mix(in srgb, var(--staff-rank-color) 10%, transparent),
        0 8px 24px rgba(0, 0, 0, 0.35);
}

.staff-card-corner {
    position: absolute;
    width: 10px;
    height: 10px;
    border: 2px solid color-mix(in srgb, var(--staff-rank-color) 45%, transparent);
    pointer-events: none;
}

.staff-card-corner--tl { top: 0.45rem; left: 0.45rem; border-right: none; border-bottom: none; border-radius: 3px 0 0 0; }
.staff-card-corner--br { bottom: 0.45rem; right: 0.45rem; border-left: none; border-top: none; border-radius: 0 0 3px 0; }

.staff-avatar-v2 {
    width: 52px;
    height: 52px;
    font-size: 1.2rem;
    color: var(--staff-rank-color);
    background: color-mix(in srgb, var(--staff-rank-color) 10%, transparent);
    border-color: color-mix(in srgb, var(--staff-rank-color) 40%, transparent);
    box-shadow: 0 0 14px color-mix(in srgb, var(--staff-rank-color) 12%, transparent);
}

.staff-member-name {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
    line-height: 1.25;
}

.staff-member-link,
.staff-member-name .pl-name-text {
    font-weight: 800;
}

.staff-badge-v2 {
    background: color-mix(in srgb, var(--staff-rank-color) 14%, transparent);
    border-color: color-mix(in srgb, var(--staff-rank-color) 40%, transparent);
    color: var(--staff-rank-color);
}

.staff-empty-v2 {
    border: 1px dashed rgba(var(--accent-rgb), 0.22);
    border-radius: var(--radius-lg);
    padding: 2.5rem 1.5rem;
    background: rgba(0, 0, 0, 0.2);
}

@media (max-width: 900px) {
    .staff-hero-v2 { padding: 1.15rem 1.2rem; }
    .staff-group-head { flex-direction: column; align-items: flex-start; }
    .staff-grid-v2 { grid-template-columns: 1fr; }
}

.shop-sortable { list-style: none; }

.shop-sortable li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 0.5rem;
    cursor: grab;
    flex-wrap: wrap;
}

.shop-sort-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--accent-rgb), 0.1);
    border-radius: var(--radius);
    color: var(--accent);
}

.shop-sort-title { flex: 1; font-weight: 600; min-width: 120px; }
.shop-sort-price { color: var(--warning); font-weight: 700; }

/* Posts */
.page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-bottom: 1.5rem;
}
.page-actions-soft .btn { box-shadow: none; }
.page-actions-soft .btn:hover { box-shadow: none; transform: none; }

.tab-nav-soft .btn-tab-active {
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--accent);
    border: 1px solid var(--border-glow);
    box-shadow: none;
}
.tab-nav-soft .btn-tab-active:hover {
    background: rgba(var(--accent-rgb), 0.18);
    box-shadow: none;
    transform: none;
}

.post-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.post-header {
    padding: 1.25rem 1.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
}

.post-header h2 {
    font-size: 1.4rem;
    color: var(--accent);
    margin-bottom: 0.5rem;
}

.post-meta {
    display: flex;
    gap: 1.25rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.post-meta span { display: flex; align-items: center; gap: 0.35rem; }

.post-content { padding: 1.5rem; }
.post-actions { padding: 0 1.5rem 1.25rem; }

.rich-content img, .rich-content video, .rich-content iframe {
    max-width: 100%;
    border-radius: var(--radius);
    margin: 0.5rem 0;
}

.rich-content a { color: var(--accent); }
.rich-content h1, .rich-content h2, .rich-content h3 { color: var(--accent); margin: 1rem 0 0.5rem; }
.rich-content p { margin-bottom: 0.75rem; }
.rich-content ul, .rich-content ol { margin: 0.5rem 0 0.5rem 1.5rem; }

.post-poll-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-right: 0.5rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.35);
    color: #93c5fd;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    vertical-align: middle;
}

.post-card-poll .post-poll {
    padding: 0 1.5rem 1.5rem;
}

.post-poll {
    margin-top: 0.25rem;
}

.poll-options {
    border: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}

.poll-option {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.poll-option:hover {
    border-color: rgba(var(--accent-rgb), 0.35);
    background: rgba(var(--accent-rgb), 0.05);
}

.poll-option input {
    accent-color: var(--accent);
}

.poll-option-text {
    flex: 1;
    font-weight: 600;
}

.poll-results {
    display: grid;
    gap: 0.75rem;
}

.poll-result-row {
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: rgba(0, 0, 0, 0.18);
}

.poll-result-row.poll-result-chosen {
    border-color: rgba(var(--accent-rgb), 0.4);
    background: rgba(var(--accent-rgb), 0.06);
}

.poll-result-head {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.45rem;
    font-size: 0.92rem;
}

.poll-result-label { font-weight: 600; }
.poll-result-stat { color: var(--text-muted); font-size: 0.85rem; white-space: nowrap; }

.poll-result-bar {
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.poll-result-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.55), rgba(var(--accent-rgb), 0.9));
}

.poll-total-votes {
    margin: 0.25rem 0 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.post-format-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.post-format-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    background: rgba(0, 0, 0, 0.2);
}

.post-format-option input { accent-color: var(--accent); }
.post-format-option span { font-weight: 600; }

.poll-options-editor {
    display: grid;
    gap: 0.55rem;
    margin-bottom: 0.75rem;
}

.poll-option-input-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
}

.form-hint {
    margin: 0 0 0.65rem;
    color: var(--text-muted);
    font-size: 0.86rem;
}

.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;
}

/* Staff */
.staff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
}

.staff-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: all 0.2s;
}

.staff-card:hover {
    border-color: var(--border-glow);
    background: var(--bg-card-hover);
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.staff-avatar {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--accent-rgb), 0.1);
    border: 2px solid var(--border-glow);
    border-radius: 50%;
    font-size: 1.4rem;
    color: var(--accent);
}

.staff-info h3 { font-size: 1.15rem; margin-bottom: 0.4rem; }

.staff-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.75rem;
    background: color-mix(in srgb, var(--badge-color) 20%, transparent);
    border: 1px solid var(--badge-color);
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--badge-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.staff-badge-sm {
    padding: 0.18rem 0.55rem;
    font-size: 0.68rem;
    gap: 0.28rem;
    letter-spacing: 0.35px;
    border-radius: 16px;
}

.staff-badge-sm i {
    font-size: 0.62rem;
}

/* Staff edit */
.staff-edit-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 1.5rem;
}

.staff-sortable { list-style: none; }

.staff-sortable li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 0.5rem;
    cursor: grab;
}

.staff-sortable li.sortable-ghost { opacity: 0.4; background: var(--accent-glow); }

.drag-handle { color: var(--text-muted); cursor: grab; }
.staff-sort-name { flex: 1; font-weight: 600; }

/* Badges admin */
.badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.badge-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
}

.badge-preview {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: color-mix(in srgb, var(--badge-color) 15%, transparent);
    border: 1px solid var(--badge-color);
    border-radius: 20px;
    font-weight: 700;
    color: var(--badge-color);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
}

.badge-form, .badge-edit-form, .inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.badge-actions, .user-actions { display: flex; gap: 0.35rem; }

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.2rem;
    border: none;
    border-radius: var(--radius);
    font-family: var(--font);
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-primary {
    background: var(--accent);
    color: #000;
    box-shadow: 0 0 15px var(--accent-glow);
}

.btn-primary:hover {
    background: #5fff3a;
    box-shadow: 0 0 25px var(--accent-glow);
    transform: translateY(-1px);
}

.btn-outline {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--border-glow);
}

.btn-outline:hover { background: rgba(var(--accent-rgb), 0.1); }

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

.btn-danger:hover { background: #ef4444; }

.btn-sm { padding: 0.35rem 0.75rem; font-size: 0.8rem; }
.btn-block { width: 100%; justify-content: center; }

/* Forms */
.form-group { margin-bottom: 1.25rem; }
.form-group label { display: block; margin-bottom: 0.4rem; color: var(--text-muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; }

.form-control {
    width: 100%;
    padding: 0.65rem 0.9rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font);
    font-size: 1rem;
    transition: border-color 0.2s;
}

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

.form-control-sm { padding: 0.4rem 0.6rem; font-size: 0.85rem; }
.color-input { width: 60px; padding: 0.25rem; height: 38px; cursor: pointer; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.form-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1rem; }

fieldset {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

legend {
    padding: 0 0.5rem;
    color: var(--accent);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
}

.settings-form label { display: block; margin-bottom: 1rem; }

/* Permissions */
.perm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.5rem;
    margin: 1rem 0;
}

.perm-grid.compact { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

.perm-check {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    cursor: pointer;
    color: var(--text-muted);
}

.perm-check input { accent-color: var(--accent); }

.user-row {
    padding: 1rem 0;
    border-bottom: 1px solid var(--border);
}

.user-row:last-child { border-bottom: none; }
.user-info { margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.75rem; }

.badge-super {
    background: var(--blood);
    color: #fff;
    padding: 0.15rem 0.6rem;
    border-radius: 20px;
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: 700;
}

.admin-user-disabled-tag {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning);
    padding: 0.15rem 0.55rem;
    border-radius: 20px;
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: 700;
    border: 1px solid rgba(245, 158, 11, 0.35);
}

/* Admin nav */
.admin-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.admin-nav-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text);
    transition: all 0.2s;
}

.admin-nav-card i { font-size: 2rem; color: var(--accent); }
.admin-nav-card:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: 0 8px 30px var(--accent-glow);
}

.admin-stats { margin-bottom: 1.5rem; }

.breadcrumb {
    margin-bottom: 1.5rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.breadcrumb a { color: var(--accent); text-decoration: none; }

/* Alerts */
.alert {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.1rem;
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.alert-success { background: rgba(34, 197, 94, 0.15); border: 1px solid var(--accent-dim); color: var(--accent); }
.alert-error { background: rgba(220, 38, 38, 0.15); border: 1px solid var(--blood); color: #fca5a5; }

/* Empty states */
.empty-page, .empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
}

.empty-page i, .empty-state i { font-size: 3rem; margin-bottom: 1rem; display: block; opacity: 0.4; }

/* Recent updates */
.recent-updates { margin-top: 2rem; }

.section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.section-title h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.updates-preview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.update-preview-card {
    padding: 1rem 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 0.2s;
}

.update-preview-card:hover { border-color: var(--border-glow); }
.update-preview-card h4 { margin-bottom: 0.35rem; color: var(--text); }

/* Login / Install */
.login-body, .install-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }

.login-wrap, .install-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 480px;
    padding: 1.5rem;
}

.login-card, .install-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow);
}

.login-header, .install-header { text-align: center; margin-bottom: 1.5rem; }
.login-header .brand-mark--lg,
.install-header .brand-mark--lg {
    margin: 0 auto 0.65rem;
}
.login-header h1, .install-header h1 { font-family: var(--font-display); color: var(--accent); font-size: 2rem; }

.login-form label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0 0.9rem;
}

.login-form label i { color: var(--text-muted); }
.login-form input {
    flex: 1;
    background: none;
    border: none;
    padding: 0.75rem 0;
    color: var(--text);
    font-family: var(--font);
    font-size: 1rem;
    outline: none;
}

.back-link {
    display: block;
    text-align: center;
    margin-top: 1.25rem;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
}

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

.install-steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
}

.install-steps span.done { color: var(--accent); }

.req-list { list-style: none; margin-bottom: 1.5rem; }
.req-list li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0;
    font-size: 0.95rem;
}
.req-list li.ok i { color: var(--accent); }
.req-list li.fail i { color: var(--blood); }

.install-form fieldset { margin-bottom: 1rem; }
.install-form label { display: block; margin-bottom: 0.75rem; font-size: 0.85rem; color: var(--text-muted); }
.install-form input { margin-top: 0.3rem; }

.install-success { text-align: center; }
.install-success > i { font-size: 4rem; color: var(--accent); margin-bottom: 1rem; }
.install-success .warn { color: var(--warning); margin: 1rem 0; font-size: 0.9rem; }
.install-success .btn { margin-top: 0.75rem; }

.install-help {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.install-help h3 {
    color: var(--warning);
    margin-bottom: 0.75rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.install-help pre {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin: 0.75rem 0;
    color: var(--accent);
    font-size: 0.85rem;
    overflow-x: auto;
}

.install-help code {
    background: rgba(0, 0, 0, 0.3);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    color: var(--accent);
    font-size: 0.85rem;
}

.install-help p { margin-bottom: 0.5rem; }

.hint { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.75rem; }
.hint a { color: var(--accent); }
.mt-1 { margin-top: 1rem; }

/* Editor */
.editor-wrap {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
}

.quill-editor-shell {
    border: 1px solid #1f3520;
    border-radius: 10px;
    overflow: hidden;
    background: #0a0f0a;
}

.quill-editor-shell .ql-toolbar.ql-snow,
.quill-editor-shell .ql-container.ql-snow {
    border-color: #1f3520;
    background: #0a0f0a;
}

.quill-editor-shell .ql-snow .ql-stroke { stroke: #7a9a7c; }
.quill-editor-shell .ql-snow .ql-fill { fill: #7a9a7c; }
.quill-editor-shell .ql-snow .ql-picker { color: #7a9a7c; }

.quill-editor-shell .ql-toolbar.ql-snow {
    flex-shrink: 0;
    border-bottom: 1px solid #1f3520;
}

.quill-editor-shell .ql-container.ql-snow {
    height: min(60vh, 520px) !important;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-dim) rgba(0, 0, 0, 0.35);
}

.quill-editor-shell .ql-container.ql-snow::-webkit-scrollbar { width: 8px; }
.quill-editor-shell .ql-container.ql-snow::-webkit-scrollbar-thumb {
    background: var(--border-glow);
    border-radius: 4px;
}

.quill-editor-shell .ql-editor {
    min-height: 280px;
    height: auto;
    overflow-y: visible;
    color: #e8f5e9;
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

.perm-grid-scroll {
    max-height: 220px;
    overflow-y: auto;
    padding-right: 0.25rem;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-dim) rgba(0, 0, 0, 0.35);
}

.panel-list-foot,
.news-list-foot,
.bans-table-foot-v2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem 1rem;
    border-top: 1px solid var(--border);
}

.panel-list-foot-stat,
.news-foot-stat,
.bans-foot-stat {
    color: var(--text-muted);
    font-size: 0.88rem;
}

.panel-pagination-v2,
.news-pagination-v2,
.bans-pagination-v2,
.gags-pagination-v2 {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.panel-page-gap,
.news-page-gap,
.bans-page-gap {
    color: var(--text-muted);
    padding: 0 0.15rem;
}

.admin-users-search-clear {
    flex-shrink: 0;
}

.admin-users-page-hint {
    margin: 0 0 0.85rem;
}

.admin-badge-assignments-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.admin-badge-search-wrap {
    margin-left: auto;
}

.logs-stream-card .panel-list-foot {
    flex-shrink: 0;
}

/* Footer */
.footer {
    position: relative;
    z-index: 1;
    border-top: 1px solid var(--border);
    background: var(--bg-footer);
    padding: 2rem 1.5rem;
    margin-top: 2rem;
}

.footer-inner {
    max-width: var(--layout-max);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--text);
    font-size: 1rem;
}

.footer-links { display: flex; gap: 1.25rem; }
.footer-links a {
    color: var(--text-muted);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.2s;
}
.footer-links a:hover { color: var(--accent); }

.footer-copy { width: 100%; text-align: center; color: var(--text-muted); font-size: 0.8rem; margin-top: 0.5rem; }

/* Server logs (AdminCP) */
.logs-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.logs-toolbar {
    padding: 1rem 1.15rem;
}

.logs-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.logs-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    flex: 1 1 320px;
}

.logs-filter {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 160px;
}

.logs-filter span {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    font-weight: 700;
}

.logs-search {
    flex: 1 1 220px;
    min-width: 200px;
}

.logs-status {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.logs-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border);
    color: var(--text-muted);
}

.logs-pill-live {
    color: var(--accent);
    border-color: rgba(var(--accent-rgb), 0.35);
    background: rgba(var(--accent-rgb), 0.08);
}

.logs-pill-live i {
    font-size: 0.45rem;
    animation: blink 1.5s infinite;
}

.logs-stream-card .card-header {
    flex-shrink: 0;
}

.logs-stream-wrap {
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.2);
}

.logs-stream {
    max-height: 560px;
    overflow-y: auto;
    padding: 0.5rem;
    border: 2px solid var(--border-glow);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(6, 10, 6, 0.98) 0%, rgba(4, 7, 4, 0.98) 100%);
    scrollbar-width: thin;
    scrollbar-color: var(--accent-dim) rgba(0, 0, 0, 0.35);
}

.logs-stream::-webkit-scrollbar { width: 8px; }
.logs-stream::-webkit-scrollbar-thumb {
    background: var(--border-glow);
    border-radius: 4px;
}

.log-line {
    padding: 0.7rem 0.8rem;
    margin-bottom: 0.45rem;
    border: 1px solid rgba(31, 53, 32, 0.85);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.28);
    transition: border-color 0.2s, background 0.2s;
}

.log-line:hover {
    border-color: rgba(var(--accent-rgb), 0.3);
    background: rgba(var(--accent-rgb), 0.04);
}

.log-line-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.4rem;
}

.log-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.45rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.log-badge-level {
    background: rgba(var(--accent-rgb), 0.12);
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    color: var(--accent);
}

.log-badge-cat {
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.35);
    color: #c4b5fd;
}

.log-level-error .log-badge-level {
    background: rgba(220, 38, 38, 0.15);
    border-color: rgba(220, 38, 38, 0.45);
    color: #fca5a5;
}

.log-level-warn .log-badge-level {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.4);
    color: #fcd34d;
}

.log-level-admin .log-badge-level {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.4);
    color: #93c5fd;
}

.log-level-zp .log-badge-level {
    background: rgba(220, 38, 38, 0.12);
    border-color: rgba(220, 38, 38, 0.35);
    color: #f87171;
}

.log-source {
    font-size: 0.72rem;
    color: var(--text-muted);
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.log-time {
    margin-left: auto;
    font-size: 0.72rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.log-message {
    margin: 0;
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.82rem;
    line-height: 1.45;
    color: #d7ead8;
    word-break: break-word;
}

.logs-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--text-muted);
}

.logs-empty i {
    font-size: 2rem;
    color: var(--accent);
    opacity: 0.5;
    margin-bottom: 0.75rem;
}

/* Panel audit log (AdminCP) */
.audit-filters {
    align-items: flex-end;
}

.audit-search-btn {
    align-self: flex-end;
    min-height: 42px;
}

.audit-user {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #a7f3d0;
}

.audit-details {
    margin: 0.35rem 0 0;
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--text-muted);
    word-break: break-word;
}

.audit-badge-action.audit-action-create {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.4);
    color: #86efac;
}

.audit-badge-action.audit-action-update {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.4);
    color: #93c5fd;
}

.audit-badge-action.audit-action-delete {
    background: rgba(220, 38, 38, 0.12);
    border-color: rgba(220, 38, 38, 0.4);
    color: #fca5a5;
}

.audit-badge-action.audit-action-warn {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.4);
    color: #fcd34d;
}

.audit-badge-action.audit-action-info {
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.35);
    color: #cbd5e1;
}

/* Server admins (AdminCP) */
.admins-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.admins-status-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    padding: 1rem 1.15rem;
}

.admins-status-label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
    font-weight: 700;
}

.admins-status-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
}

.admins-status-value i {
    font-size: 0.45rem;
    margin-right: 0.25rem;
}

.admins-status-ok { color: var(--accent); }
.admins-status-pending { color: #fbbf24; }

.admins-form .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.admins-table-wrap {
    overflow-x: auto;
    padding: 0 1rem;
}

.admins-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
}

.admins-table th {
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    padding: 0.65rem 0.5rem;
    border-bottom: 1px solid var(--border);
}

.admins-table td {
    padding: 0.5rem;
    vertical-align: middle;
}

.admins-table tbody tr {
    border-bottom: 1px solid rgba(31, 53, 32, 0.6);
}

.admins-table tbody tr:hover {
    background: rgba(var(--accent-rgb), 0.03);
}

.admins-row-actions {
    width: 48px;
    text-align: center;
}

.admins-hint {
    padding: 0 1.15rem 0.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.admins-hint p { margin: 0 0 0.35rem; }
.admins-hint code {
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.08);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
}

.admins-form-actions {
    padding: 0 1.15rem 0.75rem;
}

.admins-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0 1.15rem 1.15rem;
}

.admins-discard-form {
    margin: 0;
    padding: 0;
}

.admins-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.admins-row-unmatched select {
    border-color: #fbbf24;
}

.admins-row-unmatched select:focus {
    box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.25);
}

.admin-rank-form {
    display: grid;
    grid-template-columns: 1.2fr 2fr auto auto;
    gap: 0.75rem;
    align-items: center;
}

.admin-rank-edit-grid {
    display: grid;
    grid-template-columns: 1.2fr 2fr auto auto;
    gap: 0.75rem;
    align-items: center;
}

.admin-rank-row-wrap {
    padding: 0.65rem 1rem !important;
}

.admin-rank-edit-actions {
    display: flex;
    gap: 0.35rem;
}

@media (max-width: 768px) {
    .admin-rank-form,
    .admin-rank-edit-grid {
        grid-template-columns: 1fr;
    }
}

.bans-panel {
    width: 100%;
}

.bans-card {
    overflow: hidden;
}

.bans-card-header {
    flex-wrap: wrap;
    gap: 0.75rem;
}

.bans-header-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.bans-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: rgba(var(--accent-rgb), 0.08);
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.bans-toolbar-inline {
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.15);
}

.bans-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
}

.bans-filter {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.bans-filter span {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    font-weight: 700;
}

.bans-search {
    flex: 1 1 200px;
    min-width: 180px;
}

.bans-table-wrap {
    overflow-x: auto;
    width: 100%;
    -webkit-overflow-scrolling: touch;
}

.bans-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

.bans-table-admin {
    min-width: 1060px;
}

.bans-table:not(.bans-table-admin) {
    min-width: 760px;
}

.bans-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    text-align: left;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    font-weight: 700;
    padding: 0.8rem 0.75rem;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid rgba(31, 53, 32, 0.5);
    background: #0d120d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bans-table thead th:last-child {
    border-right: none;
}

.bans-table tbody td {
    padding: 0.75rem;
    vertical-align: middle;
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(31, 53, 32, 0.55);
    border-right: 1px solid rgba(31, 53, 32, 0.35);
    overflow: hidden;
    max-width: 0;
}

.bans-table tbody td:last-child {
    border-right: none;
}

.bans-table tbody tr:hover td {
    background: rgba(var(--accent-rgb), 0.04);
}

.bans-table tbody tr:last-child td {
    border-bottom: none;
}

/* Fixed column widths (px) — never grow with content */
.bans-col-num { width: 42px; }
.bans-col-player { width: 200px; }
.bans-col-admin { width: 120px; }
.bans-col-date { width: 88px; }
.bans-col-reason { width: 100px; }
.bans-col-expires { width: 110px; }
.bans-col-steam { width: 148px; }
.bans-col-ip { width: 108px; }
.bans-col-action { width: 96px; }

.bans-table:not(.bans-table-admin) .bans-col-player { width: 240px; }
.bans-table:not(.bans-table-admin) .bans-col-admin { width: 140px; }
.bans-table:not(.bans-table-admin) .bans-col-expires { width: 120px; }

.bans-cell-clip {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bans-th-num,
.bans-td-num {
    color: var(--text-muted);
    font-weight: 600;
}

.bans-td-num {
    max-width: 42px;
}

.bans-td-player {
    font-weight: 600;
}

.bans-td-admin,
.bans-td-date,
.bans-td-mono {
    color: var(--text-muted);
}

.bans-td-date .bans-cell-clip {
    font-size: 0.84rem;
}

.bans-td-mono .bans-cell-clip {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78rem;
}

.bans-td-reason {
    max-width: 100px;
}

.bans-th-action,
.bans-td-action {
    text-align: center;
    max-width: 96px;
    overflow: visible;
}

.bans-reason-badge {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    background: rgba(239, 68, 68, 0.16);
    border: 1px solid rgba(239, 68, 68, 0.28);
    color: #f87171;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bans-unban-form {
    margin: 0;
}

.bans-td-action .btn {
    white-space: nowrap;
}

.bans-pending-label {
    font-size: 0.8rem;
    color: #fbbf24;
}

.bans-action-muted {
    color: var(--text-muted);
}

.bans-table-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.18);
    color: var(--text-muted);
    font-size: 0.86rem;
}

.bans-foot-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.bans-pagination {
    display: flex;
    gap: 0.35rem;
}

@media (max-width: 768px) {
    .bans-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .bans-search {
        min-width: 0;
    }
}

/* Gags table (mirrors bans layout) */
.gags-panel { width: 100%; }
.gags-card { overflow: hidden; }
.gags-card-header { flex-wrap: wrap; gap: 0.75rem; }
.gags-header-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.gags-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: rgba(var(--accent-rgb), 0.08);
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
}
.gags-toolbar-inline {
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.15);
}
.gags-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
}
.gags-filter {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.gags-filter span {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    font-weight: 700;
}
.gags-search { flex: 1 1 200px; min-width: 180px; }
.gags-table-wrap {
    overflow-x: auto;
    width: 100%;
    -webkit-overflow-scrolling: touch;
}
.gags-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}
.gags-table-admin { min-width: 920px; }
.gags-table:not(.gags-table-admin) { min-width: 700px; }
.gags-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    text-align: left;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    font-weight: 700;
    padding: 0.8rem 0.75rem;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid rgba(31, 53, 32, 0.5);
    background: #0d120d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gags-table thead th:last-child { border-right: none; }
.gags-table tbody td {
    padding: 0.75rem;
    vertical-align: middle;
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(31, 53, 32, 0.55);
    border-right: 1px solid rgba(31, 53, 32, 0.35);
    overflow: hidden;
    max-width: 0;
}
.gags-table tbody td:last-child { border-right: none; }
.gags-table tbody tr:hover td { background: rgba(var(--accent-rgb), 0.04); }
.gags-table tbody tr:last-child td { border-bottom: none; }

.gags-col-num { width: 42px; }
.gags-col-player { width: 200px; }
.gags-col-admin { width: 120px; }
.gags-col-date { width: 88px; }
.gags-col-type { width: 130px; }
.gags-col-expires { width: 110px; }
.gags-col-steam { width: 148px; }
.gags-col-action { width: 96px; }

.gags-table:not(.gags-table-admin) .gags-col-player { width: 240px; }
.gags-table:not(.gags-table-admin) .gags-col-admin { width: 140px; }
.gags-table:not(.gags-table-admin) .gags-col-expires { width: 120px; }

.gags-cell-clip {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gags-th-num, .gags-td-num { color: var(--text-muted); font-weight: 600; }
.gags-td-num { max-width: 42px; }
.gags-td-player { font-weight: 600; }
.gags-td-admin, .gags-td-date, .gags-td-mono { color: var(--text-muted); }
.gags-td-date .gags-cell-clip { font-size: 0.84rem; }
.gags-td-mono .gags-cell-clip {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78rem;
}
.gags-td-type { max-width: 130px; overflow: visible; }
.gags-type-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    max-width: 100%;
}
.gags-type-badge {
    display: inline-block;
    max-width: 100%;
    padding: 0.22rem 0.45rem;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.16);
    border: 1px solid rgba(59, 130, 246, 0.28);
    color: #93c5fd;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.gags-th-action, .gags-td-action {
    text-align: center;
    max-width: 96px;
    overflow: visible;
}
.gags-ungag-form { margin: 0; }
.gags-td-action .btn { white-space: nowrap; }
.gags-pending-label { font-size: 0.8rem; color: #fbbf24; }
.gags-action-muted { color: var(--text-muted); }
.gags-table-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.18);
    color: var(--text-muted);
    font-size: 0.86rem;
}
.gags-foot-stat { display: inline-flex; align-items: center; gap: 0.4rem; }
.gags-pagination { display: flex; gap: 0.35rem; }

@media (max-width: 768px) {
    .gags-filters {
        flex-direction: column;
        align-items: stretch;
    }
    .gags-search { min-width: 0; }
}

/* Responsive */
@media (max-width: 900px) {
    .dashboard-grid, .staff-edit-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .logs-stream { max-height: 420px; }
}

@media (max-width: 520px) {
    .stat-grid-home { grid-template-columns: 1fr; }
    .shop-plans { grid-template-columns: 1fr; }
    .chart-card,
    .players-card,
    .chat-card,
    .top15-card { height: 400px; max-height: 400px; }
}

@media (max-width: 1100px) {
    .nav-links a i { display: none; }
    .nav-links a { padding: 0.48rem 0.62rem; font-size: 0.84rem; }
}

@media (max-width: 768px) {
    .nav-toggle { display: block; }
    .nav-brand { max-width: none; }
    .navbar {
        flex-wrap: wrap;
        min-height: 3.35rem;
        padding: 0.6rem 1rem;
    }
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex: none;
        flex-direction: column;
        flex-wrap: wrap;
        overflow: visible;
        background: var(--bg-card);
        border-bottom: 1px solid var(--border);
        padding: 0.5rem;
    }
    .nav-links.open { display: flex; }
    .nav-links a i { display: inline-block; }
    .nav-links a { font-size: 0.88rem; padding: 0.55rem 0.85rem; }
    .brand-tag { display: none; }
}

/* v2 — chat, top15, staff groups, profile */
.chat-card {
    display: flex;
    flex-direction: column;
    height: 460px;
    max-height: 460px;
    min-height: 0;
    overflow: hidden;
}

.chat-card .card-header {
    flex-shrink: 0;
}

.chat-card .players-scroll-box {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0 1rem;
}

.chat-card .chat-messages-scroll {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.chat-card-footer {
    flex-shrink: 0;
    padding: 0.75rem 1rem 1rem;
}

.chat-msg { font-size: 1rem; color: var(--text-muted); }
.chat-msg strong { color: var(--accent); }
.chat-msg--roulette {
    padding: 0.5rem 0.65rem;
    margin-bottom: 0.35rem;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(168, 85, 247, 0.08));
    border: 1px solid rgba(var(--accent-rgb), 0.25);
}
.chat-msg--roulette .chat-roulette-win { color: var(--text); }
.chat-msg--roulette .chat-roulette-win strong { color: #fbbf24; }
.chat-msg--roulette .chat-roulette-win em {
    color: var(--accent);
    font-style: normal;
    font-weight: 700;
}
.chat-msg--roulette .chat-roulette-win--prestige em { color: #fbbf24; }
.chat-msg--roulette .chat-roulette-win--item em { color: #c084fc; }
.chat-msg:not(.chat-msg-v2) .chat-time {
    opacity: 0.6;
    font-size: 0.8rem;
    margin-left: 0.5rem;
}
.chat-form { display: flex; gap: 0.5rem; }

.chat-msg-text .chat-link {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(125, 211, 252, 0.45);
    word-break: break-word;
}

.chat-msg-text .chat-link--external {
    color: #7dd3fc;
}

.chat-msg-text .chat-link--external:hover {
    color: #38bdf8;
    text-decoration-color: rgba(56, 189, 248, 0.65);
}

.chat-msg-text .chat-link--internal {
    color: #86efac;
    text-decoration-color: rgba(134, 239, 172, 0.4);
}

.chat-msg-text .chat-link--internal:hover {
    color: var(--accent);
    text-decoration-color: rgba(var(--accent-rgb), 0.55);
}

.chat-msg-text .chat-link--chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.65rem;
    margin: 0 0.08rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 1.35;
    text-decoration: none;
    text-transform: uppercase;
    vertical-align: middle;
    color: #bbf7d0;
    border: 1px solid rgba(var(--accent-rgb), 0.38);
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.14) 0%, rgba(0, 0, 0, 0.28) 100%);
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.08);
    transition: color 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.2s;
}

.chat-msg-text .chat-link--chip:hover {
    color: #fff;
    border-color: rgba(var(--accent-rgb), 0.55);
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.22) 0%, rgba(0, 0, 0, 0.24) 100%);
    box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.16);
    transform: translateY(-1px);
    text-decoration: none;
}

.chat-msg-text .chat-link--page-roulette {
    color: #fde68a;
    border-color: rgba(250, 204, 21, 0.42);
    background: linear-gradient(135deg, rgba(250, 204, 21, 0.16) 0%, rgba(0, 0, 0, 0.28) 100%);
    box-shadow: 0 0 12px rgba(250, 204, 21, 0.1);
}

.chat-msg-text .chat-link--page-roulette:hover {
    color: #fff;
    border-color: rgba(250, 204, 21, 0.58);
    box-shadow: 0 0 16px rgba(250, 204, 21, 0.18);
}

.chat-msg-text .chat-link--page-shop,
.chat-msg-text .chat-link--page-shop-item {
    color: #e9d5ff;
    border-color: rgba(192, 132, 252, 0.4);
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.14) 0%, rgba(0, 0, 0, 0.28) 100%);
}

.chat-msg-text .chat-link--page-news,
.chat-msg-text .chat-link--page-news-view {
    color: #93c5fd;
    border-color: rgba(96, 165, 250, 0.38);
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.12) 0%, rgba(0, 0, 0, 0.28) 100%);
}

.chat-msg-text .chat-link--page-profile {
    color: #86efac;
    letter-spacing: 0.06em;
}

.top15-card {
    display: flex;
    flex-direction: column;
    height: 460px;
    max-height: 460px;
    min-height: 0;
    overflow: hidden;
}

.top15-card .card-header {
    flex-shrink: 0;
}

.top15-card .players-scroll-box {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0 1rem 1rem;
}

.top15-list { list-style: none; padding: 0; margin: 0; }
.top15-list li {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding: 0.55rem 0.65rem;
    margin-bottom: 0.35rem;
    border: 1px solid rgba(31, 53, 32, 0.75);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.22);
    transition: border-color 0.2s, background 0.2s;
}
.top15-list li:hover {
    border-color: rgba(var(--accent-rgb), 0.35);
    background: rgba(var(--accent-rgb), 0.05);
}
.top15-list li:last-child { margin-bottom: 0; }
.top-rank {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--accent-rgb), 0.15);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent);
    flex-shrink: 0;
}
.top15-list .text-link,
.top15-list .top-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.top-stat { color: var(--text-muted); font-size: 0.85rem; white-space: nowrap; }
.staff-group { margin-bottom: 1.5rem; }
.staff-group-title { display: flex; align-items: center; gap: 0.5rem; color: var(--badge-color, var(--accent)); margin-bottom: 0.5rem; }
.staff-group-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.player-badges { display: inline-flex; gap: 0.2rem; margin-left: 0.35rem; }
.player-badge { color: var(--badge-color, var(--accent)); font-size: 0.85rem; }
.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.profile-full { grid-column: 1 / -1; }
.post-excerpt { color: var(--text-muted); margin: 0.5rem 0 1rem; }
.pagination { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 1rem; }
.search-form { margin-bottom: 1rem; }
.search-form-inner { display: flex; gap: 0.5rem; }
.search-results { display: flex; flex-direction: column; gap: 1rem; }
.search-player-card {
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.search-player-card:hover { border-color: var(--border-glow); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); }
.search-player-link {
    display: block;
    color: inherit;
    text-decoration: none;
    padding: 1.25rem;
}
.search-player-hero {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.search-player-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.1);
    border: 2px solid var(--border-glow);
    flex-shrink: 0;
}
.search-player-name { margin: 0 0 0.35rem; font-size: 1.35rem; }
.search-player-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.25rem;
}
.search-player-stats { margin: 0; }
.chat-author { display: inline-flex; align-items: center; gap: 0.3rem; }
.chat-msg .player-badges-sm { vertical-align: middle; }
.tab-nav { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 1rem; }

/* Reset default browser link colors inside main content */
main.container a:not([class*="btn"]):not(.nav-admin):not(.nav-login) {
    color: inherit;
    text-decoration: none;
}
main.container a:not([class*="btn"]):hover {
    color: var(--accent);
}
main.container a:visited {
    color: inherit;
}
main.container .update-preview-card a:visited,
main.container .top15-list a:visited,
main.container .player-list a:visited {
    color: inherit;
}

main.container .chat-msg-text .chat-link {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-word;
}

main.container .chat-msg-text .chat-link--external {
    color: #7dd3fc;
    text-decoration-color: rgba(125, 211, 252, 0.45);
}

main.container .chat-msg-text .chat-link--external:hover {
    color: #38bdf8;
}

main.container .chat-msg-text .chat-link--internal:not(.chat-link--chip) {
    color: #86efac;
    text-decoration-color: rgba(134, 239, 172, 0.4);
}

main.container .chat-msg-text .chat-link--internal:not(.chat-link--chip):hover {
    color: var(--accent);
}

main.container .chat-msg-text .chat-link--chip {
    text-decoration: none;
}

.text-link,
.update-preview-card h4 a,
.top15-list a,
.top-name,
.player-list .pl-name a,
.player-list .pl-name-text,
.search-player-name-link,
.bans-player-link,
.gags-player-link,
.staff-info h3 a,
.staff-member-link,
.staff-card a,
.search-result-card,
.request-sidebar .request-player-name a,
.request-list-link {
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
}
.text-link:hover,
.update-preview-card h4 a:hover,
.top15-list a:hover,
.player-list .pl-name a:hover,
.search-player-name-link:hover,
.bans-player-link:hover,
.gags-player-link:hover,
.staff-info h3 a:hover,
.staff-member-link:hover,
.staff-card a:hover,
.request-sidebar .request-player-name a:hover,
.request-list-link:hover {
    color: var(--accent);
}

/* Chat nicknames: accent when no badge, badge color when badged (inline style) */
main.container .chat-author .text-link:not(.chat-author-name--badged),
main.container .chat-author .text-link:not(.chat-author-name--badged):visited {
    color: var(--accent);
}
main.container .chat-author .text-link:not(.chat-author-name--badged):hover,
main.container .chat-author .chat-author-name--badged:hover {
    filter: brightness(1.12);
}
.top-name, .pl-name-text, .chat-author .text-link { font-weight: 600; }

/* News feed accordion */
.news-feed { display: flex; flex-direction: column; gap: 0.75rem; }
.news-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color 0.25s, box-shadow 0.25s;
    box-shadow: var(--shadow);
}
.news-card:hover { border-color: rgba(var(--accent-rgb), 0.25); }
.news-card.is-open {
    border-color: var(--border-glow);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(var(--accent-rgb), 0.08);
}
.news-card-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}
.news-card-head:hover { background: rgba(var(--accent-rgb), 0.04); }
.news-card-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--accent-rgb), 0.1);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    border-radius: 8px;
    color: var(--accent);
    font-size: 1.1rem;
}
.news-card-summary { flex: 1; min-width: 0; }
.news-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.35rem;
    line-height: 1.3;
}
.news-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.news-card-chevron {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.08);
    border-radius: 6px;
    transition: transform 0.3s ease, background 0.2s;
}
.news-card.is-open .news-card-chevron { transform: rotate(180deg); background: rgba(var(--accent-rgb), 0.15); }
.news-card-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
}
.news-card.is-open .news-card-body { grid-template-rows: 1fr; }
.news-card-body-inner {
    overflow: hidden;
    padding: 0 1.25rem;
    border-top: 1px solid transparent;
    transition: padding 0.35s ease, border-color 0.35s ease;
}
.news-card.is-open .news-card-body-inner {
    padding: 1rem 1.25rem 1.25rem;
    border-top-color: var(--border);
    max-height: min(65vh, 560px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-dim) rgba(0, 0, 0, 0.35);
}
.news-card-body-inner .post-content { margin-top: 0.25rem; }

/* Profile page */
.profile-actions { display: flex; justify-content: flex-end; margin-bottom: 1rem; }
.profile-page { display: flex; flex-direction: column; gap: 1rem; }
.profile-hero {
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(17, 26, 17, 0.95), rgba(var(--accent-rgb), 0.06));
    border-color: var(--border-glow);
}
.profile-hero-main { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.profile-avatar-ring {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.1);
    border: 2px solid var(--border-glow);
    box-shadow: 0 0 24px rgba(var(--accent-rgb), 0.15);
}
.profile-nickname { font-size: 1.6rem; font-weight: 700; margin: 0 0 0.5rem; }
.profile-steamid { color: var(--text-muted); font-size: 0.9rem; margin: 0.35rem 0 0; }
.profile-last-seen { margin-top: 1rem; color: var(--text-muted); font-size: 0.9rem; }
.profile-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.35rem;
    max-width: 100%;
}
.profile-badge-large {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--badge-color, var(--accent)) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--badge-color, var(--accent)) 45%, transparent);
    color: var(--badge-color, var(--accent));
}
.profile-badge-large-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.25);
    font-size: 1.1rem;
}
.profile-badge-large-name { font-weight: 700; font-size: 1rem; }
.profile-badge-more { margin-top: 0.5rem; }
.profile-stats-layer {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
}
.profile-stat-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.profile-stat-card .card-header {
    flex-shrink: 0;
}
.profile-stat-card .card-body {
    flex: 1 1 auto;
    height: 18.5rem;
    min-height: 18.5rem;
    max-height: 18.5rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.profile-stat-card .card-body {
    padding-bottom: 1rem;
}
.profile-stat-card .players-scroll-box {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
}
.profile-stat-card .profile-stat-scroll,
.profile-stat-card .profile-prestige-scroll {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
}
.profile-last-seen-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.75rem;
}
.profile-last-seen {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-muted);
}
.profile-last-seen--panel i { color: #60a5fa; }
.profile-last-seen--server i { color: var(--accent); }
.profile-dl { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; }
.profile-dl-row {
    display: grid;
    grid-template-columns: minmax(120px, 42%) 1fr;
    gap: 1rem;
    align-items: center;
    padding: 0.65rem 0.85rem;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(31, 53, 32, 0.85);
    border-radius: 8px;
}
.profile-dl-row dt {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.92rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.profile-dl-row dd {
    margin: 0;
    text-align: right;
    font-weight: 700;
    color: var(--text);
    word-break: break-word;
}
.profile-dl-highlight dd { color: var(--accent); font-size: 1.2rem; }
.profile-prestige-list { list-style: none; padding: 0; margin: 0; }
.profile-prestige-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.65rem;
    align-items: center;
    padding: 0.55rem 0.65rem;
    margin-bottom: 0.35rem;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(31, 53, 32, 0.75);
    border-radius: 6px;
    transition: border-color 0.2s, background 0.2s;
}
.profile-prestige-item:hover {
    border-color: rgba(var(--accent-rgb), 0.35);
    background: rgba(var(--accent-rgb), 0.05);
}
.profile-prestige-item:last-child { margin-bottom: 0; }
.profile-prestige-icon { color: var(--accent); }
.profile-prestige-name { font-weight: 600; }
.profile-prestige-expire { color: var(--text-muted); font-size: 0.85rem; white-space: nowrap; }
.profile-prestige-meta {
    display: block;
    margin-top: 0.15rem;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 500;
}
.player-badges-sm { display: inline-flex; gap: 0.2rem; flex-shrink: 0; }
.player-badges-sm .player-badge { font-size: 0.8rem; }

/* Requests forum layout */
.request-forum {
    display: grid;
    grid-template-columns: minmax(220px, 280px) 1fr;
    gap: 1rem;
    align-items: start;
}
.request-sidebar .request-player-name { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem; }
.request-thread { display: flex; flex-direction: column; gap: 1rem; }
.request-post .request-message { margin-top: 0.75rem; line-height: 1.6; }
.request-extra-fields p { margin-bottom: 0.75rem; }
.request-staff-reply { border-color: rgba(var(--accent-rgb), 0.35); }
.request-staff-reply .card-header { display: flex; justify-content: space-between; align-items: center; }
.request-reply-date { font-size: 0.85rem; color: var(--text-muted); }
.request-list { list-style: none; padding: 0; margin: 0; }
.request-list li { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid var(--border); }
.request-list-link { color: inherit; text-decoration: none; }
.request-list-link:hover { color: var(--accent); }
.request-has-reply { font-size: 0.85rem; color: var(--accent); }
.badge-open { background: rgba(234, 179, 8, 0.2); color: #facc15; }
.badge-in_progress { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
.badge-closed { background: rgba(34, 197, 94, 0.2); color: #4ade80; }

/* Staff grouped + cards */
.staff-group { margin-bottom: 2rem; }
.staff-group .staff-grid { margin-top: 0.75rem; }

/* Roulette case-opening (CS:GO-style tiles, zombie theme) */
.roulette-body { text-align: center; }
.roulette-spins-box {
    max-width: 220px;
    margin: 0 auto 1.35rem;
    padding: 0.9rem 1rem;
    text-align: center;
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(var(--accent-rgb), 0.06) 0%, rgba(0, 0, 0, 0.28) 100%);
    border: 1px solid rgba(var(--accent-rgb), 0.22);
    box-shadow:
        0 0 0 1px rgba(var(--accent-rgb), 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.roulette-spins-eyebrow {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}
.roulette-spins-eyebrow i { color: var(--accent); font-size: 0.8rem; }
.roulette-spins-count {
    margin: 0;
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1;
    color: var(--accent);
    text-shadow: 0 0 20px rgba(var(--accent-rgb), 0.35);
}
.roulette-spins-label {
    margin: 0.35rem 0 0;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.roulette-machine {
    max-width: 820px;
    margin: 0 auto 1.5rem;
    transition: filter 0.3s;
}
.roulette-machine.is-active { filter: brightness(1.06); }
.roulette-machine.is-active .roulette-item-shine {
    animation: roulette-shine 0.9s linear infinite;
}
.roulette-machine.is-won .roulette-viewport {
    box-shadow:
        inset 0 0 0 1px rgba(var(--accent-rgb), 0.2),
        0 0 40px rgba(var(--accent-rgb), 0.28);
}
.roulette-machine.is-won .roulette-viewport::before,
.roulette-machine.is-won .roulette-viewport::after {
    width: 140px;
    opacity: 0.92;
}
.roulette-machine.is-won .roulette-viewport .roulette-strip::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 200px;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(ellipse at 50% 50%, rgba(var(--accent-rgb), 0.14) 0%, transparent 72%);
}
.roulette-machine.is-won .roulette-pointer {
    width: 4px;
    box-shadow:
        0 0 18px rgba(var(--accent-rgb), 0.85),
        0 0 48px rgba(var(--accent-rgb), 0.35);
}
.roulette-item {
    position: relative;
    flex: 0 0 168px;
    height: 100%;
    padding: 0.5rem 0;
    box-sizing: border-box;
    transition: opacity 0.45s ease, filter 0.45s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.roulette-viewport {
    position: relative;
    height: 228px;
    overflow: hidden;
    border: 1px solid rgba(var(--accent-rgb), 0.22);
    border-radius: 8px;
    background: #080c08;
    box-shadow: inset 0 0 48px rgba(0, 0, 0, 0.85);
}
.roulette-viewport::before,
.roulette-viewport::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 130px;
    z-index: 4;
    pointer-events: none;
}
.roulette-viewport::before {
    left: 0;
    background: linear-gradient(90deg, rgba(8, 12, 8, 0.99) 0%, rgba(8, 12, 8, 0.55) 45%, transparent 100%);
}
.roulette-viewport::after {
    right: 0;
    background: linear-gradient(270deg, rgba(8, 12, 8, 0.99) 0%, rgba(8, 12, 8, 0.55) 45%, transparent 100%);
}
.roulette-strip {
    position: relative;
    display: flex;
    gap: 4px;
    height: 100%;
    align-items: stretch;
    padding: 0 2px;
    will-change: transform;
}
.roulette-strip.is-spinning { transition: none; will-change: transform; }
.roulette-strip.is-landing {
    transition: transform 4.6s cubic-bezier(0.08, 0.82, 0.12, 1);
    will-change: transform;
}
.roulette-item-frame {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: linear-gradient(180deg, #141c14 0%, #0a0e0a 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    overflow: hidden;
}
.roulette-item--prestige .roulette-item-frame {
    border-color: rgba(234, 179, 8, 0.28);
    background: linear-gradient(180deg, #1c1810 0%, #0e0c08 100%);
}
.roulette-item--item .roulette-item-frame,
.roulette-item--pet .roulette-item-frame,
.roulette-item--knife .roulette-item-frame,
.roulette-item--class-human .roulette-item-frame,
.roulette-item--class-zombie .roulette-item-frame {
    border-color: rgba(192, 132, 252, 0.28);
    background: linear-gradient(180deg, #18121e 0%, #0c080e 100%);
}
.roulette-item-art {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 80%, rgba(var(--accent-rgb), 0.06), transparent 65%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
}
.roulette-item--prestige .roulette-item-art {
    background:
        radial-gradient(ellipse at 50% 80%, rgba(250, 204, 21, 0.08), transparent 65%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
}
.roulette-item--item .roulette-item-art {
    background:
        radial-gradient(ellipse at 50% 80%, rgba(192, 132, 252, 0.08), transparent 65%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
}
.roulette-item-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.18) 50%, transparent 62%);
    opacity: 0;
    transform: translateX(-120%);
    pointer-events: none;
}
.roulette-item-icon {
    position: relative;
    z-index: 2;
    font-size: 2.35rem;
    color: var(--accent);
    filter: drop-shadow(0 2px 8px rgba(var(--accent-rgb), 0.35));
}
.roulette-item--prestige .roulette-item-icon {
    color: #facc15;
    filter: drop-shadow(0 2px 10px rgba(250, 204, 21, 0.45));
}
.roulette-item--item .roulette-item-icon {
    color: #c084fc;
    filter: drop-shadow(0 2px 10px rgba(192, 132, 252, 0.45));
}
.roulette-item-body {
    position: relative;
    z-index: 3;
    flex-shrink: 0;
    text-align: center;
    width: 100%;
    min-width: 0;
    padding: 0.45rem 0.4rem 0.5rem;
    background: rgba(0, 0, 0, 0.35);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.roulette-item-amount {
    display: block;
    font-weight: 700;
    font-size: 0.82rem;
    line-height: 1.25;
    color: rgba(232, 245, 233, 0.92);
    letter-spacing: 0.02em;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.roulette-item-rarity-bar {
    display: block;
    flex-shrink: 0;
    height: 4px;
    width: 100%;
    background: var(--accent);
}
.roulette-item--tier-uncommon .roulette-item-rarity-bar { background: #60a5fa; }
.roulette-item--tier-rare .roulette-item-rarity-bar { background: #fbbf24; }
.roulette-item--tier-ultra .roulette-item-rarity-bar { background: #c084fc; }
.roulette-item-glow {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 50% 40%, rgba(var(--accent-rgb), 0.14), transparent 70%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}
.roulette-item--prestige .roulette-item-glow {
    background: radial-gradient(circle at 50% 40%, rgba(250, 204, 21, 0.18), transparent 70%);
}
.roulette-item--item .roulette-item-glow {
    background: radial-gradient(circle at 50% 40%, rgba(192, 132, 252, 0.18), transparent 70%);
}
.roulette-item.is-winner .roulette-item-glow { opacity: 1; }
.roulette-item.is-winner .roulette-item-rarity-bar {
    animation: roulette-bar-pulse 1.4s ease-in-out infinite;
}
.roulette-machine.is-won .roulette-item:not(.is-winner) {
    opacity: 0.32;
    filter: brightness(0.45) saturate(0.6);
}
.roulette-machine.is-won .roulette-item.is-winner {
    z-index: 8;
    opacity: 1;
    filter: none;
}
.roulette-machine.is-won .roulette-item.is-winner .roulette-item-frame {
    border-width: 2px;
    border-color: var(--accent);
    animation: roulette-win-reveal 1.5s ease-in-out infinite;
    box-shadow:
        0 0 28px rgba(var(--accent-rgb), 0.4),
        0 0 48px rgba(var(--accent-rgb), 0.14),
        inset 0 0 22px rgba(var(--accent-rgb), 0.1);
}
.roulette-machine.is-won .roulette-item.is-winner .roulette-item-art {
    background:
        radial-gradient(ellipse at 50% 70%, rgba(var(--accent-rgb), 0.22), transparent 68%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent);
}
.roulette-machine.is-won .roulette-item--prestige.is-winner .roulette-item-frame {
    border-color: #facc15;
    box-shadow:
        0 0 36px rgba(250, 204, 21, 0.45),
        inset 0 0 28px rgba(250, 204, 21, 0.12);
}
.roulette-machine.is-won .roulette-item--item.is-winner .roulette-item-frame {
    border-color: #c084fc;
    box-shadow:
        0 0 36px rgba(192, 132, 252, 0.45),
        inset 0 0 28px rgba(192, 132, 252, 0.12);
}
.roulette-machine.is-won .roulette-item.is-winner .roulette-item-icon {
    filter: drop-shadow(0 0 12px rgba(var(--accent-rgb), 0.55));
}
.roulette-machine.is-won .roulette-item--prestige.is-winner .roulette-item-icon {
    filter: drop-shadow(0 0 12px rgba(250, 204, 21, 0.6));
}
.roulette-machine.is-won .roulette-item--item.is-winner .roulette-item-icon {
    filter: drop-shadow(0 0 12px rgba(192, 132, 252, 0.6));
}
.roulette-machine.is-won .roulette-item.is-winner .roulette-item-amount {
    color: #fff;
    text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.25);
}
.roulette-item-win-badge {
    position: absolute;
    top: 0.32rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    padding: 0.18rem 0.55rem;
    border-radius: 4px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #052e16;
    background: linear-gradient(180deg, #bbf7d0, var(--accent));
    border: 1px solid rgba(187, 247, 208, 0.6);
    box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.45);
    animation:
        roulette-badge-in 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        roulette-badge-pulse 1.5s ease-in-out 0.45s infinite;
}
.roulette-item--prestige.is-winner .roulette-item-win-badge {
    color: #422006;
    background: linear-gradient(180deg, #fde68a, #facc15);
    border-color: rgba(253, 230, 138, 0.65);
    box-shadow: 0 0 14px rgba(250, 204, 21, 0.45);
}
.roulette-item--item.is-winner .roulette-item-win-badge {
    color: #2e1065;
    background: linear-gradient(180deg, #e9d5ff, #c084fc);
    border-color: rgba(233, 213, 255, 0.65);
    box-shadow: 0 0 14px rgba(192, 132, 252, 0.45);
}
.roulette-item.is-winner .roulette-item-frame {
    border-color: var(--accent);
    box-shadow:
        0 0 24px rgba(var(--accent-rgb), 0.3),
        inset 0 0 20px rgba(var(--accent-rgb), 0.08);
}
.roulette-item--prestige.is-winner .roulette-item-frame {
    border-color: #facc15;
}
.roulette-item--item.is-winner .roulette-item-frame {
    border-color: #c084fc;
}
.roulette-pointer {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, transparent 2%, var(--accent) 18%, var(--accent) 82%, transparent 98%);
    box-shadow:
        0 0 12px rgba(var(--accent-rgb), 0.65),
        0 0 32px rgba(var(--accent-rgb), 0.2);
    z-index: 5;
    pointer-events: none;
}
.roulette-pointer::before,
.roulette-pointer::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border: 7px solid transparent;
    filter: drop-shadow(0 0 5px rgba(var(--accent-rgb), 0.55));
}
.roulette-pointer::before { top: 0; border-top-color: var(--accent); }
.roulette-pointer::after { bottom: 0; border-bottom-color: var(--accent); }
.roulette-result {
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    background: rgba(var(--accent-rgb), 0.1);
    border: 1px solid var(--border-glow);
    font-size: 1.1rem;
    box-shadow: 0 0 24px rgba(var(--accent-rgb), 0.08);
}
.roulette-result.is-error { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.4); }

.roulette-pending-count {
    margin: 0.65rem 0 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: #fbbf24;
}
.roulette-pending-count i { margin-right: 0.25rem; }

.roulette-body > #roulette-spin-btn {
    margin-bottom: 1.25rem;
}

.roulette-queue-block {
    max-width: 520px;
    margin: 0 auto 1rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid rgba(251, 191, 36, 0.35);
    background: rgba(251, 191, 36, 0.08);
    color: #fde68a;
    text-align: center;
}

.roulette-odds-card {
    max-width: 520px;
    margin: 0 auto 1.25rem;
    text-align: left;
}
.roulette-odds-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}
.roulette-odds-header h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
}
.roulette-odds-header h3 i { color: var(--accent); margin-right: 0.35rem; }
.roulette-odds-hint {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.roulette-odds-scroll-box { max-height: 220px; }
.roulette-odds-scroll { max-height: 220px; }
.roulette-odds-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.roulette-odds-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.6rem;
    margin-bottom: 0.35rem;
    border: 1px solid rgba(31, 53, 32, 0.75);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.22);
}
.roulette-odds-row:last-child { margin-bottom: 0; }
.roulette-odds-icon {
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.08);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    color: var(--accent);
    font-size: 0.85rem;
}
.roulette-odds-row--prestige .roulette-odds-icon {
    color: #facc15;
    background: rgba(250, 204, 21, 0.1);
    border-color: rgba(250, 204, 21, 0.25);
}
.roulette-odds-row--item .roulette-odds-icon {
    color: #c084fc;
    background: rgba(192, 132, 252, 0.1);
    border-color: rgba(192, 132, 252, 0.25);
}
.roulette-odds-body {
    flex: 1;
    min-width: 0;
}
.roulette-odds-label {
    display: block;
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.roulette-odds-type {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
}
.roulette-odds-bar {
    display: block;
    height: 4px;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 999px;
    overflow: hidden;
}
.roulette-odds-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--accent), #5fff3a);
    border-radius: inherit;
}
.roulette-odds-row--prestige .roulette-odds-bar span {
    background: linear-gradient(90deg, #ca8a04, #facc15);
}
.roulette-odds-row--item .roulette-odds-bar span {
    background: linear-gradient(90deg, #9333ea, #c084fc);
}
.roulette-odds-pct {
    flex: 0 0 auto;
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--accent);
    min-width: 2.5rem;
    text-align: right;
}
.roulette-odds-row--prestige .roulette-odds-pct { color: #facc15; }
.roulette-odds-row--item .roulette-odds-pct { color: #c084fc; }

@keyframes roulette-shine {
    from { opacity: 0.5; transform: translateX(-120%); }
    to { opacity: 0.5; transform: translateX(120%); }
}
@keyframes roulette-win-reveal {
    0%, 100% {
        filter: brightness(1);
        box-shadow:
            0 0 24px rgba(var(--accent-rgb), 0.32),
            0 0 40px rgba(var(--accent-rgb), 0.12),
            inset 0 0 18px rgba(var(--accent-rgb), 0.08);
    }
    50% {
        filter: brightness(1.28);
        box-shadow:
            0 0 34px rgba(var(--accent-rgb), 0.5),
            0 0 60px rgba(var(--accent-rgb), 0.18),
            inset 0 0 26px rgba(var(--accent-rgb), 0.14);
    }
}
@keyframes roulette-badge-pulse {
    0%, 100% { filter: brightness(1); box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.35); }
    50% { filter: brightness(1.2); box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.55); }
}
@keyframes roulette-badge-in {
    from { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(0.85); }
    to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes roulette-bar-pulse {
    0%, 100% { filter: brightness(1); box-shadow: none; }
    50% { filter: brightness(1.35); box-shadow: 0 0 10px currentColor; }
}

/* Admin chat */
.admin-chat-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1.5rem;
    align-items: start;
}
.admin-chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.admin-chat-clear-form { margin-bottom: 1rem; }
.admin-chat-scroll-box {
    margin: 0;
    max-height: 420px;
}
.admin-chat-scroll {
    max-height: 420px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.admin-chat-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid rgba(31, 53, 32, 0.75);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.22);
}
.admin-chat-msg {
    flex: 1;
    min-width: 0;
    font-size: 0.95rem;
    color: var(--text-muted);
}
.admin-chat-delete-form { flex-shrink: 0; }
.admin-chat-access-hint { margin-bottom: 1rem; }
.admin-chat-moderators {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.admin-chat-moderators li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.15);
}
.admin-chat-moderators i { color: var(--text-muted); }
.admin-chat-access-tag {
    font-size: 0.78rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: rgba(var(--accent-rgb), 0.1);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    color: var(--accent);
}

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

/* Requests panel */
.requests-panel { display: flex; flex-direction: column; gap: 1rem; }
.requests-form .form-field { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.85rem; }
.requests-form .form-field > span { color: var(--text-muted); font-size: 0.9rem; font-weight: 600; }
.requests-card-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.requests-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background: rgba(var(--accent-rgb), 0.1);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    color: var(--accent);
    font-size: 0.85rem;
}
.requests-table-wrap { overflow-x: auto; }
.requests-table-scroll {
    max-height: min(52vh, 460px);
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-dim) rgba(0, 0, 0, 0.35);
}
.requests-table { width: 100%; border-collapse: collapse; }
.requests-table th,
.requests-table td { padding: 0.75rem 0.85rem; border-bottom: 1px solid var(--border); text-align: left; }
.requests-table th { color: var(--text-muted); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; }
.requests-table tbody tr:hover { background: rgba(var(--accent-rgb), 0.04); }
.requests-td-subject { font-weight: 600; max-width: 280px; }
.requests-status {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}
.requests-status-open { background: rgba(234, 179, 8, 0.15); color: #facc15; }
.requests-status-in_progress { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.requests-status-closed { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
.requests-reply-dot { color: var(--accent); margin-left: 0.35rem; }
.request-forum { display: grid; grid-template-columns: minmax(240px, 300px) 1fr; gap: 1rem; align-items: start; }
.request-sidebar .card-body { display: flex; flex-direction: column; gap: 0.55rem; }
.request-player-name { font-size: 1.15rem; font-weight: 700; margin: 0; }
.request-thread { display: flex; flex-direction: column; gap: 1rem; }
.request-post .card-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.request-message {
    margin-top: 0.75rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid var(--border);
    border-radius: 8px;
    line-height: 1.65;
}
.request-extra-fields {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.request-extra-fields p {
    margin: 0;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.18);
    border-left: 3px solid var(--accent);
    border-radius: 0 8px 8px 0;
}
.request-reply-heading { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.request-reply-heading h3 { margin: 0; }
.request-reply-by { margin: 0; color: var(--text-muted); font-size: 0.88rem; font-weight: 600; }
.request-reply-by .text-link { font-weight: 700; }
.request-delete-form { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border); }
.request-staff-reply { border-color: rgba(var(--accent-rgb), 0.35); box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.08); }
.request-staff-reply-new { border-color: rgba(250, 204, 21, 0.45); box-shadow: 0 0 24px rgba(250, 204, 21, 0.12); }
.request-waiting { padding: 1rem; text-align: center; }
.request-extra-line { margin: 0 0 0.75rem; padding: 0.75rem; background: rgba(0, 0, 0, 0.18); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; }
.requests-breadcrumb-staff { margin-left: 0.5rem; color: var(--accent); font-size: 0.85rem; font-weight: 600; }
.requests-staff-actions { display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: center; }
.requests-staff-tabs { padding: 0 1rem 0.75rem; }
.requests-staff-card .requests-staff-tabs { border-bottom: 1px solid var(--border); margin-bottom: 0; }
.requests-td-actions { white-space: nowrap; }
.requests-row-unread { background: rgba(250, 204, 21, 0.04); }
.requests-reply-dot-read { opacity: 0.55; }

/* ── v2: requests ── */

.requests-hero-v2 {
    position: relative;
    margin-bottom: 1.5rem;
    padding: 1.5rem 1.75rem;
    background: linear-gradient(135deg, rgba(15, 22, 16, 0.98) 0%, rgba(10, 15, 10, 0.98) 100%);
    border: 1px solid rgba(var(--accent-rgb), 0.22);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow), 0 0 36px rgba(var(--accent-rgb), 0.05);
    overflow: hidden;
}

.requests-hero-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 15% 50%, rgba(var(--accent-rgb), 0.08) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 0%, rgba(96, 165, 250, 0.06) 0%, transparent 45%);
    pointer-events: none;
}

.requests-hero-content { position: relative; }

.requests-hero-v2 h1 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 3vw, 2.1rem);
    color: var(--accent);
    margin: 0 0 0.35rem;
}

.requests-hero-v2 p {
    margin: 0 0 1rem;
    color: var(--text-muted);
}

.requests-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.requests-chip-preview {
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.4);
    background: rgba(59, 130, 246, 0.1);
}

.requests-chip-active {
    font-weight: 700;
    color: var(--accent);
    border-color: rgba(var(--accent-rgb), 0.4);
    background: rgba(var(--accent-rgb), 0.1);
}

.requests-chip-unread {
    color: #fde68a;
    border-color: rgba(251, 191, 36, 0.45);
    background: rgba(251, 191, 36, 0.12);
}

.requests-chip-staff {
    color: #c4b5fd;
    border-color: rgba(167, 139, 250, 0.4);
    background: rgba(167, 139, 250, 0.1);
}

.requests-chip-staff-alert {
    color: #fde68a;
    border-color: rgba(251, 191, 36, 0.45);
    background: rgba(251, 191, 36, 0.12);
    font-weight: 700;
}

.requests-panel-v2 { gap: 1.25rem; }

.requests-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.75rem;
}

.requests-type-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem 1.05rem;
    text-decoration: none;
    color: var(--text);
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.requests-type-card:hover {
    border-color: rgba(var(--accent-rgb), 0.35);
    box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.08);
    transform: translateY(-1px);
}

.requests-type-card-active {
    border-color: rgba(var(--accent-rgb), 0.45);
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08) 0%, rgba(0, 0, 0, 0.25) 100%);
    box-shadow: 0 0 22px rgba(var(--accent-rgb), 0.1);
}

.requests-type-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 10px;
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--accent);
    font-size: 0.95rem;
}

.requests-type-label {
    font-weight: 700;
    font-size: 0.95rem;
}

.requests-type-desc {
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.requests-card-v2 {
    border-radius: var(--radius-lg);
    border-color: rgba(var(--accent-rgb), 0.18);
    overflow: hidden;
}

.requests-card-preview {
    border-color: rgba(59, 130, 246, 0.22);
}

.requests-form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.requests-preview-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #93c5fd;
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.requests-preview-body { display: flex; flex-direction: column; gap: 1rem; }

.requests-preview-desc {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.55;
}

.requests-preview-fields {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    opacity: 0.55;
}

.requests-preview-field > span {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
}

.requests-preview-placeholder {
    height: 2.35rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(255, 255, 255, 0.08);
}

.requests-preview-placeholder-tall { height: 4.5rem; }

.requests-submit-btn { align-self: flex-start; }

.requests-action-hint { margin: 0; text-align: center; }

.requests-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.requests-type-pill i { color: var(--accent); opacity: 0.85; }

.requests-type-pill-lg {
    font-size: 0.92rem;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    background: rgba(var(--accent-rgb), 0.08);
    border: 1px solid rgba(var(--accent-rgb), 0.22);
}

.request-view-v3 { gap: 1.1rem; }

.request-view-header { padding: 0; overflow: hidden; }
.request-view-header-main { padding: 1.15rem 1.25rem; display: flex; flex-direction: column; gap: 0.55rem; }
.request-view-title { margin: 0; font-size: clamp(1.2rem, 2.5vw, 1.65rem); line-height: 1.25; }
.request-view-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
    margin: 0;
    color: var(--text-muted);
    font-size: 0.88rem;
    align-items: center;
}

.request-author-card {
    position: relative;
    overflow: hidden;
    border-color: rgba(var(--accent-rgb), 0.2);
}

.request-author-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 10% 40%, rgba(var(--accent-rgb), 0.07) 0%, transparent 55%);
    pointer-events: none;
}

.request-author-main {
    position: relative;
    display: flex;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    align-items: flex-start;
}

.request-author-avatar {
    flex-shrink: 0;
    width: 3.4rem;
    height: 3.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid rgba(var(--accent-rgb), 0.35);
    background: rgba(0, 0, 0, 0.35);
    color: var(--accent);
    font-size: 1.25rem;
}

.request-author-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 0.45rem; }
.request-author-eyebrow { margin: 0; color: var(--text-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.request-author-name { margin: 0; font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.2; }
.request-author-name .request-author-link,
.request-author-name .pl-name-text { font-weight: 800; }
.request-author-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.request-author-chips,
.request-author-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.request-post-v3 .card-body { display: flex; flex-direction: column; gap: 0.85rem; }
.request-message-v3 {
    margin: 0;
    padding: 1rem 1.05rem;
    background: rgba(0, 0, 0, 0.24);
    border: 1px solid var(--border);
    border-radius: 10px;
    line-height: 1.65;
}

.request-extra-fields-v3 {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.request-extra-block {
    padding: 0.8rem 0.9rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 0 10px 10px 0;
}

.request-extra-block p { margin: 0.35rem 0 0; line-height: 1.55; }
.request-extra-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.request-replies-v3 { display: flex; flex-direction: column; gap: 0.75rem; }
.request-replies-head h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
}

.request-replies-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: min(55vh, 480px);
    overflow-y: auto;
    padding-right: 0.15rem;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-dim) rgba(0, 0, 0, 0.35);
}
.request-view-scroll-body {
    max-height: min(50vh, 420px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-dim) rgba(0, 0, 0, 0.35);
}

.request-reply-msg {
    padding: 0.9rem 1rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.22);
}

.request-reply-msg--staff {
    border-color: rgba(var(--accent-rgb), 0.28);
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.06) 0%, rgba(0, 0, 0, 0.24) 100%);
}

.request-reply-msg--community {
    border-color: rgba(96, 165, 250, 0.22);
}

.request-reply-msg-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.55rem;
}

.request-reply-author {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    font-weight: 700;
}

.request-reply-author .request-author-link,
.request-reply-author .pl-name-text { font-size: 0.95rem; }

.request-reply-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.12);
    border: 1px solid rgba(var(--accent-rgb), 0.28);
}

.request-reply-time { color: var(--text-muted); font-size: 0.8rem; white-space: nowrap; }
.request-reply-msg-body { line-height: 1.6; color: var(--text); }

.request-compose-v3 { border-color: rgba(var(--accent-rgb), 0.2); }

.request-actions-card { border-color: rgba(255, 255, 255, 0.08); }
.request-actions-body { display: flex; flex-direction: column; gap: 1rem; }
.request-action-group { display: flex; flex-direction: column; gap: 0.5rem; }
.request-action-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.request-status-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.request-status-form { margin: 0; }

.request-actions-body .request-delete-form {
    margin: 0;
    padding: 0;
    border: none;
}

.request-forum-v2 { gap: 1.25rem; }

.requests-staff-form { border-color: rgba(167, 139, 250, 0.28); }

@media (max-width: 900px) {
    .requests-hero-v2 { padding: 1.15rem 1.2rem; }
    .requests-type-grid { grid-template-columns: 1fr 1fr; }
    .request-forum { grid-template-columns: 1fr; }
    .request-author-main { flex-direction: column; align-items: stretch; }
    .request-reply-msg-head { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 520px) {
    .requests-type-grid { grid-template-columns: 1fr; }
}

/* AdminCP — shared form blocks */
.admin-settings-grid,
.admin-assign-grid,
.admin-add-prize-grid,
.admin-create-user-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.admin-setting-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.admin-setting-field label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.admin-toggle {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    grid-column: 1 / -1;
}
.admin-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.admin-toggle-ui {
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--border);
    position: relative;
    transition: background 0.2s, border-color 0.2s;
}
.admin-toggle-ui::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: transform 0.2s, background 0.2s;
}
.admin-toggle input:checked + .admin-toggle-ui {
    background: rgba(var(--accent-rgb), 0.2);
    border-color: var(--border-glow);
}
.admin-toggle input:checked + .admin-toggle-ui::after {
    transform: translateX(20px);
    background: var(--accent);
}
.admin-toggle-text { display: flex; flex-direction: column; gap: 0.15rem; }
.admin-toggle-text strong { font-size: 0.95rem; }
.admin-toggle-text small { color: var(--text-muted); font-size: 0.82rem; }

.admin-roulette-prizes .card-header,
.admin-badge-assignments .card-header,
.admin-users-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.admin-roulette-prize-count,
.admin-badge-count {
    font-size: 0.82rem;
    color: var(--text-muted);
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: rgba(var(--accent-rgb), 0.08);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
}

/* AdminCP — roulette prizes */
.roulette-prize-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.roulette-prize-card {
    position: relative;
    padding: 1rem;
    background: linear-gradient(180deg, var(--bg-card), rgba(0, 0, 0, 0.35));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.roulette-prize-card:hover {
    border-color: var(--border-glow);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
.roulette-prize-card-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top, rgba(var(--accent-rgb), 0.1), transparent 65%);
    opacity: 0;
    transition: opacity 0.25s;
    pointer-events: none;
}
.roulette-prize-card:hover .roulette-prize-card-glow { opacity: 1; }
.roulette-prize-prestige { border-color: rgba(234, 179, 8, 0.35); }
.roulette-prize-item { border-color: rgba(192, 132, 252, 0.35); }
.roulette-prize-prestige .roulette-prize-card-glow {
    background: radial-gradient(circle at top, rgba(234, 179, 8, 0.15), transparent 65%);
}
.roulette-prize-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
    position: relative;
    z-index: 1;
}
.roulette-prize-type {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent);
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: rgba(var(--accent-rgb), 0.1);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
}
.roulette-prize-prestige .roulette-prize-type {
    color: #facc15;
    background: rgba(234, 179, 8, 0.12);
    border-color: rgba(234, 179, 8, 0.35);
}
.roulette-prize-label {
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
    font-weight: 700;
    position: relative;
    z-index: 1;
}
.roulette-prize-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    position: relative;
    z-index: 1;
}
.roulette-prize-stats > div {
    padding: 0.5rem 0.65rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.roulette-prize-stats dt {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 0.15rem;
}
.roulette-prize-stats dd {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
}
.roulette-prize-weight { position: relative; z-index: 1; }
.roulette-prize-weight-bar {
    height: 6px;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 0.35rem;
}
.roulette-prize-weight-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--accent), #5fff3a);
    border-radius: 999px;
}
.roulette-prize-prestige .roulette-prize-weight-bar span {
    background: linear-gradient(90deg, #ca8a04, #facc15);
}
.roulette-prize-weight-text {
    font-size: 0.78rem;
    color: var(--text-muted);
}
.roulette-prize-edit-chance {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border);
    position: relative;
    z-index: 1;
}
.roulette-prize-edit-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
}
.roulette-prize-edit-row {
    display: flex;
    gap: 0.45rem;
    align-items: center;
}
.roulette-prize-edit-row .form-control {
    flex: 1;
    min-width: 0;
}
.roulette-prize-edit-row .btn {
    flex: 0 0 auto;
}
/* AdminCP — roulette prize editor (bulk) */
.roulette-add-prize-panel {
    margin-bottom: 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: rgba(0, 0, 0, 0.15);
    overflow: hidden;
}
.roulette-add-prize-panel > summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.roulette-add-prize-panel > summary::-webkit-details-marker { display: none; }
.roulette-add-prize-panel[open] > summary {
    border-bottom: 1px solid var(--border);
    background: rgba(var(--accent-rgb), 0.04);
}
.roulette-add-prize-panel-body {
    padding: 1rem;
}
.roulette-prizes-compact { display: flex; flex-direction: column; gap: 0.75rem; }
.roulette-prizes-toolbar-compact {
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: rgba(0, 0, 0, 0.18);
}
.roulette-prizes-tier-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}
.roulette-prizes-tier-chip {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--border);
}
.roulette-prizes-tier-chip--common { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.3); background: rgba(var(--accent-rgb), 0.08); }
.roulette-prizes-tier-chip--uncommon { color: #60a5fa; border-color: rgba(96, 165, 250, 0.35); background: rgba(96, 165, 250, 0.1); }
.roulette-prizes-tier-chip--rare { color: #f472b6; border-color: rgba(244, 114, 182, 0.35); background: rgba(244, 114, 182, 0.1); }
.roulette-prizes-tier-chip--ultra { color: #c084fc; border-color: rgba(192, 132, 252, 0.35); background: rgba(192, 132, 252, 0.1); }
.roulette-prizes-toolbar-hint {
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
    line-height: 1.4;
}
.roulette-prizes-toolbar-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}
.roulette-prizes-summary-chip {
    font-size: 0.78rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    color: var(--text-muted);
}
.roulette-prizes-summary-total.is-warning {
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.45);
    background: rgba(251, 191, 36, 0.08);
}
.roulette-prizes-summary-warn {
    font-size: 0.78rem;
    color: #fbbf24;
}
.roulette-prizes-compact-wrap {
    overflow: auto;
    max-height: min(58vh, 520px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.roulette-prizes-compact-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.roulette-prizes-compact-table th,
.roulette-prizes-compact-table td {
    padding: 0.35rem 0.4rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.roulette-prizes-compact-table th {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    background: rgba(0, 0, 0, 0.25);
    white-space: nowrap;
}
.roulette-prizes-compact-table tbody tr:hover { background: rgba(255, 255, 255, 0.02); }
.roulette-prizes-compact-table tbody tr.is-off { opacity: 0.5; }
.roulette-prize-order { width: 3.25rem; padding: 0.25rem 0.35rem !important; text-align: center; }
.roulette-prize-tier-select { min-width: 6.5rem; padding: 0.25rem 0.35rem !important; font-size: 0.78rem !important; }
.roulette-prize-tier-select--common { border-color: rgba(var(--accent-rgb), 0.35); }
.roulette-prize-tier-select--uncommon { border-color: rgba(96, 165, 250, 0.4); }
.roulette-prize-tier-select--rare { border-color: rgba(244, 114, 182, 0.4); }
.roulette-prize-tier-select--ultra { border-color: rgba(192, 132, 252, 0.45); }
.roulette-prize-type-icon { width: 1rem; text-align: center; color: var(--text-muted); }
.roulette-prize-row--prestige .roulette-prize-type-icon { color: #facc15; }
.roulette-prize-row--item .roulette-prize-type-icon { color: #c084fc; }
.roulette-prize-row--points .roulette-prize-type-icon { color: var(--accent); }
.roulette-prize-label-cell { min-width: 8rem; max-width: 14rem; }
.roulette-prize-label-cell .form-control { min-width: 0; }
.roulette-prize-label-text {
    display: block;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 14rem;
}
.roulette-prize-amount { width: 4.5rem; padding: 0.25rem 0.35rem !important; }
.roulette-prize-weight-input { width: 4.25rem; padding: 0.25rem 0.35rem !important; }
.roulette-prize-preview-label {
    display: block;
    font-size: 0.68rem;
    color: var(--text-muted);
    margin-top: 0.1rem;
}
.roulette-prize-on-cell,
.roulette-prize-del-cell { text-align: center; white-space: nowrap; }
.roulette-prize-na { color: var(--text-muted); }
.roulette-prizes-save-bar-compact {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
    padding-top: 0.25rem;
    position: sticky;
    bottom: 0.5rem;
    z-index: 2;
}
.roulette-prize-delete-form { display: none; }
.admin-add-prize {
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}
.admin-add-prize h4 {
    margin: 0 0 1rem;
    font-size: 0.95rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* AdminCP — user badges */
.admin-assign-form { display: flex; flex-direction: column; gap: 0.75rem; }
.user-badge-groups {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}
.user-badge-group-card {
    padding: 1rem;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 0.2s;
}
.user-badge-group-card:hover { border-color: rgba(var(--accent-rgb), 0.25); }
.user-badge-group-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}
.user-badge-group-avatar {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--accent-rgb), 0.1);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    border-radius: 8px;
    color: var(--accent);
}
.user-badge-group-name {
    display: block;
    font-weight: 700;
    font-size: 1rem;
    color: inherit;
    text-decoration: none;
}
.user-badge-group-name:hover { color: var(--accent); }
.user-badge-group-meta {
    display: block;
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}
.user-badge-chip-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.user-badge-chip-list li,
.user-badge-chip-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.user-badge-staff-toggle-form {
    margin: 0;
    flex-shrink: 0;
}
.user-badge-staff-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.user-badge-staff-toggle input {
    accent-color: var(--accent);
    cursor: pointer;
}
.admin-badge-staff-hint {
    margin: 0 0 1rem;
}
.badge-preview-sm {
    font-size: 0.72rem;
    padding: 0.35rem 0.75rem;
}
.admin-badge-order-hint { margin-bottom: 1rem; }

/* AdminCP — users accordion */
.admin-users-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: min(280px, 100%);
    flex: 1;
    max-width: 360px;
}
.admin-users-search-wrap i {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
    z-index: 1;
}
.admin-users-search-wrap .form-control {
    padding-left: 2.25rem;
    flex: 1;
    min-width: 0;
}
.admin-users-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.admin-user-card {
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color 0.25s, box-shadow 0.25s;
}
.admin-user-card:hover { border-color: rgba(var(--accent-rgb), 0.2); }
.admin-user-card.is-open {
    border-color: var(--border-glow);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
.admin-user-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1rem;
    background: transparent;
    border: none;
    color: inherit;
    font-family: var(--font);
    text-align: left;
    cursor: pointer;
    transition: background 0.2s;
}
.admin-user-head:hover { background: rgba(var(--accent-rgb), 0.04); }
.admin-user-avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--accent-rgb), 0.1);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    border-radius: 8px;
    color: var(--accent);
}
.admin-user-summary { flex: 1; min-width: 0; }
.admin-user-name { display: block; font-size: 1rem; }
.admin-user-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}
.admin-user-chevron {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.08);
    border-radius: 6px;
    transition: transform 0.3s ease, background 0.2s;
}
.admin-user-card.is-open .admin-user-chevron {
    transform: rotate(180deg);
    background: rgba(var(--accent-rgb), 0.15);
}
.admin-user-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
}
.admin-user-card.is-open .admin-user-body { grid-template-rows: 1fr; }
.admin-user-body-inner {
    overflow: hidden;
    padding: 0 1rem;
}
.admin-user-card.is-open .admin-user-body-inner {
    padding: 0 1rem 1rem;
    border-top: 1px solid var(--border);
    max-height: min(55vh, 480px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-dim) rgba(0, 0, 0, 0.35);
}
.admin-user-edit-label {
    margin: 1rem 0 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.admin-user-edit-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}
.admin-user-super-hint { margin: 1rem 0 0; }
.admin-users-search-empty { margin-top: 0.75rem; text-align: center; }
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 992px) {
    .profile-stats-layer { grid-template-columns: 1fr; }
    .profile-dl-row { grid-template-columns: 1fr; }
    .profile-dl-row dd { text-align: left; }
}
@media (max-width: 768px) {
    .news-card-head { align-items: flex-start; }
    .request-forum { grid-template-columns: 1fr; }
}

/* ── v2 redesign: server hero, connect, player rows ── */

.navbar-v2 {
    border-bottom-color: rgba(var(--accent-rgb), 0.12);
}

.server-hero {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.75rem;
    padding: 1.5rem 1.75rem;
    background: linear-gradient(135deg, rgba(15, 22, 16, 0.98) 0%, rgba(10, 15, 10, 0.98) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.server-hero-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 0% 50%, rgba(var(--accent-rgb), 0.08) 0%, transparent 55%),
        radial-gradient(ellipse at 100% 0%, rgba(var(--accent-rgb), 0.04) 0%, transparent 40%);
    pointer-events: none;
}

.server-hero.is-online {
    border-color: rgba(34, 197, 94, 0.45);
    box-shadow: var(--shadow), 0 0 40px rgba(var(--accent-rgb), 0.08);
}

.server-hero.is-offline {
    border-color: rgba(220, 38, 38, 0.35);
    box-shadow: var(--shadow), 0 0 30px rgba(220, 38, 38, 0.06);
}

.server-hero-main {
    position: relative;
    flex: 1;
    min-width: 0;
}

.server-hero-badges {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.65rem;
}

.server-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid transparent;
}

.server-status-pill.online {
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.1);
    border-color: rgba(var(--accent-rgb), 0.35);
}

.server-status-pill.offline {
    color: #fca5a5;
    background: rgba(220, 38, 38, 0.12);
    border-color: rgba(220, 38, 38, 0.35);
}

.server-status-pill i { font-size: 0.45rem; }

.server-hero-host {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    color: var(--accent);
    letter-spacing: 0.5px;
    line-height: 1.2;
    margin-bottom: 0.85rem;
    word-break: break-word;
    text-shadow: 0 0 24px rgba(var(--accent-rgb), 0.2);
}

.server-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.server-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.75rem;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(31, 53, 32, 0.9);
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
}

.server-hero-chip i {
    color: var(--accent-dim);
    font-size: 0.8rem;
}

.server-hero-chip-muted {
    color: var(--text-muted);
    font-weight: 500;
}

.server-hero-actions {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.connect-actions {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}

.btn-connect {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    min-width: 148px;
    padding: 0.85rem 1.25rem;
    text-decoration: none;
    color: #041004;
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: linear-gradient(180deg, #4dff2e 0%, var(--accent) 45%, #1faa0a 100%);
    border: 1px solid rgba(var(--accent-rgb), 0.6);
    border-radius: var(--radius);
    box-shadow:
        0 4px 20px rgba(var(--accent-rgb), 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: transform 0.15s, box-shadow 0.15s;
}

.btn-connect:hover {
    transform: translateY(-2px);
    box-shadow:
        0 8px 28px rgba(var(--accent-rgb), 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    color: #000;
}

.btn-connect > .fa-steam {
    font-size: 1.35rem;
    margin-bottom: 0.1rem;
}

.btn-connect-text { line-height: 1; }

.btn-connect-sub {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    opacity: 0.75;
}

.btn-connect-copy {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    padding: 0;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border-glow);
    border-radius: var(--radius);
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.btn-connect-copy:hover,
.btn-connect-copy.is-copied {
    color: var(--accent);
    border-color: var(--accent-dim);
    background: rgba(var(--accent-rgb), 0.08);
}

.footer-connect {
    color: var(--accent) !important;
    font-weight: 700;
}

.dashboard-v2 { margin-top: 0; }

.dashboard-v2 .card {
    border-radius: var(--radius-lg);
    border-color: rgba(31, 53, 32, 0.95);
}

.dashboard-v2 .card-header {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.12) 100%);
}

/* ── v2: home dashboard ── */

.server-hero-home-v2 {
    border-color: rgba(var(--accent-rgb), 0.28);
    box-shadow: var(--shadow), 0 0 40px rgba(var(--accent-rgb), 0.07);
}

.server-hero-home-v2 .server-hero-glow {
    background:
        radial-gradient(ellipse at 8% 50%, rgba(var(--accent-rgb), 0.1) 0%, transparent 55%),
        radial-gradient(ellipse at 92% 0%, rgba(56, 189, 248, 0.08) 0%, transparent 45%),
        radial-gradient(ellipse at 70% 100%, rgba(250, 204, 21, 0.05) 0%, transparent 40%);
}

.dashboard-home-v2 .dashboard-card-themed {
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(14, 20, 16, 0.98) 0%, rgba(9, 13, 10, 0.98) 100%);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.28);
}

.dashboard-card-corner {
    position: absolute;
    width: 11px;
    height: 11px;
    border: 2px solid rgba(var(--accent-rgb), 0.38);
    pointer-events: none;
    z-index: 2;
    transition: border-color 0.2s;
}

.dashboard-card-corner--tl {
    top: 0.55rem;
    left: 0.55rem;
    border-right: none;
    border-bottom: none;
    border-radius: 3px 0 0 0;
}

.dashboard-card-corner--br {
    bottom: 0.55rem;
    right: 0.55rem;
    border-left: none;
    border-top: none;
    border-radius: 0 0 3px 0;
}

.dashboard-card-chart {
    border-color: rgba(56, 189, 248, 0.22);
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.06), 0 10px 32px rgba(0, 0, 0, 0.28);
}

.dashboard-card-chart .dashboard-card-corner {
    border-color: rgba(56, 189, 248, 0.42);
}

.dashboard-card-chart .card-header h3 i {
    color: #38bdf8;
}

.dashboard-card-players {
    border-color: rgba(var(--accent-rgb), 0.22);
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.06), 0 10px 32px rgba(0, 0, 0, 0.28);
}

.dashboard-card-players .card-header h3 i {
    color: var(--accent);
}

.dashboard-card-chat {
    border-color: rgba(96, 165, 250, 0.22);
    box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.06), 0 10px 32px rgba(0, 0, 0, 0.28);
}

.dashboard-card-chat .dashboard-card-corner {
    border-color: rgba(96, 165, 250, 0.4);
}

.dashboard-card-chat .card-header h3 i {
    color: #93c5fd;
}

.dashboard-card-top15 {
    border-color: rgba(245, 158, 11, 0.24);
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.07), 0 10px 32px rgba(0, 0, 0, 0.28);
}

.dashboard-card-top15 .dashboard-card-corner {
    border-color: rgba(245, 158, 11, 0.45);
}

.dashboard-card-top15 .card-header h3 i {
    color: #fbbf24;
}

.dashboard-home-v2 .dashboard-card-themed:hover .dashboard-card-corner {
    border-color: rgba(var(--accent-rgb), 0.55);
}

.dashboard-home-v2 .dashboard-card-chart:hover {
    border-color: rgba(56, 189, 248, 0.38);
}

.dashboard-home-v2 .dashboard-card-players:hover {
    border-color: rgba(var(--accent-rgb), 0.38);
}

.dashboard-home-v2 .dashboard-card-chat:hover {
    border-color: rgba(96, 165, 250, 0.38);
}

.dashboard-home-v2 .dashboard-card-top15:hover {
    border-color: rgba(245, 158, 11, 0.42);
}

.recent-updates-home-v2 {
    padding: 1.15rem 1.25rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(var(--accent-rgb), 0.16);
    background: linear-gradient(145deg, rgba(12, 18, 14, 0.92) 0%, rgba(8, 12, 10, 0.92) 100%);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
}

.recent-updates-home-v2 .section-title h3 i {
    color: #facc15;
}

.recent-updates-home-v2 .update-preview-card {
    border-color: rgba(var(--accent-rgb), 0.14);
    background: rgba(0, 0, 0, 0.22);
}

.page-hero-v2 {
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(15, 22, 16, 0.98) 0%, rgba(10, 15, 10, 0.98) 100%);
}

.page-hero-body h1 {
    font-family: var(--font-display);
    color: var(--accent);
}

.player-list-v2 .player-row {
    align-items: center;
    padding: 0.65rem 0.75rem;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.28);
}

.player-list-v2 .pl-body {
    flex: 1;
    min-width: 0;
}

.player-list-v2 .pl-name-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    margin-bottom: 0.35rem;
    font-weight: 600;
}

.player-list-v2 .pl-name-row .text-link,
.player-list-v2 .pl-name-row .pl-name-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.pl-frag-bar {
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.pl-frag-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent-dim), var(--accent));
    box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.35);
    transition: width 0.35s ease;
}

.player-list-v2 .pl-score {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
    min-width: 2.5rem;
    text-align: right;
}

.player-list-v2 .pl-score strong {
    font-size: 1rem;
    color: var(--accent);
    line-height: 1;
}

.player-list-v2 .pl-score small {
    font-size: 0.68rem;
    color: var(--text-muted);
}

.top15-list-v2 li {
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(31, 53, 32, 0.75);
    margin-bottom: 0.35rem;
    padding: 0.55rem 0.65rem;
}

.top15-list-v2 li:hover {
    border-color: rgba(var(--accent-rgb), 0.3);
    background: rgba(var(--accent-rgb), 0.04);
}

.recent-updates .update-preview-card {
    border-radius: var(--radius);
    transition: border-color 0.2s, transform 0.2s;
}

.recent-updates .update-preview-card:hover {
    border-color: var(--border-glow);
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .server-hero {
        flex-direction: column;
        padding: 1.25rem;
    }

    .server-hero-actions {
        width: 100%;
    }

    .connect-actions {
        width: 100%;
    }

    .btn-connect {
        flex: 1;
        min-width: 0;
    }
}

/* ── v2: profile, login, search, news, empty states ── */

.empty-page-v2 {
    padding: 3rem 1.5rem;
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.empty-page-v2 i {
    font-size: 2.5rem;
    color: var(--accent);
    opacity: 0.45;
    margin-bottom: 1rem;
}

.profile-hero-v2 {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
    padding: 1.35rem 1.5rem;
    background: linear-gradient(135deg, rgba(15, 22, 16, 0.98) 0%, rgba(10, 15, 10, 0.98) 100%);
    border: 1px solid rgba(34, 197, 94, 0.35);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow), 0 0 32px rgba(var(--accent-rgb), 0.06);
    overflow: hidden;
}

.profile-hero-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 10% 40%, rgba(var(--accent-rgb), 0.07) 0%, transparent 55%);
    pointer-events: none;
}

.profile-hero-main {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1.15rem;
    flex: 1;
    min-width: 0;
}

.profile-hero-v2 .profile-avatar-ring {
    width: 64px;
    height: 64px;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.profile-hero-body { min-width: 0; flex: 1; }

.profile-hero-eyebrow {
    margin: 0 0 0.25rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.profile-hero-name {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 3vw, 2rem);
    color: var(--accent);
    margin: 0 0 0.5rem;
    line-height: 1.15;
    word-break: break-word;
}

.profile-hero-chips,
.profile-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.65rem;
}

.profile-hero-meta { margin-top: 0.5rem; }

.profile-hero-actions {
    position: relative;
    display: flex;
    align-items: flex-start;
    flex-shrink: 0;
}

.profile-page-v2 { margin-top: 0; }

.profile-page-v2 .card {
    border-radius: var(--radius-lg);
}

.login-body-v2 .login-wrap { max-width: 420px; }

.login-card-v2 {
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(15, 22, 16, 0.98) 0%, rgba(10, 15, 10, 0.98) 100%);
    border-color: rgba(var(--accent-rgb), 0.2);
    box-shadow: var(--shadow), 0 0 40px rgba(var(--accent-rgb), 0.06);
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    text-align: left;
}

.login-brand > .brand-mark--lg {
    flex-shrink: 0;
}

.login-brand h1 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--accent);
    margin: 0;
    line-height: 1.1;
}

.login-brand p {
    margin: 0.15rem 0 0;
    font-size: 0.78rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.login-card-v2 .login-form label {
    background: rgba(0, 0, 0, 0.35);
    border-color: rgba(31, 53, 32, 0.95);
}

.login-card-v2 .login-form input.form-control {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0.75rem 0;
}

.login-remember {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.15rem 0 1rem;
    padding: 0.72rem 1rem;
    background: rgba(0, 0, 0, 0.35) !important;
    border: 1px solid rgba(31, 53, 32, 0.95) !important;
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.login-remember:hover {
    border-color: rgba(var(--accent-rgb), 0.35) !important;
    box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.08);
}

.login-remember:has(input:checked) {
    border-color: rgba(var(--accent-rgb), 0.45) !important;
    background: rgba(var(--accent-rgb), 0.06) !important;
    box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.1);
}

.login-remember-text {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.02em;
    user-select: none;
    transition: color 0.2s ease;
}

.login-remember-text i {
    color: var(--accent-dim);
    font-size: 0.82rem;
    opacity: 0.85;
    transition: color 0.2s ease, filter 0.2s ease;
}

.login-remember:has(input:checked) .login-remember-text {
    color: var(--text);
}

.login-remember:has(input:checked) .login-remember-text i {
    color: var(--accent);
    filter: drop-shadow(0 0 6px var(--accent-glow));
}

.login-remember input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}

.login-remember-box {
    flex-shrink: 0;
    position: relative;
    width: 1.4rem;
    height: 1.4rem;
    border: 2px solid rgba(var(--accent-rgb), 0.4);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.45);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.login-remember-box::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 46%;
    width: 0.32rem;
    height: 0.62rem;
    border: solid var(--accent);
    border-width: 0 2.5px 2.5px 0;
    transform: translate(-50%, -50%) rotate(45deg) scale(0);
    transition: transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.login-remember:hover .login-remember-box {
    border-color: rgba(var(--accent-rgb), 0.65);
}

.login-remember input:checked + .login-remember-box {
    background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.22), rgba(34, 197, 94, 0.12));
    border-color: var(--accent);
    box-shadow: 0 0 12px var(--accent-glow), inset 0 1px 2px rgba(255, 255, 255, 0.06);
    transform: scale(1.04);
}

.login-remember input:checked + .login-remember-box::after {
    transform: translate(-50%, -50%) rotate(45deg) scale(1);
}

.login-remember input:focus-visible + .login-remember-box {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.btn-connect-style {
    margin-top: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    box-shadow: 0 4px 20px rgba(var(--accent-rgb), 0.3);
}

.search-hero-v2 {
    position: relative;
    margin-bottom: 1.5rem;
    padding: 1.5rem 1.75rem;
    background: linear-gradient(135deg, rgba(15, 22, 16, 0.98) 0%, rgba(10, 15, 10, 0.98) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.news-hero-v2 {
    position: relative;
    margin-bottom: 1.5rem;
    padding: 1.5rem 1.75rem;
    background: linear-gradient(135deg, rgba(15, 22, 16, 0.98) 0%, rgba(10, 15, 10, 0.98) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.news-hero-v2--themed {
    border-color: rgba(var(--accent-rgb), 0.22);
    box-shadow: var(--shadow), 0 0 36px rgba(var(--accent-rgb), 0.05);
}

.search-hero-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 100% 0%, rgba(var(--accent-rgb), 0.06) 0%, transparent 50%);
    pointer-events: none;
}

.news-hero-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 12% 55%, rgba(var(--accent-rgb), 0.08) 0%, transparent 55%),
        radial-gradient(ellipse at 88% 0%, rgba(96, 165, 250, 0.06) 0%, transparent 45%);
    pointer-events: none;
}

.news-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.news-chip-count {
    font-weight: 700;
    color: var(--accent);
    border-color: rgba(var(--accent-rgb), 0.4);
    background: rgba(var(--accent-rgb), 0.1);
}

.news-chip-action {
    text-decoration: none;
    color: #fde68a;
    border-color: rgba(251, 191, 36, 0.4);
    background: rgba(251, 191, 36, 0.1);
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.news-chip-action:hover {
    color: #fff;
    border-color: rgba(251, 191, 36, 0.55);
    background: rgba(251, 191, 36, 0.18);
}

.search-hero-content,
.news-hero-content {
    position: relative;
}

.search-hero-v2 h1,
.news-hero-v2 h1 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 3vw, 2rem);
    color: var(--accent);
    margin: 0 0 0.35rem;
}

.search-hero-v2 h1 i,
.news-hero-v2 h1 i {
    font-size: 0.85em;
    opacity: 0.85;
}

.search-hero-v2 p,
.news-hero-v2 p {
    margin: 0 0 1.1rem;
    color: var(--text-muted);
}

.search-hero-form {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.search-hero-input-wrap {
    flex: 1 1 220px;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0 1rem;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(31, 53, 32, 0.95);
    border-radius: var(--radius);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.search-hero-input-wrap:focus-within {
    border-color: var(--accent-dim);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.12);
}

.search-hero-input-wrap i { color: var(--text-muted); }

.search-hero-input-wrap .form-control {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0.85rem 0;
    font-size: 1.05rem;
}

.search-results-v2 { margin-top: 0; }

.search-results-head {
    margin-bottom: 1rem;
}

.search-results-head h2 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.search-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.search-player-card-v2 {
    border-radius: var(--radius-lg);
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.search-player-card-v2:hover {
    border-color: rgba(var(--accent-rgb), 0.35);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.search-player-card-v2 .search-player-link {
    padding: 1rem 1.1rem;
}

.search-player-top {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 0.85rem;
}

.search-player-card-v2 .search-player-avatar {
    width: 48px;
    height: 48px;
    font-size: 1.15rem;
}

.search-player-card-v2 .search-player-name {
    font-size: 1.1rem;
    margin: 0;
    font-weight: 700;
}

.search-player-name .search-player-name-link,
.search-player-name .pl-name-text {
    font-size: inherit;
}

.search-player-head { flex: 1; min-width: 0; }

.search-player-arrow {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(var(--accent-rgb), 0.08);
    color: var(--accent);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.2s, transform 0.2s;
}

.search-player-card-v2:hover .search-player-arrow {
    opacity: 1;
    transform: translateX(0);
}

.search-player-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.search-player-chips .server-hero-chip {
    font-size: 0.78rem;
    padding: 0.28rem 0.6rem;
}

.news-page-v2 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.news-empty-v2 {
    border: 1px dashed rgba(var(--accent-rgb), 0.22);
}

.news-feed-v2 { gap: 1rem; }

.news-card-v2 {
    position: relative;
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(15, 22, 16, 0.72) 0%, rgba(10, 15, 10, 0.98) 100%);
    border-color: rgba(var(--accent-rgb), 0.16);
    box-shadow:
        0 0 0 1px rgba(var(--accent-rgb), 0.06),
        0 10px 32px rgba(0, 0, 0, 0.28);
}

.news-card-v2.news-card--poll {
    border-color: rgba(168, 85, 247, 0.28);
    box-shadow:
        0 0 0 1px rgba(168, 85, 247, 0.08),
        0 10px 32px rgba(0, 0, 0, 0.28);
}

.news-card-corner {
    position: absolute;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(var(--accent-rgb), 0.4);
    pointer-events: none;
    z-index: 2;
}

.news-card--poll .news-card-corner {
    border-color: rgba(168, 85, 247, 0.45);
}

.news-card-corner--tl { top: 0.5rem; left: 0.5rem; border-right: none; border-bottom: none; border-radius: 3px 0 0 0; }
.news-card-corner--br { bottom: 0.5rem; right: 0.5rem; border-left: none; border-top: none; border-radius: 0 0 3px 0; }

.news-card-v2 .news-card-head {
    padding: 1.05rem 1.25rem 1.05rem 1rem;
    gap: 0.85rem;
}

.news-card-index {
    flex-shrink: 0;
    width: 2rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    text-align: center;
    opacity: 0.85;
}

.news-card-v2 .news-card-icon {
    width: 46px;
    height: 46px;
    border-radius: 10px;
}

.news-card--poll .news-card-icon {
    color: #c4b5fd;
    background: rgba(168, 85, 247, 0.12);
    border-color: rgba(168, 85, 247, 0.35);
}

.news-card-v2 .news-card-title {
    font-family: var(--font-display);
    font-size: clamp(0.98rem, 2vw, 1.12rem);
    letter-spacing: 0.03em;
}

.news-card-v2 .post-poll-badge {
    margin-right: 0.35rem;
}

.news-card-v2.is-open {
    border-color: rgba(var(--accent-rgb), 0.38);
    box-shadow: var(--shadow), 0 0 28px rgba(var(--accent-rgb), 0.08);
}

.news-card-v2.news-card--poll.is-open {
    border-color: rgba(168, 85, 247, 0.45);
    box-shadow: var(--shadow), 0 0 28px rgba(168, 85, 247, 0.1);
}

.news-card-v2 .news-like-count {
    color: var(--accent-dim);
}

.news-card-v2 .news-card-body-inner .post-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border);
}

.news-list-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem 1rem;
    margin-top: 0.35rem;
    padding: 1rem 1.15rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(var(--accent-rgb), 0.16);
    background: rgba(0, 0, 0, 0.22);
}

.news-foot-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-muted);
    font-size: 0.88rem;
    font-weight: 600;
}

.news-foot-stat i { color: var(--accent); }

.news-pagination-v2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.news-page-gap {
    padding: 0 0.2rem;
    color: var(--text-muted);
    font-weight: 700;
    user-select: none;
}

.news-pagination-v2 .btn-tab-active {
    box-shadow: none;
}

@media (max-width: 768px) {
    .news-hero-v2--themed { padding: 1.15rem 1.2rem; }
    .news-card-v2 .news-card-head { flex-wrap: wrap; }
    .news-card-index { display: none; }
    .news-list-foot { flex-direction: column; align-items: stretch; }
    .news-pagination-v2 { justify-content: center; }
}

/* ── v2: rules ── */

.rules-hero-v2 {
    position: relative;
    margin-bottom: 1.5rem;
    padding: 1.5rem 1.75rem;
    background: linear-gradient(135deg, rgba(15, 22, 16, 0.98) 0%, rgba(10, 15, 10, 0.98) 100%);
    border: 1px solid rgba(250, 204, 21, 0.22);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow), 0 0 36px rgba(250, 204, 21, 0.05);
    overflow: hidden;
}

.rules-hero-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 14% 50%, rgba(250, 204, 21, 0.07) 0%, transparent 55%),
        radial-gradient(ellipse at 88% 0%, rgba(var(--accent-rgb), 0.06) 0%, transparent 45%);
    pointer-events: none;
}

.rules-hero-content { position: relative; }

.rules-hero-v2 h1 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 3vw, 2.1rem);
    color: #facc15;
    margin: 0 0 0.35rem;
}

.rules-hero-v2 p {
    margin: 0 0 1rem;
    color: var(--text-muted);
    max-width: 52ch;
}

.rules-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.rules-chip-count {
    font-weight: 700;
    color: #fde68a;
    border-color: rgba(250, 204, 21, 0.4);
    background: rgba(250, 204, 21, 0.1);
}

.rules-chip-action {
    text-decoration: none;
    color: var(--accent);
    border-color: rgba(var(--accent-rgb), 0.4);
    background: rgba(var(--accent-rgb), 0.1);
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.rules-chip-action:hover {
    color: #fff;
    border-color: rgba(var(--accent-rgb), 0.55);
    background: rgba(var(--accent-rgb), 0.18);
}

.rules-page-v2 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.rules-empty-v2 {
    border: 1px dashed rgba(250, 204, 21, 0.22);
}

.rules-card-v2 {
    border-color: rgba(250, 204, 21, 0.18);
    box-shadow:
        0 0 0 1px rgba(250, 204, 21, 0.06),
        0 10px 32px rgba(0, 0, 0, 0.28);
}

.rules-card-v2 .news-card-corner {
    border-color: rgba(250, 204, 21, 0.38);
}

.rules-card-v2.is-open {
    border-color: rgba(250, 204, 21, 0.38);
    box-shadow: var(--shadow), 0 0 28px rgba(250, 204, 21, 0.08);
}

.rules-card-icon {
    color: #facc15 !important;
    background: rgba(250, 204, 21, 0.1) !important;
    border-color: rgba(250, 204, 21, 0.32) !important;
}

.rules-content-v2 {
    padding: 1rem 1.05rem;
    background: rgba(0, 0, 0, 0.24);
    border: 1px solid rgba(250, 204, 21, 0.12);
    border-radius: 10px;
    line-height: 1.65;
}

.rules-list-foot {
    border-color: rgba(250, 204, 21, 0.16);
}

.rules-list-foot .news-foot-stat i {
    color: #facc15;
}

@media (max-width: 768px) {
    .rules-hero-v2 { padding: 1.15rem 1.2rem; }
}

/* ── v2: bans ── */

.bans-hero-v2,
.gags-hero-v2 {
    position: relative;
    margin-bottom: 1.5rem;
    padding: 1.5rem 1.75rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
    background: linear-gradient(135deg, rgba(15, 22, 16, 0.98) 0%, rgba(10, 15, 10, 0.98) 100%);
}

.bans-hero-v2 {
    border: 1px solid rgba(239, 68, 68, 0.28);
    box-shadow: var(--shadow), 0 0 36px rgba(239, 68, 68, 0.06);
}

.gags-hero-v2 {
    border: 1px solid rgba(245, 158, 11, 0.28);
    box-shadow: var(--shadow), 0 0 36px rgba(245, 158, 11, 0.06);
}

.bans-hero-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 12% 50%, rgba(239, 68, 68, 0.09) 0%, transparent 55%);
    pointer-events: none;
}

.gags-hero-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 12% 50%, rgba(245, 158, 11, 0.08) 0%, transparent 55%);
    pointer-events: none;
}

.bans-hero-content,
.gags-hero-content { position: relative; }

.bans-hero-v2 h1 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 3vw, 2.1rem);
    color: #f87171;
    margin: 0 0 0.35rem;
}

.gags-hero-v2 h1 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 3vw, 2.1rem);
    color: #fbbf24;
    margin: 0 0 0.35rem;
}

.bans-hero-v2 p,
.gags-hero-v2 p {
    margin: 0 0 1rem;
    color: var(--text-muted);
    max-width: 52ch;
}

.bans-hero-chips,
.gags-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.bans-chip-count {
    font-weight: 700;
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.12);
}

.gags-chip-count {
    font-weight: 700;
    color: #fde68a;
    border-color: rgba(245, 158, 11, 0.4);
    background: rgba(245, 158, 11, 0.12);
}

.bans-chip-staff {
    color: #86efac;
    border-color: rgba(var(--accent-rgb), 0.35);
    background: rgba(var(--accent-rgb), 0.1);
}

.gags-chip-staff {
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.35);
    background: rgba(59, 130, 246, 0.1);
}

.bans-panel-v2,
.gags-panel-v2 { margin-bottom: 2rem; }

.bans-card-v2,
.gags-card-v2 {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.bans-card-v2 {
    border-color: rgba(239, 68, 68, 0.18);
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.06), 0 12px 36px rgba(0, 0, 0, 0.3);
}

.gags-card-v2 {
    border-color: rgba(245, 158, 11, 0.18);
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.06), 0 12px 36px rgba(0, 0, 0, 0.3);
}

.bans-toolbar-v2,
.gags-toolbar-v2 {
    background: rgba(0, 0, 0, 0.22);
}

.bans-table-foot-v2,
.gags-table-foot-v2 {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    border-top: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.28);
}

.bans-foot-stat i { color: #f87171; }
.gags-foot-stat i { color: #fbbf24; }

.bans-pagination-v2,
.gags-pagination-v2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.bans-page-gap,
.gags-page-gap {
    padding: 0 0.2rem;
    color: var(--text-muted);
    font-weight: 700;
}

.bans-empty-v2,
.gags-empty-v2 {
    padding: 2rem 1rem;
    text-align: center;
}

.bans-empty-v2 i,
.gags-empty-v2 i {
    color: #4ade80;
    font-size: 1.5rem;
    margin-right: 0.35rem;
}

.bans-player-link,
.gags-player-link {
    font-weight: 700;
}

.bans-table-v2 thead th {
    background: linear-gradient(180deg, rgba(20, 12, 12, 0.98) 0%, rgba(12, 8, 8, 0.98) 100%);
}

.gags-table-v2 thead th {
    background: linear-gradient(180deg, rgba(18, 14, 8, 0.98) 0%, rgba(10, 10, 8, 0.98) 100%);
}

/* ── v2: search enhanced ── */

.search-hero-v2--themed {
    border-color: rgba(96, 165, 250, 0.28);
    box-shadow: var(--shadow), 0 0 36px rgba(96, 165, 250, 0.06);
}

.search-hero-v2--themed .search-hero-glow {
    background:
        radial-gradient(ellipse at 10% 50%, rgba(96, 165, 250, 0.1) 0%, transparent 55%),
        radial-gradient(ellipse at 90% 0%, rgba(var(--accent-rgb), 0.06) 0%, transparent 45%);
}

.search-hero-v2--themed h1 {
    color: #93c5fd;
}

.search-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 1rem;
}

.search-chip-count {
    font-weight: 700;
    color: #93c5fd;
    border-color: rgba(96, 165, 250, 0.4);
    background: rgba(96, 165, 250, 0.12);
}

/* Search results list — themed cards, same icons/chips layout */

.search-results-themed .search-results-head h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #93c5fd;
}

.search-results-themed .search-results-head h2 i {
    font-size: 0.9em;
    opacity: 0.85;
}

.search-results-grid-themed {
    gap: 1rem;
}

.search-player-card-themed {
    position: relative;
    overflow: hidden;
    border-color: rgba(96, 165, 250, 0.2);
    background: linear-gradient(145deg, rgba(14, 20, 24, 0.98) 0%, rgba(9, 14, 11, 0.98) 100%);
    box-shadow:
        0 0 0 1px rgba(96, 165, 250, 0.07),
        0 10px 30px rgba(0, 0, 0, 0.28);
}

.search-player-card-themed:hover {
    border-color: rgba(96, 165, 250, 0.42);
    box-shadow:
        0 0 0 1px rgba(96, 165, 250, 0.14),
        0 14px 34px rgba(0, 0, 0, 0.34),
        0 0 28px rgba(96, 165, 250, 0.07);
}

.search-card-corner {
    position: absolute;
    width: 11px;
    height: 11px;
    border: 2px solid rgba(96, 165, 250, 0.42);
    pointer-events: none;
    z-index: 2;
    transition: border-color 0.2s;
}

.search-card-corner--tl {
    top: 0.55rem;
    left: 0.55rem;
    border-right: none;
    border-bottom: none;
    border-radius: 3px 0 0 0;
}

.search-card-corner--br {
    bottom: 0.55rem;
    right: 0.55rem;
    border-left: none;
    border-top: none;
    border-radius: 0 0 3px 0;
}

.search-player-card-themed:hover .search-card-corner {
    border-color: rgba(var(--accent-rgb), 0.5);
}

.search-player-avatar-themed {
    color: #7dd3fc;
    background: linear-gradient(145deg, rgba(56, 189, 248, 0.14) 0%, rgba(96, 165, 250, 0.08) 100%);
    border-color: rgba(56, 189, 248, 0.38);
    box-shadow: 0 0 18px rgba(56, 189, 248, 0.1);
    transition: color 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.search-player-card-themed:hover .search-player-avatar-themed {
    color: #86efac;
    background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.14) 0%, rgba(34, 197, 94, 0.08) 100%);
    border-color: rgba(74, 222, 128, 0.42);
    box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.12);
}

.search-results-themed .search-player-name .pl-name-text,
.search-results-themed .search-player-name .search-player-name-link {
    font-weight: 800;
}

.search-results-themed .search-player-badges {
    margin-top: 0.3rem;
}

.search-results-themed .search-player-arrow {
    background: rgba(96, 165, 250, 0.1);
    color: #93c5fd;
}

.search-results-themed .search-player-card-themed:hover .search-player-arrow {
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--accent);
}

.search-results-themed .search-player-chips .server-hero-chip {
    font-weight: 700;
    letter-spacing: 0.01em;
}

.search-chip-points {
    color: #fde68a;
    border-color: rgba(250, 204, 21, 0.38);
    background: rgba(250, 204, 21, 0.1);
}

.search-chip-points i {
    color: #facc15;
}

.search-chip-prestige {
    color: #e9d5ff;
    border-color: rgba(192, 132, 252, 0.38);
    background: rgba(168, 85, 247, 0.12);
}

.search-chip-prestige i {
    color: #c084fc;
}

.search-chip-rank {
    color: #fcd34d;
    border-color: rgba(245, 158, 11, 0.38);
    background: rgba(245, 158, 11, 0.1);
}

.search-chip-rank i {
    color: #f59e0b;
}

.search-chip-kd {
    color: #fca5a5;
    border-color: rgba(248, 113, 113, 0.32);
    background: rgba(239, 68, 68, 0.09);
}

.search-chip-kd i {
    color: #f87171;
}

.search-chip-seen {
    color: #bae6fd;
    border-color: rgba(56, 189, 248, 0.32);
    background: rgba(14, 165, 233, 0.1);
}

.search-chip-seen i {
    color: #38bdf8;
}

.search-empty-themed {
    border: 1px dashed rgba(96, 165, 250, 0.24);
    background: linear-gradient(180deg, rgba(12, 18, 22, 0.6) 0%, rgba(8, 12, 10, 0.5) 100%);
}

.search-empty-themed > i {
    color: #93c5fd;
    opacity: 0.55;
}

/* ── v3: profile stats ── */

.profile-page-v3 { gap: 1.15rem; }

.profile-panel-card-v2,
.profile-stat-card-v2 {
    border-radius: var(--radius-lg);
    border-color: rgba(var(--accent-rgb), 0.16);
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.05), 0 10px 32px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.profile-panel-card-v2 .card-header,
.profile-stat-card-v2 .card-header {
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.12);
}

.profile-stat-card--csstats {
    border-color: rgba(250, 204, 21, 0.18);
}

.profile-stat-card--csstats .card-header {
    border-bottom-color: rgba(250, 204, 21, 0.12);
}

.profile-prestige-card-v2 {
    border-color: rgba(168, 85, 247, 0.22);
}

.profile-prestige-card-v2 .card-header {
    border-bottom-color: rgba(168, 85, 247, 0.15);
}

.profile-stats-layer-v2 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
}

.profile-stat-card-v2 .card-body {
    flex: 1 1 auto;
    height: 18.5rem;
    min-height: 18.5rem;
    max-height: 18.5rem;
    padding: 1rem 1.1rem 1.15rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.profile-stat-card-v2 .players-scroll-box {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
}

.profile-stat-card-v2 .profile-stat-scroll,
.profile-stat-card-v2 .profile-prestige-scroll {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
}

.profile-prestige-card-v2 .players-scroll-box {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.32), rgba(76, 29, 149, 0.18), rgba(168, 85, 247, 0.14));
    box-shadow:
        0 0 0 1px rgba(168, 85, 247, 0.14),
        inset 0 0 24px rgba(0, 0, 0, 0.35);
}

.profile-prestige-card-v2 .players-scroll {
    scrollbar-color: #a855f7 rgba(0, 0, 0, 0.35);
}

.profile-prestige-card-v2 .players-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #7c3aed, #c084fc);
    border-color: rgba(168, 85, 247, 0.35);
}

.profile-prestige-card-v2 .players-scroll::-webkit-scrollbar-thumb:hover {
    background: #c084fc;
}

.profile-account-grid,
.profile-stat-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.65rem;
}

.profile-stat-tile {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.85rem 0.9rem;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(var(--accent-rgb), 0.12);
    transition: border-color 0.2s, background 0.2s;
}

.profile-stat-tile:hover {
    border-color: rgba(var(--accent-rgb), 0.22);
    background: rgba(0, 0, 0, 0.34);
}

.profile-stat-tile--accent {
    border-color: rgba(var(--accent-rgb), 0.28);
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08) 0%, rgba(0, 0, 0, 0.3) 100%);
}

.profile-stat-tile--gold {
    border-color: rgba(250, 204, 21, 0.28);
    background: linear-gradient(135deg, rgba(250, 204, 21, 0.08) 0%, rgba(0, 0, 0, 0.3) 100%);
}

.profile-stat-tile--gold .profile-stat-tile-icon { color: #facc15; }
.profile-stat-tile--gold .profile-stat-tile-value { color: #fde68a; }

.profile-stat-tile-icon {
    color: var(--accent);
    font-size: 0.95rem;
    opacity: 0.9;
}

.profile-stat-tile-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.profile-stat-tile-value {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--accent);
    line-height: 1.2;
    word-break: break-word;
}

.profile-stat-tile-value-sm {
    font-size: 1rem;
    color: var(--text);
}

.profile-stat-empty {
    margin: 0;
    padding: 1rem 0.5rem;
    text-align: center;
}

.profile-prestige-list-v2 {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.profile-prestige-item-v2 {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.65rem;
    align-items: center;
    padding: 0.75rem 0.85rem;
    margin: 0;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(168, 85, 247, 0.18);
    border-left: 3px solid #c084fc;
    transition: border-color 0.2s, background 0.2s;
}

.profile-prestige-item-v2:hover {
    border-color: rgba(168, 85, 247, 0.35);
    background: rgba(168, 85, 247, 0.06);
}

.profile-prestige-item-v2 .profile-prestige-icon {
    color: #c084fc;
    font-size: 1rem;
}

@media (max-width: 900px) {
    .profile-stats-layer-v2 { grid-template-columns: 1fr; }
    .bans-hero-v2,
    .gags-hero-v2 { padding: 1.15rem 1.2rem; }
    .bans-table-foot-v2,
    .gags-table-foot-v2 { flex-direction: column; align-items: stretch; }
    .bans-pagination-v2,
    .gags-pagination-v2 { justify-content: center; }
}

@media (max-width: 768px) {
    .profile-hero-v2 {
        flex-direction: column;
        padding: 1.15rem;
    }

    .profile-hero-actions {
        width: 100%;
    }

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

    .search-hero-form {
        flex-direction: column;
    }

    .search-hero-form .btn {
        width: 100%;
    }

    .search-results-grid {
        grid-template-columns: 1fr;
    }
}

/* ── v2: roulette ── */

.roulette-hero-v2 {
    position: relative;
    margin-bottom: 1.5rem;
    padding: 1.5rem 1.75rem;
    background: linear-gradient(135deg, rgba(15, 22, 16, 0.98) 0%, rgba(10, 15, 10, 0.98) 100%);
    border: 1px solid rgba(var(--accent-rgb), 0.22);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow), 0 0 36px rgba(var(--accent-rgb), 0.05);
    overflow: hidden;
}

.roulette-hero-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(var(--accent-rgb), 0.08) 0%, transparent 55%),
        radial-gradient(ellipse at 90% 0%, rgba(250, 204, 21, 0.06) 0%, transparent 45%);
    pointer-events: none;
}

.roulette-hero-content {
    position: relative;
}

.roulette-hero-v2 h1 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 3vw, 2.1rem);
    color: var(--accent);
    margin: 0 0 0.35rem;
}

.roulette-hero-v2 p {
    margin: 0 0 1rem;
    color: var(--text-muted);
}

.roulette-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.roulette-chip-spins {
    font-weight: 700;
    color: var(--accent);
    border-color: rgba(var(--accent-rgb), 0.4);
    background: rgba(var(--accent-rgb), 0.1);
}

.roulette-chip-spins #roulette-remaining {
    font-size: 1.05em;
}

.roulette-chip-pending {
    color: #fde68a;
    border-color: rgba(251, 191, 36, 0.4);
    background: rgba(251, 191, 36, 0.1);
}

.roulette-chip-pending-btn {
    cursor: pointer;
    font: inherit;
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.15s;
}

.roulette-chip-pending-btn:hover,
.roulette-chip-pending-btn:focus-visible {
    border-color: rgba(251, 191, 36, 0.65);
    background: rgba(251, 191, 36, 0.16);
    box-shadow: 0 0 14px rgba(251, 191, 36, 0.18);
    outline: none;
}

.roulette-chip-pending-btn:active {
    transform: translateY(1px);
}

.roulette-chip-pending-chevron {
    font-size: 0.65em;
    opacity: 0.75;
    margin-left: 0.1rem;
}

.roulette-chip-preview {
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.4);
    background: rgba(59, 130, 246, 0.1);
}

.roulette-chip-pool {
    color: #d8b4fe;
    border-color: rgba(192, 132, 252, 0.35);
    background: rgba(192, 132, 252, 0.08);
}

.roulette-chip-balance {
    font-weight: 600;
}

.roulette-chip-balance-points {
    color: #86efac;
    border-color: rgba(var(--accent-rgb), 0.35);
    background: rgba(var(--accent-rgb), 0.08);
}

.roulette-chip-balance-prestige {
    color: #fde68a;
    border-color: rgba(251, 191, 36, 0.4);
    background: rgba(251, 191, 36, 0.1);
}

.roulette-chip-balance.is-live {
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.12);
}

.roulette-chip-balance.has-pending {
    border-style: dashed;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.12);
}

.roulette-chip-balance-sync {
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.35);
    background: rgba(59, 130, 246, 0.1);
    font-size: 0.82rem;
    padding: 0.4rem 0.55rem;
    min-width: 2rem;
    justify-content: center;
}

.roulette-chip-balance-sync[hidden] {
    display: none !important;
}

.roulette-chip-balance-sync.is-active {
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.2);
}

.roulette-chip-balance-sync.is-active .fa-rotate {
    animation: fa-spin 1s linear infinite;
}

.roulette-card-preview .roulette-stage-frame {
    border-color: rgba(59, 130, 246, 0.22);
}

.roulette-card-v2 {
    border-radius: var(--radius-lg);
    border-color: rgba(var(--accent-rgb), 0.18);
    overflow: hidden;
}

.roulette-body-v2 {
    padding: 1.5rem 1.25rem 1.75rem;
}

.roulette-stage {
    max-width: 900px;
    margin: 0 auto 1.25rem;
}

.roulette-stage-frame {
    position: relative;
    padding: 0.75rem;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(var(--accent-rgb), 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.roulette-stage-corner {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    pointer-events: none;
    z-index: 2;
}

.roulette-stage-corner--tl { top: 0.55rem; left: 0.55rem; border-right: none; border-bottom: none; border-radius: 4px 0 0 0; }
.roulette-stage-corner--tr { top: 0.55rem; right: 0.55rem; border-left: none; border-bottom: none; border-radius: 0 4px 0 0; }
.roulette-stage-corner--bl { bottom: 0.55rem; left: 0.55rem; border-right: none; border-top: none; border-radius: 0 0 0 4px; }
.roulette-stage-corner--br { bottom: 0.55rem; right: 0.55rem; border-left: none; border-top: none; border-radius: 0 0 4px 0; }

.roulette-stage-lights {
    display: none;
}

.roulette-body-v2 .roulette-machine {
    max-width: none;
    margin: 0;
}

.roulette-body-v2 .roulette-viewport {
    height: 228px;
    border-radius: 8px;
    border-width: 1px;
}

.roulette-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}

.roulette-spin-btn {
    position: relative;
    overflow: hidden;
    min-width: 220px;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
    color: #052e16;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: transform 0.2s ease;
}

.roulette-spin-btn.btn-primary {
    background: transparent;
    box-shadow: none;
}

.roulette-spin-btn.btn-primary:hover {
    background: transparent;
    color: #052e16;
    box-shadow: none;
}

.roulette-spin-btn::before,
.roulette-spin-btn::after {
    content: none;
}

.roulette-spin-btn-shine {
    display: none;
}

.roulette-spin-btn-inner {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.85rem 2rem;
    border-radius: 10px;
    background: linear-gradient(180deg, #2dd46a 0%, #16a34a 55%, #15803d 100%);
    border: 1px solid rgba(187, 247, 208, 0.35);
    box-shadow:
        0 4px 16px rgba(34, 197, 94, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: box-shadow 0.2s ease, filter 0.2s ease;
}

.roulette-spin-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    font-size: 0.95rem;
    opacity: 0.95;
}

.roulette-spin-btn-label {
    line-height: 1.2;
}

.roulette-spin-btn:hover:not(:disabled) {
    transform: translateY(-2px);
}

.roulette-spin-btn:hover:not(:disabled) .roulette-spin-btn-inner {
    box-shadow:
        0 10px 30px rgba(34, 197, 94, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        inset 0 -1px 0 rgba(0, 0, 0, 0.12);
    filter: brightness(1.04);
}

.roulette-spin-btn:active:not(:disabled) {
    transform: translateY(0);
}

.roulette-spin-btn:active:not(:disabled) .roulette-spin-btn-inner {
    box-shadow:
        0 4px 16px rgba(34, 197, 94, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.roulette-spin-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.roulette-spin-btn:disabled .roulette-spin-btn-inner {
    filter: grayscale(0.15);
}

.roulette-action-hint {
    margin: 0;
    text-align: center;
}

.roulette-body-v2 .roulette-result {
    margin-top: 1.1rem;
    border-radius: 14px;
    font-size: 1rem;
    animation: roulette-result-in 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.roulette-body-v2 .roulette-result.is-win {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.roulette-result-card {
    display: flex;
    align-items: flex-start;
    gap: 0.95rem;
    padding: 1rem 1.15rem;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.14) 0%, rgba(10, 16, 10, 0.92) 100%);
    border: 1px solid rgba(var(--accent-rgb), 0.28);
    box-shadow:
        0 10px 36px rgba(var(--accent-rgb), 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.roulette-result-icon {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.1rem;
    background: rgba(var(--accent-rgb), 0.14);
    border: 1px solid rgba(var(--accent-rgb), 0.32);
    color: var(--accent);
    box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.12);
}

.roulette-result-icon--prestige {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.12);
    border-color: rgba(251, 191, 36, 0.35);
    box-shadow: 0 0 18px rgba(251, 191, 36, 0.1);
}

.roulette-result-icon--item {
    color: #c084fc;
    background: rgba(192, 132, 252, 0.12);
    border-color: rgba(192, 132, 252, 0.35);
    box-shadow: 0 0 18px rgba(192, 132, 252, 0.1);
}

.roulette-result-copy {
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
    min-width: 0;
    text-align: left;
}

.roulette-result-eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(134, 239, 172, 0.9);
}

.roulette-result-prize {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.25;
    color: #fde68a;
    text-shadow: 0 0 20px rgba(251, 191, 36, 0.15);
}

.roulette-result-hint {
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.roulette-result-note {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.3rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #86efac;
}

.roulette-result-note i {
    font-size: 0.72rem;
}

@keyframes roulette-result-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.roulette-body-v2 .roulette-result strong {
    color: #fbbf24;
}

.roulette-odds-card-v2 {
    max-width: 920px;
    margin: 0 auto 1rem;
    padding: 1.1rem 1.25rem 1.2rem;
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(8, 12, 8, 0.35) 100%);
    border: 1px solid rgba(var(--accent-rgb), 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.roulette-odds-tier-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 0.85rem;
}

.roulette-odds-tier-pill {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    border: 1px solid transparent;
}

.roulette-odds-tier-pill--ultra {
    color: #e9d5ff;
    border-color: rgba(192, 132, 252, 0.45);
    background: rgba(192, 132, 252, 0.12);
}

.roulette-odds-tier-pill--rare {
    color: #fde68a;
    border-color: rgba(251, 191, 36, 0.4);
    background: rgba(251, 191, 36, 0.1);
}

.roulette-odds-tier-pill--uncommon {
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.35);
    background: rgba(59, 130, 246, 0.1);
}

.roulette-odds-tier-pill--common {
    color: #86efac;
    border-color: rgba(var(--accent-rgb), 0.35);
    background: rgba(var(--accent-rgb), 0.08);
}

.roulette-odds-tier {
    margin-bottom: 1rem;
}

.roulette-odds-tier:last-child {
    margin-bottom: 0;
}

.roulette-odds-tier-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.55rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.roulette-odds-tier-title--ultra { color: #c084fc; }
.roulette-odds-tier-title--rare { color: #fbbf24; }
.roulette-odds-tier-title--uncommon { color: #60a5fa; }
.roulette-odds-tier-title--common { color: var(--accent); }

.roulette-odds-tier-count {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
    letter-spacing: 0;
    text-transform: none;
}

.roulette-odds-list-v2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.35rem;
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: roulette-odds;
}

@media (min-width: 720px) {
    .roulette-odds-list-v2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.4rem 0.75rem;
    }
}

.roulette-odds-card-v2 .roulette-odds-scroll-box {
    max-height: 340px;
}

.roulette-odds-card-v2 .roulette-odds-row {
    border-radius: 8px;
    transition: border-color 0.2s, background 0.2s;
    margin-bottom: 0;
}

.roulette-odds-card-v2 .roulette-odds-row:hover {
    border-color: rgba(var(--accent-rgb), 0.3);
    background: rgba(var(--accent-rgb), 0.04);
}

.roulette-odds-row--tier-ultra {
    border-color: rgba(192, 132, 252, 0.22);
    background: rgba(192, 132, 252, 0.04);
}

.roulette-odds-row--tier-ultra:hover {
    border-color: rgba(192, 132, 252, 0.4) !important;
    background: rgba(192, 132, 252, 0.08) !important;
}

.roulette-odds-row--tier-rare {
    border-color: rgba(251, 191, 36, 0.18);
}

.roulette-odds-card-v2 .roulette-odds-pct {
    min-width: 3.25rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.roulette-body-v2 .roulette-queue-hint {
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}

.roulette-chip-paid {
    color: #fde68a;
    border-color: rgba(251, 191, 36, 0.45);
    background: rgba(251, 191, 36, 0.1);
}

.roulette-chip-paid-text {
    white-space: nowrap;
    letter-spacing: normal;
    font-variant-numeric: tabular-nums;
}

.roulette-chip-paid-cost {
    font-weight: 700;
}

.roulette-chip-paid-progress {
    margin-left: 0.3em;
    opacity: 0.92;
}

.roulette-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(4px);
}

.roulette-confirm-overlay[hidden] {
    display: none !important;
}

.roulette-confirm-dialog {
    width: min(100%, 420px);
    padding: 1.35rem 1.4rem;
    border-radius: 12px;
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    background: linear-gradient(165deg, rgba(18, 24, 20, 0.98), rgba(8, 12, 10, 0.98));
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}

.roulette-confirm-dialog h3 {
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
}

.roulette-confirm-dialog h3 i {
    color: #fbbf24;
    margin-right: 0.35rem;
}

.roulette-confirm-dialog p {
    margin: 0 0 1.1rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.roulette-confirm-dialog p strong {
    color: #fde68a;
}

.roulette-confirm-actions {
    display: flex;
    gap: 0.65rem;
    justify-content: flex-end;
}

.roulette-pending-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(4px);
}

.roulette-pending-overlay[hidden] {
    display: none !important;
}

.roulette-pending-dialog {
    width: min(100%, 480px);
    max-height: min(88vh, 640px);
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1.35rem 1.15rem;
    border-radius: 12px;
    border: 1px solid rgba(251, 191, 36, 0.28);
    background: linear-gradient(165deg, rgba(22, 20, 12, 0.98), rgba(10, 10, 8, 0.98));
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), 0 0 40px rgba(251, 191, 36, 0.06);
}

.roulette-pending-dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.55rem;
}

.roulette-pending-dialog-header h3 {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.35;
}

.roulette-pending-dialog-header h3 i {
    color: #fbbf24;
    margin-right: 0.35rem;
}

.roulette-pending-close {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.roulette-pending-close:hover,
.roulette-pending-close:focus-visible {
    color: #fde68a;
    border-color: rgba(251, 191, 36, 0.35);
    background: rgba(251, 191, 36, 0.08);
    outline: none;
}

.roulette-pending-summary {
    margin: 0 0 0.85rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.roulette-pending-scroll-box {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 340px;
    margin-bottom: 0.85rem;
}

.roulette-pending-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.75rem;
    margin-bottom: 0.4rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    transition: border-color 0.2s, background 0.2s;
}

.roulette-pending-row:last-child {
    margin-bottom: 0;
}

.roulette-pending-row:hover {
    border-color: rgba(251, 191, 36, 0.28);
    background: rgba(251, 191, 36, 0.05);
}

.roulette-pending-row-icon {
    width: 2.1rem;
    height: 2.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 0.95rem;
}

.roulette-pending-row--points .roulette-pending-row-icon {
    color: #86efac;
    background: rgba(var(--accent-rgb), 0.1);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
}

.roulette-pending-row--prestige .roulette-pending-row-icon {
    color: #fde68a;
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.28);
}

.roulette-pending-row--item .roulette-pending-row-icon {
    color: #d8b4fe;
    background: rgba(192, 132, 252, 0.12);
    border: 1px solid rgba(192, 132, 252, 0.28);
}

.roulette-pending-row-body {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}

.roulette-pending-row-label {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.roulette-pending-row-meta {
    font-size: 0.74rem;
    color: var(--text-muted);
}

.roulette-pending-row-progress {
    color: #93c5fd;
}

.roulette-pending-row-time {
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.roulette-pending-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-muted);
}

.roulette-pending-empty i {
    font-size: 1.5rem;
    opacity: 0.55;
}

.roulette-pending-empty p {
    margin: 0;
    font-size: 0.88rem;
}

.roulette-pending-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
    margin-bottom: 0.85rem;
}

.roulette-pending-offline {
    margin: 0;
    padding: 0.65rem 0.75rem;
    border-radius: 8px;
    border: 1px solid rgba(251, 191, 36, 0.22);
    background: rgba(251, 191, 36, 0.06);
    font-size: 0.82rem;
    line-height: 1.45;
}

.roulette-pending-offline i {
    color: #fbbf24;
    margin-right: 0.35rem;
}

.roulette-pending-claim-btn {
    width: 100%;
    justify-content: center;
    gap: 0.45rem;
    font-weight: 700;
}

.roulette-pending-claim-btn.is-ready:not(:disabled) {
    box-shadow: 0 0 18px rgba(251, 191, 36, 0.18);
}

.roulette-pending-claim-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.roulette-pending-claim-msg {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.45;
    padding: 0.55rem 0.65rem;
    border-radius: 8px;
}

.roulette-pending-claim-msg--success {
    color: #86efac;
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    background: rgba(var(--accent-rgb), 0.08);
}

.roulette-pending-claim-msg--error {
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.25);
    background: rgba(239, 68, 68, 0.08);
}

.roulette-pending-claim-msg--info {
    color: var(--text-muted);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

.roulette-pending-footer {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.45;
}

.admin-settings-subhead {
    grid-column: 1 / -1;
    margin: 1rem 0 0.25rem;
    font-size: 0.95rem;
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .roulette-hero-v2 {
        padding: 1.15rem;
    }

    .roulette-body-v2 {
        padding: 1rem 0.85rem 1.25rem;
    }

    .roulette-stage-frame {
        padding: 0.75rem 0.65rem 0.85rem;
    }

    .roulette-stage-lights {
        left: 1rem;
        right: 1rem;
    }

    .roulette-spin-btn {
        width: 100%;
        max-width: 320px;
    }
}

/* Homepage promos, player list kills label, top15 names */

.server-hero-chip-happy-hour {
    color: #fde68a;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-color: rgba(251, 191, 36, 0.5);
    background: rgba(251, 191, 36, 0.12);
    box-shadow: 0 0 16px rgba(251, 191, 36, 0.12);
}

.server-hero-chip-vip-free {
    color: #e9d5ff;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-color: rgba(192, 132, 252, 0.5);
    background: rgba(192, 132, 252, 0.12);
    box-shadow: 0 0 16px rgba(192, 132, 252, 0.1);
}

.server-hero-chip-banner {
    cursor: pointer;
    font: inherit;
    color: #e2e8f0;
    border-color: rgba(59, 130, 246, 0.4);
    background: rgba(15, 23, 42, 0.65);
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, color 0.2s;
}

.server-hero-chip-banner:hover,
.server-hero-chip-banner:focus-visible {
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.65);
    background: rgba(30, 58, 95, 0.55);
    box-shadow: 0 0 14px rgba(59, 130, 246, 0.18);
    outline: none;
}

.server-banner-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(4px);
}

.server-banner-overlay[hidden] {
    display: none !important;
}

.server-banner-dialog {
    width: min(100%, 560px);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem 1.35rem 1.15rem;
    border-radius: 12px;
    border: 1px solid rgba(59, 130, 246, 0.35);
    background: linear-gradient(165deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.98));
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65), 0 0 28px rgba(59, 130, 246, 0.08);
}

.server-banner-dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.server-banner-dialog-header h3 {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.35;
}

.server-banner-dialog-header h3 i {
    color: #60a5fa;
    margin-right: 0.35rem;
}

.server-banner-close {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.25);
    color: var(--text-muted);
    cursor: pointer;
}

.server-banner-close:hover {
    color: #fff;
    border-color: rgba(59, 130, 246, 0.45);
}

.server-banner-hint {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.server-banner-preview {
    padding: 1.1rem;
    border-radius: 10px;
    border: 1px solid rgba(59, 130, 246, 0.28);
    background: #000;
    overflow-x: auto;
    display: flex;
    justify-content: center;
}

.server-banner-preview img {
    display: block;
    max-width: none;
    width: 770px;
    height: 40px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.35), 0 4px 18px rgba(0, 0, 0, 0.45);
}

.server-banner-code-label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.server-banner-code {
    width: 100%;
    min-height: 4.5rem;
    resize: vertical;
    padding: 0.7rem 0.8rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.35);
    color: var(--text);
    font-family: Consolas, 'Courier New', monospace;
    font-size: 0.82rem;
    line-height: 1.45;
}

.server-banner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.server-banner-actions .btn.is-copied {
    border-color: rgba(59, 130, 246, 0.55);
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.2);
}

.banner-page {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.banner-page-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(var(--accent-rgb), 0.22);
    background: linear-gradient(145deg, rgba(15, 22, 16, 0.98), rgba(10, 15, 10, 0.98));
    padding: 1.35rem 1.5rem;
}

.banner-page-hero-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 80% 0%, rgba(var(--accent-rgb), 0.1), transparent 55%),
        radial-gradient(ellipse at 0% 100%, rgba(220, 38, 38, 0.04), transparent 45%);
    pointer-events: none;
}

.banner-page-hero-content {
    position: relative;
    z-index: 1;
}

.banner-page-hero h1 {
    margin: 0 0 0.35rem;
    font-size: clamp(1.45rem, 2.5vw, 1.9rem);
}

.banner-page-hero h1 i {
    color: var(--accent);
    margin-right: 0.4rem;
}

.banner-page-hero p {
    margin: 0 0 0.85rem;
    color: var(--text-muted);
    max-width: 52rem;
}

.banner-page-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.banner-chip-online {
    color: var(--accent);
    border-color: rgba(var(--accent-rgb), 0.45);
    background: rgba(var(--accent-rgb), 0.1);
}

.banner-chip-offline {
    color: #cbd5e1;
    border-color: rgba(148, 163, 184, 0.35);
    background: rgba(51, 65, 85, 0.35);
}

.banner-page-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.banner-page-card {
    border-radius: var(--radius-lg);
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    background: rgba(10, 15, 10, 0.72);
    padding: 1.15rem 1.2rem 1.2rem;
}

.banner-page-card h2 {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
}

.banner-page-card h2 i {
    color: var(--accent);
    margin-right: 0.35rem;
}

.banner-page-hint {
    margin: 0 0 0.85rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.banner-page-preview-card .server-banner-preview {
    margin-bottom: 0.85rem;
}

.banner-page-preview-wrap {
    padding: 1.25rem 1rem;
    border-radius: 10px;
    border: 1px solid rgba(var(--accent-rgb), 0.22);
    background:
        linear-gradient(180deg, rgba(8, 12, 8, 0.98) 0%, rgba(5, 8, 5, 0.98) 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: auto;
    overflow-y: visible;
    min-height: calc(32px + 2.5rem);
}

.banner-page-preview-frame {
    display: block;
    width: var(--banner-w, 480px);
    height: var(--banner-h, 32px);
    min-width: var(--banner-w, 480px);
    min-height: var(--banner-h, 32px);
    max-width: var(--banner-w, 480px);
    max-height: var(--banner-h, 32px);
    flex: 0 0 auto;
    border: 0;
    padding: 0;
    margin: 0;
    background: #000;
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.28);
}

.banner-page-preview-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.banner-page-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.85rem;
}

.banner-page-tab {
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.25);
    color: var(--text-muted);
    padding: 0.38rem 0.8rem;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
}

.banner-page-tab.is-active {
    color: var(--accent);
    border-color: rgba(var(--accent-rgb), 0.5);
    background: rgba(var(--accent-rgb), 0.1);
}

.banner-page-panel {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.banner-page-panel[hidden] {
    display: none !important;
}

.banner-page-copy.is-copied {
    border-color: rgba(var(--accent-rgb), 0.55);
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.2);
}

.pl-kills-label {
    font-size: 0.72em;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: inherit;
}

.player-list-v2 .pl-name-row .chat-author-name--badged {
    font-weight: 700;
}

.top15-name-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.top15-name-wrap .text-link,
.top15-name-wrap .pl-name-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.top15-list .top15-row {
    align-items: center;
}

.search-stat-value {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--accent);
}

/* ── v2: chat ── */

.chat-card-v2 {
    border-radius: var(--radius-lg);
}

.chat-card-v2 .card-header {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.12) 100%);
}

.chat-live-badge {
    font-size: 0.7rem;
}

.chat-card-v2 .chat-messages-scroll {
    gap: 0.45rem;
    padding-top: 0.15rem;
    padding-bottom: 0.25rem;
}

.chat-empty {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--text-muted);
}

.chat-empty i {
    font-size: 2rem;
    color: var(--accent);
    opacity: 0.4;
    margin-bottom: 0.75rem;
    display: block;
}

.chat-msg-v2 {
    padding: 0.62rem 0.78rem;
    border-radius: 8px;
    border: 1px solid rgba(31, 53, 32, 0.8);
    background: rgba(0, 0, 0, 0.28);
    transition: border-color 0.2s, background 0.2s, box-shadow 0.25s;
}

.chat-msg-v2:hover {
    border-color: rgba(var(--accent-rgb), 0.22);
    background: rgba(0, 0, 0, 0.34);
}

.chat-msg-v2.chat-msg--staff {
    border-left: 3px solid var(--chat-accent, var(--accent-dim));
    padding-left: 0.6rem;
}

.chat-msg-v2.chat-msg--new {
    animation: chat-msg-in 0.35s ease-out;
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.2), 0 0 20px rgba(var(--accent-rgb), 0.08);
}

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

.chat-msg-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    margin-bottom: 0.38rem;
}

.chat-msg-v2 .chat-author {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    min-width: 0;
    flex: 1;
    font-size: 1rem;
}

.chat-msg-v2 .chat-author-link,
.chat-msg-v2 .chat-author .pl-name-text {
    font-weight: 700;
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-msg-v2 .chat-author .player-badges-sm .player-badge {
    font-size: 0.88rem;
}

.chat-msg-v2 .chat-time {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    margin: 0;
    padding: 0.22rem 0.58rem;
    border-radius: 999px;
    font-size: 0.78rem;
    line-height: 1.2;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(96, 165, 250, 0.18);
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.2);
}

.chat-msg-v2 .chat-time-date {
    color: #93c5fd;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.chat-msg-v2 .chat-time-sep {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.75);
    flex-shrink: 0;
}

.chat-msg-v2 .chat-time-clock {
    color: #cbd5e1;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.chat-msg-v2 .chat-msg-text {
    color: var(--text);
    font-size: 1rem;
    line-height: 1.5;
    word-break: break-word;
}

.chat-msg-v2.chat-msg--roulette {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.07), rgba(168, 85, 247, 0.07));
    border-color: rgba(var(--accent-rgb), 0.28);
}

.chat-msg-v2 .chat-msg-type {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
}

.chat-msg-v2.chat-msg--roulette .chat-time {
    border-color: rgba(250, 204, 21, 0.22);
}

.chat-msg-v2.chat-msg--roulette .chat-time-date {
    color: #fde68a;
}

.chat-msg-v2.chat-msg--roulette .chat-time-clock {
    color: #fbbf24;
}

.chat-card-footer-v2 {
    border-top: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.22);
    padding: 0.85rem 1rem 1rem;
}

.chat-form-v2 {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.chat-compose {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.chat-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 0.85rem;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(31, 53, 32, 0.95);
    border-radius: var(--radius);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.chat-input-wrap:focus-within {
    border-color: var(--accent-dim);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.12);
}

.chat-input-wrap .chat-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0.65rem 0;
}

.chat-send-btn {
    width: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.25);
}

.chat-send-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.chat-char-count {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-align: right;
    padding-right: 0.15rem;
}

.chat-guest-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    text-align: center;
}

.chat-guest-cta .hint {
    margin: 0;
}

.chat-login-btn {
    min-width: 160px;
}

.footer-theme-row {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 0.25rem;
}

/* Theme picker — dropdown menu */
.theme-picker {
    position: relative;
    display: inline-flex;
    justify-content: center;
    width: 100%;
}

.theme-picker-trigger {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--border-glow);
    border-radius: var(--radius);
    background: rgba(0, 0, 0, 0.22);
    color: var(--text-muted);
    font-family: var(--font);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.theme-picker-trigger:hover,
.theme-picker.is-open .theme-picker-trigger {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border-glow));
    background: rgba(var(--accent-rgb), 0.08);
}

.theme-picker-chevron {
    font-size: 0.65rem;
    opacity: 0.75;
    transition: transform 0.2s;
}

.theme-picker.is-open .theme-picker-chevron {
    transform: rotate(180deg);
}

.theme-picker-menu {
    position: absolute;
    bottom: calc(100% + 0.45rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 120;
    min-width: min(220px, 88vw);
    padding: 0.35rem;
    border: 1px solid var(--border-glow);
    border-radius: var(--radius);
    background: var(--bg-card);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.theme-picker-menu[hidden] {
    display: none !important;
}

.theme-picker-option {
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 44px;
    padding: 0.55rem 0.75rem;
    border: none;
    border-radius: calc(var(--radius) - 2px);
    background: transparent;
    color: var(--text);
    font-family: var(--font);
    font-size: 0.92rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.theme-picker-option:hover {
    background: rgba(var(--accent-rgb), 0.08);
    color: var(--accent);
}

.theme-picker-option.is-active {
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--accent);
}

.theme-picker-option.is-loading {
    opacity: 0.6;
    pointer-events: none;
}

.theme-picker-option-check {
    font-size: 0.8rem;
    color: var(--accent);
}

.login-theme-bar {
    width: min(100%, 420px);
    margin: 1rem auto 0;
    display: flex;
    justify-content: center;
}

html[data-theme="simple"] .theme-picker-trigger {
    background: var(--bg-card);
    color: var(--text);
    border-color: var(--border-glow);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}

html[data-theme="simple"] .theme-picker-trigger:hover,
html[data-theme="simple"] .theme-picker.is-open .theme-picker-trigger {
    color: var(--accent);
    background: var(--bg-card-hover);
    border-color: var(--text-muted);
}

html[data-theme="simple"] .theme-picker-menu {
    background: var(--bg-card);
    border-color: var(--border-glow);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
}

html[data-theme="simple"] .theme-picker-option {
    color: var(--text-muted);
}

html[data-theme="simple"] .theme-picker-option:hover,
html[data-theme="simple"] .theme-picker-option.is-active {
    background: var(--bg-card-hover);
    color: var(--accent);
}

.themes-admin-list {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

.theme-admin-card .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

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

.theme-pill {
    display: inline-flex;
    align-items: center;
    margin-left: 0.35rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    border: 1px solid var(--border);
    vertical-align: middle;
}

.theme-pill-default {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
    background: rgba(var(--accent-rgb), 0.08);
}

.theme-pill-off {
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.35);
}

.theme-create-form .form-row,
.theme-edit-form {
    display: grid;
    gap: 0.75rem;
}

.theme-admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* Posts forum — news & rules topics */
@keyframes posts-forum-row-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.posts-forum-page { margin-top: 0.25rem; }

.posts-forum-board {
    position: relative;
    padding: 1rem;
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(165deg, rgba(18, 26, 19, 0.96) 0%, rgba(8, 12, 8, 0.99) 55%, rgba(12, 18, 12, 0.98) 100%);
    box-shadow:
        0 0 0 1px rgba(var(--accent-rgb), 0.06),
        0 18px 48px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    overflow: hidden;
}

.posts-forum-board--rules {
    border-color: rgba(251, 191, 36, 0.22);
    background:
        linear-gradient(165deg, rgba(22, 20, 12, 0.96) 0%, rgba(10, 10, 8, 0.99) 55%, rgba(16, 14, 10, 0.98) 100%);
    box-shadow:
        0 0 0 1px rgba(251, 191, 36, 0.06),
        0 18px 48px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.posts-forum-board--rules .news-card-corner {
    border-color: rgba(251, 191, 36, 0.42);
}

.posts-forum-board-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 0% 0%, rgba(var(--accent-rgb), 0.11) 0%, transparent 48%),
        radial-gradient(ellipse at 100% 100%, rgba(96, 165, 250, 0.06) 0%, transparent 42%);
}

.posts-forum-board--rules .posts-forum-board-glow {
    background:
        radial-gradient(ellipse at 0% 0%, rgba(251, 191, 36, 0.1) 0%, transparent 48%),
        radial-gradient(ellipse at 100% 100%, rgba(var(--accent-rgb), 0.05) 0%, transparent 42%);
}

.posts-forum-board-shine {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.45), transparent);
    pointer-events: none;
    opacity: 0.65;
}

.posts-forum-board--rules .posts-forum-board-shine {
    background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.45), transparent);
}

.posts-forum-list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.posts-forum-row {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.16) 100%);
    overflow: hidden;
    animation: posts-forum-row-in 0.45s ease both;
    animation-delay: var(--row-delay, 0ms);
    transition: border-color 0.22s, box-shadow 0.22s, transform 0.22s;
}

.posts-forum-row:hover {
    border-color: rgba(var(--accent-rgb), 0.28);
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(var(--accent-rgb), 0.08);
    transform: translateY(-2px);
}

.posts-forum-row--pinned {
    border-color: rgba(var(--accent-rgb), 0.32);
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.1) 0%, rgba(0, 0, 0, 0.22) 100%);
    box-shadow: inset 0 0 24px rgba(var(--accent-rgb), 0.04);
}

.posts-forum-board--rules .posts-forum-row--pinned {
    border-color: rgba(251, 191, 36, 0.32);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.09) 0%, rgba(0, 0, 0, 0.22) 100%);
}

.posts-forum-row-accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--accent), rgba(var(--accent-rgb), 0.2));
    opacity: 0;
    transition: opacity 0.22s;
}

.posts-forum-row:hover .posts-forum-row-accent,
.posts-forum-row--pinned .posts-forum-row-accent {
    opacity: 1;
}

.posts-forum-board--rules .posts-forum-row-accent {
    background: linear-gradient(180deg, #fbbf24, rgba(251, 191, 36, 0.2));
}

.posts-forum-row-hit {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 0.9rem 1rem;
    align-items: center;
    padding: 1rem 1.1rem;
    color: inherit;
    text-decoration: none;
}

.posts-forum-row-hit:focus-visible {
    outline: 2px solid rgba(var(--accent-rgb), 0.45);
    outline-offset: -2px;
    border-radius: 16px;
}

.posts-forum-row-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.05rem;
    color: var(--accent);
    background:
        linear-gradient(145deg, rgba(var(--accent-rgb), 0.16) 0%, rgba(var(--accent-rgb), 0.06) 100%);
    border: 1px solid rgba(var(--accent-rgb), 0.22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 4px 14px rgba(0, 0, 0, 0.2);
    transition: transform 0.22s, box-shadow 0.22s;
}

.posts-forum-row:hover .posts-forum-row-icon {
    transform: scale(1.04);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 6px 18px rgba(var(--accent-rgb), 0.12);
}

.posts-forum-board--rules .posts-forum-row-icon {
    color: #fbbf24;
    background: linear-gradient(145deg, rgba(251, 191, 36, 0.14) 0%, rgba(251, 191, 36, 0.05) 100%);
    border-color: rgba(251, 191, 36, 0.24);
}

.posts-forum-row--poll .posts-forum-row-icon {
    color: #60a5fa;
    background: linear-gradient(145deg, rgba(59, 130, 246, 0.14) 0%, rgba(59, 130, 246, 0.05) 100%);
    border-color: rgba(59, 130, 246, 0.24);
}

.posts-forum-row-body { min-width: 0; }

.posts-forum-row-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem 0.75rem;
    margin-bottom: 0.3rem;
}

.posts-forum-row-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.posts-forum-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.posts-forum-pill-pin {
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.14);
    border: 1px solid rgba(var(--accent-rgb), 0.24);
}

.posts-forum-pill-lock {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.24);
}

.posts-forum-pill-poll {
    color: #60a5fa;
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.24);
}

.posts-forum-row-date {
    font-size: 0.76rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.posts-forum-row-title {
    margin: 0 0 0.3rem;
    font-size: 1.06rem;
    line-height: 1.35;
    font-family: var(--font-display);
    color: var(--text);
    transition: color 0.2s;
}

.posts-forum-row:hover .posts-forum-row-title {
    color: var(--accent);
}

.posts-forum-board--rules .posts-forum-row:hover .posts-forum-row-title {
    color: #fbbf24;
}

.posts-forum-row-excerpt {
    margin: 0 0 0.45rem;
    font-size: 0.83rem;
    line-height: 1.5;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.posts-forum-row-author {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.posts-forum-row-stats {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex-shrink: 0;
}

.posts-forum-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    padding: 0.35rem 0.5rem;
    border-radius: 10px;
    font-size: 0.68rem;
    color: var(--text-muted);
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.05);
    gap: 0.1rem;
}

.posts-forum-stat strong {
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1;
    color: var(--text);
}

.posts-forum-stat--hot {
    color: var(--accent);
    border-color: rgba(var(--accent-rgb), 0.22);
    background: rgba(var(--accent-rgb), 0.08);
}

.posts-forum-stat--hot strong { color: var(--accent); }

.posts-forum-stat--likes {
    color: #f472b6;
    border-color: rgba(244, 114, 182, 0.22);
    background: rgba(244, 114, 182, 0.06);
}

.posts-forum-stat--likes strong { color: #f9a8d4; }

.posts-forum-row-chevron {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: transform 0.22s, color 0.22s, background 0.22s, border-color 0.22s;
}

.posts-forum-row:hover .posts-forum-row-chevron {
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.1);
    border-color: rgba(var(--accent-rgb), 0.22);
    transform: translateX(3px);
}

.posts-forum-board--rules .posts-forum-row:hover .posts-forum-row-chevron {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.1);
    border-color: rgba(251, 191, 36, 0.22);
}

.posts-forum-row-mod {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    justify-content: center;
    padding: 0.65rem 0.7rem;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.18);
    opacity: 0.55;
    transition: opacity 0.2s;
}

.posts-forum-row:hover .posts-forum-row-mod,
.posts-forum-row-mod:focus-within {
    opacity: 1;
}

.posts-forum-foot {
    position: relative;
    margin-top: 0.95rem;
    padding-top: 0.95rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.post-mod-btn.is-active {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.1);
}

.btn-danger-outline {
    border-color: rgba(239, 68, 68, 0.45);
    color: #f87171;
}

.btn-danger-outline:hover {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.6);
}

/* Topic view */
.posts-topic-breadcrumb { margin-bottom: 1rem; }

.posts-topic-view-v2 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.posts-topic-view {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.posts-topic-header-v2 {
    position: relative;
    overflow: hidden;
    padding: 1.35rem 1.55rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    align-items: flex-start;
    border-color: rgba(var(--accent-rgb), 0.22);
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.07) 0%, rgba(0, 0, 0, 0.32) 100%);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.22);
}

.posts-topic-view--rules .posts-topic-header-v2 {
    border-color: rgba(251, 191, 36, 0.24);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.07) 0%, rgba(0, 0, 0, 0.32) 100%);
}

.posts-topic-meta-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.posts-topic-chip-hot {
    color: var(--accent) !important;
    border-color: rgba(var(--accent-rgb), 0.35) !important;
    background: rgba(var(--accent-rgb), 0.1) !important;
    font-weight: 700;
}

.posts-topic-glow {
    position: absolute;
    top: -40%;
    right: -10%;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.12) 0%, transparent 70%);
    pointer-events: none;
}

.posts-topic-view--rules .posts-topic-glow {
    background: radial-gradient(circle, rgba(251, 191, 36, 0.1) 0%, transparent 70%);
}

.posts-topic-header {
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    align-items: flex-start;
}

.posts-topic-title {
    margin: 0 0 0.5rem;
    font-size: 1.45rem;
    line-height: 1.3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.posts-topic-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 8px;
    font-size: 0.8rem;
}

.posts-topic-badge-pin {
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.15);
}

.posts-topic-badge-lock {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.12);
}

.posts-topic-meta {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    font-size: 0.88rem;
    color: var(--text-muted);
}

.posts-topic-mod-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.posts-topic-locked-banner {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.posts-topic-post-v2 {
    position: relative;
    overflow: hidden;
    border-color: rgba(var(--accent-rgb), 0.2);
    background: linear-gradient(180deg, rgba(15, 22, 16, 0.65) 0%, rgba(10, 15, 10, 0.95) 100%);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
}

.posts-topic-view--rules .posts-topic-post-v2 {
    border-color: rgba(251, 191, 36, 0.18);
}

.posts-topic-post--op .posts-topic-op-label {
    margin: 0 0 0.75rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.posts-topic-post { padding: 0; overflow: hidden; }

.posts-topic-post-layout {
    display: grid;
    grid-template-columns: minmax(140px, 180px) 1fr;
    gap: 0;
}

.posts-topic-author-v2 {
    padding: 1.25rem 1rem;
    text-align: center;
    border-right: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.18);
}

.posts-topic-author-avatar--op {
    background: rgba(var(--accent-rgb), 0.18);
    color: var(--accent);
    box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.15);
}

.posts-topic-author-badges {
    margin: 0.35rem 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.2rem;
}

.posts-topic-author-chips {
    margin-top: 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: center;
}

.posts-topic-author {
    padding: 1.25rem 1rem;
    text-align: center;
    border-right: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.15);
}

.posts-topic-author-avatar {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 0.65rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--accent);
    font-size: 1.2rem;
}

.posts-topic-author-name {
    margin: 0;
    font-weight: 700;
    font-size: 0.95rem;
    word-break: break-word;
}

.posts-topic-author-role {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.posts-topic-body {
    padding: 1.25rem 1.5rem;
}

.posts-topic-actions {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

/* Replies */
.posts-replies-v2 {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    scroll-margin-top: 5rem;
}

.posts-replies-board {
    position: relative;
    padding: 1rem 1.05rem;
    border: 1px solid rgba(var(--accent-rgb), 0.14);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.12) 100%);
}

.posts-topic-view--rules .posts-replies-board {
    border-color: rgba(251, 191, 36, 0.16);
}

.posts-replies-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.posts-replies-head h2 {
    margin: 0;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.posts-reply-msg {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.22);
}

.posts-reply-avatar {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.posts-reply-msg--staff .posts-reply-avatar {
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.1);
    border-color: rgba(var(--accent-rgb), 0.2);
}

.posts-reply-content { min-width: 0; }

.posts-reply-form-v2 {
    border-color: rgba(var(--accent-rgb), 0.24);
    background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.05) 0%, rgba(0, 0, 0, 0.24) 100%);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
}

.posts-reply-textarea {
    min-height: 120px;
    resize: vertical;
    background: rgba(0, 0, 0, 0.28);
    border-color: rgba(var(--accent-rgb), 0.18);
}

.posts-reply-textarea:focus {
    border-color: rgba(var(--accent-rgb), 0.4);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.1);
}

.posts-replies-empty {
    margin: 0;
    padding: 1rem 1.1rem;
    border-radius: var(--radius-lg);
    border: 1px dashed rgba(var(--accent-rgb), 0.2);
    background: rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.posts-replies-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: min(60vh, 520px);
    overflow-y: auto;
    padding-right: 0.15rem;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-dim) rgba(0, 0, 0, 0.35);
}

.posts-reply-msg--staff {
    border-color: rgba(var(--accent-rgb), 0.28);
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.06) 0%, rgba(0, 0, 0, 0.24) 100%);
}

.posts-reply-msg-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.55rem;
}

.posts-reply-author {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
}

.posts-reply-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent);
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: rgba(var(--accent-rgb), 0.12);
    border: 1px solid rgba(var(--accent-rgb), 0.22);
}

.posts-reply-head-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.posts-reply-time {
    font-size: 0.82rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.posts-reply-msg-body {
    line-height: 1.6;
    color: var(--text);
}

.posts-reply-form-head h3 {
    margin: 0;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.posts-reply-textarea {
    min-height: 120px;
    resize: vertical;
}

.posts-reply-login-card .posts-reply-login-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
}

.posts-reply-login-body p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.posts-topic-foot-nav {
    display: flex;
    justify-content: flex-start;
}

@media (max-width: 720px) {
    .posts-forum-row-hit {
        grid-template-columns: auto 1fr auto;
        padding: 0.9rem;
    }

    .posts-forum-row-stats {
        flex-direction: row;
        grid-column: 2;
    }

    .posts-forum-row-chevron {
        display: none;
    }

    .posts-forum-row-mod {
        flex-direction: row;
        flex-wrap: wrap;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        width: 100%;
        opacity: 1;
    }

    .posts-forum-row {
        flex-wrap: wrap;
    }

    .posts-forum-row-excerpt {
        -webkit-line-clamp: 3;
    }

    .posts-reply-msg {
        grid-template-columns: 1fr;
    }

    .posts-reply-avatar {
        display: none;
    }

    .posts-topic-post-layout { grid-template-columns: 1fr; }

    .posts-topic-author {
        border-right: none;
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        gap: 0.75rem;
        text-align: left;
        padding: 1rem 1.25rem;
    }

    .posts-topic-author-avatar { margin: 0; flex-shrink: 0; }
}