:root{
  --bg:#f4f6f8; --panel:#ffffff; --panel2:#f8fafb; --line:#e3e8ec; --text:#14212b; --muted:#647684;
  --accent:#0f766e; --accent-2:#14b8a6; --accent-soft:#e6f4f2;
  --ok:#15803d; --ok-soft:#e8f6ed; --warn:#b45309; --warn-soft:#fdf3e4; --bad:#b91c1c; --bad-soft:#fdecec;
  --c1:#0f766e; --c2:#2563eb; --c3:#c2410c; --c4:#7c3aed;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: "Inter", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --r:10px; --shadow:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0d1418; --panel:#131c21; --panel2:#18232a; --line:#24323a; --text:#e3eaee; --muted:#8a9ba6;
    --accent:#2dd4bf; --accent-2:#14b8a6; --accent-soft:#12302d;
    --ok:#4ade80; --ok-soft:#10291a; --warn:#fbbf24; --warn-soft:#2d2410; --bad:#f87171; --bad-soft:#331616;
    --c1:#2dd4bf; --c2:#60a5fa; --c3:#fb923c; --c4:#a78bfa;
    --shadow:none; color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0d1418; --panel:#131c21; --panel2:#18232a; --line:#24323a; --text:#e3eaee; --muted:#8a9ba6;
  --accent:#2dd4bf; --accent-2:#14b8a6; --accent-soft:#12302d;
  --ok:#4ade80; --ok-soft:#10291a; --warn:#fbbf24; --warn-soft:#2d2410; --bad:#f87171; --bad-soft:#331616;
  --c1:#2dd4bf; --c2:#60a5fa; --c3:#fb923c; --c4:#a78bfa;
  --shadow:none; color-scheme: dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:14px/1.45 var(--sans)}
a{color:var(--accent);text-decoration:none}
.hidden{display:none!important}
.muted{color:var(--muted)}
.mono{font-family:var(--mono);font-size:12.5px}
small{font-size:12px}
code{font-family:var(--mono);font-size:12.5px;background:var(--panel2);padding:1px 5px;border-radius:5px;border:1px solid var(--line)}

/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:16px}
.login-card{width:100%;max-width:360px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px;box-shadow:var(--shadow);display:grid;gap:14px}
.brand{display:flex;gap:11px;align-items:center}
.brand b{display:block;font-size:15px}
.brand small{color:var(--muted)}
.logo{width:34px;height:34px;border-radius:9px;background:var(--accent);position:relative;flex:none}
.logo:after{content:"";position:absolute;inset:10px 8px;border-top:2.5px solid #fff;border-bottom:2.5px solid #fff}
.logo:before{content:"";position:absolute;left:8px;right:13px;top:15.5px;border-top:2.5px solid #fff}
label{display:grid;gap:5px;font-size:12.5px;color:var(--muted);font-weight:500}
input,select,textarea{font:inherit;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 10px;width:100%}
textarea{font-family:var(--mono);font-size:12.5px;line-height:1.5}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
input[type=checkbox]{width:auto;accent-color:var(--accent)}
.check{display:flex;gap:8px;align-items:center;color:var(--text);font-weight:400;font-size:13.5px}
.err{background:var(--bad-soft);color:var(--bad);border-radius:8px;padding:8px 10px;font-size:13px}
.note{background:var(--warn-soft);color:var(--warn);border-radius:8px;padding:8px 10px;font-size:13px}
.okbox{background:var(--ok-soft);color:var(--ok);border-radius:8px;padding:8px 10px;font-size:13px}

/* buttons */
.btn{font:inherit;font-weight:500;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:8px;padding:7px 13px;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
:root[data-theme="dark"] .btn.primary{color:#04201d}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn.primary{color:#04201d}}
.btn.danger{color:var(--bad);border-color:var(--bad-soft)}
.btn.danger:hover{background:var(--bad-soft)}
.btn.ghost{background:transparent;border-color:transparent}
.btn.ghost:hover{background:var(--panel2)}
.btn.sm{padding:4px 9px;font-size:12.5px}
.btn.wide{width:100%;padding:10px}
.btn:disabled{opacity:.55;cursor:default}

/* layout */
.app{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.side{background:var(--panel);border-right:1px solid var(--line);padding:18px 12px;display:flex;flex-direction:column;gap:18px;position:sticky;top:0;height:100vh}
.side .brand{padding:0 6px}
nav{display:grid;gap:2px}
nav a{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:8px;color:var(--text);font-weight:500}
nav a i{font-style:normal;width:18px;text-align:center;color:var(--muted)}
nav a:hover{background:var(--panel2)}
nav a.active{background:var(--accent-soft);color:var(--accent)}
nav a.active i{color:var(--accent)}
.side-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;padding:0 6px;font-size:12.5px}
main{min-width:0}
.top{display:flex;align-items:center;gap:12px;padding:16px 24px;border-bottom:1px solid var(--line);background:var(--panel);position:sticky;top:0;z-index:5}
.top h1{font-size:17px;margin:0;font-weight:600}
.top-actions{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.menu{display:none}
#view{padding:20px 24px 40px;display:grid;gap:18px}

/* cards */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);min-width:0}
.card-h{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.card-h h3{margin:0;font-size:13.5px;font-weight:600}
.card-h .r{margin-left:auto;display:flex;gap:6px;align-items:center}
.card-b{padding:14px 16px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:12px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;box-shadow:var(--shadow);min-width:0}
.tile .k{font-size:12px;color:var(--muted);font-weight:500}
.tile .v{font-size:22px;font-weight:650;margin-top:2px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.tile .s{font-size:12px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile.bad{border-color:var(--bad)}
.tile.bad .v{color:var(--bad)}
.tile.warn .v{color:var(--warn)}
.bar{height:6px;background:var(--panel2);border-radius:4px;overflow:hidden;margin-top:8px;border:1px solid var(--line)}
.bar>span{display:block;height:100%;background:var(--accent);border-radius:4px}
.bar.warn>span{background:var(--warn)}
.bar.bad>span{background:var(--bad)}

/* tables */
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-weight:600;color:var(--muted);font-size:12px;padding:8px 12px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--panel2)}
td{padding:8px 12px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--panel2)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.nowrap{white-space:nowrap}
.dom{font-weight:600}
.dom small{display:block;font-weight:400;color:var(--muted)}

.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:99px;background:var(--panel2);color:var(--muted);border:1px solid var(--line);white-space:nowrap}
.pill.ok{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.pill.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.pill.bad{background:var(--bad-soft);color:var(--bad);border-color:transparent}
.pill.acc{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--muted);flex:none}
.dot.ok{background:var(--ok)} .dot.bad{background:var(--bad)} .dot.warn{background:var(--warn)}
.be{display:flex;gap:6px;align-items:center;font-family:var(--mono);font-size:12px;white-space:nowrap}
.be .path{color:var(--muted)}

/* chart */
.chart{position:relative;height:190px}
.chart canvas{width:100%;height:100%;display:block}
.chart .tip{position:absolute;pointer-events:none;background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:6px 9px;font-size:12px;box-shadow:0 4px 14px rgba(0,0,0,.12);white-space:nowrap;z-index:2}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.legend span{display:inline-flex;gap:6px;align-items:center}
.legend i{width:10px;height:3px;border-radius:2px;display:inline-block}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{font:inherit;font-size:12px;border:0;background:var(--panel);color:var(--muted);padding:4px 10px;cursor:pointer}
.seg button.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.spark{display:block}

/* form */
.form{display:grid;gap:14px}
.row{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
fieldset{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin:0;display:grid;gap:12px}
legend{font-size:12px;font-weight:600;color:var(--muted);padding:0 6px}
.paths{display:grid;gap:8px}
.pathrow{display:grid;grid-template-columns:1fr 1.6fr auto auto auto;gap:8px;align-items:center}
.hint{font-size:12px;color:var(--muted);font-weight:400}

/* diff / code */
.diff{font-family:var(--mono);font-size:12px;line-height:1.55;background:var(--panel2);border:1px solid var(--line);border-radius:8px;overflow:auto;max-height:420px;padding:6px 0}
.diff div{white-space:pre;padding:0 12px}
.diff .a{background:var(--ok-soft);color:var(--ok)}
.diff .d{background:var(--bad-soft);color:var(--bad)}
.diff .h{color:var(--muted);font-style:italic}
pre.out{font-family:var(--mono);font-size:12px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:10px 12px;overflow:auto;max-height:340px;white-space:pre-wrap;word-break:break-word;margin:0}
.logview{font-family:var(--mono);font-size:12px;line-height:1.5;background:var(--panel2);border-radius:8px;padding:10px 12px;overflow:auto;max-height:65vh;white-space:pre;margin:0;border:1px solid var(--line)}
.editor{min-height:55vh;white-space:pre;tab-size:4}

/* modal */
.modal{position:fixed;inset:0;background:rgba(10,20,25,.45);display:flex;justify-content:center;align-items:flex-start;padding:4vh 16px;z-index:50;overflow:auto}
.modal-card{background:var(--panel);border-radius:14px;width:100%;max-width:880px;box-shadow:0 20px 50px rgba(0,0,0,.25);border:1px solid var(--line)}
.modal-head{display:flex;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.modal-head h2{font-size:15px;margin:0}
.modal-head .btn{margin-left:auto}
.modal-body{padding:16px 18px;display:grid;gap:14px}
.actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.toast{position:fixed;right:18px;bottom:18px;background:var(--text);color:var(--bg);padding:10px 14px;border-radius:9px;font-size:13px;z-index:60;max-width:420px;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.toast.bad{background:var(--bad);color:#fff}
.steps{display:grid;gap:4px;font-family:var(--mono);font-size:12px}
.flex{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sp{flex:1}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;font-size:13px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.empty{padding:28px;text-align:center;color:var(--muted)}
.qr{width:200px;height:200px;background:#fff;border-radius:8px;padding:4px}
.qr svg{width:100%;height:100%}

@media (max-width: 1100px){ .g3{grid-template-columns:1fr 1fr} }
@media (max-width: 860px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;inset:0 auto 0 0;width:250px;z-index:40;transform:translateX(-100%);transition:transform .2s}
  .side.open{transform:none;box-shadow:0 0 40px rgba(0,0,0,.3)}
  .menu{display:inline-block}
  .g2,.g3{grid-template-columns:1fr}
  #view{padding:16px}
  .top{padding:12px 16px}
  .pathrow{grid-template-columns:1fr 1fr}
}
.form>*,.modal-body>*,.grid>*,.card-b>*{min-width:0}
.svc{max-width:100%;overflow:hidden;text-overflow:ellipsis}
nav.locked a:not([data-r="account"]){opacity:.4}