.vpn { grid-column: 1 / -1; min-width: 0; }
body.vpn-view .summary { display: none; }
.vpn h2 { font-size: 22px; margin: 0; }
.vpn h3 { font-size: 16px; margin: 0 0 16px; }
.vpn-heading, .vpn-tools, .vpn-buttons { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.vpn-buttons { justify-content: flex-start; }
.vpn button, .vpn-dialog button { height: 36px; border-radius: 5px; background: var(--panel); border: 1px solid var(--line); color: var(--text); font-size: 13px; }
.vpn button:disabled { opacity: .55; cursor: not-allowed; }
.vpn .vpn-primary, .vpn-dialog .vpn-primary { background: var(--nav-active); color: #fff; border-color: var(--nav-active); }
.vpn .vpn-switch { width: 40px; min-width: 40px; height: 24px; padding: 3px; border-radius: 12px; background: var(--muted); display: inline-flex; align-items: center; }
.vpn .vpn-switch[aria-checked="true"] { background: var(--up); }
.vpn-switch span { display: block; width: 16px; height: 16px; border-radius: 50%; background: #fff; flex: 0 0 16px; }
.vpn-switch[aria-checked="true"] span { transform: translateX(14px); }
.vpn-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.vpn-rule-status { color: var(--muted); }
.vpn-rule-status[data-enabled="true"] { color: var(--up); }
.vpn small, .vpn-muted { color: var(--muted); font-size: 12px; }
.vpn-heading small { display: block; margin-top: 6px; }
.vpn-servers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; border-block: 1px solid var(--line); margin: 20px 0 8px; padding: 18px 0; }
.vpn-server { border-left: 3px solid var(--line); padding-left: 14px; min-width: 0; }
.vpn-server[data-enabled="true"] { border-color: var(--up); }
.vpn-server strong, .vpn-server small { display: block; margin-top: 5px; }
.vpn-tabs { display: flex; gap: 24px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.vpn-tabs button { height: 44px; flex-shrink: 0; background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding-inline: 0; }
.vpn-tabs button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.vpn-message { min-height: 20px; font-size: 13px; margin-block: 12px; color: var(--up); overflow-wrap: anywhere; }
.vpn-message[data-error="true"], .vpn-dialog-error { color: var(--down); }
.vpn-tools { justify-content: flex-start; margin: 14px 0; }
.vpn input, .vpn select { min-width: 0; }
.vpn-table-wrap { max-width: 100%; overflow-x: auto; border-block: 1px solid var(--line); }
.vpn table { width: 100%; min-width: 820px; border-collapse: collapse; font-size: 13px; background: var(--panel); }
.vpn th, .vpn td { text-align: left; padding: 12px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; max-width: 270px; }
.vpn th { background: var(--panel-2); color: var(--muted); font-size: 11px; text-transform: uppercase; white-space: nowrap; }
.vpn tr:last-child td { border-bottom: 0; }
.vpn td small { display: block; margin-top: 5px; }
.vpn tbody tr:hover { background: var(--panel-2); }
.vpn .vpn-empty { padding: 36px; text-align: center; color: var(--muted); }
.vpn-pager { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 12px; font-size: 12px; color: var(--muted); }
.vpn-create { max-width: 1060px; margin-top: 18px; }
.vpn fieldset { padding: 0 0 22px; margin: 0 0 22px; border: 0; border-bottom: 1px solid var(--line); min-width: 0; }
.vpn legend { font-size: 15px; font-weight: 700; margin-bottom: 16px; }
.vpn-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.vpn-fields label, .vpn-dialog label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; min-width: 0; }
.vpn-fields input, .vpn-fields select, .vpn-dialog input { width: 100%; min-width: 0; height: 38px; padding-inline: 10px; }
.vpn .vpn-check, .vpn-dialog .vpn-check { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.vpn input[type="checkbox"], .vpn-dialog input[type="checkbox"] { width: 16px; min-width: 0; height: 16px; accent-color: var(--accent); }
.vpn-span { grid-column: 1 / -1; }
.vpn-generator-action { display: flex; align-items: flex-end; }
.vpn-forward-fields { margin-top: 18px; }
.vpn-forward-grid { display: grid; grid-template-columns: minmax(95px, 1fr) minmax(85px, 1fr) minmax(65px, 1fr); align-items: center; gap: 12px; margin-top: 18px; max-width: 620px; font-size: 13px; }
.vpn-forward-header { color: var(--muted); font-size: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.vpn-forward-grid input[type="number"] { width: 100%; height: 38px; padding-inline: 10px; }
.vpn-forward-grid label { min-width: 0; }
.vpn-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.vpn-note { padding: 12px 14px; border-left: 3px solid var(--warn); background: var(--panel-2); font-size: 13px; line-height: 1.5; margin-top: 12px; overflow-wrap: anywhere; }
.vpn-script { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 18px; }
.vpn-script textarea { margin-top: 12px; display: block; width: 100%; height: 330px; resize: vertical; background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 4px; padding: 14px; font: 13px/1.6 Consolas, monospace; }
.vpn-dialog { width: min(780px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; background: var(--panel); color: var(--text); padding: 24px; border: 1px solid var(--line); border-radius: 8px; }
.vpn-dialog::backdrop { background: rgb(0 0 0 / 45%); }
.vpn-service-row { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(200px, 2fr) auto; align-items: center; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.vpn-service-row h3 { font-size: 16px; margin: 0 0 8px; }
.vpn-service-row small, .vpn-service-row dt { color: var(--muted); font-size: 12px; }
.vpn-service-row dl { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0; min-width: 0; }
.vpn-service-row dd { margin: 8px 0 0; font-size: 14px; overflow-wrap: anywhere; }
.vpn-service-control { display: flex; gap: 12px; align-items: center; font-size: 13px; }
.vpn .vpn-service-control .vpn-switch { width: 44px !important; min-width: 44px !important; height: 26px !important; min-height: 26px !important; padding: 4px !important; border: 0 !important; border-radius: 13px !important; }
.vpn-service-control .vpn-switch[aria-checked="true"] span { transform: translateX(20px); }
@media (max-width: 640px) {
  .vpn-service-row { grid-template-columns: minmax(0, 1fr) auto; gap: 16px; }
  .vpn-service-row dl { grid-row: 2; grid-column: 1 / -1; }
  .vpn-service-control { grid-column: 2; grid-row: 1; }
}
.vpn-dialog h3 { margin: 0 0 14px; font-size: 19px; }
.vpn-dialog p, .vpn-dialog li { font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.vpn-dialog pre { max-height: 240px; overflow: auto; font: 12px/1.6 Consolas, monospace; background: var(--panel-2); padding: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.vpn-dialog .vpn-buttons { justify-content: flex-end; margin-top: 18px; }
@media (max-width: 760px) {
  .vpn-fields { grid-template-columns: minmax(0, 1fr); }
  .vpn-servers { gap: 8px; }
  .vpn-server { padding-left: 8px; }
  .vpn-server strong { font-size: 13px; }
  .vpn-tabs { gap: 20px; }
  .vpn-tools input { width: 100%; }
}