/* =====================================================================
   ExitDelay — PRECISION · account flow (auth pages)         v20260928
   ---------------------------------------------------------------------
   signup.php (register + login) · forgot-password.php · reset-password.php
   · verify_otp.php share ONE layout and one set of components:

     ┌ .p-auth-shell (one hairline frame, edges = the nav's edges) ─────┐
     │ .p-auth-card  (form pane)      │ .p-auth-brand (decorative pane) │
     │ head · segmented · fields ·    │ logo hub · orbits · the route   │
     │ primary button · foot          │ gamer → hub → server · ping line│
     └──────────────────────────────────────────────────────────────────┘
   One column ≤900px: the brand pane steps aside, the form pane is a card.

   Load after precision.css (tokens, nav, buttons, inputs, alerts, notes):
     <link rel="stylesheet" href="/assets/css/precision.css?v=20260928">
     <link rel="stylesheet" href="/assets/css/precision-auth.css?v=20260928">
     <script src="/assets/js/precision.js?v=20260928" defer></script>
   <body class="p-page p-auth-page is-signup|is-forgot|is-reset|is-otp">
   <main class="p-auth"><div class="p-auth-shell" data-p-spot="flat">
     <section class="p-auth-card">…</section> <aside class="p-auth-brand" aria-hidden="true">…</aside>
   </div></main>

   New classes are p-auth-* / p-seg / p-otp / p-control / p-captcha. The
   pages' own hook classes are only styled where a page script depends on
   their state: .auth-form.active, .auth-tab.active, .modal(.show),
   #resendBtn:disabled, .auth-card (its inline tilt is neutralised, §3).
   The brand pane is decorative (aria-hidden) and carries no copy.
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. PAGE-LEVEL TOKENS
   --------------------------------------------------------------------- */
.p-auth-page {
  --p-auth-w: 400px;            /* form column width inside the pane */
  --p-auth-h: 480px;            /* expected form height → where the form starts (see §3) */
  --p-auth-frame: clamp(600px, calc(100vh - var(--nav-h) - 40px), 880px);
  --p-auth-r: 24px;             /* frame radius */
  --p-auth-bad-line: rgba(229,133,133,.62);
  /* mask icons for an element whose text a script rewrites (#resendBtn) */
  --p-auth-i-refresh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12a8.5 8.5 0 0 1-15 5.5M3.5 12a8.5 8.5 0 0 1 15-5.5'/%3E%3Cpath d='M18.5 2.5v4h-4M5.5 21.5v-4h4'/%3E%3C/svg%3E");
  --p-auth-i-clock:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E");
}
@supports (height:100dvh) {
  .p-auth-page { --p-auth-frame: clamp(600px, calc(100dvh - var(--nav-h) - 40px), 880px); }
}
/* form heights (head → last element) of each page's default state, measured at 1440 and rounded up a little
   so the form sits a touch above the optical centre */
.p-auth-page.is-signup { --p-auth-h: 690px; }   /* register tab; login is shorter and keeps the same top */
.p-auth-page.is-forgot { --p-auth-h: 440px; }
.p-auth-page.is-reset  { --p-auth-h: 560px; }
.p-auth-page.is-otp    { --p-auth-h: 550px; }
body.p-auth-page { line-height:1.7; }

/* the auth pages carry the landing's bar without its login button (you are on the login page):
   keep the button's slot, with the language pill at its start (where the landing puts the pill),
   so the pill (and signup's seven links) sit exactly where every other page puts them */
@media (min-width:901px) {
  .p-auth-page .ed-nav .nav-auth { min-width:155px; justify-content:flex-start; }
  html[lang="en"] .p-auth-page .ed-nav .nav-auth { min-width:178px; }
}
@media (min-width:769px) and (max-width:900px) {
  .p-auth-page .ed-nav .nav-auth { min-width:144px; justify-content:flex-start; }
  html[lang="en"] .p-auth-page .ed-nav .nav-auth { min-width:167px; }
}

/* ---------------------------------------------------------------------
   1. FRAME — one hairline shell, same side edges as the nav bar
   --------------------------------------------------------------------- */
.p-auth {
  display:flex; flex-direction:column; justify-content:center;
  min-height:100vh; min-height:100dvh;
  padding:calc(var(--nav-h) + 16px) max(24px, calc((100% - 1200px) / 2)) 24px;
}
.p-auth-shell {
  --mx:50%; --my:0%;
  position:relative; isolation:isolate;
  display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); align-items:stretch;
  min-height:var(--p-auth-frame);
  border:1px solid var(--line); border-radius:var(--p-auth-r);
  background:var(--sf-1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 50px 100px -60px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.3);
  transition:box-shadow .4s var(--ease-out);
}
/* spotlight ring under the cursor (precision.js data-p-spot="flat" sets --mx/--my) */
.p-auth-shell::before {
  content:""; position:absolute; inset:-1px; z-index:3; border-radius:inherit; padding:1px; pointer-events:none;
  /* the system card's recipe (.p-card::before) at frame scale: teal near the pointer, a faint white lift
     on the rest of the frame, so an edge 330px+ away (brand pane centre) still answers the hover */
  background:radial-gradient(440px circle at var(--mx) var(--my), rgba(44,234,163,.85), rgba(44,234,163,.16) 45%, rgba(255,255,255,.06) 75%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .45s var(--ease-out);
}
/* ...and a faint teal wash inside the frame (the system card's inner light; <= .045 alpha keeps text contrast) */
.p-auth-shell::after {
  content:""; position:absolute; inset:0; z-index:2; border-radius:inherit; pointer-events:none;
  background:radial-gradient(520px circle at var(--mx) var(--my), rgba(44,234,163,.045), transparent 45%);
  opacity:0; transition:opacity .45s var(--ease-out);
}
@media (hover:hover) and (pointer:fine) {
  .p-auth-shell:hover::before, .p-auth-shell:hover::after { opacity:1; }
  .p-auth-shell:hover { box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 54px 110px -60px rgba(0,0,0,.95), 0 0 0 1px rgba(44,234,163,.05); }
}

/* ---------------------------------------------------------------------
   2. BRAND PANE — decorative, no copy
   --------------------------------------------------------------------- */
.p-auth-brand {
  grid-column:2; grid-row:1;
  position:relative; overflow:hidden; isolation:isolate;
  display:grid; place-items:center; padding:48px 48px 164px;
  border-start-end-radius:calc(var(--p-auth-r) - 1px); border-end-end-radius:calc(var(--p-auth-r) - 1px);
  background:
    radial-gradient(60% 46% at 50% 40%, rgba(32,109,104,.28), transparent 72%),
    radial-gradient(46% 30% at 90% 104%, rgba(255,204,0,.055), transparent 70%),
    radial-gradient(40% 30% at 6% -6%, rgba(44,234,163,.07), transparent 70%),
    linear-gradient(180deg, #071012, #050a0c 72%);
  container-type:size;              /* the pane follows the form's height; the art sizes itself to the pane */
  user-select:none; -webkit-user-select:none;
}
/* fine engineering grid (the hero / CTA texture), strongest around the hub */
.p-auth-brand::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:32px 32px; background-position:center center;
  -webkit-mask-image:radial-gradient(ellipse 56% 48% at 50% 40%, #000 10%, transparent 72%);
          mask-image:radial-gradient(ellipse 56% 48% at 50% 40%, #000 10%, transparent 72%);
}
/* viewfinder corner ticks */
.p-auth-brand::after {
  --t: rgba(255,255,255,.15);
  content:""; position:absolute; inset:20px; pointer-events:none;
  background:
    linear-gradient(var(--t), var(--t)) 0 0 / 14px 1px no-repeat,
    linear-gradient(var(--t), var(--t)) 0 0 / 1px 14px no-repeat,
    linear-gradient(var(--t), var(--t)) 100% 0 / 14px 1px no-repeat,
    linear-gradient(var(--t), var(--t)) 100% 0 / 1px 14px no-repeat,
    linear-gradient(var(--t), var(--t)) 0 100% / 14px 1px no-repeat,
    linear-gradient(var(--t), var(--t)) 0 100% / 1px 14px no-repeat,
    linear-gradient(var(--t), var(--t)) 100% 100% / 14px 1px no-repeat,
    linear-gradient(var(--t), var(--t)) 100% 100% / 1px 14px no-repeat;
}

.p-auth-art { position:relative; width:min(460px, 80%); width:min(500px, 100cqw, calc(100cqh - 8px)); aspect-ratio:1; }
.p-auth-net { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
/* the route runs from the gamer (bottom) to the game server (top), towards the form */
html[dir="ltr"] .p-auth-net { transform:scaleX(-1); }

/* radar sweep inside the middle orbit (r 132 of 440 → inset 20%) */
.p-auth-radar {
  position:absolute; inset:20%; border-radius:50%; pointer-events:none;
  background:conic-gradient(from 0deg, rgba(44,234,163,0) 0deg, rgba(44,234,163,0) 250deg, rgba(44,234,163,.09) 340deg, rgba(44,234,163,.3) 359deg, rgba(44,234,163,0) 360deg);
  -webkit-mask-image:radial-gradient(closest-side, transparent 38%, #000 40%, #000 94%, transparent 100%);
          mask-image:radial-gradient(closest-side, transparent 38%, #000 40%, #000 94%, transparent 100%);
  animation:p-spin 7s linear infinite;
}

/* hub = the landing's logo mark (ring + bob + pulse from precision.css) on a solid disc */
.p-auth-hub.p-hero-mark {
  position:absolute; left:50%; top:50%; z-index:2;
  width:112px; height:112px; margin:-56px 0 0 -56px;
}
.p-auth-hub.p-hero-mark::after {
  content:""; position:absolute; inset:15px; border-radius:50%; z-index:0;
  background:radial-gradient(circle at 50% 35%, #0d1b1e, #060d0f 70%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(44,234,163,.16), 0 18px 40px -12px rgba(0,0,0,.9);
}
.p-auth-hub.p-hero-mark img { width:50px; height:auto; }

/* SVG parts */
.p-auth-net .o      { fill:none; stroke:rgba(255,255,255,.07); stroke-width:1; }
.p-auth-net .o.is-dash { stroke:rgba(44,234,163,.2); stroke-dasharray:2 7; }
.p-auth-net .o.is-far  { stroke:rgba(255,255,255,.04); }
.p-auth-net .lnk    { fill:none; stroke:rgba(255,255,255,.055); stroke-width:1; }
.p-auth-net .dots circle { fill:var(--ink-3); opacity:.5; }
.p-auth-net .dots circle.is-t { fill:var(--teal); opacity:.8; }
.p-auth-net .route  { fill:none; stroke:url(#pAuthRoute); stroke-width:1.6; stroke-linecap:round; }
.p-auth-net .route-glow { fill:none; stroke:url(#pAuthRoute); stroke-width:7; stroke-linecap:round; opacity:.2; filter:url(#pAuthBlur); }
.p-auth-net .pkt    { fill:none; stroke:#e9fff6; stroke-width:2.6; stroke-linecap:round; stroke-dasharray:2.5 97.5; stroke-dashoffset:100; }
.p-auth-net .nd rect { fill:#081315; stroke:rgba(44,234,163,.38); stroke-width:1; }
.p-auth-net .nd.is-b rect { stroke:rgba(255,204,0,.42); }
.p-auth-net .nd .ic { fill:none; stroke:var(--teal); stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }
.p-auth-net .nd.is-b .ic { stroke:var(--gold); }
.p-auth-net .nd .halo { fill:url(#pAuthHaloT); transform-box:fill-box; transform-origin:center; }
.p-auth-net .nd.is-b .halo { fill:url(#pAuthHaloG); }

/* ping line: jittery before the marker, settled after it */
.p-auth-graph {
  position:absolute; inset-inline:56px; bottom:48px; width:calc(100% - 112px); height:auto; overflow:visible;
}
.p-auth-graph .g-grid { fill:none; stroke:rgba(255,255,255,.05); stroke-width:1; stroke-dasharray:2 6; }
.p-auth-graph .g-bad  { fill:none; stroke:var(--ink-3); stroke-width:1.2; stroke-linejoin:round; stroke-linecap:round; opacity:.42; }
.p-auth-graph .g-mark { fill:none; stroke:rgba(44,234,163,.4); stroke-width:1; stroke-dasharray:3 4; }
.p-auth-graph .g-mark-dot { fill:var(--teal); }
.p-auth-graph .g-area { fill:url(#pAuthArea); }
.p-auth-graph .g-good { fill:none; stroke:var(--teal); stroke-width:2; stroke-linecap:round; }
.p-auth-graph .g-dot  { fill:var(--teal); }
.p-auth-graph .g-dot-halo { fill:var(--teal); opacity:.25; transform-box:fill-box; transform-origin:center; }

/* ---------------------------------------------------------------------
   3. FORM PANE — solid surface, teal top light. The form column starts
      at an offset that centres a form of --p-auth-h in the frame, so
      register ↔ login (different heights) never moves the tabs.
   --------------------------------------------------------------------- */
.p-auth-card {
  grid-column:1; grid-row:1;
  position:relative; min-width:0;
  display:flex; flex-direction:column; align-items:center;
  padding:max(48px, calc((var(--p-auth-frame) - var(--p-auth-h)) / 2)) 56px 48px;
  border-inline-end:1px solid var(--line);
  border-start-start-radius:calc(var(--p-auth-r) - 1px); border-end-start-radius:calc(var(--p-auth-r) - 1px);
  background:
    radial-gradient(64% 120px at 50% 0, rgba(44,234,163,.07), transparent),
    linear-gradient(180deg, var(--sf-2), var(--sf-1) 60%);
  text-align:start; color:var(--ink-1);
}
.p-auth-card > * { width:100%; max-width:var(--p-auth-w); }
/* signup.php's own script tilts .auth-card with inline transforms (and writes an inline transition);
   a form pane that moves under the pointer while you type is not Precision — the frame spotlight replaces it */
.p-auth-card.auth-card { transform:none !important; transition:none !important; }
/* the teal top light: always on, opens wider and brighter while a field has focus */
.p-auth-card::before {
  content:""; position:absolute; top:-1px; left:50%; width:56%; height:1px; pointer-events:none;
  translate:-50% 0;
  background:linear-gradient(90deg, transparent, rgba(44,234,163,.55), transparent);
  transition:width .7s var(--ease-out), opacity .45s var(--ease-out);
}
.p-auth-card::after {
  content:""; position:absolute; top:-1px; left:50%; width:30%; height:1px; pointer-events:none;
  translate:-50% 0;
  background:linear-gradient(90deg, transparent, var(--teal-hi), transparent);
  opacity:0; transition:opacity .45s var(--ease-out), width .7s var(--ease-out);
}
.p-auth-card:focus-within::after { opacity:1; width:70%; }

/* head: mark · title · sub */
.p-auth-head { display:flex; flex-direction:column; align-items:center; text-align:center; margin:0 0 28px; }
.p-auth-mark {
  position:relative; display:grid; place-items:center; flex:none;
  width:56px; height:56px; margin:0 0 20px; border-radius:16px;
  border:1px solid var(--line-teal); color:var(--teal);
  background:linear-gradient(180deg, rgba(44,234,163,.12), rgba(44,234,163,.03));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 12px 30px -10px rgba(44,234,163,.35);
}
.p-auth-mark::before {                       /* soft halo */
  content:""; position:absolute; inset:-14px; z-index:-1; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(44,234,163,.16), transparent);
}
.p-auth-mark .p-ico { width:26px; height:26px; stroke-width:1.9; }
.p-auth-mark.is-logo { border-color:var(--line-2); background:linear-gradient(180deg, var(--sf-2), var(--sf-0)); }
.p-auth-mark.is-logo img { display:block; width:34px; height:auto; border-radius:8px; }
.p-auth-title {
  margin:0; color:var(--ink-1);
  font-size:28px; font-weight:800; line-height:1.45; letter-spacing:-.01em; text-wrap:balance;
}
.p-auth-title:lang(en) { letter-spacing:-.022em; line-height:1.3; }
.p-auth-sub { margin:10px 0 0; max-width:44ch; color:var(--ink-2); font-size:14.5px; line-height:1.95; text-wrap:pretty; }
.p-auth-sub strong { color:var(--ink-1); }
/* the address the code went to (verify: its own line; reset: inside the sentence) */
.p-auth-email {
  display:inline-flex; align-items:center; gap:8px; max-width:100%; margin-top:12px;
  padding:5px 14px; border-radius:var(--r-pill); border:1px solid var(--line-2); background:var(--sf-0);
  color:var(--ink-1); font-size:14px; font-weight:600; line-height:1.5;
  direction:ltr; unicode-bidi:isolate; overflow-wrap:anywhere;
}
.p-auth-email::before { content:""; flex:none; width:6px; height:6px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 3px rgba(44,234,163,.16); }
.p-auth-em { color:var(--ink-1); font-weight:700; direction:ltr; unicode-bidi:isolate; overflow-wrap:anywhere; }

/* pane body blocks */
.p-auth-card > .p-alert { margin:0 0 20px; padding:12px 16px; font-size:13.5px; line-height:1.85; }
.p-auth-card > .p-alert > .p-ico { margin-top:.28em; }
.p-auth-card > .p-alert > span { color:var(--ink-1); }
/* a Persian server message on an EN page (or the reverse) keeps its own direction (final period at its end) */
.p-auth-card > .p-alert > span, .p-auth-modal #modalMessage { unicode-bidi:plaintext; }
.p-auth-card > .p-auth-sub.is-lead { margin:-16px 0 24px; max-width:var(--p-auth-w); text-align:center; }
.p-auth-foot {
  display:flex; justify-content:center; margin-top:24px; padding-top:18px;
  border-top:1px solid var(--line);
}

/* ---------------------------------------------------------------------
   4. SEGMENTED CONTROL (register / login) — sliding raised thumb
   --------------------------------------------------------------------- */
.p-seg {
  position:relative; isolation:isolate;
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:4px;
  margin:0 0 28px; padding:4px;
  border:1px solid var(--line); border-radius:13px;
  background:var(--sf-0); box-shadow:inset 0 1px 2px rgba(0,0,0,.4);
}
.p-seg::before {                              /* the thumb (only where :has() can place it) */
  content:""; position:absolute; top:4px; bottom:4px; inset-inline-start:4px; z-index:-1;
  width:calc(50% - 6px); border-radius:9px;
  background:
    linear-gradient(90deg, transparent, rgba(44,234,163,.55), transparent) 50% 0 / 60% 1px no-repeat,
    linear-gradient(180deg, #132226, var(--sf-2));
  border:1px solid var(--line-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 8px 18px -10px rgba(0,0,0,.95);
  display:none;
  transition:transform .5s var(--ease-out);
}
.p-seg .auth-tab {
  position:relative; min-width:0; height:42px; padding:0 10px; margin:0;
  border:1px solid transparent; border-radius:9px; background:transparent;
  color:var(--ink-2); font:600 14px/1.3 var(--font-ui); cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:color .25s, background .25s, border-color .25s;
}
.p-seg .auth-tab:hover { color:var(--ink-1); }
.p-seg .auth-tab.active { color:var(--ink-1); font-weight:700; cursor:default;
  background:linear-gradient(180deg, #132226, var(--sf-2)); border-color:var(--line-2); }
.p-seg .auth-tab:focus-visible { outline-offset:1px; }
@supports selector(:has(*)) {
  .p-seg::before { display:block; }
  .p-seg .auth-tab.active { background:transparent; border-color:transparent; }
  .p-seg:has(#tab-login.active)::before { transform:translateX(calc(-100% - 4px)); }
  html[dir="ltr"] .p-seg:has(#tab-login.active)::before { transform:translateX(calc(100% + 4px)); }
}

/* ---------------------------------------------------------------------
   5. FORMS & FIELDS — label · control (icon slot + input) · states
   --------------------------------------------------------------------- */
.p-auth-forms { display:block; }
.p-auth-form { display:flex; flex-direction:column; gap:18px; container-type:inline-size; }
/* signup: the page script switches .active between the two forms */
.p-auth-forms .auth-form { display:none; }
.p-auth-forms .auth-form.active { display:flex; }
@media (prefers-reduced-motion:no-preference) {
  .p-auth-forms .auth-form.active { animation:p-auth-in .5s var(--ease-out) both; }
}
@keyframes p-auth-in { from { opacity:0; translate:0 8px; } }

.p-auth .p-field { gap:8px; }
.p-auth .p-label { color:var(--ink-2); font-size:13px; font-weight:600; transition:color .2s; }
.p-auth .p-field:focus-within > .p-label { color:var(--ink-1); }
.p-auth .p-hint { margin:0; color:var(--ink-3); font-size:12px; line-height:1.6; }
.p-auth .p-field:focus-within > .p-hint { color:var(--ink-2); }

.p-control { position:relative; display:block; min-width:0; }
.p-control > .p-ico {
  position:absolute; top:50%; inset-inline-start:15px; z-index:1;
  width:18px; height:18px; margin-top:-9px; color:var(--ink-3); pointer-events:none;
  transition:color .2s;
}
.p-control:focus-within > .p-ico { color:var(--teal); }
html:not([dir="ltr"]) .p-control > .p-input { padding-right:46px; padding-left:14px; }
html[dir="ltr"] .p-control > .p-input { padding-left:46px; padding-right:14px; }

.p-auth .p-input { min-height:50px; border-radius:12px; font-size:15px; }
/* the field's teal border + 3px ring is the focus cue: no second (system :focus-visible) outline around it,
   and on :user-invalid the red border + red ring take over. Transparent, not none: forced colours draw it. */
body.p-page .p-auth .p-input:is(:focus, :focus-visible) { outline:2px solid transparent; outline-offset:0; }
/* LTR values on RTL pages (email, Telegram id): the empty field keeps its placeholder by the icon (right);
   a value is left-aligned, so a click in the empty space lands after the text, not before it */
html:not([dir="ltr"]) .p-auth .p-input:is([type="email"], .is-ltr):not(:placeholder-shown) { text-align:left; }
.p-auth .p-input::placeholder { color:var(--ink-3); }
/* invalid only after the person touched the field (or tried to submit) */
.p-auth .p-input:user-invalid { border-color:var(--p-auth-bad-line); }
.p-auth .p-input:user-invalid:focus { box-shadow:0 0 0 3px rgba(229,133,133,.18); }
.p-control:has(> .p-input:user-invalid) > .p-ico { color:var(--bad); }

/* CAPTCHA:  label ···················· ↻ new code
             [digits                 ] [image  ]      (the .captcha-row wrapper is display:contents;
             the reload action sits right above the image it renews) */
.p-field.is-captcha {
  display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"label reload" "input img";
  column-gap:8px; row-gap:8px; align-items:center;
}
.p-field.is-captcha > .p-label { grid-area:label; }
.p-captcha { display:contents; }
.p-captcha .captcha-img {
  grid-area:img; display:block; width:140px; height:50px; max-width:none; object-fit:cover;
  border:1px solid var(--line-2); border-radius:12px; background:#04141a;
  transition:border-color .2s, box-shadow .2s;
}
.p-captcha .captcha-img:hover { border-color:var(--line-teal); box-shadow:0 0 0 3px rgba(44,234,163,.08); }
.p-captcha .captcha-reload {
  grid-area:reload; justify-self:end; align-self:center;
  display:inline-flex; align-items:center; gap:6px;
  position:relative; min-height:30px; padding:0 8px; margin:-6px 0; margin-inline-end:-8px;
  border:0; border-radius:8px; background:transparent;
  color:var(--teal); font:600 12.5px/1 var(--font-ui); white-space:nowrap; cursor:pointer;
  transition:color .2s, background .2s;
}
.p-captcha .captcha-reload::before { content:""; position:absolute; inset:-5px 0; }   /* 40px tap target, same look */
.p-captcha .captcha-reload .p-ico { width:15px; height:15px; stroke-width:2; transition:transform .6s var(--ease-out); }
.p-captcha .captcha-reload:hover { color:var(--teal-hi); background:var(--teal-a06); }
.p-captcha .captcha-reload:hover .p-ico { transform:rotate(180deg); }
.p-captcha .captcha-reload:active .p-ico { transform:rotate(360deg); transition-duration:.35s; }
.p-captcha .p-input {
  grid-area:input; min-width:0; height:50px; padding-block:0; padding-inline:12px; line-height:1.2; text-align:center;
  font-family:var(--font-mono); font-size:19px; font-weight:600; letter-spacing:.32em;
}
.p-captcha .p-input::placeholder { font-family:var(--font-ui); font-size:13px; font-weight:400; letter-spacing:0; }

/* "forgot password?" — end-aligned text link under the fields */
.p-auth-forgot { display:flex; justify-content:flex-end; margin:-14px 0 -10px; }
.p-auth-link {
  display:inline-flex; align-items:center; gap:7px; min-height:40px; padding:4px 2px; border-radius:6px;
  color:var(--teal); font-size:13px; font-weight:600; line-height:1.6; text-decoration:none;
  text-underline-offset:4px; text-decoration-thickness:1px;
  transition:color .2s, text-decoration-color .2s;
}
.p-auth-link .p-ico { width:15px; height:15px; stroke-width:2; transition:transform .6s var(--ease-out); }
.p-auth-link:hover { color:var(--teal-hi); text-decoration-line:underline; text-decoration-color:rgba(92,240,187,.45); }
.p-auth-link:hover .p-ico.is-spin { transform:rotate(180deg); }
/* quiet back link (the system .p-back-link look) */
.p-auth-back {
  display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:4px 6px; border-radius:8px;
  color:var(--ink-2); font-size:13.5px; font-weight:500; line-height:1.4; text-decoration:none;
  transition:color .2s;
}
.p-auth-back .p-ico { width:16px; height:16px; stroke-width:2; transition:transform .35s var(--ease-out); }
.p-auth-back:hover { color:var(--teal); }
html:not([dir="ltr"]) .p-auth-back:hover .p-ico.p-ico-back { transform:scaleX(-1) translateX(-3px); }
html[dir="ltr"] .p-auth-back:hover .p-ico.p-ico-back { transform:translateX(-3px); }

/* ---------------------------------------------------------------------
   6. PRIMARY BUTTON — solid teal (system) + arrow nudge, press, loading
   --------------------------------------------------------------------- */
.p-auth-submit { margin-top:6px; }
.p-auth-submit.p-btn { height:50px; font-size:15.5px; font-weight:700; }
.p-auth-submit .p-ico { width:18px; height:18px; transition:transform .35s var(--ease-out), opacity .2s; }
@media (hover:hover) and (pointer:fine) {
  html:not([dir="ltr"]) .p-auth-submit:hover .p-ico-dir { transform:translateX(-4px); }
  html[dir="ltr"] .p-auth-submit:hover .p-ico-dir { transform:scaleX(-1) translateX(-4px); }
}
.p-auth-submit:active { translate:0 1px; }
.p-auth-submit:focus-visible { outline-offset:4px; }
/* loading state — for a script that sets .is-loading or aria-busy="true" while the request runs */
.p-auth-submit:is(.is-loading, [aria-busy="true"]) { color:transparent !important; pointer-events:none; }
.p-auth-submit:is(.is-loading, [aria-busy="true"]) .p-ico { opacity:0; }
.p-auth-submit:is(.is-loading, [aria-busy="true"])::after {
  content:""; position:absolute; top:50%; left:50%; width:20px; height:20px; margin:-10px 0 0 -10px;
  border-radius:50%; border:2px solid rgba(3,35,26,.25); border-top-color:var(--teal-ink);
  animation:p-spin .7s linear infinite;
}
/* disabled (system: 50% + no pointer) */
.p-auth-submit:is([disabled], [aria-disabled="true"]) { box-shadow:none; }
/* a link that plays the primary button (reset-password success → login) */
a.p-auth-submit { text-decoration:none; }
.p-auth-card > .p-alert + a.p-auth-submit { margin-top:0; }

/* ---------------------------------------------------------------------
   7. VERIFICATION CODE — one input, drawn as six cells
      The digits use a monospace font whose advance (1ch) + letter-spacing
      equals the cell pitch, so every digit lands centred in its cell
      (the placeholder "------" puts one dash in each cell).
      .is-soft (reset-password, text placeholder): a normal field (placeholder
      stays visible on focus) until the first digit, then the cells appear
      at the same height.
   --------------------------------------------------------------------- */
.p-otp {
  --gap:10px;
  --cell:min(60px, calc((100cqw - 5 * var(--gap)) / 6));
  --h:calc(var(--cell) + 6px);
  --pitch:calc(var(--cell) + var(--gap));
  --row:calc(6 * var(--cell) + 5 * var(--gap));
  position:relative; direction:ltr;
  width:var(--row); height:var(--h); margin:2px auto;
  overflow:hidden; overflow:clip; overflow-clip-margin:6px;   /* clips the caret after the 6th digit */
}
.p-otp-cells {
  position:absolute; top:0; bottom:0; left:0; width:var(--row);
  display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); column-gap:var(--gap);
  pointer-events:none;
  transition:opacity .3s var(--ease-out), transform .45s var(--ease-out);
}
.p-otp-cells > i {
  display:block; border-radius:12px; border:1px solid var(--line-2); background:var(--sf-0);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.4);
  transition:border-color .2s, box-shadow .25s, background .25s;
}
.p-otp > input {
  position:absolute; top:0; left:0; z-index:1;
  width:calc(6 * var(--pitch) + (var(--cell) - 1ch) / 2 + 4px); height:100%;
  margin:0; padding:0 0 0 calc((var(--cell) - 1ch) / 2);
  border:0; border-radius:0; outline:0; background:transparent; box-shadow:none;
  color:var(--ink-1); caret-color:var(--teal);
  font-family:var(--font-mono); font-size:calc(var(--cell) * .46); font-weight:600; line-height:1;
  letter-spacing:calc(var(--pitch) - 1ch); text-align:left; direction:ltr;
  -webkit-appearance:none; appearance:none;
}
.p-otp > input::placeholder { color:var(--ink-3); opacity:1; }
/* the cells carry the focus state (teal cells + the active first cell): no rectangle around the wide input.
   A transparent outline stays visible in forced-colors mode. */
body.p-page .p-otp > input:is(:focus, :focus-visible) { outline:2px solid transparent; outline-offset:0; }
.p-otp > input:-webkit-autofill { -webkit-text-fill-color:var(--ink-1); box-shadow:0 0 0 1000px transparent inset; transition:background-color 9999s; }
.p-otp:hover .p-otp-cells > i { border-color:rgba(255,255,255,.18); }
.p-otp:focus-within .p-otp-cells > i { border-color:rgba(44,234,163,.3); }
.p-otp:has(> input:focus:placeholder-shown) .p-otp-cells > i:first-child {
  border-color:var(--teal); background:#081113; box-shadow:0 0 0 3px rgba(44,234,163,.18);
}
.p-otp:has(> input:not(:placeholder-shown)) .p-otp-cells > i { background:#0a1517; border-color:rgba(44,234,163,.24); }
.p-otp:has(> input:focus:not(:placeholder-shown)) .p-otp-cells > i { border-color:var(--teal); }
.p-otp:has(> input:user-invalid) .p-otp-cells > i { border-color:var(--p-auth-bad-line); }
.p-otp > .p-ico { display:none; }

/* soft variant (reset-password) — a normal field (placeholder, icon, focus ring) until the first digit,
   then the cells appear at the same 50px height, filling the form column like the other fields */
.p-otp.is-soft {
  --cell:calc((100cqw - 5 * var(--gap)) / 6); --h:50px;
  width:100%; margin:0;
  overflow:hidden; overflow:clip; overflow-clip-margin:6px;   /* clips the caret after the 6th digit */
}
.p-otp.is-soft > input { font-size:min(24px, calc(var(--cell) * .46)); }   /* 50px-tall cells */
.p-otp.is-soft:has(> input:placeholder-shown) .p-otp-cells { opacity:0; transform:scale(.97); }
.p-otp.is-soft > input:placeholder-shown {
  left:0; width:100%; padding:0 46px 0 14px; direction:rtl; text-align:right;
  border:1px solid var(--line-2); border-radius:12px; background:var(--sf-0);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.35);
  font:400 15px/1.6 var(--font-ui); letter-spacing:normal;
  transition:border-color .2s, background .2s, box-shadow .2s;
}
.p-otp.is-soft > input:placeholder-shown:hover { border-color:rgba(255,255,255,.2); }
/* empty + focused = the system .p-input:focus */
.p-otp.is-soft > input:placeholder-shown:focus { border-color:var(--teal); background:#081113; box-shadow:0 0 0 3px rgba(44,234,163,.18); }
/* invalid only after the person touched the field (or tried to submit), as the other fields */
.p-otp.is-soft > input:placeholder-shown:user-invalid { border-color:var(--p-auth-bad-line); }
.p-otp.is-soft > input:placeholder-shown:user-invalid:focus { box-shadow:0 0 0 3px rgba(229,133,133,.18); }
.p-otp.is-soft > input:placeholder-shown::placeholder { color:var(--ink-3); opacity:1; }
.p-otp.is-soft > .p-ico {
  display:block; position:absolute; z-index:2; top:50%; right:15px; width:18px; height:18px; margin-top:-9px;
  color:var(--ink-3); pointer-events:none; transition:opacity .2s, color .2s;
}
.p-otp.is-soft:has(> input:not(:placeholder-shown)) > .p-ico { opacity:0; }
.p-otp.is-soft:has(> input:placeholder-shown:focus) > .p-ico { color:var(--teal); }
.p-otp.is-soft:has(> input:placeholder-shown:user-invalid) > .p-ico { color:var(--bad); }
html[dir="ltr"] .p-otp.is-soft > input:placeholder-shown { direction:ltr; text-align:left; padding:0 14px 0 46px; }
html[dir="ltr"] .p-otp.is-soft > .p-ico { right:auto; left:15px; }

/* no container-query units (old browsers): size the cells from the viewport instead
   (after the soft variant, whose more specific --cell would otherwise stay invalid) */
@supports not (width:1cqw) {
  .p-otp { --cell:min(52px, calc((100vw - 110px) / 6 - 8px)); }
  .p-otp.is-soft { --cell:min(50px, calc((100vw - 110px) / 6 - 8px)); }
}

/* ---------------------------------------------------------------------
   8. RESEND (verify_otp) — secondary action; the countdown is the
      page script's text, plus a hairline that drains in sync
      (--p-cd = seconds left, --p-cd-from = share of the cooldown left,
       both printed by PHP from the page's own timer values)
   --------------------------------------------------------------------- */
.p-auth-resend { margin:12px 0 0; }
.p-auth-resend .resend-btn.p-btn {
  height:48px; font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
  white-space:nowrap;
}
.p-auth-resend .resend-btn::before {
  content:""; flex:none; width:17px; height:17px; background:currentColor;
  -webkit-mask:var(--p-auth-i-refresh) center / contain no-repeat; mask:var(--p-auth-i-refresh) center / contain no-repeat;
  transition:transform .6s var(--ease-out);
}
.p-auth-resend .resend-btn:not(:disabled):hover::before { transform:rotate(180deg); }
.p-auth-resend .resend-btn:disabled {
  opacity:1; pointer-events:auto; cursor:not-allowed;
  color:var(--ink-3); background:rgba(255,255,255,.012); border-color:var(--line); border-style:dashed;
}
.p-auth-resend .resend-btn:disabled:hover { color:var(--ink-3); background:rgba(255,255,255,.012); border-color:var(--line); }
.p-auth-resend .resend-btn:disabled::before { -webkit-mask-image:var(--p-auth-i-clock); mask-image:var(--p-auth-i-clock); }
.p-auth-resend .resend-btn:disabled::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; pointer-events:none;
  background:linear-gradient(90deg, rgba(44,234,163,.15), rgba(44,234,163,.75));
  transform-origin:right center; transform:scaleX(var(--p-cd-from, 1));
  animation:p-auth-drain var(--p-cd, 0s) linear forwards;
}
html[dir="ltr"] .p-auth-resend .resend-btn:disabled::after {
  transform-origin:left center; background:linear-gradient(270deg, rgba(44,234,163,.15), rgba(44,234,163,.75));
}
@keyframes p-auth-drain { from { transform:scaleX(var(--p-cd-from, 1)); } to { transform:scaleX(0); } }

.p-auth-card > .p-note { margin-top:20px; font-size:12.5px; line-height:1.9; padding:14px 16px; }
.p-auth-card > .p-note > .p-ico { width:17px; height:17px; margin-top:2px; }

/* ---------------------------------------------------------------------
   9. MODAL (signup) — the system panel: backdrop blur, raised surface,
      flowing teal→gold top hairline. The page script sets display:flex
      then .show (and the reverse after 300ms).
   --------------------------------------------------------------------- */
.modal.p-auth-modal {
  display:none; position:fixed; inset:0; z-index:5000;
  align-items:center; justify-content:center; padding:16px;
  background:rgba(1,4,5,.72);
  -webkit-backdrop-filter:blur(12px) saturate(140%); backdrop-filter:blur(12px) saturate(140%);
  opacity:0; transition:opacity .3s ease;
}
.modal.p-auth-modal.show { opacity:1; }
.p-auth-modal .modal-content {
  position:relative; overflow:hidden;
  width:100%; max-width:400px; max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); overflow-y:auto;
  padding:32px 28px 24px; text-align:center;
  background:linear-gradient(180deg, var(--sf-2), var(--sf-1));
  border:1px solid var(--line-2); border-radius:var(--r-lg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 40px 100px -20px rgba(0,0,0,.95);
  transform:scale(.95) translateY(16px); opacity:0;
  transition:transform .45s var(--ease-out), opacity .3s var(--ease-out);
}
.modal.p-auth-modal.show .modal-content { transform:none; opacity:1; }
.p-auth-modal .modal-content::before {
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--teal-glow), var(--gold), var(--teal-glow), transparent);
  background-size:200% 100%; animation:p-hairlineFlow 4s linear infinite; opacity:.8;
}
.p-auth-modal .modal-icon { display:flex; justify-content:center; margin:0 0 18px; }
.p-auth-modal #modalMessage {
  margin:0 0 24px; color:var(--ink-1); font-size:15.5px; font-weight:600; line-height:1.95;
  text-wrap:pretty; overflow-wrap:anywhere;
}
.p-auth-modal .modal-close.p-btn { width:100%; height:46px; }

/* ---------------------------------------------------------------------
   10. OLD LAYERS — kept in the DOM for signup.php's script
       (#bg-canvas is drawn on, the cursor dots are moved), never shown
   --------------------------------------------------------------------- */
.p-auth-page #bg-canvas,
.p-auth-page #cursor-ring,
.p-auth-page #cursor-dot,
.p-auth-page .toggle-btn { display:none !important; }

/* ---------------------------------------------------------------------
   11. MOTION — entrance, brand art (all off under reduced motion)
   --------------------------------------------------------------------- */
@keyframes p-auth-rise  { from { opacity:0; translate:0 18px; } }
@keyframes p-auth-fade  { from { opacity:0; } }
@keyframes p-auth-pkt   { from { stroke-dashoffset:100; } to { stroke-dashoffset:0; } }
@keyframes p-auth-halo  { 0%,100% { transform:scale(.85); opacity:.55; } 50% { transform:scale(1.12); opacity:1; } }
@keyframes p-auth-draw  { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
@keyframes p-auth-twinkle { 0%,100% { opacity:.25; } 50% { opacity:.8; } }

@media (prefers-reduced-motion:no-preference) {
  .p-auth-shell { animation:p-auth-rise .8s var(--ease-out) both; }
  .p-auth-card > * { animation:p-auth-rise .7s var(--ease-out) both; }
  .p-auth-card > :nth-child(2) { animation-delay:.06s; }
  .p-auth-card > :nth-child(3) { animation-delay:.12s; }
  .p-auth-card > :nth-child(n+4) { animation-delay:.18s; }
  .p-auth-art, .p-auth-graph { animation:p-auth-fade 1.1s var(--ease-out) .15s both; }
  .p-auth-net .pkt { animation:p-auth-pkt 3.4s linear infinite; }
  .p-auth-net .pkt.is-late { animation-delay:-1.7s; }
  .p-auth-net .nd .halo { animation:p-auth-halo 3.4s ease-in-out infinite; }
  .p-auth-net .nd.is-b .halo { animation-delay:-1.7s; }
  .p-auth-net .dots circle { animation:p-auth-twinkle 4.5s ease-in-out infinite; }
  .p-auth-net .dots circle:nth-child(3n+1) { animation-delay:-1.5s; }
  .p-auth-net .dots circle:nth-child(3n+2) { animation-delay:-3s; }
  .p-auth-graph :is(.g-bad, .g-good) { stroke-dasharray:1; stroke-dashoffset:1; animation:p-auth-draw 1.5s var(--ease-out) .4s forwards; }
  .p-auth-graph .g-good { animation-delay:1.25s; animation-duration:1.2s; }
  .p-auth-graph :is(.g-area, .g-dot, .g-mark-dot) { animation:p-auth-fade .8s var(--ease-out) 2s both; }
  .p-auth-graph .g-dot-halo { animation:p-auth-fade .8s var(--ease-out) 2s both, p-auth-halo 2.6s ease-in-out 2.8s infinite; }
}

/* ---------------------------------------------------------------------
   12. RESPONSIVE
   --------------------------------------------------------------------- */
@media (max-width:1100px) {
  .p-auth-shell { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
  .p-auth-card { padding-inline:40px; }
  .p-auth-brand { padding:40px 32px 140px; }
  .p-auth-graph { inset-inline:36px; bottom:36px; width:calc(100% - 72px); }
}
/* one column: the brand pane steps aside, the form pane becomes a card */
@media (max-width:900px) {
  .p-auth { justify-content:flex-start; padding:calc(var(--nav-h) + 28px) 16px 48px; }
  .p-auth-shell { grid-template-columns:minmax(0, 1fr); width:100%; max-width:520px; min-height:0; margin-inline:auto; }
  .p-auth-brand { display:none; }
  .p-auth-card { padding:40px 40px 36px; border-inline-end:0; border-radius:calc(var(--p-auth-r) - 1px); }
}
@media (min-width:901px) {
  /* the brand pane already shows the logo: signup's in-card logo only leads on one column */
  .p-auth-page.is-signup .p-auth-head .p-auth-mark.is-logo { display:none; }
}
@media (max-width:520px) {
  .p-auth-page { --p-auth-r: 20px; }
  .p-auth-card { padding:30px 20px 24px; }
  .p-auth-head { margin-bottom:24px; }
  .p-auth-mark { width:52px; height:52px; margin-bottom:16px; border-radius:15px; }
  .p-auth-mark .p-ico { width:24px; height:24px; }
  .p-auth-title { font-size:23px; }
  .p-auth-sub { font-size:14px; }
  .p-seg { margin-bottom:24px; }
  .p-seg .auth-tab { font-size:13.5px; padding:0 6px; }
  .p-auth-form { gap:16px; }
  /* 16px text = no iOS zoom on focus now that pinch-zoom is allowed again */
  .p-auth .p-input, .p-otp.is-soft > input:placeholder-shown { font-size:16px; }
  .p-auth .p-input::placeholder, .p-otp.is-soft > input:placeholder-shown::placeholder { font-size:15px; }
  .p-captcha .captcha-img { width:128px; height:46px; }
  .p-captcha .p-input { min-height:46px; height:46px; font-size:17px; }
  .p-captcha .p-input::placeholder { font-size:12.5px; }
  .p-otp { --gap:8px; }
  .p-auth-modal .modal-content { padding:28px 20px 20px; }
}
/* touch screens of any width (phone landscape is wider than 520px): 16px text = no iOS zoom on focus.
   The captcha input (not in a .p-control) keeps its larger 19px / 17px digits. */
@media (pointer:coarse) {
  .p-auth .p-control > .p-input, .p-otp.is-soft > input:placeholder-shown { font-size:16px; }
  .p-auth .p-control > .p-input::placeholder, .p-otp.is-soft > input:placeholder-shown::placeholder { font-size:15px; }
}
@media (max-width:360px) {
  .p-auth-card { padding:26px 16px 20px; }
  .p-otp { --gap:6px; }
  /* a tab label that does not fit wraps to a second line instead of an ellipsis (both tabs share the row height) */
  .p-seg .auth-tab { white-space:normal; overflow:visible; text-overflow:clip; height:auto; min-height:42px; padding-block:6px; line-height:1.3; }
}
/* very narrow: the captcha image gets its own row, so the digits field (and its placeholder) takes the full width */
@media (max-width:340px) {
  .p-field.is-captcha { grid-template-areas:"label reload" "img img" "input input"; }
  .p-captcha .captcha-img { justify-self:start; }
}
/* short desktop viewports (1366x768, 1024x768): signup's primary button above the fold;
   padding and gaps only, controls keep their heights; the tabs keep one top in register and login */
@media (min-width:901px) and (max-height:820px) {
  .p-auth-page.is-signup .p-auth { justify-content:flex-start; padding-top:calc(var(--nav-h) + 8px); padding-bottom:16px; }
  .p-auth-page.is-signup .p-auth-card { padding-top:28px; padding-bottom:28px; }
  .p-auth-page.is-signup .p-auth-head { margin-bottom:16px; }
  .p-auth-page.is-signup .p-seg { margin-bottom:18px; }
  .p-auth-page.is-signup .p-auth-form { gap:12px; }
  .p-auth-page.is-signup .p-field { gap:6px; }
}

/* signup, a little more compact (2026-09-29): same one-column layout, about 12% shorter */
@media screen {
  .p-auth-page.is-signup { --p-auth-h: 560px; }
  .p-auth-page.is-signup .p-auth-head { margin-bottom:16px; }
  .p-auth-page.is-signup .p-auth-title { font-size:23px; line-height:1.4; }
  .p-auth-page.is-signup .p-seg { margin-bottom:16px; }
  .p-auth-page.is-signup .p-seg .auth-tab { height:38px; font-size:13.5px; }
  .p-auth-page.is-signup .p-auth-form { gap:10px; }
  .p-auth-page.is-signup .p-field { gap:5px; }
  .p-auth-page.is-signup .p-label { font-size:12.5px; }
  .p-auth-page.is-signup .p-input { min-height:42px; }
  .p-auth-page.is-signup .p-captcha .p-input,
  .p-auth-page.is-signup .p-captcha .captcha-img { height:42px; min-height:42px; }
  .p-auth-page.is-signup .p-captcha .captcha-img { width:124px; }
  .p-auth-page.is-signup .p-auth-submit.p-btn { height:44px; margin-top:4px; font-size:15px; }
  .p-auth-page.is-signup .p-hint { font-size:11px; line-height:1.5; }
}
@media screen and (min-width:901px) {
  .p-auth-page.is-signup { --p-auth-frame: clamp(540px, calc(100vh - var(--nav-h) - 36px), 760px); }
  .p-auth-page.is-signup .p-auth-card { padding-top:max(32px, calc((var(--p-auth-frame) - var(--p-auth-h)) / 2)); padding-bottom:28px; }
}

/* ---------------------------------------------------------------------
   13. REDUCED MOTION · FORCED COLOURS · PRINT
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce) {
  .p-auth-radar { display:none; }
  .p-auth-net .pkt { display:none; }
  .p-auth-resend .resend-btn:disabled::after { display:none; }   /* a bar that jumps to empty would mislead */
  .p-auth-shell::before, .p-auth-shell::after, .p-auth-card::before, .p-auth-card::after { transition:none; }
}
@media (forced-colors:active) {
  .p-auth-shell, .p-seg, .p-otp-cells > i, .p-auth-email,
  .p-captcha .captcha-img, .p-auth-modal .modal-content { border:1px solid CanvasText; }
  .p-seg .auth-tab.active { border:2px solid Highlight; }
  .p-seg::before, .p-auth-shell::before, .p-auth-shell::after, .p-auth-card::before, .p-auth-card::after { display:none; }
  .p-seg .auth-tab.active { background:transparent; }
  .p-auth-resend .resend-btn::before { background:ButtonText; }
  .p-otp:has(> input:focus) .p-otp-cells > i { border-color:Highlight; }
}
@media print {
  .p-auth { display:block; padding:0; min-height:0; }
  .p-auth-shell { display:block; min-height:0; border:0; box-shadow:none; background:none; }
  .p-auth-shell::before, .p-auth-shell::after { display:none; }
  .p-auth-brand, .p-auth-modal { display:none !important; }
  .p-auth-card { max-width:none; box-shadow:none; background:#fff; border:1px solid #bbb; }
}