/* Tunnel layout follows the existing infrastructure surfaces and controls. */
.speedbox-infrastructure .tunnel-workspace {
  --tunnel-muted: var(--muted, rgba(255,255,255,.65));
  display: grid;
  gap: 18px;
  text-align: right;
  min-width: 0;
  width: 100%;
}
.tunnel-workspace [hidden] { display: none !important; }
.tunnel-workspace h2,.tunnel-workspace h3,.tunnel-workspace h4 { margin: 0; color: #eee; }
.tunnel-toolbar,.tunnel-builder>header,.tunnel-result-heading,.tunnel-card>header,.tunnel-card>footer,.tunnel-mapping-heading {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.tunnel-toolbar { padding: 0 2px 14px; border-bottom: 1px solid rgba(255,255,255,.1); }
.tunnel-toolbar h2 { font-size: 14px; font-weight: 600; }
.tunnel-toolbar h2 small { display: inline-block; margin-inline-start: 7px; font-size: 10px; font-weight: 400; color: var(--tunnel-muted); }
.tunnel-toolbar p { margin: 6px 0 0; color: var(--tunnel-muted); font-size: 11px; line-height: 1.8; }
.tunnel-toolbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.tunnel-help,.tunnel-muted,.tunnel-card-message,.tunnel-node-options p { color: var(--tunnel-muted); font-size: 12px; line-height: 1.9; margin: 0; font-weight: 400; }
.tunnel-eyebrow { display: inline-block; color: var(--tunnel-muted); font-size: 10px; font-weight: 400; margin-bottom: 5px; }
.tunnel-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(min(100%,330px),1fr)); gap: 14px; }
.tunnel-card { min-width:0;overflow:visible; }
.tunnel-card { display: flex; flex-direction: column; gap: 16px; }
.tunnel-card h3 { font-size: 14px; overflow-wrap: anywhere; }
.tunnel-method { display: inline-block; font-size: 10px; color: var(--tunnel-muted); margin-top: 6px; font-weight: 400; }
.tunnel-badge { display: inline-flex; align-items: center; justify-content: center; padding: 4px 8px; border-radius: 7px; font-size: 10px; white-space: nowrap; background: rgba(197,207,223,.08); color: #dce2eb; border: 1px solid rgba(197,207,223,.2); }
.tunnel-connected,.tunnel-ok,.tunnel-succeeded,.tunnel-completed { color: #99ddbf; background: rgba(80,169,129,.1); border-color: rgba(125,203,166,.24); }
.tunnel-running,.tunnel-checking,.tunnel-queued,.tunnel-testing { color: #b5cee9; background: rgba(131,164,206,.1); border-color: rgba(151,181,220,.25); }
.tunnel-unstable,.tunnel-needs_review { color: #e3cea8; background: rgba(193,159,99,.1); border-color: rgba(211,183,132,.25); }
.tunnel-down,.tunnel-failed,.tunnel-offline { color: #f2abab; background: rgba(203,105,105,.1); border-color: rgba(227,151,151,.25); }
.tunnel-pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 12px; background: rgba(255,255,255,.035); border-radius: 9px; }
.tunnel-pair>div { display: grid; gap: 5px; min-width: 0; }
.tunnel-pair span,.tunnel-address>span { font-size: 10px; color: var(--tunnel-muted); font-weight: 400; }
.tunnel-pair b { font-size: 12px; overflow-wrap: anywhere; }
.tunnel-pair i { color: var(--tunnel-muted); }
.tunnel-address { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.tunnel-address bdi { font-size: 12px; overflow-wrap: anywhere; }
.tunnel-port-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.tunnel-port-chips>span { border: 1px solid rgba(255,255,255,.14); border-radius: 6px; padding: 4px 8px; font-size: 11px; }
.tunnel-card-message { flex: 1; font-size: 11px; }
.tunnel-card>footer { padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); }
/* Keep the native primary/secondary colors; normalize only geometry. */
.speedbox-infrastructure .tunnel-workspace .button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; box-sizing: border-box; height: 36px; min-height: 36px; margin: 0; padding: 0 13px; border-radius: 9px; font-family: inherit; font-size: 11px; line-height: 1.6; white-space: nowrap; cursor: pointer; }
.tunnel-workspace .tunnel-create { height: 38px; min-height: 38px; margin: 0; justify-content: center; }
.tunnel-workspace .button:disabled { opacity: .4; cursor: not-allowed; }
.tunnel-workspace .tunnel-create:focus-visible,.tunnel-workspace .button:focus-visible,.tunnel-actions button:focus-visible { outline: 2px solid rgba(255,255,255,.7); outline-offset: 3px; }
.speedbox-infrastructure .tunnel-workspace .is-selected { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.45); color: #fff; }
.tunnel-actions { position: relative; }
.tunnel-actions>summary { list-style: none; cursor: pointer; }
.tunnel-actions>summary::-webkit-details-marker { display: none; }
.tunnel-actions>div { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 15; min-width: 180px; border: 1px solid #50505f; background: #292929; border-radius: 10px; box-shadow: 0 8px 28px #0005; padding: 6px; display: grid; }
.tunnel-actions button { background: none; border: 0; color: inherit; font: inherit; font-size: 11px; text-align: start; padding: 10px; border-radius: 7px; cursor: pointer; }
.tunnel-actions button:hover { background: rgba(255,255,255,.06); }
.tunnel-actions button:disabled { opacity: .4; cursor: not-allowed; }
.tunnel-actions [data-tunnel-action=delete] { color: #f2abab; }
.tunnel-empty { grid-column: 1/-1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 32px 20px; }
.tunnel-empty-symbol { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 20px; color: #b5cee9; }
.tunnel-empty-symbol>span { display: flex; align-items: center; justify-content: center; width: 64px; height: 44px; border-radius: 9px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); color: #ddd; font-size: 12px; }
.tunnel-empty-symbol svg { width: 38px; height: 28px; }
.tunnel-workspace .tunnel-empty h3 { font-size: 14px; }
.tunnel-empty p { max-width: 480px; margin: 10px 0 18px; color: var(--tunnel-muted); font-size: 12px; font-weight: 400; line-height: 1.9; }
.tunnel-empty>small { margin-top: 14px; font-size: 10px; color: var(--tunnel-muted); line-height: 1.9; font-weight: 400; }
.tunnel-builder { display: grid; gap: 18px; }
.tunnel-builder>header { padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.1); }
.tunnel-builder>header h3 { font-size: 14px; }
.tunnel-builder .field { display: grid; gap: 8px; min-width: 0; }
.tunnel-builder .field>label { font-size: 11px; }
.tunnel-builder .field>small,.tunnel-node-options small { font-size: 10px; color: var(--tunnel-muted); line-height: 1.8; font-weight: 400; }
.tunnel-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.speedbox-infrastructure .tunnel-builder input:not([type=checkbox]),.speedbox-infrastructure .tunnel-builder select { width: 100%; min-width: 0; box-sizing: border-box; height: 38px; min-height: 38px; margin: 0; padding: 0 11px; border: 1px solid rgba(255,255,255,.2); border-radius: 9px; background: linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.04)); color: #ddd; font: inherit; font-size: 12px; text-align: start; }
.tunnel-builder select option { background: #292929; color: #eee; }
.tunnel-builder input:focus,.tunnel-builder select:focus { outline: 1px solid rgba(255,255,255,.65); outline-offset: 2px; }
.tunnel-check { display: flex; align-items: flex-start; gap: 9px; font-size: 11px; font-weight: 400; line-height: 1.9; margin: 18px 0; }
.tunnel-check input { accent-color: #509e76; margin: 4px 0 0; flex-shrink: 0; }
.tunnel-test-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); }
.tunnel-test-actions .tunnel-muted { font-size: 10px; }
.tunnel-results { border-top: 1px solid rgba(255,255,255,.1); padding-top: 18px; display: grid; gap: 14px; }
.tunnel-result-heading h3 { font-size: 13px; }
.tunnel-result-heading p { color: var(--tunnel-muted); font-size: 11px; font-weight: 400; line-height: 1.9; margin: 6px 0 0; }
.tunnel-recommendation { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; background: rgba(80,169,129,.07); border: 1px solid rgba(125,203,166,.2); border-radius: 9px; padding: 12px; }
.tunnel-recommendation>span { font-size: 11px; color: #99ddbf; }
.tunnel-recommendation>b { font-size: 12px; }
.tunnel-recommendation>small { font-size: 10px; color: var(--tunnel-muted); margin-inline-start: auto; font-weight: 400; }
.tunnel-result-filters { display: flex; gap: 7px; flex-wrap: wrap; }
.tunnel-pick { display: block; color: #99ddbf; font-size: 10px; margin-top: 5px; }
.tunnel-row-note { display: block; max-width: 210px; color: var(--tunnel-muted); font-size: 10px; line-height: 1.8; margin-top: 6px; }
.tunnel-test-progress { display: flex; gap: 12px; align-items: center; }
.tunnel-workspace progress { width: 100%; height: 5px; accent-color: #99ddbf; }
.tunnel-selected-method { display: flex; gap: 12px; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 12px; border-radius: 9px; background: rgba(255,255,255,.04); font-size: 12px; }
.tunnel-selected-method>span { font-size: 11px; color: var(--tunnel-muted); font-weight: 400; }
.tunnel-mapping-heading { margin: 20px 0 12px; }
.tunnel-mapping-heading h4 { font-size: 12px; }
.tunnel-mapping-row { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 12px; align-items: end; margin: 10px 0; padding: 12px; background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.1); border-radius: 9px; }
.tunnel-map-arrow { align-self: center; margin-top: 24px; color: var(--tunnel-muted); }
.tunnel-mapping-row>button { margin-bottom: 1px; }
.tunnel-advanced { padding: 13px; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; margin-top: 16px; }
.tunnel-advanced summary { cursor: pointer; font-size: 11px; }
.tunnel-advanced[open]>.field { margin-top: 16px; }
.tunnel-warning { padding: 12px; background: rgba(193,159,99,.08); border-radius: 9px; color: #e3cea8; }
.tunnel-form-actions { display: flex; justify-content: flex-end; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); }
.tunnel-history { border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 0 14px; }
.tunnel-history>summary { padding: 13px 0; font-size: 11px; cursor: pointer; color: var(--tunnel-muted); text-align: right; }
.tunnel-history>summary small { margin-inline-start: 6px; }
.tunnel-history-row { width: 100%; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: none; border: 0; border-top: 1px solid rgba(255,255,255,.08); color: inherit; padding: 13px 0; font: inherit; font-size: 11px; text-align: start; cursor: pointer; }
.tunnel-history-row>small { margin-inline-start: auto; color: var(--tunnel-muted); }
.tunnel-notice { padding: 16px; background: rgba(255,255,255,.04); border-radius: 9px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: 12px; }
.tunnel-detail-summary dl { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; font-size: 12px; }
.tunnel-detail-summary dt { color: #aaa8b5; }
.tunnel-detail-summary dd { margin: 0; overflow-wrap: anywhere; }
.tunnel-node-options { display: grid; gap: 14px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 20px; margin-top: 20px; }
.tunnel-node-options .field { display: grid; gap: 8px; }
.tunnel-node-options select { min-height: 38px; width: 100%; background: #333; color: inherit; border: 1px solid rgba(255,255,255,.2); border-radius: 9px; padding: 8px; }
.tunnel-log-columns { display: grid; gap: 18px; }
.tunnel-log-columns pre { max-height: 300px; overflow: auto; white-space: pre-wrap; word-break: break-word; font-size: 11px; }
.tunnel-end-status { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 18px; }
.tunnel-end-status>section { padding: 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; min-width: 0; }
.tunnel-end-status h4 { font-size: 13px; margin: 0; }
.tunnel-end-status p,.tunnel-end-status dl { font-size: 11px; line-height: 1.8; }
.tunnel-end-status dt { color: #b4b1c0; }
.tunnel-end-status dd { margin: 0 0 8px; overflow-wrap: anywhere; }
@media(max-width:767px) {
  .speedbox-infrastructure .tunnel-workspace { gap: 14px; }
  .tunnel-toolbar { gap: 10px; align-items: flex-start; }
  .tunnel-toolbar h2 { font-size: 13px; }
  .tunnel-toolbar-actions { flex-wrap: wrap; justify-content: flex-end; }
  .tunnel-toolbar-actions .tunnel-create { padding-inline: 16px; }
  .tunnel-toolbar p { max-width: 175px; font-size: 10px; }
  .tunnel-card,.tunnel-builder { padding: 14px; }
  .tunnel-empty { padding: 26px 14px; }
  .tunnel-empty p { font-size: 11px; }
  .tunnel-fields { grid-template-columns: 1fr; gap: 14px; }
  .tunnel-mapping-row { grid-template-columns: 1fr 1fr; gap: 12px; }
  .tunnel-map-arrow { display: none; }
  .tunnel-mapping-row>button { grid-column: 1/-1; justify-self: end; }
  .tunnel-builder>header { align-items: flex-start; }
  .tunnel-builder>header h3 { font-size: 13px; line-height: 1.9; }
  .tunnel-recommendation>small { width: 100%; margin: 0; }
  .tunnel-result-heading { align-items: flex-start; }
  .tunnel-history-row>small { width: 100%; margin: 0; }
}
@media(max-width:600px) { .tunnel-end-status { grid-template-columns: 1fr; } }
/* Forms use openModal's original field surface and centered action row. */
.speedbox-infrastructure-overlay .infrastructure-modal.tunnel-modal { width:min(760px,92vw);max-width:760px; }
.speedbox-infrastructure-overlay .tunnel-modal .tunnel-builder { display:block;padding:0;border:0;background:none; }
.speedbox-infrastructure-overlay .tunnel-modal .tunnel-builder .form-grid { margin-top:18px; }
.speedbox-infrastructure-overlay .tunnel-modal .field>small { grid-column:2;text-align:right;color:var(--muted);font-size:10px;line-height:1.8; }
.speedbox-infrastructure-overlay .tunnel-modal .tunnel-help { text-align:center;margin:0 0 18px; }
.speedbox-infrastructure-overlay .tunnel-modal .tunnel-muted { color:var(--muted);font-size:11px;line-height:1.9;font-weight:400; }
.speedbox-infrastructure-overlay .tunnel-modal .tunnel-selected-method { margin-bottom:20px;justify-content:center; }
.speedbox-infrastructure-overlay .tunnel-modal .tunnel-results { text-align:right; }
.speedbox-infrastructure-overlay .tunnel-modal .tunnel-mapping-row { grid-template-columns:1fr 1fr auto;align-items:center; }
.speedbox-infrastructure-overlay .tunnel-modal .tunnel-mapping-row .field { display:grid;grid-template-columns:1fr;gap:8px; }
.speedbox-infrastructure-overlay .tunnel-modal .tunnel-map-arrow { display:none; }
.speedbox-infrastructure-overlay .tunnel-modal .tunnel-check { text-align:right; }
.speedbox-infrastructure-overlay .tunnel-modal .tunnel-result-heading h3 { margin:0;font-size:13px; }
.speedbox-infrastructure-overlay .tunnel-modal .tunnel-advanced { margin-top:18px;text-align:right; }
.speedbox-infrastructure-overlay .tunnel-modal .tunnel-advanced .field { margin-top:16px; }
.speedbox-infrastructure-overlay .tunnel-modal progress { width:100%;height:5px;accent-color:#99ddbf; }
.speedbox-infrastructure-overlay .tunnel-maintenance-intro p { margin:0 0 12px;line-height:1.9; }
.speedbox-infrastructure-overlay .tunnel-host-list { display:grid;gap:12px;margin-top:18px;text-align:right; }
.speedbox-infrastructure-overlay .tunnel-host-row { padding:14px;border:1px dashed rgba(255,255,255,.12);border-radius:10px;background:rgba(255,255,255,.03);min-width:0; }
.speedbox-infrastructure-overlay .tunnel-host-heading { display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px; }
.speedbox-infrastructure-overlay .tunnel-host-heading>strong { flex:1;min-width:0;overflow-wrap:anywhere;font-size:12px; }
.speedbox-infrastructure-overlay .tunnel-host-heading>span:first-child { font-size:11px;color:var(--muted); }
.speedbox-infrastructure-overlay .tunnel-host-choice { display:flex;gap:8px;align-items:center;font-size:11px; }
.speedbox-infrastructure-overlay .tunnel-host-choice input { margin:0;accent-color:#509e76; }
.speedbox-infrastructure-overlay .tunnel-version-pair { display:grid;grid-template-columns:1fr auto;gap:8px;font-size:11px;margin:0 0 12px; }
.speedbox-infrastructure-overlay .tunnel-version-pair dt { color:var(--muted); }
.speedbox-infrastructure-overlay .tunnel-version-pair dd { margin:0; }
.speedbox-infrastructure-overlay .tunnel-maintenance-progress { display:grid;gap:10px;margin-top:18px;font-size:12px;line-height:1.9; }
.speedbox-infrastructure-overlay .tunnel-maintenance-progress small { color:var(--muted);font-size:10px; }
.speedbox-infrastructure-overlay .tunnel-maintenance-reports { display:grid;gap:12px;text-align:right;margin-top:18px; }
.speedbox-infrastructure-overlay .tunnel-maintenance-reports summary { cursor:pointer;font-size:11px; }
.speedbox-infrastructure-overlay .tunnel-error { color:#f2abab;font-size:11px;line-height:1.9; }
.speedbox-infrastructure-overlay .tunnel-operation-result { font-size:12px;line-height:1.9;margin-top:18px; }
@media(max-width:540px) {
 .speedbox-infrastructure-overlay .tunnel-modal .field>small { grid-column:1; }
 .speedbox-infrastructure-overlay .tunnel-modal .tunnel-mapping-row { grid-template-columns:1fr; }
 .speedbox-infrastructure-overlay .tunnel-modal .tunnel-mapping-row>button { justify-self:end; }
 .speedbox-infrastructure-overlay .tunnel-modal .form-actions>.button { min-height:36px; }
 .speedbox-infrastructure-overlay .tunnel-host-heading>.badge { width:100%; }
}

/* The intro, first field and footer note share deliberate, even spacing. */
.speedbox-infrastructure-overlay .tunnel-modal [data-test-form]>.modal-fields { padding-top:28px;gap:16px; }
.speedbox-infrastructure-overlay .tunnel-modal [data-test-form] .tunnel-help { margin:0; }
.speedbox-infrastructure-overlay .tunnel-modal [data-test-form] .form-grid { margin-top:0; }
.speedbox-infrastructure-overlay .tunnel-modal [data-test-results]:empty { display:none; }
.speedbox-infrastructure-overlay .tunnel-modal .tunnel-test-note { display:flex;align-items:center;justify-content:center;min-height:48px;margin:0;text-align:center; }
.tunnel-preview-banner { padding:14px;text-align:center;line-height:1.9; }
.tunnel-preview-banner p { margin:0 0 10px;font-size:12px; }
.tunnel-preview-banner .actions { gap:10px; }
.tunnel-preview-banner .button { text-decoration:none; }

.speedbox-infrastructure .tunnel-workspace .tunnel-refresh { width:36px;min-width:36px;padding:0;flex:0 0 36px; }
.speedbox-infrastructure .tunnel-workspace .tunnel-refresh.is-refreshed { color:#99ddbf; }

/* Keep every result within the modal width, including narrow screens. */
.speedbox-infrastructure-overlay .tunnel-modal .button { box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;min-height:36px;margin:0;padding:0 14px;font-size:11px;line-height:1.6;white-space:nowrap; }
.tunnel-result-list { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;min-width:0; }
.tunnel-result-row { display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;padding:8px;border:1px solid rgba(255,255,255,.12);border-radius:10px;min-width:0; }
.tunnel-result-row.is-recommended { background:rgba(80,169,129,.07);border-color:rgba(125,203,166,.24); }
.tunnel-result-method { display:grid;gap:4px;min-width:0; }
.tunnel-result-method .tunnel-badge { padding:2px 6px;line-height:1.5; }
.tunnel-result-method>b { font-size:12px;text-align:right;overflow-wrap:anywhere; }
.tunnel-result-method>div { display:flex;align-items:center;gap:6px;flex-wrap:wrap; }
.tunnel-result-method .tunnel-pick { display:inline;margin:0; }
.tunnel-orientation { color:var(--muted);font-size:10px; }
.tunnel-result-metrics { grid-column:1/-1;grid-row:2;padding-top:7px;border-top:1px solid rgba(255,255,255,.08);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0;text-align:center; }
.tunnel-result-metrics>div { display:grid;gap:4px;min-width:0; }
.tunnel-result-metrics dt { color:var(--muted);font-size:10px;line-height:14px; }
.tunnel-result-metrics dd { margin:0;font-size:11px;line-height:17px;white-space:nowrap; }
.tunnel-result-row .tunnel-row-note { grid-column:1/-1;max-width:none;margin:0;line-height:1.6; }
.speedbox-infrastructure-overlay .tunnel-modal .tunnel-result-row>.button { width:132px;min-width:132px;max-width:132px;border-radius:9px;font-weight:700; }
.speedbox-infrastructure-overlay .tunnel-modal .tunnel-selected-method { display:flex;justify-content:space-between;gap:16px;margin:0;text-align:right; }
.tunnel-selected-copy { display:grid;gap:8px;min-width:0; }
.tunnel-selected-copy>b { font-size:12px;text-align:right; }
.tunnel-selected-copy>span { font-size:11px;line-height:1.8;color:var(--muted);overflow-wrap:anywhere; }
.speedbox-infrastructure-overlay .tunnel-modal .tunnel-back-results { width:36px;padding:0;flex:0 0 36px; }
.speedbox-infrastructure-overlay .tunnel-modal .tunnel-mapping-row { align-items:end; }
.speedbox-infrastructure-overlay .tunnel-modal .tunnel-mapping-row>button { height:38px;min-height:38px;align-self:end;margin:0; }
.speedbox-infrastructure-overlay .tunnel-modal .tunnel-mapping-row .field>label { white-space:normal;line-height:1.6;padding:0; }
.speedbox-infrastructure-overlay .tunnel-modal .tunnel-mapping-row .field>input { height:38px;min-height:38px; }

/* The connector stretches between the natural widths of the two server names. */
.tunnel-pair { display:flex;gap:0; }
.tunnel-pair>div { flex:0 1 auto;max-width:calc((100% - 36px)/2); }
.tunnel-pair>div:last-child { text-align:left; }
.tunnel-pair>.tunnel-link { display:flex;flex:1 0 36px;align-items:center;justify-content:center;align-self:stretch; }
.tunnel-pair .tunnel-link.is-connected { color:#99ddbf; }
.tunnel-pair .tunnel-link.is-disconnected { color:#f2abab; }
.tunnel-pair .tunnel-link.is-pending { color:#e3cea8; }
.tunnel-address { display:grid;gap:9px;padding:12px;border:1px solid rgba(255,255,255,.1);border-radius:9px; }
.tunnel-endpoints { display:grid;gap:8px;min-width:0; }
.tunnel-endpoint { display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap; }
.tunnel-endpoint>bdi { font-size:13px;overflow-wrap:anywhere; }
.tunnel-endpoint>small { color:var(--tunnel-muted);font-size:10px; }
.speedbox-infrastructure .tunnel-workspace .tunnel-detail-button { background:rgba(37,133,193,.2);border-color:rgba(103,190,240,.38);color:#d5efff; }
.speedbox-infrastructure .tunnel-workspace .tunnel-detail-button:hover { background:rgba(37,133,193,.36); }

.tunnel-details { display:grid;gap:22px;text-align:right;min-width:0; }
.tunnel-detail-summary>header { display:flex;align-items:center;justify-content:space-between;gap:14px; }
.tunnel-detail-summary h3 { margin:0;font-size:14px;line-height:1.9;overflow-wrap:anywhere; }
.tunnel-detail-summary>p { margin:10px 0 0; }
.tunnel-detail-summary dl { grid-template-columns:minmax(110px,.7fr) minmax(0,1.3fr);gap:12px 18px;margin:18px 0 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.1);line-height:1.8; }
.tunnel-detail-endpoint { display:block;overflow-wrap:anywhere; }
.tunnel-details .tunnel-end-status { margin:0; }
.tunnel-details .tunnel-end-status h4 { font-size:12px; }
.tunnel-details .tunnel-end-status p { color:var(--muted);margin:9px 0 14px; }
.tunnel-details .tunnel-end-status dl { display:grid;grid-template-columns:1fr auto;gap:10px;font-size:11px;margin:0 0 16px; }
.tunnel-details .tunnel-end-status dd { margin:0; }
.tunnel-details .tunnel-node-options { margin:0;padding-top:20px;gap:16px; }
.tunnel-node-options h4 { margin:0 0 8px;font-size:13px; }
.tunnel-node-grid { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 18px; }
.speedbox-infrastructure-overlay .tunnel-node-grid .field { display:grid;grid-template-columns:minmax(0,1fr);gap:9px;margin:0;min-width:0; }
.speedbox-infrastructure-overlay .tunnel-node-grid .field>label { white-space:normal;line-height:1.6;padding:0; }
.speedbox-infrastructure-overlay .tunnel-node-grid .field:nth-of-type(2) { grid-column:2;grid-row:1; }
.speedbox-infrastructure-overlay .tunnel-node-grid>.button { width:100%;grid-row:2; }
.speedbox-infrastructure-overlay .tunnel-node-grid .field>:is(select,.speedbox-select) { width:100%;min-width:0; }
.speedbox-infrastructure-overlay .tunnel-node-grid select { margin:0;height:36px;min-height:36px; }
.speedbox-infrastructure-overlay .tunnel-log-columns h4 { margin:0 0 12px;font-size:12px; }
.speedbox-infrastructure-overlay .tunnel-log-columns pre { margin:0; }
.speedbox-infrastructure-overlay .tunnel-maintenance-reports details[open]>summary { margin-bottom:12px; }
.speedbox-infrastructure-overlay .tunnel-maintenance-reports pre { margin:0; }
.speedbox-infrastructure-overlay .tunnel-maintenance-intro { display:grid;gap:12px;padding-block:8px;text-align:center; }
.speedbox-infrastructure-overlay .tunnel-maintenance-intro p { margin:0; }
.speedbox-infrastructure-overlay .tunnel-host-list { margin:0; }
.speedbox-infrastructure-overlay .tunnel-host-heading { margin-bottom:14px; }
.speedbox-infrastructure-overlay .tunnel-operation-result,.speedbox-infrastructure-overlay .tunnel-maintenance-note { display:flex;align-items:center;justify-content:center;min-height:48px;margin:0;text-align:center; }
.speedbox-infrastructure-overlay .tunnel-maintenance-progress { margin:0;text-align:center; }
.speedbox-infrastructure-overlay .tunnel-maintenance-reports { margin:0; }
@media(max-width:700px) {
  .tunnel-result-list { grid-template-columns:minmax(0,1fr); }
  .tunnel-result-row { grid-template-columns:minmax(0,1fr) auto; }
}
@media(max-width:540px) {
  .tunnel-result-row { padding:10px;gap:10px; }
  .tunnel-result-method>b { font-size:11px; }
  .speedbox-infrastructure-overlay .tunnel-modal .tunnel-result-row>.button { padding-inline:10px; }
  .tunnel-node-grid { grid-template-columns:minmax(0,1fr); }
  .speedbox-infrastructure-overlay .tunnel-node-grid .field:nth-of-type(2),.speedbox-infrastructure-overlay .tunnel-node-grid>.button { grid-column:1;grid-row:auto; }
  .tunnel-detail-summary dl { grid-template-columns:minmax(85px,.7fr) minmax(0,1.3fr);gap:12px; }
  .tunnel-details .tunnel-end-status dl { grid-template-columns:minmax(0,1fr) auto; }
}

.tunnel-link svg,.tunnel-back-results svg { width:18px;height:18px;flex-shrink:0; }

.tunnel-test-context { display:flex;align-items:center;justify-content:space-between;gap:14px;min-width:0; }
.speedbox-infrastructure-overlay .infrastructure-modal.tunnel-modal:has(.has-results) { width:min(940px,92vw);max-width:940px; }
.tunnel-test-context>span { min-width:0;overflow-wrap:anywhere;font-size:11px;line-height:1.8; }
.speedbox-infrastructure-overlay .tunnel-modal .has-results:not(.show-test-settings)>.modal-fields>:is(.tunnel-help,.form-grid,.tunnel-test-note) { display:none; }
.speedbox-infrastructure-overlay .tunnel-modal .has-results>.modal-fields { padding-top:18px; }
.speedbox-infrastructure-overlay .tunnel-modal .has-results .tunnel-results { padding-top:14px;gap:10px; }
.speedbox-infrastructure-overlay .tunnel-modal .has-results .tunnel-recommendation { padding:8px 12px; }
.speedbox-infrastructure-overlay .tunnel-modal .has-results .tunnel-result-heading p { font-size:10px;line-height:1.6;margin-top:4px; }
@media(max-width:380px) { .tunnel-result-metrics { grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; } }

/* Values stay in their original column; only the order inside the timestamp changes. */
.tunnel-endpoint { flex-direction:row-reverse; }
.tunnel-checked-time { display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;font-size:10px;color:var(--muted);font-weight:400;line-height:1.8; }
.tunnel-checked-time>span { text-align:right; }
.tunnel-time-value { display:inline-flex;direction:ltr;unicode-bidi:isolate;align-items:center;gap:7px;white-space:nowrap;font-size:10px;color:var(--muted);font-weight:400; }
.tunnel-host-checked { display:block;padding-top:10px;border-top:1px solid rgba(255,255,255,.07); }
.tunnel-details .tunnel-end-status dd { text-align:left; }
.tunnel-method-intro { display:grid;gap:10px;line-height:1.9; }
.tunnel-method-intro p { margin:0; }
.tunnel-method-intro b { display:inline-block; }
.speedbox-infrastructure-overlay .tunnel-modal .tunnel-method-history { display:grid;grid-template-columns:minmax(0,1fr);gap:10px; }
.tunnel-method-test-time { display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap; }
.speedbox-infrastructure-overlay .tunnel-modal .tunnel-method-warning { margin:16px 0 0;line-height:1.9; }
.speedbox-infrastructure-overlay .infrastructure-modal.tunnel-modal:has([data-method-picker]) { width:min(940px,92vw);max-width:940px; }

.tunnel-address { grid-template-columns:minmax(0,1fr);justify-content:stretch; }

.speedbox-infrastructure-overlay .tunnel-modal [data-method-picker]>.modal-fields { gap:12px; }