/* =========================================================
   RELAYDECK — 磷光终端 / 暴力极简（刻意去 AI 感）
   单色琥珀磷光、纯黑底、硬直角、无圆角无阴影无渐变
   ========================================================= */
:root{
  --bg:#060606;             /* 近黑，非深灰卡片 */
  --panel:#0a0a0a;
  --line:#2a1d00;          /* 暗琥珀描边 */
  --ink:#ffb000;           /* 磷光琥珀：唯一主色 */
  --dim:#6e5212;           /* 暗琥珀：次要 */
  --red:#ff3b30;           /* 仅错误用红 */
  --mono:"JetBrains Mono","SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--mono);
  font-size:13px;
  line-height:1.45;
  overflow:hidden;
  letter-spacing:.5px;
  text-transform:uppercase; /* 全大写，去"友好"感 */
}

/* 背景：极淡琥珀点阵，不是柔和网格 */
.grid-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(var(--line) 1px,transparent 1px);
  background-size:22px 22px;
  opacity:.35;
}
/* 扫描线 + 暗角，CRT 质感 */
.scanline{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.25) 2px 3px);
  box-shadow:inset 0 0 160px 40px rgba(0,0,0,.9);
}

/* 顶栏 */
.topbar{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;
  height:38px;padding:0 10px;
  border-bottom:1px solid var(--line);
  background:#080808;
}
.brand{color:var(--ink);font-weight:700;letter-spacing:2px;text-shadow:0 0 6px rgba(255,176,0,.6)}
.brand::before{content:"█ "}
.cursor{animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.status-strip{display:flex;gap:10px;align-items:center;color:var(--dim);font-size:11px}
.status-strip .sep{opacity:.4}
.dot{width:7px;height:7px;display:inline-block;background:var(--dim)}
.dot.ok{background:var(--ink);box-shadow:0 0 5px var(--ink)}
.dot.bad{background:var(--red);box-shadow:0 0 5px var(--red)}
.user-zone{display:flex;gap:6px}

/* 按钮：硬直角、琥珀描边，绝不圆润 */
.btn{
  font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:1px;
  padding:4px 10px;border:1px solid var(--line);border-radius:0;
  background:transparent;color:var(--ink);cursor:pointer;transition:all .1s;
}
.btn:hover{border-color:var(--ink);background:var(--ink);color:#060606}
.btn.solid{border-color:var(--ink);color:var(--ink)}
.btn.solid:hover{background:var(--ink);color:#060606}
.btn.ghost{color:var(--dim)}
.btn.small{padding:2px 7px}
.btn.block{width:100%;margin-top:10px;padding:9px}

/* 布局 */
.layout{position:relative;z-index:2;display:flex;height:calc(100% - 38px)}
.sidenav{
  width:108px;border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:0;background:#080808;
}
.nav-item{
  padding:11px 10px;border-bottom:1px solid var(--line);border-left:3px solid transparent;
  color:var(--dim);cursor:pointer;font-size:11px;
}
.nav-item:hover{color:var(--ink);background:#0c0c0c}
.nav-item.active{color:var(--ink);border-left-color:var(--ink);background:#0c0c0c}

.main{flex:1;overflow:auto;padding:12px}
.view{display:none}
.view.active{display:block}

/* 概览 */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-bottom:12px;border:1px solid var(--line)}
.stat{border-right:1px solid var(--line);padding:10px;background:var(--panel)}
.stat:last-child{border-right:none}
.stat-label{color:var(--dim);font-size:10px;letter-spacing:1px}
.stat-num{font-size:24px;font-weight:700;color:var(--ink);margin-top:4px;text-shadow:0 0 5px rgba(255,176,0,.4)}
.stat-num.warn{color:var(--ink)}
.stat-sub{color:var(--dim);font-size:10px;margin-top:3px}
.spark{height:14px;margin-top:6px;display:flex;align-items:flex-end;gap:1px}
.spark i{flex:1;background:var(--dim);display:block}

/* 面板：硬框 + 琥珀标题条 */
.panel{border:1px solid var(--line);background:var(--panel);margin-bottom:12px}
.panel-head{
  padding:6px 10px;border-bottom:1px solid var(--line);
  color:var(--ink);font-size:11px;letter-spacing:1px;
  display:flex;justify-content:space-between;align-items:center;
  background:#0c0c0c;
}
.tag{
  font-size:9px;color:var(--dim);border:1px solid var(--line);
  padding:1px 5px;letter-spacing:1px;
}

/* 节点列表 */
.node-list{display:flex;flex-direction:column}
.node{
  display:grid;grid-template-columns:150px 1fr 70px;gap:8px;
  padding:8px 10px;border-bottom:1px solid var(--line);align-items:center;
}
.node:last-child{border-bottom:none}
.node-name{color:var(--ink)}
.node-name small{display:block;color:var(--dim);font-size:9px}
.bar{height:7px;background:#060606;border:1px solid var(--line);position:relative}
.bar i{position:absolute;left:0;top:0;bottom:0;background:var(--ink);display:block}
.bar i.mid{background:var(--dim)}
.bar i.hot{background:var(--red)}
.node-lat{text-align:right;color:var(--dim);font-size:11px}
.node-lat b{color:var(--ink)}

/* 节点表 */
.node-table{padding:10px}
.tr{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:8px;padding:6px 0;border-bottom:1px solid var(--line)}
.tr.head{color:var(--dim);font-size:10px}
.tr span.big{color:var(--ink)}

/* 密钥区 */
.key-area{padding:12px}
.locked{color:var(--dim);text-align:center;padding:24px 0}
.keyrow{border:1px solid var(--line);padding:9px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;background:#080808}
.keyrow code{color:var(--ink);word-break:break-all}
.copybtn{font-size:10px;color:var(--dim);border:1px solid var(--line);background:transparent;padding:3px 7px;cursor:pointer;text-transform:uppercase}
.copybtn:hover{color:var(--ink);border-color:var(--ink)}

/* 日志流 */
.log-stream{
  height:360px;overflow:auto;padding:8px 10px;
  font-size:11px;color:var(--dim);background:#040404;
  border-top:1px solid var(--line);
}
.log-stream .l{white-space:pre;padding:1px 0}
.log-stream .l .t{color:var(--ink)}
.log-stream .l .ok{color:var(--ink)}
.log-stream .l .err{color:var(--red)}

/* 模态：琥珀硬框 */
.modal-mask{
  position:fixed;inset:0;z-index:10;background:rgba(0,0,0,.85);
  display:flex;align-items:center;justify-content:center;
}
.modal-mask[hidden]{display:none}
.modal{width:330px;border:1px solid var(--ink);background:#080808;box-shadow:0 0 0 4px #060606,0 0 24px rgba(255,176,0,.18)}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line);color:var(--ink);letter-spacing:1px}
.modal-body{padding:14px}
.field{display:block;margin-bottom:10px}
.field span{display:block;color:var(--dim);font-size:10px;margin-bottom:3px;letter-spacing:1px}
.field input{
  width:100%;background:#040404;border:1px solid var(--line);border-radius:0;
  color:var(--ink);font-family:var(--mono);font-size:12px;padding:8px;outline:none;text-transform:none;
}
.field input:focus{border-color:var(--ink);background:#0c0c0c}
.modal-msg{min-height:14px;font-size:10px;color:var(--red)}
.modal-switch{margin-top:8px;color:var(--dim);font-size:10px;text-align:center}
.modal-switch a{color:var(--ink);cursor:pointer}

/* 后台 */
.admin-login{max-width:320px;margin:16px auto}
.inj-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.switch{display:flex;align-items:center;gap:6px;color:var(--ink);font-size:11px;cursor:pointer}
.sel{background:#040404;border:1px solid var(--line);color:var(--ink);font-family:var(--mono);padding:6px;font-size:11px;outline:none;border-radius:0;text-transform:uppercase}
.sel:focus{border-color:var(--ink)}
.ta{width:100%;background:#040404;border:1px solid var(--line);color:var(--ink);font-family:var(--mono);font-size:12px;padding:8px;outline:none;resize:vertical;line-height:1.5;text-transform:none}
.ta:focus{border-color:var(--ink);background:#0c0c0c}

/* 移动端 */
@media(max-width:720px){
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .sidenav{width:78px}
  .node{grid-template-columns:100px 1fr 56px}
}