/* Scoped to VPN pages: no changes to the global panel or VPN operations. */
.bn-vpn-ui{--vpn-line:var(--bn-border-light,#dbe3ef);--vpn-muted:#64748b;--vpn-surface:#fff;--vpn-soft:#f7f9fc;--vpn-text:#14233b;font-family:var(--bn-font,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif);font-size:14px;line-height:1.55;color:var(--vpn-text);min-width:0;max-width:100%}
:is(.dark,.fi-dark,[data-theme="dark"]) .bn-vpn-ui{--vpn-line:#334155;--vpn-muted:#a6b4c8;--vpn-surface:#111827;--vpn-soft:#1e293b;--vpn-text:#e2e8f0}
.bn-vpn-ui *{box-sizing:border-box}
.bn-vpn-ui .fi-section{min-width:0;max-width:100%;border-radius:16px;box-shadow:none}
.bn-vpn-ui .fi-section-header{padding:20px 24px}
.bn-vpn-ui .fi-section-header-heading{font-family:inherit;font-size:18px;font-weight:650;line-height:1.4}
.bn-vpn-ui .fi-section-header-description{font-size:14px;line-height:1.6;color:var(--vpn-muted)}
.bn-vpn-ui .fi-section-content{padding:24px}
.bn-vpn-ui .fi-btn{min-height:40px;white-space:normal;text-align:center;font-family:inherit;line-height:1.4}
.bn-vpn-ui .fi-btn-label{white-space:normal;overflow-wrap:anywhere}
.bn-vpn-ui .fi-btn:focus-visible,.bn-vpn-ui input:focus-visible,.bn-vpn-ui select:focus-visible{outline:2px solid #2563eb;outline-offset:3px}
.bn-vpn-ui code{overflow-wrap:anywhere;white-space:normal;font-size:13px}
.bn-vpn-ui p,.bn-vpn-ui strong,.bn-vpn-ui small{overflow-wrap:anywhere}
.bn-vpn-ui .bn-vpn-metrics{gap:16px}
.bn-vpn-ui .bn-vpn-metrics article{padding:20px;border-color:var(--vpn-line);border-radius:14px;box-shadow:none;background:var(--vpn-surface)}
.bn-vpn-ui .bn-vpn-metrics span{font-size:14px;color:var(--vpn-muted)}
.bn-vpn-ui .bn-vpn-metrics strong{font-size:24px;font-weight:650;line-height:1.3;margin-top:8px}
.bn-vpn-ui .bn-vpn-form{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px}
.bn-vpn-ui .bn-vpn-form label{min-width:0;gap:7px;font-size:14px;font-weight:600}
.bn-vpn-ui .bn-vpn-form label.is-wide{grid-column:1/-1}
.bn-vpn-ui .bn-vpn-form input,.bn-vpn-ui .bn-vpn-form select,.bn-vpn-ui .bn-vpn-form textarea{min-height:44px;border-color:var(--vpn-line);background:var(--vpn-surface);color:var(--vpn-text);border-radius:9px}
.bn-vpn-ui .bn-vpn-form small{font-size:13px;line-height:1.6;color:var(--vpn-muted)}
.bn-vpn-ui .bn-vpn-submit{grid-column:1/-1;justify-content:flex-end;border-top:1px solid var(--vpn-line);padding-top:18px}
.bn-vpn-ui .bn-vpn-toolbar{margin-bottom:18px;flex-wrap:wrap}
.bn-vpn-ui .bn-vpn-table-wrap{border-color:var(--vpn-line);max-width:100%}
.bn-vpn-ui .bn-vpn-table{min-width:820px;font-size:14px}
.bn-vpn-ui .bn-vpn-table th{background:var(--vpn-soft);font-size:12px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--vpn-muted)}
.bn-vpn-ui .bn-vpn-table th,.bn-vpn-ui .bn-vpn-table td{padding:16px;border-color:var(--vpn-line)}
.bn-vpn-ui .bn-vpn-table small{font-size:12px;line-height:1.5;margin-top:4px;color:var(--vpn-muted)}
.bn-vpn-ui .bn-vpn-table td:last-child{min-width:165px}
.bn-vpn-ui .bn-vpn-actions{gap:8px}
.bn-vpn-portal{display:grid;gap:24px}
.bn-vpn-slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.bn-vpn-slot{min-width:0;border:1px solid var(--vpn-line);border-radius:12px;padding:20px;background:var(--vpn-surface)}
.bn-vpn-slot-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.bn-vpn-slot-heading>strong{font-size:15px;font-weight:650}
.bn-vpn-slot p{margin:4px 0}
.bn-vpn-slot-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.bn-vpn-port-section{margin-top:22px;border-top:1px solid var(--vpn-line);padding-top:20px}
.bn-vpn-port-list,.bn-vpn-port-form,.bn-vpn-account-form{display:grid;gap:12px;min-width:0}
.bn-vpn-port-form{margin-top:18px}
.bn-vpn-port-item{padding:14px;background:var(--vpn-soft);border-radius:9px;font-size:13px}
.bn-vpn-port-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.bn-vpn-port-row>div{min-width:0;flex:1 1 160px}
.bn-vpn-port-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.bn-vpn-ui .fi-input-wrp,.bn-vpn-ui .fi-input-wrp-content{min-width:0;max-width:100%}
.bn-vpn-ui .fi-input,.bn-vpn-ui .fi-select-input{width:100%;min-width:0;min-height:44px;font-size:14px}
@media(min-width:1600px){.bn-vpn-slots{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1100px){.bn-vpn-slots{grid-template-columns:minmax(0,1fr)}.bn-vpn-ui .bn-vpn-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
 .bn-vpn-ui{font-size:14px}
 .bn-vpn-ui .fi-section-header,.bn-vpn-ui .fi-section-content{padding:16px}
 .bn-vpn-ui .bn-vpn-metrics{gap:10px}
 .bn-vpn-ui .bn-vpn-metrics article{padding:14px}
 .bn-vpn-ui .bn-vpn-metrics strong{font-size:19px}
 .bn-vpn-ui .bn-vpn-form{grid-template-columns:minmax(0,1fr);gap:18px}
 .bn-vpn-ui .bn-vpn-submit>*{width:100%}
 .bn-vpn-ui .bn-vpn-toolbar{flex-direction:row;align-items:center}
 .bn-vpn-ui .fi-btn{min-height:44px}
 .bn-vpn-ui input,.bn-vpn-ui select,.bn-vpn-ui textarea,.bn-vpn-ui .fi-input,.bn-vpn-ui .fi-select-input{font-size:16px}
 .bn-vpn-ui .bn-vpn-table-wrap{overflow:visible;border:0;border-radius:0}
 .bn-vpn-ui .bn-vpn-table{min-width:0;width:100%;display:block}
 .bn-vpn-ui .bn-vpn-table thead{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%)}
 .bn-vpn-ui .bn-vpn-table tbody{display:grid;gap:16px}
 .bn-vpn-ui .bn-vpn-table tr{display:block;border:1px solid var(--vpn-line);border-radius:12px;padding:4px 14px;background:var(--vpn-surface)}
 .bn-vpn-ui .bn-vpn-table td{display:grid;grid-template-columns:minmax(85px,.8fr) minmax(0,1.2fr);gap:4px 12px;padding:12px 0;min-width:0;overflow-wrap:anywhere}
 .bn-vpn-ui .bn-vpn-table td:before{content:attr(data-label);grid-column:1;grid-row:1/5;font-size:12px;font-weight:600;color:var(--vpn-muted)}
 .bn-vpn-ui .bn-vpn-table td>*{grid-column:2;min-width:0;justify-self:start}
 .bn-vpn-ui .bn-vpn-table td:last-child{min-width:0;border:0}
 .bn-vpn-ui .bn-vpn-table td.bn-vpn-empty{display:block;text-align:center}
 .bn-vpn-ui .bn-vpn-table td.bn-vpn-empty:before{display:none}
 .bn-vpn-ui .bn-vpn-actions{width:100%}
 .bn-vpn-ui .bn-vpn-actions .fi-btn{width:100%}
 .bn-vpn-slot{padding:16px}
 .bn-vpn-slot-actions{display:grid;grid-template-columns:minmax(0,1fr)}
 .bn-vpn-slot-actions .fi-btn{width:100%}
 .bn-vpn-port-row>.fi-btn{margin-left:auto}
 .bn-vpn-slots{gap:16px}
}
@media(prefers-reduced-motion:reduce){.bn-vpn-ui *{transition:none!important;animation:none!important}}

/* Catalogue pages keep native Filament behaviour and the shared OSS font. */
.bn-vpn-catalog {
 --vpn-line:var(--bn-border-light,#dbe3ef); --vpn-soft:#f7f9fc; --vpn-text:#14233b;
 font-family:var(--bn-font,ui-sans-serif,system-ui,sans-serif);
}
:is(.dark,.fi-dark,[data-theme="dark"]) .bn-vpn-catalog {
 --vpn-line:var(--bn-border-dark,#334155); --vpn-soft:#1a293f; --vpn-text:#e6edf7;
}
.bn-vpn-catalog .fi-main {min-width:0}
.bn-vpn-catalog .fi-header-heading {font-family:inherit;letter-spacing:-.025em}
.bn-vpn-catalog .fi-header-subheading {max-width:52rem;font-size:.9375rem;line-height:1.6}
.bn-vpn-catalog .fi-section,.bn-vpn-catalog .fi-ta-ctn {border-radius:var(--bn-radius-md,1rem);box-shadow:none;border:1px solid var(--vpn-line)}
.bn-vpn-catalog .fi-section-header-heading {font-size:1.125rem}
.bn-vpn-catalog .fi-fo-field-label,.bn-vpn-catalog .fi-ta-header-cell-label {font-size:.875rem}
.bn-vpn-catalog .fi-ta-text {font-size:.875rem;line-height:1.55}
.bn-vpn-catalog .fi-ta-cell {vertical-align:middle}
.bn-vpn-catalog .fi-ta-header {background:var(--vpn-soft)}
.bn-vpn-catalog .fi-ta-content {overflow-x:auto;overscroll-behavior-x:contain}
.bn-vpn-catalog .fi-btn {min-height:2.75rem}
.bn-vpn-catalog .fi-input-wrp {min-height:2.75rem}
.bn-vpn-catalog .fi-input,.bn-vpn-catalog .fi-select-input {font-size:.9375rem}
.bn-vpn-catalog .fi-ta-text-item-description {overflow-wrap:anywhere}
.bn-vpn-catalog .fi-ta-actions {flex-wrap:wrap}
.bn-vpn-ui .bn-vpn-field-label {font-size:.875rem;font-weight:600;color:var(--vpn-text)}
.bn-vpn-ui .bn-vpn-slot {border-radius:var(--bn-radius-md,1rem)}
.bn-vpn-ui .bn-vpn-slot-heading {padding-bottom:12px;border-bottom:1px solid var(--vpn-line)}
.bn-vpn-ui .bn-vpn-port-fields {align-items:start}
.bn-vpn-ui .bn-vpn-input-field {min-width:0;display:grid;gap:6px}
@media(max-width:640px) {
 .bn-vpn-catalog .fi-header-heading {font-size:1.5rem}
 .bn-vpn-catalog .fi-header-subheading {font-size:.875rem}
 .bn-vpn-catalog .fi-input,.bn-vpn-catalog .fi-select-input {font-size:1rem}
 .bn-vpn-catalog .fi-ta-header-toolbar {flex-wrap:wrap;gap:.75rem}
 .bn-vpn-catalog .fi-ta-search-field {width:100%;min-width:0}
 .bn-vpn-ui .bn-vpn-port-fields {grid-template-columns:minmax(0,1fr)}
 .bn-vpn-ui .bn-vpn-port-section .fi-btn {min-height:44px}
}