body.app .metrics { grid-template-columns:repeat(8,minmax(0,1fr)); }
.srv-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:12px; }
.sc { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; }
.sc .nm { font-weight:700; font-size:13.5px; }
.sc .ho { color:var(--mute); font-size:12px; font-variant-numeric:tabular-nums; }
.sc .st { display:flex; gap:6px; margin-top:8px; }
.dot { width:8px; height:8px; border-radius:50%; background:#52525b; display:inline-block; }
.dot.on { background:var(--acc); box-shadow:0 0 0 3px #14532d55; }
.dot.off { background:var(--bad); }
.bars { display:flex; flex-direction:column; gap:7px; }
.bar-row { display:grid; grid-template-columns:88px 1fr 36px; gap:8px; align-items:center; font-size:12px; }
.bar-row b { font-weight:550; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar-row em { color:var(--mute); font-style:normal; font-variant-numeric:tabular-nums; text-align:right; }
.track { height:6px; background:#1c1c1f; border-radius:99px; overflow:hidden; }
.track i { display:block; height:100%; background:linear-gradient(90deg,var(--accent),#22d3ee); }
.feed { max-height:280px; overflow:auto; }
.feed div { padding:7px 0; border-bottom:1px solid var(--line); color:var(--dim); font-size:12px; }
.feed div:last-child { border:0; }
.feed time { color:var(--mute); margin-right:6px; font-variant-numeric:tabular-nums; }
.task { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 0; border-bottom:1px solid var(--line); }
.task:last-child { border:0; }
.ok { color:var(--acc); } .err { color:var(--bad); } .run { color:var(--warn); }
.hint { color:var(--mute); font-size:13px; margin:0 0 10px; }
.gap { background:#3f1d0a; border:1px solid #7c2d12; color:#fdba74; border-radius:10px; padding:8px 10px; margin:0 0 6px; font-size:13px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0; }
.chip { background:var(--elev); border:1px solid var(--line); border-radius:999px; padding:4px 9px; font-size:12px; color:var(--dim); }
.chip.tap { cursor:pointer; color:var(--txt); }
.chip.tap:hover, .chip.on { border-color:var(--accent); color:var(--accent-2); }
.bar { height:4px; background:#1c1c1f; border-radius:99px; overflow:hidden; margin-top:6px; }
.bar > i { display:block; height:100%; background:var(--accent); width:0; }
.pager { display:flex; gap:8px; align-items:center; justify-content:space-between; margin-top:10px; color:var(--mute); font-size:12px; }
.chk { width:auto; }
.phone {
  width:200px; height:390px; border:7px solid #3f3f46; border-radius:24px;
  overflow:hidden; background:#000; margin:8px auto 0; box-shadow:0 12px 40px #0008;
}
.phone iframe { width:100%; height:100%; border:0; background:#111; }
.desk { min-height:160px; border:1px dashed var(--line2); border-radius:10px; padding:12px; background:#09090b; color:var(--dim); }
.modal-bg { position:fixed; inset:0; background:#000a; z-index:40; display:flex; align-items:center; justify-content:center; }
.modal { width:min(440px,92vw); background:#111318; border:1px solid var(--line2); border-radius:14px; padding:16px; }
.drawer {
  position:fixed; top:0; right:0; width:min(420px,100vw); height:100vh; background:#0c0e14;
  border-left:1px solid var(--line); z-index:30; padding:16px; overflow:auto; display:none;
}
.drawer.show { display:block; }
.drawer.wide { width:min(560px,100vw); }
.drawer.xl { width:min(740px,100vw); }
.perm-row { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; }
.perm-row label { display:inline-flex; align-items:center; gap:6px; margin:0; text-transform:none; letter-spacing:0; color:inherit; font-size:13px; font-weight:600; }
.perm-row input { width:auto; }
.pack-row { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
tr.tap { cursor:pointer; }
tr.on td { background:color-mix(in srgb, var(--accent) 10%, transparent); }
.bulkbar {
  position:fixed; left:50%; bottom:16px; transform:translateX(-50%); z-index:20;
  background:#181b24; border:1px solid var(--line2); border-radius:999px; padding:7px 10px 7px 16px;
  display:none; align-items:center; gap:8px; box-shadow:0 10px 40px #0008;
}
.bulkbar.show { display:flex; }
.live-frame { width:100%; height:280px; border:1px solid var(--line); border-radius:10px; background:#fff; margin-top:6px; }
.fault-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 0; border-bottom:1px solid var(--line); font-size:13px; }
.bk-studio { display:grid; grid-template-columns:300px minmax(0,1fr); gap:12px; margin-top:10px; min-height:72vh; }
.bk-rail { overflow:auto; max-height:72vh; border:1px solid var(--line); border-radius:var(--r); background:#0b0d12; }
.bk-item { padding:10px 12px; border-bottom:1px solid var(--line); cursor:pointer; }
.bk-item:hover { background:#181b24; }
.bk-item.on { background:color-mix(in srgb, var(--accent) 12%, transparent); box-shadow:inset 3px 0 0 var(--accent); }
.bk-item b { display:block; font-size:13px; line-height:1.3; }
.bk-item .muted { font-size:11px; margin-top:3px; }
.bk-stage { display:flex; flex-direction:column; min-width:0; min-height:72vh; }
.bk-stage-bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.bk-stage-bar b { font-size:14px; }
.bk-stage iframe {
  flex:1; width:100%; min-height:68vh; border:1px solid var(--line); border-radius:12px;
  background:#fff; display:block;
}
.bk-card .meta { padding:8px 10px; }
.bk-card .meta b { display:block; font-size:13px; }
.dst-live { margin-bottom:12px; }
.device-row {
  display:grid; grid-template-columns:minmax(200px,250px) minmax(200px,250px) minmax(0,1fr);
  gap:14px; align-items:start;
}
.device-name { font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); margin:0 0 6px; font-weight:700; }
.phone-shell {
  position:relative; width:100%; max-width:250px; aspect-ratio:390/844;
  background:#000; border:9px solid #1b1b20; border-radius:34px; overflow:hidden; box-shadow:var(--shadow);
}
.phone-shell.android { border-radius:26px; }
.phone-notch { position:absolute; top:7px; left:50%; transform:translateX(-50%); z-index:2; width:88px; height:16px; background:#0a0a0c; border-radius:10px; }
.phone-cam { position:absolute; top:9px; left:12px; z-index:2; width:9px; height:9px; border-radius:50%; background:#1f2937; }
.phone-shell iframe { width:100%; height:100%; border:0; background:#fff; display:block; }
.desk-shell { border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#0c0e14; min-height:58vh; box-shadow:var(--shadow); }
.desk-bar { display:flex; align-items:center; gap:6px; padding:7px 10px; background:#16161c; border-bottom:1px solid var(--line); }
.desk-bar span { width:7px; height:7px; border-radius:50%; background:#3f3f46; }
.desk-bar span:nth-child(1) { background:#fb7185; }
.desk-bar span:nth-child(2) { background:#facc15; }
.desk-bar span:nth-child(3) { background:#4ade80; }
.desk-bar em { margin-left:8px; color:var(--mute); font-style:normal; font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.desk-shell iframe { width:100%; height:calc(58vh - 32px); min-height:420px; border:0; background:#fff; display:block; }
.mono { font-family:ui-monospace,Consolas,monospace; font-size:12px; }
@media (max-width:1200px) {
  .device-row { grid-template-columns:1fr 1fr; }
  .device.desk { grid-column:1 / -1; }
}
@media (max-width:1100px) {
  body.app .metrics { grid-template-columns:repeat(4,1fr); }
  .srv-grid { grid-template-columns:1fr; }
  .bk-studio { grid-template-columns:1fr; }
  .bk-rail { max-height:220px; }
  aside { width:210px; }
}