@charset "utf-8";
/* ============================================================
   hb-info.css — 控制页左侧「设备信息」信息栏（含设备名/状态/电量）
   ============================================================ */

.hb-ctl-strip{display:none !important}
.hb-ctl-remark{display:none !important}
.hb-ctl-tags{display:none !important}
/* 2026-11-02 安全网：含标签按钮/标签面板的容器永远不允许被隐藏（翻页白屏兜底） */
.hb-ctl-tags:has([data-slot="tabs-trigger"]),
.hb-ctl-tags:has(div.absolute.inset-0),
.hb-ctl-titlerow:has([data-slot="tabs-trigger"]){display:block !important}
.hb-ctl-titlerow{display:none !important}

.hb-ctl-info{
  position:fixed;z-index:20;
  width:236px;
  background:#fff;
  border:1px solid #e6ecf7;
  border-radius:16px;
  box-shadow:0 20px 44px -34px rgba(12,18,34,.5), 0 1px 2px rgba(12,18,34,.04);
  padding:10px 10px 12px;
  display:flex;flex-direction:column;min-height:0;
  overflow:auto;scrollbar-width:thin;
}
.hb-ctl-info::-webkit-scrollbar{width:6px}
.hb-ctl-info::-webkit-scrollbar-thumb{background:#dfe6f2;border-radius:6px}

/* 头部：设备名 + 在线 */
.hb-ci-h{display:flex;align-items:center;gap:9px;padding:2px 4px 10px}
.hb-ci-h .hb-ci-ico{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:#eef4ff;color:#2563eb;flex:none}
.hb-ci-h .hb-ci-ico svg{width:17px;height:17px}
.hb-ci-id{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.hb-ci-id b{font-size:13.5px;font-weight:700;color:#0f1a33;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-ci-on{align-self:flex-start;font-size:10px;font-weight:600;line-height:1.5;color:#0b8f63;background:#e7f8f0;border:1px solid #bfeedb;border-radius:999px;padding:0 7px}
.hb-ci-on.off{color:#8b95a6;background:#f2f5f9;border-color:#e3e9f3}
.hb-ci-h em{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.8px;color:#5b8def;background:#eef4ff;border-radius:5px;padding:2px 5px;flex:none}

/* 状态徽章 */
/* ---------- 状态胶囊（2026-11-03 重设计：真胶囊 + 状态点 + 禁选中） ---------- */
.hb-ci-chips{
  display:flex;flex-wrap:wrap;gap:6px;
  padding:0 2px 10px;border-bottom:1px solid #eef3fb;margin-bottom:6px;
  -webkit-user-select:none;user-select:none;
}
.hb-ci-chip{
  --c:#5b6880;
  display:inline-flex;align-items:center;gap:5px;
  height:22px;padding:0 9px;
  font-size:10.5px;font-weight:650;line-height:1;letter-spacing:.015em;
  color:var(--c);
  background:color-mix(in srgb, var(--c) 10%, #fff);
  border:1px solid color-mix(in srgb, var(--c) 26%, #fff);
  border-radius:999px;white-space:nowrap;
  -webkit-user-select:none;user-select:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px -1px rgba(15,32,64,.12);
  transition:background .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease;
}
.hb-ci-chip::before{
  content:"";width:5px;height:5px;border-radius:50%;flex:none;
  background:currentColor;opacity:.9;
  box-shadow:0 0 0 2px color-mix(in srgb, currentColor 14%, transparent);
}
.hb-ci-chip:hover{
  background:color-mix(in srgb, var(--c) 16%, #fff);
  border-color:color-mix(in srgb, var(--c) 38%, #fff);
  transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 6px 12px -8px rgba(15,32,64,.45);
}
.hb-ci-chip.off{--c:#8b97ab;color:#8b97ab;background:#f4f7fc;border-color:#e6ecf6;box-shadow:none}
.hb-ci-chip.off::before{background:#c2cbd9;opacity:1;box-shadow:none}

/* 电量 */
.hb-ci-batt{display:flex;align-items:center;gap:8px;padding:0 2px 10px;border-bottom:1px solid #eef3fb;margin-bottom:4px}
.hb-ci-batt>span{font-size:10.5px;font-weight:650;letter-spacing:.02em;color:#8b97ab;flex:none}
.hb-ci-batt>i{flex:1;height:7px;border-radius:99px;background:#edf2f9;box-shadow:inset 0 1px 2px rgba(15,32,64,.07);overflow:hidden;display:block}
.hb-ci-batt>i>b{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#34d399,#10b981);box-shadow:0 0 8px rgba(16,185,129,.35);transition:width .3s ease}
.hb-ci-batt>em{font-style:normal;font-size:11.5px;font-weight:700;color:#0f1a33;font-variant-numeric:tabular-nums;letter-spacing:.02em;flex:none}

/* 信息行 */
.hb-ci-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 7px;border-radius:8px;transition:background .14s ease}
.hb-ci-row:hover{background:#f6f9ff}
.hb-ci-k{font-size:11.5px;color:#8b97ab;flex:none;white-space:nowrap}
.hb-ci-v{font-size:12.5px;color:#0f1a33;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right;font-variant-numeric:tabular-nums}
.hb-ci-v.mono{font-family:"IBM Plex Mono",Consolas,"Courier New",monospace;font-size:11.5px;letter-spacing:.2px;color:#1e293b}

.hb-ci-sep{height:1px;background:#f0f4fb;margin:8px 4px 6px}

/* 输入框 */
.hb-ci-field{display:flex;flex-direction:column;gap:4px;padding:6px 6px 0}
.hb-ci-field>span{font-size:11px;color:#8b97ab}
.hb-ci-field input{height:30px;border:1px solid #e3eafa;border-radius:9px;padding:0 9px;font-size:12.5px;color:#0f1a33;background:#fbfdff;outline:none;transition:.15s}
.hb-ci-field input::placeholder{color:#b3bdcc}
.hb-ci-field input:focus{border-color:#bcd2ff;background:#fff;box-shadow:0 0 0 3px #eaf1ff}
/* ---- 备注保存按钮（2026-11-02） ---- */
.hb-ci-saverow{display:flex;align-items:center;gap:6px}
.hb-ci-saverow input{flex:1 1 auto;min-width:0}
.hb-ci-save{flex:0 0 auto;height:30px;padding:0 12px;border-radius:9px;border:1px solid #c7dbff;
  background:linear-gradient(180deg,#f3f8ff,#e6efff);color:#1d4ed8;font-size:12.5px;font-weight:600;
  cursor:pointer;transition:.15s;white-space:nowrap;font-family:inherit;line-height:1}
.hb-ci-save:hover{background:linear-gradient(180deg,#e9f2ff,#d9e8ff);border-color:#a9c8ff}
.hb-ci-save:active{transform:translateY(1px)}
.hb-ci-save:disabled{opacity:.65;cursor:default;transform:none}
.hb-ci-save.ok{color:#0f766e;border-color:#a7e3d6;background:linear-gradient(180deg,#effbf7,#ddf5ee)}
.hb-ci-save.err{color:#b91c1c;border-color:#fecaca;background:linear-gradient(180deg,#fef3f2,#fee2e2)}