/* JMDT brand tokens — same as jmdt-devnet/tools/devnet_dashboard.py, measured
   against jmdt.io / explorer.jmdt.io: black canvas, hairlines, mono, amber accent. */
@font-face { font-family: "Iosevka Charon Mono"; font-weight: 400; font-display: swap; src: url(fonts/iosevka-400-latin.woff2) format("woff2"); }
@font-face { font-family: "Iosevka Charon Mono"; font-weight: 700; font-display: swap; src: url(fonts/iosevka-700-latin.woff2) format("woff2"); }
@font-face { font-family: "Jersey 25"; font-weight: 400; font-display: swap; src: url(fonts/jersey25-400-latin.woff2) format("woff2"); }

:root {
  --bg:#000; --pan:#0a0a0a; --pan2:#121212; --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.18);
  --tx:#f5f5f5; --tx2:rgba(255,255,255,.65); --dim:#a0a0a0; --dim2:#6b6b6b;
  --ok:#4ade80; --warn:#ecaa62; --bad:#f87171; --info:#60a5fa;
  --okb:rgba(74,222,128,.1); --warnb:rgba(236,170,98,.12); --badb:rgba(248,113,113,.12);
  --brandtx:#ff6ecb; --brandb:rgba(198,5,134,.2); --sel:rgba(236,170,98,.3);
  --r:8px; --r2:4px;
  --mono:"Iosevka Charon Mono","Iosevka","JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace,"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji";
  --display:"Jersey 25",var(--mono);
}
* { box-sizing:border-box }
html { color-scheme:dark }
body { margin:0; background:var(--bg); color:var(--tx); font:13px/1.55 var(--mono); -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums }
::selection { background:var(--sel) }
::-webkit-scrollbar { width:9px; height:9px } ::-webkit-scrollbar-thumb { background:var(--line2); border-radius:6px }
[hidden] { display:none !important }
a { color:var(--warn); text-decoration:none } a:hover { text-decoration:underline }
.dim { color:var(--dim) } .small { font-size:11px } .ok { color:var(--ok) } .warn { color:var(--warn) } .bad { color:var(--bad) }
.display { font-family:var(--display); font-weight:400; font-size:32px; letter-spacing:.02em; margin:12px 0 4px }

/* header */
header { position:sticky; top:0; z-index:20; display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:12px 22px; background:var(--bg); border-bottom:1px solid var(--line) }
header .logo { height:22px } header .vr { width:1px; height:18px; background:var(--line2) }
.hl { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); white-space:nowrap } .hl b { color:var(--tx) }
.spacer { margin-left:auto }
.pill { padding:4px 9px; border:1px solid var(--line); border-radius:var(--r2); background:var(--pan); color:var(--dim); font-size:11px; letter-spacing:.04em; white-space:nowrap }
.pill.ok { color:var(--ok); border-color:rgba(74,222,128,.35); background:var(--okb) }
.pill.warn { color:var(--warn); border-color:rgba(236,170,98,.4); background:var(--warnb) }
.pill.bad { color:var(--bad); border-color:rgba(248,113,113,.45); background:var(--badb) }
nav { display:flex; gap:4px; margin-left:8px }
.tab { padding:4px 11px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim) }
.tab.on { color:var(--tx); border-color:var(--tx) }

/* controls */
input, select, textarea, button, .btn { background:var(--pan); color:var(--tx); border:1px solid var(--line2); border-radius:var(--r2); padding:6px 10px; font:12px var(--mono) }
input::placeholder, textarea::placeholder { color:var(--dim2) }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--warn); box-shadow:0 0 0 3px var(--warnb) }
button, .btn { cursor:pointer; font-weight:500; letter-spacing:.02em; display:inline-block }
button:hover, .btn:hover { border-color:var(--tx); background:var(--pan2); text-decoration:none }
button:disabled { opacity:.4; cursor:not-allowed }
button.primary, .btn.primary { background:var(--tx); border-color:var(--tx); color:var(--bg); font-weight:700 }
button.primary:hover, .btn.primary:hover { opacity:.86; background:var(--tx) }
button.danger { color:var(--bad); border-color:rgba(248,113,113,.5); background:transparent }
button.danger:hover { background:var(--badb); border-color:var(--bad) }
button.ghost { border-color:transparent; color:var(--dim) }
.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:8px 0 }
.row.right { justify-content:flex-end }
.chk { display:inline-flex; gap:6px; align-items:center; color:var(--dim); font-size:11px }

/* stat strip (explorer style) */
.stats { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); max-width:1640px; margin:0 auto; padding:6px 16px 0; border-bottom:1px solid var(--line) }
.st { padding:16px 16px 14px; border-right:1px solid var(--line); min-width:0 } .st:last-child { border-right:0 }
.lb { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); white-space:nowrap } .lb b { color:var(--tx) }
.st .v { font-size:clamp(20px,2.1vw,30px); font-weight:700; line-height:1.15; margin:6px 0 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.st .v.small { font-size:16px; letter-spacing:.04em }
.st .sb { font-size:11px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.st .sb.tick { color:var(--tx2); margin-top:2px; white-space:normal; line-height:1.4 } .st .sb.tick b { color:var(--warn); font-weight:700 }

/* panels */
.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; padding:16px; max-width:1640px; margin:0 auto }
.pan { background:var(--pan); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; margin:0 16px 16px; overflow:auto }
.grid .pan { margin:0 }
.pan.wide { max-width:1608px; margin:0 auto 16px }
.pan h3 { margin:0 0 10px; font:700 11px/1.2 var(--mono); letter-spacing:.16em; text-transform:uppercase; padding-bottom:9px; border-bottom:1px solid var(--line); display:flex; gap:10px; align-items:baseline }
.pan h3 .dim { font-weight:400; letter-spacing:.08em; text-transform:none }
.cmd { display:grid; grid-template-columns:minmax(150px,1fr) auto; gap:6px 8px; align-items:center; padding:7px 0; border-top:1px solid var(--line) }
.cmd:first-of-type { border-top:0 }
.cmd .name { color:var(--tx2); font-size:12px }
.cmd .args { display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap }
.cmd .args input { width:96px }
.cmd .args input.wide { width:190px }
.risk { font-size:9px; letter-spacing:.12em; text-transform:uppercase; padding:1px 5px; border:1px solid var(--line2); border-radius:3px; margin-left:6px; color:var(--dim) }
.risk.destructive { color:var(--bad); border-color:rgba(248,113,113,.45) }
.risk.l1 { color:var(--brandtx); border-color:rgba(198,5,134,.55); background:var(--brandb) }
.result { white-space:pre-wrap; word-break:break-all; background:var(--bg); border:1px solid var(--line); border-radius:var(--r2); padding:8px; margin-top:8px; font-size:11px; color:var(--dim); max-height:260px; overflow:auto }
.kv { display:grid; grid-template-columns:auto 1fr; gap:3px 14px; font-size:12px }
.kv b { color:var(--dim); font-weight:400; font-size:11px }

/* tooltips: hover any element with data-help */
[data-help] { position:relative; cursor:help }
[data-help]:hover::after { content:attr(data-help); position:absolute; left:0; top:calc(100% + 6px); z-index:50; width:max-content; max-width:380px; white-space:pre-line; word-break:normal; overflow-wrap:break-word;
  background:var(--pan2); color:var(--tx); border:1px solid var(--line2); border-radius:var(--r2); padding:8px 10px; font-size:11.5px; line-height:1.45; letter-spacing:0; text-transform:none; font-weight:400; box-shadow:none }
.q { display:inline-block; width:15px; height:15px; line-height:13px; text-align:center; border:1px solid var(--line2); border-radius:50%; font-size:10px; color:var(--dim); margin-left:6px }

/* tables */
table { width:100%; border-collapse:collapse }
th, td { padding:6px 8px; text-align:left; vertical-align:top }
th { color:var(--dim2); font:600 10px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; border-bottom:1px solid var(--line) }
tbody tr { border-top:1px solid var(--line) } tbody tr:hover { background:var(--pan2) }
.tag { font-size:10px; letter-spacing:.08em; text-transform:uppercase; padding:1px 6px; border:1px solid var(--line2); border-radius:3px; color:var(--dim); white-space:nowrap }
.tag.file { color:var(--warn); border-color:rgba(236,170,98,.45) }
.tag.env { color:var(--info); border-color:rgba(96,165,250,.45) }
.tag.flag { color:var(--brandtx); border-color:rgba(198,5,134,.5) }
.tag.security { color:var(--bad); border-color:rgba(248,113,113,.45) }
.tag.restart { color:var(--warn) }

/* config */
.cfgbar { display:flex; gap:8px; align-items:center; padding:14px 16px; max-width:1640px; margin:0 auto; flex-wrap:wrap }
.cfgbar #cfg-q { width:260px }
.cfgsec { margin:0 16px 14px }
.cfgrow { display:grid; grid-template-columns:minmax(220px,300px) minmax(220px,1fr) auto; gap:10px; align-items:center; padding:7px 0; border-top:1px solid var(--line) }
.cfgrow:first-of-type { border-top:0 }
.cfgrow .k { font-size:12px; color:var(--tx2); word-break:break-all }
.cfgrow .k small { display:block; color:var(--dim2); font-size:10px; word-break:normal }
.cfgrow input, .cfgrow select, .cfgrow textarea { width:100% }
.cfgrow textarea { min-height:52px; resize:vertical }
.cfgrow .meta { display:flex; gap:5px; align-items:center; flex-wrap:wrap; justify-content:flex-end }
.cfgrow.dirty { background:var(--warnb); box-shadow:inset 3px 0 0 var(--warn) }
.cfgrow.err { box-shadow:inset 3px 0 0 var(--bad) }
.cfgrow .errmsg { grid-column:1/-1; color:var(--bad); font-size:11px }

/* logs */
.logbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:8px }
#log-q { width:240px } #log-n { width:84px }
.lvbtn { padding:2px 8px; font-size:10px; letter-spacing:.08em; text-transform:uppercase; opacity:.4 } .lvbtn.on { opacity:1 }
.lvbtn[data-lv=error] { color:var(--bad) } .lvbtn[data-lv=warn] { color:var(--warn) } .lvbtn[data-lv=info] { color:var(--info) } .lvbtn[data-lv=debug] { color:var(--ok) }
#logbox { margin:0; height:340px; overflow:auto; background:var(--bg); border:1px solid var(--line); border-radius:var(--r2); padding:10px; font-size:11px; color:var(--dim); white-space:pre-wrap; word-break:break-all }
#logbox .lv-error { color:var(--bad) } #logbox .lv-warn { color:var(--warn) } #logbox .lv-info { color:#9cc3f5 } #logbox .lv-debug { color:var(--dim2) }
#logbox mark { background:var(--sel); color:var(--tx); border-radius:2px }

/* banners, modal, toast, login */
.banner { max-width:1608px; margin:12px auto 0; padding:9px 14px; border:1px solid var(--line2); border-radius:var(--r2); font-size:12px }
.banner.warn { color:var(--warn); border-color:rgba(236,170,98,.45); background:var(--warnb); margin:0 16px 12px }
.banner.bad { color:var(--bad); border-color:rgba(248,113,113,.45); background:var(--badb) }
.modal { position:fixed; inset:0; background:rgba(0,0,0,.7); display:flex; align-items:center; justify-content:center; z-index:100 }
.modal-card { width:min(520px,92vw); background:var(--pan2); border:1px solid rgba(248,113,113,.5); border-radius:var(--r); padding:16px 18px }
.modal-card h4 { margin:0 0 10px; color:var(--bad); font-size:11px; letter-spacing:.14em; text-transform:uppercase }
.modal-card #m-input { width:100% }
.modal-card code { color:var(--tx); background:var(--bg); padding:1px 5px; border-radius:3px }
.toast { position:fixed; right:20px; bottom:20px; max-width:440px; background:var(--pan2); border:1px solid var(--line2); border-radius:var(--r2); padding:10px 14px; z-index:90; font-size:12px }
.toast.bad { border-color:rgba(248,113,113,.5); color:var(--bad) }
.toast.ok { border-color:rgba(74,222,128,.4); color:var(--ok) }
.login { min-height:100vh; display:flex; align-items:center; justify-content:center }
.login-card { text-align:center; padding:40px; border:1px solid var(--line); border-radius:var(--r); background:var(--pan); max-width:440px }
.login-logo { height:34px }

@media (max-width:1560px) { header .hl, header .vr { display:none } }
@media (max-width:1100px) { .grid { grid-template-columns:repeat(2,minmax(0,1fr)) } .stats { grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media (max-width:900px) { .grid { grid-template-columns:1fr } .stats { grid-template-columns:1fr 1fr } .cfgrow { grid-template-columns:1fr } .cfgrow .meta { justify-content:flex-start } }