:root {
  color-scheme: dark;
  --bg: #05090c;
  --panel: #0a1519;
  --panel-2: #0c1d22;
  --line: rgba(126, 242, 255, 0.17);
  --text: #e8fcff;
  --muted: #91a9b1;
  --green: #6dfc98;
  --blue: #7ef2ff;
  --violet: #8f8cff;
  --yellow: #ffd166;
  --red: #ff6b8b;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: radial-gradient(circle at 20% 0%, rgba(126, 242, 255, 0.10), transparent 34%), var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  padding: 0;
  overflow-x: hidden;
}

a {
  color: var(--blue);
  text-decoration: none;
}

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

.sidebar {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 22px;
  height: 100vh;
  padding: 24px 18px;
  border-right: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(10, 21, 25, 0.98), rgba(5, 9, 12, 0.98)),
    radial-gradient(circle at 10% 0%, rgba(126, 242, 255, 0.12), transparent 36%);
  box-shadow: 18px 0 70px rgba(0, 0, 0, 0.24);
}

.sidebar-brand h1 {
  margin: 0;
  font-size: 24px;
  line-height: 1.05;
}

.sidebar-nav {
  display: grid;
  align-content: start;
  gap: 8px;
}

.sidebar-nav button {
  justify-content: flex-start;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  color: var(--muted);
  text-align: left;
  background: transparent;
}

.sidebar-nav button span {
  display: inline-grid;
  place-items: center;
  width: 22px;
  margin-right: 8px;
  color: var(--blue);
}

.sidebar-nav button.active {
  color: var(--text);
  border-color: rgba(126, 242, 255, 0.42);
  background: linear-gradient(90deg, rgba(126, 242, 255, 0.14), rgba(109, 252, 152, 0.06));
}

.sidebar-status {
  display: grid;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(126, 242, 255, 0.12);
}

.sidebar-status .pill {
  justify-content: center;
}

.sidebar-status small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.app-main {
  min-width: 0;
  padding: 22px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 18px;
}

.topbar h1,
.panel h2,
.login-box h1 {
  margin: 0;
  letter-spacing: 0;
}

.topbar h1 {
  font-size: 28px;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.topbar nav {
  display: flex;
  align-items: center;
  gap: 14px;
}

.user-pill {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  font-weight: 800;
}

.pill.online {
  color: #04240f;
  background: var(--green);
  border-color: var(--green);
}

.layout {
  display: grid;
  gap: 18px;
  max-width: none;
  margin: 0;
}

.view-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.view-tabs button {
  min-width: 132px;
}

.dashboard-view {
  display: none;
}

.dashboard-view.active {
  display: grid;
  gap: 18px;
}

#sessionView {
  padding: 18px;
  border-radius: 12px;
  background: #f4f7fb;
  color: #172033;
}

#sessionView.active {
  display: grid;
}

#sessionView .panel {
  border-color: #dce6f2;
  background: #ffffff;
  box-shadow: 0 14px 42px rgba(21, 34, 50, 0.08);
}

#sessionView .panel h2,
#sessionView .stat-title h3,
#sessionView .session-row strong {
  color: #172033;
}

#sessionView .panel-head p,
#sessionView .session-kpis span,
#sessionView .session-kpis small,
#sessionView .session-periods span,
#sessionView .session-periods small,
#sessionView .stat-title p,
#sessionView .stat-footer > span,
#sessionView .session-row small,
#sessionView .session-row.header {
  color: #667085;
}

#sessionView .tabs button,
#sessionView .legend button {
  color: #344054;
  border-color: #d9e4f2;
  background: #ffffff;
}

#sessionView .tabs button.active,
#sessionView .legend button.active,
#sessionView .tabs button:hover,
#sessionView .legend button:hover {
  color: #0f172a;
  border-color: #6366f1;
  background: #eef2ff;
}

#sessionView .chart-tooltip {
  color: #172033;
  border-color: #d9e4f2;
  background: #ffffff;
  box-shadow: 0 18px 50px rgba(21, 34, 50, 0.16);
}

#sessionView .chart-tooltip span {
  color: #667085;
}

.panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(12, 29, 34, 0.96), rgba(5, 12, 15, 0.96));
  box-shadow: 0 0 0 1px rgba(109, 252, 152, 0.03), 0 24px 90px rgba(0, 0, 0, 0.28);
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: 18px;
  padding: 20px;
  overflow: hidden;
}

.hero > *,
.stats-grid,
.stats-grid > * {
  min-width: 0;
}

.hero-main {
  display: flex;
  min-height: 154px;
  flex-direction: column;
  justify-content: center;
  padding: 18px;
  border: 1px solid rgba(109, 252, 152, 0.22);
  border-radius: 8px;
  background: rgba(109, 252, 152, 0.05);
}

.label,
.stats-grid span,
dt,
.panel-head p,
.login-box p {
  color: var(--muted);
}

.hero-main strong {
  display: block;
  margin: 4px 0;
  font-size: clamp(42px, 6vw, 92px);
  line-height: 0.95;
  color: var(--green);
  overflow-wrap: anywhere;
}

.hero-main small {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.stats-grid div {
  min-height: 112px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.stats-grid strong {
  display: block;
  margin-top: 10px;
  font-size: clamp(20px, 1.8vw, 30px);
  overflow-wrap: anywhere;
}

.stats-grid small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.session-overview {
  padding: 18px;
}

.session-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.session-kpis article,
.session-periods article {
  min-width: 0;
  min-height: 126px;
  padding: 16px;
  border: 1px solid #dce6f2;
  border-radius: 8px;
  background: #ffffff;
}

.session-kpis article:nth-child(1) {
  background: linear-gradient(135deg, #ecfdf3, #ffffff);
  border-color: #bbf7d0;
}

.session-kpis article:nth-child(2) {
  background: linear-gradient(135deg, #eff6ff, #ffffff);
  border-color: #bfdbfe;
}

.session-kpis article:nth-child(3) {
  background: linear-gradient(135deg, #fff1f2, #ffffff);
  border-color: #fecdd3;
}

.session-kpis article:nth-child(4) {
  background: linear-gradient(135deg, #f5f3ff, #ffffff);
  border-color: #ddd6fe;
}

.session-periods {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.session-periods article {
  min-height: 102px;
  border-color: #d9e4f2;
  background: linear-gradient(145deg, #ffffff, #f8fbff);
}

.session-periods article:nth-child(1) {
  border-color: #bfdbfe;
  background: linear-gradient(145deg, #eff6ff, #ffffff);
}

.session-periods article:nth-child(2) {
  border-color: #c7d2fe;
  background: linear-gradient(145deg, #eef2ff, #ffffff);
}

.session-periods article:nth-child(3) {
  border-color: #fed7aa;
  background: linear-gradient(145deg, #fff7ed, #ffffff);
}

.session-periods article:nth-child(4) {
  border-color: #bbf7d0;
  background: linear-gradient(145deg, #ecfdf3, #ffffff);
}

.session-kpis span,
.session-kpis small,
.session-periods span,
.session-periods small {
  display: block;
  color: var(--muted);
}

.session-kpis strong,
.session-periods strong {
  display: block;
  margin: 10px 0 8px;
  color: #16a34a;
  font-size: clamp(24px, 2.35vw, 38px);
  line-height: 1;
  overflow-wrap: anywhere;
}

.session-periods strong {
  color: #2563eb;
  font-size: clamp(22px, 2vw, 32px);
}

.session-list-panel {
  padding: 18px;
}

.session-table {
  display: grid;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.session-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(210px, 1.1fr) minmax(90px, 0.55fr) repeat(3, minmax(110px, 0.65fr)) minmax(92px, 0.5fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
  width: 100%;
  min-width: 980px;
  padding: 12px;
  border: 1px solid #dce6f2;
  border-radius: 8px;
  background: #ffffff;
}

.session-row.header {
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  background: #f8fafc;
}

.session-row:not(.header) {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
}

.session-row strong {
  display: block;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-wrap: anywhere;
}

.session-row small {
  display: block;
  margin-top: 3px;
  overflow-wrap: anywhere;
}

.session-row .running {
  display: inline-flex;
  width: fit-content;
  min-height: 24px;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  color: #031609;
  background: var(--green);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.session-row .closed {
  display: inline-flex;
  width: fit-content;
  min-height: 24px;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  color: #344054;
  background: #eef2f6;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.session-empty {
  padding: 16px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  color: #667085;
  background: #f8fafc;
}

#sessionChart {
  display: block;
  width: 100%;
  height: 430px;
  border: 1px solid #dce6f2;
  border-radius: 8px;
  background: #ffffff;
}

.session-stat-card .stat-footer i {
  background: var(--green);
}

.session-stat-card[data-session-stat="yearly"] .stat-footer i {
  background: #ff865c;
}

#sessionView .stat-card {
  border-color: #dce6f2;
  background: #ffffff;
}

#sessionView .stat-card canvas {
  border-color: #dce6f2;
  background: #ffffff;
}

#sessionView .stat-footer dt {
  color: #2563eb;
}

#sessionView .stat-footer dd {
  color: #475467;
}

.chart-panel {
  padding: 18px;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.panel-head h2,
.panel-head p {
  margin: 0;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

button,
.login-box button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 14px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

button.active,
button:hover,
.login-box button:hover {
  border-color: var(--blue);
  background: rgba(126, 242, 255, 0.13);
}

button.danger,
.danger {
  border-color: rgba(255, 107, 139, 0.38);
  color: var(--red);
}

.chart-wrap {
  position: relative;
}

#trafficChart {
  display: block;
  width: 100%;
  height: 520px;
  border: 1px solid rgba(126, 242, 255, 0.12);
  border-radius: 8px;
}

.chart-tooltip {
  position: absolute;
  z-index: 5;
  width: 230px;
  padding: 10px 12px;
  border: 1px solid rgba(126, 242, 255, 0.32);
  border-radius: 8px;
  background: rgba(5, 12, 15, 0.96);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.38);
  color: var(--text);
  pointer-events: none;
}

.chart-tooltip strong,
.chart-tooltip span {
  display: block;
}

.chart-tooltip strong {
  margin-bottom: 8px;
  font-size: 12px;
}

.chart-tooltip span {
  margin-top: 5px;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
}

.legend button {
  min-height: 32px;
  padding: 0 10px;
  color: var(--muted);
  opacity: 0.46;
}

.legend button.active {
  color: var(--text);
  opacity: 1;
}

.legend i {
  display: inline-block;
  width: 24px;
  height: 4px;
  margin-right: 8px;
  vertical-align: middle;
  border-radius: 999px;
}

.legend .in {
  background: var(--green);
}

.legend .out {
  background: var(--violet);
}

.legend .iperf {
  background: var(--yellow);
}

.ping-panel {
  display: block;
  padding: 18px;
}

.ping-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
}

.ping-head h2,
.ping-head p {
  margin: 0;
}

.ping-head p {
  margin-top: 4px;
  color: var(--muted);
}

.ping-head strong {
  color: var(--blue);
  font-size: 32px;
  white-space: nowrap;
}

#pingChart {
  display: block;
  width: 100%;
  height: 130px;
  border: 1px solid rgba(126, 242, 255, 0.12);
  border-radius: 8px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.grid .panel {
  padding: 18px;
}

.long-stats-panel {
  padding: 18px;
}

.long-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.stat-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(126, 242, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.stat-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.stat-title h3 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.stat-title p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.stat-card canvas {
  display: block;
  width: 100%;
  height: 230px;
  border: 1px solid rgba(126, 242, 255, 0.12);
  border-radius: 8px;
}

.stat-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.stat-footer > span {
  color: var(--muted);
  font-size: 12px;
}

.stat-footer i {
  display: inline-block;
  width: 24px;
  height: 4px;
  margin-right: 8px;
  border-radius: 999px;
  background: var(--yellow);
  vertical-align: middle;
}

.stat-card[data-stat="yearly"] .stat-footer i {
  background: #ff865c;
}

.stat-footer dl {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 4px 18px;
  margin: 0;
  text-align: right;
}

.stat-footer dt {
  color: var(--blue);
  font-size: 10px;
  font-weight: 900;
}

.stat-footer dd {
  grid-row: 2;
  color: var(--muted);
  font-size: 11px;
}

.monitor-panel {
  padding: 16px;
  background:
    linear-gradient(180deg, rgba(7, 20, 26, 0.98), rgba(5, 12, 15, 0.98)),
    radial-gradient(circle at 12% 0%, rgba(126, 242, 255, 0.10), transparent 34%);
}

.monitor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.monitor-head h2,
.monitor-head p {
  margin: 0;
}

.monitor-head p {
  margin-top: 4px;
  color: var(--muted);
}

.monitor-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.icon-btn {
  width: 38px;
  min-width: 38px;
  min-height: 38px;
  padding: 0;
  color: #031609;
  background: var(--green);
  border-color: var(--green);
  font-size: 22px;
  line-height: 1;
}

.monitor-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.monitor-summary-card {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 0 12px;
  min-width: 0;
  min-height: 96px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(126, 242, 255, 0.055), rgba(255, 255, 255, 0.018));
}

.monitor-summary-card i {
  grid-row: 1 / span 3;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin-top: 4px;
  border: 1px solid rgba(109, 252, 152, 0.55);
  border-radius: 999px;
  color: var(--green);
  background: rgba(109, 252, 152, 0.12);
  box-shadow: inset 0 0 22px rgba(109, 252, 152, 0.10);
  font-style: normal;
  font-size: 28px;
  line-height: 1;
}

.monitor-summary-card.latency-card i {
  color: var(--blue);
  border-color: rgba(126, 242, 255, 0.55);
  background: rgba(126, 242, 255, 0.12);
}

.monitor-summary-card.loss-card i {
  color: var(--yellow);
  border-color: rgba(255, 209, 102, 0.58);
  background: rgba(255, 209, 102, 0.12);
}

.monitor-summary-card.update-card i {
  color: #91b7ff;
  border-color: rgba(145, 183, 255, 0.58);
  background: rgba(145, 183, 255, 0.12);
}

.monitor-summary-card.origin-card i {
  color: #c78dff;
  border-color: rgba(199, 141, 255, 0.58);
  background: rgba(199, 141, 255, 0.12);
}

.monitor-summary-card span,
.monitor-summary-card small {
  display: block;
  color: var(--muted);
}

.monitor-summary-card strong {
  display: block;
  margin: 4px 0 2px;
  color: var(--text);
  font-size: clamp(22px, 1.9vw, 30px);
  line-height: 1;
  overflow-wrap: anywhere;
}

.monitor-summary-card.online-card strong,
.monitor-summary-card.online-card small {
  color: var(--green);
}

.monitor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 8px 10px;
  border: 1px solid rgba(126, 242, 255, 0.11);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.018);
}

.monitor-filter-group,
.monitor-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.monitor-filter-group > span {
  color: var(--text);
  font-weight: 900;
}

.monitor-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}

.monitor-filters button {
  min-height: 28px;
  padding: 0 9px;
  font-size: 12px;
}

.monitor-search {
  display: block;
}

.monitor-search input {
  width: min(260px, 28vw);
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(126, 242, 255, 0.16);
  border-radius: 6px;
  color: var(--text);
  background: rgba(0, 0, 0, 0.16);
  outline: none;
}

.monitor-search input:focus {
  border-color: var(--blue);
}

.monitor-rate {
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgba(126, 242, 255, 0.16);
  border-radius: 6px;
  color: var(--muted);
  font-weight: 900;
}

.monitor-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.monitor-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto auto auto;
  gap: 6px;
  min-width: 0;
  min-height: 162px;
  padding: 11px;
  border: 1px solid rgba(126, 242, 255, 0.16);
  border-radius: 8px;
  color: var(--text);
  text-align: left;
  background: rgba(255, 255, 255, 0.028);
  cursor: pointer;
  overflow: hidden;
}

.monitor-card:hover {
  transform: translateY(-1px);
  border-color: rgba(126, 242, 255, 0.36);
}

.monitor-card.online {
  border-color: rgba(109, 252, 152, 0.28);
}

.monitor-card.offline {
  border-color: rgba(255, 107, 139, 0.38);
}

.monitor-card.pending {
  border-color: rgba(255, 209, 102, 0.22);
}

.monitor-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.monitor-card-top small {
  min-width: 0;
  color: var(--green);
  font-weight: 900;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monitor-card.pending .monitor-card-top small {
  color: var(--yellow);
}

.monitor-card.offline .monitor-card-top small {
  color: var(--red);
}

.monitor-card-top b {
  flex: 0 0 auto;
  min-width: 58px;
  padding: 3px 8px;
  border-radius: 999px;
  color: #02140a;
  background: var(--yellow);
  text-align: center;
  font-size: 10px;
  text-transform: uppercase;
}

.monitor-card.online .monitor-card-top b {
  background: var(--green);
}

.monitor-card.offline .monitor-card-top b {
  color: #2a0208;
  background: var(--red);
}

.monitor-card strong {
  min-height: 34px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.22;
  overflow-wrap: anywhere;
}

.monitor-card code {
  color: var(--blue);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  overflow-wrap: anywhere;
}

.monitor-values {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: end;
  gap: 8px;
}

.monitor-values span {
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  text-align: right;
}

.monitor-values em {
  display: block;
  margin-bottom: 2px;
  color: var(--muted);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 10px;
  font-style: normal;
}

.monitor-values .latency {
  color: var(--green);
  font-size: 20px;
  font-weight: 900;
  text-align: left;
}

.monitor-card.pending .monitor-values .latency {
  color: var(--yellow);
}

.monitor-card.offline .monitor-values .latency {
  color: var(--red);
}

.monitor-spark {
  display: block;
  padding: 5px 6px;
  border: 0;
  border-radius: 6px;
  background: #071014;
}

.monitor-spark svg {
  display: block;
  width: 100%;
  height: 42px;
  overflow: visible;
}

.monitor-spark path,
.monitor-spark polyline {
  fill: none;
  stroke: var(--green);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.monitor-card.offline .monitor-spark path,
.monitor-card.offline .monitor-spark polyline {
  stroke: var(--red);
}

.monitor-card.pending .monitor-spark path,
.monitor-card.pending .monitor-spark polyline {
  stroke: var(--yellow);
}

.monitor-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 28px;
  color: var(--muted);
  font-size: 11px;
}

.monitor-card-edit {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 26px;
  padding: 0 9px;
  color: var(--blue);
  border-color: rgba(126, 242, 255, 0.24);
  background: rgba(5, 12, 15, 0.72);
  font-size: 11px;
}

.monitor-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
}

.monitor-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.72);
}

.monitor-modal[hidden] {
  display: none;
}

.monitor-modal-card {
  width: min(1080px, 100%);
  max-height: min(860px, calc(100vh - 48px));
  overflow: auto;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(12, 29, 34, 0.98), rgba(5, 12, 15, 0.98));
  box-shadow: 0 28px 120px rgba(0, 0, 0, 0.62);
}

.monitor-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.monitor-modal-head h2,
.monitor-modal-head p {
  margin: 0;
}

.monitor-modal-head p {
  margin-top: 4px;
  color: var(--blue);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  overflow-wrap: anywhere;
}

#monitorModalChart {
  display: block;
  width: 100%;
  height: 320px;
  border: 1px solid rgba(126, 242, 255, 0.12);
  border-radius: 8px;
}

.monitor-modal-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.monitor-modal-stats div {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(126, 242, 255, 0.13);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.monitor-modal-stats span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.monitor-modal-stats strong {
  display: block;
  margin-top: 4px;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  overflow-wrap: anywhere;
}

.monitor-history-list {
  display: grid;
  gap: 6px;
}

.monitor-history-list div {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid rgba(126, 242, 255, 0.10);
  border-radius: 8px;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.monitor-history-list strong {
  color: var(--text);
}

.target-form,
.user-form {
  display: grid;
  gap: 12px;
}

.target-form label,
.user-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-weight: 800;
}

.target-form input,
.user-form input,
.user-form select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--text);
  background: rgba(0, 0, 0, 0.24);
  font: inherit;
}

.target-form-actions {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.form-error {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(255, 107, 139, 0.35);
  border-radius: 8px;
  color: var(--red);
  background: rgba(255, 107, 139, 0.08);
}

.users-panel {
  padding: 18px;
}

.users-layout {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 18px;
}

.user-form,
.user-row {
  padding: 14px;
  border: 1px solid rgba(126, 242, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.users-list {
  display: grid;
  gap: 10px;
}

.user-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 10px;
}

.user-row strong,
.user-row span {
  display: block;
}

.user-row span,
.user-row small {
  color: var(--muted);
}

dl {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 11px 16px;
  margin: 18px 0 0;
}

dt {
  font-size: 13px;
}

dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

.login-page {
  display: grid;
  min-height: 100vh;
  place-items: center;
}

.login-box {
  width: min(420px, calc(100vw - 36px));
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.login-box form {
  display: grid;
  gap: 14px;
}

.login-box label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-weight: 700;
}

.login-box input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--text);
  background: rgba(0, 0, 0, 0.22);
  font: inherit;
}

.error {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 107, 139, 0.35);
  border-radius: 8px;
  color: var(--red);
  background: rgba(255, 107, 139, 0.08);
}

@media (max-width: 1500px) {
  .app-main {
    padding: 14px;
  }

  .sidebar {
    padding: 18px 14px;
  }

  .topbar,
  .layout {
    max-width: 100%;
  }

  .topbar {
    margin-bottom: 12px;
  }

  .topbar h1 {
    font-size: 24px;
  }

  .eyebrow {
    margin-bottom: 4px;
    font-size: 11px;
  }

  .layout {
    gap: 14px;
  }

  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
  }

  .hero-main {
    min-height: 126px;
    padding: 14px;
  }

  .hero-main strong {
    font-size: clamp(42px, 5.3vw, 72px);
  }

  .stats-grid {
    gap: 10px;
  }

  .stats-grid div {
    min-height: 94px;
    padding: 12px;
  }

  .stats-grid strong {
    margin-top: 6px;
    font-size: clamp(19px, 1.65vw, 25px);
  }

  .stats-grid small {
    margin-top: 6px;
    font-size: 12px;
  }

  .chart-panel,
  .ping-panel,
  .long-stats-panel,
  .grid .panel {
    padding: 14px;
  }

  .panel-head {
    margin-bottom: 10px;
  }

  .panel h2 {
    font-size: 22px;
  }

  .panel-head p {
    font-size: 14px;
  }

  button,
  .login-box button {
    min-height: 34px;
    padding: 0 12px;
  }

  #trafficChart {
    height: 420px;
  }

  #sessionChart {
    height: 380px;
  }

  .legend {
    gap: 10px;
    margin-top: 10px;
  }

  .ping-head {
    margin-bottom: 10px;
  }

  .ping-head strong {
    font-size: 26px;
  }

  #pingChart {
    height: 118px;
  }

  .long-stats-grid {
    gap: 14px;
  }

  .stat-card {
    padding: 12px;
  }

  .stat-card canvas {
    height: 200px;
  }

  .stat-title h3 {
    font-size: 13px;
  }

  .grid {
    gap: 14px;
  }

  .monitor-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .monitor-summary {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .monitor-summary-card {
    grid-template-columns: 42px minmax(0, 1fr);
    min-height: 86px;
    padding: 10px;
    gap: 0 9px;
  }

  .monitor-summary-card i {
    width: 38px;
    height: 38px;
    font-size: 22px;
  }

  .monitor-summary-card strong {
    font-size: clamp(18px, 1.6vw, 24px);
  }

  .monitor-card {
    min-height: 154px;
  }

  .monitor-modal-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  dl {
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 9px 12px;
    margin-top: 14px;
  }
}

@media (max-width: 1250px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .stats-grid div {
    min-height: 86px;
  }

  #trafficChart {
    height: 390px;
  }

  .long-stats-grid {
    grid-template-columns: 1fr;
  }

  .monitor-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .monitor-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .session-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .session-periods {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .monitor-summary-card.origin-card {
    grid-column: 1 / -1;
  }

  .monitor-toolbar,
  .monitor-filter-group {
    align-items: flex-start;
    flex-direction: column;
  }

  .monitor-tools {
    width: 100%;
  }

  .monitor-search,
  .monitor-search input {
    width: 100%;
  }
}

@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: relative;
    grid-template-rows: auto auto auto;
    height: auto;
    gap: 14px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .sidebar-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sidebar-status {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }

  .topbar,
  .panel-head,
  .monitor-head,
  .hero {
    grid-template-columns: 1fr;
  }

  .topbar,
  .panel-head,
  .monitor-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .stats-grid,
  .session-kpis,
  .session-periods,
  .grid,
  .long-stats-grid,
  .monitor-modal-stats,
  .users-layout {
    grid-template-columns: 1fr;
  }

  .monitor-grid,
  .monitor-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .monitor-summary-card.origin-card {
    grid-column: auto;
  }

  .ping-head {
    flex-direction: column;
  }

  #trafficChart {
    height: 380px;
  }

  #sessionChart {
    height: 340px;
  }

  #pingChart {
    height: 150px;
  }

  .stat-footer {
    grid-template-columns: 1fr;
  }

  .stat-footer dl {
    width: 100%;
    justify-content: space-between;
    text-align: left;
  }

  .monitor-modal-head,
  .monitor-history-list div,
  .user-row {
    grid-template-columns: 1fr;
  }

  .monitor-modal-head {
    display: grid;
  }
}

@media (max-width: 680px) {
  .sidebar-nav,
  .sidebar-status {
    grid-template-columns: 1fr;
  }

  .monitor-grid,
  .monitor-summary {
    grid-template-columns: 1fr;
  }

  .monitor-tools {
    flex-direction: column;
    align-items: stretch;
  }

  .monitor-foot {
    flex-direction: column;
  }
}