:root {
  --bg: #080a0f;
  --bg2: #0d1117;
  --panel: #12161f;
  --panel2: #171c27;
  --line: #222835;
  --text: #e9edf6;
  --dim: #79839a;
  --dim2: #55607a;
  --accent: #4f8cff;
  --accent2: #8a5cff;
  --ok: #2fd07a;
  --bad: #ef5a54;
  --warn: #e8a63c;
  --r: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  background:
    radial-gradient(1100px 520px at 78% -12%, #17203a 0%, transparent 60%),
    radial-gradient(900px 500px at 4% 110%, #141a34 0%, transparent 55%),
    var(--bg);
  color: var(--text);
  font: 14px/1.55 "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input { font-family: inherit; }
a { color: var(--accent); }

/* ---------------- 登录 ---------------- */
.login {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  background: rgba(6, 8, 12, .82);
  backdrop-filter: blur(14px);
}
.login-card {
  width: 348px; padding: 34px 30px;
  background: linear-gradient(180deg, rgba(23, 28, 39, .96), rgba(16, 20, 28, .96));
  border: 1px solid #2a3244; border-radius: 20px;
  text-align: center;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.login-logo {
  width: 58px; height: 58px; margin: 0 auto 16px;
  border-radius: 18px; display: grid; place-items: center;
  background: linear-gradient(140deg, #4f8cff, #8a5cff);
  font-weight: 800; font-size: 22px; letter-spacing: 1px;
  box-shadow: 0 10px 30px rgba(79, 140, 255, .35);
}
.login-card h1 { font-size: 19px; margin-bottom: 6px; letter-spacing: .5px; }
.login-card p { color: var(--dim); font-size: 13px; margin-bottom: 20px; }
.login-card input {
  width: 100%; padding: 12px 14px; margin-bottom: 12px;
  background: #0b0e14; border: 1px solid #2a3244; border-radius: 11px;
  color: var(--text); outline: none; font-family: Consolas, monospace; letter-spacing: 2px;
}
.login-card input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79, 140, 255, .15); }
.login-card button {
  width: 100%; padding: 12px; border-radius: 11px;
  background: linear-gradient(135deg, #4f8cff, #8a5cff);
  color: #fff; font-weight: 600; letter-spacing: 1px;
  box-shadow: 0 10px 24px rgba(79, 140, 255, .28);
}
.login-card button:hover { filter: brightness(1.08); }
.login-err { color: var(--bad); font-size: 12px; margin-top: 12px; min-height: 16px; }

/* ---------------- 骨架 ---------------- */
.shell { display: flex; flex-direction: column; height: 100vh; }

.nav {
  height: 60px; flex: 0 0 60px;
  display: flex; align-items: center; gap: 22px;
  padding: 0 20px;
  background: rgba(13, 17, 23, .82);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
  z-index: 20;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand .logo {
  width: 34px; height: 34px; border-radius: 11px;
  display: grid; place-items: center;
  background: linear-gradient(140deg, #4f8cff, #8a5cff);
  font-weight: 800; font-size: 12.5px;
  box-shadow: 0 8px 22px rgba(79, 140, 255, .3);
}
.brand-txt { display: flex; flex-direction: column; line-height: 1.2; }
.brand-txt b { font-size: 14px; letter-spacing: .5px; }
.brand-txt span { font-size: 10.5px; color: var(--dim2); letter-spacing: 1px; }

.menu { display: flex; gap: 4px; }
.mi {
  padding: 8px 14px; border-radius: 10px;
  color: var(--dim); font-size: 13.5px; transition: .16s;
}
.mi:hover { color: var(--text); background: #151a25; }
.mi.on {
  color: #fff;
  background: linear-gradient(135deg, rgba(79, 140, 255, .22), rgba(138, 92, 255, .18));
  box-shadow: inset 0 0 0 1px rgba(79, 140, 255, .35);
}

.nav-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.nav-right input {
  width: 240px; padding: 8px 12px;
  background: #0b0e14; border: 1px solid var(--line); border-radius: 10px;
  color: var(--text); outline: none; font-size: 12.5px;
}
.nav-right input:focus { border-color: var(--accent); }
.pill {
  font-size: 11px; padding: 3px 10px; border-radius: 20px;
  border: 1px solid #2a3244; color: var(--dim);
  white-space: nowrap;
}
.pill.on { color: var(--ok); border-color: rgba(47, 208, 122, .45); background: rgba(47, 208, 122, .08); }
.pill.off { color: var(--bad); border-color: rgba(59, 130, 246, .4); background: rgba(59, 130, 246, .08); }

.main { flex: 1; min-height: 0; position: relative; }
.view { position: absolute; inset: 0; display: none; }
.view.on { display: flex; }

.dim { color: var(--dim); font-size: 12px; }
.link { color: var(--accent); text-decoration: none; }
.link:hover { text-decoration: underline; }

/* ---------------- 通用组件 ---------------- */
.primary {
  padding: 9px 16px; border-radius: 10px;
  background: linear-gradient(135deg, #4f8cff, #8a5cff);
  color: #fff; font-weight: 600; font-size: 13px;
  box-shadow: 0 8px 20px rgba(79, 140, 255, .22);
}
.primary:hover { filter: brightness(1.08); }
.ghost {
  padding: 7px 12px; border-radius: 9px;
  background: #171c27; border: 1px solid #2a3244;
  color: var(--dim); font-size: 12.5px;
}
.ghost:hover { color: var(--text); border-color: var(--accent); }

.card {
  background: linear-gradient(180deg, rgba(23, 28, 39, .9), rgba(18, 22, 31, .9));
  border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden;
}
.card-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px;
}
.card-h h3 { font-size: 13.5px; font-weight: 600; letter-spacing: .3px; }

.line { display: flex; align-items: center; gap: 8px; padding: 10px 14px; }
.line input {
  flex: 1; min-width: 0;
  background: #0b0e14; border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 12px; color: var(--text); outline: none; font-size: 12.5px;
}
.line input:focus { border-color: var(--accent); }
.tag, .ai-tag {
  font: 12px/1 Consolas, monospace;
  padding: 4px 9px; border-radius: 7px; color: var(--accent);
  background: rgba(79, 140, 255, .1); border: 1px solid rgba(79, 140, 255, .28);
}
.ai-tag { color: #b39cff; background: rgba(138, 92, 255, .12); border-color: rgba(138, 92, 255, .3); }

.chips { display: flex; gap: 6px; padding: 0 12px 10px; flex-wrap: wrap; }
.chips button {
  padding: 5px 11px; border-radius: 20px; font-size: 12px;
  background: #151a25; border: 1px solid #262f40; color: var(--dim);
}
.chips button:hover { color: var(--text); border-color: var(--accent); }

/* ---------------- 总览 ---------------- */
#view-dash { flex-direction: column; padding: 18px; gap: 16px; overflow: auto; }

.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.metric {
  position: relative; overflow: hidden;
  padding: 16px 18px; border-radius: var(--r);
  background: linear-gradient(160deg, rgba(28, 35, 50, .95), rgba(17, 21, 30, .95));
  border: 1px solid var(--line);
}
.metric::after {
  content: ''; position: absolute; right: -30px; top: -30px;
  width: 110px; height: 110px; border-radius: 50%;
  background: radial-gradient(circle, rgba(79, 140, 255, .18), transparent 70%);
}
.metric span { color: var(--dim); font-size: 12px; }
.metric b { display: block; margin-top: 6px; font-size: 26px; letter-spacing: .5px; font-variant-numeric: tabular-nums; }
.metric em { font-style: normal; font-size: 12px; color: var(--dim2); margin-left: 6px; }
.metric.ok b { color: var(--ok); }
.metric.bad b { color: var(--bad); }

.dash-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  grid-template-areas: "brands events" "wall wall";
}
.dash-grid > .card:nth-child(1) { grid-area: brands; }
.dash-grid > .card:nth-child(2) { grid-area: events; }
.dash-grid > .card.wide { grid-area: wall; }

.brands { padding: 6px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.bar-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.bar-row .nm { width: 76px; color: var(--dim); }
.bar { flex: 1; height: 8px; border-radius: 6px; background: #12161f; overflow: hidden; }
.bar i {
  display: block; height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, #4f8cff, #8a5cff);
}
.bar-row .n { width: 28px; text-align: right; color: var(--dim); font-variant-numeric: tabular-nums; }

.events { padding: 4px 12px 12px; max-height: 260px; overflow-y: auto; }
.ev {
  display: flex; gap: 10px; padding: 7px 6px;
  border-bottom: 1px solid #1a1f2b; font-size: 12.5px;
}
.ev:last-child { border-bottom: 0; }
.ev .t { color: var(--dim2); font: 11.5px/1.6 Consolas, monospace; flex: 0 0 62px; }
.ev .m { color: var(--dim); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev.ok .m { color: #8fe0b4; }
.ev.bad .m { color: #93c5fd; }

/* ---------------- 墙体 ---------------- */
.wall {
  display: grid; gap: 12px; padding: 16px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  align-content: start; overflow: auto;
  width: 100%;
}
.wall.mini { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); padding: 0 14px 14px; }
.cell {
  position: relative; border-radius: 12px; overflow: hidden;
  background: #05070b; border: 1px solid #222a38;
  aspect-ratio: 9 / 16; cursor: pointer;
  transition: .18s;
}
.cell:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 0, 0, .5); }
.cell canvas { width: 100%; height: 100%; display: block; }
.cell .lbl {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 16px 10px 8px;
  background: linear-gradient(0deg, rgba(0, 0, 0, .82), transparent);
  font-size: 11.5px; color: #dfe6f3;
  display: flex; align-items: center; gap: 6px;
}
.cell .lbl .st { width: 7px; height: 7px; border-radius: 50%; background: var(--bad); }
.cell .lbl .st.on { background: var(--ok); box-shadow: 0 0 8px rgba(47, 208, 122, .8); }
.cell.off canvas { opacity: .25; }

/* ---------------- 设备工作台 ---------------- */
.devlist {
  width: 208px; flex: 0 0 208px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  background: rgba(13, 17, 23, .6);
}
.devlist-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; font-size: 12.5px; color: var(--dim);
  border-bottom: 1px solid var(--line);
}
.devlist-body { flex: 1; overflow-y: auto; padding: 8px; }

.dev-item {
  display: flex; gap: 10px; padding: 9px;
  border-radius: 12px; border: 1px solid transparent;
  cursor: pointer; margin-bottom: 6px; transition: .15s;
}
.dev-item:hover { background: #151a25; border-color: #232b3c; }
.dev-item.on {
  background: linear-gradient(180deg, #1a2333, #151b26);
  border-color: rgba(79, 140, 255, .55);
  box-shadow: 0 0 0 1px rgba(79, 140, 255, .18);
}
.dev-item .th {
  width: 46px; height: 78px; flex: 0 0 46px;
  border-radius: 8px; background: #05070b; border: 1px solid #202634;
  object-fit: cover;
}
.dev-item .info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.dev-item .n { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-item .s { font-size: 11px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-item .row { display: flex; gap: 5px; margin-top: auto; }

.work { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.work-top {
  height: 54px; flex: 0 0 54px;
  display: flex; align-items: center; gap: 12px; padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(13, 17, 23, .6);
}
.wt-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wt-left b { font-size: 14.5px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #39404f; }
.dot.on { background: var(--ok); box-shadow: 0 0 10px rgba(47, 208, 122, .85); }
.wt-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.wt-right .m { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.wt-right .m span { color: var(--dim2); font-size: 10px; }
.wt-right .m b { font-size: 12.5px; font-variant-numeric: tabular-nums; }

.screen-wrap {
  flex: 1; position: relative; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, #131c2e 0%, #080b11 68%);
  overflow: hidden;
}
.screen-wrap > .empty,
.screen-wrap > .locked {
  position: absolute; inset: 0;
}
#screen {
  max-width: calc(100% - 24px); max-height: calc(100% - 20px);
  border-radius: 16px; background: #000; display: none;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .75), 0 0 0 1px #1d2432;
  cursor: crosshair; touch-action: none;
}
#screen.show { display: block; }

.empty { text-align: center; color: var(--dim); pointer-events: none; }
.empty-ico { font-size: 44px; opacity: .28; margin-bottom: 8px; }
.empty-t { font-size: 15px; color: #a7b0c2; }
.empty-s { font-size: 12.5px; margin-top: 4px; }

.tools {
  position: absolute; right: 16px; bottom: 16px;
  display: flex; gap: 5px; padding: 6px;
  background: rgba(16, 20, 28, .85);
  border: 1px solid var(--line); border-radius: 13px;
  backdrop-filter: blur(12px);
  opacity: .3; transition: .2s;
}
.screen-wrap:hover .tools { opacity: 1; }
.tools button {
  width: 36px; height: 32px; border-radius: 8px;
  background: #171c27; border: 1px solid #262f40;
  font-size: 13px; color: var(--text);
}
.tools button:hover { background: #20293b; border-color: var(--accent); }

.panels {
  flex: 0 0 auto; max-height: 300px;
  display: flex; flex-direction: column;
  border-top: 1px solid var(--line);
  background: rgba(13, 17, 23, .72);
}
.ptabs { display: flex; gap: 2px; padding: 8px 12px 0; flex-wrap: wrap; }
.pt { padding: 6px 12px; border-radius: 9px 9px 0 0; color: var(--dim); font-size: 12.5px; }
.pt:hover { color: var(--text); }
.pt.on { color: #fff; background: #171c27; box-shadow: inset 0 0 0 1px #262f40; }
.pbody { flex: 1; min-height: 0; display: flex; }
.pane { display: none; flex: 1; min-height: 0; flex-direction: column; }
.pane.on { display: flex; }

.chat { flex: 1; overflow-y: auto; padding: 10px 14px; display: flex; flex-direction: column; gap: 7px; min-height: 70px; }
.msg { max-width: 76%; padding: 7px 11px; border-radius: 11px; font-size: 13px; line-height: 1.5; }
.msg.user { align-self: flex-end; background: linear-gradient(135deg, #24406f, #322a63); border: 1px solid #3a4a70; }
.msg.ai { align-self: flex-start; background: #171c27; border: 1px solid #262f40; }
.msg.act { align-self: flex-start; background: #0c1018; border: 1px dashed #262f40; color: #8fb3ff; font: 12px/1.5 Consolas, monospace; }
.msg.act.bad { color: #93c5fd; border-color: rgba(59, 130, 246, .35); }

.log { flex: 1; overflow-y: auto; padding: 8px 14px; font: 12px/1.6 Consolas, monospace; color: var(--dim); min-height: 70px; }
.log .ok { color: #8fe0b4; }
.log .bad { color: #93c5fd; }
.log .cmd { color: #8fb3ff; }

.list { flex: 1; overflow-y: auto; padding: 0 10px 10px; }
.item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; font-size: 12.5px; }
.item:hover { background: #151a25; }
.item .n { min-width: 0; }
.item .n b { display: block; font-weight: 500; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .n span { color: var(--dim); font-size: 11px; font-family: Consolas, monospace; }
.item .act { margin-left: auto; padding: 4px 10px; border-radius: 7px; background: #171c27; border: 1px solid #262f40; color: var(--dim); font-size: 11.5px; }
.item .act:hover { color: var(--text); border-color: var(--accent); }
.item.click { cursor: pointer; }

.perfgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; padding: 12px 14px; overflow-y: auto; }
.pcard { background: #151a25; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.pcard span { color: var(--dim); font-size: 11px; }
.pcard b { display: block; margin-top: 4px; font-size: 18px; font-variant-numeric: tabular-nums; }
.kbd-hint { padding: 10px 14px 0; color: var(--dim); font-size: 12px; }

/* ---------------- 任务 / 设置 ---------------- */
#view-task, #view-setting { padding: 18px; overflow: auto; }
.task-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; align-content: start; }
.picks { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 14px 14px; max-height: 320px; overflow: auto; }
.pick {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 10px;
  background: #151a25; border: 1px solid #262f40; font-size: 12.5px; cursor: pointer;
}
.pick.on { border-color: var(--accent); background: rgba(79, 140, 255, .12); }
.pick .st { width: 7px; height: 7px; border-radius: 50%; background: var(--bad); }
.pick .st.on { background: var(--ok); }

.kv { padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.kv > div { display: flex; justify-content: space-between; gap: 12px; }
.kv span { color: var(--dim); }
.kv b { font-weight: 500; text-align: right; word-break: break-all; }

/* ---------------- 抽屉 ---------------- */
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 430px; z-index: 60;
  background: #0f131b; border-left: 1px solid var(--line);
  display: flex; flex-direction: column;
  box-shadow: -24px 0 70px rgba(0, 0, 0, .6);
}
.drawer-h { height: 54px; display: flex; align-items: center; padding: 0 16px; border-bottom: 1px solid var(--line); }
.drawer-h b { font-size: 14px; }
.drawer-h button { margin-left: auto; }
.drawer-meta { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.drawer-meta input {
  flex: 1; min-width: 0; background: #0b0e14; border: 1px solid var(--line);
  border-radius: 9px; padding: 8px 10px; color: var(--text); outline: none; font-size: 12px;
}
.drawer-tabs { display: flex; gap: 3px; padding: 8px 10px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.dt { padding: 5px 11px; border-radius: 8px; color: var(--dim); font-size: 12px; }
.dt.on { background: #171c27; color: #fff; box-shadow: inset 0 0 0 1px #262f40; }
.drawer-body { flex: 1; overflow-y: auto; padding: 8px 14px 16px; font-size: 12.5px; }

.row-item { padding: 8px 0; border-bottom: 1px solid #1a1f2b; }
.row-item .k { color: var(--dim2); font-size: 11px; }
.row-item .v { font-size: 13px; word-break: break-all; }
.row-item .sub { color: var(--dim); font-size: 11px; margin-top: 2px; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #242c3d; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #2e3850; }
::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 1180px) {
  .devlist { width: 188px; flex-basis: 188px; }
  .panels { max-height: 240px; }
  .nav-right input { width: 160px; }
}


/* ---------------- 锁屏遮罩 ---------------- */
.locked {
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 9, 14, .82);
  backdrop-filter: blur(3px);
  z-index: 6;
}
.locked-card {
  width: 380px; max-width: calc(100% - 40px);
  background: linear-gradient(180deg, #141a26, #0f141d);
  border: 1px solid #26303f; border-radius: 18px;
  padding: 26px 24px 20px; text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
}
.locked-ico { font-size: 34px; line-height: 1; }
.locked-t { font-size: 18px; font-weight: 600; margin-top: 12px; }
.locked-s { color: var(--dim); font-size: 12.5px; line-height: 1.7; margin-top: 8px; }
.locked input {
  width: 100%; margin-top: 16px; padding: 10px 13px;
  background: #0b0f16; border: 1px solid #26303f; border-radius: 10px;
  color: var(--text); outline: none; font-size: 13px;
}
.locked input:focus { border-color: var(--accent); }
.locked-btns { display: flex; gap: 8px; margin-top: 12px; }
.locked-btns button {
  flex: 1; padding: 10px; border: 0; border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
}
.locked-btns .ghost {
  background: #1a2130; border: 1px solid #2a3345; color: var(--text); font-weight: 400;
}
.locked-err { color: var(--bad); font-size: 12px; margin-top: 10px; min-height: 16px; }
.locked-tip { color: #5d6678; font-size: 11px; margin-top: 6px; }

.keep-btn {
  width: 100%; margin-top: 8px; padding: 9px;
  border-radius: 10px; cursor: pointer; font-size: 12.5px;
  background: rgba(58, 122, 255, .12); border: 1px solid rgba(58, 122, 255, .4);
  color: #8fb3ff;
}
.keep-btn:hover { background: rgba(58, 122, 255, .2); }
.keep-btn.on { background: rgba(46, 200, 138, .14); border-color: rgba(46, 200, 138, .45); color: #55d9a1; }

/* ---------------- 画面浮层（通道 / 画质） ---------------- */
.ov {
  position: absolute; z-index: 5; padding: 8px 10px 9px;
  background: rgba(11, 15, 22, .72);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(120, 145, 190, .14);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
.ov-t {
  font-size: 10.5px; color: #78849a; letter-spacing: .5px;
  margin-bottom: 7px; text-transform: uppercase;
}
.ov-tl { left: 16px; top: 16px; }
.ov-tr { right: 16px; top: 16px; }
.seg { display: flex; gap: 4px; flex-wrap: wrap; max-width: 260px; }
.seg button {
  padding: 5px 10px; font-size: 11.5px; line-height: 1;
  border-radius: 8px; cursor: pointer;
  background: #151b26; border: 1px solid #222b3a; color: #98a3b6;
  transition: all .12s;
}
.seg button:hover { color: #e6ecf7; border-color: #33415a; }
.seg button.on {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-color: transparent; color: #fff;
}
.seg button:disabled { opacity: .32; cursor: not-allowed; }
.seg button:disabled:hover { color: #98a3b6; border-color: #222b3a; }

/* ---------------- 界面投屏（节点树镜像） ---------------- */
.uimirror {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, #131c2e 0%, #080b11 68%);
  gap: 8px; padding: 12px;
}
.uibar {
  font-size: 11.5px; color: #7f8aa0; letter-spacing: .3px;
  padding: 3px 10px; border-radius: 20px;
  background: rgba(58, 122, 255, .1); border: 1px solid rgba(58, 122, 255, .25);
}
.uibody {
  position: relative; overflow: hidden;
  background: #0a0e14; border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .7), 0 0 0 1px #1d2432;
  cursor: crosshair; touch-action: none;
}
.unode {
  position: absolute; box-sizing: border-box; overflow: hidden;
  color: #dfe6f2; line-height: 1.2; white-space: nowrap;
  display: flex; align-items: center;
  padding: 0 3px; border-radius: 3px;
}
.unode.click { background: rgba(58, 122, 255, .10); outline: 1px solid rgba(58, 122, 255, .30); }
.unode.edit { background: rgba(46, 200, 138, .12); outline: 1px dashed rgba(46, 200, 138, .55); }
.unode.txt { color: #cfd8e8; }
.uimeta { color: #5d6678; font-size: 11px; }

/* ---------------- 专注模式：画面最大化 ---------------- */
body.focus .devlist { display: none; }
body.focus .panels { display: none; }
body.focus .work-top .wt-right .m { display: none; }
body.focus #screen { max-width: calc(100% - 20px); max-height: calc(100% - 16px); }
body.focus .uimirror { padding: 6px; }
body.focus .ov { opacity: .55; transition: opacity .2s; }
body.focus .ov:hover { opacity: 1; }
#btn-full.on { background: rgba(58, 122, 255, .2); border-color: rgba(58, 122, 255, .5); }

/* ================= 三栏工作台（阅读器 / 无障碍投屏 / ADB 投屏） ================= */
/* 注意：不要在这里写 display，否则会盖掉 .view{display:none}，导致切视图时它一直显示 */
#view-device { flex-direction: column; min-height: 0; position: relative; }

.tri-top {
  height: 40px; flex: 0 0 40px;
  display: flex; align-items: center; gap: 9px; padding: 0 10px;
  border-bottom: 1px solid #171d28;
  background: #0b0f15;
}
.tri-top b { font-size: 12.5px; }
.tri-top b { font-size: 12.5px; }
.tri-top select {
  background: #0f141d; color: var(--text); border: 1px solid #1d2432;
  border-radius: 6px; padding: 3px 7px; font-size: 11.5px; outline: none; cursor: pointer;
  max-width: 170px;
}
.tri-top .ghost { padding: 3px 9px; font-size: 11.5px; border-radius: 6px; }
.tri-metrics { margin-left: auto; display: flex; gap: 16px; font-size: 11px; color: var(--dim2); }
.tri-metrics b { color: var(--text); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.tri {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px; padding: 5px;
}

.col {
  min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  background: #090c11; border: 1px solid #171d28; border-radius: 9px;
  overflow: hidden;
}
.col-h {
  height: 30px; flex: 0 0 30px;
  display: flex; align-items: center; gap: 5px; padding: 0 7px;
  background: #0e1219; border-bottom: 1px solid #171d28;
}
.col-h b { font-size: 11.5px; font-weight: 500; color: #c3ccdb; white-space: nowrap; }
.cdot {
  width: 5px; height: 5px; border-radius: 50%; background: #333b4a; flex: 0 0 5px;
}
.cdot.on { background: var(--ok); box-shadow: 0 0 8px rgba(47, 208, 122, .8); }
.cdot.warn { background: #d99b3a; }
.cst { font-size: 10px; color: #525c6d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cact { margin-left: auto; display: flex; gap: 4px; flex: 0 0 auto; }
.cact button {
  font-size: 10.5px; padding: 2px 8px; border-radius: 5px; cursor: pointer;
  background: #151b26; border: 1px solid #222a38; color: #8892a4;
}
.cact button:hover { color: #e6ecf7; border-color: #35415a; }
.cact button.on {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-color: transparent; color: #fff;
}
.cact button:disabled { opacity: .32; cursor: not-allowed; }
.cact .mini { padding: 3px 6px; font-size: 10.5px; }

.col-body {
  flex: 1; min-height: 0; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #000;
}
.col-body canvas { max-width: 100%; max-height: 100%; display: none; }
.col-body canvas.show { display: block; }
.col-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #3d4553; font-size: 12px; text-align: center; padding: 0 20px;
}
.col-empty[hidden] { display: none !important; }

.col-f {
  flex: 0 0 38px; display: flex; align-items: center; gap: 6px;
  padding: 0 8px; border-top: 1px solid #171d28; background: #0e1219;
}
.col-f input {
  flex: 1; min-width: 0; background: #0b0f16; border: 1px solid #222b3a;
  border-radius: 8px; padding: 7px 10px; color: var(--text); outline: none; font-size: 12px;
}
.col-f input:focus { border-color: var(--accent); }
.col-f > button {
  padding: 7px 12px; border-radius: 8px; cursor: pointer; font-size: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border: 0; color: #fff;
}
.col-f.keys { justify-content: space-around; }
.col-f.keys button {
  width: 30px; height: 27px; border-radius: 7px; cursor: pointer;
  background: #171d28; border: 1px solid #222a38; color: #b9c3d4; font-size: 12px;
}
.col-f.keys button:hover { border-color: var(--accent); color: #fff; }

/* 阅读器 */
.reader {
  position: absolute; inset: 0; overflow-y: auto; padding: 8px 10px;
  font: 12px/1.7 Consolas, "SF Mono", monospace; color: #b6c2d6;
}
.reader .ln { padding: 1px 0; border-bottom: 1px solid rgba(255, 255, 255, .035); word-break: break-all; }
.reader .ln .ts { color: #4e5768; margin-right: 7px; font-size: 10.5px; }
.reader .ln.sys { color: #6f7c92; }
.reader .ln.cmd { color: #8fb3ff; }
.reader .ln.ok { color: #55d9a1; }
.reader .ln.bad { color: #3b82f6; }
.reader .hd { color: #5d6678; font-size: 11px; margin: 6px 0 3px; }

/* 底部面板折叠 */
.panels { flex: 0 0 auto; max-height: 38px; transition: max-height .22s ease; overflow: hidden; }
.panels.open { max-height: 300px; }
.ptabs { display: flex; align-items: center; gap: 3px; height: 38px; padding: 0 10px; }
.pt-sp { flex: 1; }
.pt-fold {
  background: transparent; border: 0; color: var(--dim); cursor: pointer;
  padding: 4px 8px; font-size: 12px;
}
.pt-fold:hover { color: var(--text); }

/* 锁屏遮罩层（三栏布局下覆盖整个视图） */
.lockwrap { position: absolute; inset: 0; z-index: 30; pointer-events: none; }
.lockwrap .locked { pointer-events: auto; position: absolute; inset: 0; }

/* 专注模式：隐藏底部面板 */
body.focus .panels { display: none; }
body.focus .tri-top .tri-metrics { display: none; }

/* 危险操作按钮（卸载 / 删除） */
.act.danger { color: #3b82f6; border-color: rgba(59, 130, 246, .35); }
.act.danger:hover { background: rgba(59, 130, 246, .14); color: #93c5fd; }

/* ================= 工具抽屉（替代原来的底部横条） ================= */
.panels {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 430px; max-width: 94vw;
  transform: translateX(102%);
  transition: transform .22s cubic-bezier(.3, .8, .3, 1);
  z-index: 45;
  display: flex; flex-direction: column;
  background: #0b0f15;
  border-left: 1px solid #1b2230;
  box-shadow: -28px 0 70px rgba(0, 0, 0, .55);
  max-height: none; overflow: visible;
}
.panels.open { transform: none; }
.ptabs {
  flex: 0 0 auto; height: auto; padding: 8px 10px;
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid #1b2230; background: #0e1219;
}
.pbody { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pane { flex: 1; min-height: 0; }

#fab-tools {
  position: fixed; right: 16px; bottom: 16px; z-index: 46;
  width: 44px; height: 44px; border-radius: 13px; cursor: pointer;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border: 0; color: #fff; font-size: 17px; line-height: 1;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
}
#fab-tools:hover { filter: brightness(1.12); }
body.focus #fab-tools { display: none; }

/* ================= 后台布局（左侧导航 + 右侧内容） ================= */
.shell { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

.topbar {
  height: 52px; flex: 0 0 52px;
  display: flex; align-items: center; gap: 18px; padding: 0 16px;
  border-bottom: 1px solid var(--line); background: #0b0f15;
}
.topbar .brand-txt span { font-size: 10px; }

.top-mid { display: flex; align-items: center; gap: 14px; font-size: 12px; color: #7c8798; }
.top-mid b { color: #dfe6f2; font-variant-numeric: tabular-nums; }
.top-mid input {
  background: #0f141d; border: 1px solid #1d2432; border-radius: 7px;
  padding: 5px 10px; color: var(--text); font-size: 12px; outline: none; width: 220px;
}
.top-mid input:focus { border-color: var(--accent); }
.dot-sep { width: 1px; height: 16px; background: #1d2432; }

.body-row { flex: 1; min-height: 0; display: flex; }

.sidenav {
  width: 184px; flex: 0 0 184px;
  border-right: 1px solid var(--line); background: #090d13;
  padding: 8px 8px 10px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 1px;
}
.snav-group {
  font-size: 10px; color: #4b5464; letter-spacing: .8px;
  padding: 12px 9px 5px;
}
.sidenav .mi {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 7px 9px; border-radius: 8px; border: 0; cursor: pointer;
  background: transparent; color: #98a3b6; font-size: 12.5px;
}
.sidenav .mi i { font-style: normal; width: 14px; text-align: center; opacity: .65; font-size: 12px; }
.sidenav .mi:hover { background: #131a24; color: #dfe6f2; }
.sidenav .mi.on {
  background: linear-gradient(135deg, rgba(58, 122, 255, .2), rgba(120, 80, 255, .16));
  color: #fff; box-shadow: inset 0 0 0 1px rgba(58, 122, 255, .32);
}
.sidenav .mi.on i { opacity: 1; }

.snav-foot { margin-top: auto; padding: 12px 4px 0; }
.snav-apk {
  display: block; text-align: center; font-size: 11.5px; padding: 7px;
  border-radius: 8px; background: #141a24; border: 1px solid #1f2735;
  color: #8f9aad; text-decoration: none;
}
.snav-apk:hover { color: #dfe6f2; border-color: var(--accent); }

.main { flex: 1; min-width: 0; position: relative; }

/* 页面通用 */
.page {
  padding: 14px 16px 18px; height: 100%;
  display: flex; flex-direction: column; gap: 12px; overflow: hidden;
}
.page-h { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.page-h h2 { font-size: 15px; font-weight: 600; color: #e3e9f3; }
.page-h .grow { flex: 1; }
.page-h select {
  background: #0f141d; border: 1px solid #1d2432; border-radius: 7px;
  padding: 5px 9px; color: var(--text); font-size: 12px; outline: none; cursor: pointer;
}
.page-h input {
  background: #0f141d; border: 1px solid #1d2432; border-radius: 7px;
  padding: 6px 10px; color: var(--text); font-size: 12px; outline: none;
}
.page-h input:focus { border-color: var(--accent); }

.tablewrap {
  flex: 1; min-height: 0; overflow: auto;
  border: 1px solid #171d28; border-radius: 10px; background: #0a0e14;
}
.tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.tbl th {
  text-align: left; padding: 9px 12px; color: #6b7688; font-weight: 500;
  background: #0e1219; border-bottom: 1px solid #171d28;
  position: sticky; top: 0; z-index: 1; white-space: nowrap;
}
.tbl td { padding: 9px 12px; border-bottom: 1px solid #12171f; color: #c3ccdb; }
.tbl tbody tr:hover td { background: #0e131b; }
.tbl .mono { font-family: Consolas, monospace; font-size: 11.5px; color: #8f9aad; }
.tbl .ops { display: flex; gap: 5px; flex-wrap: wrap; }
.tbl .ops button {
  font-size: 11px; padding: 3px 8px; border-radius: 6px; cursor: pointer;
  background: #151b26; border: 1px solid #222a38; color: #8892a4;
}
.tbl .ops button:hover { color: #e6ecf7; border-color: #33415a; }

.tabs-row { display: flex; gap: 6px; flex-wrap: wrap; flex: 0 0 auto; }
.dt2 {
  padding: 6px 13px; border-radius: 8px; font-size: 12px; cursor: pointer;
  background: #12171f; border: 1px solid #1d2432; color: #8b95a8;
}
.dt2:hover { color: #dfe6f2; border-color: #33415a; }
.dt2.on {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff; border-color: transparent;
}

.form-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px; background: #0a0e14; border: 1px solid #171d28;
  border-radius: 10px; padding: 14px; flex: 0 0 auto;
}
.form-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 11.5px; color: #7c8798; }
.form-grid input, .form-grid select {
  background: #0f141d; border: 1px solid #1d2432; border-radius: 7px;
  padding: 7px 10px; color: var(--text); font-size: 12.5px; outline: none;
}
.form-grid input:focus, .form-grid select:focus { border-color: var(--accent); }

.logstream { padding: 8px 14px; font: 12px/1.9 Consolas, monospace; color: #a9b5c8; }
.logstream .row { display: flex; gap: 12px; border-bottom: 1px solid rgba(255, 255, 255, .04); }
.logstream .t { color: #4e5768; flex: 0 0 auto; }
.logstream .ok { color: #55d9a1; }
.logstream .bad { color: #3b82f6; }

/* ================= AI 模板生成器 ================= */
.tpl-grid {
  flex: 0 0 auto; display: grid; grid-template-columns: 400px 1fr;
  gap: 12px; min-height: 320px; max-height: 46vh;
}
.tpl-form {
  display: flex; flex-direction: column; gap: 10px;
  background: #0a0e14; border: 1px solid #171d28; border-radius: 10px; padding: 14px;
  overflow-y: auto;
}
.tpl-form label { display: flex; flex-direction: column; gap: 6px; font-size: 11.5px; color: #7c8798; }
.tpl-form input, .tpl-form select, .tpl-form textarea {
  background: #0f141d; border: 1px solid #1d2432; border-radius: 7px;
  padding: 8px 10px; color: var(--text); font-size: 12.5px; outline: none;
  font-family: inherit; resize: vertical;
}
.tpl-form input:focus, .tpl-form textarea:focus, .tpl-form select:focus { border-color: var(--accent); }
.tpl-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tpl-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }

.tpl-preview {
  display: flex; flex-direction: column; min-height: 0;
  border: 1px solid #171d28; border-radius: 10px; overflow: hidden; background: #0d1117;
}
.tpl-preview-h {
  height: 30px; flex: 0 0 30px; display: flex; align-items: center; gap: 8px;
  padding: 0 10px; font-size: 11.5px; color: #8b95a8;
  background: #0e1219; border-bottom: 1px solid #171d28;
}
.tpl-preview iframe {
  flex: 1; width: 100%; border: 0; background: #fff; min-height: 240px;
}

/* ================= 雄鹰风格（暗红侧栏 + 指标卡） ================= */
:root {
  --xy-bg: #0b0c10;
  --xy-panel: #12141a;
  --xy-card: #14161d;
  --xy-line: #21242c;
  --xy-red: #1d4ed8;
  --xy-red-2: #8e1b1b;
  --xy-text: #e6e8ee;
  --xy-dim: #7a8091;
  --xy-dim2: #5a6070;
}

.shell { background: var(--xy-bg); }
.xy-body { flex: 1; min-height: 0; display: flex; }

/* 侧栏 */
.xy-side {
  width: 156px; flex: 0 0 156px;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #1c1011 0%, #150c0d 60%, #120a0b 100%);
  border-right: 1px solid #2a1416;
  overflow-y: auto;
}
.xy-logo {
  height: 52px; flex: 0 0 52px;
  display: flex; align-items: center; gap: 8px; padding: 0 12px;
  border-bottom: 1px solid #2a1416;
}
.xy-logo-ico { font-size: 17px; }
.xy-logo-txt { font-size: 12.5px; font-weight: 600; color: #f0d8d8; letter-spacing: .2px; }

.xy-nav { padding: 8px 8px 14px; display: flex; flex-direction: column; gap: 1px; }
.xy-group {
  font-size: 10px; color: #6b4a4a; letter-spacing: .6px;
  padding: 12px 8px 5px;
}
.xy-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left; padding: 7px 9px;
  border: 0; border-radius: 4px; cursor: pointer;
  background: transparent; color: #b9a3a3; font-size: 12.5px;
}
.xy-item i { font-style: normal; width: 14px; text-align: center; font-size: 11px; opacity: .85; }
.xy-item:hover { background: rgba(59, 130, 246, .14); color: #e2ecfb; }
.xy-item.on {
  background: #9c1f1f; color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.xy-side-foot {
  margin-top: auto; padding: 10px 10px 12px;
  border-top: 1px solid #2a1416;
}
.xy-side-foot a {
  display: block; text-align: center; font-size: 11px; padding: 6px;
  border-radius: 4px; background: rgba(59, 130, 246, .16);
  border: 1px solid rgba(59, 130, 246, .35); color: #e0b9b9; text-decoration: none;
}
.xy-side-foot a:hover { background: rgba(59, 130, 246, .28); color: #fff; }

/* 主区 */
.xy-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.xytop {
  height: 44px; flex: 0 0 44px;
  display: flex; align-items: center; gap: 14px; padding: 0 14px;
  background: #101218; border-bottom: 1px solid var(--xy-line);
}
.xytop-title { font-size: 13px; font-weight: 600; color: var(--xy-text); }
.xytop-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.xyt-metric { font-size: 11px; color: var(--xy-dim); display: flex; align-items: center; gap: 5px; }
.xyt-in {
  background: #0c0e13; border: 1px solid #242833; border-radius: 4px;
  color: var(--xy-text); font-size: 11px; padding: 3px 6px; outline: none;
}
.xyt-in[type] { width: 54px; }
.xyt-time { font-size: 11px; color: var(--xy-dim); }
.xyt-time b { color: #a9b0c0; font-weight: 500; font-variant-numeric: tabular-nums; }
.xyt-user {
  font-size: 11px; color: #c9b0b0; padding: 3px 9px; border-radius: 20px;
  background: rgba(59, 130, 246, .14); border: 1px solid rgba(59, 130, 246, .3);
}

/* 页面容器 */
.xy-page {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 12px; display: flex; flex-direction: column; gap: 12px;
}

/* 指标卡 */
.mcards {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px;
}
.mcard {
  position: relative; padding: 12px 14px 12px 16px;
  background: var(--xy-card); border: 1px solid var(--xy-line); border-radius: 8px;
  overflow: hidden;
}
.mcard::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 46px; border-radius: 0 3px 3px 0; background: var(--c, #1d4ed8);
}
.mcard-h { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--xy-dim); }
.mcard-h .grow { flex: 1; }
.mcard-h i { font-style: normal; font-size: 12px; color: var(--c, #1d4ed8); opacity: .9; }
.mcard-v {
  font-size: 26px; font-weight: 600; color: var(--xy-text);
  line-height: 1.25; margin-top: 6px; font-variant-numeric: tabular-nums;
}
.mcard-s { font-size: 10.5px; color: var(--xy-dim2); margin-top: 2px; }

/* 卡片 */
.xy-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: 1; min-height: 260px; }
.xy-card {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--xy-card); border: 1px solid var(--xy-line); border-radius: 8px;
  overflow: hidden;
}
.xy-card-h {
  height: 36px; flex: 0 0 36px;
  display: flex; align-items: center; gap: 7px; padding: 0 12px;
  font-size: 12px; color: #c8cdd9;
  border-bottom: 1px solid var(--xy-line);
}
.xy-card-h .grow { flex: 1; }
.xy-ico { font-style: normal; font-size: 12px; opacity: .8; }
.xy-mini { font-size: 10.5px; color: var(--xy-dim2); }
.xy-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; color: #4d5361; font-size: 12px; padding: 20px;
}
.xy-empty-ico { font-size: 26px; opacity: .55; }

/* 其它页面在雄鹰风格下的容器适配 */
#view-devices .page, #view-data .page, #view-files .page, #view-apps .page,
#view-build .page, #view-keys .page, #view-logs .page, #view-tpl .page,
#view-setting .page, #view-task .page, #view-wall .page { padding: 12px; }
.page-h h2 { color: var(--xy-text); font-size: 14px; }
.tablewrap { border-color: var(--xy-line); background: #101218; }
.tbl th { background: #12141a; color: #7a8091; border-bottom-color: var(--xy-line); }
.tbl td { border-bottom-color: #1a1d24; color: #c3c9d6; }
.tbl tbody tr:hover td { background: #151821; }
.dt2 { background: #14161d; border-color: #242833; color: #8892a4; }
.dt2.on { background: #9c1f1f; border-color: transparent; color: #fff; }
.form-grid, .tpl-form, .tpl-preview { background: #12141a; border-color: var(--xy-line); }
.page-h select, .page-h input, .tpl-form input, .tpl-form textarea, .tpl-form select,
.form-grid input, .form-grid select {
  background: #0f1116; border-color: #242833; color: var(--xy-text);
}

/* ==================================================================
   视觉层 v2 —— 重做配色 / 间距 / 字阶 / 卡片质感
   ================================================================== */
:root {
  --bg: #07080b;
  --panel: #0e1116;
  --card: #12151c;
  --card2: #161a22;
  --line: #1f2430;
  --line2: #2b3242;
  --text: #eef1f7;
  --dim: #8892a6;
  --dim2: #5c6579;
  --red: #3b82f6;
  --red-d: #1e40af;
  --accent: #60a5fa;
  --accent2: #b5302a;
  --r: 12px;
}

body {
  background: radial-gradient(900px 420px at 50% -10%, rgba(59, 130, 246, .16), transparent 62%),
    radial-gradient(700px 400px at 100% 0%, rgba(77, 141, 255, .05)), transparent 60%,
    var(--bg);
  font: 14px/1.55 "Inter", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  letter-spacing: .1px;
}

.ic {
  width: 16px; height: 16px; flex: 0 0 auto; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #232936; border-radius: 9px;
  border: 2px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: #333c4e; background-clip: content-box; }

/* ------------------------------ 侧栏 ------------------------------ */
.xy-side {
  width: 218px; flex: 0 0 218px;
  background: linear-gradient(180deg, #16100f 0%, #0d0b0b 55%, #0a0808 100%);
  border-right: 1px solid #221616;
  position: relative;
}
.xy-side::after {
  content: ''; position: absolute; top: 0; right: 0; width: 1px; height: 100%;
  background: linear-gradient(180deg, rgba(59, 130, 246, .26), rgba(59, 130, 246, .03) 42%, transparent);
  pointer-events: none;
}

.sb-brand {
  height: 64px; flex: 0 0 64px;
  display: flex; align-items: center; gap: 10px; padding: 0 16px;
  border-bottom: 1px solid #201414;
}
.sb-logo {
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 800; letter-spacing: .5px; color: #fff;
  background: linear-gradient(145deg, #2563eb, #1e3a8a);
  box-shadow: 0 6px 18px rgba(59, 130, 246, .3), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.sb-brand-t { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.sb-brand-t b { font-size: 13px; font-weight: 600; color: #e8f0fe; letter-spacing: .3px; white-space: nowrap; }
.sb-brand-t em { font-style: normal; font-size: 9px; letter-spacing: 1.5px; color: #6b5754; margin-top: 4px; }

.sb-search {
  margin: 12px 12px 2px; height: 32px;
  display: flex; align-items: center; gap: 8px; padding: 0 10px;
  background: #0c0e13; border: 1px solid #241b1b; border-radius: 8px;
  color: #6b5c5c; transition: border-color .15s, box-shadow .15s;
}
.sb-search .ic { width: 14px; height: 14px; opacity: .8; }
.sb-search input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  color: #ecdfdd; font-size: 12px;
}
.sb-search input::placeholder { color: #5d4f4f; }
.sb-search:focus-within { border-color: rgba(59, 130, 246, .42); box-shadow: 0 0 0 3px rgba(59, 130, 246, .1); }

.xy-nav { padding: 6px 10px 16px; gap: 2px; overflow-y: auto; flex: 1; }
.xy-group {
  font-size: 9.5px; font-weight: 600; letter-spacing: 1.2px;
  color: #6d5450; padding: 15px 9px 6px; text-transform: uppercase;
}
.xy-item {
  position: relative; width: 100%; height: 34px;
  display: flex; align-items: center; gap: 9px;
  padding: 0 9px; border-radius: 8px;
  color: #a99a97; font-size: 12.5px;
  transition: background .15s, color .15s;
}
.xy-item .ic { width: 15px; height: 15px; opacity: .75; transition: opacity .15s, color .15s; }
.xy-item span { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xy-item:hover { background: #171212; color: #e6eefc; }
.xy-item:hover .ic { opacity: 1; }
.xy-item.on {
  background: linear-gradient(90deg, rgba(59, 130, 246, .17), rgba(59, 130, 246, .02));
  color: #fff; box-shadow: none;
}
.xy-item.on::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2.5px;
  border-radius: 0 2px 2px 0; background: linear-gradient(180deg, #3b82f6, #1e40af);
}
.xy-item.on .ic { opacity: 1; color: #60a5fa; }
.xy-item.hide, .xy-group.hide { display: none; }
.nbadge {
  font-style: normal; font-size: 10px; min-width: 18px; height: 16px; line-height: 15px;
  text-align: center; padding: 0 5px; border-radius: 9px;
  background: rgba(53, 208, 165, .12); color: #3ad6a8;
  border: 1px solid rgba(53, 208, 165, .26);
}
.xy-item.on .nbadge { background: rgba(59, 130, 246, .18); color: #93c5fd; border-color: rgba(59, 130, 246, .32); }

.xy-side-foot { padding: 10px 12px 14px; border-top: 1px solid #201414; }
.xy-side-foot a {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  height: 32px; border-radius: 8px; font-size: 11.5px; text-decoration: none;
  color: #e6cbc6; background: linear-gradient(180deg, rgba(59, 130, 246, .13), rgba(59, 130, 246, .05));
  border: 1px solid rgba(59, 130, 246, .26);
  transition: background .15s, color .15s;
}
.xy-side-foot a:hover { background: rgba(59, 130, 246, .2); color: #fff; }
.xy-side-foot .ic { width: 14px; height: 14px; }

/* ------------------------------ 顶栏 ------------------------------ */
.xytop {
  height: 56px; flex: 0 0 56px; padding: 0 18px; gap: 16px;
  background: rgba(13, 15, 19, .94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
.xyt-crumb { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--dim2); }
.xyt-crumb i { font-style: normal; color: #333a48; }
.xyt-crumb b { color: var(--text); font-size: 13.5px; font-weight: 600; }
.xytop-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.xyt-field {
  display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px;
  background: #0c0e13; border: 1px solid var(--line); border-radius: 8px;
  font-size: 11px; color: var(--dim);
}
.xyt-field em { font-style: normal; color: var(--dim2); }
.xyt-field > span { font-size: 9.5px; letter-spacing: .5px; color: var(--dim2); }
.xyt-in { background: none; border: 0; padding: 0; outline: none; font-size: 11.5px; color: var(--text); }
#top-offline-min { width: 24px; text-align: center; }

.xyt-clock {
  display: flex; gap: 18px; padding: 0 15px;
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
}
.xyt-clock span { display: flex; flex-direction: column; line-height: 1.15; }
.xyt-clock em { font-style: normal; font-size: 9.5px; letter-spacing: .7px; color: var(--dim2); }
.xyt-clock b {
  font: 600 12px/1.25 Consolas, "SF Mono", monospace;
  color: #d3dae8; font-variant-numeric: tabular-nums;
}

.xyt-user {
  display: flex; align-items: center; gap: 7px; height: 30px;
  padding: 0 11px 0 4px; border-radius: 20px;
  background: #0c0e13; border: 1px solid var(--line);
  font-size: 11.5px; color: #cfd6e4;
}
.xyt-user i {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-style: normal;
  font-size: 10.5px; font-weight: 700; color: #fff;
  background: linear-gradient(145deg, #2563eb, #1e3a8a);
}

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; padding: 5px 11px; border-radius: 20px;
  background: #0c0e13; border: 1px solid var(--line2); color: var(--dim);
}
.pill::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 8px currentColor;
}
.pill.on { color: #35d0a5; border-color: rgba(53, 208, 165, .4); background: rgba(53, 208, 165, .07); }
.pill.off { color: #3b82f6; border-color: rgba(59, 130, 246, .4); background: rgba(59, 130, 246, .07); }

/* ------------------------------ 内容区 ------------------------------ */
.xy-page { padding: 18px; gap: 14px; }
.main { background: transparent; }

.mcards { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.mcard {
  position: relative; overflow: hidden;
  padding: 14px 16px 13px; border-radius: 12px;
  background: linear-gradient(165deg, #151922 0%, #10131a 62%);
  border: 1px solid var(--line);
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.mcard::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--c), transparent); opacity: .55;
}
.mcard::after {
  content: ''; position: absolute; right: -46px; top: -56px;
  width: 132px; height: 132px; border-radius: 50%;
  background: radial-gradient(circle, var(--c), transparent 68%);
  opacity: .13; pointer-events: none;
}
.mcard:hover {
  transform: translateY(-2px); border-color: var(--line2);
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .9);
}
.mcard-top { display: flex; align-items: center; gap: 9px; }
.mcard-ico {
  width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  color: var(--c); background: var(--c2);
  border: 1px solid rgba(255, 255, 255, .05);
}
.mcard-ico .ic { width: 15px; height: 15px; }
.mcard-name { font-size: 11.5px; color: var(--dim); letter-spacing: .2px; }
.mcard-v {
  margin-top: 10px; color: #fff;
  font-size: 28px; font-weight: 650; line-height: 1.15;
  letter-spacing: -.4px; font-variant-numeric: tabular-nums;
}
.mcard-v em { font-style: normal; font-size: 13px; font-weight: 500; color: var(--dim); margin-left: 2px; letter-spacing: 0; }
.mcard-bar { height: 3px; border-radius: 3px; background: #1b202a; margin: 11px 0 8px; overflow: hidden; }
.mcard-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--c2, var(--c))); }
.mcard-s { font-size: 10.5px; color: var(--dim2); }

.xy-grid2 { grid-template-columns: 1.15fr 1fr; gap: 14px; min-height: 300px; }
.xy-card {
  border-radius: 12px; border: 1px solid var(--line);
  background: linear-gradient(180deg, #12151c, #0f1218);
}
.xy-card-h {
  height: 44px; flex: 0 0 44px; padding: 0 16px; gap: 8px;
  font-size: 12.5px; color: #cfd6e4; border-bottom: 1px solid var(--line);
}
.xy-card-h .xy-ico { font-size: 13px; color: var(--red); opacity: .95; }
.xy-mini { font-size: 10.5px; color: var(--dim2); }
.xy-empty { color: #454c5c; font-size: 12px; gap: 12px; }
.xy-empty-ico { font-size: 24px; opacity: .35; }

/* 表格 / 表单 */
.tablewrap { border-radius: 12px; border: 1px solid var(--line); background: #0f1218; }
.tbl th {
  height: 40px; font-size: 11px; font-weight: 600; letter-spacing: .4px;
  color: var(--dim2); background: #12151c; border-bottom: 1px solid var(--line);
}
.tbl td { height: 44px; font-size: 12.5px; color: #c3cad8; border-bottom: 1px solid #171b23; }
.tbl tbody tr:hover td { background: #141822; }
.page-h h2 { color: var(--text); font-size: 14px; font-weight: 600; letter-spacing: .2px; }
.form-grid input, .form-grid select, .tpl-form input, .tpl-form textarea, .tpl-form select,
.page-h input, .page-h select {
  background: #0c0e13; border: 1px solid var(--line2); border-radius: 8px;
  color: var(--text); font-size: 12.5px;
}
.form-grid input:focus, .tpl-form input:focus, .tpl-form textarea:focus, .page-h input:focus {
  outline: none; border-color: rgba(59, 130, 246, .45); box-shadow: 0 0 0 3px rgba(59, 130, 246, .09);
}

/* 按钮 */
.primary {
  border-radius: 8px; padding: 9px 16px;
  background: linear-gradient(135deg, #2563eb, #1e40af);
  box-shadow: 0 6px 18px -8px rgba(59, 130, 246, .8), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.ghost {
  border-radius: 8px; background: #12151c; border: 1px solid var(--line2); color: #96a0b3;
}
.ghost:hover { border-color: rgba(59, 130, 246, .45); color: #fff; background: #171b24; }

/* 其它页面容器统一内边距 */
#view-devices .page, #view-data .page, #view-files .page, #view-apps .page,
#view-build .page, #view-keys .page, #view-logs .page, #view-tpl .page,
#view-setting .page, #view-task .page, #view-wall .page { padding: 18px; }

/* ------------------------------ 登录 ------------------------------ */
.login {
  background: radial-gradient(760px 480px at 50% -6%, rgba(59, 130, 246, .2), transparent 60%, rgba(5, 6, 9, .92));
}
.login-card {
  width: 360px; padding: 38px 32px 26px; border-radius: 18px;
  background: linear-gradient(180deg, #141821, #0c0f14);
  border: 1px solid #262c3a;
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.login-logo {
  width: 54px; height: 54px; border-radius: 15px; font-size: 17px;
  background: linear-gradient(145deg, #2563eb, #1e3a8a);
  box-shadow: 0 12px 28px -8px rgba(59, 130, 246, .6), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.login-card h1 { font-size: 18px; letter-spacing: .6px; }
.login-card p { color: var(--dim2); font-size: 12.5px; }
.login-field { position: relative; display: flex; align-items: center; }
.login-field .ic { position: absolute; left: 13px; width: 15px; height: 15px; color: var(--dim2); }
.login-card .login-field input { padding-left: 36px; border-radius: 10px; }
.login-card input:focus { border-color: rgba(59, 130, 246, .55); box-shadow: 0 0 0 3px rgba(59, 130, 246, .12); }
.login-card button {
  border-radius: 10px; padding: 12px;
  background: linear-gradient(135deg, #2563eb, #1e40af);
  box-shadow: 0 12px 28px -12px rgba(59, 130, 246, .9);
}
.login-foot { margin-top: 18px; font-size: 10.5px; letter-spacing: .9px; color: #39404e; }

/* ------------------------------ 自适应 ------------------------------ */
@media (max-width: 1360px) {
  .mcards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1180px) {
  .mcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xy-grid2 { grid-template-columns: 1fr; }
  .xyt-clock { display: none; }
}

/* ------------------------------ 控制台新版布局 ------------------------------ */
.dash-row {
  display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 14px;
  min-height: 252px; flex: 1;
}
.grow-card { flex: 0 0 198px; min-height: 198px; }

.quick-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; flex: 0 0 auto; }
.qcard {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border-radius: 12px; border: 1px solid var(--line);
  background: linear-gradient(165deg, #131720, #0f1218);
  text-align: left; transition: transform .16s, border-color .16s, background .16s;
}
.qcard:hover { transform: translateY(-2px); border-color: var(--line2); background: linear-gradient(165deg, #171c26, #11141b); }
.qico {
  width: 34px; height: 34px; border-radius: 10px; flex: 0 0 34px;
  display: grid; place-items: center; color: #60a5fa;
  background: rgba(59, 130, 246, .12); border: 1px solid rgba(59, 130, 246, .2);
}
.qico.blue { color: #6aa4ff; background: rgba(77, 141, 255, .12); border-color: rgba(77, 141, 255, .2); }
.qico.purple { color: #b394ff; background: rgba(161, 123, 255, .12); border-color: rgba(161, 123, 255, .2); }
.qico.amber { color: #f5b45c; background: rgba(240, 169, 74, .12); border-color: rgba(240, 169, 74, .2); }
.qtxt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.qtxt b { font-size: 12.5px; font-weight: 600; color: #e6ebf4; }
.qtxt em { font-style: normal; font-size: 10.5px; color: var(--dim2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qarrow { margin-left: auto; color: #333a48; font-size: 16px; }
.tbar-search {
  display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 11px;
  background: #0c0e13; border: 1px solid var(--line2); border-radius: 8px;
  color: var(--dim2); width: 246px; transition: border-color .15s, box-shadow .15s;
}
.tbar-search .ic { width: 14px; height: 14px; }
.tbar-search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--text); font-size: 12px; }
.tbar-search input::placeholder { color: var(--dim2); }
.tbar-search:focus-within { border-color: rgba(59, 130, 246, .42); box-shadow: 0 0 0 3px rgba(59, 130, 246, .09); }
.tagnum {
  font-size: 11px; padding: 3px 9px; border-radius: 20px;
  color: #93c5fd; background: rgba(59, 130, 246, .1); border: 1px solid rgba(59, 130, 246, .22);
}
.ops { display: flex; gap: 5px; }
.ops button {
  padding: 4px 10px; border-radius: 6px; font-size: 11.5px;
  color: #96a0b3; background: #141822; border: 1px solid #232a38;
  transition: .14s;
}
.ops button:hover { color: #fff; border-color: rgba(59, 130, 246, .45); background: #1a1f2a; }
.events-empty { display: grid; place-items: center; height: 100%; min-height: 110px; color: #3d4453; font-size: 12px; }

.dist-body { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 0; }
.dist-row { display: flex; align-items: center; gap: 12px; padding: 11px 16px; }
.dist-name {
  width: 76px; font-size: 12px; color: #c3cad8;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dist-bar { flex: 1; height: 6px; border-radius: 6px; background: #1b202a; overflow: hidden; }
.dist-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #1e3a8a, #3b82f6); }
.dist-num { width: 26px; text-align: right; font: 600 11.5px Consolas, monospace; color: var(--dim); }
.dist-total {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between;
  padding: 11px 16px 4px; border-top: 1px solid #171b23; font-size: 11.5px; color: var(--dim2);
}
.dist-total b { color: #dbe2ee; font-weight: 600; }
.dist-body { display: flex; flex-direction: column; }
.mini-empty { display: grid; place-items: center; padding: 42px 0; color: #3f4656; font-size: 12px; }

.stat-list { flex: 1; display: flex; flex-direction: column; padding: 10px 0; }
.stat-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7.5px 16px; font-size: 12px;
}
.stat-k { color: var(--dim); }
.stat-v { color: #dbe2ee; font-weight: 500; font-variant-numeric: tabular-nums; }
.stat-v.ok { color: #35d0a5; }
.stat-v.bad { color: #60a5fa; }
.stat-v.warn { color: #f0a94a; }

.empty-ico { width: 26px; height: 26px; color: #3a4150; stroke-width: 1.4; }
.xy-empty em { font-style: normal; font-size: 11px; color: #39404e; }
.events { max-height: none; flex: 1; min-height: 0; overflow-y: auto; }
.events .ev { padding: 7px 4px; border-bottom: 1px solid #171b23; font-size: 12px; }

/* ==================================================================
   字号放大 v3 —— 整体上调 1～1.5px，表格/菜单/卡片同步加高
   ================================================================== */
body { font-size: 15px; }

/* 侧栏 */
.sb-brand-t b { font-size: 14px; }
.sb-brand-t em { font-size: 9.5px; }
.sb-search input { font-size: 13px; }
.xy-group { font-size: 10.5px; letter-spacing: 1.1px; }
.xy-item { height: 36px; font-size: 13.5px; gap: 10px; }
.xy-item .ic { width: 16px; height: 16px; }
.nbadge { font-size: 10.5px; min-width: 19px; height: 17px; line-height: 16px; }
.xy-side-foot a { font-size: 12.5px; height: 34px; }

/* 顶栏 */
.xytop { height: 58px; flex: 0 0 58px; }
.xyt-crumb { font-size: 13.5px; }
.xyt-crumb b { font-size: 14.5px; }
.xyt-field { height: 32px; font-size: 12px; }
.xyt-in { font-size: 12.5px; }
#top-offline-min { width: 26px; }
.xyt-clock em { font-size: 10px; }
.xyt-clock b { font-size: 13px; }
.xyt-user { font-size: 12.5px; height: 32px; }
.pill { font-size: 11.5px; padding: 5px 12px; }

/* 指标卡 */
.mcard-name { font-size: 12.5px; }
.mcard-v { font-size: 32px; }
.mcard-v em { font-size: 14px; }
.mcard-bar { height: 4px; }
.mcard-s { font-size: 11.5px; }

/* 卡片与列表 */
.xy-card-h { height: 46px; flex: 0 0 46px; font-size: 13.5px; }
.xy-mini { font-size: 11.5px; }
.dist-row { padding: 11px 18px; }
.dist-name { width: 86px; font-size: 13.5px; }
.dist-num { font-size: 12.5px; width: 28px; }
.dist-total { font-size: 12.5px; padding: 12px 18px 6px; }
.stat-row { padding: 8.5px 18px; font-size: 13.5px; }
.stat-v { font-size: 13.5px; }
.events { padding: 6px 14px 14px; }
.ev { font-size: 13.5px; }
.ev .t { font-size: 12.5px; flex: 0 0 66px; }
.xy-empty { font-size: 13px; }
.xy-empty em { font-size: 12px; }

/* 快捷入口 */
.qcard { padding: 15px 17px; gap: 13px; }
.qico { width: 36px; height: 36px; flex: 0 0 36px; }
.qtxt b { font-size: 13.5px; }
.qtxt em { font-size: 11.5px; }

/* 页面头 / 表格 / 按钮 */
.page-h h2 { font-size: 16px; }
.tagnum { font-size: 12px; }
.tbar-search { width: 262px; height: 34px; }
.tbar-search input { font-size: 13px; }
.tbl th { font-size: 12px; height: 42px; }
.tbl td { font-size: 13.5px; height: 46px; }
.ops button { font-size: 12.5px; padding: 5px 11px; }
.ghost { font-size: 13px; }
.primary { font-size: 13.5px; }
.dim { font-size: 12.5px; }
.chips button { font-size: 12.5px; }
.line input { font-size: 13px; }
.kv { font-size: 13.5px; }
.row-item .k, .row-item .sub { font-size: 11.5px; }
.row-item .v { font-size: 13.5px; }
.col-h b { font-size: 13px; }
.cst { font-size: 11px; }
.dt2 { font-size: 12.5px; }
.form-grid label, .tpl-form label { font-size: 12.5px; }

/* ==================================================================
   字号再放大 v4 —— 基准 16px，侧栏/表格/卡片同步 +1px
   ================================================================== */
body { font-size: 16px; }
.sb-brand-t b { font-size: 14.5px; }
.sb-search input { font-size: 13.5px; }
.sb-search { height: 34px; }
.xy-group { font-size: 11px; }
.xy-item { height: 38px; font-size: 14.5px; }
.xy-item .ic { width: 17px; height: 17px; }
.xy-side-foot a { font-size: 13px; height: 36px; }

.xytop { height: 60px; flex: 0 0 60px; }
.xyt-crumb { font-size: 14px; }
.xyt-crumb b { font-size: 15px; }
.xyt-field { height: 34px; font-size: 12.5px; }
.xyt-in { font-size: 13px; }
.xyt-clock b { font-size: 13.5px; }
.xyt-user { font-size: 13px; height: 34px; }
.pill { font-size: 12px; }

.mcard { padding: 15px 17px 14px; }
.mcard-name { font-size: 13.5px; }
.mcard-v { font-size: 34px; }
.mcard-v em { font-size: 15px; }
.mcard-s { font-size: 12px; }
.mcard-ico { width: 32px; height: 32px; }
.mcard-ico .ic { width: 16px; height: 16px; }

.xy-card-h { font-size: 14.5px; height: 48px; flex: 0 0 48px; }
.xy-mini { font-size: 12.5px; }
.dist-name { font-size: 14.5px; width: 96px; }
.dist-num { font-size: 13.5px; }
.dist-row { padding: 12px 18px; }
.dist-total { font-size: 13.5px; }
.stat-row { font-size: 14.5px; padding: 9px 18px; }
.stat-v { font-size: 14.5px; }
.ev { font-size: 14px; }
.ev .t { font-size: 13px; flex: 0 0 70px; }
.xy-empty { font-size: 14px; }

.qtxt b { font-size: 14.5px; }
.qtxt em { font-size: 12px; }
.qico { width: 38px; height: 38px; flex: 0 0 38px; }

.page-h h2 { font-size: 17px; }
.tbl th { font-size: 12.5px; }
.tbl td { font-size: 14.5px; height: 48px; }
.ops button { font-size: 13px; }
.ghost { font-size: 13.5px; }
.primary { font-size: 14px; }
.dim { font-size: 13px; }
.kv { font-size: 14.5px; }
.row-item .v { font-size: 14.5px; }
.chips button { font-size: 13px; }
.line input { font-size: 13.5px; }
.tbar-search input { font-size: 13.5px; }
.tagnum { font-size: 12.5px; }
.col-h b { font-size: 13.5px; }

/* ==================================================================
   业务模块页（分组/黑名单/银行卡/注入数据/仿冒页面/TURN/安全/服务器/TG）
   ================================================================== */
.mod { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 18px; gap: 14px; }
.mod-head { display: flex; align-items: flex-start; gap: 16px; flex: 0 0 auto; }
.mod-title h2 { font-size: 18px; font-weight: 600; color: #f2f5fa; letter-spacing: .3px; }
.mod-title p { margin-top: 5px; font-size: 12.5px; color: var(--dim2); max-width: 720px; }
.mod-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

.mod-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.mod-stats span {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 8px 14px; border-radius: 10px;
  background: #12151c; border: 1px solid var(--line);
}
.mod-stats em { font-style: normal; font-size: 11.5px; color: var(--dim2); }
.mod-stats b { font-size: 17px; font-weight: 650; color: #eef1f7; font-variant-numeric: tabular-nums; }

.mod-body { flex: 1; min-height: 0; overflow-y: auto; }
.empty-row { padding: 48px 0; text-align: center; color: #454c5c; font-size: 13px; }

.mono { font-family: Consolas, "SF Mono", monospace; font-size: 12.5px; color: #b9c4d6; letter-spacing: .2px; }
.num { font-weight: 600; color: #e6ebf4; font-variant-numeric: tabular-nums; }
.mut { color: var(--dim); }
.ms { font-family: Consolas, monospace; font-size: 12px; }
.ms.ok { color: #35d0a5; }
.ms.bad { color: #f0a94a; }
.tagx {
  display: inline-block; padding: 2px 9px; border-radius: 6px; font-size: 11.5px;
  color: #9fb0c8; background: #161a22; border: 1px solid #232a38;
}
.dotcolor { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; background: var(--d); vertical-align: middle; }
.ops button.danger:hover { border-color: rgba(59, 130, 246, .5); color: #93c5fd; }

/* 开关 */
.sw {
  width: 38px; height: 21px; border-radius: 20px; position: relative;
  background: #262d3b; border: 1px solid #313a4b; transition: .16s; flex: 0 0 auto;
}
.sw i {
  position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%;
  background: #8b95a8; transition: .16s;
}
.sw.on { background: rgba(59, 130, 246, .28); border-color: rgba(59, 130, 246, .5); }
.sw.on i { left: 19px; background: #3b82f6; }

/* 银行卡卡片 */
.bankgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.bankcard {
  position: relative; overflow: hidden; padding: 18px 20px;
  border-radius: 14px; border: 1px solid #262c3a;
  background: linear-gradient(150deg, #1b2030 0%, #12151c 55%, #0f1219 100%);
  transition: transform .16s, border-color .16s;
}
.bankcard::after {
  content: ''; position: absolute; right: -50px; top: -60px; width: 170px; height: 170px;
  border-radius: 50%; background: radial-gradient(circle, rgba(59, 130, 246, .22), transparent 68%);
}
.bankcard:hover { transform: translateY(-2px); border-color: #333b4d; }
.bc-top { display: flex; align-items: center; justify-content: space-between; }
.bc-bank { font-size: 13.5px; font-weight: 600; color: #eef1f7; letter-spacing: .3px; }
.bc-no { margin: 16px 0 14px; font-size: 18px; letter-spacing: 2px; color: #dbe3f0; }
.bc-meta { display: flex; gap: 26px; }
.bc-meta span { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: #cdd5e2; }
.bc-meta em { font-style: normal; font-size: 10.5px; color: var(--dim2); }
.bc-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 16px; padding-top: 12px; border-top: 1px solid #1d222c;
  font-size: 11.5px; color: var(--dim2);
}

/* 表单卡（Telegram） */
.formcard { max-width: 720px; background: #12151c; border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; }
.formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.formgrid .field.full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 12px; color: var(--dim); }
.field input {
  height: 36px; padding: 0 12px; border-radius: 8px; font-size: 13px;
  background: #0c0e13; border: 1px solid var(--line2); color: var(--text);
}
.field input:focus { outline: none; border-color: rgba(59, 130, 246, .45); box-shadow: 0 0 0 3px rgba(59, 130, 246, .09); }
.field .sw { margin-top: 6px; }
.formfoot { display: flex; align-items: center; gap: 10px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }

/* 服务器状态 */
.statusgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.scard {
  display: flex; align-items: center; gap: 13px; padding: 16px;
  border-radius: 12px; border: 1px solid var(--line);
  background: linear-gradient(165deg, #151922, #10131a 62%);
}
.sico {
  width: 38px; height: 38px; border-radius: 10px; flex: 0 0 38px;
  display: grid; place-items: center; color: var(--c);
  background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .05);
}
.scard div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.scard em { font-style: normal; font-size: 11.5px; color: var(--dim2); }
.scard b { font-size: 18px; font-weight: 650; color: #f0f3f9; letter-spacing: -.2px; }
.scard small { font-size: 10.5px; color: #4b5364; }

/* 编辑抽屉 */
.modal-layer {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
  background: rgba(5, 6, 9, .66); backdrop-filter: blur(6px);
}
.modal {
  width: 520px; max-height: 82vh; display: flex; flex-direction: column;
  border-radius: 16px; border: 1px solid #2b3242;
  background: linear-gradient(180deg, #171b24, #101319);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .95);
}
.modal-h { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #222834; }
.modal-h b { font-size: 14px; color: #f0f3f9; font-weight: 600; }
.modal-x { color: #6b7488; font-size: 15px; padding: 2px 6px; }
.modal-x:hover { color: #fff; }
.modal-b { padding: 18px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; overflow-y: auto; }
.modal-b label { display: flex; flex-direction: column; gap: 6px; }
.modal-b label.full { grid-column: 1 / -1; }
.modal-b label.inline { flex-direction: row; align-items: center; justify-content: space-between; }
.modal-b em { font-style: normal; font-size: 12px; color: var(--dim); }
.modal-b em i { color: #60a5fa; font-style: normal; }
.modal-b input, .modal-b select, .modal-b textarea {
  background: #0c0e13; border: 1px solid #2b3242; border-radius: 8px;
  padding: 9px 11px; color: var(--text); font-size: 13px; font-family: inherit; resize: vertical;
}
.modal-b input[type=color] { padding: 3px; height: 36px; }
.modal-b input:focus, .modal-b select:focus, .modal-b textarea:focus {
  outline: none; border-color: rgba(59, 130, 246, .45); box-shadow: 0 0 0 3px rgba(59, 130, 246, .09);
}
.modal-f { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid #222834; }

@media (max-width: 1280px) {
  .statusgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formgrid { grid-template-columns: 1fr; }
}

/* ==================================================================
   雄鹰式布局：侧栏块状菜单 + 设备卡片网格
   ================================================================== */
.xy-nav { padding: 10px 10px 16px; gap: 6px; }
.xy-group { padding: 14px 4px 3px; font-size: 11px; color: #7c818f; letter-spacing: .6px; }
.xy-item {
  height: 38px; padding: 0 12px; border-radius: 8px;
  background: #171a21; border: 1px solid #232733; color: #b6bccb;
}
.xy-item:hover { background: #1d2129; border-color: #2d3341; color: #e6ebf4; }
.xy-item.on {
  background: linear-gradient(90deg, rgba(59, 130, 246, .24), rgba(59, 130, 246, .10));
  border-color: rgba(59, 130, 246, .58); color: #60a5fa; box-shadow: none;
}
.xy-item.on::before { display: none; }
.xy-item.on .ic { color: #60a5fa; }
.xy-item .nbadge { margin-left: auto; }

/* 设备页 */
.dv { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 14px 16px; gap: 10px; }
.dv-stats { display: flex; gap: 8px; flex-wrap: wrap; flex: 0 0 auto; }
.dvs {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 8px;
  background: #12151c; border: 1px solid #232733;
  font-size: 12.5px; color: #8b93a3;
}
.dvs .ic { width: 14px; height: 14px; opacity: .7; }
.dvs b { font-size: 15px; font-weight: 650; color: #e9edf6; font-variant-numeric: tabular-nums; }
.dvs.on b { color: #35d0a5; }
.dvs.off b { color: #60a5fa; }

.dv-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; border-radius: 10px;
  background: #10131a; border: 1px solid #1f2430; flex: 0 0 auto;
}
.dv-tab {
  padding: 6px 14px; border-radius: 7px; font-size: 13px;
  background: #1e40af; color: #fff; font-weight: 500;
}
.dv-sel {
  height: 32px; padding: 0 10px; border-radius: 7px; font-size: 12.5px;
  background: #0c0e13; border: 1px solid #262c3a; color: #b9c0cf; outline: none;
}
.dv-purple {
  padding: 7px 14px; border-radius: 7px; font-size: 12.5px;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9); color: #fff;
  box-shadow: 0 6px 16px -8px rgba(139, 92, 246, .9);
}
.dv-batch { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.dv-mini { padding: 5px 11px; font-size: 12px; }
.dv-check { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #8b93a3; }
.dv-check input { accent-color: #2563eb; }

.dv-grid {
  flex: 1; min-height: 0; overflow-y: auto; align-content: start;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(342px, 1fr)); gap: 12px;
  padding-right: 2px;
}
.dv-empty { grid-column: 1 / -1; padding: 90px 0; text-align: center; color: #4a5163; font-size: 14px; line-height: 1.9; }
.dv-empty span { font-size: 12px; color: #39404e; }

.dcard {
  padding: 12px 14px; border-radius: 12px; cursor: pointer;
  background: linear-gradient(160deg, #141821, #0f1218);
  border: 1px solid #232733;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.dcard:hover { border-color: #333c4d; transform: translateY(-2px); box-shadow: 0 14px 26px -18px rgba(0, 0, 0, .9); }
.dcard.off { opacity: .7; }
.dcard.sel { border-color: rgba(59, 130, 246, .62); box-shadow: 0 0 0 2px rgba(59, 130, 246, .14); }

.dc-head { display: flex; align-items: center; gap: 10px; }
.dc-logo {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px;
  display: grid; place-items: center; color: #fff;
  font-size: 15px; font-weight: 700; background: var(--c);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}
.dc-title { min-width: 0; flex: 1; }
.dc-title b { display: block; font-size: 13.5px; font-weight: 600; color: #eef1f7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-tags { display: flex; gap: 6px; margin-top: 4px; }
.dc-chip {
  font-size: 10.5px; padding: 1px 7px; border-radius: 5px;
  background: #1b202b; border: 1px solid #262c3a; color: #8b93a3;
}
.dc-chip.ok { color: #35d0a5; border-color: rgba(53, 208, 165, .35); background: rgba(53, 208, 165, .08); }
.dc-chip.off { color: #60a5fa; border-color: rgba(59, 130, 246, .3); background: rgba(59, 130, 246, .08); }
.dc-acts { display: flex; gap: 2px; flex: 0 0 auto; }
.dca { width: 27px; height: 27px; border-radius: 6px; display: grid; place-items: center; color: #7f8899; }
.dca:hover { background: #232a36; color: #60a5fa; }
.dca:hover { background: #1d222c; color: #60a5fa; }
.dca .ic { width: 14px; height: 14px; }

.dc-badges { display: flex; gap: 6px; margin: 10px 0 9px; }
.dc-badge {
  font-size: 10.5px; padding: 2px 8px; border-radius: 5px;
  background: #161a22; border: 1px solid #242a36; color: #8b93a3;
}
.dc-badge.lock { color: #f0a94a; border-color: rgba(240, 169, 74, .3); }
.dc-badge.unlock { color: #35d0a5; border-color: rgba(53, 208, 165, .25); }

.dc-kv div {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 4.5px 0; border-bottom: 1px dashed #1a1e27; font-size: 12px;
}
.dc-kv div:last-child { border-bottom: 0; }
.dc-kv em { font-style: normal; color: #6b7488; flex: 0 0 auto; }
.dc-kv b { font-weight: 500; color: #c8d0de; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-kv b.red { color: #3b82f6; }
.dc-kv b.mut { color: #5c6579; }
.dc-kv b.mono { font-family: Consolas, monospace; font-size: 11.5px; color: #96a0b3; }

/* ==================================================================
   v6 对齐雄鹰：窄侧栏 / 紧凑菜单 / 更黑的面板 / 多区块卡片布局
   ================================================================== */
.xy-side { width: 172px; flex: 0 0 172px; background: linear-gradient(180deg, #0b0b0e 0%, #08080a 100%); border-right: 1px solid #1a1c22; }
.xy-side::after { background: linear-gradient(180deg, rgba(59, 130, 246, .18), transparent 40%); }

.sb-brand { height: 56px; flex: 0 0 56px; padding: 0 12px; gap: 8px; border-bottom: 1px solid #1a1c22; }
.sb-logo { width: 28px; height: 28px; border-radius: 8px; font-size: 11px; background: linear-gradient(145deg, #1d4ed8, #8c1109); }
.sb-brand-t b { font-size: 13px; color: #60a5fa; }
.sb-brand-t em { font-size: 8.5px; letter-spacing: 1px; color: #55484a; }

.sb-search { margin: 8px 8px 2px; height: 30px; padding: 0 9px; border-radius: 6px; }
.sb-search input { font-size: 12px; }

.xy-nav { padding: 6px 8px 12px; gap: 3px; }
.xy-group { padding: 13px 6px 4px; font-size: 10.5px; letter-spacing: .4px; color: #6d6b74; }
.xy-item { height: 32px; padding: 0 9px; border-radius: 6px; font-size: 12.5px; gap: 8px; }
.xy-item .ic { width: 14px; height: 14px; }
.xy-item.on {
  background: #1e3a8a; border-color: #1e40af; color: #60a5fa;
}
.xy-item.on .ic { color: #60a5fa; }
.xy-side-foot { padding: 8px; border-top: 1px solid #1a1c22; }
.xy-side-foot a { height: 30px; font-size: 11.5px; border-radius: 6px; }

/* 顶栏 */
.xytop { height: 52px; flex: 0 0 52px; padding: 0 14px; background: #0a0b0e; border-bottom: 1px solid #1a1c22; }
.xyt-crumb { font-size: 13px; color: #6d7280; }
.xyt-crumb b { font-size: 13.5px; color: #dfe3ea; }
.xyt-field { height: 30px; border-radius: 6px; background: #101318; border-color: #22262f; font-size: 11.5px; }
.xyt-clock b { font-size: 12.5px; color: #c9cfdb; }
.xyt-user { height: 30px; font-size: 12px; }

/* 内容容器 */
.xy-page { padding: 14px; gap: 12px; }
.mod { padding: 14px; gap: 12px; }

/* 多区块卡片：雄鹰一页多块 */
.panel-grid { flex: 1; min-height: 0; display: grid; gap: 14px; align-content: start; }
.panel-grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panel-grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.panel {
  display: flex; flex-direction: column; min-height: 320px; overflow: hidden;
  background: #0d1014; border: 1px solid #1e2229; border-radius: 12px;
}
.panel-h {
  display: flex; align-items: center; gap: 8px; padding: 13px 14px 0;
  font-size: 13.5px; font-weight: 600; color: #e7ebf2;
}
.panel-h .pico { width: 16px; height: 16px; color: #1d4ed8; flex: 0 0 16px; }
.panel-h .pico.green { color: #35d0a5; }
.panel-h .pico.amber { color: #f0a94a; }
.panel-acts { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.panel-acts button { font-size: 11.5px; color: #7f8697; }
.panel-acts button.add { color: #3b82f6; }
.panel-acts button:hover { color: #e7ebf2; }
.panel-desc { padding: 7px 14px 10px; font-size: 11.5px; line-height: 1.7; color: #5d6474; }
.panel-body { flex: 1; min-height: 0; overflow-y: auto; }

/* 紧凑表格（雄鹰密度） */
.tbl.dense th { height: 34px; font-size: 11.5px; background: #0b0e12; color: #6d7484; border-bottom: 1px solid #1b1f27; font-weight: 500; }
.tbl.dense td { height: 42px; font-size: 12.5px; color: #c2c9d6; border-bottom: 1px solid #161a21; }
.tbl.dense tbody tr:hover td { background: #12161d; }
.tbl.dense .empty-cell { text-align: center; color: #4b5261; font-size: 12px; padding: 26px 0; }
.tablewrap.bare { border: 0; border-radius: 0; background: transparent; }

/* 空态 */
.panel-empty { padding: 30px 0; text-align: center; color: #4b5261; font-size: 12px; }

.mod-body.flush { overflow: visible; display: flex; flex-direction: column; }
.mod-body.flush .panel-grid { flex: 1; }

/* 模块页根容器：让 panel 撑满 */
#view-mod { padding: 0; }
#mod-root { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tbar-search.mini { width: 190px; height: 28px; border-radius: 6px; }
.tbar-search.mini input { font-size: 12px; }
.panel-grid.c3, .panel-grid.c2 { align-content: stretch; }
.panel-body > .bankgrid { padding: 4px 14px 14px; }

/* 面板内表格不挤压：允许横向滚动 + 单元格不换行 */
.panel-body { overflow: auto; }
.panel-body > table.tbl { min-width: 100%; }
.tbl.dense th, .tbl.dense td { white-space: nowrap; }
.tbl.dense td .ops { flex-wrap: nowrap; }
.tbl.dense td .pill, .tbl.dense td .tagx { white-space: nowrap; }

/* 三列面板下压缩单元格内边距，避免操作列被裁 */
.tbl.dense th { padding: 0 9px; }
.tbl.dense td { padding: 0 9px; }
.tbl.dense td .ops { gap: 4px; }
.tbl.dense td .ops button { padding: 3px 8px; font-size: 11px; }
.panel-h { font-size: 13px; }
.panel-acts { gap: 9px; }
.panel-acts button { font-size: 11px; }

/* ==================================================================
   v8 新增形态：短信分栏 / 卡片墙 / AI 对话 / 构建 / 设置多区块 / 通知流
   ================================================================== */
/* 短信：左设备 + 右消息 */
.split { flex: 1; min-height: 0; display: grid; grid-template-columns: 250px 1fr; gap: 14px; }
.split-side, .split-main { display: flex; flex-direction: column; min-height: 0; background: #0d1014; border: 1px solid #1e2229; border-radius: 12px; overflow: hidden; }
.split-side .panel-h, .split-main .panel-h { padding: 12px 12px 8px; }
.devlist { flex: 1; overflow-y: auto; padding: 0 8px 10px; }
.devitem { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.devitem:hover { background: #141821; }
.devitem.on { background: #1e3a8a; }
.devitem b { font-size: 12.5px; font-weight: 500; color: #dfe4ee; display: block; }
.devitem em { font-style: normal; font-size: 11px; color: #6d7484; }
.devitem.on b, .devitem.on em { color: #fff; }
.devitem .dv-dot { width: 7px; height: 7px; border-radius: 50%; background: #4b5261; flex: 0 0 7px; }
.devitem .dv-dot.on { background: #35d0a5; box-shadow: 0 0 8px rgba(53, 208, 165, .8); }
.msglist { flex: 1; overflow-y: auto; padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.msg { display: flex; gap: 10px; padding: 11px 13px; border-radius: 10px; background: #11151b; border: 1px solid #1c2129; }
.msg .mhead { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: #6d7484; }
.msg .mhead b { color: #dfe4ee; font-size: 12.5px; font-weight: 600; }
.msg .mbody { margin-top: 6px; font-size: 12.5px; line-height: 1.65; color: #c2c9d6; }
.msg .mtime { margin-left: auto; font-size: 11px; color: #5d6474; }
.msg.unread { border-color: rgba(59, 130, 246, .45); background: rgba(30, 58, 138, .12); }

/* 卡片墙 */
.wallgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; padding: 4px 14px 16px; }
.tplcard { background: #11151b; border: 1px solid #1e2229; border-radius: 12px; overflow: hidden; transition: .15s; }
.tplcard:hover { border-color: #333c4d; transform: translateY(-2px); }
.tplthumb { height: 132px; background: linear-gradient(150deg, #1b2030, #0e1117); display: grid; place-items: center; color: #3a4150; }
.tplthumb .ic { width: 34px; height: 34px; }
.tplinfo { padding: 11px 13px; }
.tplinfo b { display: block; font-size: 13px; color: #e7ebf2; }
.tplinfo em { font-style: normal; display: block; margin-top: 3px; font-size: 11px; color: #6d7484; font-family: Consolas, monospace; }
.tplfoot { display: flex; align-items: center; justify-content: space-between; padding: 9px 13px; border-top: 1px solid #1a1f27; }

/* AI 对话 */
.chatwrap { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 420px; gap: 14px; }
.chatbox { display: flex; flex-direction: column; min-height: 0; background: #0d1014; border: 1px solid #1e2229; border-radius: 12px; overflow: hidden; }
.chatlog { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.bubble { max-width: 86%; padding: 10px 13px; border-radius: 10px; font-size: 12.5px; line-height: 1.7; }
.bubble.ai { background: #141821; border: 1px solid #1e2229; color: #c2c9d6; }
.bubble.me { align-self: flex-end; background: rgba(30, 58, 138, .28); border: 1px solid rgba(59, 130, 246, .35); color: #f0e2e0; }
.chatinput { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid #1a1f27; }
.chatinput input { flex: 1; height: 36px; padding: 0 12px; border-radius: 8px; background: #0c0e13; border: 1px solid #262c3a; color: #dfe4ee; font-size: 12.5px; outline: none; }
.chatinput input:focus { border-color: rgba(59, 130, 246, .5); }
.previewbox { display: flex; flex-direction: column; min-height: 0; background: #0d1014; border: 1px solid #1e2229; border-radius: 12px; overflow: hidden; }
.previewbox iframe { flex: 1; width: 100%; border: 0; background: #fff; }
.chips-row { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 12px 10px; }
.chips-row button { font-size: 11.5px; padding: 4px 10px; border-radius: 14px; background: #141821; border: 1px solid #262c3a; color: #8892a6; }
.chips-row button:hover { color: #fff; border-color: rgba(59, 130, 246, .45); }

/* 构建页 */
.buildgrid { flex: 1; min-height: 0; display: grid; grid-template-columns: 380px 1fr; gap: 14px; }
.buildform { display: flex; flex-direction: column; gap: 12px; padding: 4px 14px 16px; }
.buildform label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: #8b93a3; }
.buildform input, .buildform select { height: 34px; padding: 0 10px; border-radius: 7px; background: #0c0e13; border: 1px solid #262c3a; color: #dfe4ee; font-size: 12.5px; outline: none; }
.progress { height: 6px; border-radius: 6px; background: #1b202a; overflow: hidden; margin-top: 6px; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, #1e3a8a, #3b82f6); }

/* 设置多区块（用户设置/安全中心） */
.setrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.kvlist { padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 12px; }
.kvlist label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: #8b93a3; }
.kvlist input, .kvlist select { height: 34px; padding: 0 10px; border-radius: 7px; background: #0c0e13; border: 1px solid #262c3a; color: #dfe4ee; font-size: 12.5px; outline: none; }
.kvlist .kvline { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: #c2c9d6; padding: 5px 0; }

/* 通知流 */
.noticeflow { display: flex; flex-direction: column; gap: 10px; padding: 4px 14px 16px; }
.notice { display: flex; gap: 12px; padding: 12px 14px; border-radius: 10px; background: #11151b; border: 1px solid #1c2129; }
.notice .nico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: 0 0 30px; background: rgba(59, 130, 246, .12); color: #60a5fa; }
.notice b { font-size: 13px; color: #e7ebf2; }
.notice p { margin-top: 4px; font-size: 12px; color: #8b93a3; line-height: 1.6; }
.notice time { margin-left: auto; font-size: 11px; color: #5d6474; white-space: nowrap; }

/* 控制台趋势行 */
.trend-row { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; flex: 0 0 188px; min-height: 188px; }
.trend-body { flex: 1; min-height: 0; padding: 6px 10px 12px; }
.trend-body svg { width: 100%; height: 100%; display: block; }
.dash-row { grid-template-columns: 1fr 1fr; }

/* ==================================================================
   设备控制：单舞台 + 右侧信息栏
   ================================================================== */
.stage { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 306px; gap: 12px; padding: 12px; }
.stage-main {
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  background: #0d1014; border: 1px solid #1e2229; border-radius: 12px;
}
.stage-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid #1a1f27; flex: 0 0 auto; flex-wrap: wrap; }
.seg { display: flex; gap: 2px; background: #08090c; border: 1px solid #1d222b; border-radius: 7px; padding: 2px; }
.seg button { padding: 5px 12px; border-radius: 5px; font-size: 12px; color: #8b93a3; }
.seg button:hover { color: #e7ebf2; }
.seg button.on { background: #1e3a8a; color: #fff; }

.stage-body { flex: 1; min-height: 0; position: relative; display: grid; place-items: center; background: #07080b; }
.stage-body canvas { max-width: 100%; max-height: 100%; display: none; }
.stage-body canvas.show { display: block; }
.uimirror { position: absolute; inset: 0; overflow: auto; display: flex; justify-content: center; padding: 8px; }
.reader { position: absolute; inset: 0; overflow-y: auto; padding: 12px; background: #08090c; }
.stage-empty {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 9px; color: #4b5261; padding: 20px; text-align: center;
}
.stage-empty b { font-size: 13.5px; font-weight: 600; color: #6d7484; }
.stage-empty span { font-size: 11.5px; color: #3f4656; line-height: 1.7; max-width: 380px; }
.stage-empty .empty-ico { width: 30px; height: 30px; color: #333a48; }

.stage-keys { display: flex; gap: 8px; padding: 10px; border-top: 1px solid #1a1f27; justify-content: center; flex: 0 0 auto; }
.stage-keys button {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 66px; padding: 6px 0; border-radius: 8px;
  background: #141821; border: 1px solid #232a36; color: #c2c9d6; font-size: 14px;
  transition: .14s;
}
.stage-keys button em { font-style: normal; font-size: 10.5px; color: #7f8697; }
.stage-keys button:hover { border-color: rgba(59, 130, 246, .45); color: #fff; background: #1a1f29; }

.stage-side { display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow-y: auto; }
.side-card { background: #0d1014; border: 1px solid #1e2229; border-radius: 12px; overflow: hidden; flex: 0 0 auto; }
.pc-h { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 12.5px; color: #e7ebf2; border-bottom: 1px solid #1a1f27; }
.pc-h .panel-acts { margin-left: auto; display: flex; gap: 10px; }
.pc-h button { font-size: 11.5px; color: #7f8697; }
.pc-h button.add { color: #3b82f6; }
.pc-h button:hover { color: #e7ebf2; }
.side-line { display: flex; gap: 6px; padding: 10px 12px; }
.side-line input {
  flex: 1; min-width: 0; height: 32px; padding: 0 10px; border-radius: 7px;
  background: #0c0e13; border: 1px solid #262c3a; color: #dfe4ee; font-size: 12px; outline: none;
}
.side-line input:focus { border-color: rgba(59, 130, 246, .45); }
.side-line button { padding: 0 13px; border-radius: 7px; background: #1e3a8a; color: #fff; font-size: 12px; }
.side-kv { padding: 8px 12px 12px; display: flex; flex-direction: column; }
.side-kv div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed #1a1e27; font-size: 12px; }
.side-kv div:last-child { border-bottom: 0; }
.side-kv em { font-style: normal; color: #6b7488; flex: 0 0 auto; }
.side-kv b { font-weight: 500; color: #c8d0de; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 176px; }
.side-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px 12px; }
.side-btns button { height: 32px; font-size: 12px; }

/* 设备控制页纵向排布：顶栏 / 舞台 / 工具面板 */
#view-device { flex-direction: column; }
#view-device .tri-top { flex: 0 0 auto; }
#view-device .stage { flex: 1; min-height: 0; }
#view-device .panels { flex: 0 0 auto; }

/* 设备控制页铺满可视区 */
#view-device.on { position: absolute; inset: 0; display: flex; flex-direction: column; height: 100%; min-height: 0; }

/* ==================================================================
   v10 侧栏对齐：更窄 / 更小字号 / 红字品牌 / 底部运行状态
   ================================================================== */
.xy-side { width: 158px; flex: 0 0 158px; }
.sb-brand { height: 52px; flex: 0 0 52px; padding: 0 10px; gap: 7px; border-bottom: 1px solid #1a1c22; }
.sb-logo {
  width: 24px; height: 24px; border-radius: 6px; font-size: 10px; font-weight: 800;
  background: linear-gradient(145deg, #1d4ed8, #1e3a8a);
  box-shadow: 0 4px 12px rgba(59, 130, 246, .35);
}
.sb-brand-t b { font-size: 13px; font-weight: 700; color: #3b82f6; letter-spacing: .2px; white-space: nowrap; }
.sb-brand-t em { display: none; }

.xy-nav { padding: 6px 7px 10px; gap: 4px; }
.xy-group {
  padding: 12px 5px 3px; font-size: 10px; font-weight: 600;
  color: #7d7f88; letter-spacing: .2px;
}
.xy-item {
  height: 30px; padding: 0 8px; border-radius: 6px; gap: 7px;
  font-size: 12px; background: #16181e; border: 1px solid #22252d;
}
.xy-item .ic { width: 13px; height: 13px; stroke-width: 2; opacity: .8; }
.xy-item span { font-weight: 400; }
.xy-item.on { background: #1e3a8a; border-color: #a8271d; color: #60a5fa; }
.xy-item.on .ic { color: #60a5fa; opacity: 1; }

.sb-status {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 12px 6px; font-size: 11px; color: #7d7f88;
}
.sb-status i {
  width: 6px; height: 6px; border-radius: 50%; background: #35d0a5;
  box-shadow: 0 0 7px rgba(53, 208, 165, .9);
}
.sb-status span { margin-left: auto; color: #4f525c; font-size: 10.5px; }

.xy-side-foot { padding: 6px 8px 10px; }
.xy-side-foot a { height: 28px; font-size: 11px; border-radius: 6px; }

/* 侧栏二级菜单 */
.sub-arrow { margin-left: auto; font-style: normal; font-size: 10px; color: #5f626c; transform: rotate(90deg); transition: .15s; }
.xy-item.open > .sub-arrow { transform: rotate(-90deg); }
.subnav { display: none; flex-direction: column; gap: 2px; margin: 2px 0 4px 18px; padding-left: 8px; border-left: 1px solid #22252d; }
.subnav.open { display: flex; }
.sub-item { height: 26px; padding: 0 8px; border-radius: 5px; font-size: 11.5px; color: #7d7f88; text-align: left; }
.sub-item:hover { color: #e7ebf2; background: #16181e; }
.sub-item:disabled { opacity: .55; cursor: default; }

/* 相册网格 */
.photogrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding: 4px 14px 16px; }
.photo { border-radius: 10px; overflow: hidden; background: #11151b; border: 1px solid #1e2229; }
.pthumb {
  height: 150px; display: grid; place-items: center; color: #4b5261;
  background: linear-gradient(150deg, hsl(var(--h, 0) 35% 22%), #0e1117);
}
.pthumb .ic { width: 26px; height: 26px; opacity: .5; }
.pinfo { padding: 8px 10px; }
.pinfo b { display: block; font-size: 11.5px; color: #c8d0de; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pinfo em { font-style: normal; font-size: 10.5px; color: #5d6474; }

/* 服务器状态：监控卡布局 */
.mon-wrap { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 4px 0 12px; }
.mon-title { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: #e7ebf2; padding: 0 2px; }
.mon-title .pico { width: 16px; height: 16px; color: #1d4ed8; }
.mon-title .pico.green { color: #35d0a5; }
.mon-title .grow { flex: 1; }
.tagx.bad { color: #93c5fd; border-color: rgba(59, 130, 246, .4); background: rgba(59, 130, 246, .08); }

.mon-grid { display: grid; gap: 12px; }
.mon-grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mon-card {
  position: relative; padding: 14px 16px; border-radius: 12px;
  background: #0d1014; border: 1px solid #1e2229;
}
.mon-h { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: #6d7484; }
.mico {
  width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .03); color: #7f8697; flex: 0 0 26px;
}
.mico.ok { color: #35d0a5; background: rgba(53, 208, 165, .1); }
.mico.blue { color: #6aa4ff; background: rgba(77, 141, 255, .1); }
.mico.amber { color: #f0a94a; background: rgba(240, 169, 74, .1); }
.mico.purple { color: #b394ff; background: rgba(161, 123, 255, .1); }
.mico .ic { width: 14px; height: 14px; }
.mon-v { display: block; margin-top: 10px; font-size: 20px; font-weight: 650; color: #eef1f7; letter-spacing: -.2px; }
.mon-v.ok { color: #35d0a5; }
.mon-v.blue { color: #6aa4ff; }
.mon-v.amber { color: #f0a94a; }
.mon-s { margin-top: 3px; font-size: 10.5px; color: #4f5665; }
.mon-meter .pct { margin-left: auto; font-size: 13px; color: #35d0a5; font-weight: 600; }
.meter { height: 4px; border-radius: 4px; background: #1b202a; margin: 10px 0 8px; overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #2b7a5f, #35d0a5); }
.mon-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 11.5px; color: #6d7484; }
.mon-row b { color: #c2c9d6; font-weight: 500; }

.mon-net .netrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; }
.mon-net .netrow div { display: flex; flex-direction: column; gap: 3px; }
.mon-net em { font-style: normal; font-size: 11px; color: #6d7484; }
.mon-net b { font-size: 15px; color: #eef1f7; font-weight: 600; }

.hcard .hdot { width: 7px; height: 7px; border-radius: 50%; }
.hcard .hdot.ok { background: #35d0a5; box-shadow: 0 0 8px rgba(53, 208, 165, .8); }
.hcard .hdot.bad { background: #3b82f6; box-shadow: 0 0 8px rgba(59, 130, 246, .8); }
.hcard.bad { border-color: rgba(59, 130, 246, .35); }