:root {
  color-scheme:dark;
  --bg:#10151d;
  --surface:#171d27;
  --line:#28303d;
  --text:#e5eaf2;
  --muted:#8c98aa;
  --accent:#42dbb0;
  --red:#f3838c;
  --font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:14px;
  line-height:1.6;
}
button,input,select {
  font:inherit;
}
button,a,input,select {
  -webkit-tap-highlight-color:transparent;
}
button,a {
  touch-action:manipulation;
}
button {
  cursor:pointer;
}
a {
  color:inherit;
  text-decoration:none;
}
button:disabled {
  cursor:wait;
  opacity:.55;
}
button:focus-visible,a:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:4px;
}
[hidden] {
  display:none!important;
}
.muted {
  color:var(--muted);
}
.green {
  color:var(--accent);
}
.red {
  color:var(--red);
}
.mono {
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
}
.eyebrow {
  font-size:10px;
  letter-spacing:2px;
  font-weight:600;
  color:var(--muted);
}
.brand-mark {
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  background:var(--accent);
  color:#0c332a;
  border-radius:13px;
  font-size:46px;
  font-weight:700;
  line-height:1;
}
.brand-mark.small {
  width:34px;
  height:34px;
  font-size:34px;
  border-radius:9px;
  flex-shrink:0;
}
.sidebar {
  position:fixed;
  inset:0 auto 0 0;
  width:232px;
  background:#131923;
  border-right:1px solid var(--line);
  padding:30px 20px;
  display:flex;
  flex-direction:column;
}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:19px;
  font-weight:650;
  letter-spacing:-.5px;
}
.brand-sub {
  display:block;
  color:var(--muted);
  font-size:10px;
  letter-spacing:1px;
  font-weight:400;
  margin-top:2px;
}
.nav-caption {
  color:#6d7a90;
  font-size:11px;
  letter-spacing:1px;
  margin:48px 12px 14px;
}
.nav-item {
  padding:11px 13px;
  border-radius:7px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
}
.nav-item.active {
  background:#20352f;
  color:#72e7c5;
}
.nav-count {
  margin-left:auto;
  font-size:11px;
  background:#2b4b40;
  border-radius:5px;
  min-width:24px;
  text-align:center;
}
.sidebar-bottom {
  margin-top:auto;
  color:#a5b1c1;
  font-size:11px;
}
.sidebar-meta {
  display:block;
  color:#65738a;
  margin:8px 0 0 13px;
  font-size:10px;
}
.live-dot {
  display:inline-block;
  background:var(--accent);
  height:6px;
  width:6px;
  vertical-align:middle;
  border-radius:50%;
  margin-right:7px;
  box-shadow:0 0 0 3px #42dbb010;
}
.main-shell {
  margin-left:232px;
}
.topbar {
  height:76px;
  border-bottom:1px solid var(--line);
  padding:0 42px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#121821;
}
.breadcrumb {
  font-size:12px;
  color:var(--muted);
}
.breadcrumb span {
  margin:0 14px;
  color:#4d5b70;
}
.breadcrumb strong {
  color:#c4cedd;
  font-weight:400;
}
.account {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  color:#b5c1d1;
}
.avatar {
  width:28px;
  height:28px;
  border:1px solid #38584e;
  background:#23352f;
  color:#7fe0be;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:11px;
}
.text-button {
  border:0;
  background:transparent;
  color:var(--muted);
  padding:5px 8px;
  font-size:12px;
}
.text-button:hover {
  color:var(--text);
}
main {
  max-width:1610px;
  margin:auto;
  padding:40px 42px 24px;
}
.page-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:30px;
}
h1,h2,h3,p {
  margin-top:0;
}
h1 {
  font-size:30px;
  line-height:1.3;
  margin:10px 0 9px;
  letter-spacing:-1px;
  font-weight:600;
}
.page-heading p {
  font-size:13px;
  margin:0;
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:40px;
  padding:9px 17px;
  border:1px solid transparent;
  border-radius:6px;
  font-weight:550;
  font-size:12px;
}
.button.primary {
  background:var(--accent);
  color:#10352b;
  box-shadow:0 2px 8px #0002;
}
.button.primary:hover {
  background:#6ae8c4;
}
.button.secondary {
  color:#cad4e2;
  border-color:#364253;
  background:#202937;
}
.button.secondary:hover {
  background:#293446;
}
.button.danger {
  background:#d44e5b;
  color:white;
}
.stats {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin-bottom:30px;
}
.stat-card {
  background:var(--surface);
  border:1px solid var(--line);
  padding:20px 22px;
  border-radius:9px;
}
.stat-label {
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#adb8c9;
  font-size:12px;
}
.stat-label>span {
  font-size:15px;
}
.stat-value {
  font-size:34px;
  line-height:1.3;
  font-weight:550;
  letter-spacing:-1px;
  margin:14px 0 9px;
  font-variant-numeric:tabular-nums;
}
.unit {
  color:var(--muted);
  font-size:13px;
  letter-spacing:0;
  margin-left:7px;
  font-weight:400;
}
.stat-note {
  font-size:10px;
  color:#7d8aa0;
}
.monitor-panel {
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--surface);
  overflow:hidden;
}
.panel-heading {
  padding:23px 24px 19px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
h2 {
  font-size:16px;
  font-weight:550;
  margin:0;
}
.count-tag {
  background:#293342;
  color:#98a8bc;
  border:1px solid #344053;
  font-size:10px;
  display:inline-block;
  text-align:center;
  min-width:23px;
  line-height:20px;
  border-radius:5px;
  margin-left:7px;
  vertical-align:2px;
}
.refresh-note {
  font-size:10px;
  color:var(--muted);
}
.toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 24px 20px;
  gap:16px;
}
.filters {
  display:flex;
  gap:3px;
  background:#101720;
  border:1px solid #293340;
  border-radius:6px;
  padding:3px;
}
.filter {
  background:transparent;
  border:0;
  border-radius:4px;
  color:#8c9aad;
  padding:6px 16px;
  font-size:11px;
  white-space:nowrap;
}
.filter.active {
  background:#303b4b;
  color:#e6ecf5;
  box-shadow:0 1px 4px #0002;
}
.search {
  display:flex!important;
  flex-direction:row;
  align-items:center;
  gap:10px;
  width:240px;
  border:1px solid #313c4c;
  background:#131a24;
  border-radius:6px;
  padding:0 11px;
  margin:0!important;
}
.search>span {
  font-size:22px;
  color:#8592a6;
  line-height:1;
}
.search input {
  border:0!important;
  outline:none!important;
  background:transparent!important;
  font-size:11px;
  margin:0!important;
  padding:8px 0!important;
  width:100%;
  min-width:0;
}
.search:focus-within {
  border-color:var(--accent);
}
.table-scroll {
  overflow-x:auto;
}
.tag-toolbar {
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:0 24px 18px;
}
.tag-caption {
  flex-shrink:0;
  padding-top:6px;
  font-size:10px;
  color:var(--muted);
}
.tag-filters,.monitor-tags,.tag-preview,.tag-suggestions {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.tag-filter {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 9px;
  border:1px solid #354252;
  border-radius:5px;
  color:#a3b1c4;
  background:#18222e;
  font-size:10px;
  overflow-wrap:anywhere;
}
.tag-filter>span {
  font-variant-numeric:tabular-nums;
  opacity:.65;
}
.tag-filter:hover,.tag-filter.active {
  border-color:#39715e;
  background:#203a31;
  color:#7ae5c2;
}
.monitor-tags {
  max-width:235px;
  margin-top:7px;
  white-space:normal;
}
.monitor-tags:empty,.tag-preview:empty,.tag-suggestions:empty {
  display:none;
}
.monitor-tag {
  border:1px solid #344a55;
  border-radius:4px;
  padding:1px 6px;
  font-size:9px;
  color:#9fc9d3;
  background:#20303c;
  overflow-wrap:anywhere;
  max-width:100%;
}
button.monitor-tag:hover {
  color:var(--accent);
  border-color:#43806c;
}
.tag-preview,.tag-suggestions {
  margin-bottom:16px;
}
.monitor-table {
  width:100%;
  border-collapse:collapse;
  white-space:nowrap;
  text-align:left;
}
.monitor-table th,.history-table th {
  font-size:10px;
  font-weight:400;
  color:#8a99ae;
  padding:13px 20px;
  background:#141b25;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.monitor-table th:first-child,.monitor-table td:first-child {
  padding-left:24px;
}
.monitor-table td {
  height:98px;
  padding:16px 20px;
  border-bottom:1px solid #252e3c;
  font-size:12px;
}
.monitor-table tr:last-child td {
  border-bottom:0;
}
.monitor-table tbody tr:hover {
  background:#1b2330;
}
.service-cell {
  display:flex;
  align-items:center;
  gap:12px;
}
.protocol-icon {
  width:36px;
  height:38px;
  border:1px solid #334154;
  border-radius:7px;
  background:#202b3a;
  display:grid;
  place-items:center;
  color:#97aed0;
  font-size:10px;
  font-family:ui-monospace,monospace;
}
.service-name {
  font-weight:550;
  font-size:12px;
  max-width:235px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.target {
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:10px;
  color:#8593a9;
  max-width:235px;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-top:4px;
}
.badge {
  display:inline-flex;
  gap:6px;
  align-items:center;
  padding:3px 9px;
  border-radius:5px;
  font-size:10px;
  border:1px solid #365047;
  color:#72dfbb;
  background:#1e352e;
}
.badge:before {
  content:"";
  display:inline-block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:currentColor;
}
.badge.down {
  color:#f39098;
  border-color:#5a363e;
  background:#36242c;
}
.badge.paused,.badge.pending,.badge.stale {
  color:#a6b0c1;
  border-color:#3c4657;
  background:#27303c;
}
.badge.stale {
  color:#e3ba79;
  border-color:#5a4934;
  background:#352f25;
}
.number {
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:12px;
}
.subtext {
  font-size:9px;
  color:#708096;
  margin-top:5px;
}
.uptime-bars {
  display:flex;
  gap:3px;
  align-items:center;
  min-width:150px;
  height:21px;
}
.bar {
  height:21px;
  width:4px;
  flex:1;
  max-width:6px;
  border-radius:2px;
  background:#42c99f;
}
.bar.down {
  background:#e77682;
}
.bar.blank {
  background:#2b3544;
}
.bar:hover {
  filter:brightness(1.4);
}
.bars-caption {
  display:flex;
  justify-content:space-between;
  color:#6e7c93;
  font-size:8px;
  margin-top:7px;
}
.row-actions {
  display:flex;
  gap:6px;
}
.action-button {
  border:1px solid #354052;
  background:transparent;
  color:#9babbe;
  padding:5px 7px;
  font-size:10px;
  border-radius:4px;
  white-space:nowrap;
}
.action-button:hover {
  background:#2b3849;
  color:var(--text);
  border-color:#53627a;
}
.action-button.delete {
  color:#c77c86;
}
.panel-footer {
  border-top:1px solid var(--line);
  padding:14px 24px;
  display:flex;
  justify-content:space-between;
  font-size:10px;
  color:#738198;
  gap:15px;
}
.empty-state {
  text-align:center;
  padding:64px 20px 70px;
}
.empty-icon {
  font-size:48px;
  color:var(--accent);
  line-height:1;
  margin-bottom:16px;
}
.empty-state h3 {
  font-size:16px;
  margin-bottom:9px;
  font-weight:500;
}
.empty-state p {
  color:var(--muted);
  font-size:12px;
  margin-bottom:24px;
}
.page-footer {
  display:flex;
  justify-content:space-between;
  color:#617087;
  font-size:10px;
  padding-top:25px;
}
.version {
  color:#42516a;
  margin-left:5px;
}
.login-wrap {
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:30px;
  background:radial-gradient(ellipse at 50% 0,#1c393333,transparent 60%);
}
.login-card {
  width:380px;
  max-width:100%;
}
.login-card .brand-mark {
  margin-bottom:30px;
}
.login-card h1 {
  font-size:34px;
  margin:15px 0 16px;
  line-height:1.4;
}
.login-card>.muted {
  margin-bottom:28px;
  font-size:13px;
}
.login-note {
  text-align:center;
  font-size:10px;
  color:#6b7c91;
  margin-top:24px;
}
.full {
  width:100%;
}
label {
  display:flex;
  flex-direction:column;
  font-size:12px;
  color:#b3c0d2;
  margin:0 0 17px;
  gap:7px;
}
input,select {
  border:1px solid #364256;
  background:#101822;
  color:var(--text);
  border-radius:6px;
  padding:10px 12px;
  width:100%;
  outline:none;
  font-size:13px;
  min-width:0;
}
input:focus,select:focus {
  border-color:var(--accent);
}
input::placeholder {
  color:#65758c;
}
.modal {
  color:var(--text);
  background:#19212d;
  border:1px solid #3a4659;
  border-radius:12px;
  padding:27px;
  width:510px;
  max-width:calc(100vw - 32px);
  max-height:calc(100dvh - 40px);
  box-shadow:0 25px 100px #0008;
}
.modal::backdrop {
  background:#02070ecc;
  backdrop-filter:blur(5px);
}
.modal-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:26px;
}
.modal-heading h2 {
  font-size:21px;
  margin-top:8px;
}
.icon-button {
  border:0;
  background:transparent;
  color:#95a2b6;
  font-size:25px;
  line-height:1;
  padding:8px;
}
.field-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.host-row {
  grid-template-columns:3fr 1fr;
}
.field-help {
  color:#8393a9;
  font-size:11px;
  margin:0 0 16px;
}
.modal-actions {
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:25px;
  padding-top:20px;
  border-top:1px solid var(--line);
}
.form-error {
  color:#ff929d;
  font-size:12px;
  min-height:0;
  margin:7px 0 14px;
}
.form-error:empty {
  display:none;
}
.history-modal {
  width:850px;
}
.history-scroll {
  overflow:auto;
  max-height:55dvh;
}
.history-table {
  width:100%;
  border-collapse:collapse;
  text-align:left;
  font-size:11px;
}
.history-table th {
  position:sticky;
  top:0;
}
.history-table td {
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  max-width:300px;
  overflow-wrap:anywhere;
  vertical-align:top;
}
.small-modal {
  width:400px;
}
.small-modal h2 {
  font-size:20px;
  margin-bottom:15px;
}
.toast {
  position:fixed;
  bottom:25px;
  left:50%;
  transform:translateX(-50%);
  padding:12px 22px;
  border:1px solid #486255;
  background:#213b32;
  color:#b1f0d7;
  border-radius:7px;
  z-index:100;
  box-shadow:0 10px 40px #0005;
  font-size:13px;
  max-width:90vw;
}
.toast.error {
  background:#432b32;
  border-color:#87505c;
  color:#ffc0ca;
}
.connection-warning {
  padding:12px 16px;
  border:1px solid #806633;
  background:#342e23;
  color:#e3c489;
  border-radius:6px;
  font-size:12px;
  margin-bottom:20px;
}
@media(min-width:1600px) {
  .monitor-table td {
    height:105px;
  }
  .monitor-table .service-name,.target {
    max-width:310px;
  }
  .uptime-bars {
    min-width:210px;
  }
}
@media(max-width:1200px) {
  .sidebar {
    width:195px;
    padding:28px 16px;
  }
  .brand {
    font-size:17px;
  }
  .main-shell {
    margin-left:195px;
  }
  main {
    padding:30px 24px;
  }
  .topbar {
    padding:0 24px;
  }
  .stat-card {
    padding:17px;
  }
  .monitor-table td,.monitor-table th {
    padding-right:14px;
    padding-left:14px;
  }
  .service-name,.target {
    max-width:190px;
  }
  .uptime-bars {
    min-width:130px;
  }
  .row-actions {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4px;
  }
  .stat-note {
    font-size:9px;
  }
}
@media(max-width:850px) {
  .sidebar {
    position:relative;
    width:100%;
    height:70px;
    padding:15px 20px;
    border-bottom:1px solid var(--line);
    border-right:0;
  }
  .sidebar .nav-caption,.sidebar .nav-item,.sidebar-bottom,.brand-sub {
    display:none;
  }
  .main-shell {
    margin-left:0;
  }
  .topbar {
    height:54px;
    padding:0 20px;
  }
  .brand {
    font-size:18px;
  }
  .stats {
    gap:10px;
  }
  .stat-card {
    padding:15px 12px;
  }
  .stat-value {
    font-size:27px;
  }
  .stat-note {
    font-size:8px;
  }
  .page-heading h1 {
    font-size:26px;
  }
  main {
    padding:25px 20px;
  }
  .monitor-table {
    min-width:920px;
  }
  .page-footer {
    font-size:9px;
  }
  .toolbar,.panel-heading {
    padding-left:18px;
    padding-right:18px;
  }
  .tag-toolbar {
    padding-left:18px;
    padding-right:18px;
  }
}
@media(max-width:530px) {
  .stats {
    grid-template-columns:1fr 1fr;
    margin-bottom:20px;
  }
  .stat-note {
    font-size:10px;
  }
  .stat-value {
    margin:9px 0 5px;
  }
  .page-heading {
    align-items:flex-end;
    gap:10px;
    margin-bottom:22px;
  }
  .page-heading .eyebrow {
    font-size:8px;
    letter-spacing:1px;
  }
  .page-heading p {
    font-size:11px;
    max-width:190px;
  }
  .page-heading .button {
    padding:9px 12px;
    white-space:nowrap;
  }
  .toolbar {
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }
  .search {
    width:100%;
  }
  .filters {
    justify-content:space-between;
  }
  .filter {
    flex:1;
    padding:6px 10px;
  }
  .page-footer {
    gap:20px;
  }
  .page-footer>span:last-child {
    text-align:right;
    max-width:180px;
  }
  .breadcrumb {
    font-size:10px;
  }
  .account {
    gap:6px;
  }
  .panel-footer {
    flex-direction:column;
    gap:3px;
  }
  .refresh-note {
    font-size:9px;
  }
  .history-table td,.history-table th {
    padding:10px 7px;
  }
  .history-table {
    min-width:540px;
  }
  .modal {
    padding:22px;
  }
  .login-card h1 {
    font-size:31px;
  }
  main {
    padding:24px 14px;
  }
  .field-row {
    gap:10px;
  }
}