/* 桌面侧栏与 iframe 层 */

#appLayer {
  position: absolute;
  left: 11px;
  top: 11px;
  width: 240px;
  height: 320px;
  display: none;
  z-index: 6;
  border-radius: 3px;
  overflow: hidden;
  background: #000;
}

.appframe {
  width: 240px;
  height: 320px;
  border: 0;
  display: block;
  background: #fff;
}

/* ---------- 侧栏 ---------- */

#bench {
  width: 320px;
  margin-left: 40px;
  align-self: stretch;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  padding: 18px 18px 12px;
  border-radius: 16px;
  background: rgba(18, 24, 32, 0.78);
  border: 1px solid rgba(120, 150, 180, 0.14);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  font-size: 11px;
  color: #c8d4e0;
}

.bhead { margin-bottom: 12px; }
.bname { font-size: 17px; font-weight: 600; color: #f2f7fc; letter-spacing: 0.01em; }
.btag { font-size: 10px; color: #4bd6a8; letter-spacing: 0.12em; margin-top: 3px; }

.brow { display: flex; margin-bottom: 12px; }

.btn {
  flex: 1;
  margin-right: 6px;
  padding: 7px 4px;
  font-size: 11px;
  font-family: inherit;
  color: #d7e2ee;
  background: #1d2733;
  border: 1px solid #2b3948;
  border-radius: 7px;
  cursor: pointer;
}

.btn:last-child { margin-right: 0; }
.btn:hover { background: #243040; }
.btn.primary { background: #178f6c; border-color: #1fae84; color: #eafff7; }
.btn.primary:hover { background: #1aa87d; }
.btn.danger { color: #ffb3ae; }
.btn.danger:hover { background: #3a2124; }

.bsec { margin-bottom: 12px; }
.bsec.grow { flex: 1; min-height: 90px; display: flex; flex-direction: column; }

.bsec h2 {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #5f7386;
  text-transform: uppercase;
  margin: 0 0 6px;
}

.bmono { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 10px; line-height: 16px; }
.bmono b { color: #7d93a8; font-weight: 400; }

.blist {
  overflow-y: auto;
  border-radius: 8px;
  background: rgba(8, 12, 17, 0.55);
  border: 1px solid rgba(120, 150, 180, 0.1);
  padding: 6px;
}

.blist.logs { flex: 1; min-height: 80px; }

.dim { color: #5f7386; }

.approw {
  display: flex;
  align-items: center;
  padding: 4px 2px;
  border-bottom: 1px solid rgba(120, 150, 180, 0.07);
}

.approw:last-child { border-bottom: 0; }
.an { flex: 1; color: #dbe6f2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am { color: #5f7386; margin-right: 6px; font-size: 9.5px; }

.mini {
  font-size: 9.5px;
  padding: 3px 6px;
  margin-left: 3px;
  color: #cfe0ee;
  background: #223041;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  font-family: inherit;
}

.mini:hover { background: #2b3d51; }
.mini.danger { color: #ffb3ae; background: #33202a; }

.logline {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 9.5px;
  line-height: 14px;
  padding: 1px 0;
  color: #9fb0c2;
  word-break: break-all;
}

.logline .lt { color: #4a5b6d; margin-right: 6px; }
.logline.lv-error { color: #ff8f88; }
.logline.lv-warn { color: #f0bd62; }
.logline.lv-info { color: #9fb0c2; }
.logline.lv-debug { color: #62748a; }

.bfoot {
  font-size: 9.5px;
  line-height: 15px;
  color: #4f6377;
  border-top: 1px solid rgba(120, 150, 180, 0.1);
  padding-top: 8px;
}

@media (max-width: 900px) {
  #bench { width: 270px; margin-left: 22px; }
}

@media (max-width: 760px) {
  #bench { display: none; }
  #stage { padding: 8px 2px; }
}