:root {
  --bg: #f4f7fb;
  --bg-elevated: #ffffff;
  --bg-soft: #edf3fb;
  --panel: #ffffff;
  --line: #d9e3f0;
  --line-strong: #c7d4e6;
  --text: #122033;
  --muted: #60738e;
  --primary: #2563eb;
  --primary-strong: #1d4ed8;
  --danger: #dc2626;
  --success: #15803d;
  --warning: #b45309;
  --shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
  --radius: 20px;
  --content-max: 1600px;
  --row-y: 0.82rem;
  --font-scale: 0.95rem;
}
html[data-theme="dark"] {
  --bg: #07111f;
  --bg-elevated: #0e1a2b;
  --bg-soft: #0b1625;
  --panel: #0e1a2b;
  --line: #23344d;
  --line-strong: #304667;
  --text: #eef4ff;
  --muted: #90a4c3;
  --primary: #4f8cff;
  --primary-strong: #78a7ff;
  --danger: #ef4444;
  --success: #22c55e;
  --warning: #f59e0b;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}
html[data-density="comfortable"] {
  --row-y: 1rem;
  --font-scale: 1rem;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(37,99,235,0.10), transparent 26%),
    linear-gradient(180deg, var(--bg), var(--bg-soft));
  min-height: 100vh;
  font-size: var(--font-scale);
}
.login-page { display:flex; align-items:center; justify-content:center; padding:40px 20px; }
.login-card { width:min(480px, 100%); padding:36px; }
.app-shell {
  display:grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap:20px;
  padding:20px;
  max-width: calc(var(--content-max) + 40px);
  margin: 0 auto;
}
.sidebar { min-height: calc(100vh - 40px); padding:22px; display:flex; flex-direction:column; justify-content:space-between; }
.content-area { min-width:0; }
.app-card,
.sub-card {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
}
.sub-card { padding: 14px; }
.top-toolbar {
  display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 16px;
}
.toolbar-title { font-weight:700; }
.toolbar-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.brand { font-size: 1.35rem; font-weight: 800; display:flex; gap:10px; align-items:center; }
.brand-mark {
  width: 38px; height: 38px; display:inline-flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--primary), #60a5fa); color:white; border-radius: 12px;
  box-shadow: 0 10px 22px rgba(37,99,235,0.24);
}
.brand-subtitle { color: var(--muted); margin-top: 10px; font-size: 0.92rem; line-height: 1.5; }
.nav-link {
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 11px 13px;
  font-weight: 600;
}
.nav-link.active, .nav-link:hover {
  color: var(--text);
  border-color: var(--line);
  background: var(--bg-soft);
}
.user-chip { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.role-badge, .pill, .status-badge {
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px;
  font-size:.82rem; font-weight:600;
}
.role-viewer, .warning-pill { background: rgba(245,158,11,0.12); color: var(--warning); }
.role-editor { background: rgba(37,99,235,0.10); color: var(--primary); }
.role-admin, .status-badge.online { background: rgba(34,197,94,0.12); color: var(--success); }
.neutral-pill, .status-badge.offline { background: var(--bg-soft); color: var(--muted); }
.page-title { font-size: clamp(1.75rem, 2vw, 2.35rem); font-weight: 800; margin: 0; }
.section-title { font-size: 1.14rem; font-weight: 800; margin-bottom: .75rem; }
.subtle { color: var(--muted); }
.hero-header, .section-header {
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
}
.hero-actions, .action-wrap { display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:flex-end; }
.stats-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; }
.stat-card { padding:18px 20px; display:flex; flex-direction:column; gap:8px; }
.stat-card strong { font-size: 1.9rem; }
.wan-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:14px; }
.wan-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0.92));
  padding: 16px;
}
html[data-theme="dark"] .wan-card { background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); }
.wan-card.status-online { border-left: 4px solid var(--success); }
.wan-card.status-offline { border-left: 4px solid var(--danger); }
.wan-title { font-weight: 800; font-size: 1rem; }
.wan-meta { display:grid; grid-template-columns: repeat(2, 1fr); gap:10px; }
.wan-meta span { display:block; color: var(--muted); font-size: .78rem; margin-bottom: 3px; }
.wan-meta strong { font-size: .95rem; }
.modern-table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: transparent;
  --bs-table-border-color: var(--line);
  color: var(--text);
  margin-bottom: 0;
}
.modern-table thead th {
  color: var(--muted);
  font-weight: 700;
  border-bottom-color: var(--line-strong);
  white-space: nowrap;
}
.modern-table td, .modern-table th { padding: calc(var(--row-y) + .15rem) 0.9rem; }
.table-link { color: var(--text); text-decoration: none; font-weight: 700; }
.table-link:hover { color: var(--primary); }
.app-input, .app-addon {
  background: var(--bg-elevated) !important; color: var(--text) !important; border-color: var(--line) !important;
  border-radius: 14px !important; min-height: 44px;
}
.search-shell .app-addon { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.search-shell .app-input { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.app-input::placeholder { color: #8da0bb; }
.app-input:focus { box-shadow: 0 0 0 .18rem rgba(37,99,235,.14) !important; }
.hero-btn {
  background: linear-gradient(135deg, var(--primary), var(--primary-strong));
  border: 0;
  color:#fff;
  border-radius: 14px;
  box-shadow: 0 12px 24px rgba(37,99,235,.20);
}
.soft-btn {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 14px;
}
.soft-btn:hover { background: var(--bg-soft); color: var(--text); }
.btn-danger { border-radius: 14px; }
.list-grid { display:grid; gap:10px; }
.group-item {
  display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 16px;
  border-radius:16px; border:1px solid var(--line); text-decoration:none; color:var(--text); background: var(--bg-elevated);
}
.group-item:hover { background: var(--bg-soft); }
.group-name { font-weight: 700; overflow-wrap:anywhere; }
.timeline { display:grid; gap:10px; }
.timeline-item { padding:14px 16px; background: var(--bg-elevated); border-radius:16px; border:1px solid var(--line); }
.panel-box { border:1px dashed var(--line-strong); border-radius: 18px; padding: 16px; background: var(--bg-soft); }
.segmented-control {
  display:inline-flex; padding:4px; gap:4px; background: var(--bg-soft); border:1px solid var(--line); border-radius: 999px;
}
.seg-btn {
  border:0; background:transparent; color:var(--muted); padding:8px 12px; border-radius:999px; font-weight:700;
}
.seg-btn.active { background: var(--panel); color: var(--text); box-shadow: var(--shadow); }
.alert { border-radius: 16px; }
.form-check-input { width: 2.4rem; height: 1.2rem; }
.sticky-search-shell { position: sticky; top: 12px; z-index: 10; }
@media (max-width: 1280px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 992px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { min-height: auto; }
  .sticky-search-shell { position: static; }
}
@media (max-width: 640px) {
  .stats-grid { grid-template-columns: 1fr; }
  .wan-meta { grid-template-columns: 1fr; }
  .top-toolbar { align-items:flex-start; }
}