:root {
    --accent: #A855F7;
    --red: #FF3B45;
    --green: #4ADE80;
    --white: #F4F7FB;
    --bg: #08040F;

    --panel: #130A22;
    --panel-soft: #1B0F30;
    --line: rgba(168, 85, 247, .22);
    --muted: #9C8FB4;
}

html[data-theme="red"] {
    --accent: #FF3B45;
    --bg: #12070A;
    --panel: #1A0C11;
    --panel-soft: #241016;
    --line: rgba(255, 107, 107, .18);
}

html[data-theme="navy"] {
    --accent: #7FA8D9;
    --bg: #061420;
    --panel: #0A1D2D;
    --panel-soft: #0E2639;
    --line: rgba(127, 168, 217, .18);
}

html[data-theme="blue"] {
    --accent: #A9C4E4;
    --bg: #070A0F;
    --panel: #0E131B;
    --panel-soft: #121821;
    --line: rgba(169, 196, 228, .15);
}

html[data-theme="green"] {
    --accent: #5EE79A;
    --bg: #05120B;
    --panel: #0A1A11;
    --panel-soft: #0E2417;
    --line: rgba(94, 231, 154, .18);
}

html[data-theme="white"] {
    --accent: #F4F7FB;
    --bg: #0A0D12;
    --panel: #12161D;
    --panel-soft: #171C25;
    --line: rgba(244, 247, 251, .14);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--white);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

.app {
    display: grid;
    grid-template-columns: 262px 1fr;
    min-height: 100vh;
}

.sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 18px;
    height: 100vh;
    overflow-y: auto;
    padding: 20px 16px;
    background: linear-gradient(180deg, var(--panel) 0%, color-mix(in srgb, var(--panel) 70%, #000) 100%);
    border-right: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 11px; animation: fadeDown .45s ease both; }
.brand-logo { width: 38px; height: 38px; display: block; object-fit: contain; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 45%, transparent)); }
.brand-text b { display: block; font-size: 16px; font-weight: 800; letter-spacing: .10em; }
.brand-text small { display: block; margin-top: 3px; font-size: 9px; letter-spacing: .22em; color: color-mix(in srgb, var(--accent) 85%, #fff); }

.nav-label { font-size: 10px; letter-spacing: .16em; color: var(--muted); padding-left: 4px; }

.nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 13px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #E9DEE2;
    border: 1px solid transparent;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.nav-item svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; opacity: .9; }
.nav-item:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); transform: translateX(2px); }

.nav-item.is-active {
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, transparent), transparent 85%);
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
    color: #fff;
    box-shadow: inset 3px 0 0 var(--accent);
}

.sidebar-spacer { flex: 1; }

.promo {
    position: relative;
    overflow: hidden;
    padding: 18px 14px 16px;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: 14px;
    text-align: center;
    background: url('../assets/img/sa-map.jpg') center 78% / cover no-repeat;
    animation: fadeUp .6s ease both;
}

.promo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 55%, transparent), color-mix(in srgb, var(--accent) 55%, var(--bg)) 90%);
}

.promo img, .promo b, .promo small { position: relative; }
.promo img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .6)); }
.promo b { display: block; margin-top: 8px; font-size: 14px; letter-spacing: .08em; }
.promo small { display: block; margin-top: 3px; font-size: 8px; letter-spacing: .2em; opacity: .85; }

.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--panel) 55%, transparent);
    animation: fadeDown .45s ease both;
}

.topbar-titles h1 { margin: 0; font-size: 17px; font-weight: 700; }
.topbar-titles p { margin: 2px 0 0; font-size: 11.5px; color: var(--muted); }

.search {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 38px;
    flex: 0 1 420px;
    margin-left: auto;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg) 45%, transparent);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.search:focus-within { border-color: color-mix(in srgb, var(--accent) 50%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.search svg { width: 15px; height: 15px; fill: none; stroke: var(--muted); stroke-width: 1.9; flex: none; }
.search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--white); font: inherit; font-size: 12.5px; }
.search input::placeholder { color: color-mix(in srgb, var(--muted) 85%, transparent); }
.search kbd {
    flex: none;
    padding: 3px 7px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font: inherit;
    font-size: 10px;
    color: var(--muted);
}

.topbar-actions { display: flex; align-items: center; gap: 13px; }

.premium { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--accent); transition: opacity .2s ease; }
.premium:hover { opacity: .8; }
.premium svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; }

.icon-btn {
    position: relative;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--panel) 80%, transparent);
    color: var(--white);
    cursor: pointer;
    transition: border-color .2s ease, transform .2s ease;
}

.icon-btn:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); transform: translateY(-1px); }
.icon-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.icon-btn .badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
    animation: colorPulse 2.6s ease-in-out infinite;
}

.signin-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 18px;
    border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
    border-radius: 10px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 92%, #fff), color-mix(in srgb, var(--accent) 55%, #2B0F4A));
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 38%, transparent);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.signin-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 30px color-mix(in srgb, var(--accent) 50%, transparent);
    filter: brightness(1.08);
}

.signin-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; }

.user-out {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    color: var(--muted);
    transition: color .18s ease, background .18s ease;
}

.user-out:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.user-out svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.user-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 38px;
    padding: 0 10px 0 5px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--panel) 80%, transparent);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--white);
    cursor: pointer;
    transition: border-color .2s ease;
}

.user-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }

.user-link { display: inline-flex; align-items: center; gap: 9px; color: inherit; text-decoration: none; transition: color .18s ease; }
.user-link:hover { color: var(--accent); }
.user-avatar {
    position: relative;
    display: block;
    width: 28px;
    height: 28px;
    overflow: hidden;
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent) 30%, transparent);
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 8%;
    transform: scale(2);
    transform-origin: 50% 12%;
}
.user-chip svg { width: 13px; height: 13px; fill: none; stroke: var(--muted); stroke-width: 2; }

.content { display: flex; flex-direction: column; gap: 16px; padding: 18px 24px 24px; }

.hero {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 20px 0;
    min-height: 306px;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
    border-radius: 18px;
    background: var(--panel);
    box-shadow: 0 24px 70px color-mix(in srgb, var(--accent) 20%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent);
    animation: fadeUp .55s ease both;
}

.hero-art {
    position: absolute;
    inset: 0;
    background: url('img/sa-map.jpg') center 74% / 250% no-repeat;
    filter: saturate(.55) brightness(.42) contrast(1.1);
}

.hero-veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(100deg, color-mix(in srgb, var(--bg) 92%, transparent) 0%, color-mix(in srgb, var(--bg) 62%, transparent) 42%, color-mix(in srgb, var(--accent) 42%, transparent) 100%),
        radial-gradient(circle at 86% 18%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 58%);
}

.hero-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; }

.live-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; color: var(--white); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px rgba(74, 222, 128, .9); animation: livePulse 1.9s ease-out infinite; }
.live-pill.is-live .live-dot { background: var(--green); }
.live-pill.is-off .live-dot { background: var(--red); box-shadow: 0 0 10px color-mix(in srgb, var(--red) 90%, transparent); animation: livePulseRed 1.9s ease-out infinite; }

.ghost-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg) 45%, transparent);
    color: var(--white);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.ghost-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.ghost-btn:hover { border-color: color-mix(in srgb, var(--accent) 60%, transparent); transform: translateY(-1px); }

.hero-mark { position: relative; margin-top: 4px; }
.hero-word {
    font-size: clamp(38px, 5vw, 60px);
    font-weight: 800;
    font-style: italic;
    letter-spacing: -.02em;
    line-height: .95;
    text-shadow: 0 6px 26px color-mix(in srgb, var(--accent) 45%, transparent), 0 2px 0 rgba(0, 0, 0, .35);
}
.hero-tag { margin-top: 6px; font-size: 10px; letter-spacing: .42em; color: color-mix(in srgb, var(--accent) 90%, #fff); }

.hero-bottom { position: relative; margin-top: auto; padding-bottom: 14px; }

.hero-count { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 12px; }
.hero-count strong { font-size: 40px; font-weight: 800; line-height: .95; letter-spacing: -.02em; }
.hero-count span { padding-bottom: 4px; font-size: 12.5px; color: rgba(244, 247, 251, .78); }

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

.stat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 12px;
    background: color-mix(in srgb, var(--panel) 82%, transparent);
    backdrop-filter: blur(10px);
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.stat:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--panel) 94%, transparent); }
.stat svg { width: 19px; height: 19px; flex: none; fill: none; stroke: var(--accent); stroke-width: 1.6; }
.stat b { display: block; font-size: 15px; font-weight: 700; }
.stat small { display: block; margin-top: 1px; font-size: 10px; color: var(--muted); }

.panels { display: grid; grid-template-columns: 1.72fr 1fr; gap: 16px; align-items: start; }
.col-main, .col-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.card {
    padding: 15px 17px 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--panel);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .38), inset 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent);
    animation: fadeUp .55s ease both;
}

.col-main .card:nth-child(2) { animation-delay: .08s; }
.col-side .card:nth-child(2) { animation-delay: .1s; }
.col-side .card:nth-child(3) { animation-delay: .16s; }

.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.card-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 700; }
.card-head h2 svg { width: 16px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 1.8; }
.card-head a { font-size: 11px; font-weight: 600; color: color-mix(in srgb, var(--accent) 92%, #fff); transition: opacity .2s ease; }
.card-head a:hover { opacity: .75; }

.news { display: flex; flex-direction: column; }
.news-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
    animation: fadeUp .45s ease both;
}
.news-item:last-child { border-bottom: 0; padding-bottom: 2px; }

.news-thumb {
    position: relative;
    display: grid;
    place-items: center;
    width: 56px;
    height: 44px;
    flex: none;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: 9px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 32%, #1a0e12), #140A10);
}
.news-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.news-thumb img.is-skin { object-fit: cover; transform: scale(1.9); transform-origin: 50% 12%; }

.news-body { min-width: 0; flex: 1; }
.news-body p { margin: 0; font-size: 12.5px; line-height: 1.4; color: #EFE6E9; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.news-meta { display: flex; align-items: center; gap: 8px; margin-top: 5px; font-size: 10.5px; color: var(--muted); }
.news-meta svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.tag {
    padding: 2px 6px;
    border-radius: 5px;
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: .06em;
    color: #fff;
}
.tag-important { background: color-mix(in srgb, var(--accent) 90%, #000); }
.tag-update { background: #C27A24; }
.tag-event { background: #2F8F5B; }

.chart { display: flex; align-items: flex-end; gap: 6px; height: 152px; padding-top: 6px; }
.chart .bar-wrap { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.chart .bar {
    width: 100%;
    min-height: 3px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 30%, transparent));
    transition: height .5s cubic-bezier(.2, .8, .2, 1), filter .2s ease;
}
.chart .bar-wrap:hover .bar { filter: brightness(1.35); }
.chart-axis { display: flex; justify-content: space-between; margin-top: 8px; font-size: 9.5px; color: var(--muted); }

.staff-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 11px;
    margin-bottom: 8px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--panel-soft) 70%, transparent);
    font-size: 12.5px;
    font-weight: 600;
    transition: border-color .2s ease, transform .2s ease;
}
.staff-row:last-child { margin-bottom: 0; }
.staff-row:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); transform: translateX(2px); }
.staff-row svg { width: 15px; height: 15px; fill: none; stroke: var(--accent); stroke-width: 1.8; flex: none; }
.staff-row .pill { margin-left: auto; padding: 2px 8px; border-radius: 7px; background: color-mix(in srgb, var(--accent) 88%, #000); font-size: 10.5px; font-weight: 700; }
.staff-row .chew { width: 12px; height: 12px; stroke: var(--muted); }

.server-row { display: flex; align-items: center; gap: 11px; }
.server-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: none;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    border-radius: 11px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 30%, #180C11), #140A10);
}
.server-icon img { width: 22px; height: 22px; object-fit: contain; }
.server-body { min-width: 0; flex: 1; }
.server-body b { display: block; font-size: 12.5px; font-weight: 700; }
.server-body small { display: block; margin-top: 2px; font-size: 10px; color: var(--muted); }
.server-right { text-align: right; }
.server-status { display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 800; letter-spacing: .08em; color: var(--green); }
.server-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.server-status.is-off { color: var(--red); }
.server-right small { display: block; margin-top: 3px; font-size: 10px; color: var(--muted); }

.recent { display: flex; flex-direction: column; }
.recent-item { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.recent-item:last-child { border-bottom: 0; }
.recent-item svg { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.7; }
.recent-item p { margin: 0; flex: 1; min-width: 0; font-size: 11.5px; color: #DCD2D6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-item time { flex: none; font-size: 10px; color: var(--muted); }

.footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 2px; font-size: 10.5px; color: var(--muted); }
.footer-badges { display: flex; gap: 14px; }
.pay-badge { font-weight: 700; opacity: .5; }

.map-view {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: 30px;
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    backdrop-filter: blur(3px);
    animation: fadeIn .25s ease both;
}

.map-view[hidden] { display: none; }

.map-shell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(1020px, 88vh, 92vw);
    height: min(1020px, 88vh, 92vw);
}

.map-canvas {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: 18px;
    background: var(--panel) url('img/sa-map.jpg') center/contain no-repeat;
    animation: mapIn .45s cubic-bezier(.2, .8, .2, 1) both;
}

.map-close { position: absolute; top: -2px; right: 0; z-index: 2; }
.map-hud { position: absolute; right: 0; bottom: 8px; left: 0; z-index: 2; }

.dot {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 95%, transparent);
    transform: translate(-50%, -50%);
    animation: dotPulse 2.6s ease-in-out infinite;
}

.hero-dots .dot { width: 3px; height: 3px; }
.map-stats .stat { background: color-mix(in srgb, var(--panel) 88%, transparent); }

body.map-open { overflow: hidden; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes mapIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }
@keyframes livePulse {
    0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .55); }
    70% { box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}
@keyframes livePulseRed {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--red) 55%, transparent); }
    70% { box-shadow: 0 0 0 9px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes dotPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .85; }
    50% { transform: translate(-50%, -50%) scale(1.5); opacity: 1; }
}
@keyframes colorPulse {
    0%, 100% { opacity: .7; transform: scale(.9); }
    50% { opacity: 1; transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (max-width: 1250px) {
    .stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .panels { grid-template-columns: 1fr; }
    .search { flex-basis: 260px; }
}

@media (max-width: 900px) {
    .app { grid-template-columns: 1fr; }
    .sidebar { display: none; }
    .search, .topbar-titles p { display: none; }
    .hero-count strong { font-size: 32px; }
    .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ONENATION VISUAL REFRESH — no markup, navigation or behavior changes */
:root {
  --accent: #a855f7;
  --bg: #080713;
  --panel: #111025;
  --panel-soft: #1a1734;
  --line: rgba(151, 112, 255, .23);
  --muted: #a7a4c4;
  --white: #f6f5ff;
}
html[data-theme="purple"], html:not([data-theme]) { --accent:#a855f7; --bg:#080713; --panel:#111025; --panel-soft:#1a1734; --line:rgba(151,112,255,.23); --muted:#a7a4c4; }
html[data-theme="red"] { --accent:#ff3b45; }
html[data-theme="navy"] { --accent:#7fa8d9; }
html[data-theme="blue"] { --accent:#a9c4e4; }
html[data-theme="green"] { --accent:#5ee79a; }
html[data-theme="white"] { --accent:#f4f7fb; }
body { background:radial-gradient(ellipse 65% 55% at 82% -8%,rgba(75,57,166,.20),transparent 75%),radial-gradient(ellipse 48% 60% at 0% 95%,rgba(36,86,191,.11),transparent 80%),var(--bg); }
.sidebar { background:linear-gradient(170deg,#111026 0%,#0b0a19 70%,#090916 100%); box-shadow:8px 0 40px rgba(0,0,0,.14); }
.main { min-width:0; }
.nav-item { transition:background .2s ease,box-shadow .2s ease,transform .2s ease; }
.nav-item:hover { background:rgba(143,95,255,.11); transform:translateX(2px); }
.nav-item.is-active { background:linear-gradient(90deg,rgba(153,85,247,.24),rgba(58,111,255,.10)); box-shadow:inset 3px 0 #a855f7,0 0 24px rgba(118,69,234,.10); }
.hero { box-shadow:0 18px 60px rgba(3,2,18,.42),0 0 0 1px rgba(167,107,255,.14); }
.hero-veil { background:linear-gradient(90deg,rgba(13,8,37,.85),rgba(24,12,60,.44) 52%,rgba(8,15,39,.27)); }
.topbar { backdrop-filter:blur(16px); }
.promo { background:linear-gradient(135deg,rgba(105,48,194,.23),rgba(32,67,153,.16)); border-color:rgba(170,109,255,.27); }
:where(.card,.stat-card,.panel,.widget,.server-card,.announcement,.application-card) { box-shadow:0 10px 32px rgba(0,0,0,.15); }
:where(button,.btn,.ghost-btn,.icon-btn,.signin-btn,.premium) { transition:transform .2s ease,filter .2s ease,box-shadow .2s ease; }
:where(button,.btn,.ghost-btn,.icon-btn,.signin-btn,.premium):hover { filter:brightness(1.12); }
@media (prefers-reduced-motion:reduce) { .nav-item,:where(button,.btn,.ghost-btn,.icon-btn,.signin-btn,.premium) { transition:none; } }

/* ONENATION SA-MP • purple/cyan cinematic design • visual-only overrides */
:root, html:not([data-theme]), html[data-theme="purple"] {
 --accent:#cf42ff; --bg:#080614; --panel:#100c23; --panel-soft:#19102e;
 --line:rgba(177,67,255,.38); --muted:#b0a7c9; --white:#faf7ff;
}
body {background:radial-gradient(ellipse at 70% -18%,rgba(52,51,171,.23),transparent 60%),#080614;}
.sidebar {background:linear-gradient(170deg,#100923 0%,#0a071b 55%,#11092a 100%);border-right:1px solid rgba(183,68,255,.34);}
.sidebar::before {content:"";position:absolute;inset:24% 0 12%;pointer-events:none;opacity:.19;background:linear-gradient(180deg,transparent 15%,#321056 100%),url('img/hero-rpg-v7.jpg') 29% 50% / auto 100% no-repeat;mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);}
.sidebar>* {position:relative;z-index:1;}
.brand-logo {filter:drop-shadow(0 0 12px rgba(196,50,255,.65));}
.nav-item.is-active {border:1px solid #a837ee;background:linear-gradient(90deg,rgba(130,32,227,.35),rgba(30,23,72,.74));box-shadow:inset 3px 0 #d34bff,0 0 24px rgba(173,40,255,.23),inset 0 0 20px rgba(123,47,255,.1);}
.promo {background:linear-gradient(0deg,rgba(123,28,223,.62),rgba(10,6,31,.65)),url('img/hero-rpg-v7.jpg') 28% 55% / cover no-repeat;border:1px solid #9c2cdd;box-shadow:0 0 24px rgba(156,44,221,.24);}
.promo::before {background:linear-gradient(180deg,rgba(15,8,42,.25),rgba(93,21,165,.5));}
.topbar {background:rgba(12,9,30,.91);border-bottom:1px solid rgba(172,68,255,.25);}
.content {gap:20px;}
.hero {min-height:350px;border-radius:24px;border:1px solid rgba(199,48,255,.82);box-shadow:0 15px 55px rgba(0,0,0,.4),-2px 3px 15px rgba(197,35,255,.22),2px 4px 18px rgba(0,176,255,.22);padding:20px 22px 0;background:#100923;}
.hero-art {background:url('img/hero-rpg-v7.jpg') center 42% / cover no-repeat;filter:saturate(1.15) brightness(.9) contrast(1.08);}
.hero-veil {background:linear-gradient(90deg,rgba(11,5,32,.91) 0%,rgba(23,8,56,.7) 34%,rgba(12,5,36,.18) 73%,rgba(5,7,30,.14)),linear-gradient(0deg,rgba(9,5,30,.88),transparent 43%);}
.hero-word {font-size:clamp(38px,5vw,67px);font-weight:800;font-style:italic;letter-spacing:-.055em;color:#fff;text-shadow:0 0 23px rgba(202,58,255,.43),0 3px 12px rgba(0,0,0,.65);}
.hero-tag {font-size:11px;letter-spacing:.48em;color:#e56cff;text-shadow:0 0 10px rgba(221,60,255,.55);}
.hero-mark {margin-top:14px;}
.hero-count strong {font-size:44px;}
.stat {border:1px solid rgba(169,74,255,.46);border-radius:15px;background:linear-gradient(135deg,rgba(23,13,48,.94),rgba(10,12,34,.9));box-shadow:inset 0 1px 0 rgba(220,170,255,.08),0 5px 20px rgba(0,0,0,.25);backdrop-filter:blur(9px);}
.stat:nth-child(even) {border-bottom-color:rgba(0,187,255,.7);}
.stat svg {stroke:#d347ff;filter:drop-shadow(0 0 5px rgba(196,50,255,.35));}
.stat b {font-size:17px;color:#fff;}
.card {border:1px solid rgba(183,59,255,.72);border-radius:19px;background:linear-gradient(140deg,rgba(23,13,48,.97),rgba(10,12,32,.97));box-shadow:0 12px 35px rgba(0,0,0,.28),0 0 15px rgba(165,45,255,.12);overflow:hidden;}
.col-main .card {border-bottom-color:#00bfff;box-shadow:0 12px 35px rgba(0,0,0,.28),0 5px 13px rgba(0,177,255,.12);}
.col-side .card {border-bottom-color:#00bfff;}
.card-head h2 {font-size:15px;}
.card-head h2 svg,.staff-row svg {stroke:#d34aff;}
.card-head a {color:#e16aff;}
.staff-row {background:linear-gradient(90deg,rgba(40,23,74,.65),rgba(21,19,51,.8));border-color:rgba(177,78,255,.34);border-radius:12px;}
.news-item {border-bottom-color:rgba(169,85,247,.18);}
.news-thumb {border:1px solid rgba(196,67,255,.4);}
.server-icon {border:1px solid rgba(204,68,255,.58);background:linear-gradient(135deg,#42116e,#10142e);}
.search {border-color:rgba(177,81,255,.32);background:rgba(9,8,25,.82);}
.signin-btn {background:linear-gradient(135deg,#b83ef2,#743ac9);box-shadow:0 5px 22px rgba(175,57,244,.3);}
@media(max-width:900px){.hero{min-height:370px}.hero-art{background-position:61% center}.hero-veil{background:linear-gradient(90deg,rgba(11,5,32,.91),rgba(11,5,32,.42)),linear-gradient(0deg,rgba(9,5,30,.9),transparent 60%)}.hero-word{font-size:clamp(31px,8vw,53px)}.hero-tag{letter-spacing:.24em}}
@media(max-width:560px){.hero{padding:16px 12px 0;min-height:430px}.hero-word{font-size:36px}.stat{padding:10px 8px}.stat-row{gap:7px}}

/* ONENATION | Refined visual-only matching, 2026-11-11. No navigation or feature changes. */
:root {--accent:#c535ff;--panel:#100e23;--panel-soft:#17142e;--line:rgba(188,59,255,.47);--muted:#a9a5c4;--bg:#080a17;--white:#f8f8ff;}
html,body {background:#080a17;color:#f8f8ff;}
.app {grid-template-columns:278px minmax(0,1fr);}
.sidebar {background:linear-gradient(180deg,#0b0b1b 0%,#0b0a1a 56%,#100a27 100%);border-right:1px solid rgba(157,57,239,.28);padding:23px 17px;}
.sidebar::before {opacity:.11;background:linear-gradient(180deg,transparent,#1b0a42),url('img/hero-rpg-v7.jpg') 25% center / auto 85% no-repeat;}
.brand-logo {width:43px;height:43px;filter:drop-shadow(0 0 13px rgba(211,47,255,.85));}
.brand-text b {font-size:19px;letter-spacing:.085em;}
.brand-text small {font-size:9px;color:#db59ff;letter-spacing:.25em;}
.nav-item {border-radius:12px;min-height:47px;}
.nav-item.is-active {background:linear-gradient(90deg,rgba(162,23,240,.47),rgba(66,25,126,.25));border:1px solid #a627f3;box-shadow:inset 3px 0 #d84bff,0 0 21px rgba(163,34,244,.18);}
.nav-item.is-active svg {stroke:#e65aff;}
.promo {border:1px solid rgba(177,47,255,.7);background:linear-gradient(0deg,rgba(155,29,228,.46),rgba(16,11,37,.94)),url('img/hero-rpg-v7.jpg') 48% center / cover no-repeat;box-shadow:0 0 25px rgba(165,41,255,.16);}
.topbar {background:rgba(8,10,22,.98);border-bottom:1px solid rgba(166,60,248,.19);}
.hero {min-height:316px;border-radius:22px;border:1px solid #a82df3;background:#0c0920;box-shadow:0 18px 55px rgba(0,0,0,.5),-2px 4px 17px rgba(208,35,255,.26),2px 4px 19px rgba(0,160,255,.25);padding:18px 22px 0;}
.hero-art {background:url('img/hero-rpg-v7.jpg') center 46% / cover no-repeat;filter:saturate(1.13) contrast(1.05) brightness(.92);}
.hero-veil {background:linear-gradient(90deg,rgba(8,6,27,.74) 0%,rgba(15,5,39,.39) 41%,rgba(8,8,26,.06) 77%),linear-gradient(0deg,rgba(8,5,25,.87),transparent 46%);}
.hero-word {font-size:clamp(39px,4.4vw,64px);font-weight:800;font-style:italic;letter-spacing:-.06em;color:#fff;text-shadow:0 0 20px rgba(195,53,255,.38),0 3px 8px rgba(0,0,0,.7);}
.hero-tag {font-size:11px;letter-spacing:.46em;color:#df65ff;}
.hero-mark {margin-top:8px;}
.hero-count strong {font-size:45px;}
.stat-row {gap:11px;}
.stat {border:1px solid rgba(174,65,248,.48);background:linear-gradient(130deg,rgba(20,15,46,.96),rgba(10,13,32,.94));border-radius:14px;min-height:70px;box-shadow:inset 0 1px rgba(255,255,255,.05),0 5px 18px rgba(0,0,0,.23);}
.stat:nth-child(even) {border-bottom-color:rgba(0,173,255,.75);}
.stat svg {width:23px;height:23px;stroke:#d13cff;stroke-width:1.85;filter:drop-shadow(0 0 5px rgba(195,47,255,.38));}
.stat b {font-size:18px;font-weight:800;}
.stat small {font-size:10px;color:#b6b2cc;}
.card {background:linear-gradient(145deg,#15102c 0%,#0c0d22 100%);border:1px solid rgba(180,58,251,.76);border-radius:19px;box-shadow:0 12px 32px rgba(0,0,0,.31),0 0 15px rgba(175,44,255,.10);}
.col-main .card {border-bottom-color:#00b7ff;}
.col-side .card {border-bottom-color:#00b7ff;}
.card-head h2 {font-size:16px;}
.card-head h2 svg {width:19px;height:19px;stroke:#da42ff;stroke-width:2;}
.card-head a {color:#df67ff;font-weight:700;}
.news-thumb {border:1px solid rgba(183,66,255,.55);border-radius:12px;}
.news-item {border-bottom-color:rgba(154,76,214,.18);}
@media(max-width:1000px){.app{grid-template-columns:235px minmax(0,1fr)}.hero{min-height:310px}.hero-word{font-size:clamp(35px,5vw,55px)}}
@media(max-width:700px){.app{display:block}.sidebar{position:relative;height:auto;min-height:0}.sidebar::before{display:none}.hero{min-height:345px}.hero-art{background-position:62% center}.hero-word{font-size:clamp(32px,8vw,53px)}.stat-row{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ONENATION TEST: violet left -> electric blue right. Visual changes only. */
.hero, .card, .stat, .staff-row, .promo, .server-icon, .news-thumb {
  border: 1px solid transparent;
  background-image: linear-gradient(135deg, rgba(22,12,46,.97),rgba(8,15,35,.97)), linear-gradient(105deg,#cf35ff 0%,#a637f5 32%,#6248e9 59%,#009dff 100%);
  background-origin: padding-box,border-box;
  background-clip: padding-box,border-box;
  box-shadow: -4px 3px 20px rgba(187,36,255,.15),4px 3px 20px rgba(0,147,255,.13),0 12px 30px rgba(0,0,0,.28);
}
.hero {background-image:linear-gradient(135deg,#100a28,#09162e),linear-gradient(105deg,#d42bff,#8d3dff 44%,#009dff);}
/* Show full-width source art instead of enlarging/cropping it with cover. */
.hero-art {background-image:url('img/hero-rpg-v7.jpg');background-size:100% 100%;background-position:center center;filter:saturate(1.12) brightness(.96) contrast(1.04);}
.hero-veil {background:linear-gradient(90deg,rgba(10,5,28,.54) 0%,rgba(15,5,35,.25) 39%,rgba(5,9,29,.03) 78%),linear-gradient(0deg,rgba(7,5,24,.70),transparent 36%);}
.stat {background-image:linear-gradient(130deg,rgba(19,13,43,.94),rgba(9,15,36,.94)),linear-gradient(110deg,#c13aff,#7b4bf5 50%,#009dff);}
.staff-row {background-image:linear-gradient(120deg,rgba(35,19,68,.94),rgba(15,20,46,.94)),linear-gradient(110deg,#bb38ff,#008fff);}
.promo {background-image:linear-gradient(0deg,rgba(82,20,158,.55),rgba(10,8,32,.46)),url('img/hero-rpg-v7.jpg'),linear-gradient(110deg,#c13aff,#009dff);background-size:auto,cover,auto;background-origin:padding-box,padding-box,border-box;background-clip:padding-box,padding-box,border-box;}
.server-icon {background-image:linear-gradient(135deg,#41116b,#0c1c42),linear-gradient(110deg,#c13aff,#009dff);}
.news-thumb {background-image:linear-gradient(145deg,#2b124b,#101b37),linear-gradient(110deg,#c13aff,#009dff);}
@media(max-width:900px){.hero-art{background-size:cover;background-position:58% center;}}
@media(max-width:560px){.hero-art{background-size:auto 100%;background-position:60% center;}}

/* ONENATION V3 — uniform violet-to-blue borders; no feature or markup changes */
:root { --np-violet:#c72fff; --np-blue:#009dff; --np-edge:linear-gradient(105deg,#c72fff 0%,#9b42f4 40%,#5260f6 68%,#009dff 100%); }
/* Same two-tone edge on all existing dashboard surfaces. */
.hero, .card, .stat, .staff-row, .promo, .server-icon, .news-thumb,
.nav-item.is-active, .search, .ghost-btn, .icon-btn, .signin-btn {
  border:1px solid transparent;
  background-origin:padding-box,border-box;
  background-clip:padding-box,border-box;
}
.hero {
  background-image:linear-gradient(125deg,#0e0926,#0a102b),var(--np-edge);
  box-shadow:-4px 4px 19px rgba(199,47,255,.18),4px 4px 19px rgba(0,157,255,.16),0 16px 40px rgba(0,0,0,.34);
  min-height:410px;
}
/* Preserve entire source image at its natural aspect ratio; never stretch or crop. */
.hero-art {
  background-image:url('img/hero-rpg-v7.jpg');
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center center;
  background-color:#100827;
  filter:saturate(1.12) brightness(.94);
}
.hero-veil {background:linear-gradient(90deg,rgba(9,5,27,.68),rgba(11,5,33,.24) 40%,rgba(5,9,29,.02) 80%),linear-gradient(0deg,rgba(8,5,26,.72),transparent 38%);}
.card {background-image:linear-gradient(145deg,#15102b,#0b1025),var(--np-edge);box-shadow:-3px 4px 16px rgba(199,47,255,.13),3px 4px 16px rgba(0,157,255,.12),0 12px 28px rgba(0,0,0,.28);}
.stat {background-image:linear-gradient(130deg,rgba(18,13,41,.96),rgba(10,15,36,.96)),var(--np-edge);box-shadow:-2px 2px 10px rgba(199,47,255,.10),2px 2px 10px rgba(0,157,255,.10);}
.staff-row {background-image:linear-gradient(120deg,#24143c,#111831),var(--np-edge);}
.server-icon {background-image:linear-gradient(135deg,#3a125e,#0d1c40),var(--np-edge);}
.news-thumb {background-image:linear-gradient(145deg,#2b124b,#101b37),var(--np-edge);}
.nav-item.is-active {background-image:linear-gradient(90deg,#321047,#181332),var(--np-edge);box-shadow:inset 3px 0 #d244ff,0 0 16px rgba(169,47,255,.16);}
.search {background-image:linear-gradient(#0b0b20,#0b0b20),var(--np-edge);}
.ghost-btn,.icon-btn {background-image:linear-gradient(#10152b,#10152b),var(--np-edge);}
.signin-btn {background-image:linear-gradient(125deg,#ad3ce8,#793bd1),var(--np-edge);}
/* Retain artwork in the sidebar card, while applying the same gradient border. */
.promo {background-image:linear-gradient(0deg,rgba(90,23,155,.55),rgba(10,8,32,.43)),url('img/hero-rpg-v7.jpg'),var(--np-edge);background-size:auto,cover,auto;background-origin:padding-box,padding-box,border-box;background-clip:padding-box,padding-box,border-box;}
/* Gradient separator lines and top bar line. */
.topbar {border-bottom:1px solid transparent;border-image:var(--np-edge) 1;}
.news-item {border-bottom:1px solid transparent;border-image:linear-gradient(90deg,rgba(199,47,255,.42),rgba(0,157,255,.36)) 1;}
.sidebar {border-right:1px solid transparent;border-image:linear-gradient(180deg,#b92eff,#009dff) 1;}
@media(max-width:900px){.hero{min-height:385px}.hero-art{background-size:contain;background-position:center center;}}
@media(max-width:560px){.hero{min-height:430px}.hero-art{background-size:contain;background-position:center center;}}


/* OneNation V4: unified gradient and uncropped banner, presentation only */
:root { --on-edge:linear-gradient(105deg,#d83cff 0%,#a447f5 37%,#605bff 64%,#009fff 100%); }
/* Use a dedicated border layer; keep backgrounds of existing components intact. */
.hero,.card,.stat,.staff-row,.nav-item.is-active,.search,.ghost-btn,.icon-btn,.signin-btn,.promo,.server-icon,.news-thumb {
  border:1.5px solid transparent !important;
  background-clip:padding-box,border-box !important;
  background-origin:padding-box,border-box !important;
}
.hero {min-height:510px !important; padding:23px 24px 0 !important; background-image:linear-gradient(#0c0921,#0c0921),var(--on-edge) !important;box-shadow:-4px 3px 18px rgba(205,49,255,.2),4px 3px 18px rgba(0,159,255,.2),0 15px 36px rgba(0,0,0,.3) !important;}
/* Original artwork is wide and partially cuts the car at source. Contain prevents additional cropping. */
.hero-art {background-image:url('img/hero-rpg-v7.jpg') !important;background-size:contain !important;background-position:center top !important;background-repeat:no-repeat !important;background-color:#0c0921 !important;filter:saturate(1.12) brightness(.96) !important;}
.hero-veil {background:linear-gradient(90deg,rgba(9,5,27,.46) 0%,rgba(9,5,27,.12) 44%,transparent 80%),linear-gradient(0deg,#0c0921 0%,rgba(12,9,33,.6) 10%,transparent 38%) !important;}
.hero-word {font-size:clamp(40px,4.3vw,62px) !important;}
.hero-bottom {padding-bottom:18px !important;}
.stat {background-image:linear-gradient(125deg,rgba(19,13,41,.97),rgba(9,14,35,.97)),var(--on-edge) !important;}
.card {background-image:linear-gradient(145deg,#15102b,#0b1025),var(--on-edge) !important;}
.staff-row {background-image:linear-gradient(120deg,#24143c,#111831),var(--on-edge) !important;}
.nav-item.is-active {background-image:linear-gradient(90deg,#321047,#181332),var(--on-edge) !important;}
.search {background-image:linear-gradient(#0b0b20,#0b0b20),var(--on-edge) !important;}
.ghost-btn,.icon-btn {background-image:linear-gradient(#10152b,#10152b),var(--on-edge) !important;}
.signin-btn {background-image:linear-gradient(125deg,#ad3ce8,#793bd1),var(--on-edge) !important;}
.server-icon {background-image:linear-gradient(135deg,#3a125e,#0d1c40),var(--on-edge) !important;}
.news-thumb {background-image:linear-gradient(145deg,#2b124b,#101b37),var(--on-edge) !important;}
.promo {background-image:linear-gradient(0deg,rgba(90,23,155,.55),rgba(10,8,32,.43)),url('img/hero-rpg-v7.jpg'),var(--on-edge) !important;background-size:auto,cover,auto !important;background-clip:padding-box,padding-box,border-box !important;background-origin:padding-box,padding-box,border-box !important;}
.news-item {border-image:linear-gradient(90deg,rgba(216,60,255,.35),rgba(0,159,255,.35)) 1 !important;}
.topbar {border-image:var(--on-edge) 1 !important;}
@media(max-width:1100px){.hero{min-height:470px !important;}}
@media(max-width:700px){.hero{min-height:500px !important;padding:16px !important}.hero-art{background-size:contain !important;background-position:center top !important}.stat-row{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}

/* ONENATION V5: new artwork is separate from all functional controls */
.hero{min-height:405px!important;overflow:hidden!important;}
.hero-art{background-image:url('img/hero-rpg-v7.jpg')!important;background-size:cover!important;background-position:center center!important;filter:none!important;}
.hero-veil{background:linear-gradient(90deg,rgba(11,5,32,.36),rgba(11,5,32,.02) 70%),linear-gradient(0deg,rgba(8,5,25,.55),transparent 42%)!important;}
.hero-word{position:relative;z-index:2;text-shadow:0 3px 16px #080316!important;}
.hero-bottom{position:relative;z-index:3;}
@media(max-width:900px){.hero{min-height:390px!important}.hero-art{background-position:57% center!important}}
@media(max-width:600px){.hero{min-height:440px!important}.hero-art{background-position:61% center!important}}

/* V6: forced unique hero image URL to avoid stale relative-path/cache resolution */
.hero .hero-art {background-image:url('img/hero-rpg-v7.jpg?v=7') !important;background-size:cover !important;background-position:center center !important;}
@media (max-width:900px){.hero .hero-art{background-position:58% center !important;}}


/* ONENATION V7 — incadrare completa a ilustratiei, fara functii noi */
/* Imaginea se vede integral, fara intindere sau decupare. */
.hero {
  min-height: 510px !important;
  padding: 22px 24px 0 !important;
  isolation: isolate;
}
.hero .hero-art {
  background-image: url('img/hero-rpg-v7.jpg?v=7') !important;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: #100824 !important;
  filter: none !important;
}
/* Umple marginile libere fara a acoperi masina sau personajul. */
.hero .hero-veil {
  background: linear-gradient(90deg,rgba(9,5,30,.35),rgba(9,5,30,.10) 42%,rgba(5,9,30,.04) 80%),
              linear-gradient(0deg,rgba(7,5,23,.64),transparent 24%) !important;
  pointer-events:none;
}
.hero .hero-top,.hero .hero-mark,.hero .hero-bottom {z-index:2;}
.hero .hero-bottom {padding-bottom:16px !important;}
@media(max-width:1100px){
  .hero {min-height:460px !important;}
}
@media(max-width:700px){
  .hero {min-height:540px !important;padding:16px 14px 0 !important;}
  .hero .hero-art {background-size:contain !important;background-position:center 34% !important;}
  .hero .hero-veil {background:linear-gradient(0deg,rgba(7,5,23,.78),transparent 55%),linear-gradient(90deg,rgba(9,5,30,.45),transparent) !important;}
}

/* ONENATION V8 — imagine micsorata, fara decupare prin cover */
.hero { min-height: 490px !important; background-color: #0c0921 !important; }
.hero .hero-art {
  background-image: url('img/hero-rpg-v7.jpg?v=8') !important;
  background-size: 88% auto !important;
  background-position: right 42% !important;
  background-repeat: no-repeat !important;
  background-color: #0c0921 !important;
}
.hero .hero-veil {
  background: linear-gradient(90deg,#100824 0%,rgba(16,8,36,.94) 12%,rgba(16,8,36,.46) 36%,transparent 68%),linear-gradient(0deg,rgba(8,5,25,.52),transparent 23%) !important;
}
@media(max-width:1100px){.hero{min-height:460px!important}.hero .hero-art{background-size:94% auto!important;background-position:right center!important}}
@media(max-width:700px){.hero{min-height:520px!important}.hero .hero-art{background-size:100% auto!important;background-position:center 12%!important}}


/* ONENATION V10 — compact GTA artwork, matching approved dashboard layout.
   Only hero presentation changes. Existing HTML, buttons and statistics remain. */
.hero {
  min-height: 345px !important;
  padding: 20px 22px 0 !important;
  isolation: isolate !important;
  background-image: linear-gradient(108deg,#17092d 0%,#1b0a3b 40%,#091a48 100%),var(--on-edge) !important;
}
.hero .hero-art {
  inset: 0 0 86px 0 !important;
  background-image: url('img/hero-rpg-v7.jpg?v=10') !important;
  background-size: auto 94% !important;
  background-position: right 4% center !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  filter: none !important;
  opacity: 1 !important;
}
.hero .hero-veil {
  background: linear-gradient(90deg,rgba(18,7,40,.95) 0%,rgba(20,7,46,.86) 26%,rgba(20,7,46,.22) 51%,transparent 75%),linear-gradient(0deg,rgba(9,7,30,.9) 0%,transparent 31%) !important;
  pointer-events: none !important;
}
.hero .hero-top,.hero .hero-mark,.hero .hero-bottom {z-index: 2 !important;}
.hero .hero-mark {margin-top: 8px !important;}
.hero .hero-bottom {padding-bottom: 14px !important;}
@media(max-width:1250px) {
  .hero {min-height: 390px !important;}
  .hero .hero-art {inset:0 0 160px 0 !important;background-size:auto 92% !important;}
}
@media(max-width:900px) {
  .hero {min-height: 450px !important;}
  .hero .hero-art {inset:0 0 190px 0 !important;background-size:auto 90% !important;background-position:right center !important;}
}
@media(max-width:700px) {
  .hero {min-height: 520px !important;padding:16px 14px 0 !important;}
  .hero .hero-art {inset:0 0 230px 0 !important;background-size: auto 83% !important;background-position:right center !important;}
  .hero .hero-veil {background:linear-gradient(90deg,rgba(16,7,38,.75),transparent 85%),linear-gradient(0deg,rgba(9,7,30,.94),transparent 58%) !important;}
}

/* fix duplicat: arta din spatele brandului scotea un al doilea logo */
.sidebar::before { display: none !important; }

/* v22: butonul Open map cu un singur contur (fara strat dublu) */
.ghost-btn {
  border: 1.5px solid rgba(168, 85, 247, .50) !important;
  background: rgba(12, 9, 33, .75) !important;
  background-image: none !important;
  background-clip: padding-box !important;
  background-origin: padding-box !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35) !important;
}

.ghost-btn:hover { border-color: rgba(196, 110, 255, .9) !important; }

/* footer: doar paysafecard */
.footer-badges { display: flex; align-items: center; gap: 10px; }
.pay-badge img { display: block; height: 16px; width: auto; opacity: .92; }

/* notificari */
.notif-wrap { position: relative; }
.notif-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 330px;
  z-index: 70;
  padding: 12px 14px 6px;
  border: 1px solid rgba(168, 85, 247, .40);
  border-radius: 14px;
  background: linear-gradient(180deg, #1B0F30, #130A22);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .60), 0 0 40px rgba(168, 85, 247, .25);
  animation: notifIn .22s ease both;
}

.notif-panel[hidden] { display: none; }

.notif-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 10px; letter-spacing: .12em; color: #9C8FB4; }
.notif-head b { font-size: 11.5px; letter-spacing: .08em; color: #F4F7FB; }
.notif-list { list-style: none; margin: 0; padding: 0; }
.notif-list li { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(168, 85, 247, .14); font-size: 12px; }
.notif-list li:last-child { border-bottom: 0; }
.notif-list .n-dot { width: 7px; height: 7px; margin-top: 5px; flex: none; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px rgba(168, 85, 247, .9); }
.notif-list b { display: block; font-weight: 600; }
.notif-list small { display: block; margin-top: 2px; color: #9C8FB4; font-size: 10.5px; }
@keyframes notifIn { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* v23: buton curat (fara filtru/blur care genera al doilea contur) */
.ghost-btn {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  box-shadow: none !important;
  background: #140A26 !important;
  background-image: none !important;
  background-clip: padding-box !important;
  border: 1.5px solid rgba(168, 85, 247, .55) !important;
}

.ghost-btn:hover {
  background: #1C0F33 !important;
  border-color: rgba(200, 120, 255, .95) !important;
  transform: translateY(-1px);
}

/* panoul de notificari deasupra hero-ului, fara taiere */
.topbar { position: relative; z-index: 50 !important; }
.notif-panel { z-index: 999 !important; max-height: 72vh; overflow-y: auto; }

/* v26: sidebar nav extins + card server */
.nav-item.is-soon { opacity: .5; cursor: default; }
.nav-item.is-soon:hover { background: transparent; transform: none; }

.server-card {
  border: 1px solid rgba(168, 85, 247, .34);
  border-radius: 12px;
  padding: 11px 13px 12px;
  background: linear-gradient(160deg, rgba(32, 16, 54, .96), rgba(11, 6, 22, .92));
  box-shadow: 0 10px 26px rgba(0, 0, 0, .42);
}

.server-card-head { display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 700; color: #E9DDF9; }

.s-dot { width: 7px; height: 7px; border-radius: 50%; background: #F2445B; flex: none; }
.s-dot.is-on { background: #4ADE80; box-shadow: 0 0 8px rgba(74, 222, 128, .9); }

.s-status { display: block; margin: 5px 0 7px; font-size: 14px; font-weight: 800; letter-spacing: .02em; color: #FCA5A5; }
.s-status.is-on { color: #4ADE80; }

.s-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10.5px; color: #9C8FB4; }
.s-line + .s-line { margin-top: 3px; }
.s-line span { color: #EDE4FA; font-weight: 600; }

/* v27: sidebar mai compact, ca server card sa incapa intreg */
.sidebar { gap: 10px; padding: 16px 14px; }
.sidebar .nav-item { padding-top: 9px; padding-bottom: 9px; }
.sidebar-spacer { min-height: 6px; }
.sidebar .server-card { margin-bottom: 2px; }

/* v28: arta cu palmieri si oras in partea de jos a sidebar-ului */
.sidebar-art {
  height: 120px;
  margin-top: auto;
  margin-bottom: 4px;
  border-radius: 10px;
  background:
    linear-gradient(0deg, rgba(76, 20, 120, .55), rgba(9, 5, 18, .12) 60%),
    url('img/hero-rpg-v7.jpg') 46% 84% / cover no-repeat;
  opacity: .9;
  box-shadow: inset 0 -30px 40px rgba(8, 4, 15, .55);
  pointer-events: none;
}

/* v29: fara scrollbar in sidebar, totul incape pe ecran */
.sidebar {
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: 8px;
  padding: 14px 13px;
}

.sidebar::-webkit-scrollbar { width: 0; height: 0; display: none; }

.sidebar .nav-item { padding-top: 8px; padding-bottom: 8px; }
.sidebar .nav-label { margin-top: 2px; }
.sidebar .brand { margin-bottom: 2px; }
.sidebar .brand-logo { width: 34px; height: 34px; }
.sidebar .brand-text b { font-size: 15px; }

.sidebar-art { height: clamp(64px, 12vh, 118px); }

.sidebar .server-card { padding: 10px 12px 11px; }
.sidebar .s-status { margin: 3px 0 6px; font-size: 13px; }

@media (max-height: 720px) {
  .sidebar-art { display: none; }
  .sidebar { gap: 6px; }
}

/* v30: un singur scrollbar — subtire si inchis la culoare, fara bara alba pe dreapta */
html, body { height: 100%; overflow: hidden; }

.app { height: 100vh; min-height: 0; }

.main {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(150, 122, 184, .45) transparent;
}

.sidebar {
  height: 100vh;
  overflow-y: auto;
  scrollbar-width: thin;
  -ms-overflow-style: auto;
  scrollbar-color: rgba(150, 122, 184, .45) transparent;
}

.sidebar::-webkit-scrollbar { display: block; width: 7px; height: 7px; }
.main::-webkit-scrollbar { width: 7px; height: 7px; }
.sidebar::-webkit-scrollbar-track,
.main::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb,
.main::-webkit-scrollbar-thumb { background: rgba(150, 122, 184, .45); border-radius: 99px; }
.sidebar::-webkit-scrollbar-thumb:hover,
.main::-webkit-scrollbar-thumb:hover { background: rgba(190, 160, 225, .7); }

@media (max-width: 760px) {
  html, body { height: auto; overflow: auto; }
  .app { height: auto; }
  .main { overflow: visible; }
  .sidebar { height: auto; overflow: visible; }
}

/* v31: pagini Factions / Houses / Businesses / Admin / Logs */
.page-content { display: flex; flex-direction: column; gap: 14px; }

.page-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 11px; }

.mini {
  border: 1px solid rgba(168, 85, 247, .28);
  border-radius: 12px;
  padding: 12px 14px;
  background: linear-gradient(160deg, rgba(27, 15, 48, .92), rgba(10, 5, 20, .85));
  animation: fadeUp .4s ease both;
}
.mini small { display: block; font-size: 9.5px; letter-spacing: .11em; text-transform: uppercase; color: #9C8FB4; }
.mini b { display: block; margin-top: 5px; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.tone-gold-text { color: #FDE9AE !important; }
.tone-green-text { color: #CFFBE1 !important; }
.muted { color: #9C8FB4 !important; }

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(168, 85, 247, .24);
  border-radius: 12px;
  background: rgba(19, 10, 34, .75);
}
.filters input[type="search"], .filters select {
  height: 34px;
  padding: 0 11px;
  border-radius: 9px;
  border: 1px solid rgba(168, 85, 247, .3);
  background: rgba(8, 4, 15, .65);
  color: #F4F7FB;
  font: inherit;
  font-size: 12px;
  outline: none;
}
.filters input[type="search"] { flex: 1 1 220px; min-width: 160px; }
.filters input[type="search"]:focus, .filters select:focus { border-color: rgba(168, 85, 247, .7); }
.filters button { cursor: pointer; }
.filters-count { margin-left: auto; font-size: 11px; color: #9C8FB4; }

.tbl-wrap {
  border: 1px solid rgba(168, 85, 247, .28);
  border-radius: 13px;
  overflow: hidden auto;
  background: linear-gradient(180deg, rgba(24, 12, 42, .93), rgba(10, 5, 20, .88));
  animation: fadeUp .45s ease both;
}

.tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.tbl th {
  text-align: left;
  padding: 10px 14px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #9C8FB4;
  background: rgba(168, 85, 247, .08);
  border-bottom: 1px solid rgba(168, 85, 247, .18);
  position: sticky;
  top: 0;
  backdrop-filter: blur(6px);
}
.tbl td { padding: 10px 14px; border-bottom: 1px solid rgba(168, 85, 247, .09); color: #D9CEE9; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: rgba(168, 85, 247, .07); }
.tbl td b { color: #fff; font-weight: 700; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl-text { max-width: 520px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl-empty { text-align: center; padding: 26px 14px !important; color: #9C8FB4; }
.tbl td .tag-chip { white-space: nowrap; }

.tbl-user { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; }
.tbl-user:hover b { color: #D8B4FE; }
.tbl-avatar { width: 24px; height: 24px; border-radius: 6px; overflow: hidden; border: 1px solid rgba(168, 85, 247, .35); flex: none; }
.tbl-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; }

.faction-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }

.fcard {
  border: 1px solid rgba(168, 85, 247, .3);
  border-radius: 14px;
  padding: 14px 15px;
  background: linear-gradient(165deg, rgba(29, 15, 52, .95), rgba(10, 5, 20, .9));
  animation: fadeUp .45s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(var(--i) * 40ms);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.fcard:hover { transform: translateY(-3px); border-color: rgba(168, 85, 247, .6); box-shadow: 0 16px 34px rgba(0, 0, 0, .45); }
.fcard header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.fcard-title b { display: block; font-size: 13.5px; font-weight: 800; color: #fff; }
.fcard-title small { display: block; margin-top: 3px; font-size: 10px; color: #9C8FB4; }
.fcard-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; padding: 10px 0; border-top: 1px solid rgba(168, 85, 247, .14); border-bottom: 1px solid rgba(168, 85, 247, .14); }
.fcard-stats small { display: block; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: #9C8FB4; }
.fcard-stats b { display: block; margin-top: 3px; font-size: 12.5px; color: #fff; }
.fcard-leader { display: flex; align-items: center; gap: 9px; margin-top: 11px; }
.fcard-avatar { width: 30px; height: 30px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(168, 85, 247, .4); flex: none; }
.fcard-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; }
.fcard-avatar.is-empty { background: rgba(168, 85, 247, .12); }
.fcard-leader small { display: block; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: #9C8FB4; }
.fcard-leader a, .fcard-leader span.muted { font-size: 12px; color: #F0E4FF; text-decoration: none; font-weight: 600; }
.fcard-leader a:hover { color: #D8B4FE; }
.fcard-note { margin: 10px 0 0; font-size: 11px; line-height: 1.45; color: #C4B5D9; }
.fcard-ranks { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.rank-pill { padding: 3px 8px; border-radius: 6px; font-size: 9px; letter-spacing: .04em; color: #E9DDF9; background: rgba(168, 85, 247, .14); border: 1px solid rgba(168, 85, 247, .28); }

.pager { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pager-num { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px; border-radius: 8px; border: 1px solid rgba(168, 85, 247, .28); background: rgba(19, 10, 34, .8); color: #D9CEE9; font-size: 12px; text-decoration: none; }
.pager-num:hover { border-color: rgba(168, 85, 247, .6); }
.pager-num.is-active { background: linear-gradient(135deg, #A855F7, #7C3AED); border-color: transparent; color: #fff; font-weight: 700; }

.empty-box {
  border: 1px dashed rgba(168, 85, 247, .35);
  border-radius: 14px;
  padding: 28px 22px;
  text-align: center;
  background: rgba(19, 10, 34, .7);
  color: #D9CEE9;
}
.empty-box b { display: block; font-size: 15px; color: #fff; margin-bottom: 6px; }
.empty-box p { margin: 0 0 14px; font-size: 12.5px; color: #9C8FB4; }

.panel-block { border: 1px solid rgba(168, 85, 247, .28); border-radius: 13px; background: linear-gradient(180deg, rgba(24, 12, 42, .93), rgba(10, 5, 20, .88)); overflow: hidden; }
.panel-block > header { display: flex; align-items: center; gap: 8px; padding: 12px 15px; border-bottom: 1px solid rgba(168, 85, 247, .18); background: rgba(168, 85, 247, .07); font-size: 12.5px; font-weight: 700; }
.panel-block > header svg { width: 15px; height: 15px; fill: none; stroke: #C084FC; stroke-width: 1.8; }
.action-list { list-style: none; margin: 0; padding: 4px 0; }
.action-list li { display: flex; align-items: center; gap: 10px; padding: 10px 15px; border-bottom: 1px solid rgba(168, 85, 247, .09); font-size: 12px; }
.action-list li:last-child { border-bottom: 0; }
.action-list p { margin: 0; flex: 1; min-width: 0; color: #D9CEE9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.action-list time { color: #9C8FB4; font-size: 10.5px; white-space: nowrap; }
.a-dot { width: 6px; height: 6px; border-radius: 50%; background: #A855F7; flex: none; box-shadow: 0 0 8px rgba(168, 85, 247, .8); }

@media (max-width: 720px) {
  .filters-count { margin-left: 0; }
  .fcard-stats { grid-template-columns: repeat(2, 1fr); }
}

/* v32: faction cards noi + aplicatii in Admin Panel */
.fcard { overflow: hidden; padding: 0; }
.fcard-top { display: flex; align-items: center; gap: 11px; padding: 14px 15px 12px; background: linear-gradient(120deg, rgba(120, 42, 190, .38), rgba(24, 12, 42, .15) 65%); border-bottom: 1px solid rgba(168, 85, 247, .16); }
.fcard-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none; border-radius: 11px;
  font-size: 16px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #C084FC, #7C3AED);
  box-shadow: 0 8px 20px rgba(124, 58, 237, .45), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.fcard-title { min-width: 0; flex: 1; }
.fcard-title b { display: block; font-size: 13.5px; font-weight: 800; color: #fff; line-height: 1.25; }
.fcard-title small { display: block; margin-top: 3px; font-size: 10px; color: #B9A8D0; }
.fcard-top .tag-chip { flex: none; }

.fcard-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 12px 15px; }
.fstat { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(168, 85, 247, .16); background: rgba(10, 5, 20, .45); }
.fstat svg { width: 15px; height: 15px; flex: none; fill: none; stroke: #C084FC; stroke-width: 1.7; stroke-linecap: round; }
.fstat small { display: block; font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; color: #9C8FB4; }
.fstat b { display: block; margin-top: 1px; font-size: 12.5px; color: #fff; }

.fcard-leader { display: flex; align-items: center; gap: 9px; padding: 0 15px 12px; }
.fcard-leader-text small { display: block; font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; color: #9C8FB4; }
.fcard-leader-text a, .fcard-leader-text span.muted { font-size: 12px; font-weight: 600; color: #F0E4FF; text-decoration: none; }
.fcard-leader-text a:hover { color: #D8B4FE; }
.fcard-pay { margin-left: auto; text-align: right; }
.fcard-pay small { display: block; font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; color: #9C8FB4; }
.fcard-pay b { font-size: 12px; color: #FDE9AE; }

.fcard-note { margin: 0 15px 12px; padding: 9px 11px; border-left: 2px solid rgba(168, 85, 247, .55); border-radius: 0 8px 8px 0; background: rgba(168, 85, 247, .08); font-size: 11px; line-height: 1.5; color: #D5C6E8; }

.fcard-crew { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 15px 12px; }
.crew-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 3px; border-radius: 99px; border: 1px solid rgba(168, 85, 247, .22); background: rgba(19, 10, 34, .7); color: #E4D9F3; font-size: 10.5px; text-decoration: none; transition: border-color .18s ease, transform .18s ease; }
.crew-pill:hover { border-color: rgba(168, 85, 247, .6); transform: translateY(-1px); }
.crew-pill img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; object-position: 50% 10%; }

.fcard-ranks { border-top: 1px solid rgba(168, 85, 247, .14); }
.fcard-ranks summary { display: flex; align-items: center; gap: 6px; padding: 9px 15px; cursor: pointer; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: #B9A8D0; list-style: none; }
.fcard-ranks summary::-webkit-details-marker { display: none; }
.fcard-ranks summary span { padding: 1px 7px; border-radius: 99px; background: rgba(168, 85, 247, .18); font-size: 9px; color: #E9DDF9; }
.fcard-ranks[open] summary { color: #EADCFB; }
.rank-list { padding: 0 15px 12px; display: flex; flex-direction: column; gap: 5px; }
.rank-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 10.5px; }
.rank-name { color: #E4D9F3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-limit { color: #9C8FB4; font-size: 9.5px; white-space: nowrap; }

/* aplicatii */
.flash { padding: 10px 14px; border-radius: 10px; font-size: 12px; font-weight: 600; }
.flash.ok { border: 1px solid rgba(74, 222, 128, .45); background: rgba(74, 222, 128, .12); color: #A7F3D0; }
.flash.bad { border: 1px solid rgba(248, 113, 113, .45); background: rgba(248, 113, 113, .12); color: #FECACA; }

.head-pill { margin-left: auto; padding: 2px 8px; border-radius: 99px; background: rgba(168, 85, 247, .18); border: 1px solid rgba(168, 85, 247, .3); font-size: 9px; font-weight: 700; letter-spacing: .06em; color: #E9DDF9; }

.tbl-wrap.is-flat { border: 0; border-radius: 0; background: transparent; animation: none; }

.row-actions { display: inline-flex; gap: 6px; justify-content: flex-end; }
.row-actions button { padding: 5px 10px; border-radius: 7px; font-size: 10px; font-weight: 800; letter-spacing: .04em; cursor: pointer; border: 1px solid transparent; transition: filter .18s ease, transform .18s ease; }
.row-actions button:hover { filter: brightness(1.12); transform: translateY(-1px); }
.btn-ok { background: linear-gradient(135deg, #34D399, #059669); color: #052e1b; }
.btn-bad { background: rgba(248, 113, 113, .16); border-color: rgba(248, 113, 113, .45); color: #FECACA; }