:root{
  --panel:#E9E6DF; --module:#F4F2ED; --line:#C6C2B8; --groove:#B9B5AA;
  --ink:#1E1C19; --muted:#5C584F; --weak:#8C877B;
  --lamp-g:#2F9E44; --lamp-a:#D98A16; --lamp-r:#C8372D; --lamp-off:#B9B5AA; --lamp-t:#2E9E8C;
  --cond:"DIN Condensed","Avenir Next Condensed","PingFang SC",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0;overflow:hidden}
body{
  background-color:#D9D5CB;
  background-image:radial-gradient(130% 100% at 50% -10%,#E6E3DB 0%,#D8D4CA 55%,#CBC7BD 100%);
  color:var(--ink); font-family:var(--sans); font-size:14px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
[hidden]{display:none!important}
.hidden{display:none!important}
button{font-family:inherit;color:inherit}
input,select,textarea{font-family:inherit}
.muted{color:var(--muted)}
.account-ok{color:#245A2F}
.account-err{color:#8A2119}

/* ---------- 面板 ---------- */
.panel{
  position:relative; margin:16px; height:calc(100vh - 32px); min-height:660px;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.30) 0 1px,rgba(255,255,255,0) 1px 4px),
    linear-gradient(180deg,#EDEAE3 0%,#E9E6DF 45%,#E4E1D9 100%);
  border:1px solid var(--line); border-radius:3px;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    inset 0 -1px 0 var(--groove),
    0 2px 3px rgba(30,28,25,.10),
    0 16px 36px rgba(30,28,25,.12);
  display:flex; flex-direction:column; overflow:hidden;
}

/* ---------- 铭牌条 ---------- */
.plate{
  height:58px; flex:0 0 58px; display:flex; align-items:center; gap:16px; padding:0 16px;
  background:linear-gradient(180deg,#F2EFE8 0%,#EDEAE3 60%,#E5E2DA 100%);
  border-bottom:1px solid var(--groove);
  box-shadow:inset 0 1px 0 #fff, 0 1px 0 #fff;
  min-width:0;
}
.mark{
  width:34px; height:34px; flex:0 0 34px; border-radius:2px;
  background:linear-gradient(180deg,#2A2723,#151311);
  color:#F4F2ED; font-family:var(--cond); font-weight:700; font-size:17px; letter-spacing:.06em;
  display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20), 0 1px 0 rgba(255,255,255,.65);
}
.brand{display:flex;flex-direction:column;justify-content:center;min-width:0}
.brand-t{font-family:var(--cond);font-weight:700;font-size:19px;letter-spacing:.12em;line-height:1;color:var(--ink);white-space:nowrap}
.brand-s{font-size:12px;color:var(--muted);letter-spacing:.05em;line-height:1;margin-top:5px;white-space:nowrap}
.lamps{
  display:flex; align-items:center; gap:12px; margin-left:4px; padding-left:16px;
  border-left:1px solid #C9C5BA;
}
.lamp-item{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:30px}
.lamp-item .ll{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted);line-height:1}
.lamp{
  width:9px;height:9px;border-radius:50%;display:inline-block;flex:0 0 auto;
  background:var(--lamp-off);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 0 0 1px rgba(30,28,25,.13);
}
.lamp.mini{width:6px;height:6px}
.lamp.green{background:radial-gradient(circle at 35% 30%,#86DE96 0%,#3CB055 45%,#207E32 100%);
  box-shadow:0 0 6px rgba(47,158,68,.65),0 0 0 1px rgba(24,60,32,.30),inset 0 1px 0 rgba(255,255,255,.55)}
.lamp.amber{background:radial-gradient(circle at 35% 30%,#F3C070 0%,#DE941F 45%,#9C5D0A 100%);
  box-shadow:0 0 6px rgba(217,138,22,.65),0 0 0 1px rgba(90,58,10,.30),inset 0 1px 0 rgba(255,255,255,.55)}
.lamp.red{background:radial-gradient(circle at 35% 30%,#EB8579 0%,#CE4033 45%,#8A2119 100%);
  box-shadow:0 0 6px rgba(200,55,45,.65),0 0 0 1px rgba(90,24,20,.30),inset 0 1px 0 rgba(255,255,255,.5)}
.lamp.teal{background:radial-gradient(circle at 35% 30%,#8FE0D6 0%,#33A697 45%,#177264 100%);
  box-shadow:0 0 6px rgba(46,158,140,.7),0 0 0 1px rgba(20,72,66,.30),inset 0 1px 0 rgba(255,255,255,.55)}
.lamp-sep{width:1px;height:22px;background:#C9C5BA;box-shadow:1px 0 0 #fff;margin:0 2px}
.plate-right{margin-left:auto;display:flex;align-items:center;gap:16px;min-width:0}
.conn{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;min-width:0}
.conn-label{font-size:14px;font-weight:600;letter-spacing:.02em;line-height:1.2;display:flex;align-items:center;gap:7px;white-space:nowrap}
.conn-label::before{content:"";width:7px;height:7px;background:#8C877B;border-radius:1px;flex:0 0 7px}
.conn-label.ok::before{background:var(--lamp-g);box-shadow:0 0 4px rgba(47,158,68,.7)}
.conn-label.wait::before{background:var(--lamp-a);box-shadow:0 0 4px rgba(217,138,22,.7)}
.conn-label.bad::before{background:var(--lamp-r);box-shadow:0 0 4px rgba(200,55,45,.7)}
.conn-sub{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.03em;line-height:1.3;margin-top:4px;
  max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#statusDot{display:none}
.keys{display:flex;gap:3px;padding:3px;background:#DEDAD1;border:1px solid var(--line);border-radius:3px;
  box-shadow:inset 0 1px 2px rgba(30,28,25,.14),inset 0 -1px 0 #fff}

/* ---------- 控件 ---------- */
.key{
  height:30px; padding:0 12px; border:1px solid #B9B5AA; border-radius:2px;
  background:linear-gradient(180deg,#FCFBF7 0%,#F1EEE7 100%);
  font-size:14px; color:var(--ink); cursor:pointer; user-select:none; white-space:nowrap;
  box-shadow:0 1px 0 #A8A399, inset 0 1px 0 #fff;
  transition:background .08s linear;
}
.key:hover{background:linear-gradient(180deg,#FFFFFF 0%,#F4F1EA 100%)}
.key:active{transform:translateY(1px);box-shadow:none;background:#E7E3DA}
.key:disabled{color:#5C584F;background:#E9E6DF;border-color:#CFCBC1;
  box-shadow:inset 0 1px 2px rgba(30,28,25,.13);cursor:default;transform:none}
.key.sm{height:28px;font-size:13px;padding:0 10px}
.key.xs{height:24px;font-size:12px;padding:0 7px;font-family:var(--mono);letter-spacing:.02em}
.key.wide{width:100%;height:30px;font-size:14px}

.fld{display:block;margin:0 0 7px;min-width:0}
.fld > span{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted);margin-bottom:4px;white-space:nowrap}
input:not([type=checkbox]):not([type=radio]),select,textarea,.inp{
  width:100%;height:30px;padding:0 5px;border:1px solid var(--line);border-radius:2px;
  background:#FBFAF6;color:var(--ink);font-family:var(--mono);font-size:14px;letter-spacing:0;
  box-shadow:inset 0 1px 0 #fff, 0 1px 0 #D3CFC5; outline:none;
}
input[readonly]{color:#4A463E;background:#F1EEE7}
input:focus,select:focus,textarea:focus{border-color:#8C877B;box-shadow:inset 0 1px 2px rgba(30,28,25,.09),0 0 0 2px rgba(198,194,184,.45)}
input::placeholder,textarea::placeholder{color:#6E695F}
select{
  appearance:none;-webkit-appearance:none;padding-right:20px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4'%3E%3Cpath d='M0 0h7L3.5 4z' fill='%236B675E'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 7px center;
}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.join{display:flex;gap:2px;min-width:0}
.join input{flex:1;min-width:0}
.join .key{flex:0 0 auto;height:30px;font-size:12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:7px;min-width:0}
.grid2 .fld{margin-bottom:7px}
.pw{position:relative;min-width:0}
.pw input{padding-right:40px}
.pw .key{position:absolute;right:3px;top:3px;height:24px;padding:0 5px;font-size:12px}

.chk{display:inline-flex;align-items:center;gap:7px;font-size:14px;color:#2E2B26;cursor:pointer;user-select:none;white-space:nowrap}
.chk input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.chk i{width:14px;height:14px;flex:0 0 14px;border:1px solid #B9B5AA;border-radius:2px;background:#FBFAF6;
  box-shadow:inset 0 1px 0 #fff,0 1px 0 #D3CFC5;position:relative;display:inline-block}
.chk input:checked + i{background:#1E1C19;border-color:#1E1C19;box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.chk input:checked + i::after{content:"";position:absolute;left:4px;top:2px;width:5px;height:8px;
  border:1.8px solid #F4F2ED;border-top:0;border-left:0;transform:rotate(40deg)}
.chk input:disabled + i{background:#E9E6DF;box-shadow:inset 0 1px 2px rgba(30,28,25,.12);opacity:.9}
.chk input:disabled ~ span{color:#5C584F}
.chk input:focus-visible + i{outline:2px solid rgba(140,135,123,.5);outline-offset:1px}

.seg{display:flex;border:1px solid var(--line);border-radius:2px;background:#E7E3DA;
  box-shadow:0 1px 0 #D3CFC5;overflow:hidden;flex:0 0 auto}
.seg button{height:26px;padding:0 8px;border:0;border-right:1px solid #D3CFC5;background:transparent;
  font-size:12px;color:var(--muted);cursor:pointer;line-height:1}
.seg button:last-child{border-right:0}
.seg button.on{background:#FBFAF6;color:var(--ink);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 #B9B5AA}

/* ---------- 状态排 ---------- */
.rail{
  height:38px;flex:0 0 38px;display:flex;align-items:center;padding:0 12px;overflow:hidden;
  background:linear-gradient(180deg,#E3E0D7,#DBD7CE);
  border-bottom:1px solid var(--groove);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1px 0 #fff;
  font-family:var(--mono);white-space:nowrap;min-width:0;
}
.rail-item{display:flex;align-items:baseline;gap:8px;padding:0 12px;border-right:1px solid #CBC7BC;
  box-shadow:1px 0 0 rgba(255,255,255,.6);height:18px;min-width:0}
.rail-item:first-child{padding-left:2px}
.rail-item .rl{font-size:12px;letter-spacing:.06em;color:var(--muted);flex:0 0 auto}
.rail-item .rv{font-size:14px;color:#2E2B26;letter-spacing:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.rail-rc{display:flex;align-items:baseline;gap:6px;padding:0 10px;border-right:1px solid #CBC7BC;
  box-shadow:1px 0 0 rgba(255,255,255,.6);height:18px;flex:0 0 auto}
.rail-rc .rl{font-size:12px;letter-spacing:.06em;color:var(--muted)}
.rail-rc b{font-size:16px;font-weight:700;letter-spacing:0;line-height:1;font-variant-numeric:tabular-nums}
.rail-rc b.alert{color:#8A2119}
.rail-right{margin-left:auto;display:flex;align-items:center;gap:8px;padding-left:12px;font-size:12px;color:var(--muted);letter-spacing:.04em;white-space:nowrap;flex:0 0 auto}

/* ---------- 三栏 ---------- */
.body{flex:1;display:flex;min-height:0;min-width:0}
.col{display:flex;flex-direction:column;min-height:0;background:var(--module);padding:11px;min-width:0}
.col-left{width:308px;flex:0 0 308px;overflow-y:auto;padding-right:12px}
.col-mid{width:368px;flex:0 0 368px;padding:11px 11px 12px}
.col-right{flex:1;min-width:0;padding:11px 8px 12px}
.col-mid,.col-right{border-left:1px solid var(--groove);box-shadow:inset 1px 0 0 #FFFFFF}
.col-left::-webkit-scrollbar{width:8px}
.col-left::-webkit-scrollbar-thumb{background:#CFCBC1;border-radius:4px}
.col-left::-webkit-scrollbar-track{background:transparent}

.sec + .sec{border-top:1px solid #DAD6CB;box-shadow:0 -1px 0 #fff;margin-top:6px;padding-top:6px}
.sec-h{display:flex;align-items:baseline;gap:7px;margin-bottom:6px;min-height:18px;min-width:0}
.mod-h{margin-bottom:6px}
.mod-h .sec-t{font-size:15px;letter-spacing:.06em;color:#2E2B26}
.mod-h .sec-en{letter-spacing:.13em;color:#4A463E}
.sec-t{font-size:14px;font-weight:600;letter-spacing:.03em;color:#2E2B26;flex:0 0 auto}
.sec-en{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted);text-transform:uppercase;white-space:nowrap}
.sec-meta{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.04em;white-space:nowrap}
.sec-meta b{color:#2E2B26;font-weight:700}

/* 账号 */
.who{display:flex;align-items:center;gap:7px;height:28px;min-width:0}
.who-name{font-family:var(--mono);font-size:14px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.who .key{margin-left:auto;flex:0 0 auto}
.who .key + .key{margin-left:0}
#accountSession .who{margin-bottom:2px}
#loginFields .grid2{margin-bottom:2px}
#loginFields .key.wide{margin-bottom:6px}
.note{font-size:14px;line-height:1.45;color:var(--muted);margin-top:6px;overflow-wrap:anywhere}
#accountState{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.04em;white-space:nowrap}

/* 目标设备 */
.topic-preview{display:flex;align-items:baseline;gap:7px;margin-top:8px;
  background:#EAE6DC;border:1px solid #D3CFC5;border-radius:2px;
  box-shadow:inset 0 1px 2px rgba(30,28,25,.07);font-family:var(--mono);min-width:0;padding:5px 8px}
.tp-l{font-size:12px;letter-spacing:.06em;color:var(--muted);flex:0 0 auto}
.tp-v{font-size:14px;color:#2E2B26;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 订阅 */
.sub-add{display:flex;gap:5px;align-items:center;margin-bottom:7px;min-width:0}
.sub-add input{flex:1;min-width:0;font-size:14px}
.seg-qos{flex:0 0 auto}
.seg-qos button{padding:0 7px;font-size:12px;font-family:var(--mono)}
.subs{list-style:none;margin:0;padding:0}
.sub-item{display:flex;align-items:center;gap:7px;height:28px;border-bottom:1px solid #E0DCD2;min-width:0}
.sub-item:first-child{border-top:1px solid #E0DCD2}
.sub-topic{flex:1;min-width:0;font-family:var(--mono);font-size:14px;color:#2E2B26;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sub-state{flex:0 0 auto;font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--muted);
  border:1px solid #CFCBC1;border-radius:2px;padding:2px 5px;line-height:1.1;background:#F7F5F0}
.sub-state.bad{color:#8A2119;border-color:#CFCBC1;background:#F7F5F0}
.sub-item .icon-btn{flex:0 0 20px;width:20px;height:20px;padding:0;border:0;background:transparent;color:var(--muted);
  font-size:16px;line-height:1;cursor:pointer;border-radius:2px}
.sub-item .icon-btn:hover{background:#DFDACE;color:var(--ink)}

/* 高级 */
.sec-adv{padding-top:8px}
.col-left > .sec-adv{margin-top:auto}
.adv-toggle{display:flex;align-items:baseline;gap:6px;border:0;background:transparent;padding:0;cursor:pointer;margin-bottom:8px;width:100%;text-align:left}
.adv-toggle .chev{font-size:12px;color:var(--muted);width:12px;display:inline-block}
.adv-sum{font-family:var(--mono);font-size:14px;color:var(--muted);letter-spacing:0;line-height:1.45;overflow-wrap:anywhere}
.adv-body{margin-top:8px}
.adv-body .fld{margin-bottom:6px}
.chk-row{display:flex;gap:14px;margin-top:2px}
.ka{display:flex;align-items:center;gap:9px;margin-top:7px;padding-top:7px;border-top:1px solid #DAD6CB}
.ka-l{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted)}
.ka-bars{display:flex;gap:2px;flex:1;min-width:0}
.ka-bars i{display:block;height:14px;flex:1;background:#D8D3C7;border-radius:1px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.ka-bars i.on{background:linear-gradient(180deg,#ECA94F,#C97C10);box-shadow:0 0 4px rgba(217,138,22,.45),inset 0 1px 0 rgba(255,255,255,.35)}
.ka-v{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.04em;min-width:42px;text-align:right}

/* ---------- 发送器 ---------- */
#composerPane{padding:11px}
#publishCard{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0}
.lever{display:flex;padding:3px;margin-bottom:9px;background:#E2DED5;border:1px solid #B9B5AA;border-radius:3px;
  box-shadow:inset 0 2px 3px rgba(30,28,25,.16),inset 0 -1px 0 #fff;flex:0 0 auto}
.lever-key{flex:1;height:42px;margin:0 1px;border:1px solid var(--line);border-radius:2px;
  background:linear-gradient(180deg,#FCFBF7,#EFECE4);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;cursor:pointer;
  box-shadow:0 1px 0 #A8A399,inset 0 1px 0 #fff;transition:background .08s linear;min-width:0}
.lever-key:first-child{margin-left:0}
.lever-key:last-child{margin-right:0}
.lever-key b{font-family:var(--cond);font-size:16px;font-weight:700;letter-spacing:.12em;color:#2E2B26;line-height:1}
.lever-key span{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:-.01em;line-height:1.25;white-space:nowrap}
.lever-key:hover{background:linear-gradient(180deg,#FFFFFF,#F2EFE8)}
/* 不可用态：不用 opacity（会把文字对比度一起压下去），改用发灰底 + 加深文字 */
.lever-key.off{cursor:not-allowed;background:linear-gradient(180deg,#F4F2EC,#E7E3D9);border-color:#CCC8BC}
.lever-key.off:hover{background:linear-gradient(180deg,#F4F2EC,#E7E3D9)}
.lever-key.off b,.lever-key.off span{color:#5C584F}
.lever-key.off.on{background:linear-gradient(180deg,#EFECE4,#E0DCD1);border-color:#C3BFB3}
.lever-key.on{background:#DBD7CD;border-color:#B0ACA2;
  box-shadow:inset 0 2px 4px rgba(30,28,25,.24),inset 0 -1px 0 rgba(255,255,255,.65)}
.lever-key.on b{color:var(--ink)}
.lever-key.on span{color:#4A463E}
.topic-line{display:flex;align-items:baseline;gap:8px;margin-bottom:7px;font-family:var(--mono);min-width:0}
.tl-l{font-size:12px;letter-spacing:.06em;color:var(--muted);flex:0 0 auto}
.tl-v{font-size:14px;color:#2E2B26;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tpl-row{display:flex;gap:5px;align-items:center;margin-bottom:5px;min-width:0}
.tpl-row select{flex:1;min-width:0;height:30px;font-size:14px}
.tpl-keys{display:flex;gap:3px;flex:0 0 auto}
.tpl-keys .key{height:30px;font-size:12px;padding:0 8px}
.hint{font-size:14px;line-height:20px;color:var(--muted);height:40px;overflow:hidden;margin-bottom:7px;letter-spacing:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.cfg-row{display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px;margin-bottom:7px}
.cfg-row .fld span{font-size:12px}
.cfg-row .fld{margin-bottom:0}
#ackCorr{font-size:14px}

.code-wrap{flex:1;min-height:170px;margin:0 0 7px;display:flex;flex-direction:column;overflow:hidden;
  border:1px solid #15130F;border-radius:3px;background:#1E1C19;
  box-shadow:inset 0 1px 0 #3B3630,0 1px 0 #fff,0 2px 5px rgba(30,28,25,.20)}
.code-head{height:28px;flex:0 0 28px;display:flex;align-items:center;gap:8px;padding:0 10px;
  background:#232019;border-bottom:1px solid #35312B;font-family:var(--mono);font-size:12px;
  letter-spacing:.06em;color:#A6A093}
.code-head .ch-r{margin-left:auto;color:#A6A093;letter-spacing:.03em;white-space:nowrap}
.code-body{position:relative;flex:1;min-height:0}
.code-body pre,.code-body textarea{position:absolute;inset:0;margin:0;padding:9px 9px;border:0;
  background:transparent;font-family:var(--mono);font-size:14px;line-height:19px;letter-spacing:-.022em;
  white-space:pre;overflow:auto;tab-size:2}
.code-body textarea{width:100%;height:100%;color:#EDEAE0;caret-color:#EDEAE0;resize:none;outline:none;
  border:0;box-shadow:none;border-radius:0;padding:9px;background:transparent;
  white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;overflow-x:hidden}
.code-body textarea:focus{box-shadow:none;border:0}
.code-body textarea::placeholder{color:#6E695F}
.code-body textarea::-webkit-scrollbar{width:9px;height:9px}
.code-body textarea::-webkit-scrollbar-thumb{background:#4C473D}
.code-body textarea::-webkit-scrollbar-track{background:#191713}

.pub-opts{display:flex;align-items:center;gap:14px;margin-bottom:8px;flex:0 0 auto}
.qos-tag{font-family:var(--mono);font-size:14px;color:#2E2B26;letter-spacing:.02em}
.bigkey{width:100%;height:44px;display:flex;align-items:center;justify-content:center;gap:11px;flex:0 0 auto;
  border:1px solid #14120F;border-radius:3px;cursor:pointer;
  background:linear-gradient(180deg,#2E2A26 0%,#1B1916 100%);
  box-shadow:0 2px 0 #B9B5AA,inset 0 1px 0 rgba(255,255,255,.16);
  color:#F5F2E9;font-size:16px;font-weight:600;letter-spacing:.1em}
.bigkey .bk-r{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:#B5AFA2;font-weight:400}
.bigkey:hover{background:linear-gradient(180deg,#38332E,#201E1A)}
.bigkey:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}
.bigkey:disabled{opacity:.55;cursor:default;transform:none}
.pub-result{display:flex;align-items:center;gap:7px;height:20px;margin-top:5px;flex:0 0 auto;
  font-family:var(--mono);font-size:14px;color:var(--muted);letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pub-result:empty{display:none}
.pub-result::before{content:"";width:6px;height:6px;border-radius:50%;background:#8C877B;flex:0 0 6px;
  box-shadow:0 0 0 1px rgba(30,28,25,.18)}
.pub-result.ok{color:#2A5E33}
.pub-result.ok::before{background:var(--lamp-g);box-shadow:0 0 5px rgba(47,158,68,.55)}
.pub-result.err{color:#8A2119}
.pub-result.err::before{background:var(--lamp-r);box-shadow:0 0 5px rgba(200,55,45,.55)}

/* ---------- 监视器 ---------- */
.mon-h{display:flex;align-items:center;gap:9px;margin-bottom:7px;min-width:0;flex:0 0 auto}
.mon-h.mod-h .sec-t{font-size:15px;letter-spacing:.06em}
.mon-h.mod-h .sec-en{letter-spacing:.1em;color:#4A463E}
.mon-h .right{margin-left:auto;display:flex;align-items:center;gap:8px;min-width:0}
.mon-count{font-family:var(--mono);font-size:14px;color:var(--muted);letter-spacing:.02em;white-space:nowrap}
.mon-count b{color:#2E2B26;font-size:15px;font-weight:700}
.tabs{display:flex;border:1px solid var(--line);border-radius:2px;overflow:hidden;background:#E4E0D7;flex:0 0 auto}
.tab{height:28px;padding:0 11px;border:0;border-right:1px solid #D3CFC5;background:transparent;
  font-size:13px;color:var(--muted);cursor:pointer;white-space:nowrap}
.tab:last-child{border-right:0}
.tab.on,.tab.active{background:#FBFAF6;color:var(--ink);box-shadow:inset 0 -2px 0 #1E1C19}
.mon-bar{display:flex;align-items:center;gap:6px;margin-bottom:7px;flex:0 0 auto;min-width:0}
.filter{flex:1;min-width:110px;height:30px;font-size:14px;padding:0 8px 0 26px;
  background-color:#FBFAF6;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Ccircle cx='4.5' cy='4.5' r='3.4' fill='none' stroke='%238C877B' stroke-width='1.2'/%3E%3Cpath d='M7 7l3.2 3.2' stroke='%238C877B' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:8px center}
.dir-seg button{min-width:34px;font-size:12px;padding:0 7px}
.pause{font-size:14px}

#logPane{flex:1;min-width:0;min-height:0;position:relative;overflow:auto;
  border:1px solid #B9B5AA;border-radius:2px;background:#FAF8F3;
  box-shadow:inset 0 1px 3px rgba(30,28,25,.06),0 1px 0 #fff}
#logPane::-webkit-scrollbar{width:9px;height:9px}
#logPane::-webkit-scrollbar-thumb{background:#CFCBC1}
#logPane::-webkit-scrollbar-track{background:#F2EFE8}
.log-head{display:grid;grid-template-columns:98px 36px minmax(0,1fr) 96px 136px;column-gap:4px;
  align-items:center;padding:0 6px;height:26px;border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 #fff;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted);
  position:sticky;top:0;z-index:2;background:#F2EFE8}
.log-head .r{text-align:right}
.log-list{background:#FAF8F3}
.log-row{display:grid;grid-template-columns:98px 36px minmax(0,1fr) 96px 136px;
  grid-template-rows:16px 16px;column-gap:4px;align-items:center;
  height:32px;padding:0 6px;border-bottom:1px solid #E4E0D6;cursor:pointer;
  font-family:var(--mono);position:relative;min-width:0}
.log-row:hover{background:#F1EDE4}
.log-row.selected{background:#E7E2D5;box-shadow:inset 0 0 0 1px #D2CDC0}
.log-row.selected::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#1E1C19}
.log-time{font-size:13px;color:#4A463E;letter-spacing:-.01em;white-space:nowrap;overflow:hidden}
.log-dir{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:700;letter-spacing:.02em;color:#2E2B26}
.log-dir::before{content:"";width:8px;height:8px;border-radius:1px;flex:0 0 8px;background:#8C877B;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.log-dir.in::before{background:#2F6BB0}
.log-dir.out::before{background:#B5701A}
.log-dir.sys::before{background:#8C877B}
.log-topic{font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:0}
.log-row.dir-sys .log-topic{color:var(--muted)}
.log-row.dir-sys .log-time{color:var(--muted)}
.log-type{font-size:12px;color:#3A3630;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:0}
.log-meta{font-size:12px;color:var(--muted);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
.log-sub{grid-column:3 / -1;grid-row:2;font-size:14px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:0;min-width:0}
.log-row.echo{opacity:.6}
#empty{padding:22px 14px;font-family:var(--mono);font-size:14px;color:var(--muted);line-height:1.6}

/* 详情 */
#detailPane{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;padding:9px 11px 10px;
  background:#EFECE4;border:1px solid #B9B5AA;border-radius:2px;
  box-shadow:inset 0 2px 4px rgba(30,28,25,.10),0 1px 0 #fff}
.det-top{display:flex;align-items:center;gap:8px;margin-bottom:7px;min-width:0}
.det-actions{margin-left:auto;display:flex;gap:4px;flex:0 0 auto}
.det-title{display:flex;align-items:center;gap:9px;min-height:24px;margin-bottom:6px;min-width:0;
  font-family:var(--mono);font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.det-meta{display:flex;flex-wrap:wrap;gap:6px 12px;margin-bottom:10px;min-width:0}
.meta-pill{display:inline-block;max-width:100%;min-width:0;font-family:var(--mono);font-size:12px;color:#2E2B26;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:#F5F2EB;border:1px solid #D3CFC5;
  border-radius:2px;padding:2px 6px;line-height:1.3}
.pane{flex:1;min-height:0;display:flex;flex-direction:column}
#validPane{flex:1;min-height:0;display:flex;flex-direction:column}
#rawPane{flex:1;min-height:0;display:flex;flex-direction:column}
.valid-list{flex:1;min-height:0;overflow:auto;padding-right:2px}
.valid-list::-webkit-scrollbar{width:8px}
.valid-list::-webkit-scrollbar-thumb{background:#CFCBC1}
.vcheck{display:grid;grid-template-columns:24px 150px minmax(0,1fr);column-gap:9px;align-items:center;
  padding:4px 0;border-bottom:1px solid rgba(198,194,184,.42);font-family:var(--mono);min-width:0}
.vcheck-icon{font-size:12px;color:var(--muted);line-height:1;display:flex;align-items:center;gap:5px}
.vcheck.ok .vcheck-icon{color:#245A2F}
.vcheck.warn .vcheck-icon{color:#7A4E0C}
.vcheck.fail .vcheck-icon{color:#8A2119}
.vcheck-label{font-size:14px;color:#2E2B26;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--sans)}
.vcheck-detail{font-size:14px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.vcheck.fail .vcheck-label{color:#8A2119;font-weight:700}
.vcheck.warn .vcheck-label{color:#6B4A15}
.raw-json{flex:1;min-height:0;margin:0;padding:9px 11px;overflow:auto;border:1px solid #15130F;border-radius:2px;
  background:#1E1C19;color:#EDEAE0;font-family:var(--mono);font-size:14px;line-height:21px;
  white-space:pre;box-shadow:inset 0 1px 0 #3B3630}
.raw-json::-webkit-scrollbar{width:8px;height:8px}
.raw-json::-webkit-scrollbar-thumb{background:#4C473D}
.raw-json::-webkit-scrollbar-track{background:#191713}

/* toast */
.toast{position:fixed;right:22px;bottom:22px;transform:translate(0,10px);opacity:0;pointer-events:none;
  display:flex;align-items:center;gap:9px;padding:10px 15px;border-radius:2px;
  background:#1E1C19;color:#EDEAE0;border:1px solid #000;
  font-family:var(--mono);font-size:14px;letter-spacing:0;
  box-shadow:0 8px 22px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.14);
  transition:opacity .16s linear,transform .16s ease;z-index:60;max-width:70vw}
.toast::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lamp-g);flex:0 0 6px;
  box-shadow:0 0 6px rgba(47,158,68,.6),0 0 0 1px rgba(0,0,0,.4)}
.toast.warn::before{background:radial-gradient(circle at 35% 30%,#F3C070,#DE941F 45%,#9C5D0A)}
.toast.err::before{background:radial-gradient(circle at 35% 30%,#EB8579,#CE4033 45%,#8A2119)}
.toast.show{opacity:1;transform:translate(0,0)}

@media (max-width:1500px){
  .rail-right{display:none}
}
@media (max-width:1180px){
  html,body{height:auto;overflow:auto}
  .panel{height:auto;min-height:0}
  .body{flex-direction:column}
  .col{width:auto;flex:none}
  .col-left,.col-mid{width:auto;flex:none}
  .col-left{overflow:visible}
  .col-mid,.col-right{border-left:0;border-top:1px solid var(--groove);box-shadow:inset 0 1px 0 #fff}
  .code-wrap{height:360px;flex:none}
  #logPane{height:420px;flex:none}
  #detailPane{height:380px;flex:none}
  .rail{overflow-x:auto}
  .rail-right{display:none}
}
@media (max-width:760px){
  .plate{height:auto;min-height:58px;flex-wrap:wrap;padding:9px 12px;gap:10px}
  .lamps{padding-left:10px;gap:8px}
  .plate-right{margin-left:0;width:100%;justify-content:space-between}
  .grid2{grid-template-columns:1fr}
  .mon-bar{flex-wrap:wrap}
  .filter{flex-basis:100%;order:5}
  .log-head,.log-row{grid-template-columns:92px 32px minmax(0,1fr) 74px 72px}
  .vcheck{grid-template-columns:22px 110px minmax(0,1fr)}
}
/* ---------- 设备实况（LAST STATE） ---------- */
.gauges{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#DCD7CB;border:1px solid #D3CFC5;
  border-radius:2px;overflow:hidden;box-shadow:inset 0 1px 0 #fff}
.g{background:#F7F5F0;padding:4px 7px;display:flex;flex-direction:column;gap:2px;min-width:0}
.g-l{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--muted);line-height:1.2}
.g-v{font-family:var(--cond);font-size:19px;font-weight:700;letter-spacing:.04em;line-height:1.15;color:var(--ink);
  display:flex;align-items:baseline;gap:2px;white-space:nowrap}
.g-v em{font-style:normal;font-family:var(--mono);font-size:12px;font-weight:400;color:var(--muted);letter-spacing:0}
.g-v.txt{font-family:var(--mono);font-size:14px;font-weight:400;letter-spacing:0;line-height:1.3}
.g-lamp{display:flex;align-items:center;gap:5px}

/* ---------- 最近发送（RECENT SENDS） ---------- */
.sends{border-top:1px solid #DAD6CB;box-shadow:0 -1px 0 #fff;padding-top:6px;margin-top:8px;flex:0 0 auto}
.sends-h{display:flex;align-items:baseline;gap:7px;height:20px;margin-bottom:2px}
.sends-h .sh-l{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted)}
.sends-h .sh-r{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.02em}
.send-list{display:flex;flex-direction:column}
.send-row{display:grid;grid-template-columns:66px minmax(0,1fr) 46px 12px;column-gap:7px;align-items:center;
  height:24px;font-family:var(--mono);font-size:14px;color:#3A3630;border-bottom:1px solid #E6E2D8}
.send-row:last-child{border-bottom:0}
.send-row .s-t{color:var(--muted);font-size:12px}
.send-row .s-type{color:#2E2B26;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.send-row .s-rtt{text-align:right;color:var(--ink);font-size:12px}
.send-row .s-ok{text-align:center;font-size:12px}
.send-empty{font-family:var(--mono);font-size:12px;color:var(--muted);height:24px;display:flex;align-items:center}

/* ---------- 会话事件（SESSION） ---------- */
.evt-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.evt-item{display:grid;grid-template-columns:68px 7px minmax(0,1fr);column-gap:7px;align-items:center;height:24px;
  font-family:var(--mono);font-size:14px;color:#3A3630;border-bottom:1px solid #E6E2D8}
.evt-item:last-child{border-bottom:0}
.evt-t{color:var(--muted)}
.evt-d{width:6px;height:6px;border-radius:50%;background:#B9B5AA;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.evt-d.ok{background:radial-gradient(circle at 35% 30%,#86DE96,#3CB055 45%,#207E32)}
.evt-d.warn{background:radial-gradient(circle at 35% 30%,#F3C070,#DE941F 45%,#9C5D0A)}
.evt-d.err{background:radial-gradient(circle at 35% 30%,#EB8579,#CE4033 45%,#8A2119)}
.evt-d.info{background:radial-gradient(circle at 35% 30%,#8FE0D6,#33A697 45%,#177264)}
.evt-x{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 会话事件放在监视器底部（报文流 / 详情两个 tab 都可见） */
.evt-strip{flex:0 0 auto;margin-top:8px;padding-top:6px;border-top:1px solid #DAD6CB;box-shadow:0 -1px 0 #fff}
.evt-strip .evt-h{margin-bottom:2px}
.evt-strip .evt-list{max-height:96px;overflow:hidden}

/* 监视器标题旁的「发布后跳报文流」开关 */
.mon-h .chk.autoswitch{font-size:12px;color:var(--muted);gap:5px;white-space:nowrap}
.mon-h .chk.autoswitch i{width:13px;height:13px}
.mon-h .chk.autoswitch:hover{color:var(--ink)}