.router-table { min-width: 1280px; }
.router-table code { color: #1e6679; font-weight: 700; }
.router-api-button { padding: 7px 10px; border: 1px solid #2a9e52; border-radius: 5px; background: #39a94d; color: #fff; font-weight: 800; cursor: pointer; }
.router-api-button:disabled { opacity: .55; cursor: wait; }
.router-editor { max-width: 1120px; margin: 0 auto; padding: 24px; }
.router-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.router-form-grid label { display: grid; align-content: start; gap: 7px; color: #37535b; font-weight: 750; }
.router-form-grid input,
.router-form-grid select,
.router-form-grid textarea { width: 100%; min-height: 46px; box-sizing: border-box; padding: 10px 12px; border: 1px solid #c5d8dc; border-radius: 7px; background: #fff; color: #173640; font: inherit; }
.router-form-grid input[readonly] { background: #eef4f5; color: #71868c; }
.router-form-grid textarea { resize: vertical; }
.router-form-grid small { color: #71888f; font-weight: 500; }
.router-wide { grid-column: 1 / -1; }
.router-form-actions { display: flex; justify-content: flex-end; gap: 9px; flex-wrap: wrap; margin-top: 22px; padding-top: 18px; border-top: 1px solid #dce8ea; }
.router-script-output { width: 100%; box-sizing: border-box; padding: 14px; border: 1px solid #bcd4d9; border-radius: 7px; background: #132d35; color: #dff9f6; font: 13px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; }
.router-step-title { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.router-step-title > span { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: #124375; color: #fff; font-weight: 800; }
.router-step-title h2 { margin: 0 0 4px; color: #173e58; font-size: 20px; }
.router-step-title p { margin: 0; color: #6d8790; }
.router-detail-step { margin-top: 28px; padding-top: 24px; border-top: 1px solid #dce8ea; }
.router-connection-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.router-connection-choices label { display: flex; gap: 12px; align-items: center; padding: 18px; border: 1px solid #c6d9e5; border-radius: 10px; background: #f8fbff; cursor: pointer; }
.router-connection-choices label:has(input:checked) { border-color: #168abc; background: #eaf8fd; box-shadow: inset 0 0 0 1px #168abc; }
.router-connection-choices input { width: auto; min-height: 0; margin: 0; }
.router-connection-choices span { display: grid; gap: 4px; }
.router-connection-choices b { color: #174463; }
.router-connection-choices small { color: #6e8793; }
.router-wg-setup { display: grid; gap: 14px; margin-top: 16px; padding: 20px; border: 1px solid #bfdbe8; border-radius: 10px; background: #f4fbfe; }
.router-wg-setup[hidden], .router-wg-activation[hidden], .router-wg-setup textarea[hidden] { display: none; }
.router-wg-setup label, .router-wg-activation label { display: grid; gap: 7px; color: #37535b; font-weight: 750; }
.router-wg-setup select, .router-wg-setup input { width: 100%; min-height: 45px; box-sizing: border-box; padding: 10px 12px; border: 1px solid #c5d8dc; border-radius: 7px; background: #fff; color: #173640; font: inherit; }
.router-wg-actions, .router-wg-activation { display: flex; align-items: end; gap: 9px; flex-wrap: wrap; }
.router-wg-activation label { flex: 1 1 320px; }
.router-wg-note { margin: 0; color: #607f8b; }
.router-wg-result { min-height: 22px; color: #176d53; font-weight: 700; }
.router-wg-delete { border-color: #e1a7a7; color: #a42f2f; background: #fff8f8; }
.router-wg-delete-note { color: #875a4b; }
.router-wg-order { margin: 0; padding: 10px 12px; border-radius: 7px; background: #e8f4fc; color: #215276; font-size: 13px; line-height: 1.5; }
.router-wg-inline { display: grid; gap: 14px; padding: 18px; border: 1px solid #9bcde2; border-radius: 9px; background: #fff; }
.router-wg-inline[hidden] { display: none; }
.router-wg-inline > div:first-child { display: grid; gap: 4px; }
.router-wg-inline small { color: #607f8b; font-weight: 500; }
.router-wg-inline-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.router-wg-warning { padding: 11px 13px; border: 1px solid #eacb80; border-radius: 7px; background: #fff7df; color: #70530c; font-size: 13px; }
.wireguard-quick-steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.wireguard-quick-steps span { padding: 7px 10px; border-radius: 20px; background: #e8f4fc; color: #19547a; font-size: 12px; font-weight: 700; }
.wireguard-advanced { margin: 16px 0; }
.wireguard-advanced summary { padding: 10px 0; color: #205175; font-weight: 800; cursor: pointer; }

@media (max-width: 760px) {
  .router-editor { padding: 16px; }
  .router-form-grid { grid-template-columns: 1fr; }
  .router-wide { grid-column: auto; }
  .router-form-actions { justify-content: stretch; }
  .router-form-actions .button { flex: 1 1 45%; }
  .router-connection-choices { grid-template-columns: 1fr; }
  .router-wg-inline-grid { grid-template-columns: 1fr; }
}

.router-nas-script { margin: 8px 0 18px; display: grid; gap: 10px; }
.router-nas-script .button { justify-self: start; }