.vpn-services { min-width: 0; letter-spacing: 0; }
.vpn-services * { box-sizing: border-box; }
.vpn-services h2 { margin: 0; font-size: 19px; }
.vpn-services h3, .vpn-services h4 { margin: 0; font-size: 14px; color: var(--text); }
.vpn-services h4 { margin-bottom: 10px; }
.vpn-services button { margin: 0; white-space: normal; overflow-wrap: anywhere; }
.vpn-services input, .vpn-services select, .vpn-services textarea { min-width: 0; max-width: 100%; }
.vpn-services input:disabled, .vpn-services select:disabled, .vpn-services textarea:disabled { opacity: 1; background: #f7f9fa; color: #52616a; }
.vpn-services :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.vpn-services label, .vpn-field-label { font-size: 12px; font-weight: 600; }
.vpn-services label { min-width: 0; }
.vpn-heading, .vpn-section-heading, .vpn-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 9px 12px; }
.vpn-heading { margin-bottom: 16px; }
.vpn-heading > button { margin-left: auto; }
.vpn-section-heading { margin-bottom: 10px; }
.vpn-section-heading h4 { margin: 0; }
.vpn-section-heading > button:first-of-type { margin-left: auto; }
.vpn-toolbar { margin: 9px 0; }
.vpn-toolbar > label:not(.vpn-check) { min-width: 190px; }
.vpn-selector { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(120px, 1fr) minmax(180px, 1fr); align-items: end; gap: 14px; margin: 14px 0; }
.vpn-selector > span { padding-bottom: 9px; }
.vpn-muted { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.vpn-note { padding: 10px 12px; background: #edf6fa; border-left: 3px solid #237591; font-size: 12px; }
.vpn-message { margin: 12px 0; padding: 10px 12px; border-left: 3px solid; overflow-wrap: anywhere; }
.vpn-message ul, ul.vpn-message { padding-left: 28px; }
.vpn-message p:first-child { margin-top: 0; }
.vpn-error { color: var(--danger); }
.vpn-message.vpn-error { background: #fff0ee; border-color: #bf5045; }
.vpn-success { color: #176248; background: #eff8f3; border-color: #38916e; }
.vpn-warning { color: #815911; background: #fff9e9; border-color: #c3983e; }
.vpn-empty { padding: 24px 12px; text-align: center; color: var(--muted); background: #f8fafb; }
.vpn-empty button { margin-left: 12px; }
.vpn-table { max-width: 100%; overflow: auto; margin: 14px 0 22px; }
.vpn-table th, .vpn-table td { font-size: 12px; min-width: 110px; overflow-wrap: anywhere; }
.vpn-table th { position: static; }
.vpn-table small { display: block; color: var(--muted); margin-top: 3px; }
.vpn-selected td { background: #edf7f4; }
.vpn-badge { display: inline-block; padding: 2px 7px; border-radius: 4px; color: #596775; background: #edf0f3; font-size: 11px; overflow-wrap: anywhere; }
.vpn-badge.good { color: #176248; background: #e7f5ec; }
.vpn-badge.bad { color: #ab332a; background: #fcece9; }
.vpn-fields { border: 0; margin: 0; padding: 0; min-width: 0; }
.vpn-module-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.vpn-module-tabs button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; padding: 10px 14px; }
.vpn-module-tabs button[aria-pressed=true] { border-bottom-color: var(--brand); color: var(--brand); background: #edf7f4; }
.vpn-binding-row { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(100px, auto) minmax(110px, auto); gap: 12px; align-items: end; margin: 16px 0; }
.vpn-binding-row .vpn-badge { align-self: center; }
.vpn-bindings > label { display: block; max-width: 480px; }
.vpn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vpn-grid-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vpn-span-two { grid-column: span 2; }
.vpn-field-label { display: block; color: var(--muted); margin-bottom: 6px; }
.vpn-checks { display: flex; flex-wrap: wrap; gap: 10px 18px; min-height: 38px; align-items: center; }
.vpn-services .vpn-check, .vpn-services .vpn-checks label { display: flex; flex-direction: row; align-items: center; gap: 7px; font-weight: 400; }
.vpn-services input[type=checkbox] { flex: 0 0 16px; width: 16px; height: 16px; min-height: 16px; margin: 0; align-self: center; accent-color: var(--brand); }
.vpn-services .vpn-check { margin: 12px 0; }
.vpn-section { padding: 16px 0; border-top: 1px solid var(--line); margin-top: 16px; min-width: 0; }
.vpn-user-row { display: grid; grid-template-columns: minmax(100px, 1fr) minmax(120px, 1.2fr) minmax(100px, 1fr) minmax(130px, 1.2fr) auto auto; align-items: end; gap: 10px; padding: 10px 0; border-bottom: 1px solid #e9edef; }
.vpn-account-module { background: #fbfcfc; padding-left: 12px; padding-right: 12px; border: 1px solid #e2e8eb; }
.vpn-account-form { padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.vpn-account-module .vpn-table { margin-bottom: 4px; }
.vpn-user-row > .vpn-check { align-self: center; margin-top: 25px; }
.vpn-credential { display: flex; flex-direction: column; gap: 8px; align-self: center; font-size: 12px; color: var(--muted); }
.vpn-credential strong { font-weight: 500; color: var(--text); }
.vpn-route-row { display: grid; grid-template-columns: repeat(6, minmax(120px, 1fr)) auto; align-items: end; gap: 10px; margin: 10px 0; }
.vpn-route-row label { display: flex; flex-direction: column; gap: 6px; }
.vpn-split-section { margin-top: 14px; padding: 12px; background: #f8fafb; border: 1px solid #e2e8eb; }
.vpn-split-row { display: grid; grid-template-columns: minmax(130px, .8fr) minmax(220px, 1.5fr) minmax(130px, 1fr) minmax(150px, 1fr) minmax(75px, .4fr) auto auto auto; align-items: end; gap: 10px; margin: 10px 0; padding: 10px 0; border-bottom: 1px solid #e9edef; }
.vpn-split-row label { display: flex; flex-direction: column; gap: 6px; }
.vpn-split-row .vpn-check { align-self: center; margin: 0; }
.vpn-split-destinations textarea { min-height: 82px; resize: vertical; }
.vpn-route-suggestions { font-size: 11px; }
.vpn-save { border-top: 1px solid var(--line); padding-top: 14px; }
.vpn-services .vpn-code { max-height: 360px; padding: 12px; background: #f4f6f8; color: #33434d; border: 1px solid #dfe5e8; border-radius: 4px; white-space: pre-wrap; overflow: auto; overflow-wrap: anywhere; font: 12px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.vpn-steps { padding-left: 24px; font-size: 12px; }
.vpn-steps li { margin: 5px 0; overflow-wrap: anywhere; }
.vpn-services summary { cursor: pointer; color: #41545f; font-size: 12px; margin: 10px 0; }
.vpn-job { padding: 10px 0; border-bottom: 1px solid #e9edef; overflow-wrap: anywhere; }
.vpn-runtime { margin-top: 14px; padding: 12px; background: #f8fafb; border: 1px solid #e2e8eb; }
.vpn-runtime-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 16px; }
.vpn-runtime .vpn-table { margin: 8px 0 0; }
.vpn-runtime-secret { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; }
.vpn-job .vpn-toolbar { margin-top: 0; }
.vpn-delete { margin-bottom: 0; padding-bottom: 0; }
.vpn-delete input { max-width: 420px; }
@media (max-width: 1150px) {
  .vpn-user-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vpn-user-row > .vpn-check { margin: 0; }
  .vpn-user-row > button { justify-self: end; }
  .vpn-grid-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vpn-route-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vpn-split-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .vpn-binding-row { grid-template-columns: minmax(0, 1fr); }
  .vpn-selector, .vpn-grid { grid-template-columns: minmax(0, 1fr); }
  .vpn-runtime-grid { grid-template-columns: minmax(0, 1fr); }
  .vpn-span-two { grid-column: auto; }
  .vpn-selector > span { padding-bottom: 0; }
  .vpn-route-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vpn-route-row > button { justify-self: end; }
  .vpn-split-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vpn-split-row > button { justify-self: end; }
  .vpn-heading > button { margin-left: 0; }
  .vpn-toolbar > label:not(.vpn-check) { min-width: 0; width: 100%; }
  .vpn-services .vpn-code { font-size: 11px; }
  .vpn-table { max-height: 320px; }
}
@media (max-width: 400px) {
  .vpn-user-row, .vpn-route-row, .vpn-split-row { grid-template-columns: minmax(0, 1fr); }
}