/* tunnel：内网隧道视图（状态卡 + 端口映射 + 接入指引），撑满主内容区。 */

.tun-body {
  flex: 1; min-height: 0;
  overflow-y: auto;
  width: 100%;
  padding: 18px 28px 40px;
}

.tun-status {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel-2);
  margin-bottom: 12px;
}
.t-dot.big { width: 11px; height: 11px; }
.tun-st-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tun-st-text b { font-size: 14px; }
.tun-st-sub { font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; }
.tun-maps {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 14px;
  border: 1px dashed var(--line); border-radius: 8px;
  margin-bottom: 12px;
}
.tun-map { font-size: 12px; color: var(--text); white-space: pre; overflow-x: auto; }
.tun-body > .field-hint { margin: 0 0 12px; font-size: 12.5px; color: var(--muted); }
.tun-hint { color: var(--muted); font-size: 13px; line-height: 1.7; }
.tun-hint p { margin: 0; }
.tun-guide h3 { margin: 0; font-size: 13.5px; }
.tun-guide ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 14px; }
.tun-guide li { font-size: 13px; color: var(--muted); line-height: 1.7; }
.tun-guide li b { color: var(--text); }
.tun-guide code {
  font-family: var(--mono); font-size: 12px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 5px; padding: 1px 5px;
}
.tun-dl { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tun-dl-btn { text-decoration: none; }
.tun-pair-result {
  display: flex; align-items: center; gap: 8px;
  margin: 8px 0 0;
  padding: 6px 8px 6px 14px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px;
}
.tun-cmd {
  flex: 1; min-width: 0; margin: 0; padding: 6px 0;
  font-size: 12px; line-height: 1.7;
  overflow-x: auto; white-space: pre;
  user-select: all;
}
.tun-pair-copy { flex: none; width: 36px; height: 36px; padding: 0; }
.tun-cmd-foot {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  margin-top: 8px;
}
.tun-cmd-foot > .btn { flex: none; }

@media (max-width: 760px) {
  .tun-body { padding: 14px 16px 28px; }
  .tun-pair-copy { width: 44px; height: 44px; }
}

/* Card gap owns vertical spacing; browser paragraph margins must not stack
   with it. Empty live results and workspace lists should not reserve a row. */
.tun-body > .card { gap: 10px; }
.tun-body > .card p { margin: 0; line-height: 1.6; }
.tun-body > .card .card-desc { margin: 0; }
#tun-network-workspaces:empty, #tun-probe-result:empty { display: none; }
#tun-network-workspaces:not(:empty) { display: grid; gap: 6px; }
#tun-probe-result { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
#tun-network { margin-bottom: 12px; }
#tun-network-rules, #tun-network-workspaces { overflow-wrap: anywhere; }
#tun-network .field-row { align-items: end; }
#tun-probe { flex: none; min-height: 40px; }
#chat-network { flex: none; font-size: 11px; }
@media (max-width: 600px) {
  #chat-network { max-width: 112px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

#tun-modes { margin-bottom: 12px; }
#tun-modes p { font-size: 13px; line-height: 1.6; color: var(--muted); }