/* Sentinel · 账号监测台 — Steel Cyan (冷钢青 NOC 色系) */
:root{
  --page:#080b0c; --bg:#111618; --panel-2:#182022; --panel-3:#1e282b;
  --panel-hover:#1b2528; --side-bg:#0c1113;
  --border:rgba(255,255,255,.07); --border-2:rgba(255,255,255,.045);
  --ink-1:#e8f0f1; --ink-2:#a3b1b4; --ink-3:#828f93;
  --accent:#2FD3C5; --accent-hi:#45ded1; --accent-2:#F0A868; --accent-soft:rgba(47,211,197,.13);
  --on-accent:#06110f; --glow:rgba(47,211,197,.28);
  --up:#3FCB86; --down:#FF6257; --warn:#F0A868; --dot-offline:#5c6a6e;
  --shadow:0 1px 3px rgba(0,0,0,.38);
  --shadow-lg:0 40px 90px -50px rgba(0,0,0,.72);
  --r:18px; --r-sm:12px; --r-lg:26px;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',Roboto,sans-serif;
  --mono:ui-monospace,'Cascadia Code','JetBrains Mono',Consolas,'Courier New',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:dark;overflow-x:clip}
body{
  font-family:var(--sans);background:var(--page);color:var(--ink-1);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1100px 620px at 82% -12%,rgba(47,211,197,.09),transparent 62%),
    radial-gradient(800px 520px at -8% 108%,rgba(240,168,104,.05),transparent 60%);
}
::selection{background:rgba(47,211,197,.28)}
a{color:var(--accent);text-decoration:none}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:14px}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-soft);border-radius:var(--r-sm)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border-radius:var(--r-sm);border:1px solid var(--border);
  background:var(--panel-2);color:var(--ink-1);
  padding:9px 16px;font-size:13px;font-weight:600;
  transition:background .18s ease,border-color .18s ease,transform .12s ease,box-shadow .18s ease;
}
.btn:hover{background:var(--panel-3);border-color:rgba(255,255,255,.12)}
.btn:active{transform:translateY(1px)}
.btn-primary{
  background:var(--accent);border-color:transparent;color:var(--on-accent);
}
.btn-primary:hover{background:var(--accent-hi);box-shadow:0 6px 22px var(--glow)}
.btn-danger{background:transparent;border-color:rgba(255,98,87,.35);color:var(--down)}
.btn-danger:hover{background:rgba(255,98,87,.1);border-color:rgba(255,98,87,.5)}
.btn-sm{padding:5px 11px;font-size:12px;border-radius:9px}
.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}

.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12.5px;color:var(--ink-2);font-weight:500}
.field .req{color:var(--warn);margin-left:2px}
.input{
  background:var(--panel-2);border:1px solid var(--border);border-radius:var(--r-sm);
  color:var(--ink-1);padding:10px 13px;transition:border-color .18s ease,box-shadow .18s ease;
  width:100%;
}
.input::placeholder{color:var(--ink-3);opacity:.7}
.input:hover{border-color:rgba(255,255,255,.13)}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23828f93' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}

.panel{
  background:var(--bg);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--shadow);
}

.badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:600;padding:2.5px 9px;border-radius:999px;
  letter-spacing:.02em;
}
.badge-online{background:rgba(63,203,134,.12);color:var(--up)}
.badge-stale{background:rgba(240,168,104,.13);color:var(--warn)}
.badge-offline{background:rgba(160,175,180,.1);color:var(--ink-3)}
.badge-role{background:var(--accent-soft);color:var(--accent)}

.dialog-scrim{
  position:fixed;inset:0;background:rgba(4,7,8,.66);backdrop-filter:blur(3px);
  z-index:90;display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .2s ease;
}
.dialog-scrim.open{opacity:1;pointer-events:auto}
.dialog{
  width:min(440px,100%);background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:24px;
  transform:translateY(10px) scale(.985);transition:transform .22s cubic-bezier(.2,.7,.3,1);
}
.dialog-scrim.open .dialog{transform:none}
.dialog h3{font-size:16px;margin-bottom:16px}
.dialog .row{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}

.toast-wrap{position:fixed;top:18px;right:18px;z-index:120;display:flex;flex-direction:column;gap:10px}
.toast{
  min-width:220px;max-width:340px;padding:12px 16px;border-radius:var(--r-sm);
  background:var(--panel-3);border:1px solid var(--border);box-shadow:var(--shadow-lg);
  font-size:13px;display:flex;gap:9px;align-items:flex-start;
  animation:toast-in .28s cubic-bezier(.2,.7,.3,1);
}
.toast.out{opacity:0;transform:translateX(12px);transition:.3s ease}
.toast-ok{border-left:3px solid var(--up)}
.toast-err{border-left:3px solid var(--down)}
.toast-warn{border-left:3px solid var(--warn)}
@keyframes toast-in{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}

.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.dot-online{background:var(--up)}
.dot-stale{background:var(--warn)}
.dot-offline{background:var(--dot-offline)}

.empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:48px 20px;color:var(--ink-3);text-align:center;
}
.empty svg{opacity:.5}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}