:root{
  --bg:#070d17; --panel:#0d1624; --panel2:#121d2e; --line:#263347;
  --text:#edf3ff; --muted:#96a4ba; --gold:#e6b64d; --gold2:#ffe09a;
  --blue:#19a9ff; --green:#37c785; --red:#f06058;
  --shadow:0 24px 70px rgba(0,0,0,.42); --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;font-size:14px}
body{background:
  radial-gradient(900px 520px at 78% -12%,rgba(25,169,255,.16),transparent 62%),
  radial-gradient(680px 440px at 15% 18%,rgba(230,182,77,.13),transparent 56%),
  linear-gradient(180deg,#08101c 0%,#070d17 56%,#060a12 100%);}
button{font-family:inherit;cursor:pointer}
input,select{font-family:inherit}
.hidden{display:none!important}

/* ===== 布局 ===== */
.shell{min-height:100vh;display:grid;grid-template-columns:228px 1fr}
.side{border-right:1px solid var(--line);padding:20px 14px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.brand-mark{width:38px;height:38px;border:1px solid rgba(25,169,255,.45);border-radius:11px;
  background:linear-gradient(135deg,rgba(230,182,77,.22),rgba(25,169,255,.16));
  display:grid;place-items:center;color:var(--gold2);font-weight:900;font-size:19px}
.brand b{font-size:16px}.brand small{display:block;color:var(--muted);font-size:11px}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
  color:var(--muted);cursor:pointer;border:1px solid transparent;user-select:none}
.nav-item.active,.nav-item:hover{background:rgba(255,255,255,.05);color:var(--text);border-color:var(--line)}
.nav-item .ico{width:18px;text-align:center}
.side-foot{margin-top:auto;color:var(--muted);font-size:12px;display:flex;flex-direction:column;gap:8px}
.logout{border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--muted);
  border-radius:9px;padding:8px 10px;font-size:13px}
.logout:hover{border-color:var(--red);color:#ffb4ae}

.main{padding:24px clamp(16px,3vw,38px) 90px;max-width:1180px;width:100%}
.top{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.top h1{font-size:clamp(20px,3vw,26px);margin:0}
.badges{display:flex;gap:8px;flex-wrap:wrap}
.pill{border:1px solid var(--line);background:rgba(255,255,255,.035);color:var(--muted);
  border-radius:999px;padding:6px 11px;font-size:12px}
.pill.green{color:#7df0b5;border-color:rgba(55,199,133,.35);background:rgba(55,199,133,.1)}
.pill.gold{color:var(--gold2);border-color:rgba(230,182,77,.3);background:rgba(230,182,77,.1)}
.pill.red{color:#ffb4ae;border-color:rgba(240,96,88,.35);background:rgba(240,96,88,.1)}

/* ===== 通用块 ===== */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:20px}
.card{border:1px solid var(--line);border-radius:var(--radius);padding:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));box-shadow:var(--shadow)}
.card .k{color:var(--muted);font-size:12px}
.card .v{font-size:24px;color:var(--gold2);margin-top:6px;font-weight:800}
.panel{border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));box-shadow:var(--shadow)}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.panel h2{font-size:17px;margin:0}
.muted{color:var(--muted)}
.empty{color:var(--muted);padding:24px;text-align:center;border:1px dashed var(--line);border-radius:12px}

/* ===== 按钮 ===== */
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);
  background:rgba(255,255,255,.05);color:var(--text);border-radius:10px;padding:9px 14px;font-weight:600;font-size:13px}
.btn:hover{border-color:rgba(230,182,77,.6)}
.btn.primary{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#151001;border:0}
.btn.sm{padding:6px 10px;font-size:12px;border-radius:8px}
.btn.ghost{background:transparent}
.btn.danger:hover{border-color:var(--red);color:#ffb4ae}

/* ===== 表格 ===== */
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);font-size:13px}
th{color:var(--muted);font-weight:600;font-size:12px}
td .row-actions{display:flex;gap:6px;flex-wrap:wrap}
.tag{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;border:1px solid var(--line)}
.tag.on{color:#7df0b5;border-color:rgba(55,199,133,.3);background:rgba(55,199,133,.1)}
.tag.off{color:var(--muted)}
.tag.test{color:#74c9ff;border-color:rgba(25,169,255,.3);background:rgba(25,169,255,.1)}
.tag.live{color:var(--gold2);border-color:rgba(230,182,77,.3);background:rgba(230,182,77,.1)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* ===== 表单 ===== */
.form-grid{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:12px;color:var(--muted)}
.field input,.field select{background:rgba(8,14,24,.7);border:1px solid var(--line);color:var(--text);
  border-radius:9px;padding:10px 12px;font-size:14px;width:100%}
.field input:focus,.field select:focus{outline:none;border-color:rgba(230,182,77,.6)}
.switch{display:flex;align-items:center;gap:10px}
.switch input{width:auto}

/* ===== 弹窗 ===== */
.modal-mask{position:fixed;inset:0;background:rgba(3,7,14,.72);display:grid;place-items:center;z-index:50;padding:18px}
.modal{width:min(560px,100%);border:1px solid var(--line);border-radius:16px;background:var(--panel);
  box-shadow:var(--shadow);padding:22px}
.modal h3{margin:0 0 4px;font-size:18px}
.modal .sub{color:var(--muted);font-size:13px;margin-bottom:16px}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}

/* ===== 实时引擎面板 ===== */
.eng-line{display:flex;justify-content:space-between;align-items:center;gap:10px;
  border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  background:rgba(255,255,255,.02);font-size:13px}
.eng-line b{color:var(--text);font-weight:600;text-align:right;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ===== 登录 ===== */
.login-mask{position:fixed;inset:0;display:grid;place-items:center;z-index:80;padding:18px;
  background:radial-gradient(700px 480px at 50% 0%,rgba(25,169,255,.12),transparent 60%),var(--bg)}
.login-box{width:min(380px,100%);border:1px solid var(--line);border-radius:18px;background:var(--panel);
  box-shadow:var(--shadow);padding:30px 26px}
.login-box .brand{justify-content:center;margin-bottom:22px}
.login-err{color:#ffb4ae;font-size:13px;min-height:18px;margin-top:8px}

/* ===== Toast ===== */
.toast-wrap{position:fixed;top:18px;right:18px;display:flex;flex-direction:column;gap:10px;z-index:99}
.toast{border:1px solid var(--line);border-radius:11px;padding:12px 16px;background:var(--panel2);
  box-shadow:var(--shadow);font-size:13px;min-width:200px;animation:slidein .2s ease}
.toast.ok{border-color:rgba(55,199,133,.4)}
.toast.err{border-color:rgba(240,96,88,.4)}
@keyframes slidein{from{transform:translateX(20px);opacity:0}to{transform:none;opacity:1}}

/* ===== 移动端 ===== */
.tabbar{display:none}
@media (max-width:820px){
  .shell{grid-template-columns:1fr}
  .side{display:none}
  .main{padding:16px 13px 86px}
  .form-grid{grid-template-columns:1fr}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;background:var(--panel);
    border-top:1px solid var(--line);justify-content:space-around;padding:7px 2px;z-index:40}
  .tab{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted);font-size:11px;padding:4px 7px;border:0;background:none}
  .tab.active{color:var(--gold2)}
  table{display:block;overflow-x:auto;white-space:nowrap}
}