:root {
  --focus-ring: #1769aa;
  --focus-ring-soft: rgba(23, 105, 170, .18);
  --surface-raised: #fff;
}

/* Keep the authentication form centered without allowing the form element to shrink to its content. */
.auth-shell > form { width: min(420px, 100%); }
.auth-panel { width: 100%; max-width: 420px; }
.auth-panel .auth-error { margin-bottom: 16px; }

/* Use one visible keyboard focus treatment across native and custom controls. */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 0;
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 3px var(--focus-ring-soft);
}

.btn { min-height: 38px; line-height: 1.35; }
.btn:disabled { filter: saturate(.7); }

.modal-backdrop,
.drawer-backdrop { overscroll-behavior: contain; }
.modal {
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.modal-head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-raised);
}
.modal-foot {
  position: sticky;
  bottom: 0;
  z-index: 1;
  background: var(--surface-raised);
}
.toast {
  border-left: 4px solid var(--green);
  max-width: min(480px, calc(100vw - 40px));
}

.table-wrap {
  position: relative;
  scrollbar-color: #9aa9a2 #eef2f0;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 900px) {
  .content { max-width: none; }
}

@media (max-width: 520px) {
  /* Keep the page header compact; all sections remain reachable by horizontal scrolling. */
  .nav {
    display: flex;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
  }
  .nav button {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .auth-shell { padding: 16px; }
  .auth-panel { padding: 22px; }
  .modal-backdrop { padding: 8px; }
  .modal { max-height: calc(100vh - 16px); }
  .modal-head, .modal-body, .modal-foot { padding: 13px 14px; }
  .toast {
    right: 8px;
    bottom: 8px;
    max-width: calc(100vw - 16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Dialogs close through explicit controls; the header action stays visible. */
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.modal-head>span{min-width:0;overflow-wrap:anywhere}
.modal-close{flex:0 0 36px;width:36px;height:36px;border:1px solid transparent;border-radius:6px;background:transparent;color:inherit;font-size:24px;line-height:1;padding:0;display:inline-flex;align-items:center;justify-content:center}
.modal-close:hover{background:var(--soft,#edf3ef);border-color:var(--line,#d8e2dc)}
.modal-close:focus-visible{outline:2px solid var(--green,#23834f);outline-offset:2px}
.modal-close:disabled{opacity:.5;cursor:not-allowed}

.hub-node-group{display:flex;align-items:center;gap:3px;flex-wrap:wrap}
.hub-group-switch.btn{padding:1px 6px;min-height:24px;background:#e5f3e9;color:#24663d;border-radius:4px;font-size:inherit}
.hub-group-switch.btn:hover{background:#d1ead9}