/* ═══════════════════════════════════════════════════════════
   LunePanel v7.0 — Design System
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ── Variables ───────────────────────────────────────────── */
:root {
  --bg0:       #060810;
  --bg1:       #0a0d16;
  --bg2:       #0e1220;
  --bg3:       #131829;
  --bg4:       #181e30;
  --bg5:       #1e2538;

  --border0:   rgba(255,255,255,.03);
  --border1:   rgba(255,255,255,.06);
  --border2:   rgba(255,255,255,.10);
  --border3:   rgba(255,255,255,.16);

  --txt:       #c8d4f0;
  --txt2:      #7a89b0;
  --txt3:      #404d6a;

  --green:     #00e5a0;
  --green-d:   rgba(0,229,160,.08);
  --green-b:   rgba(0,229,160,.18);
  --blue:      #3d9bff;
  --blue-d:    rgba(61,155,255,.08);
  --blue-b:    rgba(61,155,255,.18);
  --red:       #ff3d5a;
  --red-d:     rgba(255,61,90,.08);
  --red-b:     rgba(255,61,90,.18);
  --amber:     #f59e0b;
  --amber-d:   rgba(245,158,11,.08);
  --amber-b:   rgba(245,158,11,.18);
  --purple:    #8b5cf6;
  --purple-d:  rgba(139,92,246,.08);
  --purple-b:  rgba(139,92,246,.18);
  --cyan:      #06b6d4;
  --cyan-d:    rgba(6,182,212,.08);
  --cyan-b:    rgba(6,182,212,.18);
  --orange:    #fb923c;

  --sidebar-w:    256px;
  --sidebar-mini: 64px;
  --topbar-h:     58px;

  --r-xs: 4px;
  --r-sm: 7px;
  --r:    10px;
  --r-lg: 14px;
  --r-xl: 20px;

  --shadow-sm: 0 2px 8px rgba(0,0,0,.4);
  --shadow:    0 4px 20px rgba(0,0,0,.5);
  --shadow-lg: 0 8px 40px rgba(0,0,0,.6);

  --t:      all .15s cubic-bezier(.4,0,.2,1);
  --t-med:  all .25s cubic-bezier(.4,0,.2,1);
  --t-slow: all .35s cubic-bezier(.4,0,.2,1);
}

/* ── Reset ───────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:14px; scroll-behavior:smooth; }
body {
  background: var(--bg0);
  color: var(--txt);
  font-family: 'Syne', -apple-system, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color:inherit; text-decoration:none; transition:var(--t); }
img { display:block; }

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:99px; }
::-webkit-scrollbar-thumb:hover { background:var(--border3); }
::selection { background:var(--blue-d); color:var(--blue); }

/* ── Mono ────────────────────────────────────────────────── */
.mono, code { font-family:'IBM Plex Mono','Fira Code',monospace; }

/* ── Typography utils ────────────────────────────────────── */
.txt-muted  { color:var(--txt3); }
.txt-2      { color:var(--txt2); }
.c-green    { color:var(--green); }
.c-blue     { color:var(--blue); }
.c-red      { color:var(--red); }
.c-amber    { color:var(--amber); }
.c-purple   { color:var(--purple); }
.c-cyan     { color:var(--cyan); }

/* ── Duration colors ─────────────────────────────────────── */
.dur-h { color:var(--blue); font-weight:600; }
.dur-m { color:var(--green); }
.dur-s { color:var(--txt2); }
.dur-sep { color:var(--txt3); font-size:.7em; }
.ago-fresh  { color:var(--green); }
.ago-recent { color:var(--amber); }

/* ════════════════════════════════════════════════════════════
   BADGES
   ════════════════════════════════════════════════════════════ */
.badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 9px; border-radius:99px;
  font-family:'IBM Plex Mono',monospace;
  font-size:.68rem; font-weight:600;
  letter-spacing:.04em; white-space:nowrap;
  line-height:1.6;
}
.badge-active    { background:var(--green-d); color:var(--green); border:1px solid rgba(0,229,160,.2); }
.badge-completed { background:var(--blue-d);  color:var(--blue);  border:1px solid rgba(61,155,255,.2); }
.badge-error     { background:var(--red-d);   color:var(--red);   border:1px solid rgba(255,61,90,.2); }
.badge-pending   { background:var(--amber-d); color:var(--amber); border:1px solid rgba(245,158,11,.2); }
.badge-default   { background:var(--bg5);     color:var(--txt2);  border:1px solid var(--border1); }
.badge-purple    { background:var(--purple-d);color:var(--purple);border:1px solid rgba(139,92,246,.2); }
.badge-cyan      { background:var(--cyan-d);  color:var(--cyan);  border:1px solid rgba(6,182,212,.2); }
.badge-amber     { background:var(--amber-d); color:var(--amber); border:1px solid rgba(245,158,11,.2); }
.badge-blue      { background:var(--blue-d);  color:var(--blue);  border:1px solid rgba(61,155,255,.2); }

.badge-active .fa-circle { animation:pulse-dot 2s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ════════════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 16px; border-radius:var(--r-sm);
  font-family:'Syne',sans-serif;
  font-size:.82rem; font-weight:600;
  cursor:pointer; transition:var(--t);
  background:var(--bg4); border:1px solid var(--border1);
  color:var(--txt2); line-height:1; white-space:nowrap;
  text-decoration:none;
}
.btn:hover {
  background:var(--bg5); border-color:var(--border2);
  color:var(--txt); transform:translateY(-1px); box-shadow:var(--shadow-sm);
}
.btn:active { transform:translateY(0); }
.btn-primary {
  background:linear-gradient(135deg,rgba(61,155,255,.15),rgba(0,229,160,.08));
  border-color:rgba(61,155,255,.3); color:var(--blue);
}
.btn-primary:hover {
  background:linear-gradient(135deg,rgba(61,155,255,.22),rgba(0,229,160,.12));
  border-color:rgba(61,155,255,.5); color:var(--blue);
  box-shadow:0 4px 16px rgba(61,155,255,.2);
}
.btn-danger { background:var(--red-d); border-color:rgba(255,61,90,.3); color:var(--red); }
.btn-danger:hover { background:var(--red-b); border-color:var(--red); color:var(--red); }
.btn-success { background:var(--green-d); border-color:rgba(0,229,160,.3); color:var(--green); }
.btn-sm { padding:4px 12px; font-size:.75rem; }
.btn-lg { padding:10px 22px; font-size:.9rem; }
.btn-icon { padding:7px; width:32px; height:32px; justify-content:center; }

/* ════════════════════════════════════════════════════════════
   LAYOUT — Shell / Sidebar / Main
   ════════════════════════════════════════════════════════════ */
.shell { display:flex; min-height:100vh; width:100%; }

/* Sidebar */
.sidebar {
  width:var(--sidebar-w);
  background:var(--bg1);
  border-right:1px solid var(--border0);
  display:flex; flex-direction:column;
  position:fixed; top:0; left:0; height:100vh;
  z-index:300; transition:var(--t-med);
  overflow:hidden;
}
.sidebar.collapsed { width:var(--sidebar-mini); overflow:visible; }
.sidebar.collapsed .sb-nav { overflow:hidden; }

/* Brand */
.sb-brand {
  display:flex; align-items:center; gap:10px;
  padding:20px 16px 16px; border-bottom:1px solid var(--border0);
  flex-shrink:0;
}
.sb-logo {
  width:34px; height:34px; flex-shrink:0;
  background:linear-gradient(135deg,var(--blue-d),var(--green-d));
  border:1px solid rgba(61,155,255,.2); border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; color:var(--blue);
  position:relative; overflow:hidden;
}
.sb-logo::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 30% 30%,rgba(61,155,255,.2),transparent 70%);
}
.sb-title {
  font-weight:800; font-size:1rem; color:#fff;
  white-space:nowrap; overflow:hidden; transition:var(--t-med);
  letter-spacing:-.01em;
}
.sb-ver {
  font-family:'IBM Plex Mono',monospace; font-size:.6rem;
  color:var(--txt3); background:var(--bg4); border:1px solid var(--border1);
  padding:1px 6px; border-radius:var(--r-xs); margin-left:auto;
  white-space:nowrap; flex-shrink:0; transition:var(--t-med);
}
.sb-collapse-btn {
  background:none; border:none; color:var(--txt3); cursor:pointer;
  padding:4px; border-radius:var(--r-xs); transition:var(--t);
  margin-left:auto; flex-shrink:0;
}
.sb-collapse-btn:hover { color:var(--txt); background:var(--bg4); }

/* Collapsed overrides */
.sidebar.collapsed .sb-title,
.sidebar.collapsed .sb-ver,
.sidebar.collapsed .sb-user-info,
.sidebar.collapsed .sb-link-text,
.sidebar.collapsed .sb-logout-text { opacity:0; width:0; pointer-events:none; }
.sidebar.collapsed .sb-user     { justify-content:center; padding:12px 8px; }
.sidebar.collapsed .sb-nav      { padding:8px; }
.sidebar.collapsed .sb-link     { justify-content:center; padding:10px; }
.sidebar.collapsed .sb-brand    { justify-content:center; padding:18px 8px 14px; }
.sidebar.collapsed .sb-collapse-btn { margin-left:0; opacity:1 !important; width:auto !important; pointer-events:all !important; }
.sidebar.collapsed .sb-collapse-btn .fa-bars-staggered { transform:scaleX(-1); }
.sidebar.collapsed .sb-footer   { padding:12px 8px; }
.sidebar.collapsed .sb-logout   { justify-content:center; padding:10px; }

/* User block */
.sb-user {
  display:flex; align-items:center; gap:10px;
  padding:14px 16px; border-bottom:1px solid var(--border0);
  flex-shrink:0;
}
.sb-avatar {
  width:36px; height:36px; flex-shrink:0;
  border-radius:var(--r-sm);
  background:linear-gradient(135deg,var(--blue-d),var(--purple-d));
  border:1px solid var(--border2);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.82rem; color:var(--blue);
}
.sb-user-name {
  font-weight:700; font-size:.85rem; color:var(--txt);
  white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; transition:var(--t-med);
}
.sb-user-role {
  font-size:.68rem; font-weight:600;
  font-family:'IBM Plex Mono',monospace;
  transition:var(--t-med);
}
.role-admin  { color:var(--amber); }
.role-viewer { color:var(--txt3); }

/* Nav */
.sb-nav { flex:1; overflow-y:auto; padding:10px 10px; }
.sb-nav li { list-style:none; margin-bottom:2px; }
.sb-link {
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:var(--r-sm);
  color:var(--txt3); font-weight:600; font-size:.82rem;
  transition:var(--t); cursor:pointer; position:relative;
}
.sb-link:hover { color:var(--txt); background:var(--bg3); }
.sb-link.active { color:var(--blue); background:var(--blue-d); }
.sb-link.active::before {
  content:''; position:absolute; left:0; top:20%; bottom:20%;
  width:2px; border-radius:99px; background:var(--blue);
}
.sb-ico { width:20px; text-align:center; flex-shrink:0; font-size:.85rem; }
.sb-link-text { white-space:nowrap; overflow:hidden; transition:var(--t-med); }
.sb-live-badge {
  margin-left:auto; background:var(--green-d); color:var(--green);
  border:1px solid rgba(0,229,160,.2); padding:1px 7px;
  border-radius:99px; font-size:.65rem; font-family:'IBM Plex Mono',monospace;
  font-weight:600;
}

/* Footer */
.sb-footer { padding:12px 10px; border-top:1px solid var(--border0); flex-shrink:0; }
.sb-logout {
  display:flex; align-items:center; gap:10px;
  width:100%; padding:9px 10px; border-radius:var(--r-sm);
  background:none; border:none; cursor:pointer;
  color:var(--txt3); font-family:'Syne',sans-serif;
  font-size:.82rem; font-weight:600; transition:var(--t);
}
.sb-logout:hover { color:var(--red); background:var(--red-d); }
.sb-logout-text { white-space:nowrap; transition:var(--t-med); }

/* Overlay */
.sb-overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.6);
  z-index:299; backdrop-filter:blur(2px);
}
.sb-overlay.visible { display:block; }

/* Main */
.main {
  flex:1; margin-left:var(--sidebar-w);
  display:flex; flex-direction:column; min-height:100vh;
  transition:margin-left var(--t-med);
  min-width:0;
}
.main.sidebar-collapsed { margin-left:var(--sidebar-mini); }

/* Topbar */
.topbar {
  height:var(--topbar-h); background:var(--bg1);
  border-bottom:1px solid var(--border0);
  display:flex; align-items:center; gap:12px;
  padding:0 20px; position:sticky; top:0; z-index:100;
}
.topbar-toggle {
  display:none; background:none; border:none; color:var(--txt2);
  cursor:pointer; padding:6px; border-radius:var(--r-xs);
  font-size:1rem; transition:var(--t);
}
.topbar-toggle:hover { color:var(--txt); }

.topbar-search {
  flex:1; max-width:320px; position:relative; display:flex; align-items:center;
}
.topbar-search .search-ico {
  position:absolute; left:12px; color:var(--txt3); font-size:.82rem;
  pointer-events:none;
}
.topbar-search input {
  width:100%; padding:7px 12px 7px 34px;
  background:var(--bg3); border:1px solid var(--border1);
  border-radius:var(--r-sm); color:var(--txt);
  font-family:'Syne',sans-serif; font-size:.82rem;
  transition:var(--t); outline:none;
}
.topbar-search input:focus {
  border-color:var(--border2); background:var(--bg4);
  box-shadow:0 0 0 3px var(--blue-d);
}
.topbar-search input::placeholder { color:var(--txt3); }

/* Period bar */
.period-bar { display:flex; align-items:center; gap:2px; margin-left:auto; }
.period-btn {
  padding:5px 12px; border-radius:var(--r-xs);
  font-size:.75rem; font-weight:600; color:var(--txt3);
  transition:var(--t); cursor:pointer;
}
.period-btn:hover  { color:var(--txt); background:var(--bg3); }
.period-btn.active { color:var(--blue); background:var(--blue-d); }
.period-custom {
  display:flex; align-items:center; gap:6px; margin-left:6px;
}
.period-custom input[type=date] {
  padding:4px 8px; background:var(--bg3); border:1px solid var(--border1);
  border-radius:var(--r-xs); color:var(--txt); font-size:.75rem;
  outline:none;
}

/* Topbar right */
.topbar-right { display:flex; align-items:center; gap:8px; }
.live-indicator {
  display:flex; align-items:center; gap:7px;
  padding:5px 12px; border-radius:99px;
  background:var(--bg3); border:1px solid var(--border1);
  font-size:.75rem; color:var(--txt3);
  font-family:'IBM Plex Mono',monospace;
}
.live-indicator.has-players { border-color:rgba(0,229,160,.25); }
.live-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--txt3);
}
.live-indicator.has-players .live-dot {
  background:var(--green);
  box-shadow:0 0 0 2px var(--green-d);
  animation:pulse-dot 2s ease-in-out infinite;
}

/* Content */
.content { flex:1; padding:24px; }

/* DB Error Banner */
.db-banner {
  background:var(--red-d); border:1px solid rgba(255,61,90,.25);
  border-radius:var(--r); padding:12px 16px; margin-bottom:20px;
  display:flex; align-items:center; gap:10px;
  color:var(--red); font-size:.82rem;
}

/* ════════════════════════════════════════════════════════════
   PAGE COMPONENTS
   ════════════════════════════════════════════════════════════ */

/* Page Header */
.ph {
  display:flex; align-items:flex-start; justify-content:space-between;
  margin-bottom:24px; gap:16px; flex-wrap:wrap;
}
.ph h1 {
  font-size:1.4rem; font-weight:800; color:#fff;
  letter-spacing:-.02em; line-height:1.2;
}
.ph p { font-size:.82rem; color:var(--txt2); margin-top:4px; }
.ph-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* Stat Cards */
.stat-grid {
  display:grid; gap:12px; margin-bottom:20px;
}
.g4 { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
.g3 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:20px; }
.g2 { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:16px; }

.stat-card {
  background:var(--bg2); border:1px solid var(--border0);
  border-radius:var(--r-lg); padding:18px 20px;
  position:relative; overflow:hidden; transition:var(--t);
}
.stat-card:hover { border-color:var(--border1); transform:translateY(-1px); }
.stat-card::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at top right,rgba(61,155,255,.04),transparent 60%);
  pointer-events:none;
}
.stat-card.accent-green::before { background:radial-gradient(ellipse at top right,rgba(0,229,160,.06),transparent 60%); }
.stat-card.accent-blue::before  { background:radial-gradient(ellipse at top right,rgba(61,155,255,.06),transparent 60%); }
.stat-card.accent-red::before   { background:radial-gradient(ellipse at top right,rgba(255,61,90,.06),transparent 60%); }
.stat-card.accent-amber::before { background:radial-gradient(ellipse at top right,rgba(245,158,11,.06),transparent 60%); }

.stat-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.stat-icon {
  width:38px; height:38px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; flex-shrink:0;
}
.stat-icon.green  { background:var(--green-d); color:var(--green); border:1px solid rgba(0,229,160,.15); }
.stat-icon.blue   { background:var(--blue-d);  color:var(--blue);  border:1px solid rgba(61,155,255,.15); }
.stat-icon.red    { background:var(--red-d);   color:var(--red);   border:1px solid rgba(255,61,90,.15); }
.stat-icon.amber  { background:var(--amber-d); color:var(--amber); border:1px solid rgba(245,158,11,.15); }
.stat-icon.purple { background:var(--purple-d);color:var(--purple);border:1px solid rgba(139,92,246,.15); }
.stat-icon.cyan   { background:var(--cyan-d);  color:var(--cyan);  border:1px solid rgba(6,182,212,.15); }

.stat-val {
  font-family:'IBM Plex Mono',monospace;
  font-size:1.8rem; font-weight:600; line-height:1.1; margin-bottom:4px;
}
.stat-val.green  { color:var(--green); }
.stat-val.blue   { color:var(--blue); }
.stat-val.red    { color:var(--red); }
.stat-val.amber  { color:var(--amber); }
.stat-val.purple { color:var(--purple); }
.stat-lbl { font-size:.75rem; color:var(--txt2); font-weight:600; letter-spacing:.02em; }
.stat-trend {
  font-size:.72rem; font-family:'IBM Plex Mono',monospace;
  margin-top:6px;
}
.stat-trend.up   { color:var(--green); }
.stat-trend.down { color:var(--red); }
.stat-trend.flat { color:var(--txt3); }

/* Box */
.box {
  background:var(--bg2); border:1px solid var(--border0);
  border-radius:var(--r-lg); overflow:hidden; margin-bottom:0;
}
.box-h {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--border0);
  gap:10px;
}
.box-h .title {
  font-size:.88rem; font-weight:700; color:var(--txt);
  display:flex; align-items:center; gap:8px;
}
.box-body { padding:16px 20px; }

/* Tables */
.tbl-wrap { overflow-x:auto; }
.tbl { width:100%; border-collapse:collapse; }
.tbl th {
  padding:10px 16px; text-align:left;
  font-size:.7rem; font-weight:700;
  color:var(--txt3); letter-spacing:.06em; text-transform:uppercase;
  border-bottom:1px solid var(--border0);
  white-space:nowrap;
}
.tbl td {
  padding:11px 16px; border-bottom:1px solid var(--border0);
  font-size:.82rem; color:var(--txt2);
  vertical-align:middle;
}
.tbl tr:last-child td { border-bottom:none; }
.tbl tr:hover td { background:rgba(255,255,255,.015); }
.tbl .empty-td {
  text-align:center; color:var(--txt3);
  padding:32px; font-size:.82rem;
}

/* Player name link */
.pname {
  color:var(--txt); font-weight:600; transition:var(--t);
}
.pname:hover { color:var(--blue); }
.pname.c-red { color:var(--txt); }
.pname.c-red:hover { color:var(--red); }
.staff-name { color:var(--amber); font-weight:600; font-size:.82rem; transition:var(--t); }
.staff-name:hover { color:#fff; }

/* Tags / Server chips */
.tag {
  display:inline-flex; align-items:center;
  padding:2px 9px; border-radius:var(--r-xs);
  background:var(--bg4); border:1px solid var(--border1);
  color:var(--txt2); font-size:.72rem; font-weight:600;
  font-family:'IBM Plex Mono',monospace;
  white-space:nowrap; transition:var(--t);
}
.tag:hover { border-color:var(--border2); color:var(--txt); }
.route-arrow { color:var(--txt3); font-size:.72rem; margin:0 2px; }

/* Rank badges */
.rk {
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:var(--r-xs);
  font-family:'IBM Plex Mono',monospace; font-size:.72rem;
  font-weight:700;
}
.rk1 { background:linear-gradient(135deg,#ffb020,#ff8c00); color:#000; }
.rk2 { background:linear-gradient(135deg,#c0c0c0,#909090); color:#000; }
.rk3 { background:linear-gradient(135deg,#cd7f32,#8b4513); color:#fff; }
.rkn { background:var(--bg5); color:var(--txt3); border:1px solid var(--border1); }

/* Feed items */
.feed-item {
  display:flex; align-items:flex-start; gap:12px;
  padding:12px 20px; border-bottom:1px solid var(--border0);
  transition:var(--t);
}
.feed-item:last-child { border-bottom:none; }
.feed-item:hover { background:rgba(255,255,255,.015); }
.feed-dot {
  width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:6px;
}
.feed-dot.active  { background:var(--green); box-shadow:0 0 6px var(--green-b); }
.feed-dot.session { background:var(--blue); }
.feed-dot.mute    { background:var(--red); }
.feed-content { flex:1; min-width:0; }
.feed-title {
  display:flex; align-items:center; gap:8px;
  font-size:.82rem; flex-wrap:wrap;
}
.feed-meta { font-size:.72rem; color:var(--txt3); margin-top:3px; }

/* Profile stat grid */
.prof-stat-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:1px; background:var(--border0);
  border-top:1px solid var(--border0);
}
.prof-stat {
  padding:16px; background:var(--bg2); text-align:center;
}
.prof-stat-val { font-size:1.6rem; font-weight:700; font-family:'IBM Plex Mono',monospace; }
.prof-stat-lbl { font-size:.7rem; color:var(--txt3); margin-top:4px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }

/* Filter bar */
.filter-bar {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.filter-bar input[type=text],
.filter-bar input[type=date],
.filter-bar select {
  padding:7px 12px; background:var(--bg3); border:1px solid var(--border1);
  border-radius:var(--r-sm); color:var(--txt);
  font-family:'Syne',sans-serif; font-size:.82rem; outline:none;
  transition:var(--t);
}
.filter-bar input:focus,
.filter-bar select:focus { border-color:var(--border2); box-shadow:0 0 0 3px var(--blue-d); }
.filter-bar select { background:var(--bg3); }

/* Charts */
.chart-wrap { padding:16px 20px; height:220px; position:relative; }
.chart-wrap canvas { width:100% !important; }

/* Donut */
.donut-wrap {
  display:flex; align-items:center; gap:20px;
  padding:20px;
}
.donut-legend { flex:1; display:flex; flex-direction:column; gap:7px; min-width:0; }
.donut-legend-item {
  display:flex; align-items:center; gap:8px; font-size:.76rem;
}
.donut-legend-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.donut-legend-name { flex:1; color:var(--txt2); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.donut-legend-val { color:var(--txt); font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:.76rem; }

/* Pager */
.pager {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; border-top:1px solid var(--border0);
  gap:10px; flex-wrap:wrap;
}
.pager-info { font-size:.75rem; color:var(--txt3); font-family:'IBM Plex Mono',monospace; }
.pager-btns { display:flex; gap:4px; }
.pager-btn {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:32px; height:32px; padding:0 8px;
  border-radius:var(--r-xs); background:var(--bg4); border:1px solid var(--border1);
  color:var(--txt3); font-size:.78rem; font-weight:600; transition:var(--t);
}
.pager-btn:hover  { border-color:var(--border2); color:var(--txt); background:var(--bg5); }
.pager-btn.active { background:var(--blue-d); border-color:rgba(61,155,255,.3); color:var(--blue); }

/* Server cards */
.sv-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:12px; margin-bottom:16px;
}
.sv-card {
  background:var(--bg2); border:1px solid var(--border0);
  border-radius:var(--r-lg); padding:16px; transition:var(--t);
  display:flex; flex-direction:column; gap:8px;
}
.sv-card:hover { border-color:var(--border2); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.sv-card-name {
  font-size:.88rem; font-weight:700; color:var(--txt);
  display:flex; align-items:center; gap:8px;
}
.sv-card-row {
  display:flex; justify-content:space-between;
  font-size:.76rem; color:var(--txt2);
  padding-top:7px; border-top:1px solid var(--border0);
}
.sv-card-row span:last-child { font-family:'IBM Plex Mono',monospace; font-weight:600; color:var(--txt); }

/* Staff cards */
.staff-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:14px;
}
.staff-card {
  background:var(--bg2); border:1px solid var(--border0);
  border-radius:var(--r-lg); padding:18px;
  transition:var(--t); position:relative; overflow:hidden;
}
.staff-card:hover { border-color:var(--border1); transform:translateY(-1px); }
.staff-card-top { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.staff-mc-avatar {
  width:44px; height:44px; border-radius:var(--r-sm);
  border:1px solid var(--border1); flex-shrink:0; background:var(--bg4);
}
.staff-stats-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:12px;
}
.staff-stat {
  background:var(--bg3); border:1px solid var(--border0);
  border-radius:var(--r-sm); padding:9px 11px;
}
.staff-stat-val { font-family:'IBM Plex Mono',monospace; font-size:1.1rem; font-weight:700; }
.staff-stat-lbl { font-size:.65rem; color:var(--txt3); text-transform:uppercase; letter-spacing:.06em; margin-top:2px; font-weight:700; }
.staff-footer {
  display:flex; justify-content:space-between; align-items:center;
  padding-top:10px; border-top:1px solid var(--border0);
}

/* Progress bars */
.prog-bar-wrap { height:4px; background:var(--bg5); border-radius:99px; overflow:hidden; }
.prog-bar { height:4px; border-radius:99px; transition:width .4s cubic-bezier(.4,0,.2,1); }

/* Mini stat (3-col grid in profile) */
.mini-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.mini-stat {
  background:var(--bg3); border:1px solid var(--border0);
  border-radius:var(--r-sm); padding:12px; text-align:center;
}
.mini-stat-val {
  font-family:'IBM Plex Mono',monospace;
  font-size:1.4rem; font-weight:600;
}
.mini-stat-lbl { font-size:.68rem; color:var(--txt3); font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-top:4px; }

/* Toast */
#toast-container {
  position:fixed; bottom:20px; right:20px; z-index:9999;
  display:flex; flex-direction:column; gap:8px; pointer-events:none;
}
.toast {
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:var(--r);
  background:var(--bg4); border:1px solid var(--border2);
  box-shadow:var(--shadow-lg);
  font-size:.82rem; min-width:220px; max-width:340px;
  pointer-events:all; animation:toast-in .2s cubic-bezier(.4,0,.2,1);
}
.toast.leaving { animation:toast-out .2s cubic-bezier(.4,0,.2,1) forwards; }
.toast-success { border-color:rgba(0,229,160,.3); color:var(--green); }
.toast-error   { border-color:rgba(255,61,90,.3);  color:var(--red); }
.toast-info    { border-color:rgba(61,155,255,.3);  color:var(--blue); }
.toast-warn    { border-color:rgba(245,158,11,.3);  color:var(--amber); }
@keyframes toast-in  { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:none} }
@keyframes toast-out { from{opacity:1;transform:none} to{opacity:0;transform:translateX(20px)} }

/* Footer */
.panel-footer {
  padding:14px 24px;
  border-top:1px solid var(--border0);
  display:flex; align-items:center; justify-content:space-between;
  font-size:.72rem; color:var(--txt3);
}

/* Empty state */
.empty-state {
  text-align:center; padding:60px 20px; color:var(--txt3);
}
.empty-icon {
  font-size:2.5rem; margin-bottom:12px; opacity:.3;
}
.empty-state h3 { font-size:1rem; color:var(--txt2); margin-bottom:6px; font-weight:700; }
.empty-state p { font-size:.82rem; }

/* Horizontal stats row */
.hstats {
  display:flex; gap:0; border:1px solid var(--border0);
  border-radius:var(--r-lg); overflow:hidden; margin-bottom:16px;
}
.hstat {
  flex:1; padding:16px 18px; border-right:1px solid var(--border0);
  background:var(--bg2);
}
.hstat:last-child { border-right:none; }
.hstat-val { font-family:'IBM Plex Mono',monospace; font-size:1.5rem; font-weight:600; }
.hstat-lbl { font-size:.7rem; color:var(--txt3); font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin-top:4px; }

/* Inline timeline */
.timeline { display:flex; flex-direction:column; }
.tl-item {
  display:flex; gap:14px; padding:12px 20px;
  border-bottom:1px solid var(--border0);
}
.tl-item:last-child { border-bottom:none; }
.tl-line { display:flex; flex-direction:column; align-items:center; gap:0; width:20px; flex-shrink:0; }
.tl-dot { width:10px; height:10px; border-radius:50%; margin-top:5px; flex-shrink:0; }
.tl-connector { width:1px; flex:1; background:var(--border0); margin-top:4px; }
.tl-content { flex:1; min-width:0; }
.tl-title { font-size:.82rem; font-weight:600; color:var(--txt); }
.tl-meta { font-size:.72rem; color:var(--txt3); margin-top:2px; }

/* Stat delta pill */
.delta { display:inline-flex; align-items:center; gap:3px; font-size:.72rem; font-family:'IBM Plex Mono',monospace; font-weight:600; }
.delta.up   { color:var(--green); }
.delta.down { color:var(--red); }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width:1200px) {
  .g4 { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:900px) {
  .sidebar {
    transform:translateX(-100%);
    width:var(--sidebar-w) !important;
  }
  .sidebar.open { transform:translateX(0); box-shadow:var(--shadow-lg); }
  .sidebar.collapsed { transform:translateX(-100%); }
  .sidebar.collapsed.open { transform:translateX(0); }
  .main { margin-left:0 !important; }
  .topbar-toggle { display:flex; }
  .period-bar { display:none; }
  .topbar-search { max-width:100%; }
  .g2 { grid-template-columns:1fr; }
  .g3 { grid-template-columns:repeat(2,1fr); }
  .hstats { flex-direction:column; }
  .hstat { border-right:none; border-bottom:1px solid var(--border0); }
  .hstat:last-child { border-bottom:none; }
  .donut-wrap { flex-direction:column; }
  .content { padding:16px; }
}

@media (max-width:600px) {
  .g3 { grid-template-columns:1fr; }
  .g4 { grid-template-columns:1fr; }
  .ph { flex-direction:column; }
  .ph-actions { width:100%; }
  .stat-grid { grid-template-columns:1fr 1fr; }
  .topbar { padding:0 12px; gap:8px; }
  .filter-bar { flex-direction:column; align-items:stretch; }
  .staff-grid { grid-template-columns:1fr; }
  .sv-grid { grid-template-columns:repeat(2,1fr); }
  .mini-stats { grid-template-columns:1fr 1fr; }
  .tbl th:nth-child(n+4),
  .tbl td:nth-child(n+4) { display:none; }
}

/* ════════════════════════════════════════════════════════════
   ANIMATIONS
   ════════════════════════════════════════════════════════════ */
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
@keyframes slideUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
@keyframes shimmer {
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}
.fade-in { animation:fadeIn .25s ease forwards; }

.stat-card { animation:fadeIn .3s ease both; }
.stat-card:nth-child(1) { animation-delay:.02s; }
.stat-card:nth-child(2) { animation-delay:.06s; }
.stat-card:nth-child(3) { animation-delay:.10s; }
.stat-card:nth-child(4) { animation-delay:.14s; }

/* Loading skeleton */
.skeleton {
  background:linear-gradient(90deg,var(--bg3) 25%,var(--bg4) 50%,var(--bg3) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
  border-radius:var(--r-xs);
}