/* /website_onearcys/public/assets-global/css/auth-login.css?v=2.6
   ======================================================================
   ONE ARCYS — AUTH LOGIN (PRO + TECH BG + KEEP JS INTRO)
   - Keeps JS intro animations (DO NOT override mascot transforms)
   - Canvas grid remains enabled (#gridCanvas.bg-grid)
   - Calm premium background with tech chips + spheres (not bright)
   - Enterprise glass form
   - Footer links pinned to bottom (inside .oaLogin)
   - Full responsive rules + reduced motion
   ====================================================================== */

/* ======================================================================
   01) TOKENS
======================================================================== */
:root{
  /* Base background (calm, not harsh black) */
  --bg0:#070A12;
  --bg1:#0A1020;
  --bg2:#0B1630;

  /* Accent / brand (controlled) */
  --neo:#2BC4E3;
  --neo2:#6AA8FF;
  --pink:#FF5BC2;

  /* Text */
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.66);
  --muted2: rgba(255,255,255,0.46);

  /* Card */
  --cardBg1: rgba(18, 24, 38, 0.78);
  --cardBg2: rgba(18, 24, 38, 0.58);
  --cardBorder: rgba(255,255,255,0.12);
  --cardShadow: 0 28px 90px rgba(0,0,0,0.55);

  /* Inputs */
  --inputBg: rgba(255,255,255,0.06);
  --inputBgFocus: rgba(255,255,255,0.07);
  --inputBorder: rgba(255,255,255,0.14);
  --inputBorderFocus: rgba(43,196,227,0.55);
  --focusRing: rgba(43,196,227,0.16);

  /* Buttons */
  --btnBg: rgba(255,255,255,0.06);
  --btnBorder: rgba(255,255,255,0.16);
  --btnText: rgba(255,255,255,0.90);

  --primaryBgTop: rgba(43,196,227,0.98);
  --primaryBgBot: rgba(43,196,227,0.86);
  --primaryBorder: rgba(43,196,227,0.55);
  --primaryText: rgba(4,10,16,0.96);
  --primaryGlow: rgba(43,196,227,0.18);

  /* Misc */
  --err: rgba(255, 120, 160, 0.95);
  --ok: rgba(90,255,190,0.90);

  /* Radius */
  --rCard: 18px;
  --rInput: 12px;
  --rPill: 999px;

  /* Spacing */
  --pad: clamp(14px, 3vw, 52px);
  --gap: clamp(16px, 3vw, 64px);
  --cardW: 520px;

  /* Mascot */
  --mascotDesktop: clamp(280px, 26vw, 440px);
  --mascotTablet:  clamp(240px, 30vw, 360px);
  --mascotMobile:  clamp(220px, 62vw, 300px);

  /* Glove */
  --gloveMax: 360px;

  /* Footer */
  --footerMaxW: 1100px;
  --footerBg: rgba(18, 24, 38, 0.34);
  --footerBorder: rgba(255,255,255,0.10);
}

/* ======================================================================
   02) RESET / BASE
======================================================================== */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--text);
  overflow:hidden; /* desktop/tablet locked */

  /* Calm premium gradient base */
  background:
    radial-gradient(1100px 720px at 76% 26%, rgba(43,196,227,0.14), transparent 60%),
    radial-gradient(950px 720px at 18% 78%, rgba(106,168,255,0.10), transparent 62%),
    radial-gradient(720px 520px at 50% 6%, rgba(255,255,255,0.06), transparent 68%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 55%, var(--bg2));
  background-repeat:no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

/* text rendering */
body, input, button{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ======================================================================
   03) CANVAS GRID (KEEP ENABLED)
   Your JS likely draws into #gridCanvas.bg-grid
======================================================================== */
.bg-grid{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;

  /* subtle, not bright */
  opacity: 0.16;
}

/* ======================================================================
   04) BACKGROUND DECOR (chips + spheres) — CSS overlay
======================================================================== */

/* Chips / traces overlay */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index: 0;

  background:
    /* thin grid */
    linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px),

    /* chip nodes */
    radial-gradient(2px 2px at 14% 22%, rgba(43,196,227,0.18), transparent 60%),
    radial-gradient(2px 2px at 78% 18%, rgba(106,168,255,0.14), transparent 60%),
    radial-gradient(2px 2px at 38% 64%, rgba(255,91,194,0.10), transparent 60%),
    radial-gradient(2px 2px at 64% 76%, rgba(255,255,255,0.08), transparent 60%),

    /* traces */
    linear-gradient(90deg, transparent 0 74%, rgba(43,196,227,0.07) 74% 74.5%, transparent 74.5% 100%),
    linear-gradient(90deg, transparent 0 22%, rgba(106,168,255,0.06) 22% 22.45%, transparent 22.45% 100%),
    linear-gradient(0deg, transparent 0 54%, rgba(255,255,255,0.05) 54% 54.35%, transparent 54.35% 100%);

  background-size:
    140px 140px,
    140px 140px,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%;

  opacity: 0.10;
  box-shadow: inset 0 0 180px rgba(0,0,0,0.55);
}

/* Spheres / blobs overlay */
body::after{
  content:"";
  position: fixed;
  inset: -10%;
  pointer-events:none;
  z-index: 0;

  background:
    radial-gradient(420px 320px at 76% 22%, rgba(43,196,227,0.16), transparent 70%),
    radial-gradient(520px 380px at 22% 78%, rgba(106,168,255,0.13), transparent 72%),
    radial-gradient(360px 280px at 52% 58%, rgba(255,91,194,0.08), transparent 74%),
    radial-gradient(260px 200px at 84% 72%, rgba(255,255,255,0.06), transparent 74%);
  filter: blur(12px);
  opacity: 0.85;
}

/* ======================================================================
   05) ROOT: .oaLogin now contains layout + footer pinned
======================================================================== */
.oaLogin{
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  height: 100dvh;

  padding: var(--pad);
  isolation: isolate;
  z-index: 1;

  /* NEW: column layout so footer can stick to bottom */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* pushes footer to bottom */
  gap: 14px;
}

/* ======================================================================
   06) LAYOUT: card + mascot
======================================================================== */
.oaLayout{
  position: relative;
  z-index: 2;

  width: min(1200px, 100%);
  margin: 0 auto;

  /* take available space above footer */
  flex: 1 1 auto;

  display: grid;
  grid-template-columns: minmax(320px, var(--cardW)) minmax(280px, 1fr);
  column-gap: var(--gap);
  align-items: center;
}

/* ======================================================================
   07) CARD
======================================================================== */
.oaCard{
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: var(--cardW);

  border-radius: var(--rCard);
  background: linear-gradient(180deg, var(--cardBg1), var(--cardBg2));
  border: 1px solid var(--cardBorder);

  box-shadow: var(--cardShadow);
  backdrop-filter: blur(10px);

  padding: 22px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;

  transition: opacity .35s ease, filter .35s ease, transform .35s ease;
}

/* refined highlight */
.oaCard::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events:none;
  background:
    radial-gradient(900px 320px at 50% 0%, rgba(43,196,227,0.12), transparent 62%),
    radial-gradient(820px 260px at 16% 110%, rgba(106,168,255,0.09), transparent 60%);
  opacity: 0.50;
}

/* JS intro support */
.oaCard.oaIntroHide{
  opacity: 0;
  filter: blur(10px);
  transform: translateY(8px);
  pointer-events:none;
}
.oaCard.oaIntroShow{
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  pointer-events:auto;
}

/* ======================================================================
   08) HEADER
======================================================================== */
.oaHeader{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 8px;
}
.oaTitle{
  margin: 6px 0 0;
  font-size: 28px;
  letter-spacing: -0.3px;
  font-weight: 900;
  text-shadow: 0 16px 70px rgba(0,0,0,0.45);
}
.oaSub{
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

/* ======================================================================
   09) FORM FIELDS
======================================================================== */
.oaField{
  display:flex;
  flex-direction:column;
  gap: 6px;
}

.oaLabel{
  font-size: 13px;
  font-weight: 800;
  color: rgba(255,255,255,0.82);
}

.oaInput{
  width: 100%;
  height: 44px;

  border-radius: var(--rInput);
  border: 1px solid var(--inputBorder);
  background: var(--inputBg);

  color: var(--text);
  outline: none;
  padding: 0 14px;
  font-size: 14px;

  transition: box-shadow .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}
.oaInput::placeholder{ color: rgba(255,255,255,0.35); }

.oaInput:focus{
  border-color: var(--inputBorderFocus);
  box-shadow: 0 0 0 4px var(--focusRing);
  background: var(--inputBgFocus);
  transform: translateY(-0.5px);
}

.oaError{
  min-height: 14px;
  font-size: 12px;
  color: var(--err);
  padding-left: 8px;
}

.input-error{
  border-color: rgba(255,120,160,0.85) !important;
  box-shadow: 0 0 0 4px rgba(255,120,160,0.10) !important;
}

/* ======================================================================
   10) PASSWORD WRAP
======================================================================== */
.oaPwWrap{
  position: relative;
  width: 100%;
}
.oaPwWrap .oaInput{
  width: 100%;
  padding-right: 54px;
}
.oaPwToggle{
  position:absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);

  height: 32px;
  width: 42px;
  border-radius: 10px;

  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.86);

  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;

  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.oaPwToggle:hover{
  background: rgba(255,255,255,0.07);
  border-color: rgba(43,196,227,0.28);
  transform: translateY(-50%) scale(1.02);
}

/* ======================================================================
   11) SECURITY NUMBER
======================================================================== */
.oaSecurity{
  margin-top: 6px;
  display:flex;
  flex-direction:column;
  gap: 10px;
  align-items:center;
}

.oaSecurityTop{
  width:100%;
  display:flex;
  justify-content:center;
}

.oaSecurityLabel{
  display:flex;
  align-items:center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.oaInfo{
  height: 22px;
  width: 22px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  cursor:pointer;
  font-weight: 900;
  line-height: 1;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.oaInfo:hover{
  transform: translateY(-1px);
  border-color: rgba(43,196,227,0.35);
  background: rgba(255,255,255,0.06);
}

.oaNums{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
  justify-content:center;
}

.oaNumWrap{ display:inline-flex; align-items:center; justify-content:center; }
.oaNumRadio{ display:none; }

.oaNum{
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.90);

  cursor:pointer;
  font-weight: 900;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  user-select:none;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.oaNum:hover{
  transform: translateY(-1px);
  border-color: rgba(43,196,227,0.22);
  background: rgba(255,255,255,0.05);
}

.oaNumWrap input:checked + .oaNum{
  background: rgba(43,196,227,0.12);
  border-color: rgba(43,196,227,0.45);
  box-shadow: 0 0 0 4px rgba(43,196,227,0.10);
  transform: translateY(-1px);
}

.num-error{
  border-color: rgba(255,120,160,0.85) !important;
  box-shadow: 0 0 0 4px rgba(255,120,160,0.10) !important;
}

/* ======================================================================
   12) ACTIONS + BUTTONS
======================================================================== */
.oaActions{
  display:flex;
  justify-content:center;
  gap: 12px;
  margin-top: 6px;
  flex-wrap:wrap;
}
.oaActionsSingle{ justify-content:center; }

.oaBtn{
  height: 42px;
  min-width: 112px;

  border-radius: 12px;
  border: 1px solid var(--btnBorder);
  background: var(--btnBg);
  color: var(--btnText);

  font-weight: 900;
  cursor:pointer;
  padding: 0 16px;

  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease;
}
.oaBtn:hover{
  background: rgba(255,255,255,0.08);
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.22);
}
.oaBtn:active{ transform: translateY(0); }
.oaBtn:disabled{ opacity: 0.65; cursor: not-allowed; transform:none; }

.oaBtnPrimary{
  border-color: var(--primaryBorder);
  background: linear-gradient(180deg, var(--primaryBgTop), var(--primaryBgBot));
  color: var(--primaryText);
  box-shadow: 0 18px 60px var(--primaryGlow);
}
.oaBtnPrimary:hover{
  box-shadow: 0 22px 70px rgba(43,196,227,0.22);
  filter: saturate(1.02);
}

/* ======================================================================
   13) SERVER MSG CONTAINERS (hidden; JS routes to glove)
======================================================================== */
.oaSrvMsg,
.oaSrvRedirect{ display:none; }

/* ======================================================================
   14) MASCOT PANE + GLOVE
======================================================================== */
.oaMascotPane{
  position:relative;
  width:100%;
  height:100%;
  min-height: 520px;

  display:flex;
  align-items:center;
  justify-content:flex-end;

  overflow: visible;
  z-index: 2;
}

/* calm stage behind mascot */
.oaMascotPane::before{
  content:"";
  position:absolute;
  right: -6%;
  top: 12%;
  width: min(560px, 44vw);
  height: min(560px, 44vw);
  border-radius: 999px;
  background:
    radial-gradient(circle at 40% 40%, rgba(43,196,227,0.14), transparent 65%),
    radial-gradient(circle at 70% 70%, rgba(106,168,255,0.10), transparent 68%);
  filter: blur(12px);
  opacity: 0.95;
  pointer-events:none;
}

/* Mascot
   IMPORTANT: do NOT set a permanent transform here.
   Your JS intro likely animates translateX/translateY via transform.
*/
.oaMascot{
  width: var(--mascotDesktop);
  height:auto;
  display:block;
  opacity: 0.98;
  user-select:none;
  filter: drop-shadow(0 18px 60px rgba(0,0,0,0.55));
}

/* If JS uses intro classes on mascot too */
.oaMascot.oaIntroHide{
  opacity: 0;
  filter: blur(8px) drop-shadow(0 10px 40px rgba(0,0,0,0.45));
}
.oaMascot.oaIntroShow{
  opacity: 1;
  filter: blur(0) drop-shadow(0 18px 60px rgba(0,0,0,0.55));
  transition: opacity .35s ease, filter .35s ease;
}

/* Idle float AFTER card is shown (doesn't fight JS entrance) */
.oaCard.oaIntroShow ~ .oaMascotPane .oaMascot{
  animation: oaIdleFloat 6.5s ease-in-out infinite;
}
@keyframes oaIdleFloat{
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

.oaMascotPane:hover .oaMascot{
  filter: drop-shadow(0 26px 78px rgba(0,0,0,0.62));
}

/* Glove */
.oaGlove{
  position:absolute;
  z-index:3;
  left: clamp(10px, 2.2vw, 28px);
  top: clamp(14px, 6vh, 60px);
  width: min(var(--gloveMax), 46vw);
  pointer-events:none;
}

.oaGlove[data-state="hidden"]{
  opacity:0;
  transform: translateY(8px) scale(0.985);
}

.oaGlove[data-state="show"]{
  opacity:1;
  transform: translateY(0) scale(1);
  transition: opacity .22s ease, transform .22s ease;
}

.oaGloveBubble{
  background: rgba(255,255,255,0.92);
  color: rgba(12,16,26,0.92);
  font-weight: 900;
  font-size: 13px;
  line-height: 1.25;
  padding: 10px 14px;
  border-radius: 16px;
  box-shadow: 0 16px 50px rgba(0,0,0,0.30);

  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;

  max-height: 160px;
  overflow:hidden;
}

.oaGloveTail{
  position:absolute;
  right: 18px;
  bottom: -7px;
  width: 14px;
  height: 14px;
  background: rgba(255,255,255,0.92);
  border-radius: 4px;
  transform: rotate(45deg);
  box-shadow: 0 16px 50px rgba(0,0,0,0.18);
}

/* ======================================================================
   15) FOOTER LINKS (pinned bottom)
======================================================================== */
.oaLinks{
  position: relative;
  z-index: 3;

  width: min(var(--footerMaxW), 100%);
  margin: 0 auto;

  padding: 12px 14px;
  border-radius: 14px;

  background: var(--footerBg);
  border: 1px solid var(--footerBorder);
  backdrop-filter: blur(10px);

  box-shadow: 0 14px 55px rgba(0,0,0,0.35);

  display:flex;
  flex-direction:column;
  gap: 10px;
  align-items:center;
}

.oaLinksRow{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:center;
  text-align:center;
  line-height: 1.35;
}

.oaMuted{
  color: rgba(255,255,255,0.68);
  font-size: 13px;
  font-weight: 700;
}

.oaLink{
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
  border-bottom: 1px solid rgba(255,255,255,0.22);
  padding-bottom: 1px;
  transition: border-color .18s ease, color .18s ease, transform .18s ease;
}
.oaLink:hover{
  color: rgba(255,255,255,0.98);
  border-bottom-color: rgba(43,196,227,0.55);
  transform: translateY(-1px);
}

.oaDotSep{
  color: rgba(255,255,255,0.38);
  font-weight: 800;
}

.oaLinksLegal .oaLink{
  font-weight: 750;
}

/* Link button (used by resend in srv msg -> glove) */
.oaLinkBtn{
  margin-left: 10px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.90);
  border-radius: 12px;
  padding: 6px 10px;
  cursor:pointer;
  font-weight: 900;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.oaLinkBtn:hover{
  transform: translateY(-1px);
  border-color: rgba(43,196,227,0.28);
  background: rgba(255,255,255,0.07);
}

/* ======================================================================
   16) LOADER
======================================================================== */
.oaLoader{ position: fixed; inset: 0; z-index: 9997; }
.oaLoaderBackdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
}
.oaLoaderCard{
  position:absolute; left:50%; top:50%;
  transform: translate(-50%,-50%);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(18,24,38,0.65);
  color: rgba(255,255,255,0.92);
  padding: 14px 16px;
  display:flex; gap:12px; align-items:center;
  box-shadow: 0 22px 80px rgba(0,0,0,0.55);
}
.oaSpinner{
  width:18px; height:18px; border-radius:999px;
  border: 2px solid rgba(255,255,255,0.18);
  border-top-color: rgba(43,196,227,0.95);
  animation: oaSpin .85s linear infinite;
}
@keyframes oaSpin { to { transform: rotate(360deg);} }
.oaLoaderText{ font-size: 13px; color: rgba(255,255,255,0.86); }

/* ======================================================================
   17) RESPONSIVE — TABLET
======================================================================== */
@media (max-width: 1024px){
  body{
    overflow:hidden;
    background-attachment: scroll;
  }

  .bg-grid{ opacity: 0.14; }
  body::before{ opacity: 0.085; background-size: 160px 160px; }
  body::after{ opacity: 0.78; }

  .oaLayout{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    row-gap: 18px;
    align-items: start;
  }

  .oaCard{
    max-width: min(var(--cardW), 92vw);
    width: 100%;
  }

  .oaMascotPane{
    min-height: 340px;
    justify-content:flex-end;
    align-items:flex-end;
  }

  .oaMascot{ width: var(--mascotTablet); }

  .oaGlove{
    left: 12px;
    top: 38px;
    width: min(var(--gloveMax), 70vw);
  }

  .oaGloveBubble{ max-height: 180px; }

  .oaLinks{
    width: min(900px, 100%);
    padding: 10px 12px;
  }
}

/* ======================================================================
   18) RESPONSIVE — MOBILE
======================================================================== */
@media (max-width: 600px){
  html, body{
    height:auto;
    overflow-y:auto;
    -webkit-overflow-scrolling: touch;
  }
  body{
    overflow-x:hidden;
    background-attachment: scroll;
  }

  .bg-grid{ opacity: 0.10; }
  body::before{ background-size: 170px 170px; opacity: 0.07; }
  body::after{ opacity: 0.68; }

  .oaLogin{
    height:auto;
    min-height: 100svh;
    min-height: 100dvh;
    align-items: stretch;
    padding: 14px;
    gap: 12px;
  }

  .oaLayout{
    flex: 0 0 auto; /* let content size itself */
    height:auto;
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    row-gap: 14px;
  }

  .oaCard{
    max-width: 420px;
    width: 100%;
    margin: 0 auto;
    padding: 16px 14px 12px;
    gap: 10px;
  }

  .oaTitle{ font-size: 24px; }
  .oaSub{ font-size: 12px; }

  .oaInput{ font-size:16px; height:42px; } /* iOS zoom prevention */
  .oaPwWrap .oaInput{ padding-right: 52px; }

  .oaMascotPane{
    min-height: 320px;
    justify-content:center;
    align-items:flex-end;
  }
  .oaMascot{ width: var(--mascotMobile); }

  .oaGlove{
    left: 10px;
    top: 12px;
    width: min(320px, 88vw);
  }

  .oaGloveBubble{
    font-size: 12px;
    max-height: 200px;
  }

  .oaLinks{
    width: min(520px, 100%);
    margin: 0 auto;
    padding: 10px 12px;
  }

  .oaLinksRow{ gap: 8px; }
}

/* ======================================================================
   19) SMALLEST PHONES
======================================================================== */
@media (max-width: 360px){
  .oaGlove{ width: min(300px, 92vw); }
  .oaGloveBubble{ font-size: 11.5px; }
}

/* ======================================================================
   20) REDUCED MOTION
======================================================================== */
@media (prefers-reduced-motion: reduce){
  .oaCard.oaIntroShow ~ .oaMascotPane .oaMascot{ animation: none !important; }
  .oaBtn, .oaInput, .oaPwToggle, .oaInfo, .oaNum, .oaLinkBtn, .oaLink{
    transition: none !important;
  }
}

/* ======================================================================
   21) iOS zoom prevention
======================================================================== */
@supports (-webkit-touch-callout: none) {
  input, select, textarea { font-size: 16px !important; }
}

/* ======================================================================
   22) OPTIONAL: small polish for focus-visible (keyboard users)
======================================================================== */
:focus-visible{
  outline: none;
}

/* ======================================================================
   23) OPTIONAL: a11y helpers (safe no-op if unused)
======================================================================== */
[hidden]{ display:none !important; }