/* =============================================================================
   KG3N//FLEET - CRT operations console
   Committed dark terminal theme. One accent (cyan) for interaction; status is a
   separate traffic-light system (green/amber/red/grey), always glyph + label.
   ========================================================================== */
:root{
  --bg:#060a0f; --surface:#0b1219; --surface-2:#0e1823; --raise:#12212e;
  --line:#17242f; --line-2:#20313f;
  --ink:#cfe1ec; --dim:#7a94a6; --faint:#47606f;
  --accent:#2fd6d0; --accent-glow:rgba(47,214,208,.35);
  --online:#35dd82; --stale:#ecb63c; --offline:#ff5a52; --unknown:#647a8e;
  --mono:ui-monospace,"Cascadia Code","JetBrains Mono","SFMono-Regular",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--mono); font-size:13px; line-height:1.5;
  -webkit-font-smoothing:antialiased; min-height:100vh; font-variant-numeric:tabular-nums;
}
a{color:inherit; text-decoration:none}
code{font-family:var(--mono)}

/* CRT atmosphere */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    linear-gradient(var(--line) 1px,transparent 1px) 0 0/44px 44px,
    linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/44px 44px,
    radial-gradient(1200px 700px at 78% -8%, rgba(47,214,208,.05), transparent 60%);
  opacity:.5; mask:radial-gradient(140% 100% at 50% 0%,#000 55%,transparent 100%);
}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:2;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
  opacity:.35; mix-blend-mode:multiply;
}
.wrap{position:relative; z-index:1; max-width:1280px; margin:0 auto; padding:0 20px 64px}

/* ---- header ---- */
.top{display:flex; align-items:center; gap:24px; flex-wrap:wrap; padding:16px 4px 14px; border-bottom:1px solid var(--line); margin-bottom:22px}
.mark{font-size:15px; font-weight:700; letter-spacing:.14em; color:var(--ink); display:flex; align-items:center}
.mark b{color:var(--accent)} .mark .sep{color:var(--faint); margin:0 1px}
.mark .back{color:var(--faint); margin-right:12px; font-weight:400; letter-spacing:0}
.mark .back:hover{color:var(--accent)}
.cursor{display:inline-block; width:9px; height:15px; background:var(--accent); margin-left:6px; box-shadow:0 0 8px var(--accent-glow); translate:0 2px}
@media (prefers-reduced-motion:no-preference){ .cursor{animation:blink 1.1s steps(1) infinite} }
@keyframes blink{50%{opacity:0}}
.sys{display:flex; align-items:center; gap:9px; color:var(--dim); font-size:11px; letter-spacing:.08em}
.beacon{width:8px; height:8px; border-radius:50%; background:var(--online); box-shadow:0 0 9px var(--online)}
.sys b{color:var(--online); font-weight:600}
.beacon.b-online{background:var(--online); box-shadow:0 0 9px var(--online)}
.beacon.b-offline{background:var(--offline); box-shadow:0 0 9px var(--offline)}
.beacon.b-unknown{background:var(--faint); box-shadow:none}
.sys .r-online{color:var(--online)} .sys .r-offline{color:var(--offline)} .sys .r-unknown{color:var(--dim)}
.sys .cert{color:var(--dim)} .sys .cert.warn{color:var(--stale)} .sys .cert.crit{color:var(--offline); font-weight:600}
.spacer{margin-left:auto}
.op{display:flex; align-items:center; gap:14px; font-size:11px; letter-spacing:.06em; color:var(--dim)}
.op .who{color:var(--ink)}
.op a{color:var(--faint); border-bottom:1px solid transparent; padding-bottom:1px}
.op a:hover{color:var(--accent); border-color:var(--accent)}

/* ---- instrument cluster ---- */
.cluster{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) 244px 1fr; gap:12px; margin-bottom:22px}
.panel{position:relative; background:linear-gradient(180deg,var(--surface-2),var(--surface)); border:1px solid var(--line); padding:14px 16px}
.panel::before,.panel::after{content:""; position:absolute; width:9px; height:9px; border-color:var(--line-2); border-style:solid}
.panel::before{top:-1px; left:-1px; border-width:1px 0 0 1px}
.panel::after{bottom:-1px; right:-1px; border-width:0 1px 1px 0}
.lbl{font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim)}
.tile .num{font-size:38px; font-weight:700; line-height:1; margin-top:12px; letter-spacing:-.01em}
.tile .foot{font-size:10px; letter-spacing:.06em; color:var(--faint); margin-top:9px; display:flex; align-items:center; gap:6px}
.tile.t-online .num{color:var(--online)} .tile.t-off .num{color:var(--offline)} .tile.t-total .num{color:var(--ink)}
.dot{width:7px; height:7px; border-radius:50%; flex:0 0 7px}
.d-online{background:var(--online); box-shadow:0 0 7px var(--online)} .d-stale{background:var(--stale)} .d-offline{background:var(--offline)} .d-unknown{background:var(--unknown)}
.donut-panel{display:flex; flex-direction:column}
.donut-wrap{display:flex; align-items:center; gap:12px; margin-top:8px; flex:1}
.donut{flex:0 0 80px}
.donut-legend{display:flex; flex-direction:column; gap:6px; font-size:10px; flex:1; min-width:0}
.donut-legend .row{display:flex; align-items:center; gap:7px; color:var(--dim); white-space:nowrap}
.donut-legend .row b{color:var(--ink); font-weight:600; margin-left:auto; padding-left:8px}
.spark-panel{display:flex; flex-direction:column}
.spark-head{display:flex; align-items:baseline; justify-content:space-between}
.spark-head .now{font-size:11px; color:var(--online); letter-spacing:.05em}
.spark{margin-top:auto; width:100%; height:56px; display:block}

/* ---- command line / filters ---- */
.command{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; padding:10px 14px; background:var(--surface); border:1px solid var(--line)}
.prompt{display:flex; align-items:center; gap:9px; flex:1; min-width:220px}
.prompt .chev{color:var(--accent); font-weight:700}
.prompt input{flex:1; background:transparent; border:none; color:var(--ink); font-family:var(--mono); font-size:13px; letter-spacing:.02em; padding:4px 0}
.prompt input::placeholder{color:var(--faint)}
.prompt input:focus{outline:none}
.chips{display:flex; gap:6px}
.chip{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); padding:5px 12px; border:1px solid var(--line-2); background:var(--surface-2); cursor:pointer; user-select:none}
.chip:hover{color:var(--ink); border-color:var(--dim)}
.chip.on{color:var(--bg); background:var(--accent); border-color:var(--accent); font-weight:700; box-shadow:0 0 12px var(--accent-glow)}
.count{font-size:11px; color:var(--faint); letter-spacing:.08em; white-space:nowrap}

/* ---- table ---- */
.tablewrap{border:1px solid var(--line); background:var(--surface); overflow-x:auto}
table{width:100%; border-collapse:collapse; min-width:760px}
thead th{text-align:left; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); font-weight:600; padding:11px 14px; border-bottom:1px solid var(--line-2); white-space:nowrap; cursor:pointer; user-select:none; position:sticky; top:0; background:var(--surface-2)}
thead th:hover{color:var(--ink)}
thead th.sorted{color:var(--accent)}
thead th .arr{opacity:.9; margin-left:5px; font-size:9px}
tbody td{padding:11px 14px; border-bottom:1px solid var(--line); white-space:nowrap}
tbody tr{cursor:pointer}
tbody tr:hover td{background:rgba(47,214,208,.045)}
tbody tr:last-child td{border-bottom:none}
.st{display:inline-flex; align-items:center; gap:8px; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase}
.st .g{width:15px; text-align:center; font-size:11px}
.st.s-online{color:var(--online)} .st.s-stale{color:var(--stale)} .st.s-offline{color:var(--offline)} .st.s-unknown{color:var(--unknown)}
.rid{font-size:13px; color:var(--ink); letter-spacing:.02em}
.host{color:var(--ink)} .muted{color:var(--dim)} .seen{color:var(--dim)} .seen.fresh{color:var(--online)}
.empty{padding:38px; text-align:center; color:var(--faint); letter-spacing:.06em}

/* ---- detail page ---- */
.detail{position:relative; z-index:1; max-width:760px; margin:0 auto; padding:26px 20px 64px}
.dhead{display:flex; align-items:center; gap:12px; padding:0 0 18px; border-bottom:1px solid var(--line); margin-bottom:22px; flex-wrap:wrap}
.dhead .bigdot{width:11px; height:11px; border-radius:50%}
.dhead h1{margin:0; font-size:24px; letter-spacing:.02em; font-weight:700}
.dstat{font-size:10px; letter-spacing:.14em; text-transform:uppercase; padding:3px 10px; border:1px solid var(--line-2)}
.dstat.s-online{color:var(--online); border-color:var(--online)} .dstat.s-stale{color:var(--stale); border-color:var(--stale)}
.dstat.s-offline{color:var(--offline); border-color:var(--offline)} .dstat.s-unknown{color:var(--unknown); border-color:var(--unknown)}
.quick{display:flex; gap:8px; margin-left:auto}
.btn{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:9px 14px; border:1px solid var(--line-2); background:var(--surface); color:var(--dim); cursor:pointer; line-height:1.4; white-space:nowrap}
.btn:hover{color:var(--ink); border-color:var(--dim)}
.btn.primary{background:var(--accent); color:var(--bg); border-color:var(--accent); font-weight:700; box-shadow:0 0 14px var(--accent-glow)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ok{color:var(--online); border-color:var(--online)}
.btn.danger{color:var(--offline); border-color:rgba(255,90,82,.5)}
.btn.danger:hover{color:var(--bg); background:var(--offline); border-color:var(--offline)}
/* archive / soft-delete UI */
.op .arch-link{color:var(--faint)} .op .arch-link:hover{color:var(--accent); border-color:var(--accent)}
.archbanner{margin:0 0 18px; padding:11px 14px; border:1px solid rgba(236,182,60,.4); background:rgba(236,182,60,.07); color:var(--ink); font-size:12px; letter-spacing:.04em}
.archbanner b{color:var(--stale)} .archbanner code{color:var(--accent)}
.rowact{white-space:nowrap; text-align:right}
.rowact .btn{padding:5px 9px; font-size:10px; margin-left:5px}
/* operations / per-node job runner */
.ops{margin:0 0 8px}
.ops-row{display:flex; align-items:center; gap:14px; margin-bottom:10px; flex-wrap:wrap}
.cmd{display:flex; gap:8px; align-items:flex-start; margin:6px 0}
.cmd textarea{flex:1; font-family:var(--mono); font-size:12px; background:var(--surface); color:var(--ink); border:1px solid var(--line-2); padding:8px 10px; resize:vertical; min-height:38px}
.cmd textarea:focus{outline:none; border-color:var(--accent)}
table.jobs{margin-top:10px}
.jobs .jd code{color:var(--ink); word-break:break-all}
.jst{font-size:10px; letter-spacing:.08em; text-transform:uppercase; padding:2px 7px; border:1px solid var(--line-2); color:var(--dim); white-space:nowrap}
.jst.j-dispatched{color:var(--accent); border-color:var(--accent)}
.jst.j-running{color:var(--stale); border-color:var(--stale)}
.jst.j-success{color:var(--online); border-color:var(--online)}
.jst.j-failed{color:var(--offline); border-color:var(--offline)}
.jst.j-canceled{color:var(--faint)}
.joutpre{white-space:pre-wrap; word-break:break-word; max-height:280px; overflow:auto; background:var(--bg); border:1px solid var(--line); padding:10px; margin:6px 0 2px; font-size:11.5px; color:var(--dim)}
/* account / change password */
.acct{max-width:460px; margin-top:6px}
.acct label{display:block; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin:14px 0 5px}
.acct input[type=password]{width:100%; box-sizing:border-box; font-family:var(--mono); font-size:13px; background:var(--surface); color:var(--ink); border:1px solid var(--line-2); padding:9px 11px}
.acct input[type=password]:focus{outline:none; border-color:var(--accent)}
.acct .btn{margin-top:16px}
.okmsg{padding:9px 12px; margin-bottom:12px; border:1px solid var(--online); background:rgba(53,221,130,.09); color:var(--online); font-size:12px}
/* security / rotation console */
.sec{max-width:760px; margin:0 0 10px}
.sec .k{margin-top:14px}
.krow{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:8px 0}
.krow .kv{background:var(--surface); border:1px solid var(--line-2); padding:5px 9px; color:var(--ink); word-break:break-all}
.krow .kv.reveal{color:var(--accent)}
.sec pre.joutpre{max-width:760px}
/* operator management + audit chips-as-links */
a.chip{text-decoration:none}
.oprow{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.oprow input[type=text],.oprow input[type=password]{background:var(--bg); border:1px solid var(--line-2); color:var(--ink); font-family:var(--mono); font-size:12.5px; padding:8px 10px}
.oprow input[type=text]:focus,.oprow input[type=password]:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 1px var(--accent-glow)}
.oprow input::placeholder{color:var(--faint)}
.oprow .chk{display:flex; align-items:center; gap:5px; font-size:11px; color:var(--dim); letter-spacing:.06em}
.rowact form{margin:0 2px 0 0}
/* bulk operations bar + selection column */
.bulkbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 12px; padding:9px 12px; border:1px solid var(--accent); background:var(--surface-2)}
.bulkbar .bcount{font-size:11px; letter-spacing:.08em; color:var(--ink); text-transform:uppercase}
.bulkbar .bcount b{color:var(--accent)}
th.selhead,td.selcell{width:30px; text-align:center; padding-left:6px; padding-right:6px}
td.selcell{cursor:default}
.rowsel,#selall{cursor:pointer; accent-color:var(--accent)}
/* health telemetry: fleet-list cell + attention tile */
td.hcell{text-align:center; white-space:nowrap}
.hok{color:var(--online); font-weight:700}
.hbad{font-weight:700; letter-spacing:.03em; cursor:default}
.hbad.h-warn{color:var(--stale)} .hbad.h-crit{color:var(--offline)}
#tile-attn{cursor:pointer; transition:border-color .12s}
#tile-attn:hover{border-color:var(--accent)}
.tile.t-attn.has .num{color:var(--stale)}
.tile.t-attn .num{color:var(--dim)}
.hbanner{padding:9px 12px; margin-bottom:12px; font-size:12px; border:1px solid var(--stale); background:rgba(236,182,60,.09); color:var(--stale)}
.hbanner.crit{border-color:var(--offline); background:rgba(255,90,82,.09); color:var(--offline)}
.runbook{margin:8px 0 4px; padding-left:22px; color:var(--ink); font-size:12.5px; line-height:1.7}
.runbook li{margin:4px 0}
.runbook code{color:var(--accent)}
.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin-bottom:22px}
.cell{background:var(--surface); padding:12px 14px}
.cell .k{font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint)}
.cell .v{margin-top:5px; color:var(--ink); font-size:12.5px; word-break:break-all}
/* ---- display name / rename ---- */
.dtitle{display:flex; flex-direction:column; gap:3px}
.dtitle h1{margin:0}
.dsub{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}
.rename{display:flex; gap:8px; align-items:center; margin-top:6px}
.rename input[type=text]{flex:1; min-width:0; background:var(--bg); border:1px solid var(--line-2); color:var(--ink); font-family:var(--mono); font-size:12.5px; padding:8px 10px; letter-spacing:.02em}
.rename input[type=text]::placeholder{color:var(--faint)}
.rename input[type=text]:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 1px var(--accent-glow)}
.rename .btn{padding:8px 12px}
td.name{color:var(--ink); font-weight:600}
.secret{border:1px solid var(--line-2); padding:16px 18px; margin-bottom:26px; background:var(--surface)}
.secret .k{font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint)}
.pwline{display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap}
.reveal{font-size:15px; letter-spacing:.1em; color:var(--online); background:var(--bg); padding:6px 12px; border:1px solid var(--line)}
.hint{font-size:10px; color:var(--faint); margin-top:10px; letter-spacing:.04em}
.hint.err{color:var(--offline)}
.seclabel{font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); margin:0 0 10px}
.events{width:100%; border-collapse:collapse; font-size:11px}
.events th{text-align:left; color:var(--faint); font-weight:500; text-transform:uppercase; letter-spacing:.1em; font-size:8.5px; padding:7px 10px; border-bottom:1px solid var(--line-2)}
.events td{padding:7px 10px; border-bottom:1px solid var(--line); color:var(--dim)}
.events td.t{color:var(--ink)} .events .muted{color:var(--faint)}

/* ---- auth ---- */
body.auth{display:grid; place-items:center}
.auth-card{position:relative; z-index:1; width:min(380px,92vw); padding:30px 30px 34px; background:linear-gradient(180deg,var(--surface-2),var(--surface)); border:1px solid var(--line-2)}
.auth-card::before,.auth-card::after{content:""; position:absolute; width:12px; height:12px; border-color:var(--accent); border-style:solid; opacity:.5}
.auth-card::before{top:-1px; left:-1px; border-width:1px 0 0 1px}
.auth-card::after{bottom:-1px; right:-1px; border-width:0 1px 1px 0}
.auth-mark{font-size:18px; font-weight:700; letter-spacing:.16em}
.auth-mark b{color:var(--accent)}
.auth-sub{color:var(--dim); font-size:11px; letter-spacing:.1em; margin:6px 0 24px; text-transform:uppercase}
.auth-card label{display:block; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin:16px 0 7px}
.auth-card input{width:100%; background:var(--bg); border:1px solid var(--line-2); color:var(--ink); font-family:var(--mono); font-size:14px; padding:11px 12px}
.auth-card input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 1px var(--accent-glow)}
.auth-card button{width:100%; margin-top:26px; padding:12px; border:1px solid var(--accent); background:var(--accent); color:var(--bg); font-family:var(--mono); font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:12px; cursor:pointer; box-shadow:0 0 14px var(--accent-glow)}
.auth-card button:hover{filter:brightness(1.08)}
.alert{background:rgba(255,90,82,.1); border:1px solid var(--offline); color:#ffb3af; padding:10px 12px; font-size:11px; letter-spacing:.03em; margin-bottom:6px}

/* ---- shared tooltip ---- */
.tip{position:fixed; z-index:40; pointer-events:none; background:#02060a; border:1px solid var(--line-2); padding:7px 10px; font-size:11px; color:var(--ink); letter-spacing:.03em; opacity:0; transition:opacity .1s; white-space:nowrap; box-shadow:0 6px 22px rgba(0,0,0,.5)}
.tip.show{opacity:1}
.tip .tk{color:var(--dim)}

@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}
@media (max-width:920px){
  .cluster{grid-template-columns:1fr 1fr}
  .cluster .donut-panel{grid-column:1/2} .cluster .spark-panel{grid-column:2/3}
}
@media (max-width:560px){
  .cluster{grid-template-columns:1fr 1fr}
  .tile .num{font-size:30px}
  .cluster .donut-panel,.cluster .spark-panel{grid-column:auto}
  .top{gap:14px} .dhead .quick{margin-left:0; width:100%}
  .dhead .quick .btn{flex:1; text-align:center}
}