/* ninibot war panel — war room rouge sur dark */
:root{
  --bg:#0a0a0c; --panel:#121218; --border:#2a2a35;
  --red:#ff2d40; --red2:#ff5f6d; --txt:#e8e8ea; --dim:#8a8a95;
  --green:#3ddc84; --orange:#ffa040;
  --mono:"JetBrains Mono","Cascadia Code",Consolas,"Courier New",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--txt);font-family:var(--mono);font-size:14px;display:flex;flex-direction:column}
.hidden{display:none!important}
code,.mono{font-family:var(--mono)}
.grow{flex:1}
.dim{color:var(--dim)}
.ok{color:var(--green)}
.red{color:var(--red)}
.warn{color:var(--orange)}
.pad{padding:10px}

/* ---------- header ---------- */
#topbar{display:flex;justify-content:space-between;align-items:center;
  padding:10px 18px;border-bottom:1px solid var(--border);background:#0d0d11}
.brand{font-size:18px;font-weight:700;letter-spacing:2px;color:var(--red);
  text-shadow:0 0 12px rgba(255,45,64,.55)}
.brand .dim{color:var(--dim);text-shadow:none;margin:0 4px}
.top-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
#clock{color:var(--dim);font-size:12px}
.chip{font-size:11px;color:var(--dim);border:1px solid var(--border);
  padding:2px 8px;letter-spacing:1px}
.chip-live{color:var(--red2);border-color:var(--red);
  text-shadow:0 0 8px rgba(255,45,64,.5)}

/* ---------- bandeau alertes ---------- */
#alerts-bar{background:rgba(255,45,64,.1);border-bottom:1px solid var(--red);
  padding:6px 18px;font-size:12px}
.alert{color:var(--red2);margin-right:18px}

/* ---------- pills / badges ---------- */
.pill{padding:2px 10px;border-radius:3px;font-size:11px;font-weight:700;
  letter-spacing:1px;border:1px solid var(--border);color:var(--dim)}
.pill-on{color:var(--green);border-color:var(--green);text-shadow:0 0 8px rgba(61,220,132,.6)}
.pill-off{color:var(--red2);border-color:var(--red)}
.badge{background:var(--red);color:#fff;border-radius:8px;padding:0 6px;font-size:11px}

/* ---------- boutons / inputs ---------- */
.btn{background:#1a1a22;border:1px solid var(--border);color:var(--txt);
  font-family:var(--mono);font-size:12px;padding:7px 14px;cursor:pointer;
  letter-spacing:1px;transition:.15s;text-decoration:none;display:inline-block}
.btn:hover{border-color:var(--red);color:var(--red2)}
.btn-red{background:rgba(255,45,64,.12);border-color:var(--red);color:var(--red2)}
.btn-red:hover{background:rgba(255,45,64,.25);color:#fff}
.btn-ghost{border-color:transparent;color:var(--dim)}
.btn-ghost:hover{color:var(--txt)}
.btn-xs{padding:2px 8px;font-size:11px}
.in{background:#0d0d12;border:1px solid var(--border);color:var(--txt);
  font-family:var(--mono);font-size:13px;padding:7px 10px;outline:none}
.in:focus{border-color:var(--red)}
.in-port{width:90px}
.in-cat{width:130px}
.chk{color:var(--dim);font-size:12px;display:flex;align-items:center;gap:5px}
.row-gap{display:flex;gap:10px;align-items:center;margin:12px 0;flex-wrap:wrap}

/* ---------- login ---------- */
#view-login{flex:1;display:flex;align-items:center;justify-content:center}
.login-box{background:var(--panel);border:1px solid var(--border);padding:40px 45px;
  display:flex;flex-direction:column;gap:16px;width:380px;
  box-shadow:0 0 60px rgba(255,45,64,.08)}
.login-title{color:var(--red);font-size:20px;font-weight:700;letter-spacing:4px;text-align:center;
  text-shadow:0 0 14px rgba(255,45,64,.6)}
.login-sub{color:var(--dim);font-size:11px;text-align:center;letter-spacing:1px}
.login-box input{background:#0d0d12;border:1px solid var(--border);color:var(--txt);
  font-family:var(--mono);padding:11px;font-size:14px;text-align:center;outline:none}
.login-box input:focus{border-color:var(--red)}
.login-err{color:var(--red2);font-size:12px;min-height:15px;text-align:center}

/* ---------- layout app ---------- */
#view-app{flex:1;display:flex;min-height:0}
#sidebar{width:190px;border-right:1px solid var(--border);background:#0d0d11;
  display:flex;flex-direction:column;padding:14px 0;gap:2px;flex-shrink:0}
.nav-btn{background:none;border:none;border-left:3px solid transparent;color:var(--dim);
  font-family:var(--mono);font-size:12px;letter-spacing:1.5px;text-align:left;
  padding:10px 18px;cursor:pointer;transition:.15s}
.nav-btn:hover{color:var(--txt)}
.nav-btn.active{color:var(--red2);border-left-color:var(--red);background:rgba(255,45,64,.06)}
#content{flex:1;overflow-y:auto;padding:20px;min-width:0}
.view{display:none}
.view.active{display:block}
.sec-h{color:var(--red2);font-size:12px;letter-spacing:2px;margin:14px 0 10px}

/* ---------- cards / grids ---------- */
.card{background:var(--panel);border:1px solid var(--border);padding:16px;margin-bottom:16px}
.card h3{color:var(--red2);font-size:12px;letter-spacing:2px;margin-bottom:10px;
  text-shadow:0 0 8px rgba(255,95,109,.35)}
.card h4{color:var(--txt);font-size:12px;margin-bottom:8px}
.grid-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.grid-cards.sys .stat{padding:12px 10px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:1100px){.grid-cards{grid-template-columns:repeat(2,1fr)}.grid-2{grid-template-columns:1fr}}
.stat{text-align:center;padding:20px 10px}
.stat-label{color:var(--dim);font-size:11px;letter-spacing:2px}
.stat-num{font-size:38px;font-weight:700;color:var(--red);margin-top:8px;
  text-shadow:0 0 16px rgba(255,45,64,.5)}
.stat-small{font-size:20px;color:var(--txt);text-shadow:none;margin-top:12px}
.hint{color:var(--dim);font-size:11px;font-weight:400}

/* ---------- tables ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:12px}
.tbl th{color:var(--dim);text-align:left;letter-spacing:1px;font-weight:400;
  border-bottom:1px solid var(--border);padding:8px 10px;font-size:10px}
.tbl td{padding:8px 10px;border-bottom:1px solid #1a1a22;vertical-align:top}
.tbl tr:hover td{background:#15151c}
.acts{white-space:nowrap}
.keymask{letter-spacing:1px;font-size:11px}

/* ---------- outputs ---------- */
.cmdout{background:#0d0d12;border:1px solid var(--border);padding:10px;
  font-size:11px;color:#b8b8c0;white-space:pre-wrap;word-break:break-all;
  max-height:260px;overflow-y:auto;margin-top:8px}
.gen-out{font-size:13px;color:var(--green);margin-top:14px}
.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.kv{display:flex;gap:12px;align-items:center;margin:10px 0;font-size:13px;flex-wrap:wrap}
.kv>span{color:var(--dim);width:110px;flex-shrink:0}
.masked{letter-spacing:2px}
code.grow{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.logrow{display:flex;gap:10px;padding:4px 0;cursor:pointer;font-size:12px}
.logrow:hover code{color:var(--red2)}

/* ---------- OOB feed ---------- */
#marker-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.mk{border:1px solid var(--border);background:#15151c;padding:4px 10px;
  font-size:11px;cursor:pointer;color:var(--dim)}
.mk:hover{border-color:var(--red);color:var(--txt)}
.mk b{color:var(--red2);margin-left:4px}
.mk-x{margin-left:8px;color:var(--dim);cursor:pointer}
.mk-x:hover{color:var(--red)}
.feed{display:flex;flex-direction:column;gap:8px;max-height:calc(100vh - 330px);overflow-y:auto}
.hit{background:var(--panel);border:1px solid var(--border);border-left:3px solid var(--red);
  padding:8px 12px;font-size:12px}
.hit-marked{border-left-color:var(--green);box-shadow:0 0 12px rgba(61,220,132,.08)}
.hit-head{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.hit-ts{color:var(--dim);font-size:11px}
.hit-ip{color:#6ab0ff}
.hit-method{font-weight:700;color:var(--orange)}
.hit-path{color:var(--txt);word-break:break-all}
.hit-mk{background:rgba(61,220,132,.15);color:var(--green);font-size:10px;
  padding:1px 7px;letter-spacing:1px}
.hit-hd{margin-top:6px;font-size:11px;color:#7d7d8c;white-space:pre-wrap;word-break:break-all}
.hit-body{margin-top:6px;background:#0d0d12;border:1px solid var(--border);
  padding:8px;font-size:11px;color:#a8a8b5;white-space:pre-wrap;word-break:break-all}

/* ---------- board ---------- */
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:900px){.board{grid-template-columns:1fr}}
.col{background:#0d0d12;border:1px solid var(--border);padding:10px;min-height:200px}
.col-h{color:var(--dim);font-size:11px;letter-spacing:2px;margin-bottom:10px}
.col-h.wip{color:var(--orange)}
.col-h.solved{color:var(--green)}
.chall{background:var(--panel);border:1px solid var(--border);padding:10px;margin-bottom:8px;font-size:12px}
.chall.solved{border-color:rgba(61,220,132,.4)}
.ch-top{display:flex;justify-content:space-between;gap:8px}
.ch-top .cat{color:var(--dim);font-size:10px;border:1px solid var(--border);padding:0 6px}
.ch-note{color:var(--dim);font-size:11px;margin-top:6px}
.ch-by{color:#6ab0ff;font-size:11px;margin-top:6px}
.ch-flag{color:var(--green);font-size:11px;margin-top:6px;word-break:break-all}
.ch-act{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}

/* ---------- connect / cheats ---------- */
.conn pre{margin-top:0}

/* ---------- palette ---------- */
#palette{position:fixed;top:15%;left:50%;transform:translateX(-50%);
  width:480px;background:#101017;border:1px solid var(--red);z-index:98;
  box-shadow:0 0 60px rgba(255,45,64,.3);padding:12px}
#palette-in{width:100%;margin-bottom:8px}
.pal-it{padding:8px 10px;font-size:12px;color:var(--dim);cursor:pointer}
.pal-it.on,.pal-it:hover{color:var(--txt);background:rgba(255,45,64,.1)}

/* ---------- toast ---------- */
#toast{position:fixed;bottom:20px;right:20px;background:#16161e;
  border:1px solid var(--red);color:var(--txt);padding:10px 16px;font-size:12px;
  box-shadow:0 0 20px rgba(255,45,64,.25);opacity:0;transition:.2s;
  pointer-events:none;z-index:99;max-width:60vw;word-break:break-all}
#toast.on{opacity:1}

::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#2a2a35}
::-webkit-scrollbar-track{background:#0d0d11}