:root {
    --rr-bg: #05070b;
    --rr-panel: rgba(14, 18, 25, 0.78);
    --rr-panel-strong: #0d1118;
    --rr-border: rgba(255,255,255,0.07);
    --rr-pink: #ec4899;
    --rr-cyan: #22d3ee;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }

body {
    font-family: 'Inter', sans-serif;
    background:
        radial-gradient(900px 500px at 0% -10%, rgba(236,72,153,.13), transparent 55%),
        radial-gradient(700px 500px at 100% 0%, rgba(34,211,238,.09), transparent 50%),
        var(--rr-bg);
    color: #f1f5f9;
    overflow: hidden;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, rgba(255,255,255,.018), transparent 40%, rgba(255,255,255,.008));
    z-index: -1;
}

.glass {
    background: linear-gradient(180deg, rgba(16,20,28,.9), rgba(10,13,19,.92));
    border: 1px solid var(--rr-border);
    box-shadow: 0 18px 50px rgba(0,0,0,.22);
    backdrop-filter: blur(18px);
}

.app-sidebar {
    width: 278px;
    min-width: 278px;
    height: 100vh;
    padding: 22px 16px 16px;
    gap: 14px;
    border-right: 1px solid rgba(255,255,255,.06);
    overflow-y: auto;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 4px 6px 8px;
}

.brand-mark {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(135deg, #ec4899, #be185d);
    color: #fff;
    font-weight: 950;
    letter-spacing: -.08em;
    box-shadow: 0 12px 28px rgba(236,72,153,.25);
}

.brand-title {
    color: #fff;
    font-size: 22px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: -.055em;
    text-transform: uppercase;
}

.brand-subtitle {
    color: rgba(255,255,255,.35);
    font-size: 8px;
    line-height: 1;
    margin-top: 5px;
    letter-spacing: .16em;
    font-weight: 900;
}

.sidebar-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    border-radius: 12px;
    background: rgba(34,197,94,.05);
    border: 1px solid rgba(34,197,94,.10);
    color: rgba(187,247,208,.85);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #4ade80;
    box-shadow: 0 0 12px rgba(74,222,128,.65);
    animation: rrPulse 1.9s ease-in-out infinite;
}

.sidebar-nav { display: flex; flex-direction: column; gap: 4px; }
.sidebar-section-label {
    padding: 11px 10px 6px;
    color: rgba(255,255,255,.28);
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .18em;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 43px;
    padding: 8px 10px;
    border-radius: 14px;
    color: rgba(255,255,255,.66);
    text-decoration: none;
    font-size: 12px;
    font-weight: 850;
    transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
    border: 1px solid transparent;
}

.sidebar-link:hover {
    color: #fff;
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.06);
    transform: translateX(2px);
}

.sidebar-link-active {
    color: #fff !important;
    background: linear-gradient(135deg, rgba(236,72,153,.18), rgba(236,72,153,.05));
    border-color: rgba(236,72,153,.25);
    box-shadow: inset 3px 0 0 #ec4899, 0 8px 24px rgba(236,72,153,.08);
}

.sidebar-icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.4);
    transition: .18s ease;
}

.sidebar-icon-active { background: rgba(236,72,153,.14); color: #f9a8d4; }
.sidebar-link:hover .sidebar-icon { color: #fff; background: rgba(255,255,255,.07); }

.sidebar-clock-card {
    margin-top: auto;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.07);
    background: linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
}

.sidebar-clock {
    margin-top: 4px;
    font-size: 25px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: -.045em;
    color: #fff;
}

.sidebar-date {
    margin-top: 5px;
    color: rgba(255,255,255,.35);
    font-size: 9px;
    font-weight: 800;
}

.active-link {
    background: #ec4899 !important;
    color: white !important;
}

.scroll-flat::-webkit-scrollbar { height: 5px; width: 5px; }
.scroll-flat::-webkit-scrollbar-thumb { background: rgba(236,72,153,.8); border-radius: 999px; }
.scroll-flat::-webkit-scrollbar-track { background: transparent; }

.page-section { overflow-y: auto; overflow-x: visible !important; }

.stat-card {
    background: linear-gradient(180deg, rgba(17,22,30,.88), rgba(10,13,19,.92));
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 18px 40px rgba(0,0,0,.15);
}

.stat-card:hover { border-color: rgba(236,72,153,.12); }

.table-row {
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 18px;
}

select, input, textarea { background: #0a0e14 !important; color: white !important; }
select option { background:#0b0f14; color:white; }

#app, #app > main, main > section, main > div { min-height: 0; }

#global-data-loader .label {
    border-color: rgba(236,72,153,.15) !important;
    box-shadow: 0 10px 32px rgba(0,0,0,.25);
}

@keyframes rrPulse { 0%,100% { opacity:.6; transform:scale(.95); } 50% { opacity:1; transform:scale(1); } }

@media (max-width: 900px) {
    .app-sidebar { width: 84px; min-width: 84px; padding: 14px 9px; }
    .brand-title, .brand-subtitle, .sidebar-status span:not(.status-dot), .sidebar-section-label, .sidebar-link > span:last-child, .sidebar-clock-card { display:none; }
    .sidebar-brand { justify-content:center; }
    .sidebar-link { justify-content:center; }
    .sidebar-icon { width: 38px; height: 38px; }
}


/* ===== V10 visual system ===== */
:root {
    --rr-bg: #070912;
    --rr-bg-2: #0b1020;
    --rr-panel: rgba(16, 21, 35, .88);
    --rr-panel-strong: #11182a;
    --rr-border: rgba(148, 163, 184, .13);
    --rr-border-strong: rgba(167, 139, 250, .24);
    --rr-pink: #ff4fa3;
    --rr-violet: #8b5cf6;
    --rr-cyan: #22d3ee;
    --rr-blue: #38bdf8;
    --rr-text: #f8fafc;
    --rr-muted: #94a3b8;
}

html, body {
    background:
        radial-gradient(900px 600px at 10% -10%, rgba(139,92,246,.18), transparent 60%),
        radial-gradient(800px 600px at 95% 0%, rgba(34,211,238,.12), transparent 58%),
        radial-gradient(700px 500px at 50% 110%, rgba(255,79,163,.08), transparent 62%),
        var(--rr-bg);
    color: var(--rr-text);
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.45), transparent 80%);
}

.glass, .stat-card, .table-row {
    background: linear-gradient(145deg, rgba(20,27,45,.92), rgba(10,14,25,.9));
    border-color: var(--rr-border);
    box-shadow: 0 20px 55px rgba(0,0,0,.22);
}

.stat-card {
    border-radius: 22px !important;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.stat-card:hover {
    transform: translateY(-2px);
    border-color: rgba(139,92,246,.22);
    box-shadow: 0 24px 65px rgba(0,0,0,.3);
}

.app-sidebar {
    width: 264px;
    min-width: 264px;
    background: linear-gradient(180deg, rgba(12,17,30,.97), rgba(7,10,18,.98));
    border-right: 1px solid rgba(148,163,184,.12);
    box-shadow: 20px 0 60px rgba(0,0,0,.16);
}

.brand-mark {
    background: linear-gradient(135deg, #ff4fa3 0%, #8b5cf6 52%, #22d3ee 100%);
    box-shadow: 0 12px 35px rgba(139,92,246,.3);
}

.brand-title {
    background: linear-gradient(90deg,#fff,#e9d5ff 50%,#a5f3fc);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.sidebar-status {
    background: linear-gradient(90deg, rgba(34,211,238,.08), rgba(139,92,246,.08));
    border-color: rgba(34,211,238,.14);
}

.sidebar-link {
    min-height: 45px;
    border: 1px solid transparent;
}
.sidebar-link:hover {
    color: #fff;
    background: linear-gradient(90deg, rgba(139,92,246,.13), rgba(34,211,238,.05));
    border-color: rgba(139,92,246,.14);
    transform: translateX(2px);
}
.sidebar-link-active {
    color: #fff !important;
    background: linear-gradient(90deg, rgba(255,79,163,.18), rgba(139,92,246,.16), rgba(34,211,238,.06)) !important;
    border-color: rgba(255,79,163,.2) !important;
    box-shadow: inset 3px 0 0 #ff4fa3, 0 10px 30px rgba(139,92,246,.08);
}
.sidebar-icon-active {
    background: linear-gradient(135deg, rgba(255,79,163,.24), rgba(139,92,246,.24)) !important;
    color: #fff !important;
}

.sidebar-clock-card {
    margin-top: auto;
    border: 1px solid rgba(148,163,184,.12);
    background: linear-gradient(145deg, rgba(24,31,52,.8), rgba(10,14,25,.85));
    border-radius: 18px;
    padding: 14px;
}
.sidebar-clock {
    font-size: 24px;
    font-weight: 950;
    letter-spacing: -.04em;
    background: linear-gradient(90deg,#fff,#a5f3fc);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.sidebar-date { color: #94a3b8; }

select, input, textarea {
    background-color: rgba(8,12,22,.88) !important;
    border-color: rgba(148,163,184,.16) !important;
}
select:focus, input:focus, textarea:focus {
    border-color: rgba(139,92,246,.55) !important;
    box-shadow: 0 0 0 3px rgba(139,92,246,.08);
}

.rr-live-status-grid {
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 12px;
    margin: 0 0 26px;
}
.rr-live-status-card {
    min-height: 78px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 20px;
    border: 1px solid rgba(148,163,184,.12);
    background: linear-gradient(145deg, rgba(20,27,45,.9), rgba(10,14,25,.88));
    box-shadow: 0 16px 40px rgba(0,0,0,.16);
}
.rr-live-status-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    font-size: 15px;
}
.rr-live-status-icon.tone-cyan { background: rgba(34,211,238,.12); color:#67e8f9; }
.rr-live-status-icon.tone-violet { background: rgba(139,92,246,.14); color:#c4b5fd; }
.rr-live-status-icon.tone-blue { background: rgba(56,189,248,.12); color:#7dd3fc; }
.rr-live-status-icon.tone-amber { background: rgba(245,158,11,.12); color:#fbbf24; }
.rr-live-status-icon.tone-pink { background: rgba(255,79,163,.12); color:#ff8fc5; }
.rr-live-status-label {
    font-size: 9px;
    color: #64748b;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.rr-live-status-value {
    margin-top: 3px;
    font-size: 16px;
    color: #fff;
    font-weight: 950;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-menu-toggle {
    display: none;
    position: fixed;
    top: 14px;
    left: 14px;
    width: 44px;
    height: 44px;
    z-index: 3000;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    background: rgba(12,17,30,.94);
    color: #fff;
    box-shadow: 0 14px 35px rgba(0,0,0,.3);
    font-size: 17px;
}
.mobile-sidebar-backdrop { display:none; }

@media (max-width: 900px) {
    body { overflow: auto; }
    #app { min-height: 100vh !important; height: auto !important; overflow: visible !important; }
    main { min-width: 0; overflow: visible !important; }
    .mobile-menu-toggle { display: grid; place-items: center; }
    .mobile-sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1999;
        background: rgba(0,0,0,.62);
        backdrop-filter: blur(5px);
    }
    .app-sidebar {
        position: fixed !important;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 2000 !important;
        width: min(84vw, 300px) !important;
        min-width: 0 !important;
        transform: translateX(-105%);
        transition: transform .25s ease;
    }
    body.sidebar-open .app-sidebar { transform: translateX(0); }
    body.sidebar-open .mobile-sidebar-backdrop { display: block; }
    header { padding-left: 70px !important; }
    .rr-live-status-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .rr-live-status-card:last-child { grid-column: 1 / -1; }
    .page-section, main > section { padding-left: 14px !important; padding-right: 14px !important; }
    .stat-card { border-radius: 18px !important; }
    .modal-panel, .fixed > .glass { max-width: 100vw !important; }
}

@media (max-width: 560px) {
    .rr-live-status-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .rr-live-status-card { min-height: 68px; padding: 11px; border-radius: 16px; }
    .rr-live-status-icon { width: 32px; height: 32px; min-width:32px; }
    .rr-live-status-value { font-size: 14px; }
    .rr-live-status-label { font-size: 8px; }
    h1, h2 { line-height: 1.05; }
    .sidebar-clock-card { margin-bottom: 4px; }
}

@media (max-width: 700px) {
    .grid.grid-cols-12 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    .grid.grid-cols-12 > .col-span-1,
    .grid.grid-cols-12 > .col-span-3,
    .grid.grid-cols-12 > .col-span-2 { grid-column: auto !important; }
    .grid.grid-cols-12 > .col-span-3 { grid-column: 1 / -1 !important; }
    .grid.grid-cols-12 > .col-span-2 { grid-column: span 1 !important; }
}


/* ===== V11 premium analytics polish ===== */
.page-title-icon{width:48px;height:48px;border-radius:16px;display:inline-grid;place-items:center;margin-right:12px;vertical-align:-10px;font-size:18px;border:1px solid rgba(255,255,255,.1);box-shadow:0 14px 38px rgba(0,0,0,.22)}
.page-title-icon.tone-yellow{background:linear-gradient(135deg,rgba(250,204,21,.22),rgba(245,158,11,.08));color:#fde68a;border-color:rgba(250,204,21,.25)}
.page-title-icon.tone-orange{background:linear-gradient(135deg,rgba(249,115,22,.24),rgba(234,88,12,.08));color:#fdba74;border-color:rgba(249,115,22,.25)}
.page-title-icon.tone-red{background:linear-gradient(135deg,rgba(239,68,68,.25),rgba(236,72,153,.08));color:#fda4af;border-color:rgba(239,68,68,.25)}
.page-title-icon.tone-cyan{background:linear-gradient(135deg,rgba(34,211,238,.24),rgba(59,130,246,.08));color:#a5f3fc;border-color:rgba(34,211,238,.25)}
.page-title-icon.tone-violet{background:linear-gradient(135deg,rgba(139,92,246,.24),rgba(255,79,163,.08));color:#ddd6fe;border-color:rgba(139,92,246,.25)}
.page-title-icon.tone-blue{background:linear-gradient(135deg,rgba(59,130,246,.24),rgba(34,211,238,.08));color:#bfdbfe;border-color:rgba(59,130,246,.25)}
.emoji-table-head,.emoji-table-row{display:grid;grid-template-columns:68px minmax(260px,2.5fr) 125px 125px 150px minmax(290px,2fr);gap:14px}
.emoji-table-head>*,.emoji-table-row>*{min-width:0}.emoji-table-row{box-shadow:inset 0 1px 0 rgba(255,255,255,.02),0 12px 40px rgba(0,0,0,.12)}
.emoji-top-users{display:flex;flex-wrap:wrap;gap:7px;align-items:center;min-width:0}.emoji-user-pill{flex:1 1 92px;min-width:92px;max-width:140px;padding:8px 9px;border-radius:13px;background:linear-gradient(145deg,rgba(250,204,21,.09),rgba(255,255,255,.035));border:1px solid rgba(250,204,21,.13);box-shadow:0 8px 18px rgba(0,0,0,.14)}.emoji-user-pill span:last-child{color:#facc15}
.penalty-user-head{display:flex;align-items:center;gap:10px;min-width:0}.penalty-user-icon{width:40px;height:40px;flex:0 0 40px;border-radius:13px;display:grid;place-items:center;color:#fdba74;background:linear-gradient(135deg,rgba(249,115,22,.2),rgba(239,68,68,.08));border:1px solid rgba(249,115,22,.17)}
.mod-name-line{display:flex;align-items:center;gap:12px;min-width:0}.mod-avatar-icon{width:42px;height:42px;flex:0 0 42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(34,211,238,.22),rgba(139,92,246,.15));color:#a5f3fc;border:1px solid rgba(34,211,238,.17);box-shadow:0 10px 28px rgba(34,211,238,.08)}
.action-badge{display:inline-flex;align-items:center;gap:7px}.action-badge i{font-size:11px;opacity:.85}
@media(max-width:1200px){.emoji-table-head,.emoji-table-row{grid-template-columns:56px minmax(220px,2fr) 110px 110px 125px minmax(230px,1.6fr);gap:10px}}
@media(max-width:900px){.emoji-table-head{display:none}.emoji-table-row{display:grid;grid-template-columns:56px 1fr 1fr;gap:12px}.emoji-main{grid-column:2/-1}.emoji-metric{text-align:left!important}.emoji-top-users{grid-column:1/-1;padding-top:4px}.emoji-user-pill{max-width:none}}
@media(max-width:560px){.page-title-icon{width:42px;height:42px;border-radius:14px;font-size:16px}.emoji-table-row{grid-template-columns:46px 1fr}.emoji-main,.emoji-metric{grid-column:2}.emoji-top-users{grid-column:1/-1}}

.penalty-top-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;min-width:0;width:min(720px,100%)}
@media(max-width:700px){.penalty-top-stats{grid-template-columns:1fr 1fr;width:100%}}
@media(max-width:480px){.penalty-top-stats{grid-template-columns:1fr}}


/* ===== V11 visual system: richer color without sacrificing readability ===== */
:root{--v11-violet:#8b5cf6;--v11-pink:#ec4899;--v11-cyan:#22d3ee;--v11-blue:#3b82f6;--v11-yellow:#facc15;--v11-orange:#f97316;--v11-red:#ef4444;--v11-green:#22c55e}
body{background:
 radial-gradient(900px 520px at 78% -10%,rgba(139,92,246,.12),transparent 65%),
 radial-gradient(760px 460px at 10% 105%,rgba(34,211,238,.08),transparent 65%),
 #05070a!important}
main:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,rgba(139,92,246,.035),transparent 32%,rgba(34,211,238,.025) 72%,transparent);z-index:0}
main>*{position:relative;z-index:1}
.stat-card{position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(16,21,31,.94),rgba(10,13,19,.94));border:1px solid rgba(255,255,255,.07);box-shadow:0 18px 55px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.025)}
.stat-card:before{content:"";position:absolute;left:-20%;top:-80%;width:55%;height:180%;background:radial-gradient(circle,rgba(139,92,246,.12),transparent 68%);pointer-events:none}
.stat-card:hover{border-color:rgba(139,92,246,.2);box-shadow:0 20px 70px rgba(0,0,0,.28),0 0 35px rgba(139,92,246,.05)}
.table-row:hover{background:linear-gradient(135deg,rgba(139,92,246,.08),rgba(34,211,238,.035))!important}
input:focus,select:focus{box-shadow:0 0 0 3px rgba(139,92,246,.08),0 0 24px rgba(139,92,246,.06)}
.emoji-table-row{background:linear-gradient(145deg,rgba(15,18,24,.98),rgba(11,14,20,.96))!important}
.emoji-table-row:hover{background:linear-gradient(145deg,rgba(250,204,21,.065),rgba(139,92,246,.045))!important;transform:translateY(-1px)}
.emoji-user-pill{min-width:0!important;width:100%;max-width:none!important}
.emoji-top-users{align-content:center}
.action-badge{padding:6px 9px;border-radius:10px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07)}
.action-badge[class*="text-yellow"],.action-badge.text-yellow-400{background:rgba(250,204,21,.08)}
.action-badge.text-red-400{background:rgba(239,68,68,.08)}
.action-badge.text-green-400{background:rgba(34,197,94,.08)}
.action-badge.text-cyan-400{background:rgba(34,211,238,.08)}
.page-title-icon{box-shadow:0 12px 35px rgba(0,0,0,.25),0 0 30px rgba(139,92,246,.08)}
@media(max-width:900px){body{overflow:hidden}.stat-card{box-shadow:0 10px 35px rgba(0,0,0,.2)}}