.panel-auth-page { min-height: 100dvh; display: grid; place-items: center; padding: 32px 16px; }
/* Admin sign-in uses the visitor relay's single centered card. */
.panel-auth-card { position: relative; display: block; width: min(100%, 448px); max-width: 448px; min-height: 0; padding: 40px; overflow: hidden; border: 1px solid var(--border); border-radius: 28px; background: var(--surface); box-shadow: 0 24px 60px #0004; }
.panel-auth-brand { display: flex; align-items: center; gap: 10px; margin: 0 0 24px; padding: 0; color: var(--secondary); font-size: 18px; font-weight: 500; line-height: 28px; }
.panel-auth-heading h1 { margin: 0; font-size: 26px; line-height: 34px; font-weight: 400; }
.panel-auth-heading p { margin: 8px 0 0; color: var(--secondary); font-size: 14px; line-height: 20px; }
.panel-auth-form { display: grid; gap: 20px; min-width: 0; margin-top: 28px; }
.panel-form-field { display: grid; gap: 8px; min-width: 0; }
.panel-form-field label { color: var(--secondary); font-size: 13px; line-height: 20px; }
.panel-form-field > input, .panel-password-input { width: 100%; min-width: 0; min-height: 52px; border: 1px solid var(--outline); border-radius: 8px; background: transparent; color: var(--text); }
.panel-form-field > input { padding: 12px 16px; }
.panel-form-field > input:focus { border-color: var(--blue); outline: 2px solid color-mix(in srgb, var(--blue), transparent 60%); outline-offset: 0; }
.panel-form-field input[aria-invalid="true"] { border-color: #f2b8b5; }
.panel-password-input { display: flex; align-items: center; padding-right: 4px; }
.panel-password-input:focus-within { outline: 2px solid var(--blue); outline-offset: 3px; }
.panel-password-input input { width: 100%; min-width: 0; min-height: 50px; padding: 12px 16px; border: 0; background: transparent; color: var(--text); outline: none; }
.panel-password-input .icon-button { flex-shrink: 0; }
.panel-password-input:has(input[aria-invalid="true"]) { border-color: #f2b8b5; }
.panel-password-form { display: grid; gap: 16px; min-width: 0; }
.panel-password-form-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; min-width: 0; }
.panel-current-password { grid-column: 1 / -1; }
.panel-password-form .session-confirm-actions { margin-top: 4px; }
.panel-password-form .session-confirm-delete { min-width: 160px; }
.panel-password-success { margin: 0; color: #81c995; font-size: 13px; line-height: 20px; }
.panel-password-input .icon-button { min-width: 40px; }
.viewer-preview-surface.panel-password-dialog { width: min(480px, calc(100vw - 32px)); }
.panel-password-dialog .panel-password-form-fields { grid-template-columns: minmax(0, 1fr); }
.panel-password-target { margin: 0 0 20px; overflow-wrap: anywhere; color: var(--secondary); font-size: 14px; line-height: 20px; }
.panel-auth-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
.panel-auth-actions .primary-button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 24px; border-radius: var(--radius-pill); }
.panel-form-error { margin: 0; color: #f2b8b5; font-size: 13px; line-height: 20px; overflow-wrap: anywhere; }
.panel-form-hint { margin: -12px 0 0; color: var(--secondary); font-size: 12px; line-height: 18px; }
.primary-button:disabled { opacity: .6; cursor: wait; }
.panel-data-error { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 24px; padding: 16px 20px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); color: var(--secondary); }
.panel-data-error p { margin: 0; line-height: 22px; }
.sidebar-footer { align-items: center; justify-content: space-between; gap: 8px; }
.sidebar-sign-out { min-width: 0; max-width: 100%; padding: 8px 12px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--secondary); font-size: 13px; line-height: 24px; }
.sidebar-sign-out:hover { background: var(--surface-hover); color: var(--text); }
.sidebar-sign-out svg { vertical-align: middle; }
.is-collapsed .sidebar-footer { flex-direction: column; }
.sidebar-action-error { margin: 0 0 8px; color: #f2b8b5; font-size: 12px; line-height: 18px; }
.admin-users-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 24px; }
.admin-users-toolbar .account-search { flex: 1; margin: 0; }
.admin-users-toolbar .primary-button { margin-left: auto; }
.admin-users-table { min-width: 760px; }
.admin-role-column { width: 140px; }
.admin-accounts-column { width: 96px; }
.admin-accounts-cell { font-variant-numeric: tabular-nums; }
.admin-date-column { width: 140px; }
.admin-user-username { max-width: 100%; overflow: hidden; padding: 6px 0; border: 0; background: transparent; color: var(--text); text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.admin-user-username:hover { color: var(--blue); }
.admin-users-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 20px; min-height: 56px; padding: 8px 16px; border-top: 1px solid var(--border); color: var(--secondary); font-size: 12px; font-variant-numeric: tabular-nums; }
.admin-users-pagination > div { display: flex; gap: 4px; }
.admin-users-pagination button:disabled { opacity: .4; }
.viewer-preview-surface.admin-user-details-surface { width: min(720px, calc(100vw - 32px)); padding: 28px; }
.admin-user-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.admin-user-summary h3 { min-width: 0; margin: 0; overflow-wrap: anywhere; font-size: 24px; line-height: 32px; font-weight: 400; }
.admin-user-metadata { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 16px 0 24px; }
.admin-user-metadata dt, .admin-user-metrics dt, .admin-user-domain-details dt { color: var(--secondary); font-size: 12px; line-height: 18px; }
.admin-user-metadata dd, .admin-user-domain-details dd { margin: 4px 0 0; overflow-wrap: anywhere; font-size: 14px; line-height: 20px; }
.admin-user-section-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.admin-user-section-heading h3 { margin: 0; font-size: 16px; line-height: 24px; font-weight: 500; }
.admin-user-period-picker { width: 196px; }
.admin-user-period-picker .dropdown-trigger, .admin-user-domain-picker .dropdown-trigger { min-height: 40px; }
.admin-user-period-picker .dropdown-trigger { font-size: 12px; line-height: 18px; }
.admin-user-date-range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; align-items: end; gap: 12px; margin: 16px 0 12px; }
.admin-user-date-range .panel-form-field > input { min-height: 44px; padding: 10px 12px; font-size: 14px; }
.admin-user-date-range > button { min-height: 44px; }
.admin-user-date-range > button:disabled { opacity: .45; cursor: default; }
.admin-user-period-caption { margin: 0 0 12px; color: var(--secondary); font-size: 12px; line-height: 18px; }
.admin-user-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.admin-user-metrics > div { min-width: 0; padding: 16px 20px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface-header); }
.admin-user-metrics dd { margin: 8px 0 0; font-size: 32px; line-height: 40px; font-weight: 400; font-variant-numeric: tabular-nums; }
.admin-user-domains { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border); }
.admin-user-domain-count { color: var(--secondary); font-size: 13px; font-variant-numeric: tabular-nums; }
.admin-user-domain-picker { display: block; width: 100%; }
.admin-user-domain-picker .dropdown-option > span { min-width: 0; overflow-wrap: anywhere; white-space: normal; }
.admin-user-domain-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 16px 0 0; }
.admin-user-empty { margin: 0; color: var(--secondary); font-size: 14px; line-height: 22px; }
.admin-user-details-error { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.admin-user-details-actions { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.admin-user-security-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.admin-user-delete { margin-right: auto; color: #f2b8b5; }
.admin-user-password-notice { margin-top: 12px; }
.admin-user-toggle { position: relative; width: 160px; max-width: 100%; flex-shrink: 0; transition: transform 120ms var(--ease-out); }
.admin-user-toggle:focus-visible { transition: none; }
.admin-user-toggle:focus-visible:active { transform: none; }
.admin-user-toggle-spinner { position: absolute; top: calc(50% - 7px); left: 12px; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) {
  .admin-user-toggle[data-motion="pointer"] .admin-user-toggle-spinner { animation: admin-user-busy-spin 650ms linear infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .admin-user-toggle, .admin-user-toggle:active { transform: none; transition: none; }
}
@keyframes admin-user-busy-spin { to { transform: rotate(360deg); } }
@media (max-width: 520px) {
  .panel-password-form-fields { grid-template-columns: minmax(0, 1fr); }
  .viewer-preview-surface.admin-user-details-surface { padding: 20px; }
  .admin-user-activity > .admin-user-section-heading { display: grid; }
  .admin-user-period-picker { width: 100%; }
  .admin-user-date-range { grid-template-columns: minmax(0, 1fr); }
  .admin-user-date-range > button { justify-self: end; }
  .admin-user-metrics > div { padding: 12px 16px; }
  .admin-user-domain-details { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .admin-user-domain-details > div { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: baseline; gap: 12px; }
  .admin-user-domain-details dd { margin: 0; }
}
@media (max-width: 480px) {
  .panel-auth-page { padding: 0; place-items: stretch; }
  .panel-auth-card { width: 100%; max-width: 100%; min-height: 100dvh; padding: 32px 24px; border: 0; border-radius: 0; box-shadow: none; }
}
@media (max-width: 390px) {
  .panel-auth-card { padding: 24px; }
  .panel-auth-heading h1 { font-size: 24px; line-height: 32px; }
  .panel-auth-actions .primary-button { max-width: 100%; white-space: normal; }
}