:root {
  --bg: #080d16;
  --bg2: #0d1422;
  --panel: rgba(18, 25, 40, .88);
  --panel2: rgba(24, 33, 53, .92);
  --panel3: rgba(12, 18, 31, .78);
  --border: rgba(148, 163, 184, .18);
  --border2: rgba(148, 163, 184, .28);
  --text: #eef4ff;
  --muted: #98a6bd;
  --muted2: #6d7890;
  --green: #28d472;
  --red: #ff4054;
  --orange: #ffb02e;
  --blue: #4f7cff;
  --purple: #795cff;
  --cyan: #20d4ff;
  --shadow: 0 22px 70px rgba(0,0,0,.45);
  --radius: 16px;
  --sidebar: 274px;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
html { color-scheme: dark; }
body {
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 20% -10%, rgba(79, 124, 255, .25), transparent 28%),
    radial-gradient(circle at 82% 5%, rgba(121, 92, 255, .20), transparent 30%),
    radial-gradient(circle at 65% 85%, rgba(255, 64, 84, .13), transparent 34%),
    linear-gradient(145deg, #070b12 0%, #0a101b 45%, #05080e 100%);
}

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  position: relative;
  overflow: hidden;
}
.login-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
  animation: loginGrid 18s linear infinite;
  pointer-events: none;
}
.login-panel {
  width: min(430px, 100%);
  position: relative;
  overflow: hidden;
  padding: 34px;
  border: 1px solid rgba(148,163,184,.24);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(18,25,40,.92), rgba(8,13,22,.88));
  box-shadow: 0 28px 90px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.05);
  animation: loginCardIn .45s ease both;
}
.login-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.085), transparent);
  transform: translateX(-120%);
  animation: loginSheen 5.8s ease-in-out infinite;
  pointer-events: none;
}
.login-panel .eyebrow {
  margin: 0 0 10px;
  color: var(--cyan);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.login-panel h1 {
  margin: 0 0 12px;
  font-size: 34px;
  line-height: 1.05;
}
.login-panel .muted {
  margin: 0 0 24px;
  line-height: 1.55;
}
.btn.wide {
  width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 48px;
  font-weight: 850;
}
@keyframes loginGrid {
  from { background-position: 0 0, 0 0; }
  to { background-position: 46px 46px, 46px 46px; }
}
@keyframes loginCardIn {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@keyframes loginSheen {
  0%, 72% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .42; filter: grayscale(.35); }

.app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  border-right: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(13,20,34,.96), rgba(8,13,22,.92));
  padding: 22px 14px 18px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}
.sidebar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent, rgba(255,255,255,.035), transparent);
  transform: translateX(-100%);
  animation: sheen 9s linear infinite;
  pointer-events: none;
}
@keyframes sheen {
  0%, 78% { transform: translateX(-110%); }
  100% { transform: translateX(110%); }
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 8px 26px;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.logo {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: url("https://i.ibb.co/twgFTPjz/rearmed-short-logo-1.png") center / contain no-repeat;
  box-shadow: none;
}
.live-pill {
  margin-left: auto;
  font-size: 11px;
  color: #84f5b2;
  background: rgba(40,212,114,.12);
  border: 1px solid rgba(40,212,114,.3);
  padding: 4px 7px;
  border-radius: 7px;
}

.nav { display: grid; gap: 6px; padding-bottom: 18px; }
.nav button {
  width: 100%;
  color: #cbd5e1;
  background: transparent;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 12px;
  transition: .15s ease;
  text-align: left;
}
.nav button:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); }
.nav button.active {
  background: linear-gradient(135deg, rgba(79,124,255,.30), rgba(121,92,255,.35));
  border-color: rgba(121,92,255,.45);
  color: #fff;
  box-shadow: 0 10px 25px rgba(79,124,255,.13);
}
.nav .badge {
  margin-left: auto;
  background: var(--purple);
  color: #fff;
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 12px;
}

.system-card {
  position: relative;
  margin-top: auto;
  flex-shrink: 0;
  background: rgba(18,25,40,.72);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 15px;
  box-shadow: var(--shadow);
}
.system-card h4 { margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.system-desc { color: var(--muted); font-size: 13px; }
.pulse {
  width: 10px; height: 10px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 0 rgba(40,212,114,.6);
  animation: pulse 1.9s infinite;
}
@keyframes pulse {
  70% { box-shadow: 0 0 0 12px rgba(40,212,114,0); }
  100% { box-shadow: 0 0 0 0 rgba(40,212,114,0); }
}
.system-row { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; color:var(--muted); font-size:13px; margin-top:12px; }
.system-row b { color:#dbeafe; font-weight:650; text-align:right; min-width:0; overflow-wrap:anywhere; white-space:normal; }

.main {
  min-width: 0;
  padding: 24px 28px 36px;
}
.topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}
.page-title { flex: 1; }
.page-title h1 { margin: 0; font-size: 27px; letter-spacing: -.02em; }
.page-title p { margin: 4px 0 0; color: var(--muted); }
.top-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.status-chip, .btn {
  border: 1px solid var(--border);
  background: rgba(18,25,40,.72);
  color: #dce7fa;
  padding: 11px 14px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.13);
}
.status-chip { display:flex; gap:8px; align-items:center; color:#d8e2f3; }
.btn.primary { background: linear-gradient(135deg, #5b6dff, #795cff); border-color: rgba(121,92,255,.55); color:#fff; }
.btn.danger { background: linear-gradient(135deg, #bf2738, #ff4054); border-color: rgba(255,64,84,.45); color:#fff; }
.btn.good { background: linear-gradient(135deg, #18824a, #28d472); border-color: rgba(40,212,114,.45); color:#fff; }
.btn.ghost { background: rgba(255,255,255,.055); }
.avatar {
  width: 42px; height:42px; border-radius: 50%; display:grid; place-items:center;
  background: linear-gradient(135deg, #283552, #6545d8); font-weight:800;
}
.user { display:flex; align-items:center; gap:10px; }
.user small { display:block; color:var(--muted); font-size:12px; }

.grid { display:grid; gap:18px; }
.stats { grid-template-columns: repeat(4, minmax(180px, 1fr)); margin-bottom: 18px; }
.stat {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(24,33,53,.88), rgba(12,18,31,.88));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  min-height: 116px;
}
.stat::after { content:""; position:absolute; right:-20px; top:-20px; width:120px; height:120px; border-radius:50%; background:rgba(255,255,255,.04); }
.stat .icon { width:52px; height:52px; border-radius:50%; display:grid; place-items:center; font-size:24px; float:left; margin-right:15px; }
.stat.red .icon { background: rgba(255,64,84,.15); color:var(--red); }
.stat.orange .icon { background: rgba(255,176,46,.15); color:var(--orange); }
.stat.blue .icon { background: rgba(79,124,255,.15); color:var(--blue); }
.stat.purple .icon { background: rgba(121,92,255,.15); color:var(--purple); }
.stat .num { font-size:29px; font-weight:860; line-height:1; }
.stat .label { color: #d7e2f7; margin-top:8px; }
.stat .sub { color: var(--muted); font-size:13px; margin-top:2px; }

.content-grid { display:grid; grid-template-columns: minmax(640px, 1fr) 380px; gap:18px; }
.panel-card, .card {
  background: linear-gradient(180deg, rgba(18,25,40,.86), rgba(11,17,29,.88));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card { padding:18px; box-shadow:none; }
.panel-header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap: wrap;
}
.online-panel-header {
  flex-wrap: nowrap;
}
.online-panel-header h2 {
  flex: 0 0 auto;
}
.panel-header h2 { font-size: 18px; margin:0; }
.panel-body { padding: 18px; }
.filters { display:flex; gap:10px; flex-wrap: wrap; align-items: center; }
.online-filters {
  margin-left: auto;
  min-width: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  max-width: 100%;
  scrollbar-gutter: stable;
}
.online-filters .btn,
.online-filters select {
  flex: 0 0 auto;
}
.online-filters .search-input {
  flex: 0 1 280px;
  min-width: 210px;
}
.online-server-select { min-width: 145px; }
select, input, textarea, .input {
  background: rgba(7,12,22,.8);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 11px 12px;
  outline: none;
}
select,
select.input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  background-color: rgba(7,12,22,.8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23dce7fa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 14px 14px;
}
.input:focus, select:focus, input:focus, textarea:focus { border-color: rgba(32,212,255,.58); box-shadow: 0 0 0 4px rgba(32,212,255,.12); }
textarea { min-height: 96px; resize: vertical; width:100%; }
.search-input { width: min(280px, 100%); }

.alert-card {
  position: relative;
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: 18px;
  padding: 18px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(25,34,54,.78), rgba(13,20,34,.82));
  border: 1px solid var(--border);
  margin-bottom: 16px;
  overflow: hidden;
}
.alert-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background: var(--red); }
.alert-card.cleared::before { background: var(--green); }
.alert-card.banned::before { background: var(--orange); }
.alert-title { display:flex; align-items:center; gap:10px; margin-bottom: 14px; font-size:17px; font-weight:820; }
.pill, .chip {
  font-size: 11px;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 4px 7px;
  border-radius: 7px;
  font-weight: 800;
  border:1px solid transparent;
  display:inline-flex;
}
.pill.red, .chip.warn { background: rgba(255,64,84,.18); color:#fff; border-color:rgba(255,64,84,.35); }
.pill.green, .chip.good { background: rgba(40,212,114,.18); color:#a7ffcb; border-color:rgba(40,212,114,.35); }
.pill.orange, .chip.bad { background: rgba(255,176,46,.18); color:#ffd58a; border-color:rgba(255,176,46,.35); }
.meta { color: #cfdbed; font-size: 13px; line-height:1.85; }
.meta span { color: var(--muted); }
.alert-id, .alert-code { color: var(--muted2); font-size:12px; margin-top:14px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.alert-explain { margin-top:12px; padding:10px; border:1px solid rgba(255,255,255,.07); border-radius:10px; background:rgba(255,255,255,.035); color:#dbeafe; font-size:13px; }

.members-head { display:flex; align-items:center; gap:8px; justify-content:space-between; margin-bottom: 10px; }
.members-head b { font-size:14px; }
.page-chip { color:#d8e2f4; font-size:12px; background:rgba(255,255,255,.08); padding:4px 8px; border-radius:7px; border:1px solid rgba(255,255,255,.08); }
.member-list { display:grid; gap:8px; }
.member-row {
  display:grid;
  grid-template-columns: 38px 1fr auto;
  align-items:center;
  gap:10px;
  padding: 9px 9px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.06);
}
.num-badge { height: 30px; border-radius: 8px; display:grid; place-items:center; background:rgba(148,163,184,.13); border:1px solid rgba(148,163,184,.18); font-weight:850; color:#dbeafe; }
.member-name { font-weight:770; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.member-status { font-size:12px; color:var(--muted); margin-top:2px; display:flex; align-items:center; gap:6px; }
.status-dot { width:9px; height:9px; border-radius:50%; background:var(--green); display:inline-block; box-shadow: 0 0 10px rgba(40,212,114,.4); }
.status-dot.orange { background:var(--orange); box-shadow: 0 0 10px rgba(255,176,46,.35); }
.status-dot.red { background:var(--red); box-shadow: 0 0 10px rgba(255,64,84,.35); }
.link-actions { display:flex; align-items:center; gap:6px; flex-wrap: wrap; justify-content:flex-end; }
.link-btn, .cft {
  min-height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(121,92,255,.66);
  background: linear-gradient(135deg, rgba(79,124,255,.85), rgba(121,92,255,.9));
  color:#fff;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  font-size:12px;
  font-weight:800;
  padding:7px 9px;
  white-space:nowrap;
}
.link-btn.steam { background: rgba(255,255,255,.055); border-color: rgba(148,163,184,.25); }
.alert-actions { display:flex; gap:10px; margin-top: 14px; flex-wrap:wrap; }
.alert-actions .btn { padding: 11px 12px; text-align:center; border-radius: 10px; font-weight: 800; }

.side-grid { display:grid; gap:18px; align-content:start; }
#liveEvents {
  max-height: 540px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.live-event { display:grid; grid-template-columns: 28px 1fr auto; gap:10px; align-items:center; padding: 12px 0; border-bottom:1px solid rgba(255,255,255,.07); }
.live-event:last-child { border-bottom:none; }
.live-event .event-icon { width:26px; height:26px; border-radius:8px; display:grid; place-items:center; background:rgba(255,255,255,.06); }
.live-event b { display:block; font-size:13px; }
.live-event small { color: var(--muted); }
.time { color:var(--muted2); font-size:12px; }

.settings-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:18px; }
.split-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:18px; align-items:start; }
.form-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:10px; }
.alert-role-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:12px; }
.role-editor {
  display:grid;
  gap:7px;
  min-width:0;
  padding:12px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:10px;
  background:rgba(255,255,255,.035);
}
.role-editor span { color:#e5efff; font-weight:800; }
.role-editor small { color:var(--muted); line-height:1.4; }
.role-editor textarea { min-height:94px; }
.inline-form { align-items:end; }
.full { grid-column: 1 / -1; }
.card h3 { margin:0 0 14px; font-size:16px; }
.form-grid + .btn,
.alert-role-grid + .btn,
.check + .btn,
textarea.input + .btn,
.config-preview + .btn,
.card > .btn:not(:first-child),
.panel-body > .btn:not(:first-child) {
  margin-top: 14px;
}
.check { display:flex; gap:8px; align-items:center; color:var(--muted); margin:10px 0; }
.compact { min-height:84px; }
.code { min-height:360px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size:12px; }
.config-preview { display:grid; gap:10px; }
.config-preview code {
  display:block;
  padding:12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(7,12,22,.72);
  color:#dbeafe;
  white-space:pre-wrap;
  word-break:break-word;
}
.kv-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:10px; }
.kv-grid div {
  border:1px solid rgba(255,255,255,.07);
  border-radius:10px;
  padding:10px;
  background:rgba(255,255,255,.035);
  min-width:0;
}
.kv-grid span { display:block; color:var(--muted); font-size:12px; margin-bottom:4px; }
.kv-grid b { display:block; color:#e5efff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.data-list { margin-top:14px; display:grid; gap:8px; }
.data-row { border:1px solid rgba(255,255,255,.07); border-radius:10px; background:rgba(255,255,255,.035); padding:10px; color:#dbeafe; font-size:13px; }
.data-row small { display:block; color:var(--muted); margin-top:3px; }
.data-row .btn { margin-top:10px; padding:8px 10px; border-radius:8px; }
.timeline { display:grid; gap:10px; }
.timeline-item {
  display:grid;
  grid-template-columns: minmax(150px, auto) 1fr;
  gap:12px;
  align-items:start;
  padding:12px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:10px;
  background:rgba(255,255,255,.035);
}
.timeline-item b { display:block; color:#e6efff; }
.timeline-item small { display:block; margin-top:4px; color:var(--muted); }
.event-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:6px 8px;
  border-radius:8px;
  border:1px solid rgba(32,212,255,.25);
  background:rgba(32,212,255,.09);
  color:#b8f2ff;
  font:800 11px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  text-align:center;
}

.table-wrap { overflow-x:auto; }
.wide-table { margin-top:18px; }
.data-table { width:100%; border-collapse: collapse; min-width: 860px; }
.data-table th, .data-table td { text-align:left; padding:13px 12px; border-bottom:1px solid rgba(255,255,255,.07); font-size:13px; vertical-align: top; }
.data-table th { color:#dce7fa; font-size:12px; text-transform:uppercase; letter-spacing:.04em; background:rgba(255,255,255,.035); }
.data-table td { color:#d2ddf0; }
.avatar-mini { width:28px; height:28px; border-radius:50%; background:rgba(79,124,255,.2); display:inline-grid; place-items:center; margin-right:8px; font-weight:800; color:#aebfff; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; color:#aeb9cc; }

.page { display:none; animation: fade .16s ease; }
.page.active { display:block; }
@keyframes fade { from { opacity:0; transform: translateY(4px); } to { opacity:1; transform:none; } }

.toast {
  position: fixed;
  right: 22px; bottom: 22px;
  min-width: 270px;
  padding: 14px 16px;
  background: rgba(12,18,31,.96);
  border: 1px solid rgba(40,212,114,.35);
  border-radius: 14px;
  box-shadow: var(--shadow);
  display:none;
  color:#dfffea;
  z-index: 20;
}
.toast.show { display:block; animation: toast .22s ease; }
@keyframes toast { from { transform: translateY(12px); opacity:0; } to { transform:none; opacity:1; } }
.empty-note {
  border: 1px dashed rgba(148,163,184,.25);
  background: rgba(255,255,255,.035);
  border-radius: 14px;
  padding: 20px;
  color: var(--muted);
}
.muted { color: var(--muted); }
.small { font-size:12px; }
.pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 14px 16px;
  padding: 0 18px 18px;
}
.card > .pager,
.member-list + .pager,
.timeline + .pager {
  padding: 16px 0 0;
  justify-content: flex-start;
}
.pager-total {
  color: #dbeafe;
  font-size: 13px;
  font-weight: 750;
  padding: 8px 0;
}
.pager-field {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
}
.pager-field span,
.pager-pages {
  white-space: nowrap;
}
.pager-select {
  min-width: 84px;
  padding: 8px 10px;
}
.pager-input {
  width: 74px;
  padding: 8px 10px;
}
.pager-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.pager-btn {
  min-width: 68px;
  padding: 9px 14px;
  border-radius: 9px;
}
.compact-chip {
  padding: 9px 11px;
  min-height: 40px;
}
.pulse.red {
  background: var(--red);
  box-shadow: 0 0 0 0 rgba(255,64,84,.55);
}
.log-console {
  display: grid;
  gap: 10px;
  max-height: min(68vh, 780px);
  overflow: auto;
  padding-right: 4px;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.log-row {
  border: 1px solid rgba(148,163,184,.16);
  border-left: 4px solid var(--blue);
  border-radius: 10px;
  background: rgba(7,12,22,.72);
  padding: 11px 12px;
  overflow: hidden;
}
.log-row.warn { border-left-color: var(--orange); }
.log-row.error { border-left-color: var(--red); }
.log-row.debug { border-left-color: var(--muted2); }
.log-main {
  display: grid;
  grid-template-columns: 190px 68px 160px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}
.log-time,
.log-category,
.log-meta {
  color: var(--muted);
  font-size: 12px;
}
.log-level {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 24px;
  border-radius: 7px;
  border: 1px solid rgba(79,124,255,.34);
  background: rgba(79,124,255,.12);
  color: #c8d5ff;
  font-size: 11px;
  font-weight: 850;
}
.log-level.warn {
  border-color: rgba(255,176,46,.36);
  background: rgba(255,176,46,.12);
  color: #ffd58a;
}
.log-level.error {
  border-color: rgba(255,64,84,.42);
  background: rgba(255,64,84,.14);
  color: #ffc2c9;
}
.log-level.debug {
  border-color: rgba(148,163,184,.28);
  background: rgba(148,163,184,.10);
  color: #cbd5e1;
}
.log-message {
  color: #e6efff;
  overflow-wrap: anywhere;
}
.log-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 8px;
}
.log-details {
  margin-top: 8px;
  color: var(--muted);
}
.log-details summary {
  cursor: pointer;
  width: fit-content;
}
.log-details pre {
  max-height: 260px;
  overflow: auto;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(0,0,0,.20);
  color: #dbeafe;
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 1180px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: relative; height:auto; border-right:0; border-bottom:1px solid var(--border); }
  .system-card { position:relative; left:auto; right:auto; bottom:auto; margin-top:18px; }
  .nav { grid-template-columns: repeat(2, 1fr); padding-bottom:0; }
  .content-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
  .alert-card { grid-template-columns: 1fr; }
  .alert-role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .main { padding:18px 14px 28px; }
  .topbar { align-items:flex-start; flex-direction:column; }
  .stats { grid-template-columns: 1fr; }
  .nav { grid-template-columns: 1fr; }
  .member-row { grid-template-columns: 34px 1fr; }
  .link-actions { grid-column: 2; justify-content:flex-start; }
  .settings-grid, .split-grid, .form-grid, .alert-role-grid, .kv-grid, .timeline-item { grid-template-columns: 1fr; }
  .log-main { grid-template-columns: 1fr; }
  .pager { justify-content: flex-start; }
  .pager-nav { width: 100%; }
}

.resolution-box {
  margin-top: 12px;
  padding: 10px 11px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.04);
  display: grid;
  gap: 3px;
  font-size: 13px;
}
.resolution-box b { color: #f8fafc; }
.resolution-box span { color: var(--muted); }
.resolution-box.cleared { border-color: rgba(40,212,114,.28); background: rgba(40,212,114,.09); }
.resolution-box.banned { border-color: rgba(255,176,46,.28); background: rgba(255,176,46,.09); }