@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Montserrat:wght@400;600;700;900&display=swap");
:root {
  --bg: #000000;
  --panel: #0a0a0a;
  --card: #0d0d0d;
  --line: #262626;
  --muted: #999999;
  --text: #ffffff;
  --green: #c8ff00;
  --cyan: #ff8c00;
  --orange: #ff8c00;
  --danger: #ff8c00;
  --corner-glow: rgba(200, 255, 0, .075);
}

.status-item[href] { color: var(--text); text-decoration: none; }
.status-item[href]:hover, .status-item[href]:focus-visible { border-color: var(--green); }

* { box-sizing: border-box; }
html, body, #root { min-height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
}
button, input { font: inherit; }
button:disabled { cursor: not-allowed; opacity: .58; }

.boot { min-height: 100vh; display: grid; place-items: center; color: var(--green); font-weight: 700; font-size: 38px; }
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: #050505; }
.login-card { width: min(430px, 94vw); border: 1px solid var(--line); border-radius: 8px; background: #0d0d0d; padding: 30px; box-shadow: 0 18px 60px rgba(0,0,0,.5); }
.badge { display: inline-flex; border: 1px solid #5a7300; color: var(--green); border-radius: 8px; padding: 6px 12px; font-weight: 700; letter-spacing: .04em; }
.login-logo { display: block; width: min(340px, 100%); height: auto; object-fit: contain; margin: 16px 0 12px; }
.login-subtitle { color: #aaaaaa; font-size: 16px; margin: 0 0 24px; }
.login-card label { display: block; margin: 14px 0 8px; color: #cccccc; font-weight: 700; }
.login-card input, .name-input { height: 38px; border-radius: 8px; border: 1px solid #333333; background: #0d0d0d; color: var(--text); padding: 0 12px; outline: none; }
.login-card input { width: 100%; }
.login-card input:focus, .name-input:focus { border-color: var(--orange); }
.login-card button { width: 100%; height: 42px; border: 0; border-radius: 8px; background: var(--orange); color: #080b10; font-weight: 700; font-size: 15px; cursor: pointer; margin-top: 18px; }
.login-error, .warning { border: 1px solid #7d5d2c; background: #1c1a14; color: #ffd386; border-radius: 8px; padding: 10px 12px; margin: 12px 0; }
.success { border: 1px solid #5a7300; background: #161d00; color: #e4ff8a; border-radius: 8px; padding: 10px 12px; margin: 12px 0; }
.login-host { text-align: center; color: #999999; margin-top: 18px; }

.layout { min-height: 100vh; display: grid; grid-template-columns: 212px minmax(0, 1fr); }
.sidebar { background: #050505; border-right: 1px solid #262626; padding: 10px; }
.sidebar-backdrop { display: none; }
.brand-block { border-bottom: 1px dashed #3a3a3a; padding: 0 4px 12px; margin-bottom: 16px; }
.brand-block img { display: block; width: 100%; max-width: 204px; height: auto; object-fit: contain; margin: 0 auto; }
.nav-title { color: #808080; font-size: 10px; letter-spacing: .18em; font-weight: 600; }
.nav-title { margin: 18px 0 8px; }
.nav-title-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0;
  background: transparent;
  padding: 0 2px;
  text-align: left;
  cursor: pointer;
}
.nav-title-toggle svg {
  transition: transform .16s ease;
}
.nav-title-toggle.open svg {
  transform: rotate(90deg);
}
.nav-group {
  display: grid;
  gap: 2px;
}
.nav { width: 100%; display: flex; gap: 10px; align-items: center; height: 34px; color: #dddddd; text-decoration: none; border: 1px solid transparent; border-radius: 6px; background: transparent; padding: 0 10px; font-weight: 400; }
.nav.active { border-color: #4a5f00; background: #161d00; }
.logout { cursor: pointer; }

.main { padding: 12px 22px 40px; overflow: hidden; }
.topbar { min-height: 54px; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.mobile-menu-button { display: none; }
.topbar h1 { font-size: 26px; line-height: 1; margin: 0; }
.topbar p { margin: 6px 0 0; color: #aaaaaa; }
.top-actions { display: flex; gap: 8px; }
.top-actions button { border: 1px solid #333333; border-radius: 6px; background: #101010; color: #eeeeee; font-weight: 700; padding: 6px 10px; }
.top-actions button { cursor: pointer; }

.app-footer { display: grid; gap: 5px; justify-items: center; margin: 18px 0 0; padding: 14px 16px; border-top: 1px solid #222222; color: #8a8a8a; font-size: 12px; font-weight: 400; line-height: 1.45; text-align: center; }
.app-footer a { color: #bbbbbb; text-decoration: none; font-weight: 500; }
.app-footer a:hover { color: #ffffff; }
.app-footer code { color: #dddddd; font: inherit; font-weight: 600; }
.version-line { color: #9a9a9a; font-weight: 400; }
.version-line.update-available { color: #ffd386; }
.version-line.update-available code { color: #ff8c00; }
.version-line.muted-version { color: #777777; }

html[data-theme="light"] {
  --bg: #eef3fb;
  --panel: #f8fafc;
  --card: #ffffff;
  --line: #d8e1ec;
  --muted: #64748b;
  --text: #111827;
  --green: #6f9500;
  --cyan: #ff8c00;
  --orange: #ff8c00;
  --danger: #d97706;
}
html[data-theme="light"] body { background: var(--bg); color: var(--text); }
html[data-theme="light"] .login-page { background: radial-gradient(circle at 50% 0, #ffffff, #eef3fb 58%); }
html[data-theme="light"] .login-card,
html[data-theme="light"] .card,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .traffic-total,
html[data-theme="light"] .traffic-row,
html[data-theme="light"] .traffic-analytics-panel,
html[data-theme="light"] .monitoring-status div,
html[data-theme="light"] .monitoring-snippet,
html[data-theme="light"] .monitoring-form label,
html[data-theme="light"] .update-version-grid div,
html[data-theme="light"] .status-item,
html[data-theme="light"] .modal-qr-panel,
html[data-theme="light"] .confirm-body,
html[data-theme="light"] .mobile-peer-card,
html[data-theme="light"] .mobile-peer-meta div,
html[data-theme="light"] .mobile-peer-network,
html[data-theme="light"] .user-hero-card,
html[data-theme="light"] .user-hero-stats div,
html[data-theme="light"] .user-peer-kpis div {
  background: #ffffff;
  border-color: var(--line);
  color: var(--text);
  box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
}
html[data-theme="light"] .backup-explain-grid div,
html[data-theme="light"] .backup-missing-note,
html[data-theme="light"] .backup-auto-meta {
  background: #f8fafc;
  border-color: #d8e1ec;
  color: #111827;
}
html[data-theme="light"] .sidebar { background: #f8fafc; border-color: var(--line); }
html[data-theme="light"] .brand-block { border-color: #cbd5e1; }
html[data-theme="light"] .nav { color: #475569; }
html[data-theme="light"] .nav:hover { background: rgba(111, 149, 0, .08); color: #111827; }
html[data-theme="light"] .nav.active { background: rgba(111, 149, 0, .12); color: #4d6900; border-right-color: #6f9500; }
html[data-theme="light"] .nav-title,
html[data-theme="light"] .nav-title-toggle,
html[data-theme="light"] .muted,
html[data-theme="light"] .topbar p,
html[data-theme="light"] .stat-label,
html[data-theme="light"] .traffic-rates small,
html[data-theme="light"] .traffic-meta,
html[data-theme="light"] .traffic-total > span,
html[data-theme="light"] .traffic-metric span,
html[data-theme="light"] .traffic-metric small,
html[data-theme="light"] .traffic-chart-head p,
html[data-theme="light"] .clients-table small,
html[data-theme="light"] .mobile-peer-head small,
html[data-theme="light"] .mobile-peer-meta span,
html[data-theme="light"] .mobile-peer-network span,
html[data-theme="light"] .mobile-peer-network small,
html[data-theme="light"] .mobile-peer-admin small,
html[data-theme="light"] .user-hero-copy p,
html[data-theme="light"] .user-hero-stats span,
html[data-theme="light"] .user-hero-stats small,
html[data-theme="light"] .user-peer-kpis span,
html[data-theme="light"] .user-peer-summary p,
html[data-theme="light"] .endpoint-host,
html[data-theme="light"] .app-footer,
html[data-theme="light"] .version-line,
html[data-theme="light"] .monitoring-status span,
html[data-theme="light"] .monitoring-snippet span {
  color: var(--muted);
}
html[data-theme="light"] .top-actions button,
html[data-theme="light"] .mobile-menu-button,
html[data-theme="light"] .copy-button,
html[data-theme="light"] .update-link-btn,
html[data-theme="light"] .confirm-cancel {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #111827;
}
html[data-theme="light"] .login-card input,
html[data-theme="light"] .name-input,
html[data-theme="light"] .inline-number,
html[data-theme="light"] .inline-password,
html[data-theme="light"] .category-select,
html[data-theme="light"] .category-create,
html[data-theme="light"] .category-create input,
html[data-theme="light"] .category-edit input,
html[data-theme="light"] .table-category-select,
html[data-theme="light"] .table-expiration-select,
html[data-theme="light"] .table-limit-select {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #111827;
}
html[data-theme="light"] .toggle-button {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #475569;
}
html[data-theme="light"] .toggle-button.on {
  background: rgba(111, 149, 0, .10);
  border-color: rgba(111, 149, 0, .45);
  color: #4d6900;
}
html[data-theme="light"] .copy-button.danger-action {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #c2410c;
}
html[data-theme="light"] .copy-button.delete-action {
  background: #fff1f2;
  border-color: #fecdd3;
  color: #be123c;
}
html[data-theme="light"] .update-state.latest,
html[data-theme="light"] .runner-pill.ready {
  background: #eef8d8;
  border-color: rgba(111, 149, 0, .45);
  color: #4d6900;
}
html[data-theme="light"] .update-state.outdated {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #c2410c;
}
html[data-theme="light"] .runner-pill.disabled {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #64748b;
}
html[data-theme="light"] code,
html[data-theme="light"] .endpoint-host code,
html[data-theme="light"] .clients-table code,
html[data-theme="light"] .mobile-peer-meta code {
  background: #f1f5f9;
  border-color: #d8e1ec;
  color: #111827;
}
html[data-theme="light"] .mobile-peer-head b,
html[data-theme="light"] .mobile-peer-meta b,
html[data-theme="light"] .mobile-peer-network b,
html[data-theme="light"] .user-hero-copy h2,
html[data-theme="light"] .user-hero-stats b,
html[data-theme="light"] .user-peer-kpis b {
  color: #111827;
}
html[data-theme="light"] .user-hero-card {
  background: radial-gradient(circle at top right, rgba(111, 149, 0, .10), transparent 42%), #ffffff;
}
html[data-theme="light"] .user-hero-stats i {
  background: #e2e8f0;
}
html[data-theme="light"] .traffic-metric,
html[data-theme="light"] .month-chart,
html[data-theme="light"] .traffic-table-wrap,
html[data-theme="light"] .raw-card pre,
html[data-theme="light"] .raw-modal pre,
html[data-theme="light"] .config-card pre,
html[data-theme="light"] .update-log-card pre {
  background: #ffffff;
  border-color: var(--line);
  color: #111827;
}
html[data-theme="light"] .peer-note-input {
  background: #ffffff;
  border-color: var(--line);
  color: #111827;
}
html[data-theme="light"] .peer-note-view {
  color: #111827;
}
html[data-theme="light"] .peer-note-meta {
  color: #64748b;
}
html[data-theme="light"] .clients-table th,
html[data-theme="light"] .traffic-data-table th,
html[data-theme="light"] .status-table th { color: #64748b; }
html[data-theme="light"] .clients-table th,
html[data-theme="light"] .clients-table td,
html[data-theme="light"] .traffic-data-table th,
html[data-theme="light"] .traffic-data-table td,
html[data-theme="light"] .status-table th,
html[data-theme="light"] .status-table td { border-color: #e2e8f0; }
html[data-theme="light"] .traffic-data-table td,
html[data-theme="light"] .traffic-data-table b,
html[data-theme="light"] .status-meta-grid span,
html[data-theme="light"] .detail-grid b { color: #111827; }
html[data-theme="light"] .traffic-bar,
html[data-theme="light"] .table-progress,
html[data-theme="light"] .limit-bar { background: #e2e8f0; }
html[data-theme="light"] .status-tracker i.idle { background: #cbd5e1; }
html[data-theme="light"] .status-tracker i.empty { background: #e2e8f0; }
html[data-theme="light"] .chart-grid-line { stroke: #d8e1ec; }
html[data-theme="light"] .chart-axis-line { stroke: #cbd5e1; }
html[data-theme="light"] .chart-axis-label,
html[data-theme="light"] .chart-date-label { fill: #64748b; }
html[data-theme="light"] .warning,
html[data-theme="light"] .login-error { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
html[data-theme="light"] .success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
html[data-theme="light"] .app-footer { border-color: #d8e1ec; }
html[data-theme="light"] .app-footer a { color: #334155; }
html[data-theme="light"] .sidebar-backdrop { background: rgba(15, 23, 42, .42); }

.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(180px, 1fr)); gap: 10px; margin: 8px 0 14px; }
.stat-card, .card { border: 1px solid var(--line); border-radius: 8px; background: #0f0f0f; }
.stat-card { height: 72px; padding: 14px 16px; position: relative; }
.stat-value { font-size: 20px; color: var(--green); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-label { color: #999999; font-size: 12px; margin-top: 8px; }
.stat-mark { position: absolute; right: 12px; top: 22px; width: 26px; height: 26px; display: grid; place-items: center; color: var(--green); border: 1px solid #5a7300; border-radius: 6px; background: #1d2600; }

.dashboard-row { display: grid; grid-template-columns: 430px minmax(0, 1fr); gap: 12px; align-items: stretch; margin-bottom: 12px; }
.dashboard-row .card { margin-bottom: 0; }
.traffic-card { min-height: 0; }
.traffic-head h2 { display: inline-flex; align-items: center; gap: 8px; }
.live-dot { height: 24px; display: inline-flex; align-items: center; border: 1px solid #5a7300; border-radius: 6px; background: #161d00; color: var(--green); padding: 0 8px; font-size: 11px; font-weight: 700; }
.live-dot.idle { border-color: #333333; background: #101010; color: #999999; }
.traffic-layout { display: grid; grid-template-columns: minmax(260px, 340px) minmax(320px, 1fr); gap: 12px; align-items: stretch; }
.traffic-total, .traffic-row { border: 1px solid #262626; border-radius: 8px; background: #0d0d0d; }
.traffic-total { min-height: 0; padding: 14px; overflow: hidden; display: grid; align-content: start; }
.traffic-status-title { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.traffic-status-title b { font-size: 14px; }
.status-orb { width: 9px; height: 9px; border-radius: 999px; background: #777777; box-shadow: 0 0 0 4px rgba(119, 119, 119, .08); }
.status-orb.live { background: var(--green); box-shadow: 0 0 0 4px rgba(200, 255, 0, .11), 0 0 18px rgba(200, 255, 0, .38); }
.status-orb.idle { background: #ff8c00; box-shadow: 0 0 0 4px rgba(255, 140, 0, .10); }
.traffic-total > span { display: block; color: #8a8a8a; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.traffic-total > strong { display: block; margin-top: 4px; font-size: 30px; line-height: 1; }
.quota-note { margin-top: 10px; color: #aaaaaa; font-size: 12px; }
.quota-note b { color: #ffffff; }
.user-hero-card { display: grid; grid-template-columns: minmax(260px, .9fr) minmax(360px, 1.4fr); gap: 12px; align-items: stretch; margin: 8px 0 12px; border: 1px solid var(--line); border-radius: 8px; background: radial-gradient(circle at top right, rgba(200, 255, 0, .08), transparent 42%), #0f0f0f; padding: 16px; }
.user-hero-copy { min-width: 0; align-self: center; }
.user-hero-copy span { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border: 1px solid #5a7300; border-radius: 6px; background: #161d00; color: var(--green); font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.user-hero-copy h2 { margin: 12px 0 8px; font-size: 28px; line-height: 1.05; }
.user-hero-copy p { max-width: 560px; margin: 0; color: #aaaaaa; line-height: 1.5; }
.user-hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.user-hero-stats div { min-width: 0; border: 1px solid #262626; border-radius: 8px; background: #0a0a0a; padding: 12px; }
.user-hero-stats span,
.user-peer-kpis span { display: block; color: #8a8a8a; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.user-hero-stats b { display: block; margin-top: 7px; color: #ffffff; font-size: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-hero-stats small { display: block; margin-top: 7px; color: #8a8a8a; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-hero-stats i { display: block; height: 5px; margin-top: 11px; overflow: hidden; border-radius: 999px; background: #1b1b1b; }
.user-hero-stats em { display: block; height: 100%; min-width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--green), #ff8c00); }
.user-dashboard-grid { display: grid; grid-template-columns: 430px minmax(0, 1fr); gap: 12px; align-items: stretch; margin-bottom: 12px; }
.user-dashboard-grid .card { margin-bottom: 0; }
.user-peer-summary { min-width: 0; }
.user-peer-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.user-peer-kpis div { min-width: 0; border: 1px solid #262626; border-radius: 8px; background: #0a0a0a; padding: 11px; }
.user-peer-kpis b { display: block; margin-top: 6px; color: #ffffff; font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-peer-summary p { margin: 14px 0 0; color: #aaaaaa; line-height: 1.5; }
.user-admin-grid { display: grid; grid-template-columns: minmax(300px, 340px) minmax(0, 1fr); gap: 12px; align-items: start; }
.user-create-card form { display: grid; gap: 10px; }
.user-create-field { display: grid; gap: 6px; min-width: 0; }
.user-create-field span { color: #8a8a8a; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.user-create-field .name-input,
.user-create-field .category-select { width: 100%; }
.users-list-card { min-width: 0; }
.users-list-card .table-wrap { overflow-x: visible; }
.users-table { width: max-content; min-width: 0; table-layout: auto; }
.users-table th,
.users-table td { padding: 8px 5px; }
.users-table th:nth-child(1), .users-table td:nth-child(1) { width: 42px; }
.users-table th:nth-child(2), .users-table td:nth-child(2) { width: 130px; }
.users-table th:nth-child(3), .users-table td:nth-child(3) { width: 112px; }
.users-table th:nth-child(4), .users-table td:nth-child(4) { width: 64px; }
.users-table th:nth-child(5), .users-table td:nth-child(5) { width: 78px; }
.users-table th:nth-child(6), .users-table td:nth-child(6) { width: 185px; }
.users-table th:nth-child(7), .users-table td:nth-child(7) { width: 130px; }
.users-table th:nth-child(8), .users-table td:nth-child(8) { width: 70px; }
.users-table .inline-number { width: 58px; height: 28px; }
.users-table .user-traffic-limit-cell { min-width: 0; }
.users-table .traffic-limit-cell { gap: 3px; }
.users-table .user-expiration-cell { display: grid; gap: 3px; min-width: 0; }
.users-table .user-expiration-cell .table-expiration-select { width: 116px; }
.compact-manual-limit { width: 86px !important; height: 26px !important; padding: 0 7px; }
.manual-policy-row { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.manual-policy-row label { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
.tiny-action-btn { height: 26px; padding: 0 7px; border-radius: 6px; border: 1px solid rgba(200, 255, 0, .35); background: rgba(200, 255, 0, .12); color: var(--green); font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; }
.tiny-action-btn:disabled { opacity: .55; cursor: default; }
html[data-theme="light"] .tiny-action-btn { border-color: #a3c900; background: #eef8d8; color: #5d7f00; }
.users-table td.actions-cell { width: 172px; min-width: 172px; overflow: visible; }
.users-table .user-password-row { display: grid; grid-template-columns: 126px 22px; width: 153px; gap: 5px; }
.users-table .inline-password { width: 126px; min-width: 0; flex: 0 0 126px; box-sizing: border-box; }
.audit-filter-card { margin-bottom: 12px; }
.audit-filters { display: grid; grid-template-columns: 120px repeat(3, minmax(160px, 1fr)) auto; gap: 10px; align-items: end; }
.audit-filters label { display: grid; gap: 7px; }
.audit-filters label span { color: #8a8a8a; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.audit-table { width: 1180px; min-width: 1180px; }
.audit-action { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 8px; border: 1px solid rgba(200, 255, 0, .42); border-radius: 5px; background: rgba(200, 255, 0, .08); color: var(--green); font-weight: 800; }
.audit-details-row td { padding: 0 8px 10px !important; background: #080808; white-space: normal; }
.audit-details-row pre { margin: 0; max-height: 260px; overflow: auto; border: 1px solid #262626; border-radius: 8px; background: #050505; color: #d7d7d7; padding: 12px; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.backup-hero-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: start; }
.backup-hero-card h2 { margin-bottom: 8px; }
.backup-hero-card .success,
.backup-hero-card .warning { grid-column: 1 / -1; }
.backup-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.backup-explain-grid { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: 10px; margin-top: 14px; }
.backup-explain-grid div,
.backup-missing-note { border: 1px solid #262626; border-radius: 8px; background: #0d0d0d; padding: 12px; }
.backup-explain-grid span { display: block; color: #8a8a8a; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 7px; }
.backup-explain-grid b { display: block; margin-bottom: 6px; }
.backup-explain-grid small { color: #8a8a8a; line-height: 1.45; }
.backup-missing-note { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; color: #8a8a8a; }
.backup-missing-note b { color: #ffffff; }
.backup-auto-card { display: grid; gap: 14px; }
.backup-auto-card .section-head { align-items: start; }
.backup-auto-card .section-head p { margin: 5px 0 0; }
.backup-auto-grid { display: grid; grid-template-columns: 170px minmax(170px, 1fr) 170px minmax(190px, 1fr) minmax(190px, 1fr) auto; gap: 10px; align-items: end; }
.backup-auto-grid label,
.backup-auto-meta { display: grid; gap: 7px; min-width: 0; }
.backup-auto-grid label span,
.backup-auto-meta span { color: #8a8a8a; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.backup-auto-meta { min-height: 52px; border: 1px solid #262626; border-radius: 8px; background: #0d0d0d; padding: 9px 11px; }
.backup-auto-meta b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.backup-auto-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.toggle-button { height: 36px; border: 1px solid #333333; border-radius: 8px; background: #101010; color: #bdbdbd; padding: 0 12px; font-weight: 800; cursor: pointer; }
.toggle-button.on { border-color: #5a7300; background: #161d00; color: var(--green); }
.backup-table { width: 1020px; min-width: 1020px; }
.backup-name { display: block; max-width: 430px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.backup-row-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.copy-button.danger-action { color: #ffb35c; border-color: #7a4d00; background: #2a1d00; }
.copy-button.delete-action { color: #ff5c7a; border-color: #6b2735; background: #230c12; }
.inline-number { width: 82px; height: 30px; border: 1px solid #333333; border-radius: 6px; background: #0d0d0d; color: #ffffff; padding: 0 8px; }
.inline-password { width: 120px; height: 28px; border: 1px solid #333333; border-radius: 6px; background: #0d0d0d; color: #ffffff; padding: 0 8px; }
.user-actions { display: grid; gap: 5px; align-items: start; }
.user-action-buttons,
.user-password-row { display: flex; align-items: center; gap: 5px; min-width: 0; }
.user-password-row .inline-password { min-width: 0; flex: 1 1 auto; }
.owner-badge { display: inline-flex; align-items: center; max-width: 100%; height: 23px; padding: 0 7px; border: 1px solid #333333; border-radius: 6px; background: #101010; color: #dddddd; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.traffic-rates { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 16px; }
.traffic-rates div { display: grid; gap: 4px; }
.traffic-rates small, .traffic-meta { color: #8a8a8a; }
.traffic-rates b { font-size: 14px; }
.traffic-chart { width: 100%; height: 66px; margin-top: 12px; display: block; }
.traffic-chart polygon { fill: rgba(200, 255, 0, .15); }
.traffic-chart polyline { fill: none; stroke: var(--green); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.status-tracker { display: grid; grid-template-columns: repeat(36, minmax(3px, 1fr)); gap: 3px; margin-top: 14px; }
.status-tracker i { height: 28px; border-radius: 3px; background: #242424; display: block; }
.status-tracker i.live { background: linear-gradient(180deg, #d7ff2f, #8aa800); box-shadow: 0 0 10px rgba(200, 255, 0, .18); }
.status-tracker i.live.rx { background: linear-gradient(180deg, #d7ff2f, #8aa800); box-shadow: 0 0 10px rgba(200, 255, 0, .22); }
.status-tracker i.live.tx { background: linear-gradient(180deg, #ffb35c, #ff8c00); box-shadow: 0 0 10px rgba(255, 140, 0, .22); }
.status-tracker i.live.both { box-shadow: 0 0 10px rgba(200, 255, 0, .16), 0 0 12px rgba(255, 140, 0, .16); }
.status-tracker i.idle { background: #343434; }
.status-tracker i.empty { background: #171717; }
.status-tracker i.down { background: #792323; }
.traffic-color-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; color: #999999; font-size: 11px; }
.traffic-color-legend span { display: inline-flex; align-items: center; gap: 6px; }
.traffic-color-legend i { width: 8px; height: 8px; border-radius: 999px; display: inline-block; }
.traffic-color-legend i.rx { background: var(--green); box-shadow: 0 0 10px rgba(200, 255, 0, .22); }
.traffic-color-legend i.tx { background: #ff8c00; box-shadow: 0 0 10px rgba(255, 140, 0, .22); }
.tracker-scale { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; color: #777777; font-size: 11px; }
.traffic-interfaces { display: grid; gap: 10px; align-content: start; }
.traffic-row { display: block; padding: 12px; color: inherit; text-decoration: none; cursor: pointer; }
.traffic-row:hover { border-color: #5a7300; background: #111111; }
.traffic-row-top { display: grid; grid-template-columns: minmax(110px, 1fr) auto auto; align-items: center; gap: 12px; }
.traffic-row-top b { justify-self: end; }
.traffic-proto { font-weight: 700; }
.traffic-proto.wg { color: #ff8c00; }
.traffic-proto.awg { color: #ff8c00; }
.traffic-state { height: 22px; display: inline-flex; align-items: center; justify-content: center; padding: 0 7px; border-radius: 999px; border: 1px solid #333333; color: #999999; font-size: 10px; font-weight: 800; letter-spacing: .06em; }
.traffic-state.live { border-color: #5a7300; background: #161d00; color: var(--green); }
.traffic-state.idle { border-color: #4a3a1f; background: #1d1608; color: #ffb35c; }
.traffic-state.down { border-color: #6b2735; background: #230c12; color: #ff6b8b; }
.traffic-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; font-size: 12px; }
.traffic-bar { height: 7px; margin-top: 12px; border-radius: 999px; overflow: hidden; background: #0a0a0a; }
.traffic-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8aa800, #c8ff00); }
.traffic-row .status-tracker { grid-template-columns: repeat(36, minmax(2px, 1fr)); gap: 2px; margin-top: 10px; }
.traffic-row .status-tracker i { height: 14px; border-radius: 2px; }

.traffic-page-card { min-height: calc(100vh - 96px); }
.traffic-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(180px, 1fr)); gap: 12px; margin-bottom: 12px; }
.traffic-metric { border: 1px solid #262626; border-radius: 8px; background: linear-gradient(180deg, #111111, #0d0d0d); padding: 14px; display: grid; gap: 6px; min-height: 92px; }
.traffic-metric span { color: #8a8a8a; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.traffic-metric b { font-size: 25px; line-height: 1; letter-spacing: 0; }
.traffic-metric small { color: #8a8a8a; font-size: 12px; }
.traffic-analytics-panel { border: 1px solid #262626; border-radius: 8px; background: #0d0d0d; padding: 16px; margin-bottom: 12px; }
.traffic-chart-head { align-items: flex-start; }
.traffic-chart-head h2 { margin: 0; font-size: 18px; }
.traffic-chart-head p { margin: 5px 0 0; color: #8a8a8a; font-size: 12px; }
.traffic-legend { display: inline-flex; align-items: center; gap: 14px; color: #cccccc; font-size: 12px; font-weight: 700; }
.traffic-legend span { display: inline-flex; align-items: center; gap: 7px; }
.traffic-legend i { width: 9px; height: 9px; border-radius: 999px; display: inline-block; }
.rx-dot { background: var(--green); box-shadow: 0 0 12px rgba(200, 255, 0, .45); }
.tx-dot { background: #ff8c00; box-shadow: 0 0 12px rgba(255, 140, 0, .42); }
.month-chart { height: 390px; overflow-x: auto; overflow-y: hidden; border-radius: 8px; background: radial-gradient(circle at 45% 0, rgba(200, 255, 0, .05), transparent 34%), #0a0a0a; border: 1px solid #1f1f1f; }
.month-chart svg { min-width: 840px; width: 100%; height: 100%; display: block; }
.chart-grid-line { stroke: #242424; stroke-width: 1; stroke-dasharray: 4 6; }
.chart-axis-line { stroke: #343434; stroke-width: 1; }
.chart-axis-label, .chart-date-label { fill: #8a8a8a; font-size: 12px; font-family: inherit; }
.chart-date-label { font-size: 11px; }
.chart-rx-bar { fill: #c8ff00; opacity: .92; }
.chart-tx-bar { fill: #ff8c00; opacity: .86; }
.chart-empty-bar { fill: #333333; }
.month-bar rect { transition: opacity .15s ease, filter .15s ease; }
.month-bar:hover rect { opacity: 1; filter: drop-shadow(0 0 8px rgba(200, 255, 0, .38)); }
.traffic-table-wrap { overflow-x: auto; border: 1px solid #1f1f1f; border-radius: 8px; background: #0a0a0a; }
.traffic-data-table { width: 100%; min-width: 720px; border-collapse: collapse; }
.traffic-data-table th, .traffic-data-table td { padding: 11px 12px; border-bottom: 1px solid #202020; text-align: left; white-space: nowrap; }
.traffic-data-table th { color: #8a8a8a; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.traffic-data-table td { color: #d7d7d7; }
.traffic-data-table tr:last-child td { border-bottom: 0; }
.traffic-data-table b { color: #ffffff; }
.table-progress { width: 170px; height: 7px; border-radius: 999px; background: #151515; overflow: hidden; }
.table-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff8c00, #c8ff00); }
.traffic-note { color: #8a8a8a; margin: 10px 0 0; }
.card { padding: 18px 20px; margin-bottom: 12px; }
.card h2 { margin: 0 0 18px; font-size: 19px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.section-head h2 { margin: 0; }

.create-card { min-height: 0; }
.compact-create { width: 430px; max-width: 100%; }
.create-card form { display: grid; align-items: start; gap: 12px; }
.name-input { width: 260px; max-width: 100%; }
.category-select { min-width: 0; height: 32px; border: 1px solid #2e2e2e; border-radius: 7px; background: #0a0a0a; color: #dddddd; font: inherit; font-size: 12px; outline: none; }
.category-select:focus { border-color: #c8ff00; box-shadow: 0 0 0 2px rgba(200, 255, 0, .12); }
.create-category-select { width: 260px; max-width: 100%; padding: 0 10px; }
.compact-custom-input { width: 170px; height: 32px; padding: 0 10px; }
.protocol-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.protocol-row input { accent-color: #c8ff00; }
.orange-btn { width: fit-content; min-width: 176px; height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 8px; background: var(--orange); color: #080b10; font-weight: 700; font-size: 14px; cursor: pointer; padding: 0 16px; }
.orange-btn:disabled { opacity: 1; background: #ff8c00; color: #080b10; cursor: not-allowed; }
.muted { color: #8a8a8a; }
.pill { font-size: 10px; padding: 2px 6px; border-radius: 4px; margin-left: 4px; }
.pill.bad { background: #2a1d00; color: #ffcf99; }
.compact-warning { display: inline-block; max-width: 340px; margin-top: 10px; padding: 8px 10px; font-size: 12px; line-height: 1.35; }
.compact-warning b { display: block; margin-bottom: 3px; line-height: 1.35; }
.endpoint-host { color: #999999; margin-top: 8px; }
.endpoint-host code, .clients-table code { background: #070707; border: 1px solid #262626; border-radius: 4px; padding: 2px 6px; color: #fff; }

.category-panel { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 12px; }
.category-filters { display: flex; flex-wrap: wrap; gap: 7px; min-width: 0; }
.category-item { height: 30px; display: inline-flex; align-items: center; overflow: hidden; border: 1px solid #2e2e2e; border-radius: 7px; background: #0a0a0a; }
.category-chip { height: 30px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid #2e2e2e; border-radius: 7px; background: #0a0a0a; color: #bbbbbb; font-weight: 600; font-size: 12px; cursor: pointer; padding: 0 10px; }
.category-item .category-chip { border: 0; border-radius: 0; background: transparent; }
.category-chip span { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 5px; background: #1a1a1a; color: #eeeeee; font-size: 11px; }
.category-chip.active { border-color: #5a7300; background: #161d00; color: #ffffff; }
.category-item.active { border-color: #5a7300; background: #161d00; }
.category-item.active .category-chip { color: #ffffff; }
.category-chip.active span { background: #3c4d00; color: #e4ff8a; }
.category-item.active .category-chip span { background: #3c4d00; color: #e4ff8a; }
.category-tool { width: 28px; height: 30px; display: grid; place-items: center; border: 0; border-left: 1px solid #2e2e2e; background: transparent; color: #999999; cursor: pointer; }
.category-tool:hover { color: #ffffff; background: #161616; }
.category-tool.save { color: var(--green); }
.category-tool.danger { color: #ffb35c; }
.category-tool:disabled { opacity: .45; cursor: wait; }
.category-edit { height: 30px; display: inline-flex; align-items: center; }
.category-edit input { width: 150px; height: 30px; border: 0; background: transparent; color: #ffffff; font: inherit; font-size: 12px; font-weight: 600; outline: none; padding: 0 8px; }
.category-create { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; min-width: 300px; height: 34px; border: 1px solid #2e2e2e; border-radius: 8px; background: #0a0a0a; padding: 0 6px 0 9px; color: #8a8a8a; }
.category-create input { width: 150px; height: 26px; border: 0; background: transparent; color: #ffffff; outline: none; }
.category-create button { height: 26px; border: 0; border-radius: 6px; background: #1d2600; color: var(--green); font-weight: 700; cursor: pointer; padding: 0 10px; }
.category-create button:disabled { opacity: .45; cursor: not-allowed; }
.table-wrap { width: 100%; overflow-x: auto; overflow-y: visible; }
.clients-table { width: 100%; min-width: 1180px; table-layout: fixed; border-collapse: collapse; font-size: 12px; }
.clients-table th, .clients-table td { border-bottom: 1px solid #262626; padding: 7px 5px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.clients-table th { color: #999999; text-transform: uppercase; font-size: 10px; letter-spacing: .05em; }
.clients-table td:first-child, .clients-table th:first-child { padding-left: 6px; }
.clients-table small { display: block; color: #8a8a8a; margin-top: 3px; font-size: 10px; line-height: 1.2; }
.clients-table .category-select { height: 28px; font-size: 11px; border-radius: 6px; }
.proto { display: inline-block; background: #052b31; color: #00e7ff; border: 1px solid #086f78; border-radius: 5px; padding: 4px 7px; font-weight: 700; font-size: 11px; }
.proto-wireguard { background: #2b0d17; color: #ff5b7b; border-color: #7c1d36; }
.policy-cell { display: grid; gap: 4px; min-width: 0; }
.policy-selects { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5px; }
.policy-selects .category-select { width: 100%; min-width: 0; padding: 0 8px; }
.policy-cell small { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0; }
.policy-cell small span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.network-cell { display: grid; gap: 3px; min-width: 0; }
.network-cell b { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.network-cell small { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.traffic-cell { display: grid; gap: 3px; justify-items: start; }
.traffic-cell span { display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.traffic-cell b { color: #8a8a8a; font-size: 10px; }
.expiration-cell { display: grid; gap: 4px; }
.table-expiration-select { width: 100%; padding: 0 7px; }
.expiration-cell small { margin: 0; }
.traffic-limit-cell { display: grid; gap: 4px; }
.table-limit-select { width: 100%; padding: 0 7px; }
.traffic-limit-cell small { margin: 0; }
.user-traffic-limit-cell { min-width: 145px; }
.limit-bar { display: block; width: 100%; height: 5px; overflow: hidden; border-radius: 999px; background: #1b1b1b; }
.limit-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green), #ff8c00); }
.limit-bar.exceeded i { background: #ff5b7b; }
.expiration-soon { color: #ffd386 !important; }
.expiration-bad { color: #ff5b7b !important; }
.active-text { color: var(--green); font-weight: 700; }
.blocked-text { color: var(--danger); font-weight: 700; }
.clients-table:not(.users-table) td.actions-cell { width: 126px; min-width: 126px; overflow: visible; padding: 5px; }
.clickable-row { cursor: pointer; transition: background .15s ease; }
.clickable-row:hover { background: rgba(255, 255, 255, .025); }
.clickable-row:focus-visible { outline: 1px solid var(--green); outline-offset: -1px; }
.table-category-select { width: 100%; padding: 0 7px; }
.empty-table { text-align: center !important; color: #8a8a8a; padding: 18px 8px !important; }
.actions { display: flex; gap: 3px; align-items: center; justify-content: flex-start; flex-wrap: nowrap; }
.mobile-peer-list { display: none; }
.mobile-peer-card { border: 1px solid #262626; border-radius: 8px; background: #0d0d0d; padding: 12px; }
.clickable-card { cursor: pointer; transition: border-color .15s ease, transform .15s ease; }
.clickable-card:hover { border-color: #3b3b3b; transform: translateY(-1px); }
.clickable-card:focus-visible { outline: 1px solid var(--green); outline-offset: 2px; }
.mobile-peer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.mobile-peer-head b { display: block; color: #ffffff; font-size: 15px; overflow-wrap: anywhere; }
.mobile-peer-head small { display: block; margin-top: 3px; color: #8a8a8a; font-size: 11px; }
.mobile-peer-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mobile-peer-meta div,
.mobile-peer-network { min-width: 0; border: 1px solid #222222; border-radius: 7px; background: #080808; padding: 9px; }
.mobile-peer-meta span,
.mobile-peer-network span { display: block; margin-bottom: 5px; color: #8a8a8a; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.mobile-peer-meta b,
.mobile-peer-network b { display: block; min-width: 0; color: #ffffff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-peer-meta code { display: inline-flex; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-peer-network { margin-top: 8px; }
.mobile-peer-network small { display: block; margin-top: 5px; color: #8a8a8a; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-peer-admin { display: grid; gap: 7px; margin-top: 8px; }
.mobile-peer-admin .category-select { width: 100%; height: 32px; font-size: 12px; }
.mobile-peer-admin small { display: flex; gap: 8px; min-width: 0; color: #8a8a8a; font-size: 11px; }
.mobile-peer-admin small span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-peer-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mobile-peer-actions .icon-button { width: 30px; height: 30px; }
.mobile-empty { border: 1px dashed #333333; border-radius: 8px; padding: 18px; color: #8a8a8a; text-align: center; }
.icon-button { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; box-sizing: border-box; line-height: 1; vertical-align: middle; border-radius: 5px; border: 1px solid transparent; text-decoration: none; cursor: pointer; }
.icon-button svg { display: block; flex: 0 0 auto; width: 14px; height: 14px; stroke-width: 2.25; }
.icon-button.open { background: #ff8c00; color: #111; }
.icon-button.download { background: #2a1d00; border-color: #7a4d00; color: #ff8c00; }
.icon-button.download-vpn { background: #00272b; border-color: #007b86; color: #22d3c5; }
.icon-button.qr { background: #1d2600; border-color: #5a7300; color: var(--green); }
.icon-button.block { background: #2a1e0d; border-color: #8f5b13; color: #ffb44a; }
.icon-button.enable { background: #161d00; border-color: #5a7300; color: var(--green); }
.icon-button.reset { background: #1b1b1b; border-color: #3a3a3a; color: #d7ff2f; }
.icon-button.danger { background: #2a1d00; border-color: #7a4d00; color: #ffb35c; }
.icon-button.ghost { background: #0d0d0d; border-color: #262626; color: #cccccc; }
.icon-button:hover { filter: brightness(1.12); }
.icon-button:disabled { cursor: wait; opacity: .48; filter: grayscale(.25); }
.blocked-text { color: #ffb44a; font-weight: 700; }
.status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.status-item { border: 1px solid #262626; border-radius: 8px; padding: 12px; background: #0d0d0d; }
.status-item b { display: block; margin-bottom: 8px; }
.status-item small { display: block; margin-top: 8px; color: #8a8a8a; font-size: 12px; line-height: 1.35; }
.status-ok, .status-bad { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.status-ok { color: var(--green); }
.status-bad { color: var(--danger); }

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 50;
    width: min(280px, 86vw);
    transform: translateX(-105%);
    transition: transform .18s ease;
    box-shadow: 22px 0 60px rgba(0, 0, 0, .45);
    overflow-y: auto;
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 45;
    border: 0;
    background: rgba(0, 0, 0, .54);
    cursor: pointer;
  }
  .mobile-menu-button {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 34px;
    flex: 0 0 auto;
    border: 1px solid #333333;
    border-radius: 7px;
    background: #101010;
    color: #eeeeee;
    cursor: pointer;
  }
  .topbar { align-items: flex-start; gap: 10px; }
  .topbar h1 { font-size: 22px; line-height: 1.12; }
  .topbar p { font-size: 12px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .dashboard-row { grid-template-columns: 1fr; }
  .traffic-layout { grid-template-columns: 1fr; }
  .traffic-kpi-grid { grid-template-columns: 1fr 1fr; }
  .user-hero-card,
  .user-dashboard-grid { grid-template-columns: 1fr; }
  .user-hero-stats { grid-template-columns: 1fr; }
  .month-chart { height: 320px; }
  .main { padding: 12px; }
  .create-card form { align-items: stretch; }
  .compact-create { width: 100%; }
  .name-input { width: 100%; }
  .create-category-select { width: 100%; }
  .category-panel { align-items: stretch; flex-direction: column; }
  .category-create { min-width: 0; width: 100%; }
  .category-create input { width: 100%; }
  .orange-btn { width: fit-content; }
  .user-admin-grid { grid-template-columns: 1fr; }
  .user-actions { flex-wrap: wrap; }
  .clients-card .table-wrap { display: none; }
  .mobile-peer-list { display: grid; gap: 10px; }
}

.detail-card { min-height: 0; }
.detail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.back-link { display: inline-flex; align-items: center; gap: 5px; color: #dddddd; font-weight: 700; text-decoration: none; }
.detail-grid { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 12px; }
.detail-grid div { display: grid; gap: 7px; }
.detail-grid span { color: #8a8a8a; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.detail-grid b { color: #ffffff; }
.peer-hero-card { border-color: rgba(200, 255, 0, .16); background: linear-gradient(145deg, rgba(13, 13, 13, .98), rgba(9, 14, 13, .98)); }
.peer-hero-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.peer-hero-grid { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(260px, 340px); gap: 12px; align-items: stretch; margin-bottom: 14px; }
.peer-identity { min-height: 128px; display: flex; flex-direction: column; justify-content: center; gap: 12px; border: 1px solid #262626; border-radius: 8px; background: #0d0d0d; padding: 18px; }
.peer-identity h2 { margin: 0; font-size: 28px; line-height: 1.1; }
.peer-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: #bbbbbb; font-size: 12px; }
.peer-badges span { display: inline-flex; min-height: 28px; align-items: center; border: 1px solid #262626; border-radius: 7px; background: #090909; padding: 0 10px; }
.protocol-badge { font-weight: 800; }
.protocol-badge.awg { border-color: #086f78; background: #052b31; color: #00e7ff; }
.protocol-badge.wg { border-color: #7c1d36; background: #2b0d17; color: #ff5b7b; }
.peer-live-card { display: grid; align-content: center; gap: 8px; border: 1px solid #2f3f0a; border-radius: 8px; background: radial-gradient(circle at top right, rgba(200, 255, 0, .12), transparent 42%), #0d0d0d; padding: 18px; }
.peer-live-card span, .peer-live-card small { color: #8a8a8a; font-size: 12px; }
.peer-live-card b { color: #ffffff; font-size: 22px; line-height: 1.15; }
.peer-detail-grid { grid-template-columns: repeat(3, minmax(190px, 1fr)); }
.peer-diagnostics-card { margin-top: 12px; }
.qr-grid { display: grid; grid-template-columns: repeat(2, minmax(280px, 390px)); gap: 12px; align-items: start; margin-bottom: 12px; }
.peer-note-card { margin-bottom: 12px; }
.peer-note-input { width: 100%; min-height: 92px; resize: vertical; border: 1px solid #262626; border-radius: 8px; background: #070707; color: #ffffff; padding: 12px; font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.peer-note-input:focus { outline: none; border-color: #5a7300; box-shadow: 0 0 0 3px rgba(200, 255, 0, .08); }
.peer-note-view { margin: 0; min-height: 52px; color: #d7d7d7; white-space: pre-wrap; line-height: 1.5; }
.peer-note-meta { margin-top: 8px; color: #8a8a8a; font-size: 12px; text-align: right; }
.qr-card { min-height: 0; }
.qr-card h2 { margin-bottom: 8px; font-size: 17px; }
.qr-card p { min-height: 36px; margin: 0 0 12px; color: #8a8a8a; font-size: 12px; line-height: 1.45; }
.qr-image { display: block; width: 260px; max-width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 6px; padding: 8px; }
.qr-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.orange-btn.small, .blue-btn.small { min-width: 0; height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 7px; padding: 0 12px; font-size: 12px; font-weight: 700; text-decoration: none; }
.blue-btn { background: #2a1d00; border: 1px solid #7a4d00; color: #ff8c00; cursor: pointer; }
.config-card pre { max-height: 460px; overflow: auto; margin: 0; padding: 14px; border: 1px solid #222222; border-radius: 8px; background: #070707; color: #ffffff; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.copy-button { height: 30px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #262626; border-radius: 7px; background: #0d0d0d; color: #cccccc; font-weight: 700; cursor: pointer; padding: 0 10px; }

@media (max-width: 1100px) {
  .detail-grid { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
  .peer-hero-grid { grid-template-columns: 1fr; }
  .peer-detail-grid { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
  .qr-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .detail-head { align-items: stretch; flex-direction: column; }
  .peer-hero-actions { justify-content: flex-start; }
  .peer-identity { min-height: 0; padding: 14px; }
  .peer-identity h2 { font-size: 22px; overflow-wrap: anywhere; }
  .peer-detail-grid { grid-template-columns: 1fr; }
}

.modal-backdrop { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 24px; background: rgba(3, 7, 12, .72); backdrop-filter: blur(5px); }
.modal-card { width: min(780px, 94vw); border: 1px solid #262626; border-radius: 8px; background: #0f0f0f; box-shadow: 0 24px 80px rgba(0,0,0,.55); padding: 16px; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.modal-head h2 { margin: 0 0 4px; font-size: 18px; }
.modal-head p { margin: 0; color: #8a8a8a; font-size: 12px; }
.modal-close { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #262626; border-radius: 6px; background: #0d0d0d; color: #dddddd; cursor: pointer; }
.modal-qr-image { display: block; width: 260px; max-width: 100%; aspect-ratio: 1; object-fit: contain; margin: 0 auto; padding: 8px; border-radius: 6px; background: #fff; }
.modal-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.confirm-modal { width: min(460px, 94vw); padding: 18px; }
.confirm-modal.block { border-color: rgba(255, 180, 74, .38); box-shadow: 0 24px 80px rgba(0,0,0,.58), 0 0 0 1px rgba(255,180,74,.05) inset; }
.confirm-modal.enable { border-color: rgba(200, 255, 0, .34); box-shadow: 0 24px 80px rgba(0,0,0,.58), 0 0 0 1px rgba(200,255,0,.05) inset; }
.confirm-modal.danger { border-color: rgba(255, 140, 0, .42); box-shadow: 0 24px 80px rgba(0,0,0,.58), 0 0 0 1px rgba(255,107,134,.06) inset; }
.confirm-body { border: 1px solid #262626; border-radius: 8px; background: #0d0d0d; padding: 14px; }
.confirm-body strong { display: block; font-size: 15px; line-height: 1.35; }
.confirm-body p { margin: 8px 0 0; color: #999999; font-size: 13px; line-height: 1.45; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.confirm-actions button { height: 34px; border-radius: 7px; padding: 0 14px; font-weight: 700; cursor: pointer; }
.confirm-cancel { border: 1px solid #333333; background: #0d0d0d; color: #dddddd; }
.confirm-submit { border: 1px solid transparent; color: #081017; }
.confirm-submit.block { background: #ffb44a; border-color: #b87318; }
.confirm-submit.enable { background: var(--green); border-color: #5a7300; }
.confirm-submit.danger { background: #ff8c00; border-color: #b86a00; }
.confirm-actions button:disabled { cursor: wait; opacity: .62; }
.toast-stack { position: fixed; top: 16px; right: 16px; z-index: 140; display: grid; gap: 8px; width: min(360px, calc(100vw - 32px)); pointer-events: none; }
.toast-item { position: relative; min-width: 0; border: 1px solid #333333; border-radius: 8px; background: #101010; color: #ffffff; padding: 12px 38px 12px 12px; box-shadow: 0 18px 50px rgba(0,0,0,.35); pointer-events: auto; animation: toast-in .16s ease-out; }
.toast-item b { display: block; margin-bottom: 4px; font-size: 13px; }
.toast-item span { display: block; color: #cfcfcf; font-size: 12px; line-height: 1.35; }
.toast-item button { position: absolute; top: 9px; right: 9px; width: 22px; height: 22px; border: 1px solid #333333; border-radius: 5px; background: #0a0a0a; color: #d7d7d7; display: grid; place-items: center; cursor: pointer; }
.toast-item.success { border-color: rgba(200, 255, 0, .42); box-shadow: 0 18px 50px rgba(0,0,0,.35), inset 3px 0 0 var(--green); }
.toast-item.error { border-color: rgba(255, 91, 123, .50); box-shadow: 0 18px 50px rgba(0,0,0,.35), inset 3px 0 0 #ff5b7b; }
.toast-item.info { border-color: rgba(255, 140, 0, .45); box-shadow: 0 18px 50px rgba(0,0,0,.35), inset 3px 0 0 var(--orange); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.modal-qr-grid { display: grid; grid-template-columns: repeat(2, minmax(260px, 1fr)); gap: 12px; }
.modal-qr-panel { border: 1px solid #262626; border-radius: 8px; background: #0d0d0d; padding: 12px; }
.modal-qr-panel h3 { margin: 0 0 5px; font-size: 15px; }
.modal-qr-panel p { min-height: 34px; margin: 0 0 10px; color: #8a8a8a; font-size: 12px; line-height: 1.4; }
@media (max-width: 720px) {
  .modal-qr-grid { grid-template-columns: 1fr; }
}

.peer-diag { display: grid; gap: 12px; }
.peer-diag-summary { display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr)); gap: 10px; }
.peer-diag-summary div { border: 1px solid #262626; border-radius: 8px; background: #0d0d0d; padding: 12px; }
.peer-diag-summary span { display: block; color: #8a8a8a; font-size: 11px; font-weight: 900; letter-spacing: .08em; margin-bottom: 6px; }
.peer-diag-summary b { display: block; font-size: 28px; line-height: 1; }
.peer-diag-summary .ok b { color: var(--green); }
.peer-diag-summary .warn b { color: #ff8c00; }
.peer-diag-summary .fail b { color: #ff4d6d; }
.peer-diag-list { display: grid; gap: 8px; }
.peer-diag-check { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: center; border: 1px solid #262626; border-radius: 8px; background: #0d0d0d; padding: 10px 12px; }
.peer-diag-check > span { height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 11px; font-weight: 900; }
.peer-diag-check b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peer-diag-check small { display: block; margin-top: 4px; color: #8a8a8a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peer-diag-check.ok { border-color: rgba(200, 255, 0, .22); }
.peer-diag-check.ok > span { background: rgba(200, 255, 0, .10); border: 1px solid rgba(200, 255, 0, .35); color: var(--green); }
.peer-diag-check.warn { border-color: rgba(255, 140, 0, .34); }
.peer-diag-check.warn > span { background: rgba(255, 140, 0, .10); border: 1px solid rgba(255, 140, 0, .35); color: #ff8c00; }
.peer-diag-check.fail { border-color: rgba(255, 77, 109, .42); }
.peer-diag-check.fail > span { background: rgba(255, 77, 109, .10); border: 1px solid rgba(255, 77, 109, .42); color: #ff4d6d; }

.status-hero { display: grid; grid-template-columns: minmax(420px, 1.2fr) minmax(320px, .8fr); gap: 12px; align-items: stretch; margin-bottom: 12px; }
.status-summary-card { min-height: 176px; }
.status-summary-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.status-summary-head h2 { margin: 4px 0 0; font-size: 24px; }
.eyebrow { color: #8a8a8a; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.status-pill { height: 30px; display: inline-flex; align-items: center; gap: 6px; border-radius: 7px; padding: 0 10px; font-weight: 700; font-size: 12px; }
.status-pill.online { border: 1px solid #5a7300; background: #161d00; color: var(--green); }
.status-pill.warn { border: 1px solid #7a4d00; background: #2a1d00; color: #ff8c00; }
.status-pill.offline { border: 1px solid #6e2c3f; background: #22101a; color: var(--danger); }
.status-pill.disabled { border: 1px solid #3a3a3a; background: #151515; color: #8a8a8a; }
.status-meta-grid { display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: 12px; }
.status-meta-grid div { display: grid; gap: 7px; }
.status-meta-grid span { color: #8a8a8a; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.status-kpis { display: grid; grid-template-columns: 1fr; gap: 10px; }
.protocol-port-card { margin-bottom: 12px; }
.protocol-port-card .section-head p { margin: 4px 0 0; color: #8a8a8a; font-size: 13px; line-height: 1.4; }
.fornex-ports {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  background: #0b0b0b;
  margin: 12px 0;
}
.fornex-ports span { color: #8a8a8a; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.fornex-ports code { color: var(--green); white-space: normal; line-height: 1.45; }
.protocol-port-form {
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(150px, 190px) max-content;
  gap: 10px;
  align-items: end;
}
.protocol-port-form label { display: grid; gap: 6px; color: #8a8a8a; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.protocol-port-form input {
  height: 38px;
  padding: 0 11px;
  border-radius: 8px;
  border: 1px solid #303030;
  background: #090909;
  color: #fff;
  outline: none;
}
.protocol-port-form input:focus { border-color: var(--orange); }
.status-table { width: 1090px; min-width: 1090px; table-layout: fixed; border-collapse: collapse; font-size: 13px; }
.status-table th, .status-table td { border-bottom: 1px solid #262626; padding: 9px 8px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-table th { color: #999999; text-transform: uppercase; font-size: 11px; letter-spacing: .06em; }
.raw-card pre { max-height: 360px; overflow: auto; margin: 0; padding: 14px; border: 1px solid #222222; border-radius: 8px; background: #070707; color: #ffffff; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
@media (max-width: 1100px) {
  .status-hero { grid-template-columns: 1fr; }
  .status-kpis { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
  .protocol-port-form { grid-template-columns: 1fr; }
}

.compact-raw-card pre { max-height: 180px; }
.raw-modal { width: min(980px, 94vw); }
.raw-modal pre { max-height: 70vh; overflow: auto; margin: 0; padding: 14px; border: 1px solid #222222; border-radius: 8px; background: #070707; color: #ffffff; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.monitoring-grid { display: grid; grid-template-columns: minmax(360px, .9fr) minmax(420px, 1.1fr); gap: 12px; align-items: start; }
.monitoring-card { min-width: 0; }
.monitoring-status { display: grid; grid-template-columns: repeat(2, minmax(160px, 1fr)); gap: 10px; margin-bottom: 14px; }
.monitoring-status div, .monitoring-snippet { border: 1px solid #262626; border-radius: 8px; background: #0d0d0d; padding: 11px; display: grid; gap: 7px; }
.monitoring-status span, .monitoring-snippet span { color: #8a8a8a; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.monitoring-status.compact { margin-top: 12px; }
.monitoring-status code, .monitoring-snippet code { white-space: normal; word-break: break-all; }
.monitoring-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.monitoring-form { display: grid; gap: 10px; }
.monitoring-form label { border: 1px solid #262626; border-radius: 8px; background: #0d0d0d; padding: 11px; display: grid; gap: 8px; }
.monitoring-form label > span { color: #8a8a8a; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.monitoring-form .toggle-row { display: flex; align-items: center; gap: 9px; }
.monitoring-form .toggle-row input { width: 16px; height: 16px; accent-color: var(--green); }
.monitoring-form .toggle-row span { color: var(--text); font-size: 13px; text-transform: none; letter-spacing: 0; }
.monitoring-token { display: grid; gap: 9px; word-break: break-all; }
.monitoring-token .copy-button { width: fit-content; }
.monitoring-snippet { margin-top: 12px; }
.p2p-grid { display: grid; grid-template-columns: minmax(360px, .8fr) minmax(420px, 1.2fr); gap: 12px; align-items: start; }
.p2p-hero { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(360px, 1fr) auto; gap: 18px; align-items: start; }
.p2p-hero h2 { margin: 5px 0 8px; }
.p2p-kpis { display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr)); gap: 10px; min-width: min(520px, 100%); }
.p2p-kpis div, .p2p-note-grid div { border: 1px solid #262626; border-radius: 8px; background: #0d0d0d; padding: 11px; display: grid; gap: 7px; }
.p2p-kpis span, .p2p-note-grid span { color: #8a8a8a; font-size: 12px; line-height: 1.45; }
.p2p-kpis div > span { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.p2p-kpis b { font-size: 20px; }
.p2p-protocols { grid-row: span 2; }
.p2p-protocol-list { display: grid; gap: 10px; }
.p2p-protocol { border: 1px solid #262626; border-radius: 8px; background: #0d0d0d; padding: 12px; display: grid; gap: 10px; }
.p2p-protocol.active { border-color: rgba(200, 255, 0, .28); }
.p2p-protocol > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.p2p-protocol > div:first-child span { color: #8a8a8a; font-size: 12px; }
.p2p-state { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.p2p-state span, .p2p-state code { border: 1px solid #262626; border-radius: 6px; padding: 5px 8px; background: #080808; font-size: 12px; font-weight: 800; }
.p2p-protocol details { border-top: 1px solid #202020; padding-top: 8px; }
.p2p-protocol summary { cursor: pointer; color: #8a8a8a; font-weight: 800; }
.p2p-protocol pre { max-height: 240px; overflow: auto; margin: 8px 0 0; padding: 10px; border: 1px solid #222222; border-radius: 8px; background: #070707; color: #ffffff; font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; }
.p2p-note-grid { display: grid; grid-template-columns: repeat(3, minmax(160px, 1fr)); gap: 10px; }
.update-grid { display: grid; gap: 12px; }
.update-hero-card { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(360px, 1.3fr) auto; gap: 14px; align-items: start; }
.update-version-grid { display: grid; grid-template-columns: repeat(3, minmax(130px, 1fr)); gap: 10px; }
.update-version-grid div { border: 1px solid #262626; border-radius: 8px; background: #0d0d0d; padding: 11px; display: grid; gap: 7px; }
.update-version-grid span { color: #8a8a8a; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.update-version-grid b { font-size: 16px; }
.update-state { display: inline-flex; margin-top: 8px; min-height: 26px; align-items: center; border: 1px solid #333333; border-radius: 6px; padding: 0 9px; color: #d7d7d7; font-weight: 800; }
.update-state.latest { border-color: #5a7300; background: #161d00; color: var(--green); }
.update-state.outdated { border-color: #8a4b00; background: #211600; color: #ffb85c; }
.update-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.update-link-btn { min-height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid #333333; border-radius: 6px; background: #101010; color: #d7d7d7; padding: 0 11px; font-weight: 800; text-decoration: none; }
.update-link-btn:hover { border-color: #555555; color: #ffffff; }
.runner-pill { min-height: 26px; display: inline-flex; align-items: center; border: 1px solid #333333; border-radius: 6px; padding: 0 9px; color: #bdbdbd; font-size: 12px; font-weight: 800; }
.runner-pill.ready { border-color: #5a7300; background: #161d00; color: var(--green); }
.runner-pill.disabled { border-color: #333333; background: #101010; color: #bdbdbd; }
.update-runner-card .warning { margin-top: 10px; }
.update-log-card pre { min-height: 280px; max-height: 520px; overflow: auto; margin: 0; padding: 14px; border: 1px solid #222222; border-radius: 8px; background: #070707; color: #ffffff; font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; }
@media (max-width: 980px) {
  .monitoring-grid { grid-template-columns: 1fr; }
  .monitoring-status { grid-template-columns: 1fr; }
  .p2p-grid, .p2p-hero, .p2p-note-grid { grid-template-columns: 1fr; }
  .p2p-protocols { grid-row: auto; }
  .p2p-kpis { min-width: 0; grid-template-columns: 1fr; }
  .update-hero-card { grid-template-columns: 1fr; }
  .update-version-grid { grid-template-columns: 1fr; }
  .update-actions { justify-content: flex-start; }
}

@media (max-width: 1500px) {
  .user-admin-grid { grid-template-columns: 1fr; }
  .user-create-card form { grid-template-columns: repeat(2, minmax(180px, 1fr)); align-items: end; }
  .user-create-card h2,
  .user-create-card .warning { grid-column: 1 / -1; }
  .users-list-card .table-wrap { overflow: visible; }
  .users-table,
  .users-table tbody,
  .users-table tr,
  .users-table td { display: block; width: 100%; }
  .users-table { min-width: 0; border-collapse: separate; border-spacing: 0; }
  .users-table colgroup,
  .users-table thead { display: none; }
  .users-table tbody { display: grid; gap: 10px; }
  .users-table tr { border: 1px solid #262626; border-radius: 8px; background: #0d0d0d; padding: 10px; }
  .users-table td {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    border-bottom: 0;
    padding: 7px 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .users-table td::before {
    color: #8a8a8a;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .users-table td:nth-child(1)::before { content: "ID"; }
  .users-table td:nth-child(2)::before { content: "Логин"; }
  .users-table td:nth-child(3)::before { content: "Роль"; }
  .users-table td:nth-child(4)::before { content: "Peer'ы"; }
  .users-table td:nth-child(5)::before { content: "Лимит"; }
  .users-table td:nth-child(6)::before { content: "Трафик"; }
  .users-table td:nth-child(7)::before { content: "Срок"; }
  .users-table td:nth-child(8)::before { content: "Статус"; }
  .users-table td:nth-child(9)::before { content: "Действия"; }
  .users-table td.actions-cell { width: 100%; min-width: 0; }
  .users-table .inline-number { width: 92px; }
  .users-table .traffic-limit-cell { max-width: 260px; }
  .users-table .user-expiration-cell { max-width: 180px; }
  .users-table .user-actions { gap: 8px; }
  .users-table .user-action-buttons,
  .users-table .user-password-row { flex-wrap: wrap; }
  .users-table .inline-password { width: 160px; flex: 0 1 160px; }
  html[data-theme="light"] .users-table tr {
    background: #ffffff;
    border-color: #d8e1ec;
  }
}

@media (max-width: 900px) {
  .user-create-card form { grid-template-columns: 1fr; }
}

.tools-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(180px, 1fr)); gap: 12px; margin-bottom: 12px; }
.tool-kpi { min-height: 132px; display: grid; align-content: start; gap: 9px; }
.tool-kpi span { color: #8a8a8a; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.tool-kpi b { font-size: 30px; line-height: 1; }
.tool-kpi small { color: #8a8a8a; }
.tool-progress { height: 8px; border-radius: 999px; background: #151515; overflow: hidden; }
.tool-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff8c00, #c8ff00); }
.tool-progress.split { display: flex; gap: 2px; background: #151515; }
.tool-progress.split i,
.tool-progress.split em { display: block; height: 100%; border-radius: inherit; }
.tool-progress.split i { background: #c8ff00; }
.tool-progress.split em { background: #ff8c00; }
.tools-status-card { min-height: 0; }
.tool-service-grid { display: grid; grid-template-columns: repeat(2, minmax(260px, 1fr)); gap: 12px; }
.tool-service { border: 1px solid #262626; border-radius: 8px; background: #0d0d0d; padding: 14px; }
.tool-service-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.tool-service-meta { display: flex; flex-wrap: wrap; gap: 8px; color: #8a8a8a; font-size: 12px; }
.tool-service-meta span { border: 1px solid #262626; border-radius: 5px; background: #070707; padding: 3px 7px; }
.system-dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(320px, 1fr)); gap: 12px; margin-bottom: 12px; }
.system-chart-card { min-height: 220px; }
.system-range-select { width: 118px; height: 32px; padding: 0 8px; }
.system-alerts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin-bottom: 12px; }
.system-alert { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 10px; align-items: center; border: 1px solid #262626; border-radius: 8px; background: #0d0d0d; padding: 12px; }
.system-alert span { height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 11px; font-weight: 900; }
.system-alert b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.system-alert small { display: block; margin-top: 4px; color: #8a8a8a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.system-alert.ok { border-color: rgba(200, 255, 0, .22); }
.system-alert.ok span { background: rgba(200, 255, 0, .10); color: var(--green); border: 1px solid rgba(200, 255, 0, .35); }
.system-alert.warn { border-color: rgba(255, 140, 0, .36); }
.system-alert.warn span { background: rgba(255, 140, 0, .10); color: #ff8c00; border: 1px solid rgba(255, 140, 0, .35); }
.system-alert.fail { border-color: rgba(255, 77, 109, .42); }
.system-alert.fail span { background: rgba(255, 77, 109, .10); color: #ff4d6d; border: 1px solid rgba(255, 77, 109, .42); }
.mini-line-chart { width: 100%; height: 118px; display: block; overflow: visible; }
.mini-chart-grid { stroke: #202020; stroke-width: 1; stroke-dasharray: 4 8; }
.mini-chart-axis { stroke: #2c2c2c; stroke-width: 1; }
.mini-chart-area { opacity: .12; }
.mini-chart-line { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 7px rgba(200, 255, 0, .12)); }
.mini-chart-dot { stroke: #0d0d0d; stroke-width: 2; filter: drop-shadow(0 0 6px rgba(200, 255, 0, .22)); }
.system-net-total { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; color: #8a8a8a; }
.system-net-total b { color: #ffffff; }
.system-history-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; color: #8a8a8a; font-size: 12px; }
.system-history-meta b { color: #ffffff; }
.system-detail-grid { display: grid; grid-template-columns: minmax(320px, .8fr) minmax(420px, 1.2fr); gap: 12px; margin-bottom: 12px; }
.system-panel { min-height: 0; }
.system-facts { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 10px; }
.system-facts div { border: 1px solid #262626; border-radius: 8px; background: #0d0d0d; padding: 12px; }
.system-facts span { display: block; color: #8a8a8a; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 7px; }
.system-facts b { display: block; font-size: 20px; }
.system-facts small { display: block; margin-top: 5px; color: #8a8a8a; }
.container-list { display: grid; gap: 8px; }
.container-list div { display: grid; grid-template-columns: 12px minmax(130px, 1fr) 80px minmax(170px, auto) minmax(130px, .8fr); align-items: center; gap: 10px; border: 1px solid #262626; border-radius: 8px; background: #0d0d0d; padding: 10px 12px; }
.container-list small, .container-list em { color: #8a8a8a; font-style: normal; }
.container-image { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.interface-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.interface-grid div { display: grid; gap: 6px; border: 1px solid #262626; border-radius: 8px; background: #0d0d0d; padding: 12px; }
.interface-grid span { color: #8a8a8a; font-size: 12px; }
.system-table-list, .process-list { display: grid; gap: 8px; }
.system-table-list > div { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(150px, auto) 64px; gap: 10px; align-items: center; border: 1px solid #262626; border-radius: 8px; background: #0d0d0d; padding: 10px 12px; }
.system-table-list > div .tool-progress { grid-column: 1 / -1; height: 6px; }
.system-table-list b, .process-list b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.system-table-list small { display: block; margin-top: 4px; color: #8a8a8a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.system-table-list span, .system-table-list em, .process-list span, .process-list em { color: #8a8a8a; font-style: normal; }
.system-table-list em { text-align: right; font-weight: 800; color: #ffffff; }
.process-list > div { display: grid; grid-template-columns: 64px minmax(0, 1fr) 92px; gap: 10px; align-items: center; border: 1px solid #262626; border-radius: 8px; background: #0d0d0d; padding: 10px 12px; }
.process-list span { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.process-list em { text-align: right; color: #ffffff; font-weight: 800; }
.network-tool-grid { display: grid; grid-template-columns: minmax(320px, 430px) minmax(420px, 1fr); gap: 12px; align-items: start; }
.network-tool-card form { display: grid; gap: 13px; }
.network-tool-card label { display: grid; gap: 7px; }
.network-tool-card label span { color: #8a8a8a; font-size: 12px; font-weight: 700; }
.network-tool-card .category-select,
.network-tool-card .name-input { width: 100%; }
.network-result-card { min-height: 420px; }
.tool-output { min-height: 280px; max-height: 540px; overflow: auto; margin: 0; padding: 14px; border: 1px solid #222222; border-radius: 8px; background: #070707; color: #ffffff; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; }
.tool-placeholder { min-height: 300px; display: grid; place-items: center; align-content: center; gap: 12px; border: 1px dashed #333333; border-radius: 8px; color: #8a8a8a; }
.tool-result-hero { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid #262626; border-radius: 8px; background: #0d0d0d; padding: 16px; margin-bottom: 12px; }
.tool-result-hero span { display: block; color: #8a8a8a; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.tool-result-hero b { display: block; font-size: 23px; line-height: 1.1; }
.tool-result-hero small { display: block; max-width: 820px; margin-top: 8px; color: #8a8a8a; line-height: 1.45; }
.tool-result-hero strong { font-size: 28px; white-space: nowrap; }
.tool-result-hero.ok { border-color: rgba(200, 255, 0, .28); }
.tool-result-hero.ok strong, .tool-result-hero.ok b { color: var(--green); }
.tool-result-hero.warn { border-color: rgba(255, 140, 0, .38); }
.tool-result-hero.warn strong, .tool-result-hero.warn b { color: #ff8c00; }
.tool-result-hero.bad { border-color: rgba(255, 140, 0, .38); }
.tool-result-hero.bad strong, .tool-result-hero.bad b, .danger-text { color: #ff8c00; }
.tool-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 10px; margin-bottom: 12px; }
.tool-summary-grid div { min-width: 0; border: 1px solid #262626; border-radius: 8px; background: #0d0d0d; padding: 12px; }
.tool-summary-grid span { display: block; color: #8a8a8a; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 7px; }
.tool-summary-grid b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; }
.tool-replies, .tool-hops { display: grid; gap: 7px; margin-bottom: 12px; }
.tool-replies div, .tool-hops div { display: grid; grid-template-columns: 86px minmax(90px, 140px) minmax(0, 1fr); align-items: center; gap: 10px; border: 1px solid #262626; border-radius: 7px; background: #0d0d0d; padding: 9px 11px; }
.tool-hops div { grid-template-columns: 42px minmax(0, 1fr) 90px; }
.tool-replies span, .tool-hops span { color: #8a8a8a; font-size: 12px; }
.tool-replies small, .tool-hops small { color: #8a8a8a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-raw-details { margin-top: 12px; }
.tool-raw-details summary { width: fit-content; cursor: pointer; color: #8a8a8a; font-weight: 700; margin-bottom: 8px; }
.tool-raw-details .tool-output { min-height: 180px; }
.health-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(160px, 1fr)); gap: 12px; margin-bottom: 12px; }
.health-summary { min-height: 110px; display: grid; align-content: center; gap: 8px; }
.health-summary span { color: #8a8a8a; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.health-summary b { font-size: 36px; line-height: 1; }
.health-summary.ok b { color: var(--green); }
.health-summary.warn b { color: #ff8c00; }
.health-summary.fail b { color: #ff4d6d; }
.health-section-card { margin-bottom: 12px; }
.health-section-grid { display: grid; gap: 12px; align-items: start; }
.health-section-grid.core { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.health-section-grid.protocols { grid-template-columns: repeat(2, minmax(360px, 1fr)); }
.health-group-panel { min-width: 0; border: 1px solid #262626; border-radius: 8px; background: #0d0d0d; padding: 12px; }
.health-group-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.health-group-title h3 { margin: 0; font-size: 16px; }
.health-check-list { display: grid; gap: 8px; }
.health-check { border: 1px solid #262626; border-radius: 8px; background: #090909; padding: 10px; }
.health-check.ok { border-color: rgba(200, 255, 0, .22); }
.health-check.warn { border-color: rgba(255, 140, 0, .32); }
.health-check.fail { border-color: rgba(255, 77, 109, .38); }
.health-check-main { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.health-check-main b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.health-check-main small { display: block; margin-top: 3px; color: #8a8a8a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.health-no-details { color: #5a5a5a; justify-self: end; }
.health-pill { display: inline-flex; align-items: center; justify-content: center; height: 24px; border-radius: 6px; font-size: 11px; font-weight: 900; }
.health-pill.ok { background: rgba(200, 255, 0, .10); color: var(--green); border: 1px solid rgba(200, 255, 0, .35); }
.health-pill.warn { background: rgba(255, 140, 0, .10); color: #ff8c00; border: 1px solid rgba(255, 140, 0, .35); }
.health-pill.fail { background: rgba(255, 77, 109, .10); color: #ff4d6d; border: 1px solid rgba(255, 77, 109, .40); }
.health-check pre { margin: 10px 0 0; max-height: 220px; overflow: auto; border: 1px solid #262626; border-radius: 8px; background: #050505; color: #d7d7d7; padding: 12px; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; }
@media (max-width: 1100px) {
  .tools-kpi-grid { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
  .system-dashboard-grid,
  .system-detail-grid { grid-template-columns: 1fr; }
  .health-section-grid.core,
  .health-section-grid.protocols { grid-template-columns: 1fr; }
  .system-facts { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
  .container-list div { grid-template-columns: 12px minmax(120px, 1fr) 80px; }
  .container-list em,
  .container-image { grid-column: 2 / -1; }
  .network-tool-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .tools-kpi-grid,
  .tool-service-grid { grid-template-columns: 1fr; }
  .health-summary-grid { grid-template-columns: 1fr; }
  .health-check-main { grid-template-columns: 1fr; }
  .audit-filters { grid-template-columns: 1fr; }
  .backup-hero-card { grid-template-columns: 1fr; }
  .backup-explain-grid { grid-template-columns: 1fr; }
  .backup-auto-grid { grid-template-columns: 1fr; }
  .backup-auto-actions { justify-content: flex-start; }
  .backup-actions { justify-content: flex-start; }
  .system-facts { grid-template-columns: 1fr; }
  .system-alert { grid-template-columns: 1fr; }
  .peer-diag-summary,
  .peer-diag-check { grid-template-columns: 1fr; }
  .container-list div { grid-template-columns: 12px 1fr; }
  .container-list small, .container-list em { grid-column: 2; }
  .container-image { grid-column: 2; }
  .system-table-list > div,
  .process-list > div { grid-template-columns: 1fr; }
  .system-table-list em,
  .process-list em { text-align: left; }
  .tool-summary-grid { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
  .tool-result-hero { align-items: flex-start; flex-direction: column; }
  .tool-replies div, .tool-hops div { grid-template-columns: 1fr; gap: 4px; }
}

/* Типографика как в основном проекте 3WG: JetBrains Mono для данных, Montserrat для заголовков */
h1, h2, h3, .brand-block, .login-subtitle { font-family: 'Montserrat', sans-serif; }
.topbar h1 { letter-spacing: .01em; }

/* === Сайдбар в точности как в админке основного проекта 3WG === */
.sidebar { padding: 16px 0; }
.brand-block { padding: 0 4px 14px; margin: 0 0 8px; }
.nav-title { margin: 18px 16px 8px; }
.nav {
  gap: 12px;
  height: auto;
  padding: 12px 16px;
  margin-bottom: 0;
  border: 0;
  border-right: 2px solid transparent;
  border-radius: 0;
  color: #999999;
  font-weight: 400;
  font-size: 14px;
}
.nav:hover { background: rgba(200, 255, 0, .05); color: #ffffff; }
.nav.active {
  background: rgba(200, 255, 0, .1);
  border: 0;
  border-right: 2px solid #c8ff00;
  color: #c8ff00;
}
.nav svg { width: 18px; height: 18px; flex-shrink: 0; }

/* WireGuard — фирменный красный цвет бренда WireGuard (#88171a) */
.proto-wireguard { background: rgba(136, 23, 26, .18); color: #ff5252; border-color: #88171a; }
.traffic-proto.wg { color: #ff5252; }

/* Светлая тема: интерактивные элементы не должны оставаться "ночными" */
html[data-theme="light"] .stat-mark {
  background: #f3f8e8;
  border-color: #c5d99a;
  color: #5f7f00;
}
html[data-theme="light"] .top-actions button,
html[data-theme="light"] .mobile-menu-button,
html[data-theme="light"] .copy-button,
html[data-theme="light"] .modal-close,
html[data-theme="light"] .confirm-cancel {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #334155;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
html[data-theme="light"] .top-actions button:hover,
html[data-theme="light"] .mobile-menu-button:hover,
html[data-theme="light"] .copy-button:hover,
html[data-theme="light"] .modal-close:hover {
  border-color: #94a3b8;
  color: #0f172a;
  background: #f8fafc;
}
html[data-theme="light"] .category-item,
html[data-theme="light"] .category-chip {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #475569;
}
html[data-theme="light"] .category-chip span {
  background: #eef3fb;
  color: #5f7f00;
}
html[data-theme="light"] .category-chip.active,
html[data-theme="light"] .category-item.active {
  background: #f3f8e8;
  border-color: #9fbd54;
  color: #334800;
}
html[data-theme="light"] .category-chip.active span,
html[data-theme="light"] .category-item.active .category-chip span {
  background: #dcebb6;
  color: #334800;
}
html[data-theme="light"] .category-tool {
  border-left-color: #cbd5e1;
  color: #64748b;
}
html[data-theme="light"] .category-tool:hover {
  background: #f8fafc;
  color: #0f172a;
}
html[data-theme="light"] .category-tool.save { color: #5f7f00; }
html[data-theme="light"] .category-tool.danger { color: #b45309; }
html[data-theme="light"] .category-create button {
  background: #f3f8e8;
  color: #5f7f00;
}
html[data-theme="light"] .owner-badge {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #334155;
}
html[data-theme="light"] .proto {
  background: #ecfeff;
  border-color: #67e8f9;
  color: #0e7490;
}
html[data-theme="light"] .proto-wireguard {
  background: #fff1f2;
  border-color: #fda4af;
  color: #be123c;
}
html[data-theme="light"] .pill.bad {
  background: #fff7ed;
  color: #b45309;
}
html[data-theme="light"] .blue-btn,
html[data-theme="light"] .icon-button.download {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #c2410c;
}
html[data-theme="light"] .icon-button.download-vpn {
  background: #ecfeff;
  border-color: #67e8f9;
  color: #0e7490;
}
html[data-theme="light"] .icon-button.open {
  background: var(--orange);
  color: #111827;
}
html[data-theme="light"] .icon-button.qr,
html[data-theme="light"] .icon-button.enable {
  background: #f3f8e8;
  border-color: #c5d99a;
  color: #5f7f00;
}
html[data-theme="light"] .icon-button.block {
  background: #fff7ed;
  border-color: #fdba74;
  color: #b45309;
}
html[data-theme="light"] .icon-button.reset {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #5f7f00;
}
html[data-theme="light"] .icon-button.danger {
  background: #fff1f2;
  border-color: #fda4af;
  color: #be123c;
}
html[data-theme="light"] .icon-button.ghost {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #475569;
}
html[data-theme="light"] .p2p-kpis div,
html[data-theme="light"] .p2p-note-grid div,
html[data-theme="light"] .p2p-protocol {
  background: #ffffff;
  border-color: #d8e1ec;
}
html[data-theme="light"] .p2p-protocol.active {
  border-color: #a8c95f;
  background: #fbfff3;
}
html[data-theme="light"] .p2p-state span,
html[data-theme="light"] .p2p-state code {
  background: #f8fafc;
  border-color: #d8e1ec;
}
html[data-theme="light"] .p2p-protocol details {
  border-top-color: #d8e1ec;
}
html[data-theme="light"] .p2p-protocol pre {
  background: #0f172a;
  color: #e5e7eb;
  border-color: #cbd5e1;
}
html[data-theme="light"] .icon-button:hover {
  filter: none;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(15, 23, 42, .08);
}
html[data-theme="light"] .traffic-row:hover {
  border-color: #c5d99a;
  background: #fbfdff;
}
html[data-theme="light"] .live-dot {
  background: #f3f8e8;
  border-color: #c5d99a;
  color: #5f7f00;
}
html[data-theme="light"] .live-dot.idle {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #475569;
}
html[data-theme="light"] .traffic-state {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #475569;
}
html[data-theme="light"] .traffic-state.live {
  background: #f3f8e8;
  border-color: #c5d99a;
  color: #5f7f00;
}
html[data-theme="light"] .traffic-state.idle {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #b45309;
}
html[data-theme="light"] .modal-backdrop {
  background: rgba(15, 23, 42, .45);
  backdrop-filter: blur(6px);
}
html[data-theme="light"] .modal-card {
  background: #ffffff;
  border-color: #d8e1ec;
  color: #111827;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .24);
}
html[data-theme="light"] .toast-item {
  background: #ffffff;
  border-color: #d8e1ec;
  color: #111827;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .16);
}
html[data-theme="light"] .toast-item span {
  color: #64748b;
}
html[data-theme="light"] .toast-item button {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #334155;
}
html[data-theme="light"] .modal-head h2,
html[data-theme="light"] .modal-qr-panel h3 {
  color: #111827;
}
html[data-theme="light"] .modal-head p,
html[data-theme="light"] .modal-qr-panel p,
html[data-theme="light"] .confirm-body p {
  color: #64748b;
}
html[data-theme="light"] .multi-qr-modal {
  background: #f8fafc;
}
html[data-theme="light"] .modal-qr-panel {
  background: #ffffff;
  border-color: #d8e1ec;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
}
html[data-theme="light"] .modal-qr-image,
html[data-theme="light"] .qr-image {
  border: 1px solid #e2e8f0;
}
html[data-theme="light"] .status-summary-card {
  background: #ffffff;
}
html[data-theme="light"] .protocol-port-card .section-head p,
html[data-theme="light"] .fornex-ports span,
html[data-theme="light"] .protocol-port-form label {
  color: #64748b;
}
html[data-theme="light"] .fornex-ports {
  background: #f8fafc;
  border-color: #d6e0ef;
}
html[data-theme="light"] .fornex-ports code {
  color: #5f8f00;
}
html[data-theme="light"] .protocol-port-form input {
  background: #ffffff;
  color: #111827;
  border-color: #cbd7e6;
}
html[data-theme="light"] .peer-hero-card {
  border-color: #d8e1ec;
  background: #ffffff;
}
html[data-theme="light"] .peer-identity,
html[data-theme="light"] .peer-live-card,
html[data-theme="light"] .peer-badges span {
  background: #f8fafc;
  border-color: #d8e1ec;
  color: #111827;
}
html[data-theme="light"] .peer-identity h2,
html[data-theme="light"] .peer-live-card b {
  color: #111827;
}
html[data-theme="light"] .peer-live-card {
  background: radial-gradient(circle at top right, rgba(139, 181, 0, .14), transparent 42%), #f8fafc;
}
html[data-theme="light"] .peer-badges,
html[data-theme="light"] .peer-live-card span,
html[data-theme="light"] .peer-live-card small {
  color: #64748b;
}
html[data-theme="light"] .protocol-badge.awg {
  border-color: #67e8f9;
  background: #ecfeff;
  color: #0e7490;
}
html[data-theme="light"] .protocol-badge.wg {
  border-color: #fecdd3;
  background: #fff1f2;
  color: #e11d48;
}
html[data-theme="light"] .status-meta-grid div,
html[data-theme="light"] .detail-grid div {
  min-width: 0;
}
html[data-theme="light"] .status-meta-grid code,
html[data-theme="light"] .detail-grid code {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  min-height: 24px;
  align-items: center;
  padding: 3px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #f8fafc;
  border: 1px solid #d8e1ec;
  border-radius: 5px;
  color: #111827;
}
html[data-theme="light"] .status-pill.online {
  background: #f3f8e8;
  border-color: #c5d99a;
  color: #5f7f00;
}
html[data-theme="light"] .status-pill.warn {
  background: #fff7ed;
  border-color: #fdba74;
  color: #c2410c;
}
html[data-theme="light"] .status-pill.offline {
  background: #fff1f2;
  border-color: #fda4af;
  color: #be123c;
}
html[data-theme="light"] .status-pill.disabled {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #64748b;
}
html[data-theme="light"] .tool-service,
html[data-theme="light"] .tool-output,
html[data-theme="light"] .tool-placeholder,
html[data-theme="light"] .tool-result-hero,
html[data-theme="light"] .tool-summary-grid div,
html[data-theme="light"] .tool-replies div,
html[data-theme="light"] .tool-hops div {
  background: #ffffff;
  border-color: #d8e1ec;
  color: #111827;
}
html[data-theme="light"] .tool-progress {
  background: #e2e8f0;
}
html[data-theme="light"] .tool-progress.split {
  background: #e2e8f0;
}
html[data-theme="light"] .tool-kpi span,
html[data-theme="light"] .tool-kpi small,
html[data-theme="light"] .network-tool-card label span,
html[data-theme="light"] .tool-service-meta,
html[data-theme="light"] .system-net-total,
html[data-theme="light"] .system-history-meta,
html[data-theme="light"] .system-facts span,
html[data-theme="light"] .system-facts small,
html[data-theme="light"] .system-alert small,
html[data-theme="light"] .peer-diag-summary span,
html[data-theme="light"] .peer-diag-check small,
html[data-theme="light"] .container-list small,
html[data-theme="light"] .container-list em,
html[data-theme="light"] .interface-grid span,
html[data-theme="light"] .system-table-list small,
html[data-theme="light"] .system-table-list span,
html[data-theme="light"] .process-list span,
html[data-theme="light"] .tool-placeholder,
html[data-theme="light"] .tool-result-hero span,
html[data-theme="light"] .tool-summary-grid span,
html[data-theme="light"] .tool-replies span,
html[data-theme="light"] .tool-replies small,
html[data-theme="light"] .tool-hops span,
html[data-theme="light"] .tool-hops small,
html[data-theme="light"] .tool-raw-details summary {
  color: #64748b;
}
html[data-theme="light"] .tool-service-meta span {
  background: #f8fafc;
  border-color: #d8e1ec;
  color: #334155;
}
html[data-theme="light"] .system-net-total b {
  color: #111827;
}
html[data-theme="light"] .system-history-meta b {
  color: #111827;
}
html[data-theme="light"] .system-facts div,
html[data-theme="light"] .system-alert,
html[data-theme="light"] .peer-diag-summary div,
html[data-theme="light"] .peer-diag-check,
html[data-theme="light"] .container-list div,
html[data-theme="light"] .interface-grid div,
html[data-theme="light"] .system-table-list > div,
html[data-theme="light"] .process-list > div {
  background: #ffffff;
  border-color: #d8e1ec;
  color: #111827;
}
html[data-theme="light"] .system-table-list em,
html[data-theme="light"] .process-list em {
  color: #111827;
}
html[data-theme="light"] .mini-chart-grid {
  stroke: #d8e1ec;
}
html[data-theme="light"] .mini-chart-axis {
  stroke: #cbd5e1;
}
html[data-theme="light"] .mini-chart-dot {
  stroke: #ffffff;
}
html[data-theme="light"] .tool-output {
  background: #0f172a;
  border-color: #1e293b;
  color: #e2e8f0;
}
html[data-theme="light"] .tool-result-hero.ok {
  background: #f7fbef;
  border-color: #c5d99a;
}
html[data-theme="light"] .tool-result-hero.ok strong,
html[data-theme="light"] .tool-result-hero.ok b {
  color: #5f7f00;
}
html[data-theme="light"] .tool-result-hero.bad {
  background: #fff7ed;
  border-color: #fdba74;
}
html[data-theme="light"] .tool-result-hero.warn {
  background: #fff7ed;
  border-color: #fdba74;
}
html[data-theme="light"] .tool-result-hero.warn strong,
html[data-theme="light"] .tool-result-hero.warn b {
  color: #c2410c;
}
html[data-theme="light"] .tool-result-hero.bad strong,
html[data-theme="light"] .tool-result-hero.bad b,
html[data-theme="light"] .danger-text {
  color: #c2410c;
}
html[data-theme="light"] .health-check {
  background: #ffffff;
  border-color: #d8e1ec;
  color: #111827;
}
html[data-theme="light"] .health-group-panel {
  background: #f8fafc;
  border-color: #d8e1ec;
}
html[data-theme="light"] .health-check.ok {
  border-color: #c5d99a;
}
html[data-theme="light"] .health-check.warn {
  border-color: #fdba74;
}
html[data-theme="light"] .health-check.fail {
  border-color: #fda4af;
}
html[data-theme="light"] .health-check-main small,
html[data-theme="light"] .health-summary span {
  color: #64748b;
}
html[data-theme="light"] .health-check pre {
  background: #0f172a;
  border-color: #1e293b;
  color: #e2e8f0;
}
html[data-theme="light"] .audit-filters label span {
  color: #64748b;
}
html[data-theme="light"] .audit-action {
  background: #f3f8e8;
  border-color: #c5d99a;
  color: #5f7f00;
}
html[data-theme="light"] .audit-details-row td {
  background: #f8fafc;
}
html[data-theme="light"] .audit-details-row pre {
  background: #0f172a;
  border-color: #1e293b;
  color: #e2e8f0;
}
html[data-theme="light"] .backup-explain-grid div,
html[data-theme="light"] .backup-missing-note {
  background: #f8fafc;
  border-color: #d8e1ec;
}
html[data-theme="light"] .backup-missing-note b {
  color: #111827;
}
html[data-theme="light"] .copy-button.danger-action {
  background: #fff7ed;
  border-color: #fdba74;
  color: #c2410c;
}

.migration-hero-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
}

.migration-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.migration-runbook h2 {
  margin-bottom: 14px;
}

.migration-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.migration-steps div {
  min-height: 92px;
  padding: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.02);
  border-radius: 8px;
}

.migration-steps b {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-bottom: 10px;
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent);
}

.migration-steps span {
  display: block;
  color: var(--muted);
  line-height: 1.45;
}

html[data-theme="light"] .migration-steps div {
  background: #f8fafc;
  border-color: #d8e1ec;
}

html[data-theme="light"] .migration-steps span,
html[data-theme="light"] .migration-check {
  color: #64748b;
}

.migration-push-card {
  display: grid;
  gap: 16px;
}

.migration-push-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr 110px 150px 150px minmax(220px, 1fr);
  gap: 12px;
  align-items: end;
}

.migration-push-grid label,
.migration-key-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.migration-push-grid label span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.migration-push-grid input,
.migration-push-grid select,
.migration-push-grid textarea {
  width: 100%;
  min-width: 0;
}

.migration-key-field {
  grid-column: span 2;
}

.migration-key-field textarea {
  min-height: 86px;
  resize: vertical;
}

.migration-push-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  grid-column: 1 / -1;
}

.migration-runner-status {
  display: grid;
  grid-template-columns: 1.4fr 1fr .7fr;
  gap: 10px;
}

.migration-runner-status div {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,.02);
}

.migration-runner-status span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.migration-runner-status b {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.migration-log {
  min-height: 160px;
  max-height: 360px;
  overflow: auto;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #020617;
  color: #e2e8f0;
  font-size: 12px;
  line-height: 1.55;
}

html[data-theme="light"] .migration-runner-status div {
  background: #f8fafc;
  border-color: #d8e1ec;
}

@media (max-width: 1100px) {
  .migration-hero-card {
    grid-template-columns: 1fr;
  }
  .migration-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .migration-push-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .migration-runner-status {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .migration-steps {
    grid-template-columns: 1fr;
  }
  .migration-push-grid {
    grid-template-columns: 1fr;
  }
  .migration-key-field {
    grid-column: auto;
  }
}

/* Keep the accent local to a corner, even on wide table panels. */
html[data-theme="light"] {
  --corner-glow: rgba(139, 181, 0, .14);
}

html :is(
  .card:not(.config-card, .raw-card, .qr-card, .peer-hero-card):not(:has(.card, .stat-card, .peer-live-card)),
  .stat-card,
  .login-card,
  .traffic-total,
  .mobile-peer-card,
  .user-hero-stats > div,
  .user-peer-kpis > div,
  .monitoring-status > div,
  .update-version-grid > div,
  .migration-runner-status > div,
  .tool-summary-grid > div
) {
  background-image: radial-gradient(ellipse 220px 140px at top right, var(--corner-glow), transparent 100%);
  background-repeat: no-repeat;
}
.network-ip-summary { display:flex; flex-wrap:wrap; gap:16px; margin-bottom:20px; }
.network-ip-summary span { display:grid; gap:6px; overflow-wrap:anywhere; }
.network-ip-form { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.network-ip-form select { max-width:100%; min-width:220px; padding:8px; border:1px solid var(--line); border-radius:6px; background:var(--card); color:var(--text); }
.network-ip-plan { margin-top:20px; border-top:1px solid var(--line); padding-top:16px; overflow-wrap:anywhere; }
.account-settings{max-width:560px}.account-settings form,.bypass-entry{display:grid;gap:14px}.account-settings label,.bypass-entry label{display:grid;gap:7px}.account-settings input,.bypass-entry input,.bypass-entry textarea{width:100%;min-width:0;padding:10px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--text);font:inherit}.bypass-entry textarea{resize:vertical}.bypass-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:16px 0}.bypass-toolbar .actions{flex-wrap:wrap}.bypass-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:12px}.bypass-entry pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:240px;overflow:auto}
.bypass-sources{margin:18px 0;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.source-tabs{display:flex;flex-wrap:wrap;gap:0;margin:12px 0}.source-tabs button{padding:8px 12px;border:1px solid var(--line);background:var(--card);color:var(--muted);cursor:pointer}.source-tabs button[aria-pressed="true"]{color:var(--text);box-shadow:inset 0 -2px #87b800}.source-tools{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}.source-tools>input{flex:1;min-width:160px;height:36px;padding:8px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--text);font:inherit}.source-meta{display:flex;flex-wrap:wrap;gap:10px;color:var(--muted);font-size:11px;margin-bottom:10px}.source-items{height:240px;overflow:auto;border:1px solid var(--line);border-radius:6px;background:var(--card);padding:8px;display:flex;flex-direction:column;gap:0}.source-items label{display:flex;gap:8px;align-items:flex-start;padding:6px;min-height:30px;flex:none;overflow-wrap:anywhere}.source-items label span{min-width:0;word-break:break-word}.source-items input{flex:none;margin-top:3px}
.source-category-list{border:1px solid var(--line);border-radius:6px;background:var(--card);overflow:hidden}.source-category{border-bottom:1px solid var(--line)}.source-category:last-child{border-bottom:0}.source-category>summary,.source-service>summary{display:flex;align-items:center;gap:10px;min-height:46px;padding:10px 12px;cursor:pointer;list-style:none}.source-category>summary::-webkit-details-marker,.source-service>summary::-webkit-details-marker{display:none}.source-category>summary::before,.source-service>summary::before{content:'+';width:14px;flex:none;color:var(--muted)}.source-category[open]>summary::before,.source-service[open]>summary::before{content:'-'} .source-category>summary{font-weight:700}.source-group-title{flex:1;min-width:0;overflow-wrap:anywhere}.source-category summary small{font-size:11px;color:var(--muted);white-space:nowrap;flex:none}.source-category summary input{flex:none;margin:0}.source-group-clear{font:inherit;font-size:11px;border:1px solid var(--line);border-radius:4px;background:var(--card);color:var(--muted);padding:4px 6px;cursor:pointer}.source-services{padding:0 12px 10px 24px}.source-service{border-top:1px solid var(--line)}.source-service>summary{padding-left:0;font-weight:400}.source-service .source-items{height:auto;max-height:220px;margin-bottom:8px}.source-category summary:focus-visible{outline:2px solid #87b800;outline-offset:-2px}