:root {
  --bg: #060b18;
}

html, body { height: 100%; }

body {
  background:
    radial-gradient(circle at 20% 0%, rgba(14,136,232,0.20), transparent 40%),
    radial-gradient(circle at 80% 100%, rgba(125,193,251,0.15), transparent 50%),
    var(--bg);
  font-family: 'Segoe UI', system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}

.glass {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.glass-strong {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.18);
  backdrop-filter: blur(20px);
}

.input {
  background: rgba(2, 6, 23, .6);
  border: 1px solid rgba(148, 163, 184, .25);
  border-radius: 10px;
  padding: 9px 12px;
  outline: none;
  transition: all .2s;
  color: #e2e8f0;
  width: 100%;
}
.input:focus {
  border-color: #38a3f6;
  box-shadow: 0 0 0 3px rgba(56,163,246,.18);
}
.input::placeholder { color: rgba(148,163,184,.5); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 10px;
  font-weight: 500;
  transition: all .15s;
  cursor: pointer;
  border: 1px solid transparent;
  user-select: none;
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(135deg, #0e88e8 0%, #0357a1 100%);
  color: #fff;
  box-shadow: 0 4px 18px -6px rgba(14,136,232,.6);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 24px -6px rgba(14,136,232,.8); }
.btn-ghost {
  background: rgba(30,41,59,.6);
  color: #cbd5e1;
  border-color: rgba(148,163,184,.18);
}
.btn-ghost:hover { background: rgba(30,41,59,.9); }
.btn-danger {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
  color: #fff;
}
.btn-success {
  background: linear-gradient(135deg, #22c55e 0%, #15803d 100%);
  color: #fff;
}
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.tag {
  display: inline-flex; align-items:center;
  padding: 2px 8px;
  font-size: 12px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.25);
  background: rgba(30,41,59,.6);
}
.tag-online   { background: rgba(34,197,94,.15);  color:#86efac; border-color:rgba(34,197,94,.3); }
.tag-offline  { background: rgba(100,116,139,.15);color:#cbd5e1; }
.tag-warn     { background: rgba(234,179,8,.18);  color:#fde68a; border-color:rgba(234,179,8,.3); }
.tag-err      { background: rgba(239,68,68,.18);  color:#fca5a5; border-color:rgba(239,68,68,.3); }
.tag-running  { background: rgba(56,163,246,.18); color:#bae6fd; border-color:rgba(56,163,246,.35); }

.card {
  background: rgba(15, 23, 42, .6);
  border: 1px solid rgba(148,163,184,.12);
  border-radius: 14px;
  backdrop-filter: blur(14px);
}

.gradient-text {
  background: linear-gradient(135deg, #7dc1fb 0%, #0e88e8 50%, #074a85 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.scrollable::-webkit-scrollbar { width: 8px; height: 8px;}
.scrollable::-webkit-scrollbar-thumb { background: rgba(148,163,184,.2); border-radius:4px;}
.scrollable::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,.4); }

/* 高亮日志级别 */
.lvl-info { color: #93c5fd; }
.lvl-warn { color: #fcd34d; }
.lvl-error{ color: #fca5a5; }

/* 模态遮罩 */
.modal-mask {
  position: fixed; inset: 0;
  background: rgba(2,6,23,.7);
  display: flex; align-items: center; justify-content: center;
  z-index: 50;
  backdrop-filter: blur(4px);
}

[x-cloak]{display:none!important;}

/* 简单动画 */
@keyframes fadeIn { from{opacity:0; transform: translateY(6px);} to{opacity:1; transform:none;} }
.animate-in { animation: fadeIn .25s ease-out; }

/* 切换按钮 */
.toggle {
  width: 38px; height: 22px; background: rgba(100,116,139,.5); border-radius: 999px;
  position: relative; cursor: pointer; transition: all .2s;
}
.toggle::after {
  content: ""; width: 18px; height: 18px; background: white; border-radius: 50%;
  position: absolute; left: 2px; top: 2px; transition: all .2s;
}
.toggle.on { background: linear-gradient(135deg, #0e88e8, #0357a1); }
.toggle.on::after { left: 18px; }

.nav-item {
  display:flex; align-items:center; gap:10px;
  padding: 10px 14px; border-radius: 10px;
  color: #94a3b8; cursor: pointer;
  transition: all .15s;
  font-size: 14px;
}
.nav-item:hover { background: rgba(30,41,59,.5); color: #e2e8f0;}
.nav-item.active {
  background: linear-gradient(135deg, rgba(14,136,232,.3), rgba(7,74,133,.2));
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(56,163,246,.4);
}

table th { font-weight: 500; color: #94a3b8; font-size: 12px; text-align: left; padding: 10px 12px;
  border-bottom: 1px solid rgba(148,163,184,.1); background: rgba(15,23,42,.4); position:sticky; top:0;}
table td { padding: 12px; border-bottom: 1px solid rgba(148,163,184,.08); font-size: 14px;}
table tr:hover td { background: rgba(30,41,59,.3); }

.checkbox {
  width: 16px; height: 16px; border-radius: 4px; cursor: pointer;
  accent-color: #0e88e8;
}