/* Tunnel types reuse the panel's segmented filters, glass surfaces and controls. */
.network-backpack{--network-color:#5197ed}
.network-gost{--network-color:#a38ae8}
.network-gre{--network-color:#52b5bf}
.tunnel-card:is(.network-backpack,.network-gost,.network-gre){border-top:3px solid var(--network-color)}
.tunnel-card-heading{min-width:0;flex:1}
.tunnel-card-state{display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0}
.network-engine-badge{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:25px;min-width:58px;padding:0 9px;margin:0;border:1px solid currentColor;border-radius:7px;color:var(--network-color);font-size:11px;font-weight:700;line-height:1;white-space:nowrap;direction:ltr}
.speedbox-infrastructure .network-filters.segmented{justify-self:center;max-width:86%;margin-bottom:10px;direction:rtl}
.network-choice-content{display:grid;gap:18px;min-width:0}
.network-intro{margin:0;line-height:1.9;font-size:12px;text-align:center}
.network-engine-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0}
.network-engine-choice{appearance:none;background:var(--panel-bg,rgba(120,130,160,.06));border:1px solid var(--border-color,rgba(150,160,180,.22));border-top:3px solid var(--network-color);color:inherit;border-radius:12px;padding:20px 16px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;text-align:start;font:inherit;cursor:pointer;min-height:170px;transition:background .15s,border-color .15s;min-width:0}
.network-engine-choice:hover,.network-engine-choice:focus-visible{background:rgba(120,130,180,.12);outline:2px solid var(--network-color);outline-offset:2px}
.network-engine-choice b{font-size:21px;line-height:1.4}
.network-engine-choice span{font-size:12px;line-height:1.9}
.network-engine-choice small{color:var(--network-color);margin-top:auto;font-size:11px}
.network-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;list-style:none;padding:0;margin:0}
.network-steps li{font-size:12px;color:var(--muted,#929caf);padding:8px 4px;text-align:center;border-bottom:2px solid rgba(150,160,180,.2)}
.network-steps [aria-current=step]{color:var(--primary-color,#6aa1ef);border-color:currentColor}
.network-engine-settings{display:grid;gap:18px;min-width:0}
.network-server-addresses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.network-server-addresses>div{display:grid;gap:8px;min-width:0;padding:12px;border:1px dashed rgba(255,255,255,.12);border-radius:10px;background:rgba(255,255,255,.03)}
.network-server-addresses span{font-size:11px;color:var(--muted,#929caf)}
.network-server-addresses bdi{font-size:12px;overflow-wrap:anywhere;text-align:center}
.network-port-section{display:grid;gap:14px;min-width:0}
.network-mapping-list{display:grid;gap:14px}
.network-mapping{border:1px solid rgba(150,160,180,.2);border-radius:12px;padding:14px;margin:0;min-width:0;display:grid;gap:14px}
.network-mapping legend{padding:0 8px;font-size:12px;text-align:right}
.network-port-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.network-map-actions{display:flex;justify-content:flex-end;padding-top:2px}
.network-inline-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.network-section{border:0;padding:0;margin:0;min-width:0;text-align:right}
.network-section>summary{cursor:pointer;padding:12px 0;font-size:12px;line-height:1.7}
.network-advanced>.network-advanced-content{padding-top:6px}
.network-advanced-content{display:grid;gap:16px;min-width:0;padding-top:12px}
.network-advanced-group{display:grid;gap:14px;min-width:0}
.speedbox-infrastructure-overlay .tunnel-modal .network-toggle{display:flex;align-items:center;justify-content:space-between;gap:14px;box-sizing:border-box;width:100%;min-height:44px;padding:10px 12px;margin:0;font-size:12px;line-height:1.7}
.speedbox-infrastructure-overlay .tunnel-modal .network-toggle>span{text-align:right;min-width:0}
.speedbox-infrastructure-overlay .tunnel-modal .network-toggle .switch-line{display:inline-flex;align-items:center;justify-content:center;flex:0 0 42px;margin:0;padding:0;line-height:1}
.speedbox-infrastructure-overlay .tunnel-modal .network-toggle input[type=checkbox]{box-sizing:border-box;flex:0 0 42px;width:42px;height:24px;min-height:24px;margin:0;padding:0;vertical-align:middle}
.network-review{margin:0;padding:16px;border:1px solid rgba(150,160,180,.2);border-radius:12px;min-width:0;direction:rtl;text-align:right}
.network-review h3,.network-review h4{margin:0 0 14px;font-size:13px;line-height:1.8}
.network-review dl{display:grid;grid-template-columns:minmax(85px,1fr) minmax(0,1fr);gap:14px;margin:0}
.network-review dd{margin:0;text-align:left;overflow-wrap:anywhere;min-width:0;font-size:12px;line-height:1.8}
.network-review dt{font-size:12px;line-height:1.8;color:var(--muted,#929caf);text-align:right}
.network-review:has(.network-review-row) dl{display:block;margin-bottom:18px}
.network-review-row{display:grid;grid-template-columns:minmax(90px,.85fr) minmax(0,1.15fr);align-items:start;gap:14px;padding:12px 0;border-top:1px solid rgba(150,160,180,.12);direction:rtl}
.network-review-row:first-child{border-top:0;padding-top:0}
.network-review dd bdi{unicode-bidi:isolate;direction:ltr}
.network-review-ports{display:grid;gap:10px}
.network-review-ports>div{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;padding:12px;border-radius:8px;background:rgba(120,130,160,.07);font-size:12px;direction:rtl}
.network-review-ports span{text-align:center;overflow-wrap:anywhere;line-height:1.8}
.network-diagnostics,.network-paths{display:grid;gap:12px;margin:18px 0}
.network-paths>div{display:flex;justify-content:space-between;gap:16px;padding:12px;border-radius:8px;background:rgba(120,130,160,.07)}
.network-export{width:100%;height:auto!important;line-height:1.8!important;min-height:180px;padding:12px!important;font-family:monospace;white-space:pre;resize:vertical;text-align:left!important}
.network-detail-tools{width:100%;padding-top:14px}
.network-detail-tools summary{cursor:pointer;font-size:12px;margin-bottom:14px}
.tunnel-badge.tunnel-degraded{color:#e7ad59;background:rgba(231,173,89,.12)}
.speedbox-infrastructure-overlay .tunnel-modal .network-navigation>.button,.speedbox-infrastructure-overlay .tunnel-modal .network-inline-actions>.button,.speedbox-infrastructure-overlay .tunnel-modal .network-map-actions>.button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:38px;margin:0;padding:8px 16px;border-radius:12px;font-size:12px;line-height:20px;gap:7px;box-shadow:none}
.speedbox-infrastructure-overlay .tunnel-modal .button.network-back{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.2);color:inherit;box-shadow:none}
.speedbox-infrastructure-overlay .tunnel-modal .button.network-back:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4)}
.speedbox-infrastructure-overlay .tunnel-modal [data-network-editor] .field>small{line-height:1.9;text-align:right;white-space:normal}
.speedbox-infrastructure-overlay .tunnel-modal [data-network-editor] select{max-width:100%}
.speedbox-infrastructure-overlay .tunnel-modal [data-network-editor] textarea{width:100%;height:auto;min-height:92px;padding:10px;line-height:1.8;text-align:left;resize:vertical}
@media(max-width:700px){
 .network-engine-picker{grid-template-columns:1fr;gap:12px}
 .network-engine-choice{min-height:120px;padding:16px}
 .network-engine-choice b{font-size:19px}
 .network-server-addresses{grid-template-columns:1fr}
 .network-review{padding:12px}
 .network-steps li{font-size:11px}
 .network-navigation{gap:8px}
 .network-paths>div{flex-wrap:wrap}
}
@media(max-width:540px){
 .speedbox-infrastructure .network-filters.segmented{max-width:100%;width:100%}
 .speedbox-infrastructure .network-filters>.seg-btn{flex:1;min-width:0;padding:10px 8px;font-size:12px}
 .network-port-pair{grid-template-columns:minmax(0,1fr)}
 .network-review-row{grid-template-columns:minmax(82px,.8fr) minmax(0,1.2fr);gap:10px}
 .network-inline-actions>.button{white-space:normal}
}

.network-file-tools{display:flex;justify-content:flex-end;margin-top:-8px}
.network-file-tools .tunnel-actions>div{inset-inline-end:0;min-width:210px}

/* Test results follow the existing BackPack result cards. */
.network-protocol-results{display:flex;flex-wrap:wrap;gap:12px;grid-column:1/-1;font-size:11px;line-height:1.8}
.network-protocol-results span{display:inline-flex;gap:5px;align-items:center}
.network-test-results .tunnel-result-row{min-width:0}
.network-test-results .tunnel-result-row>.button{grid-column:1/-1;justify-self:center}
.speedbox-infrastructure-overlay .tunnel-modal [data-network-test] .form-grid{margin-top:0}
.speedbox-infrastructure-overlay .tunnel-modal [data-network-test] .tunnel-help{margin:0}
.network-protocol-details{grid-column:1/-1;min-width:0;font-size:11px;max-width:100%}
.network-protocol-details>summary{cursor:pointer;padding:8px 0}
.speedbox-infrastructure-overlay .tunnel-modal [data-network-editor] .tunnel-selected-method{margin:0}
.network-result-protocol{grid-column:1/-1;color:var(--muted);font-size:10px;text-align:right}

.network-protocol-breakdown{display:grid;gap:12px;padding-top:8px}
.network-protocol-breakdown>section{padding:12px;border:1px dashed rgba(255,255,255,.14);border-radius:9px;min-width:0}
.speedbox-infrastructure-overlay .tunnel-modal .network-protocol-breakdown h4{font-size:11px;line-height:1.6;margin:0 0 10px;text-align:right;color:inherit}
.network-protocol-breakdown dl{display:grid;gap:8px;margin:0;font-size:11px}
.network-protocol-breakdown dl>div{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
.network-protocol-breakdown dt{color:var(--muted);text-align:right}
.network-protocol-breakdown dd{margin:0;text-align:left;overflow-wrap:anywhere}

/* Compact controls, stable modal redraws and the same surfaces for every engine. */
.tunnel-card-state{flex-direction:row;align-items:center;justify-content:flex-start;gap:6px}
.tunnel-card-state>.tunnel-badge{margin:0;white-space:nowrap}
.speedbox-infrastructure-overlay .tunnel-modal{overflow-anchor:none}
.speedbox-infrastructure-overlay .tunnel-modal :is([data-test-form],[data-network-test])>.modal-fields{padding-top:18px;gap:18px}
.speedbox-infrastructure-overlay .tunnel-modal :is([data-test-form],[data-network-test]) .tunnel-help{margin:0;line-height:1.9;text-align:center}
.speedbox-infrastructure-overlay .tunnel-modal :is([data-test-form],[data-network-test]) .form-grid{margin:0}
.speedbox-infrastructure-overlay .tunnel-modal :is(.form-actions,.network-map-actions,.network-inline-actions,.tunnel-result-row,.tunnel-test-context)>.button{box-shadow:none;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:38px;line-height:20px;padding:8px 16px;margin:0;border-radius:12px;gap:7px}
.speedbox-infrastructure-overlay .tunnel-modal .button.secondary{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.2);color:inherit;box-shadow:none}
.speedbox-infrastructure-overlay .tunnel-modal .button.secondary:hover:not(:disabled){background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4)}
.network-mapping{grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:12px;gap:10px}
.network-port-pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;min-width:0}
.speedbox-infrastructure-overlay .tunnel-modal .network-port-pair .field{display:grid;grid-template-columns:auto minmax(40px,1fr);gap:7px;align-items:center;min-width:0;margin:0}
.speedbox-infrastructure-overlay .tunnel-modal .network-port-pair .field>label{font-size:11px;line-height:1.6;padding:0;white-space:normal}
.speedbox-infrastructure-overlay .tunnel-modal .network-port-pair .form-input{width:100%;min-width:0;max-width:112px;padding:6px;height:34px}
.network-map-actions{align-self:center;padding:0;min-width:0}
.speedbox-infrastructure-overlay .tunnel-modal .network-map-actions>.button{padding:6px 10px;min-height:34px;font-size:11px;line-height:20px;white-space:nowrap}
.network-mapping>p{grid-column:1/-1;margin:0}
.network-advanced-group>.form-grid{grid-template-columns:1fr;gap:12px}
.speedbox-infrastructure-overlay .tunnel-modal .network-advanced-group .field{display:grid;grid-template-columns:minmax(0,1fr) minmax(80px,110px);gap:10px;align-items:center}
.speedbox-infrastructure-overlay .tunnel-modal .network-advanced-group .field>label{padding:0;line-height:1.8;white-space:normal}
.speedbox-infrastructure-overlay .tunnel-modal .network-advanced-group .field>.form-input{width:100%;min-width:0}
.network-maintenance-hosts{display:grid;gap:12px}
.network-quota-summary{padding:14px;border:1px solid rgba(255,255,255,.14);border-radius:12px;font-size:12px;line-height:1.9}
.network-quota-summary h4,.network-quota-summary p{margin:0 0 12px}
.network-quota-summary dl{display:grid;grid-template-columns:1fr auto;gap:12px;margin:0}
.network-quota-summary dd{margin:0}
.speedbox-infrastructure-overlay .tunnel-modal [data-tunnel-setup] .tunnel-advanced .field{grid-template-columns:minmax(155px,1fr) minmax(0,1.1fr);gap:10px;align-items:center}
.speedbox-infrastructure-overlay .tunnel-modal [data-tunnel-setup] .tunnel-advanced .field>label{padding:0;font-size:11px;white-space:normal;line-height:1.8}
.speedbox-infrastructure-overlay .tunnel-modal [data-tunnel-setup] .tunnel-advanced .field>small{grid-column:1/-1}
@media(max-width:540px){
 .network-mapping{padding:10px;gap:8px}
 .network-port-pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .speedbox-infrastructure-overlay .tunnel-modal .network-port-pair .field{grid-template-columns:minmax(0,1fr);gap:5px}
 .speedbox-infrastructure-overlay .tunnel-modal .network-port-pair .field>label{font-size:10px;text-align:center;white-space:normal}
 .network-map-actions{align-self:end}
 .speedbox-infrastructure-overlay .tunnel-modal .network-map-actions>.button{padding:6px 8px;font-size:10px}
 .speedbox-infrastructure-overlay .tunnel-modal [data-tunnel-setup] .tunnel-advanced .field{grid-template-columns:minmax(145px,1fr) minmax(70px,1fr)}
}
.speedbox-infrastructure .tunnel-workspace .tunnel-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:14px;padding:0;border:0;margin:0;min-width:0}
.speedbox-infrastructure .tunnel-toolbar>.network-filters.segmented{flex:0 1 auto;max-width:none;margin:0;justify-self:auto}
.speedbox-infrastructure .tunnel-toolbar>div:first-child{flex:1;min-width:0}
.speedbox-infrastructure .tunnel-toolbar .network-filters>.seg-btn{padding:10px 14px}
@media(max-width:850px){
 .speedbox-infrastructure .tunnel-workspace .tunnel-toolbar{flex-wrap:wrap}
 .speedbox-infrastructure .tunnel-toolbar>.network-filters.segmented{order:3;flex-basis:100%;width:100%;justify-content:center}
 .speedbox-infrastructure .tunnel-toolbar .network-filters>.seg-btn{flex:1;min-width:0}
}
.tunnel-actions>div{max-height:min(65vh,420px);overflow-y:auto}
@media(max-width:540px){
 .speedbox-infrastructure-overlay .tunnel-modal .network-port-pair .field{grid-template-rows:1fr 34px;align-items:end}
 .speedbox-infrastructure-overlay .tunnel-modal .network-port-pair .field>label{align-self:center}
}

/* Equal outer tracks keep the filter centered independently of button widths. */
.speedbox-infrastructure .tunnel-workspace .tunnel-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:14px;align-items:center}
.speedbox-infrastructure .tunnel-toolbar>.tunnel-toolbar-create{grid-column:1;grid-row:1;justify-self:start;min-width:0}
.speedbox-infrastructure .tunnel-toolbar>.tunnel-toolbar-actions{grid-column:3;grid-row:1;justify-self:end;min-width:0}
.speedbox-infrastructure .tunnel-toolbar>.network-filters.segmented{grid-column:2;grid-row:1;justify-self:center;width:auto;max-width:100%;margin:0;order:0}
.speedbox-infrastructure .tunnel-toolbar .tunnel-create{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin:0;min-height:38px;padding:8px 16px;white-space:nowrap;box-shadow:none}

/* One port row and one moderate control width throughout the advanced options. */
.speedbox-infrastructure-overlay .tunnel-modal :is([data-tunnel-setup],[data-network-editor]) .tunnel-mapping-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:12px;align-items:end;margin:0;padding:12px}
.speedbox-infrastructure-overlay .tunnel-modal .tunnel-mapping-row .tunnel-map-arrow{display:none}
.speedbox-infrastructure-overlay .tunnel-modal .tunnel-mapping-row .field{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr 38px;gap:8px;margin:0;align-items:end;min-width:0}
.speedbox-infrastructure-overlay .tunnel-modal .tunnel-mapping-row .field>label{font-size:11px;line-height:1.7;align-self:center;text-align:right;white-space:normal;padding:0}
.speedbox-infrastructure-overlay .tunnel-modal .tunnel-mapping-row .field>input{height:38px;min-height:38px;width:100%;max-width:none;padding:8px;box-sizing:border-box}
.speedbox-infrastructure-overlay .tunnel-modal .tunnel-mapping-row>.button{grid-column:auto;align-self:end;justify-self:end;margin:0;min-height:38px;height:38px;padding:8px 12px;white-space:nowrap;box-shadow:none}
.network-mapping>p{grid-column:1/-1}
.speedbox-infrastructure-overlay .tunnel-modal .network-advanced .form-grid{grid-template-columns:1fr;gap:12px}
.speedbox-infrastructure-overlay .tunnel-modal .network-advanced .form-grid>.field{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,min(44%,220px));gap:10px;align-items:center;margin:0;min-width:0}
.speedbox-infrastructure-overlay .tunnel-modal .network-advanced .form-grid>.field>label{padding:0;line-height:1.8;white-space:normal}
.speedbox-infrastructure-overlay .tunnel-modal .network-advanced .form-grid>.field>:is(input,select,.speedbox-select){width:100%;min-width:0;max-width:none;box-sizing:border-box}
.speedbox-infrastructure-overlay .tunnel-modal .network-advanced .form-grid>.field>small{grid-column:1/-1;margin:0}
.speedbox-infrastructure-overlay .tunnel-modal .network-advanced .form-grid>.field :is(input,select,.speedbox-select-button){min-height:38px}
.speedbox-infrastructure-overlay .tunnel-modal:has(:is([data-test-form],[data-network-test])):not(:has(.tunnel-result-list,.network-test-results)){width:min(650px,92vw);max-width:650px}
.speedbox-infrastructure-overlay .tunnel-modal .tunnel-alert-setting .switch-line{flex:0 0 auto}
.speedbox-infrastructure-overlay .tunnel-modal .tunnel-alert-setting input[aria-disabled=true]{opacity:.55;cursor:not-allowed}

@media(max-width:700px){
 .speedbox-infrastructure .tunnel-workspace .tunnel-toolbar{grid-template-columns:minmax(0,1fr) auto;gap:14px 10px}
 .speedbox-infrastructure .tunnel-toolbar>.tunnel-toolbar-create{grid-column:1;grid-row:1}
 .speedbox-infrastructure .tunnel-toolbar>.tunnel-toolbar-actions{grid-column:2;grid-row:1}
 .speedbox-infrastructure .tunnel-toolbar>.network-filters.segmented{grid-column:1/-1;grid-row:2;width:100%;justify-content:center}
 .speedbox-infrastructure .tunnel-toolbar .network-filters>.seg-btn{flex:1;min-width:0}
}
/* Match the mobile entity toolbar: a wide create action beside refresh. */
@media(max-width:540px){
 .speedbox-infrastructure .tunnel-workspace{gap:18px}
 .speedbox-infrastructure .tunnel-workspace .tunnel-toolbar{margin:10px 0 0;gap:12px}
 .speedbox-infrastructure .tunnel-toolbar>.tunnel-toolbar-create{justify-self:stretch}
 .speedbox-infrastructure .tunnel-toolbar .tunnel-create{width:100%;min-width:0;height:38px;font-size:12px}
 .speedbox-infrastructure .tunnel-toolbar .tunnel-refresh{width:38px;min-width:38px;height:38px;min-height:38px;padding:0;flex:0 0 38px}
 .speedbox-infrastructure .tunnel-workspace .tunnel-empty{padding:20px 14px}
 .speedbox-infrastructure .tunnel-empty-symbol{gap:14px;margin-bottom:12px}
 .speedbox-infrastructure .tunnel-empty-symbol>span{width:52px;height:38px}
 .speedbox-infrastructure .tunnel-empty p{margin:8px 0 0}
 .speedbox-infrastructure .tunnel-empty>small{margin-top:8px}
}
@media(max-width:420px){
 .speedbox-infrastructure-overlay .tunnel-modal .network-advanced .form-grid>.field{grid-template-columns:minmax(0,1fr) minmax(130px,47%)}
 .speedbox-infrastructure-overlay .tunnel-modal :is([data-tunnel-setup],[data-network-editor]) .tunnel-mapping-row{gap:8px;padding:10px}
 .speedbox-infrastructure-overlay .tunnel-modal .tunnel-mapping-row .field>label{font-size:10px}
 .speedbox-infrastructure-overlay .tunnel-modal .tunnel-mapping-row>.button{font-size:10px;padding:8px}
}