/* ==========================================================================
   Pixel Academy V2 — Authentication (login / register)
   Presentation layer only. Built on the tokens and primitives in
   pixel-v2.css. Arabic-first, true RTL, mobile-first.

   Phase 9C — Light/Dark retrofit.
   Loaded AFTER pixel-v2.css and BEFORE pixel-app-theme.css, exactly like the
   Phase 9A / 9B page stylesheets: this file owns the auth geometry and its own
   small --paa-* token group, pixel-app-theme.css owns the shared --pa-* token
   sets and the shared .pa-appbar header.

   The theme itself is driven by pixel-student-shell.js, which reads and writes
   the single existing "pixelTheme" key and issues no API request. Nothing in
   this file changes a form field, a DOM hook or a request contract.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Scoped reset
   These pages no longer load the legacy Bootstrap stylesheet, so the two
   things the auth layout actually relied on it for — the border-box model and
   the zeroed body box — are declared here. Nothing else of the vendor reset is
   reproduced; pixel-v2.css already normalises headings, paragraphs, links,
   lists and images.
   -------------------------------------------------------------------------- */
body.pa-auth {
  margin: 0;
  padding: 0;
}

body.pa-auth,
body.pa-auth *,
body.pa-auth *::before,
body.pa-auth *::after {
  box-sizing: border-box;
}

/* Fieldsets and legends carry UA defaults that Bootstrap used to flatten. */
body.pa-auth fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

body.pa-auth legend {
  display: block;
  float: none;
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 0;
  white-space: normal;
}

body.pa-auth button,
body.pa-auth input,
body.pa-auth select {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* --------------------------------------------------------------------------
   1. Auth token group
   A deliberately small system layered on top of the shared --pa-* tokens.
   It exists so the page background, the card, the fields and the grouping
   panels can be four visibly different surfaces in the dark theme instead of
   one flat colour — something the shared tokens alone do not express.
   The default branch mirrors pixel-app-theme.css (:root = light) so a page
   rendered before/without the theme script is never a half-dark page.
   -------------------------------------------------------------------------- */
:root,
html[data-theme="light"] {
  /* Page — warm off-white paper with light lavender depth */
  --paa-page-bg: #f8f5f0;
  --paa-page-glow-1: rgba(108, 59, 244, 0.12);
  --paa-page-glow-2: rgba(34, 211, 238, 0.1);

  /* Card — white paper on the warm page */
  --paa-card-bg: #ffffff;
  --paa-card-border: rgba(74, 32, 189, 0.14);
  --paa-card-shadow: 0 18px 44px rgba(37, 22, 92, 0.13);

  /* Grouping panels (register fieldsets, grade step, pending state) */
  --paa-panel-bg: #faf7fe;
  --paa-panel-border: rgba(74, 32, 189, 0.12);

  /* Fields */
  --paa-field-bg: #ffffff;
  --paa-field-bg-focus: #ffffff;
  --paa-field-bg-disabled: #f0ecfa;
  --paa-field-border: rgba(74, 32, 189, 0.3);
  --paa-field-border-hover: rgba(74, 32, 189, 0.48);
  --paa-field-text: #1d1442;
  --paa-field-placeholder: #6d6595;

  /* Ink */
  --paa-heading: #1d1442;
  --paa-legend: #4a20bd;
  --paa-link: #5a2ae0;
  --paa-link-hover: #4a20bd;

  /* Accents used sparingly */
  --paa-rule: rgba(74, 32, 189, 0.13);
  --paa-accent-line: linear-gradient(180deg, #6c3bf4 0%, #22d3ee 100%);
  --paa-submit-shadow: 0 8px 20px rgba(108, 59, 244, 0.24);
  --paa-submit-shadow-hover: 0 10px 26px rgba(108, 59, 244, 0.3);
  --paa-invalid-ring: 0 0 0 3px rgba(200, 19, 64, 0.2);

  /* Native select caret — theme variable, never a hard-coded stroke */
  --paa-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235a2ae0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}

html[data-theme="dark"] {
  /* Page — deep indigo night */
  --paa-page-bg: #08061f;
  --paa-page-glow-1: rgba(124, 77, 255, 0.24);
  --paa-page-glow-2: rgba(34, 211, 238, 0.12);

  /* Card — a clearly separate surface above the page */
  --paa-card-bg: #141032;
  --paa-card-border: rgba(255, 255, 255, 0.14);
  --paa-card-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);

  /* Panels — a third step, lifted with a touch of purple */
  --paa-panel-bg: #1b1544;
  --paa-panel-border: rgba(255, 255, 255, 0.1);

  /* Fields — a fourth, visibly deeper step with a visible edge */
  --paa-field-bg: #241c58;
  --paa-field-bg-focus: #2b2168;
  --paa-field-bg-disabled: #1a1440;
  --paa-field-border: rgba(255, 255, 255, 0.28);
  --paa-field-border-hover: rgba(185, 163, 255, 0.66);
  --paa-field-text: #ffffff;
  --paa-field-placeholder: rgba(255, 255, 255, 0.56);

  /* Ink */
  --paa-heading: #ffffff;
  --paa-legend: #cfbcff;
  --paa-link: #b9a3ff;
  --paa-link-hover: #d7c9ff;

  /* Accents */
  --paa-rule: rgba(255, 255, 255, 0.12);
  --paa-accent-line: linear-gradient(180deg, #7c4dff 0%, #22d3ee 100%);
  --paa-submit-shadow: 0 8px 22px rgba(108, 59, 244, 0.42);
  --paa-submit-shadow-hover: 0 10px 28px rgba(124, 77, 255, 0.5);
  --paa-invalid-ring: 0 0 0 3px rgba(255, 143, 163, 0.3);

  --paa-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23cfc9ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   2. Page shell
   The compact header owns the top Safe Area (pixel-app-theme.css adds
   env(safe-area-inset-top) to .pa-appbar), so the shell below counts only the
   side and bottom insets — the Safe Area is applied exactly once.
   -------------------------------------------------------------------------- */
body.pixel-v2.pa-auth {
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--paa-page-bg);
  background-image:
    radial-gradient(58% 42% at 92% 0%, var(--paa-page-glow-1), transparent 62%),
    radial-gradient(46% 38% at 4% 100%, var(--paa-page-glow-2), transparent 60%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow-x: hidden;
  transition: background-color var(--pa-t-slow) var(--pa-ease),
    color var(--pa-t-slow) var(--pa-ease);
}

/* The focused auth header keeps the shared product-bar geometry. */
body.pa-auth {
  --pa-appbar-max: 1240px;
}

body.pa-auth .pa-auth-shell {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--px-header-total, 60px));
  min-height: calc(100dvh - var(--px-header-total, 60px));
}

body.pa-auth .pa-auth-main {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding:
    var(--pa-space-6)
    calc(var(--pa-space-4) + env(safe-area-inset-right, 0px))
    calc(var(--pa-space-8) + env(safe-area-inset-bottom, 0px))
    calc(var(--pa-space-4) + env(safe-area-inset-left, 0px));
}

/* Skip link — the first focusable control on both pages. */
body.pa-auth .px-skip {
  position: absolute;
  top: -100px;
  inset-inline-start: 16px;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  min-height: var(--pa-touch);
  padding: 12px 18px;
  font-weight: 800;
  color: #fff;
  background: var(--pa-primary);
  border-radius: 0 0 12px 12px;
  transition: top 180ms var(--pa-ease);
}

body.pa-auth .px-skip:focus,
body.pa-auth .px-skip:focus-visible {
  top: 0;
  color: #fff;
}

/* --------------------------------------------------------------------------
   3. Focused auth header
   Everything structural comes from the shared .pa-appbar in
   pixel-app-theme.css. Only the two auth-specific refinements live here.
   -------------------------------------------------------------------------- */
body.pa-auth .pa-auth-appbar {
  position: relative; /* a short auth page never needs a sticky bar */
}

/* Desktop page context stays a static label, never navigation. */
@media (min-width: 992px) {
  body.pixel-v2.pa-auth .pa-appbar__label {
    color: var(--pa-text-2);
  }
}

/* --------------------------------------------------------------------------
   4. Card
   -------------------------------------------------------------------------- */
body.pa-auth .pa-auth-card {
  width: 100%;
  max-width: 26.5rem;
  padding: var(--pa-space-6) var(--pa-space-5)
    calc(var(--pa-space-6) + var(--pa-space-1));
  background: var(--paa-card-bg);
  border: 1px solid var(--paa-card-border);
  border-radius: var(--pa-radius-xl);
  box-shadow: var(--paa-card-shadow);
  transition: background-color var(--pa-t-slow) var(--pa-ease),
    border-color var(--pa-t-slow) var(--pa-ease);
}

body.pa-auth .pa-auth-card--wide {
  max-width: 46rem;
}

/* --------------------------------------------------------------------------
   5. Card header — title and static helper text
   The primary logo now lives once in the shared header, so the card no longer
   repeats it.
   -------------------------------------------------------------------------- */
body.pa-auth .pa-auth-head {
  margin-bottom: var(--pa-space-5);
  text-align: center;
}

body.pa-auth .pa-auth-title {
  margin: 0 0 var(--pa-space-2);
  font-size: var(--pa-fs-2xl);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--paa-heading);
}

body.pa-auth .pa-auth-sub {
  max-width: 34ch;
  margin: 0 auto;
  font-size: var(--pa-fs-md);
  line-height: var(--pa-lh);
  color: var(--pa-text-muted);
}

body.pa-auth .pa-auth-card--wide .pa-auth-sub {
  max-width: 46ch;
}

/* --------------------------------------------------------------------------
   6. Request / error region (#response)
   Class names are written by the page modules and are never changed here.
   Colour is never the only signal: the text, the border and the weight all
   carry the state.
   -------------------------------------------------------------------------- */
body.pa-auth .pa-auth-response {
  margin-bottom: var(--pa-space-4);
  padding: var(--pa-space-3) var(--pa-space-4);
  font-size: var(--pa-fs-md);
  font-weight: 600;
  line-height: var(--pa-lh);
  text-align: start;
  border: 1px solid transparent;
  border-radius: var(--pa-radius);
  overflow-wrap: anywhere;
  word-break: break-word;
}

body.pa-auth .pa-auth-response:empty {
  display: none;
}

body.pa-auth .pa-auth-response--error {
  color: var(--pa-danger);
  background: var(--pa-danger-bg);
  border-color: var(--pa-danger);
}

body.pa-auth .pa-auth-response--success {
  color: var(--pa-success);
  background: var(--pa-success-bg);
  border-color: var(--pa-success);
}

body.pa-auth .pa-auth-response--info {
  color: var(--pa-info);
  background: var(--pa-info-bg);
  border-color: var(--pa-info);
}

/* --------------------------------------------------------------------------
   7. Field groups — the register fieldsets read as separate panels
   -------------------------------------------------------------------------- */
body.pa-auth .pa-auth-group {
  min-width: 0;
  margin: 0 0 var(--pa-space-5);
  padding: var(--pa-space-4) var(--pa-space-4) var(--pa-space-1);
  background: var(--paa-panel-bg);
  border: 1px solid var(--paa-panel-border);
  border-radius: var(--pa-radius-lg);
  transition: background-color var(--pa-t-slow) var(--pa-ease),
    border-color var(--pa-t-slow) var(--pa-ease);
}

body.pa-auth .pa-auth-group:last-of-type {
  margin-bottom: var(--pa-space-4);
}

body.pa-auth .pa-auth-group__title {
  display: flex;
  align-items: center;
  gap: var(--pa-space-2);
  float: none;
  width: auto;
  margin: 0 0 var(--pa-space-3);
  padding: 0;
  font-size: var(--pa-fs-sm);
  font-weight: 800;
  line-height: 1.4;
  color: var(--paa-legend);
}

body.pa-auth .pa-auth-group__title::before {
  content: "";
  flex: 0 0 auto;
  width: 4px;
  height: 16px;
  background: var(--paa-accent-line);
  border-radius: var(--pa-radius-pill);
}

/* Mobile-first: one field per row. Two columns from the tablet breakpoint. */
body.pa-auth .pa-auth-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--pa-space-4);
}

/* --------------------------------------------------------------------------
   8. Fields
   -------------------------------------------------------------------------- */
body.pa-auth .pa-field {
  min-width: 0;
  margin-bottom: var(--pa-space-4);
}

body.pa-auth .pa-label {
  font-size: var(--pa-fs-md);
  font-weight: 700;
  color: var(--pa-text);
}

body.pa-auth .pa-input,
body.pa-auth .pa-select {
  min-height: 48px;
  padding: 11px var(--pa-space-4);
  font-size: var(--pa-fs-md);
  color: var(--paa-field-text);
  background: var(--paa-field-bg);
  border: 1px solid var(--paa-field-border);
  border-radius: var(--pa-radius);
  text-align: start;
  max-width: 100%;
  transition: color var(--pa-t) var(--pa-ease),
    background-color var(--pa-t) var(--pa-ease),
    border-color var(--pa-t) var(--pa-ease),
    box-shadow var(--pa-t) var(--pa-ease);
}

body.pa-auth .pa-input:hover:not(:disabled),
body.pa-auth .pa-select:hover:not(:disabled) {
  border-color: var(--paa-field-border-hover);
}

body.pa-auth .pa-input:focus,
body.pa-auth .pa-select:focus {
  color: var(--paa-field-text);
  background: var(--paa-field-bg-focus);
  border-color: var(--pa-primary);
  box-shadow: var(--pa-focus);
}

body.pa-auth .pa-input::placeholder {
  font-weight: 400;
  color: var(--paa-field-placeholder);
  opacity: 1;
}

/* Native select — RTL-aware caret driven by a theme variable, so the arrow is
   readable in both themes and the control stays a real native select. */
body.pa-auth .pa-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-inline-start: var(--pa-space-4);
  padding-inline-end: var(--pa-space-10);
  background-image: var(--paa-caret);
  background-repeat: no-repeat;
  background-position: left var(--pa-space-4) center;
  background-size: 16px 16px;
  cursor: pointer;
}

/* The native dropdown list is painted by the OS — give it explicit,
   theme-correct colours wherever the platform honours them. */
body.pa-auth .pa-select option,
body.pa-auth .pa-select optgroup {
  color: var(--paa-field-text);
  background-color: var(--paa-field-bg);
}

body.pa-auth .pa-select:disabled,
body.pa-auth .pa-input:disabled {
  color: var(--pa-text-muted);
  background: var(--paa-field-bg-disabled);
  border-color: var(--paa-panel-border);
  opacity: 1;
  cursor: not-allowed;
}

/* Autofill (Chrome and password managers) — the UA paints its own background
   and text colour, which would otherwise fail contrast in the dark theme.
   autocomplete itself is untouched. */
body.pa-auth .pa-input:-webkit-autofill,
body.pa-auth .pa-input:-webkit-autofill:hover,
body.pa-auth .pa-select:-webkit-autofill {
  -webkit-text-fill-color: var(--paa-field-text);
  caret-color: var(--paa-field-text);
  border-color: var(--paa-field-border);
  -webkit-box-shadow: 0 0 0 1000px var(--paa-field-bg) inset;
  box-shadow: 0 0 0 1000px var(--paa-field-bg) inset;
  transition: background-color 100000s ease-in-out 0s;
}

body.pa-auth .pa-input:-webkit-autofill:focus,
body.pa-auth .pa-select:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--paa-field-text);
  border-color: var(--pa-primary);
  -webkit-box-shadow: 0 0 0 1000px var(--paa-field-bg-focus) inset, var(--pa-focus);
  box-shadow: 0 0 0 1000px var(--paa-field-bg-focus) inset, var(--pa-focus);
}

body.pa-auth .pa-input:autofill {
  color: var(--paa-field-text);
}

/* Invalid state — same rules and messages as before, restyled */
body.pa-auth .pa-input.is-invalid,
body.pa-auth .pa-select.is-invalid {
  color: var(--paa-field-text);
  border-color: var(--pa-danger);
  background-color: var(--paa-field-bg-focus);
}

body.pa-auth .pa-input.is-invalid:focus,
body.pa-auth .pa-select.is-invalid:focus {
  border-color: var(--pa-danger);
  box-shadow: var(--paa-invalid-ring);
}

body.pa-auth .invalid-feedback {
  display: none;
  width: 100%;
  margin-top: var(--pa-space-2);
  font-size: var(--pa-fs-sm);
  font-weight: 600;
  line-height: 1.55;
  color: var(--pa-danger);
  overflow-wrap: anywhere;
}

body.pa-auth .is-invalid ~ .invalid-feedback {
  display: block;
}

/* --------------------------------------------------------------------------
   9. Actions
   -------------------------------------------------------------------------- */
body.pa-auth .pa-auth-actions {
  display: flex;
  justify-content: flex-start;
  margin: calc(var(--pa-space-1) * -1) 0 var(--pa-space-4);
}

body.pa-auth .pa-auth-help {
  display: inline-flex;
  align-items: center;
  min-height: var(--pa-touch);
  padding: 0 var(--pa-space-1);
  font-size: var(--pa-fs-md);
  font-weight: 700;
  color: var(--paa-link);
}

body.pa-auth .pa-auth-help:hover,
body.pa-auth .pa-auth-help:focus-visible {
  color: var(--paa-link-hover);
  text-decoration: underline;
}

body.pa-auth .pa-auth-submit {
  min-height: 50px;
  font-size: var(--pa-fs-lg);
  font-weight: 800;
  border-radius: var(--pa-radius);
  box-shadow: var(--paa-submit-shadow);
}

/* Label wrapper — hidden by the shared .is-loading state so the button
   spinner reads clearly without the text shifting. */
body.pa-auth .pa-auth-submit__label {
  display: block;
  line-height: 1.2;
  white-space: nowrap;
}

body.pa-auth .pa-auth-submit:hover:not(:disabled) {
  box-shadow: var(--paa-submit-shadow-hover);
}

body.pa-auth .pa-auth-submit:disabled,
body.pa-auth .pa-auth-submit[aria-busy="true"] {
  box-shadow: none;
}

body.pixel-v2.pa-auth .pa-auth-submit:disabled {
  opacity: 0.62;
}

/* --------------------------------------------------------------------------
   10. Card footer links
   -------------------------------------------------------------------------- */
body.pa-auth .pa-auth-foot {
  margin-top: var(--pa-space-5);
  padding-top: var(--pa-space-4);
  text-align: center;
  border-top: 1px solid var(--paa-rule);
}

body.pa-auth .pa-auth-foot p {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 var(--pa-space-1);
  margin: 0;
  font-size: var(--pa-fs-md);
  color: var(--pa-text-muted);
}

body.pa-auth .pa-auth-foot a {
  display: inline-flex;
  align-items: center;
  min-height: var(--pa-touch);
  padding: 0 var(--pa-space-2);
  font-weight: 800;
  color: var(--paa-link);
}

body.pa-auth .pa-auth-foot a:hover,
body.pa-auth .pa-auth-foot a:focus-visible {
  color: var(--paa-link-hover);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   11. Registration — grade selection step (#gradeForm)
   Hidden until the page script reveals it; jQuery restores block display.
   -------------------------------------------------------------------------- */
body.pa-auth #gradeForm,
body.pa-auth #pendingMessage {
  display: none;
}

body.pa-auth .pa-auth-step {
  margin-bottom: var(--pa-space-2);
  padding: var(--pa-space-5) var(--pa-space-4) var(--pa-space-2);
  background: var(--paa-panel-bg);
  border: 1px solid var(--paa-panel-border);
  border-radius: var(--pa-radius-lg);
  transition: background-color var(--pa-t-slow) var(--pa-ease),
    border-color var(--pa-t-slow) var(--pa-ease);
}

body.pa-auth .pa-auth-step__title {
  margin: 0 0 var(--pa-space-4);
  font-size: var(--pa-fs-xl);
  font-weight: 800;
  text-align: center;
  color: var(--paa-heading);
}

body.pa-auth .pa-auth-step .pa-auth-submit {
  margin-bottom: var(--pa-space-3);
}

/* --------------------------------------------------------------------------
   12. Registration — pending / success state (#pendingMessage)
   The success mark is drawn in CSS, so the state carries no image request.
   -------------------------------------------------------------------------- */
body.pa-auth .pa-auth-pending {
  padding: var(--pa-space-6) var(--pa-space-4) var(--pa-space-4);
  text-align: center;
  background: var(--paa-panel-bg);
  border: 1px solid var(--paa-panel-border);
  border-radius: var(--pa-radius-lg);
  transition: background-color var(--pa-t-slow) var(--pa-ease),
    border-color var(--pa-t-slow) var(--pa-ease);
}

body.pa-auth .pa-auth-pending__mark {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin: 0 auto var(--pa-space-4);
  font-size: 2rem;
  line-height: 1;
  color: var(--pa-success);
  background: var(--pa-success-bg);
  border: 2px solid var(--pa-success);
  border-radius: var(--pa-radius-pill);
}

body.pa-auth .pa-auth-pending__title {
  margin: 0 0 var(--pa-space-5);
  font-size: var(--pa-fs-2xl);
  font-weight: 800;
  color: var(--paa-heading);
}

/* --------------------------------------------------------------------------
   13. Desktop identity panel (login only)
   Intentionally dark in BOTH themes: it is a decorative brand surface, not a
   reading surface, so it uses the fixed indigo scale pixel-app-theme.css
   deliberately never flips, and loads the dark-mode mark only.
   -------------------------------------------------------------------------- */
body.pa-auth .pa-auth-panel {
  display: none;
}

/* --------------------------------------------------------------------------
   14. Breakpoints
   -------------------------------------------------------------------------- */
@media (min-width: 576px) {
  body.pa-auth .pa-auth-card {
    padding: var(--pa-space-8) var(--pa-space-8) calc(var(--pa-space-6) + var(--pa-space-2));
  }

  body.pa-auth .pa-auth-group {
    padding: var(--pa-space-5) var(--pa-space-5) var(--pa-space-1);
  }
}

@media (min-width: 768px) {
  body.pa-auth .pa-auth-main {
    padding-inline: var(--pa-space-8);
  }

  body.pa-auth .pa-auth-card--wide .pa-auth-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.pa-auth .pa-auth-card--wide .pa-auth-grid > .pa-field--full {
    grid-column: 1 / -1;
  }
}

@media (min-width: 992px) {
  body.pa-auth .pa-auth-shell--split {
    flex-direction: row;
    align-items: stretch;
  }

  body.pa-auth .pa-auth-shell--split .pa-auth-main {
    flex: 1 1 56%;
    padding-block: var(--pa-space-10);
  }

  body.pa-auth .pa-auth-shell--split .pa-auth-panel {
    display: flex;
    flex: 1 1 44%;
    align-items: center;
    justify-content: center;
    padding: var(--pa-space-10);
    background-color: var(--pa-indigo-900);
    background-image:
      radial-gradient(52% 44% at 50% 22%, rgba(108, 59, 244, 0.42), transparent 68%),
      radial-gradient(44% 40% at 22% 96%, rgba(34, 211, 238, 0.18), transparent 70%);
    background-repeat: no-repeat;
    pointer-events: none;
  }

  body.pa-auth .pa-auth-panel__logo {
    display: block;
    width: auto;
    height: 58px;
    max-width: 100%;
    object-fit: contain;
  }
}

@media (min-width: 1200px) {
  body.pa-auth .pa-auth-shell--split .pa-auth-panel {
    flex-basis: 46%;
  }

  body.pa-auth .pa-auth-panel__logo {
    height: 66px;
  }
}

/* Short viewports (mobile keyboard open) — keep the submit reachable */
@media (max-height: 660px) {
  body.pa-auth .pa-auth-main {
    align-items: flex-start;
  }

  body.pa-auth .pa-auth-head {
    margin-bottom: var(--pa-space-4);
  }

  body.pa-auth .pa-auth-title {
    font-size: var(--pa-fs-xl);
  }
}