:root{
  --bg:#0f141b; --panel:#171f2a; --panel2:#1e2835; --line:#2a3545;
  --text:#e6edf5; --muted:#8a99ac; --primary:#2f81f7; --primary-d:#1f6fe0;
  --up:#2ea043; --down:#f85149; --warn:#d29922; --chip:#243041;
  --radius:12px; --shadow:0 4px 18px rgba(0,0,0,.35);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#f3f5f9; --panel:#ffffff; --panel2:#f7f9fc; --line:#e2e8f1;
    --text:#182230; --muted:#5a6b80; --chip:#eef2f7; --shadow:0 4px 18px rgba(20,40,80,.08);
  }
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--text); font-size:15px; line-height:1.45; -webkit-text-size-adjust:100%;
}
code{background:var(--chip); padding:1px 5px; border-radius:5px; font-size:.85em}
.muted{color:var(--muted)} .tiny{font-size:.8rem} .center{text-align:center}

.topbar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 14px;
  background:var(--panel); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20}
.brand{font-weight:700; font-size:1.05rem; display:flex; align-items:center; gap:6px}
.brand span{white-space:nowrap}
.sys{margin-left:auto; display:flex; align-items:center; gap:10px; font-size:.82rem; color:var(--muted)}
.dot{width:10px;height:10px;border-radius:50%;background:var(--muted);display:inline-block;margin-right:2px;vertical-align:-1px}
.dot.ok{background:var(--up)} .dot.bad{background:var(--down)}
.top-actions{display:flex; align-items:center; gap:8px}
.switchlbl{font-size:.8rem; color:var(--muted); display:flex; align-items:center; gap:4px}

.tabs{display:flex; gap:4px; padding:10px 14px 0; background:var(--panel); border-bottom:1px solid var(--line); position:sticky; top:49px; z-index:15}
.tab{border:none; background:transparent; color:var(--muted); padding:10px 14px; font-size:.95rem; cursor:pointer; border-bottom:2px solid transparent; border-radius:8px 8px 0 0}
.tab.active{color:var(--text); border-bottom-color:var(--primary); font-weight:600}

main{padding:14px; max-width:1100px; margin:0 auto}
.panel{display:none} .panel.active{display:block}
.sysline{color:var(--muted); font-size:.85rem; margin-bottom:8px}
.health{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px}
.hchip{font-size:.82rem; background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:5px 10px; color:var(--muted)}
.hchip b{color:var(--text); font-variant-numeric:tabular-nums}
.hchip.ok{border-color:rgba(46,160,67,.4)} .hchip.ok b{color:var(--up)}
.hchip.warn{border-color:rgba(210,153,34,.5)} .hchip.warn b{color:var(--warn)}
.hchip.bad{border-color:var(--down); background:rgba(248,81,73,.1)} .hchip.bad b{color:var(--down)}
.toolbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:12px}
.toolbar input[type=search]{flex:1; min-width:180px}
.chk{display:flex; align-items:center; gap:6px; font-size:.85rem; color:var(--muted)}
.row-between{display:flex; justify-content:space-between; align-items:center}

input,select{background:var(--panel2); color:var(--text); border:1px solid var(--line); border-radius:9px; padding:10px 12px; font-size:15px; outline:none; width:100%}
input:focus{border-color:var(--primary)}
.btn{background:var(--panel2); color:var(--text); border:1px solid var(--line); border-radius:9px; padding:9px 14px; font-size:.9rem; cursor:pointer; white-space:nowrap}
.btn:hover{border-color:var(--primary)}
.btn.primary{background:var(--primary); border-color:var(--primary); color:#fff}
.btn.primary:hover{background:var(--primary-d)}
.btn.ghost{background:transparent}
.btn.block{width:100%; margin-top:10px; padding:12px}
.btn.sm{padding:6px 10px; font-size:.82rem}
.btn.danger{color:var(--down); border-color:var(--down)}
.btn.danger:hover{background:var(--down); color:#fff}
.btn:disabled{opacity:.5; cursor:not-allowed}

.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius)}
table.grid{width:100%; border-collapse:collapse; background:var(--panel)}
table.grid th,table.grid td{padding:10px 12px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap}
table.grid th{font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); background:var(--panel2)}
table.grid tr:last-child td{border-bottom:none}
.badge{display:inline-block; padding:2px 9px; border-radius:20px; font-size:.78rem; font-weight:600}
.badge.up{background:rgba(46,160,67,.15); color:var(--up)}
.badge.down{background:rgba(248,81,73,.15); color:var(--down)}
.badge.q{background:var(--chip); color:var(--muted)}
.rate{font-variant-numeric:tabular-nums; font-size:.85rem}
.uti{display:flex; flex-direction:column; gap:3px; min-width:90px}
.uti-val{font-variant-numeric:tabular-nums; font-size:.82rem}
.uti-bar{display:block; height:5px; border-radius:4px; background:var(--chip); overflow:hidden}
.uti-bar i{display:block; height:100%; border-radius:4px}
.err-n{color:var(--warn); font-variant-numeric:tabular-nums}
.desc-cell{max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer}
.desc-cell:hover{color:var(--primary)}

.cards{display:none; flex-direction:column; gap:10px}
.ifcard{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:12px}
.ifcard .r1{display:flex; justify-content:space-between; align-items:center; gap:8px}
.ifcard .pname{font-weight:700}
.ifcard .desc{color:var(--muted); font-size:.85rem; margin:4px 0 8px; word-break:break-word}
.ifcard .meta{display:flex; gap:14px; font-size:.82rem; color:var(--muted); margin-bottom:10px; flex-wrap:wrap}
.ifcard .acts{display:flex; gap:8px; flex-wrap:wrap}

.card-box{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin-bottom:14px; box-shadow:var(--shadow)}
.card-box h3{margin:0 0 10px}
.form-row{display:flex; gap:10px; flex-wrap:wrap}
.form-row input{flex:1; min-width:140px}
.msg{margin-top:10px; font-size:.88rem}
.out{background:var(--panel2); border:1px solid var(--line); border-radius:9px; padding:12px; overflow:auto; max-height:320px; font-size:.8rem; white-space:pre-wrap; word-break:break-word}

.alert{padding:10px 12px; border-radius:9px; margin:10px 0; font-size:.88rem}
.alert.err{background:rgba(248,81,73,.12); color:var(--down); border:1px solid rgba(248,81,73,.3)}
.alert.ok{background:rgba(46,160,67,.12); color:var(--up); border:1px solid rgba(46,160,67,.3)}
.toast{position:fixed; left:50%; bottom:22px; transform:translateX(-50%); background:var(--panel); color:var(--text); border:1px solid var(--line); padding:12px 18px; border-radius:10px; box-shadow:var(--shadow); z-index:60; max-width:90vw}
.toast.ok{border-color:var(--up)} .toast.err{border-color:var(--down)}

.modal{position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; z-index:50; padding:16px}
.modal[hidden]{display:none}
.modal-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px; width:100%; max-width:420px; box-shadow:var(--shadow)}
.modal-card h3{margin:0 0 6px}
.modal-card.lg{max-width:560px; max-height:90vh; display:flex; flex-direction:column; padding:0}
.modal-head{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:16px 18px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--panel); border-radius:var(--radius) var(--radius) 0 0}
.modal-head h3{margin:0}
.modal-body{padding:14px 18px; overflow:auto}
.xbtn{background:transparent; border:none; color:var(--muted); font-size:1.6rem; line-height:1; cursor:pointer; padding:0 4px}
.xbtn:hover{color:var(--text)}
.modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:14px}

.lnk{cursor:pointer} .lnk:hover{color:var(--primary)}
.actcell{display:flex; gap:6px; justify-content:flex-end}

.sec{padding:12px 0; border-bottom:1px solid var(--line)}
.sec:last-child{border-bottom:none}
.sec-h{font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-bottom:8px}
.optgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:8px}
.optcell{background:var(--panel2); border:1px solid var(--line); border-radius:9px; padding:8px 10px; display:flex; flex-direction:column; gap:2px}
.optcell.ok{border-color:rgba(46,160,67,.4)}
.optcell.bad{border-color:var(--down); background:rgba(248,81,73,.1)}
.opt-l{font-size:.72rem; color:var(--muted)}
.opt-v{font-weight:700; font-variant-numeric:tabular-nums}
.optcell.bad .opt-v{color:var(--down)}
.opt-th{font-size:.68rem; color:var(--muted)}
.specs{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:6px 14px; margin-top:10px}
.spec{display:flex; justify-content:space-between; gap:8px; font-size:.82rem; border-bottom:1px dashed var(--line); padding:3px 0}
.spec span{color:var(--muted)}
.spec b{text-align:right; word-break:break-word}

.chips{display:flex; flex-wrap:wrap; gap:7px}
.chip{display:inline-flex; align-items:center; gap:5px; background:var(--chip); border:1px solid var(--line); border-radius:20px; padding:4px 6px 4px 11px; font-size:.84rem; font-variant-numeric:tabular-nums}
.chip.untag{border-color:var(--warn)}
.chip .ut{font-style:normal; font-size:.62rem; background:var(--warn); color:#111; border-radius:4px; padding:0 3px}
.chip .x{border:none; background:transparent; color:var(--muted); cursor:pointer; font-size:1.1rem; line-height:1; padding:0 2px; border-radius:50%}
.chip .x:hover{color:var(--down)}

@media (max-width:620px){
  .modal{padding:0; align-items:stretch}
  .modal-card.lg{max-width:none; width:100%; max-height:100vh; height:100%; border-radius:0}
  .modal-head{border-radius:0}
}

.login-body{display:flex; align-items:center; justify-content:center; min-height:100vh; padding:16px}
.login-card{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:28px; width:100%; max-width:360px; box-shadow:var(--shadow); text-align:center}
.login-logo{font-size:2.4rem}
.login-card h1{margin:6px 0 2px; font-size:1.3rem}
.login-card label{display:block; text-align:left; font-size:.8rem; color:var(--muted); margin:14px 0 4px}

@media (max-width:760px){
  .table-wrap{display:none}
  .cards{display:flex}
  .brand span{display:none}
}