/* Панель модерации Unturned — тёмная тема, плотные таблицы, читаемость в первую очередь */

:root {
  --bg:#0e1116; --bg2:#151a22; --bg3:#1c232e; --line:#252d3a;
  --fg:#e6eaf0; --fg2:#9aa6b8; --fg3:#6b7789;
  --acc:#4f8cff; --acc2:#7aa7ff;
  --ok:#3fb950; --warn:#d29922; --err:#f85149; --crit:#ff5c8a;
  --r:8px;
}
:root[data-theme="light"] {
  --bg:#f6f7f9; --bg2:#fff; --bg3:#eef1f5; --line:#d9dee6;
  --fg:#111820; --fg2:#5b6674; --fg3:#8794a5;
}

* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  background:var(--bg); color:var(--fg);
  font:14px/1.5 ui-sans-serif,system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a { color:var(--acc); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ── шапка ─────────────────────────────────────────────────────────────── */
.topbar {
  display:flex; align-items:center; gap:20px;
  padding:0 20px; height:52px;
  background:var(--bg2); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:50;
}
.brand { font-weight:700; letter-spacing:.5px; color:var(--fg); }
.brand span { color:var(--acc); }
.topbar nav { display:flex; gap:4px; flex:1; overflow-x:auto; }
.topbar nav a {
  padding:6px 12px; border-radius:var(--r); color:var(--fg2);
  white-space:nowrap;
}
.topbar nav a:hover { background:var(--bg3); color:var(--fg); text-decoration:none; }
.topbar nav a.active { background:var(--acc); color:#fff; }
.me { display:flex; align-items:center; gap:10px; color:var(--fg2); font-size:13px; }

.role { font-size:11px; padding:2px 7px; border-radius:20px; text-transform:uppercase; letter-spacing:.4px; }
.role-owner { background:#5b2d8e; color:#fff; }
.role-admin { background:#1f4f9c; color:#fff; }
.role-moderator { background:#2c5f3f; color:#fff; }
.role-viewer { background:var(--bg3); color:var(--fg2); }

main { max-width:1500px; margin:0 auto; padding:20px; }
main.centered { max-width:440px; margin-top:8vh; }
.foot { text-align:center; color:var(--fg3); font-size:12px; padding:30px 20px; }

/* ── блоки ─────────────────────────────────────────────────────────────── */
.card {
  background:var(--bg2); border:1px solid var(--line);
  border-radius:var(--r); padding:16px; margin-bottom:16px;
}
.card > h2, .card > h3 { margin:0 0 12px; font-size:15px; font-weight:600; }
.card h2 .sub { color:var(--fg3); font-weight:400; font-size:13px; margin-left:8px; }

.grid { display:grid; gap:16px; }
.grid.c2 { grid-template-columns:repeat(auto-fit,minmax(380px,1fr)); }
.grid.c3 { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.grid.c4 { grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); }

.stat { background:var(--bg2); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; }
.stat .n { font-size:26px; font-weight:700; line-height:1.1; }
.stat .l { color:var(--fg2); font-size:12px; margin-top:4px; }

/* ── таблицы ───────────────────────────────────────────────────────────── */
table { width:100%; border-collapse:collapse; font-size:13px; }
th, td { padding:8px 10px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; }
/* Шапка таблицы намеренно НЕ sticky.
   Таблицы лежат внутри .scroll-x с overflow-x:auto, а любой overflow создаёт
   собственный контейнер прокрутки: position:sticky начинает липнуть к нему,
   а не к окну. Отступ top:52px, задуманный под высоту шапки сайта, уезжал
   внутрь карточки, и первая строка вылезала поверх заголовков. */
th { color:var(--fg2); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.4px;
     background:var(--bg2); border-bottom:1px solid var(--line); }
tbody tr:hover { background:var(--bg3); }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
.mono { font-family:ui-monospace,"SF Mono",Consolas,monospace; font-size:12px; }
.nowrap { white-space:nowrap; }
.muted { color:var(--fg3); }
.small { font-size:12px; }
.scroll-x { overflow-x:auto; }
.scroll-y { max-height:480px; overflow-y:auto; }

/* ── риск ──────────────────────────────────────────────────────────────── */
.risk {
  display:inline-block; padding:2px 8px; border-radius:20px;
  font-size:11px; font-weight:600; white-space:nowrap;
}
.risk-clean      { background:#1b2b1f; color:var(--ok); }
.risk-low        { background:#1e2733; color:var(--fg2); }
.risk-suspicious { background:#332a17; color:var(--warn); }
.risk-high       { background:#3a1d1d; color:var(--err); }
.risk-critical   { background:#4a1730; color:var(--crit); }

.status { font-size:11px; padding:2px 8px; border-radius:20px; background:var(--bg3); color:var(--fg2); }
.status-watching { background:#332a17; color:var(--warn); }
.status-banned   { background:#3a1d1d; color:var(--err); }
.status-cleared  { background:#1b2b1f; color:var(--ok); }

/* полоса риска */
.bar { height:5px; background:var(--bg3); border-radius:3px; overflow:hidden; min-width:70px; }
.bar > i { display:block; height:100%; background:var(--acc); }
.bar.w > i { background:var(--warn); }
.bar.e > i { background:var(--err); }
.bar.c > i { background:var(--crit); }

/* ── флаги эвристик ────────────────────────────────────────────────────── */
.flag { border-left:3px solid var(--line); padding:8px 12px; margin-bottom:8px; background:var(--bg3); border-radius:0 var(--r) var(--r) 0; }
.flag .t { font-weight:600; display:flex; justify-content:space-between; gap:10px; }
.flag .d { color:var(--fg2); font-size:12.5px; margin-top:3px; }
.flag .sev { color:var(--fg3); font-size:12px; font-variant-numeric:tabular-nums; }
.flag.s-hi  { border-left-color:var(--err); }
.flag.s-mid { border-left-color:var(--warn); }
.flag.s-lo  { border-left-color:var(--fg3); }

/* ── формы ─────────────────────────────────────────────────────────────── */
input, select, textarea, button {
  font:inherit; color:var(--fg);
  background:var(--bg3); border:1px solid var(--line);
  border-radius:6px; padding:7px 10px;
}
input:focus, select:focus, textarea:focus { outline:2px solid var(--acc); outline-offset:-1px; }
textarea { width:100%; min-height:80px; resize:vertical; }
label { display:block; margin-bottom:10px; color:var(--fg2); font-size:13px; }
label input, label select, label textarea { width:100%; margin-top:4px; color:var(--fg); }

button, .btn {
  cursor:pointer; background:var(--acc); color:#fff; border:none;
  padding:8px 14px; border-radius:6px; font-weight:500; display:inline-block;
}
button:hover, .btn:hover { background:var(--acc2); text-decoration:none; }
button.ghost, .btn.ghost { background:var(--bg3); color:var(--fg); border:1px solid var(--line); }
button.ghost:hover { background:var(--line); }
button.danger { background:var(--err); }
button.link { background:none; border:none; color:var(--fg2); padding:0; text-decoration:underline; cursor:pointer; }
button.sm, .btn.sm { padding:4px 9px; font-size:12px; }
form.inline { display:inline; }

.filters { display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end; margin-bottom:14px; }
.filters label { margin:0; }
.filters input, .filters select { min-width:140px; }
.filters input[type=search] { min-width:260px; }

.flash { padding:10px 14px; border-radius:var(--r); margin-bottom:16px; border:1px solid; }
.flash.ok  { background:#12251a; border-color:#1e4429; color:#7fe08c; }
.flash.err { background:#2a1517; border-color:#5c2326; color:#ff9b93; }

.note { background:var(--bg3); border-left:3px solid var(--acc); padding:10px 14px;
        border-radius:0 var(--r) var(--r) 0; color:var(--fg2); font-size:13px; margin-bottom:14px; }
.note.warn { border-left-color:var(--warn); }

/* ── профиль игрока ────────────────────────────────────────────────────── */
.phead { display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap; }
.phead img { width:80px; height:80px; border-radius:var(--r); background:var(--bg3); }
.phead .info { flex:1; min-width:240px; }
.phead h1 { margin:0 0 6px; font-size:22px; }
.phead .ids { display:flex; flex-wrap:wrap; gap:6px 14px; color:var(--fg2); font-size:12.5px; }
.kv { display:grid; grid-template-columns:auto 1fr; gap:4px 14px; font-size:13px; }
.kv dt { color:var(--fg2); }
.kv dd { margin:0; }

.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip { background:var(--bg3); border:1px solid var(--line); border-radius:20px;
        padding:3px 10px; font-size:12px; color:var(--fg2); }
.chip.on { background:var(--acc); color:#fff; border-color:var(--acc); }

.chatline { padding:2px 0; }
.chatline .who { color:var(--acc2); font-weight:500; }

/* ── прочее ────────────────────────────────────────────────────────────── */
.pager { display:flex; gap:6px; align-items:center; margin-top:14px; flex-wrap:wrap; }
.pager a, .pager span { padding:5px 10px; border-radius:6px; background:var(--bg3); font-size:13px; }
.pager span.cur { background:var(--acc); color:#fff; }

.spark { display:flex; align-items:flex-end; gap:2px; height:48px; }
.spark i { flex:1; background:var(--acc); border-radius:2px 2px 0 0; min-height:2px; opacity:.8; }
.spark i:hover { opacity:1; }

.copy { cursor:pointer; border-bottom:1px dashed var(--fg3); }

@media (max-width:760px) {
  .topbar { height:auto; flex-wrap:wrap; padding:8px 12px; gap:8px; }
  main { padding:12px; }
}