/* =========================================================================
   Blue Sky — Cross-page UI quality layer
   -------------------------------------------------------------------------
   Styles the runtime widgets injected by ui-quality.js:
     .ui-skip-link · .ui-quality-live · .ui-connectivity-banner ·
     .ui-error-notice · .ui-image-error
   Class names are contract with that script and must not change. Colors now
   resolve from the `--bss-*` engine so these widgets match the active theme
   instead of shipping their own palette.
   ========================================================================= */

.ui-skip-link {
  position: fixed;
  inset-inline-start: var(--bss-space-md, 16px);
  top: 10px;
  z-index: var(--bss-z-max, 100000);
  transform: translateY(-160%);
  padding: 10px 14px;
  border: 1px solid var(--bss-border-strong, currentColor);
  border-radius: var(--bss-radius-sm, 12px);
  background: var(--bss-surface, Canvas);
  color: var(--bss-text, CanvasText);
  font-weight: var(--bss-weight-black, 800);
  text-decoration: none;
  box-shadow: var(--bss-shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.22));
  transition: transform var(--bss-dur, 220ms) var(--bss-ease, ease);
}

.ui-skip-link:focus {
  transform: translateY(0);
}

.ui-quality-live {
  position: fixed !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.ui-connectivity-banner {
  position: fixed;
  z-index: var(--bss-z-toast, 99998);
  inset-inline: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  margin: auto;
  max-width: 720px;
  padding: 11px 16px;
  border: 1px solid transparent;
  border-radius: var(--bss-radius-md, 14px);
  background: var(--bss-danger, #5b1b24);
  color: var(--bss-danger-contrast, #fff);
  box-shadow: var(--bss-shadow-lg, 0 16px 42px rgba(0, 0, 0, 0.24));
  font-size: var(--bss-text-sm, 0.9rem);
  font-weight: var(--bss-weight-semibold, 600);
  text-align: center;
}

.ui-connectivity-banner.is-online {
  background: var(--bss-success, #126447);
  color: var(--bss-success-contrast, #fff);
}

.ui-error-notice {
  position: fixed;
  z-index: var(--bss-z-toast, 99999);
  inset-inline: 14px;
  bottom: max(14px, env(safe-area-inset-bottom));
  margin: auto;
  max-width: 760px;
  display: flex;
  align-items: center;
  gap: var(--bss-space-sm, 12px);
  padding: 12px 14px;
  border: 1px solid var(--bss-danger-soft, rgba(211, 51, 51, 0.42));
  border-radius: var(--bss-radius-md, 16px);
  background: var(--bss-surface, Canvas);
  color: var(--bss-text, CanvasText);
  box-shadow: var(--bss-shadow-xl, 0 18px 50px rgba(0, 0, 0, 0.26));
}

.ui-error-notice > div {
  display: grid;
  gap: 2px;
  flex: 1;
}

.ui-error-notice b {
  font-size: var(--bss-text-md, 0.94rem);
}

.ui-error-notice span {
  color: var(--bss-text-soft, inherit);
  font-size: var(--bss-text-xs, 0.8rem);
}

.ui-error-notice button {
  min-height: var(--bss-control-sm, 38px);
  padding: 7px 12px;
  border: 1px solid var(--bss-border-strong, rgba(0, 0, 0, 0.22));
  border-radius: var(--bss-radius-xs, 10px);
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: var(--bss-weight-bold, 700);
  cursor: pointer;
  transition:
    background-color var(--bss-dur-fast, 150ms) ease,
    border-color var(--bss-dur-fast, 150ms) ease;
}

.ui-error-notice button:hover {
  background: var(--bss-surface-muted, transparent);
  border-color: var(--bss-primary-muted, currentColor);
}

.ui-error-notice .ui-error-dismiss {
  width: 38px;
  padding: 0;
  font-size: 1.35rem;
  line-height: 1;
}

.ui-image-error {
  opacity: 0.45;
  filter: grayscale(1);
}

html[data-reduce-motion="true"] *,
html[data-reduce-motion="true"] *::before,
html[data-reduce-motion="true"] *::after {
  scroll-behavior: auto !important;
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}

@media (max-width: 640px) {
  .ui-error-notice {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .ui-error-notice > div {
    flex-basis: 100%;
  }

  .ui-error-notice button:not(.ui-error-dismiss) {
    flex: 1;
  }

  .ui-error-notice .ui-error-dismiss {
    position: absolute;
    inset-inline-end: 8px;
    top: 8px;
  }
}

@media print {
  .ui-skip-link,
  .ui-connectivity-banner,
  .ui-error-notice {
    display: none !important;
  }
}

/* =========================================================================
   Blue Sky — Admin polish pass 2026.09
   -------------------------------------------------------------------------
   Final cascade layer for the admin workspace. Keep this stylesheet loaded
   after module styles in panel.html so dense legacy modules inherit one
   responsive component language without changing their business logic.
   ========================================================================= */

/* ---------- Foundation / rendering ---------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body.panel-nova {
  --ui-control-h: 42px;
  --ui-control-h-sm: 34px;
  --ui-card-radius: clamp(16px, 1.25vw, 20px);
  --ui-panel-radius: clamp(18px, 1.6vw, 26px);
  --ui-gap-1: clamp(8px, .75vw, 12px);
  --ui-gap-2: clamp(12px, 1vw, 16px);
  --ui-gap-3: clamp(16px, 1.35vw, 22px);
  --ui-content-max: 1760px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.panel-nova *,
body.panel-nova *::before,
body.panel-nova *::after { box-sizing: border-box; }

body.panel-nova :where(img, svg, video, canvas) { max-width: 100%; }
body.panel-nova :where(button, input, select, textarea) { font: inherit; }
body.panel-nova :where(button, [role="button"], a, input, select, textarea) { -webkit-tap-highlight-color: transparent; }
body.panel-nova :where(button, [role="button"], .btn) { touch-action: manipulation; }
body.panel-nova :where(h1, h2, h3, h4, p, span, small, strong, b, td, th, label) { overflow-wrap: anywhere; }
body.panel-nova :where(.panel-main, .panel-content, .card, .glass, .field, .actions, .table-wrap, .list-row) { min-width: 0; }

/* ---------- Workspace shell ---------- */
body.panel-nova .panel-layout {
  gap: clamp(8px, 1vw, 14px);
  padding:
    max(8px, env(safe-area-inset-top))
    max(8px, env(safe-area-inset-right))
    max(8px, env(safe-area-inset-bottom))
    max(8px, env(safe-area-inset-left));
}

body.panel-nova .panel-main {
  min-width: 0;
  isolation: isolate;
}

body.panel-nova .panel-content {
  width: min(100%, var(--ui-content-max));
  margin-inline: auto;
  padding-inline: clamp(4px, .6vw, 10px);
  padding-bottom: max(36px, env(safe-area-inset-bottom));
  scroll-padding-top: 16px;
  overscroll-behavior: contain;
}

body.panel-nova .sidebar {
  border-radius: var(--ui-panel-radius);
  box-shadow:
    0 18px 54px color-mix(in srgb, #0f172a 12%, transparent),
    inset 0 1px 0 var(--nova-white-line);
}

body.panel-nova .side-nav {
  scrollbar-width: thin;
  overscroll-behavior: contain;
}

body.panel-nova .side-nav button {
  min-height: 44px;
  border-radius: 13px;
  transition:
    transform .16s var(--nova-ease),
    background-color .16s ease,
    color .16s ease,
    border-color .16s ease;
}

body.panel-nova .side-nav button:hover { transform: translateX(-2px); }
body.panel-nova .side-nav button:active { transform: translateX(0) scale(.985); }
body.panel-nova .side-nav button.active {
  box-shadow: inset 0 1px 0 var(--nova-white-line), 0 7px 20px color-mix(in srgb, var(--nova-accent) 10%, transparent);
}

body.panel-nova .side-user,
body.panel-nova .side-system,
body.panel-nova .side-bottom { flex: 0 0 auto; }

body.panel-nova .topbar {
  min-width: 0;
  border-radius: clamp(17px, 1.5vw, 24px);
  box-shadow:
    0 12px 34px color-mix(in srgb, #0f172a 8%, transparent),
    inset 0 1px 0 var(--nova-white-line);
}

body.panel-nova .topbar-titles h1 {
  line-height: 1.35;
  text-wrap: balance;
}

body.panel-nova .top-actions,
body.panel-nova .topbar-context { min-width: 0; }

/* ---------- Surface hierarchy ---------- */
body.panel-nova :where(.card, .glass, .stat) {
  border-color: color-mix(in srgb, var(--nova-line) 88%, transparent);
}

body.panel-nova .card,
body.panel-nova .stat {
  border-radius: var(--ui-card-radius);
}

body.panel-nova .card {
  padding: clamp(14px, 1.3vw, 20px);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, .025),
    0 8px 24px rgba(15, 23, 42, .045),
    inset 0 1px 0 var(--nova-white-line);
}

html[data-theme="dark"] body.panel-nova .card {
  box-shadow:
    0 1px 2px rgba(0,0,0,.18),
    0 10px 28px rgba(0,0,0,.16),
    inset 0 1px 0 var(--nova-white-line);
}

body.panel-nova .card:hover {
  transform: none;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, .035),
    0 12px 30px rgba(15, 23, 42, .065),
    inset 0 1px 0 var(--nova-white-line);
}

body.panel-nova :where(.nav-hub-card, .adash-surface, .adash-kpi, .category-admin-card, .sys-card, .update-card, .product-studio-card, .list-row) {
  transition:
    transform .18s var(--nova-ease),
    box-shadow .18s ease,
    border-color .18s ease,
    background-color .18s ease;
}

@media (hover:hover) and (pointer:fine) {
  body.panel-nova :where(.nav-hub-card, .category-admin-card, .adash-kpi):hover {
    transform: translateY(-2px);
  }
}

body.panel-nova .card-head {
  min-width: 0;
  gap: var(--ui-gap-2);
  margin-bottom: clamp(12px, 1.2vw, 18px);
}

body.panel-nova .card-head > :first-child { min-width: 0; }
body.panel-nova .card-head h3,
body.panel-nova .section-toolbar h2 { text-wrap: balance; }
body.panel-nova .card-head p { max-width: 78ch; }

body.panel-nova :where(.notice, .hint, .empty) {
  border-radius: 14px;
  line-height: 1.85;
}

body.panel-nova .empty {
  min-height: 108px;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
}

/* ---------- Buttons / action bars ---------- */
body.panel-nova .btn {
  min-height: var(--ui-control-h);
  padding-inline: 14px;
  border-radius: 12px;
  gap: 8px;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

body.panel-nova .btn.small { min-height: var(--ui-control-h-sm); }
body.panel-nova .btn.icon {
  inline-size: var(--ui-control-h);
  min-inline-size: var(--ui-control-h);
  block-size: var(--ui-control-h);
}

body.panel-nova .btn.primary {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.18), transparent 46%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--nova-accent) 94%, white 6%),
      color-mix(in srgb, var(--nova-accent-2) 92%, var(--nova-accent) 8%));
}

body.panel-nova .btn:focus-visible,
body.panel-nova :where(.input, .select, .textarea):focus-visible,
body.panel-nova .side-nav button:focus-visible,
body.panel-nova .nav-hub-card:focus-visible {
  outline: 0;
  box-shadow:
    0 0 0 3px var(--nova-panel-solid),
    0 0 0 6px color-mix(in srgb, var(--nova-accent) 40%, transparent);
}

body.panel-nova .btn:disabled,
body.panel-nova .btn[aria-disabled="true"] {
  cursor: not-allowed;
  pointer-events: none;
  opacity: .5;
  transform: none;
  box-shadow: none;
}

body.panel-nova :where(.actions, .modal-actions) {
  min-width: 0;
  gap: 8px;
  flex-wrap: wrap;
}

body.panel-nova .section-toolbar {
  gap: var(--ui-gap-2);
  min-width: 0;
}

body.panel-nova .section-toolbar > :first-child { min-width: 0; }

/* ---------- Forms ---------- */
body.panel-nova .form-grid {
  gap: var(--ui-gap-2);
  align-items: start;
}

body.panel-nova .field {
  min-width: 0;
  align-content: start;
}

body.panel-nova .field label {
  line-height: 1.55;
}

body.panel-nova :where(.input, .select, .textarea) {
  width: 100%;
  min-width: 0;
  min-height: var(--ui-control-h);
  border-radius: 12px;
  transition:
    border-color .16s ease,
    background-color .16s ease,
    box-shadow .16s ease;
}

body.panel-nova :where(.input, .select, .textarea):hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--nova-line-strong) 82%, var(--nova-accent) 18%);
}

body.panel-nova :where(.input, .select, .textarea):disabled,
body.panel-nova :where(.input, .select, .textarea)[readonly] {
  opacity: .72;
  cursor: not-allowed;
  background: color-mix(in srgb, var(--nova-panel-solid) 46%, transparent);
}

body.panel-nova textarea.textarea { resize: vertical; }
body.panel-nova input[type="number"] { font-variant-numeric: tabular-nums; }
body.panel-nova input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
body.panel-nova :where(input[type="checkbox"], input[type="radio"]) { min-width: 18px; min-height: 18px; }

/* ---------- Tables / dense data ---------- */
body.panel-nova .table-wrap {
  position: relative;
  max-width: 100%;
  border-radius: 15px;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--nova-muted) 35%, transparent) transparent;
}

body.panel-nova .table {
  min-width: max(100%, 680px);
  font-variant-numeric: tabular-nums;
}

body.panel-nova .table th {
  position: sticky;
  top: 0;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.panel-nova .table td,
body.panel-nova .table th { line-height: 1.6; }
body.panel-nova .table td { max-width: 420px; }
body.panel-nova .table :where(.actions, .modal-actions) { flex-wrap: nowrap; }

/* ---------- Lists / navigation hubs ---------- */
body.panel-nova .list { gap: 8px; }
body.panel-nova .list-row {
  min-height: 58px;
  border-radius: 14px;
}
body.panel-nova .list-row > * { min-width: 0; }

body.panel-nova .nav-hub-grid {
  gap: clamp(10px, 1vw, 14px);
}

body.panel-nova .nav-hub-card {
  min-width: 0;
  border-radius: 17px;
}

body.panel-nova .nav-hub-card :where(b, span) {
  min-width: 0;
  line-height: 1.65;
}

/* ---------- Modal / command palette / toast ---------- */
body.panel-nova .modal-backdrop,
body.panel-nova .command-backdrop {
  padding:
    max(10px, env(safe-area-inset-top))
    max(10px, env(safe-area-inset-right))
    max(10px, env(safe-area-inset-bottom))
    max(10px, env(safe-area-inset-left));
}

body.panel-nova .modal {
  width: min(720px, 100%);
  max-width: 100%;
  border-radius: clamp(18px, 1.8vw, 26px);
}

body.panel-nova .command-palette {
  width: min(720px, calc(100vw - 20px));
  border-radius: 22px;
}

body.panel-nova .command-results {
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

body.panel-nova .toast-wrap {
  max-width: min(420px, calc(100vw - 20px));
  pointer-events: none;
}
body.panel-nova .toast {
  max-width: 100%;
  pointer-events: auto;
}

/* ---------- Common module grids: resilient auto-collapse ---------- */
body.panel-nova :where(
  .stats,
  .orders-kpis,
  .adash-kpis,
  .sys-observability-kpis,
  .store-toggle-grid,
  .customer-card-grid,
  .customer-address-grid,
  .automation-grid,
  .segment-card-grid,
  .receipt-grid,
  .bank-grid,
  .security-checks,
  .pr-checks
) > * { min-width: 0; }

body.panel-nova :where(.panel-grid, .adash-duo, .customer-360-columns, .access-grid, .sys-field-grid) > * { min-width: 0; }

/* ---------- Mobile / tablet ---------- */
@media (max-width: 1180px) {
  body.panel-nova { --sidebar: 240px; }
  body.panel-nova .card { padding: 16px; }
  body.panel-nova .topbar { gap: 10px; }
}

@media (max-width: 900px) {
  body.panel-nova .panel-layout {
    height: 100dvh;
    padding:
      max(6px, env(safe-area-inset-top))
      max(6px, env(safe-area-inset-right))
      max(6px, env(safe-area-inset-bottom))
      max(6px, env(safe-area-inset-left));
  }

  body.panel-nova .panel-main { height: 100%; }

  body.panel-nova .sidebar {
    top: max(6px, env(safe-area-inset-top));
    right: max(6px, env(safe-area-inset-right));
    bottom: max(6px, env(safe-area-inset-bottom));
    width: min(326px, calc(100vw - 12px));
    border-radius: 22px;
  }

  body.panel-nova .sidebar.open {
    box-shadow:
      var(--nova-shadow-glass),
      0 0 0 100vmax rgba(4, 8, 18, .48);
  }

  body.panel-nova .topbar {
    min-height: 64px;
    padding: 8px 10px;
  }

  body.panel-nova .panel-content {
    width: 100%;
    padding-inline: 2px;
    scrollbar-gutter: auto;
  }

  body.panel-nova :where(.panel-grid, .adash-duo, .customer-360-columns, .access-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.panel-nova .card-head {
    align-items: flex-start;
  }
}

@media (max-width: 780px) {
  body.panel-nova { --ui-control-h: 44px; }

  body.panel-nova .topbar-overline { display: none; }
  body.panel-nova .topbar h1 { font-size: 15px; }
  body.panel-nova #pageSub { max-width: 46vw; font-size: 10px; }

  body.panel-nova :where(.stats, .orders-kpis, .adash-kpis, .sys-observability-kpis) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.panel-nova :where(.form-grid, .sys-field-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.panel-nova .form-grid .wide { grid-column: auto !important; }

  body.panel-nova .section-toolbar,
  body.panel-nova .card-head {
    flex-wrap: wrap;
  }

  body.panel-nova .section-toolbar > .actions,
  body.panel-nova .card-head > .actions {
    width: 100%;
  }

  body.panel-nova .section-toolbar > .actions > :where(.input, .select, .btn),
  body.panel-nova .card-head > .actions > :where(.input, .select, .btn) {
    min-width: 0;
  }

  body.panel-nova .table { min-width: 620px; }
  body.panel-nova .table th,
  body.panel-nova .table td { padding: 10px 11px; }

  body.panel-nova .modal-actions {
    position: sticky;
    bottom: 0;
    margin-inline: -2px;
    padding: 12px 2px max(2px, env(safe-area-inset-bottom));
    background: linear-gradient(to top, var(--nova-panel-solid) 74%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

@media (max-width: 560px) {
  body.panel-nova .panel-layout {
    padding:
      max(4px, env(safe-area-inset-top))
      max(4px, env(safe-area-inset-right))
      max(4px, env(safe-area-inset-bottom))
      max(4px, env(safe-area-inset-left));
  }

  body.panel-nova .panel-main { gap: 5px; }
  body.panel-nova .topbar {
    min-height: 58px;
    border-radius: 15px;
  }

  body.panel-nova .topbar-context { gap: 7px; }
  body.panel-nova .topbar-titles { max-width: calc(100vw - 150px); }
  body.panel-nova #pageSub { display: none; }
  body.panel-nova .refresh-action { display: none; }
  body.panel-nova .mobile-menu { width: 40px; min-width: 40px; height: 40px; }

  body.panel-nova .panel-content { padding-bottom: max(28px, env(safe-area-inset-bottom)); }

  body.panel-nova .card {
    padding: 13px;
    border-radius: 15px;
  }

  body.panel-nova :where(.stats, .orders-kpis, .adash-kpis, .sys-observability-kpis) {
    gap: 8px !important;
  }

  body.panel-nova .stat { min-height: 104px; padding: 13px; }
  body.panel-nova .stat strong { font-size: clamp(17px, 5.2vw, 22px); }

  body.panel-nova .section-toolbar,
  body.panel-nova .card-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  body.panel-nova :where(.section-toolbar, .card-head) > .actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.panel-nova :where(.section-toolbar, .card-head) > .actions > .btn:only-child,
  body.panel-nova :where(.section-toolbar, .card-head) > .actions > :where(.input, .select) {
    grid-column: 1 / -1;
  }

  body.panel-nova :where(.section-toolbar, .card-head) > .actions .btn {
    width: 100%;
    justify-content: center;
  }

  body.panel-nova .modal-backdrop { align-items: flex-end; padding: 4px; }
  body.panel-nova .modal {
    width: 100%;
    max-height: calc(100dvh - 8px);
    border-radius: 22px 22px 12px 12px;
  }

  body.panel-nova .command-backdrop { align-items: flex-start; padding: max(8px, env(safe-area-inset-top)) 6px 6px; }
  body.panel-nova .command-palette {
    width: 100%;
    max-height: calc(100dvh - 16px);
    border-radius: 18px;
  }

  body.panel-nova .toast-wrap {
    right: max(6px, env(safe-area-inset-right));
    left: max(6px, env(safe-area-inset-left));
    bottom: max(6px, env(safe-area-inset-bottom));
    max-width: none;
  }
  body.panel-nova .toast { width: 100%; min-width: 0; }
}

@media (max-width: 390px) {
  body.panel-nova :where(.stats, .orders-kpis, .adash-kpis, .sys-observability-kpis) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.panel-nova :where(.section-toolbar, .card-head) > .actions {
    grid-template-columns: minmax(0, 1fr);
  }

  body.panel-nova .top-actions { gap: 4px; }
  body.panel-nova .theme-slot-panel { display: none; }
}

/* ---------- Coarse pointer ergonomics ---------- */
@media (pointer:coarse) {
  body.panel-nova .btn,
  body.panel-nova .side-nav button,
  body.panel-nova :where(.input, .select) { min-height: 44px; }
  body.panel-nova .btn.small { min-height: 40px; }
  body.panel-nova .btn.icon { inline-size: 44px; block-size: 44px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body.panel-nova :where(.btn, .card, .list-row, .nav-hub-card, .side-nav button) {
    transition: none !important;
    transform: none !important;
  }
}

/* =========================================================================
   Admin login: small quality pass. Safe even when the fuller auth styles live
   in the parent project outside this edit bundle.
   ========================================================================= */
body.login-page {
  min-height: 100dvh;
  min-height: 100svh;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body.login-page .role-login-shell {
  width: min(1080px, calc(100% - 32px));
  margin-inline: auto;
}
body.login-page .role-login-form :where(.input, .btn) { min-height: 44px; }
body.login-page .role-login-form .field { min-width: 0; }
body.login-page .password-wrap { min-width: 0; }
body.login-page .password-wrap .input { padding-inline-end: 74px; }
body.login-page .password-toggle { min-height: 36px; min-width: 62px; }
body.login-page .wide-btn { width: 100%; justify-content: center; }

@media (max-width: 760px) {
  body.login-page { padding: max(12px, env(safe-area-inset-top)) 0 max(12px, env(safe-area-inset-bottom)); }
  body.login-page .role-login-shell { width: min(100% - 20px, 620px); }
  body.login-page .role-login-form { min-height: 0; padding: clamp(18px, 6vw, 30px); }
  body.login-page .role-login-form header h1 { font-size: clamp(24px, 8vw, 34px); }
}