/* Server page styles — loaded via $pageCss = 'server.css' */
/* All CSS variables come from global style.css :root */

/* Breadcrumb uses global .breadcrumb from style.css */

/* ═══ SERVER HEADER — split cinematic ═══ */
.server-header {
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 10px;
    border: 1px solid var(--border);
    background: var(--bg1);
    display: grid;
    grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
    min-height: 280px;
}
.sh-visual {
    position: relative;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(180deg, var(--bg2) 0%, var(--bg1) 100%);
    overflow: hidden;
}
.sh-visual::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,.12), transparent 60%);
}
.sh-visual::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.28) 100%);
    pointer-events: none;
}
.sh-map-bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: .58;
    filter: saturate(.72) brightness(.88);
    pointer-events: none;
}
.sh-no-preview {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--mono);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--muted);
    opacity: .5;
    pointer-events: none;
    user-select: none;
}
.sh-visual-top {
    position: relative; z-index: 2;
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; width: 100%; margin-bottom: auto;
}
.sh-visual-top-right {
    display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0;
}
.sh-head-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}
.sh-head-main { min-width: 0; flex: 1; }
.sh-head-actions { flex-shrink: 0; padding-top: 2px; }
.sh-report-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 12px; border-radius: 8px;
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .35px;
    color: var(--text2); background: var(--bg2); border: 1px solid var(--border);
    cursor: pointer; text-decoration: none;
    transition: border-color .15s, color .15s, background .15s;
}
.sh-report-btn:hover { border-color: rgba(217,121,121,.35); color: #f0a0a0; background: rgba(217,121,121,.08); }
.sh-report-btn svg { color: var(--ac); flex-shrink: 0; }
.sh-report-btn.is-done,
.sh-report-btn:disabled { opacity: .45; cursor: default; pointer-events: none; }

body.sh-report-open { overflow: hidden; }
.sh-report-modal {
    position: fixed; inset: 0; z-index: 1200;
    display: flex; align-items: center; justify-content: center;
    padding: 20px; background: rgba(0,0,0,.62); backdrop-filter: blur(5px);
}
.sh-report-modal[hidden] { display: none !important; }
.sh-report-dialog {
    width: min(440px, 100%);
    background: var(--bg1); border: 1px solid var(--border); border-radius: 14px;
    padding: 20px 22px; box-shadow: 0 24px 48px rgba(0,0,0,.4);
}
.sh-report-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px;
}
.sh-report-head h3 {
    margin: 0; font-size: 1rem; font-weight: 800;
    display: flex; align-items: center; gap: 8px;
}
.sh-report-close {
    background: none; border: 0; color: var(--muted); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 4px;
}
.sh-report-close:hover { color: var(--text); }
.sh-report-hint { margin: 0 0 14px; font-size: .8rem; color: var(--muted); line-height: 1.5; }
.sh-report-label {
    display: block; font-size: .68rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .5px; color: var(--muted); margin: 0 0 6px;
}
.sh-report-label span { font-weight: 600; text-transform: none; letter-spacing: 0; opacity: .8; }
.sh-report-select,
.sh-report-textarea {
    width: 100%; box-sizing: border-box;
    padding: 10px 12px; margin-bottom: 12px;
    border-radius: 8px; border: 1px solid var(--border);
    background: var(--bg2); color: var(--text); font: inherit; font-size: .86rem;
}
.sh-report-textarea { resize: vertical; min-height: 96px; line-height: 1.45; }
.sh-report-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.sh-report-msg { margin: 12px 0 0; font-size: .8rem; font-weight: 600; }
.sh-report-msg.ok { color: var(--status-clean, #5cb88a); }
.sh-report-msg.err { color: var(--status-cheat, #d97979); }
.sh-live {
    position: relative;
    display: inline-flex; align-items: center; gap: 7px;
    font-size: .65rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .5px;
    padding: 5px 10px; border-radius: 999px;
    width: fit-content; flex-shrink: 0;
    backdrop-filter: blur(4px);
}
.sh-live--on {
    color: var(--green);
    background: rgba(92,184,138,.18);
    border: 1px solid rgba(92,184,138,.3);
}
.sh-live--off {
    color: var(--red);
    background: rgba(239,68,68,.16);
    border: 1px solid rgba(239,68,68,.28);
}
.sh-live-dot {
    width: 7px; height: 7px; border-radius: 50%;
    flex-shrink: 0;
}
.sh-live--on .sh-live-dot {
    background: var(--green);
    box-shadow: 0 0 10px var(--green);
    animation: sh-pulse 2s ease-in-out infinite;
}
.sh-live--off .sh-live-dot {
    background: var(--red);
    box-shadow: 0 0 8px rgba(248,113,113,.55);
}
@keyframes sh-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .55; transform: scale(.85); }
}
.sh-map-label {
    position: relative; z-index: 1;
    font-family: var(--mono);
    font-size: 1.65rem; font-weight: 800;
    letter-spacing: -.03em;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.1;
    text-shadow: 0 2px 12px rgba(0,0,0,.6);
}
.sh-map-sub {
    position: relative; z-index: 1;
    margin-top: 6px;
    font-size: .72rem; color: var(--text2);
    text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.sh-panel {
    padding: 26px 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    min-width: 0;
    border-left: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
}
.sh-title {
    font-size: clamp(1.05rem, 2.2vw, 1.35rem);
    font-weight: 800;
    letter-spacing: -.45px;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.sh-flag { display: inline-flex; vertical-align: baseline; position: relative; top: 2px; }
.sh-flag img { display: block; }
.sh-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.badge {
    font-size: .6rem; font-weight: 700; padding: 3px 9px; border-radius: 5px;
    text-transform: uppercase; letter-spacing: .4px;
}
.badge-game { background: var(--ac10); color: var(--ac); border: 1px solid var(--ac15); display: inline-flex; align-items: center; gap: 4px; }
.badge-on { background: rgba(92,184,138,.12); color: var(--green); border: 1px solid rgba(92,184,138,.18); }
.badge-off { background: rgba(239,68,68,.1); color: var(--red); border: 1px solid rgba(239,68,68,.15); }
.badge-mode { background: rgba(92,184,138,.12); color: var(--green); border: 1px solid rgba(92,184,138,.18); }
.badge-tag { background: rgba(92,184,138,.12); color: var(--green); border: 1px solid rgba(92,184,138,.18); }
.sh-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.sh-kpi {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 10px;
    text-align: center;
}
.sh-kpi-val {
    font-family: var(--mono);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.1;
}
.sh-kpi-val.ac { color: var(--ac); }
.sh-kpi-val.good { color: var(--green); }
.sh-kpi-label {
    margin-top: 4px;
    font-size: .55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .35px;
    color: var(--muted);
}
.sh-kpi-bar {
    margin: 6px auto 0;
    width: 100%; max-width: 56px;
    height: 3px;
    background: var(--bg3);
    border-radius: 2px;
    overflow: hidden;
}
.sh-kpi-bar span { display: block; height: 100%; background: var(--ac); border-radius: 2px; }
.sh-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ip-box {
    display: flex; align-items: center;
    background: var(--bg2); border: 1px solid var(--border);
    padding: 0 0 0 14px; border-radius: 8px; height: 44px;
    font-family: var(--mono); font-size: .82rem; color: var(--text2); font-weight: 700;
    flex: 1; min-width: 200px; overflow: hidden;
}
.ip-box > span { flex: 1; min-width: 0; color: var(--text2); }
.ip-copy {
    margin-left: auto; flex-shrink: 0;
    background: var(--bg3); border: none; border-left: 1px solid var(--border);
    color: var(--text2); height: 100%;
    padding: 0 16px; border-radius: 0 7px 7px 0; cursor: pointer;
    font-size: .72rem; font-weight: 600; font-family: inherit;
    display: inline-flex; align-items: center; gap: 5px;
    transition: color .15s, background .15s;
}
.ip-copy svg { flex-shrink: 0; }
.ip-copy:hover { color: var(--text); background: rgba(255,255,255,.04); }
.ip-copy.copied { color: var(--green); background: rgba(92,184,138,.1); }
.server-header .btn, .sh-sticky .btn {
    padding: 0 18px; height: 44px; border-radius: 8px; font-size: .82rem;
    font-weight: 700; cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 6px;
    transition: background .15s, border-color .15s, color .15s, transform .12s;
    white-space: nowrap;
}
.server-header .btn:active, .sh-sticky .btn:active { transform: scale(.98); }
.btn-connect {
    background: var(--green-bg); color: var(--text);
    border: 1px solid var(--green-border);
}
.btn-connect svg { color: var(--green); }
.btn-connect:hover { background: rgba(92,184,138,.18); border-color: rgba(92,184,138,.35); color: var(--text); }
.btn-vote {
    background: var(--ac10); color: var(--text);
    border: 1px solid var(--ac15);
}
.btn-vote:hover { background: rgba(101,116,205,.18); border-color: rgba(101,116,205,.35); color: var(--text); }
.btn-offline {
    background: rgba(239,68,68,.06); color: #e87070;
    border: 1px solid rgba(239,68,68,.12); cursor: default;
    pointer-events: none;
}

/* Override global header{position:sticky} for server-header — it must scroll away */
.server-header {
    position: relative;
    z-index: auto;
}

/* Hide site navbar when server mini-header is active */
body.server-sticky-active > header {
    transform: translateY(-100%);
    pointer-events: none;
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
body.page-server > header {
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}

/* ═══ STICKY HEADER (on scroll) ═══ */
.sh-sticky {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1001;
    background: rgba(11,11,14,.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .28s ease;
}
.sh-sticky.visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.sh-sticky-inner {
    max-width: 1320px; margin: 0 auto;
    padding: 0 16px;
    height: 50px;
    display: flex; align-items: center; gap: 10px;
}
.sh-sticky-icon {
    width: 32px; height: 32px; border-radius: 7px;
    background: var(--bg2); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.sh-sticky-info { min-width: 0; flex: 1; }
.sh-sticky-name {
    font-size: .82rem; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: flex; align-items: center; gap: 5px;
    line-height: 1.2;
}
.sh-sticky-name img { flex-shrink: 0; }
.sh-sticky-meta {
    font-size: .65rem; color: var(--muted);
    display: flex; align-items: center; gap: 0;
    margin-top: 1px;
}
.sh-sticky-status { font-weight: 600; color: var(--muted); }
.sh-sticky-status.on { color: var(--green); }
.sh-sticky-status.off { color: var(--red); }
.sh-sticky-sep { margin: 0 5px; color: var(--muted); opacity: .45; }
.sh-sticky-map-name { font-family: var(--mono); font-weight: 600; color: var(--muted); }
.sh-sticky-players { font-family: var(--mono); font-weight: 700; color: var(--text); }
.sh-sticky-players span { font-weight: 600; color: var(--muted); }
.sh-sticky-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.sh-sticky .ip-box {
    display: none;
    height: 36px;
    min-width: 0;
    flex: 0 1 auto;
    max-width: calc(200px + 0.5cm);
    padding: 0;
    font-size: .72rem;
    border-radius: 7px;
    gap: 0;
    overflow: hidden;
}
.sh-sticky .ip-box > span {
    flex: 1;
    min-width: 0;
    padding: 0 10px 0 12px;
}
.sh-sticky .ip-copy {
    margin-left: auto;
    align-self: stretch;
    height: auto;
    padding: 0 12px;
    font-size: .66rem;
    border-left: 1px solid var(--border);
    border-radius: 0 6px 6px 0;
}
.sh-sticky .btn.btn-sm {
    min-height: 0;
    height: 38px;
    padding: 0 14px;
    font-size: .78rem;
    border-radius: 8px;
    line-height: 1;
}
.sh-sticky-stat {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    white-space: nowrap;
    text-align: center;
    line-height: 1.1;
    min-width: 58px;
}
.sh-sticky-stat span {
    font-size: .55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .35px;
    color: var(--muted);
}
.sh-sticky-stat b {
    font-size: .78rem;
    color: var(--text);
    font-family: var(--mono);
    font-weight: 700;
    line-height: 1.1;
}
.sh-sticky-stat b.good { color: var(--green); }
.sh-sticky-stat b.ok { color: var(--yellow, #94a0c8); }
.sh-kpi-val.ok { color: var(--yellow, #94a0c8); }
@media (min-width: 640px) {
    .sh-sticky .ip-box { display: flex; }
    .sh-sticky-stat { display: flex; }
}

/* ═══ LAYOUT ═══ */
.layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 12px; }
.side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.main { display: flex; flex-direction: column; gap: 10px; min-width: 0; overflow: hidden; }

/* ═══ PANELS & WIDGETS ═══ */
@keyframes sv-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

.page-server .breadcrumb,
.page-server .server-header{
    animation:sv-up .42s ease both;
}
.page-server .layout .side > .widget,
.page-server .layout .main > .panel{
    animation:sv-up .42s ease both;
}
.page-server .layout .side > .widget:nth-child(1){animation-delay:.04s}
.page-server .layout .side > .widget:nth-child(2){animation-delay:.08s}
.page-server .layout .side > .widget:nth-child(3){animation-delay:.12s}
.page-server .layout .side > .widget:nth-child(4){animation-delay:.16s}
.page-server .layout .side > .widget:nth-child(5){animation-delay:.2s}
.page-server .layout .main > .panel:nth-child(1){animation-delay:.06s}
.page-server .layout .main > .panel:nth-child(2){animation-delay:.1s}
.page-server .layout .main > .panel:nth-child(3){animation-delay:.14s}
.page-server .layout .main > .panel:nth-child(4){animation-delay:.18s}
.page-server .layout .main > .panel:nth-child(5){animation-delay:.22s}
.page-server .sv-lazy-loaded{animation:sv-up .38s ease both}
.page-server #sidebar-lazy.sv-lazy-loaded > .widget{animation:sv-up .38s ease both}
.page-server #sidebar-lazy.sv-lazy-loaded > .widget:nth-child(2){animation-delay:.05s}
.page-server #sidebar-lazy.sv-lazy-loaded > .widget:nth-child(3){animation-delay:.1s}

.panel, .widget {
    background: var(--bg1); border: 1px solid var(--border);
    border-radius: 14px; overflow: hidden;
}
.side > .widget, .main > .panel, .main > .widget { margin-bottom: 0; }
.p-head, .w-head {
    position: relative; overflow: hidden;
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    padding: 11px 16px; font-size: .78rem; font-weight: 700;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 7px;
    color: var(--text2);
    background: rgba(255,255,255,.015);
}
.p-head::before, .w-head::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(
        90deg,
        rgba(101,116,205,.09) 0%,
        rgba(101,116,205,.035) 28%,
        rgba(101,116,205,.01) 48%,
        transparent 72%
    );
    pointer-events: none;
}
.p-head > *, .w-head > * { position: relative; z-index: 1; }
.p-head .ic, .w-head .ic { color: var(--ac); display: inline-flex; align-items: center; }
.p-body, .w-body { padding: 14px 16px; }

/* ═══ SCORE ═══ */
.score-top { text-align: center; padding: 18px 16px 14px; }
.score-val { font-size: 2rem; font-weight: 900; color: var(--ac); font-family: var(--mono); line-height: 1; }
.score-label { font-size: .65rem; color: var(--muted); text-transform: uppercase; letter-spacing: .8px; margin-top: 4px; }
.score-rank { font-size: .82rem; color: var(--muted); margin-top: 6px; }
.score-rank b { color: var(--text); }
.score-vote-btn {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; padding: 10px; margin-top: 12px;
    background: var(--ac10); color: var(--text);
    border: 1px solid var(--ac15); border-radius: 8px;
    font-size: .82rem; font-weight: 700; cursor: pointer;
    font-family: inherit; min-height: 44px;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}
.score-vote-btn:hover { background: rgba(101,116,205,.18); border-color: rgba(101,116,205,.35); color: var(--text); }
.score-rows { padding: 8px 16px 12px; border-top: 1px solid var(--border); }
.score-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: .78rem; border-bottom: 1px solid rgba(255,255,255,.025); }
.score-row:last-child { border: none; }
.score-row .k { color: var(--muted); }
.score-row .v { font-weight: 700; font-family: var(--mono); }

/* ═══ DESCRIPTION COLLAPSE ═══ */
.desc-text { color: var(--text2); line-height: 1.7; font-size: .85rem; word-break: break-word; overflow-wrap: break-word; }
.desc-box { position: relative; overflow: hidden; }
.desc-box.collapsed { max-height: 200px; }
.desc-box.collapsed::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 24px;
    background: linear-gradient(transparent, rgba(17,17,20,.6)); pointer-events: none;
}
.desc-more {
    display: flex; align-items: center; justify-content: center; gap: 4px;
    width: 100%; padding: 8px; margin-top: 6px;
    background: var(--bg2); border: 1px solid var(--border); border-radius: 6px;
    color: var(--muted); font-size: .75rem; font-weight: 600; font-family: inherit;
    cursor: pointer; transition: color .15s, border-color .15s;
}
.desc-more:hover { color: var(--ac); border-color: var(--ac); }

/* ═══ SERVER MODALS ═══ */
.sv-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(4px);
}
.sv-modal-box {
    display: flex;
    flex-direction: column;
    background: var(--bg1);
    border: 1px solid var(--border);
    border-radius: 14px;
    max-width: 460px;
    width: min(460px, 100%);
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 24px 48px rgba(0, 0, 0, .35);
}
.sv-modal-box--wide { max-width: 640px; width: min(640px, 100%); }
.sv-modal-head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px 14px;
    background: var(--bg1);
    border-bottom: 1px solid var(--border);
}
.sv-modal-head h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sv-modal-close {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: color .15s, background .15s;
}
.sv-modal-close:hover { color: var(--text); background: var(--bg2); }
.sv-modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 22px 20px;
    font-size: .85rem;
    color: var(--text2);
    line-height: 1.7;
}
.sv-modal-body--score { display: flex; flex-direction: column; gap: 12px; font-size: .82rem; }

/* ═══ STATS — compact ═══ */
.stat-widget { padding: 0; overflow: visible; }
.stat-widget .w-head { justify-content: flex-start; }
.stat-head-avg {
    margin-left: auto; font-size: .7rem; font-weight: 600;
    color: var(--text2);
}
.stat-head-avg b {
    font-family: var(--mono); font-weight: 700; color: var(--ac);
}
.stat-tabs {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 6px; padding: 10px 14px 0;
}
.stat-tab {
    padding: 5px 0; text-align: center;
    font-size: .65rem; font-weight: 700; color: var(--muted);
    cursor: pointer; border-radius: 6px;
    border: 1px solid transparent;
    transition: color .15s, background .15s, border-color .15s;
}
.stat-tab.on {
    color: var(--ac); background: var(--bg2);
    border-color: var(--border);
}
.stat-body { padding: 10px 14px 12px; overflow: visible; }
.stat-chart-bars {
    height: 52px;
    display: flex; align-items: flex-end; gap: 3px;
    padding: 0 1px;
    border-bottom: 1px solid var(--border);
    overflow: visible;
    position: relative;
}
.stat-bar {
    flex: 1; height: 100%; display: flex; align-items: flex-end; min-width: 0;
}
.stat-bar > span {
    width: 100%; background: var(--ac); min-height: 2px;
    border-radius: 2px 2px 0 0; opacity: .4;
    transition: opacity .12s;
}
.stat-bar:hover > span { opacity: .9; }
.stat-bar-off { pointer-events: none; }
.stat-bar-off > span { display: none; }
.stat-x-axis {
    display: flex; justify-content: space-between;
    margin-top: 4px;
    font-size: .55rem; font-weight: 600; font-family: var(--mono);
    color: var(--muted);
}
.stat-meta {
    margin-top: 5px; text-align: center;
    font-size: .6rem; color: var(--muted);
}
.stat-meta b {
    font-family: var(--mono); font-weight: 700; color: var(--text2);
}

/* ═══ CONTACT/STAFF ═══ */
.link-pill { font-size: .72rem; color: var(--muted); background: var(--bg2); padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border); display: inline-flex; align-items: center; gap: 4px; text-decoration: none; transition: border-color .15s; }
.link-pill:hover { border-color: var(--ac); color: var(--ac); }
.mgmt-pills { display: flex; gap: 5px; margin-top: 6px; }
.mgmt-pill {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    font-size: .72rem; font-weight: 600; color: var(--text2);
    background: var(--bg2); border: 1px solid var(--border);
    padding: 6px 8px; border-radius: 6px;
    text-decoration: none;
    transition: color .15s, border-color .15s, background .15s;
}
.mgmt-pill:hover { color: var(--ac); border-color: rgba(101,116,205,.3); background: var(--ac10); }
.links-row { display: flex; gap: 6px; flex-wrap: wrap; }
.staff-item { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: .82rem; font-weight: 600; }
.staff-item a { color: var(--text2); text-decoration: none; }
.staff-item a:hover { color: var(--ac); }
.staff-avatar { width: 24px; height: 24px; border-radius: 6px; background: var(--bg3); display: flex; align-items: center; justify-content: center; font-size: .6rem; color: var(--muted); font-weight: 700; }
.net-link { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.net-logo { width: 32px; height: 32px; border-radius: 8px; background: var(--bg3); display: flex; align-items: center; justify-content: center; font-size: .6rem; color: var(--muted); flex-shrink: 0; }
.net-name { font-size: .82rem; font-weight: 700; color: var(--text2); }
.net-sub { font-size: .68rem; color: var(--muted); }

/* ═══ TABS ═══ */
.sv-tabs {
    position: relative; overflow: hidden;
    display: flex; gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,.01);
}
.sv-tabs::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(
        90deg,
        rgba(101,116,205,.07) 0%,
        rgba(101,116,205,.025) 30%,
        transparent 65%
    );
    pointer-events: none;
}
.sv-tabs .sv-tab { position: relative; z-index: 1; }
.sv-tab {
    flex: 1; padding: 8px 10px; text-align: center;
    font-size: .76rem; font-weight: 700; color: var(--text2);
    cursor: pointer; border-radius: 8px;
    border: 1px solid transparent;
    transition: color .15s, background .15s, border-color .15s;
}
.sv-tab.on {
    color: var(--ac); background: var(--bg2);
    border-color: var(--border);
}

/* ═══ PLAYERS SCROLL ═══ */
.players-scroll {
    max-height: 340px; overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--bg3) var(--bg0);
}
.players-scroll::-webkit-scrollbar { width: 6px; }
.players-scroll::-webkit-scrollbar-track { background: var(--bg0); }
.players-scroll::-webkit-scrollbar-thumb {
    background: var(--bg3); border-radius: 3px;
}
.players-scroll::-webkit-scrollbar-thumb:hover { background: #4a4a54; }

/* ═══ TABLE ═══ */
.ptable { width: 100%; border-collapse: collapse; }
.ptable th, .ptable td { text-align: left; padding: 9px 12px; font-size: .82rem; }
.ptable th { font-size: .65rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; border-bottom: 1px solid var(--border); padding-top: 10px; padding-bottom: 10px; position: sticky; top: 0; z-index: 2; background: var(--bg1); }
.ptable td { border-bottom: 1px solid rgba(255,255,255,.02); }
.ptable tr:last-child td { border: none; }
.ptable tr:hover td { background: rgba(255,255,255,.015); }
/* col 1: rank */
.ptable th:first-child, .ptable .rank { width: 36px; padding-left: 14px; padding-right: 2px; }
.ptable .rank { color: var(--ac); font-weight: 800; font-family: var(--mono); font-size: .75rem; }
/* col 2: name */
.ptable th:nth-child(2), .ptable .name { padding-left: 2px; }
.ptable .name a { color: var(--text); text-decoration: none; font-weight: 600; }
.ptable .name a:hover { color: var(--ac); }
/* numeric cols */
.ptable .frags { color: var(--green); font-weight: 700; font-family: var(--mono); text-align: center; width: 70px; }
.ptable .time { color: var(--muted); text-align: center; font-family: var(--mono); font-size: .78rem; width: 80px; }
.ptable th.col-frags { text-align: center; }
.ptable th.col-time { text-align: center; }

/* ═══ MAPS ═══ */
.maps-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; overflow: hidden; }
.map-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; position: relative; min-width: 0; max-width: 100%; }
.map-img { aspect-ratio: 16/9; background: var(--bg2); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: .6rem; position: relative; overflow: hidden; }
.map-img--empty { background: var(--bg2); }
.map-img-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1; pointer-events: none; }
.map-img img { filter: saturate(.75) brightness(.85); transition: filter .2s, transform .2s; }
.map-card:hover .map-img img { filter: saturate(.9) brightness(.95); transform: scale(1.03); }
.map-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.15) 45%, transparent 100%); pointer-events: none; }
.map-img--has-photo::after { display: block; }
.map-img--empty::after { display: block; background: linear-gradient(0deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.12) 42%, transparent 100%); }
.map-card-name { position: absolute; bottom: 5px; left: 6px; z-index: 2; font-size: .68rem; font-weight: 700; font-family: var(--mono); color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.45); }
.map-card-pct { position: absolute; bottom: 5px; right: 6px; z-index: 2; font-size: .6rem; font-weight: 700; font-family: var(--mono); color: var(--ac); text-shadow: 0 1px 4px rgba(0,0,0,.35); }

/* ═══ BANNERS ═══ */
.bnr-preview { background: var(--bg0); border: 1px solid var(--border); border-radius: 8px; padding: 12px; display: flex; justify-content: center; margin-bottom: 10px; overflow: hidden; }
.bnr-preview iframe { max-width: 100%; }
.bnr-iframe { background: var(--bg2); border-radius: 4px; width: 560px; height: 95px; max-width: 100%; display: flex; align-items: center; justify-content: center; font-size: .75rem; color: var(--muted); }
.bnr-expand { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 9px; background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; color: var(--muted); font-size: .78rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: color .15s, border-color .15s; }
.bnr-expand:hover { color: var(--ac); border-color: var(--ac); }
.bnr-codes { display: none; margin-top: 10px; }
.bnr-codes.show { display: block; }
.bnr-code-label { font-size: .6rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 4px; }
.bnr-code-block { background: var(--bg0); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-family: var(--mono); font-size: .72rem; color: var(--text2); overflow-x: auto; margin-bottom: 8px; white-space: nowrap; }
.bnr-sizes { display: flex; gap: 4px; margin: 0; }
.bnr-size {
    padding: 3px 10px; font-size: .65rem; font-weight: 700; border-radius: 5px;
    border: 1px solid var(--border); background: transparent; color: var(--muted);
    cursor: pointer; font-family: inherit;
    transition: color .15s, background .15s, border-color .15s;
}
.bnr-size:hover { color: var(--text2); border-color: rgba(255,255,255,.12); }
.bnr-size.on {
    background: var(--ac10); color: var(--ac); border-color: var(--ac15);
}

/* ═══ COMMENTS ═══ */
.cmt-input { width: 100%; padding: 10px 14px; background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: .82rem; font-family: inherit; outline: none; resize: none; min-height: 44px; }
.cmt-input:focus { border-color: var(--ac); }
.cmt-submit {
    margin-top: 6px; padding: 8px 18px;
    background: var(--ac10); color: var(--ac);
    border: 1px solid var(--ac15); border-radius: 6px;
    font-size: .75rem; font-weight: 700; cursor: pointer;
    font-family: inherit; min-height: 40px;
    transition: background .15s, border-color .15s;
}
.cmt-submit:hover { background: rgba(101,116,205,.18); border-color: rgba(101,116,205,.35); }
.cmt { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.025); }
.cmt:last-child { border: none; }
.cmt-head { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.cmt-avatar { width: 22px; height: 22px; border-radius: 6px; background: var(--bg3); display: flex; align-items: center; justify-content: center; font-size: .5rem; color: var(--muted); font-weight: 700; }
.cmt-user { font-size: .78rem; font-weight: 700; color: var(--ac); }
.cmt-date { font-size: .68rem; color: var(--muted); }
.cmt-text { font-size: .82rem; color: var(--text2); line-height: 1.5; padding-left: 28px; }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 900px) {
    .layout { grid-template-columns: 1fr; }
    .side { order: 2; }
    .main { order: 1; }
    .server-header { grid-template-columns: 1fr; min-height: 0; }
    .sh-visual { min-height: 160px; padding: 20px; }
    .sh-panel { border-left: none; border-top: 1px solid var(--border); padding: 20px; }
    .sh-kpis { grid-template-columns: repeat(2, 1fr); }
    .sh-actions { flex-direction: column; align-items: stretch; }
    .ip-box { min-width: 0; }
    .btn { justify-content: center; width: 100%; }
    .maps-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ═══ ANNOUNCEMENT ═══ */
.announcement-panel{margin-bottom:14px;border-left:3px solid var(--ac);box-shadow:inset 0 0 20px rgba(101,116,205,.04)}
.announcement-panel .p-head::before{background:linear-gradient(90deg,rgba(101,116,205,.14) 0%,rgba(101,116,205,.05) 35%,transparent 65%)}
.announcement-title{font-weight:700;font-size:.88rem;margin-bottom:6px;color:var(--text)}
.announcement-text{font-size:.82rem;color:var(--text2);line-height:1.65}
.announcement-meta{font-size:.68rem;color:var(--muted);margin-top:10px;display:flex;align-items:center;gap:4px}

/* ═══ MAP UPLOAD ═══ */
.map-upload-area{display:block;width:100%;height:100%;cursor:pointer;position:absolute;inset:0;z-index:3}
.map-upload-area>svg{display:none}
.map-upload-tag{
    position:absolute;top:6px;right:6px;z-index:2;
    display:inline-flex;align-items:center;gap:5px;
    font-size:.68rem;font-weight:700;color:var(--text);
    background:var(--ac10);border:1px solid var(--ac15);
    padding:6px 10px;border-radius:8px;cursor:pointer;
    transition:background .15s,border-color .15s;
}
.map-upload-tag:hover{background:rgba(101,116,205,.18);border-color:rgba(101,116,205,.35)}
.map-upload-area.mini .map-upload-tag{top:4px;right:4px;font-size:.58rem;padding:4px 8px}
.map-upload-input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;z-index:3}
.map-upload-area.done{pointer-events:none}
.map-upload-area.done .map-upload-tag{background:#16a34a}
.map-upload-area.uploading{pointer-events:none}
.map-upload-area.uploading .map-upload-tag{background:#6b7280;color:#fff}

/* ═══ EMBED CODES ═══ */
.embed-collapsed{display:none!important}
.embed-codes-grid:not(.embed-collapsed){display:flex;flex-direction:column;gap:8px;overflow:hidden}
.embed-toggle-btn{display:flex;align-items:center;gap:5px;width:100%;padding:8px;margin:0 0 10px;background:var(--bg2);border:1px solid var(--border);border-radius:6px;color:var(--muted);font-size:.78rem;font-weight:600;font-family:inherit;cursor:pointer;justify-content:center;transition:all .15s}
.embed-toggle-btn:hover{color:var(--ac);border-color:var(--ac)}
.embed-codes-grid{display:flex;flex-direction:column;gap:8px;overflow:hidden}
.embed-code-card{background:var(--bg2);border:1px solid var(--border);border-radius:8px;overflow:hidden;min-width:0}
.embed-code-header{padding:8px 12px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border);font-size:.72rem}
.embed-badge{font-size:.58rem;font-weight:700;padding:2px 7px;border-radius:3px;text-transform:uppercase}
.embed-badge.html{background:rgba(101,116,205,.12);color:var(--ac)}
.embed-badge.bbcode{background:rgba(59,130,246,.1);color:#6d8ec9}
.embed-badge.iframe{background:rgba(168,85,247,.1);color:#a78bfa}
.embed-desc{color:var(--muted);font-size:.68rem}
.embed-code-body{
    display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--bg0);
    overflow:hidden;min-height:36px;max-height:36px;
}
.embed-code-text{
    flex:1;min-width:0;
    font-family:var(--mono);font-size:.68rem;color:var(--text2);line-height:1.4;
    overflow-x:auto;overflow-y:hidden;white-space:nowrap;
    user-select:text;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.embed-code-text::-webkit-scrollbar{display:none}
.copy-embed-btn{background:var(--bg3);border:none;color:var(--muted);padding:4px 8px;border-radius:4px;cursor:pointer;font-size:.7rem;flex-shrink:0}
.copy-embed-btn:hover{color:var(--text);background:var(--bg4)}

/* ═══ BANNER LAYOUT ═══ */
.bnr-layout{display:flex;flex-direction:column;gap:16px}
.bnr-preview-row{margin-bottom:4px}
.bnr-preview-pane .bnr-preview{
    display:flex;justify-content:center;align-items:center;
    background:var(--bg0);border:1px solid var(--border);border-radius:8px;padding:14px;
}
.bnr-split{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,260px);gap:16px;align-items:start;
}
.bnr-split.embed-collapsed{display:none!important}
.bnr-embed-col{min-width:0}
.bnr-embed-col .embed-codes-grid{display:flex;flex-direction:column;gap:8px}
.bnr-customize{
    padding:14px;background:var(--bg2);border:1px solid var(--border);border-radius:12px;min-width:0;
}
.bnr-preset-list{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.bnr-preset{
    padding:4px;border:1px solid var(--border);border-radius:6px;background:var(--bg1);cursor:pointer;
    transition:border-color .15s,transform .1s;
}
.bnr-preset:hover{border-color:rgba(255,255,255,.12);transform:scale(1.02)}
.bnr-preset.active{border-color:var(--ac);box-shadow:0 0 0 1px color-mix(in srgb,var(--ac) 40%,transparent)}
.bnr-preset-swatch{
    display:block;width:100%;height:30px;border-radius:4px;
    background:var(--sw-bg);
    border-bottom:4px solid var(--sw-acc);
}
.bnr-color-stack{display:flex;flex-direction:column;gap:6px}
.bnr-color-field{
    display:flex;align-items:center;gap:8px;padding:8px 10px;
    background:var(--bg1);border:1px solid var(--border);border-radius:8px;
    cursor:pointer;
}
.bnr-color-field label{font-size:.65rem;font-weight:700;color:var(--muted);flex:1;cursor:pointer}
.bnr-color-field input[type=color]{
    width:32px;height:28px;border:1px solid var(--border);border-radius:6px;
    background:none;padding:1px;cursor:pointer;flex-shrink:0;
    -webkit-appearance:none;appearance:none;
}
.bnr-color-field input[type=color]::-webkit-color-swatch-wrapper{padding:1px}
.bnr-color-field input[type=color]::-webkit-color-swatch{border:none;border-radius:4px}
.bnr-color-field code{font-size:.6rem;color:var(--text2);font-family:var(--mono)}
.bnr-save-btn{
    display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:12px;
    padding:9px 12px;border-radius:8px;border:1px solid rgba(101,116,205,.28);
    background:var(--ac10);color:var(--ac);font-size:.74rem;font-weight:700;
    font-family:inherit;cursor:pointer;transition:background .15s,border-color .15s;
}
.bnr-save-btn:hover{background:rgba(101,116,205,.18);border-color:rgba(101,116,205,.4)}
.bnr-save-btn:disabled{opacity:.45;cursor:default}
.bnr-save-msg{font-size:.62rem;color:var(--green);text-align:center;margin-top:6px;min-height:1em}
@media(max-width:720px){
    .bnr-split{grid-template-columns:1fr}
}

/* ═══ LIVEMAP ═══ */
.livemap-legend{display:flex;gap:14px;padding:8px 14px;border-top:1px solid var(--border);font-size:.7rem;color:var(--muted)}

/* ═══ EMPTY STATE ═══ */
.empty-state{padding:20px;text-align:center;color:var(--muted);font-size:.85rem}

/* ═══ LAZY PANEL SKELETONS ═══ */
@keyframes sv-skel-pulse{0%,100%{opacity:.38}50%{opacity:.62}}
.sv-lazy-host{min-height:48px}
.sv-skel{display:block;background:var(--bg3);border-radius:5px;animation:sv-skel-pulse 1.9s ease-in-out infinite}
.sv-skel-tabs{display:flex;gap:8px;padding:0 14px 12px;border-bottom:1px solid var(--border)}
.sv-skel-pill{display:block;height:28px;width:108px;border-radius:6px;background:var(--bg3);animation:sv-skel-pulse 1.9s ease-in-out infinite}
.sv-skel-pill.on{width:124px;opacity:.55}
.sv-skel-table{padding:6px 14px 14px}
.sv-skel-tr{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.025)}
.sv-skel-tr:last-child{border-bottom:none}
.sv-skel-rank{width:18px;height:14px;flex-shrink:0}
.sv-skel-name{flex:1;height:14px;max-width:42%}
.sv-skel-num{width:36px;height:12px;flex-shrink:0;margin-left:auto}
.sv-skel-num.sm{width:28px}
.sv-skel-maps .map-img--empty{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;background:var(--bg2)}
.sv-skel-map{width:72%;height:38%;border-radius:4px}
.sv-skel-comments{display:flex;flex-direction:column;gap:14px}
.sv-skel-comment{display:flex;gap:10px;align-items:flex-start}
.sv-skel-avatar{width:32px;height:32px;border-radius:50%;flex-shrink:0}
.sv-skel-comment-body{flex:1;display:flex;flex-direction:column;gap:7px;padding-top:2px}
.sv-skel-line{height:11px;width:100%}
.sv-skel-line.w40{width:40%}
.sv-skel-line.w55{width:55%}
.sv-skel-line.w60{width:60%}
.sv-skel-line.w70{width:70%}
.sv-skel-line.w80{width:80%}
.sv-skel-widget .w-body{display:flex;flex-direction:column;gap:8px}
.sv-skel-head{height:12px;width:48%}
.sv-skel-head.w60{width:60%}
.sv-skel-block{height:72px;width:100%;border-radius:6px}
.sv-skel-dc{display:flex;gap:10px;justify-content:center;padding:8px 0}
[data-lazy-slot].sv-lazy-loaded>.sv-tabs,
[data-lazy-slot].sv-lazy-loaded>.tab-content,
[data-lazy-slot].sv-lazy-loaded>.maps-grid,
[data-lazy-slot].sv-lazy-loaded>.comments-list,
[data-lazy-slot].sv-lazy-loaded>.widget,
[data-lazy-slot].sv-lazy-loaded>.empty-state{animation:sv-up .32s ease both}

/* Login prompt */
.cmt-login-prompt{
    display:flex;align-items:center;justify-content:center;gap:8px;
    padding:14px;margin-bottom:14px;
    background:var(--bg2);border:1px dashed var(--border);border-radius:8px;
    color:var(--muted);font-size:.82rem;font-weight:600;
    text-decoration:none;transition:all .15s;
}
.cmt-login-prompt:hover{
    border-color:var(--ac);border-style:solid;
    color:var(--ac);background:rgba(101,116,205,.04);
}

/* ═══ COMMENT FORM ═══ */
.comment-form textarea{width:100%;padding:10px 14px;background:var(--bg2);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:.82rem;font-family:inherit;outline:none;resize:vertical;min-height:60px;transition:border-color .15s}
.comment-form textarea:focus{border-color:var(--ac)}

/* ═══ CONTACT ═══ */
.contact-item{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:.82rem;border-bottom:1px solid rgba(255,255,255,.025)}
.contact-item:last-child{border:none}
.contact-item a{color:var(--text2);text-decoration:none;font-weight:600}
.contact-item a:hover{color:var(--ac);text-decoration:none}

/* ═══ STAFF ═══ */
.staff-item{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:.82rem;border-bottom:1px solid rgba(255,255,255,.025)}
.staff-item:last-child{border:none}
.staff-item a{color:var(--text2);text-decoration:none;font-weight:600}
.staff-item a:hover{color:var(--ac)}
.staff-item .role{font-size:.68rem;color:var(--text2);margin-left:auto;font-weight:600}

/* ═══ SCORE INFO BTN ═══ */
.score-info-btn{margin-left:auto;background:var(--bg3);border:1px solid var(--border);color:var(--muted);width:20px;height:20px;border-radius:50%;font-size:.65rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center}

/* ═══ COPY BUTTON ═══ */
.copy-btn{background:none;border:none;cursor:pointer;color:var(--muted);padding:2px}
.copy-btn:hover{color:var(--ac)}

/* ═══ RESPONSIVE EXTRA ═══ */
@media(max-width:640px){
    .sh-kpis{grid-template-columns:repeat(2,1fr)}
    .maps-grid{grid-template-columns:repeat(3,1fr)}
}

/* ═══ BOT TAG ═══ */
.bot-tag{font-size:.55rem;padding:1px 5px;border-radius:3px;background:rgba(92,184,138,.1);color:var(--green);font-weight:700;margin-left:4px}

/* ═══ KPI COLOR UTILS ═══ */
.sh-kpi-val.ok{color:#94a0c8}

/* Hero map upload button */
.sh-upload{
    display:inline-flex;align-items:center;gap:5px;flex-shrink:0;
    font-size:.68rem;font-weight:700;color:var(--text);
    background:var(--ac10);border:1px solid var(--ac15);
    padding:5px 10px;border-radius:999px;cursor:pointer;
    backdrop-filter:blur(4px);
    transition:background .15s,border-color .15s;
}
.sh-upload:hover{background:rgba(101,116,205,.18);border-color:rgba(101,116,205,.35)}
.sh-upload input{display:none}

/* ═══ CheatDetector sidebar (Latest Reports style) ═══ */
.sv-cd-card .w-body.sv-cd-body{padding:0}
.sv-cd-head{display:flex;align-items:center;gap:8px}
.sv-cd-viewall{margin-left:auto;font-size:.64rem;font-weight:600;color:var(--muted);text-decoration:none}
.sv-cd-viewall:hover{color:var(--ac)}
.sv-cd-card .srv-r{display:flex;align-items:center;gap:8px;padding:9px 14px;text-decoration:none;color:inherit;border-bottom:1px solid var(--border)}
.sv-cd-card .srv-r:last-of-type{border:none}
.sv-cd-card a.srv-r:hover{background:var(--bg2)}
.sv-cd-card .srv-mid{flex:1;min-width:0;overflow:hidden}
.sv-cd-card .srv-line1{display:flex;align-items:center;gap:6px}
.sv-cd-card .srv-nm{font-size:.78rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.sv-cd-card a.srv-r:hover .srv-nm{color:var(--ac)}
.sv-cd-card .srv-line2{font-family:var(--mono);font-size:.56rem;color:var(--text2);margin-top:1px}
.sv-cd-line-plain{padding-left:0!important}
.sv-cd-card .srv-right{flex-shrink:0;text-align:right}
.sv-cd-card .srv-foot{padding:10px 14px;text-align:center;background:var(--bg2);border-top:1px solid var(--border)}
.sv-cd-card .srv-foot a{font-size:.72rem;color:var(--ac);font-weight:600;text-decoration:none}
.sv-cd-empty-row{cursor:default}
.sv-cd-empty-row:hover{background:transparent!important}
.sv-cd-report-r{align-items:center}
.sv-cd-card .hp4-pl-av{position:relative;width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--ac15),var(--bg3));border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.72rem;color:var(--ac);flex-shrink:0;font-family:var(--mono);overflow:visible}
.sv-cd-card .hp4-pl-av::before{content:attr(data-fallback)}
.sv-cd-card .hp4-pl-av img{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;object-fit:cover}
.sv-cd-card .hp4-pl-v{position:absolute;right:-4px;bottom:-4px;width:14px;height:14px;border-radius:50%;border:2px solid var(--bg1);display:flex;align-items:center;justify-content:center;z-index:2}
.sv-cd-card .hp4-pl-v.hp4-v-clean{background:var(--green);color:#fff}
.sv-cd-card .hp4-pl-v.hp4-v-suspicious{background:#eab308;color:#111827}
.sv-cd-card .hp4-pl-v.hp4-v-cheat{background:var(--red);color:#fff}
.sv-cd-card .hp4-verdict{font-size:.58rem;font-weight:800;padding:3px 8px;border-radius:5px;text-transform:uppercase;letter-spacing:.03em}
.sv-cd-card .hp4-v-clean{background:rgba(74,222,128,.12);color:var(--green)}
.sv-cd-card .hp4-v-suspicious{background:rgba(234,179,8,.12);color:#eab308}
.sv-cd-card .hp4-v-cheat{background:rgba(239,68,68,.12);color:var(--red)}