/* ============================================================================
   MeducateED — Auth (login + signup wizard) premium glassmorphism
   Navy #020F24 / #00153d + gold #eca424→#FFDAA4. Animated aurora, gold medical-
   doodle texture, torn-paper hero, glass pill inputs, liquid-wipe step flow.
   ========================================================================== */

:root {
    --a-navy: #020F24;
    --a-navy2: #00153d;
    --a-gold: #eca424;
    --a-gold2: #FFDAA4;
    --a-line: rgba(150,180,240,.18);
    --a-glass: linear-gradient(145deg, rgba(120,150,230,.14), rgba(26,50,108,.20) 55%, rgba(4,18,42,.42));
    --a-ok: #22c55e;
    --a-err: #ef4444;
    --a-font: 'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;
}

/* ------------------------------------------------------------ BACKGROUND
   Elegant + lively aurora: a STILL deep-navy base (no garish panning band),
   three slow drifting orbs (royal blue / gold / deep indigo), a rotating gold
   light-sweep, and a two-layer parallax gold-dot doodle wash. All movement is
   transform-based (GPU-smooth) and slow enough to feel premium. */
.aw-stage {
    position: fixed; inset: 0; overflow-y: auto; overflow-x: hidden;
    font-family: var(--a-font); color: #fff;
    background:
        radial-gradient(130% 110% at 18% -8%, #0a2a5c 0%, #051b3f 42%, #020F24 76%),
        #020F24;
    /* align-items:flex-start + margin:auto on the card centers it when it fits
       yet keeps the top reachable (never clipped) when it's taller than the
       viewport — fixes the cut-off card top border + step dots at any zoom */
    display: flex; align-items: flex-start; justify-content: center;
    padding: 28px 16px;
}
/* parallax gold-dot doodle wash: two layers drifting in opposite directions */
.aw-stage::before {
    content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .38;
    background-image:
        radial-gradient(rgba(236,164,36,.14) 1px, transparent 1.5px),
        radial-gradient(rgba(150,180,240,.10) 1px, transparent 1.4px);
    background-size: 34px 34px, 52px 52px;
    background-position: 0 0, 13px 21px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000, transparent 80%);
    mask-image: radial-gradient(ellipse at center, #000, transparent 80%);
    animation: aw-drift 60s linear infinite;
}
@keyframes aw-drift { to { background-position: 340px 340px, -260px 156px; } }
/* slow rotating gold light-sweep (very low alpha — a living sheen, not a strobe) */
.aw-stage::after {
    content: ""; position: fixed; left: 50%; top: 50%;
    width: 240vmax; height: 240vmax; margin: -120vmax 0 0 -120vmax;
    pointer-events: none;
    background: conic-gradient(from 0deg,
        transparent 0deg, transparent 245deg,
        rgba(236,164,36,.055) 288deg,
        rgba(64,110,220,.075) 316deg,
        transparent 352deg);
    animation: aw-sweep 38s linear infinite;
}
@keyframes aw-sweep { to { transform: rotate(360deg); } }
/* aurora orbs — long, easing, non-repetitive-feeling paths */
.aw-orb { position: fixed; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0; }
.aw-orb.o1 { width: 480px; height: 480px; left: -110px; top: -90px; opacity: .55;
    background: radial-gradient(circle, rgba(40,86,196,.75), transparent 70%);
    animation: aw-float1 34s ease-in-out infinite; }
.aw-orb.o2 { width: 400px; height: 400px; right: -90px; bottom: -70px; opacity: .5;
    background: radial-gradient(circle, rgba(236,164,36,.44), transparent 70%);
    animation: aw-float2 28s ease-in-out infinite; }
.aw-orb.o3 { width: 300px; height: 300px; right: 12%; top: -140px; opacity: .4;
    background: radial-gradient(circle, rgba(84,80,220,.5), transparent 70%);
    animation: aw-float3 44s ease-in-out infinite; }
@keyframes aw-float1 {
    0%, 100% { transform: translate(0,0) scale(1); opacity: .55; }
    33% { transform: translate(70px,50px) scale(1.12); opacity: .65; }
    66% { transform: translate(20px,90px) scale(.95); opacity: .45; }
}
@keyframes aw-float2 {
    0%, 100% { transform: translate(0,0) scale(1); opacity: .5; }
    40% { transform: translate(-60px,-45px) scale(1.15); opacity: .62; }
    75% { transform: translate(-90px,10px) scale(1.02); opacity: .42; }
}
@keyframes aw-float3 {
    0%, 100% { transform: translate(0,0) scale(1); }
    50% { transform: translate(-50px,70px) scale(1.2); }
}

/* ---------------------------------------------------------------- card */
.aw-card {
    position: relative; z-index: 2;
    width: 100%; max-width: 480px;
    margin: auto;                       /* centers + keeps top reachable on overflow */
    border-radius: 26px;
    /* semi-transparent glassmorphism: the animated gradient shows through the blur */
    /* dark enough that text ALWAYS has contrast (the old .30-alpha card let the
       bright aurora wash the text out = the "partially invisible" bug), still
       translucent enough to read as glass over the moving background */
    background: linear-gradient(150deg, rgba(24,46,96,.82), rgba(9,22,50,.86) 55%, rgba(4,14,34,.9));
    -webkit-backdrop-filter: blur(30px) saturate(150%); backdrop-filter: blur(30px) saturate(150%);
    border: 1px solid rgba(160,190,245,.24);
    box-shadow: 0 28px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.18);
    overflow: hidden;
    animation: aw-rise .6s cubic-bezier(.2,.8,.25,1) both;
}

/* visible checkboxes (remember-me / force-login were near-invisible on dark) */
.aw-stage input[type="checkbox"] { accent-color: var(--a-gold); width: 18px; height: 18px; cursor: pointer; vertical-align: middle; }

/* Lottie checkboxes (check.json, branded gold): auth-wipe.js swaps every
   checkbox for one of these — the native input stays for form semantics */
.aw-stage input[type="checkbox"].aw-lchk-native { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
/* sized like a NORMAL checkbox next to 14px text (~18px visual box) */
.aw-lchk { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; cursor: pointer; position: relative; }
.aw-lchk lottie-player, .aw-lchk > div, .aw-lchk svg { width: 100% !important; height: 100% !important; display: block; }
.aw-check.aw-lottie { border: 0; background: transparent; width: 24px; height: 24px; margin-top: 0; }
.aw-check.aw-lottie svg { opacity: 1; }
.aw-remember { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin: 2px 0 16px; }
/* remember-me styled EXACTLY like .aw-label (gold, 14px, 800) — the `font`
   shorthand + !important locks family/size/weight against every theme rule */
.aw-remember label { display: flex; align-items: center; gap: 10px; cursor: pointer;
    color: var(--a-gold) !important; -webkit-text-fill-color: var(--a-gold);
    font: 800 14px/1.3 var(--a-font) !important; }
.aw-remember label span { color: inherit; font: inherit; }
.aw-card.aw-wide { max-width: 560px; }
@keyframes aw-rise { from { opacity: 0; transform: translateY(22px) scale(.98); } }

/* torn-paper hero band (login) */
.aw-hero {
    position: relative; height: 230px;
    background:
        radial-gradient(120% 90% at 70% 20%, rgba(236,164,36,.22), transparent 60%),
        linear-gradient(160deg, #0b2a5e, #061534);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' preserveAspectRatio='none'><path d='M0,0 H100 V78 C86,92 72,72 58,86 C44,99 30,80 16,90 C8,96 4,86 0,92 Z' fill='%23000'/></svg>") no-repeat;
    -webkit-mask-size: 100% 100%;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' preserveAspectRatio='none'><path d='M0,0 H100 V78 C86,92 72,72 58,86 C44,99 30,80 16,90 C8,96 4,86 0,92 Z' fill='%23000'/></svg>") no-repeat;
    mask-size: 100% 100%;
    display: flex; align-items: center; justify-content: center;
    border-bottom: 2px solid rgba(236,164,36,.35);
}
/* lively hero: rotating gold halo + drifting sparkle dots behind a gently
   floating medallion (all masked inside the torn-paper band) */
.aw-hero::before {
    content: ""; position: absolute; left: 50%; top: 50%; width: 340px; height: 340px;
    margin: -170px 0 0 -170px; border-radius: 50%; pointer-events: none;
    background: conic-gradient(from 0deg,
        transparent 0deg, rgba(236,164,36,.16) 40deg, transparent 90deg,
        rgba(64,110,220,.14) 160deg, transparent 210deg,
        rgba(255,218,164,.12) 300deg, transparent 350deg);
    filter: blur(18px);
    animation: aw-halo 18s linear infinite;
}
@keyframes aw-halo { to { transform: rotate(360deg); } }
.aw-hero::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .7;
    background-image:
        radial-gradient(rgba(255,218,164,.5) 1px, transparent 1.6px),
        radial-gradient(rgba(150,180,240,.4) 1px, transparent 1.5px);
    background-size: 46px 46px, 68px 68px;
    background-position: 8px 12px, 30px 40px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse at 50% 45%, #000 30%, transparent 75%);
    animation: aw-sparkdrift 26s linear infinite;
}
@keyframes aw-sparkdrift { to { background-position: 146px -126px, -174px 108px; } }
/* §3.188 — MO, 2026-08-07: *"expand and fill the entire header section, form width
   and high — it has transparent bg so it shows the header bg animation."*
   ⭐ HE IS RIGHT ABOUT THE FILE: `forgot-password.json` has **no `bg` key and no
   solid (`ty:1`) layer** — checked, all eleven layers are shapes. So the dark plate
   the old rule apologised for was never in the art, and every device added to hide
   it (a 300×120 box, a 16px radius, a radial fade mask) was hiding nothing while
   costing two thirds of the band.
   ⚠ It is FULL-BLEED, not stretched: the player keeps `xMidYMid meet`, so the
   386×150 canvas (~2.57:1) fills the width and centres in the taller band rather
   than cropping. Its ink spans 458×134 ACROSS FRAMES — wider than its own canvas
   (§3.145) — so `slice` would cut the plane and the mouse off the ends.
   ⚠ And the bob is gone: a full-bleed layer that translates shows its edges
   leaving the torn-paper band. The motion Mo wants behind it is the hero's own —
   `::before`'s rotating halo and `::after`'s drifting sparkles — which is exactly
   what the transparent art now lets through. */
.aw-hero .aw-heroart {
    position: absolute; inset: 0; z-index: 1;
    display: block; pointer-events: none;
}
.aw-hero .aw-heroart lottie-player {
    width: 100%; height: 100%; display: block;
}

/* the "we emailed you a link" receipt and its key, side by side */
.aw-sentrow { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; }
.aw-sentrow .aw-msg { flex: 1 1 auto; text-align: start; }
.aw-sentart { flex: 0 0 96px; width: 96px; height: 96px; }
.aw-sentart lottie-player { width: 100%; height: 100%; display: block; }

.aw-hero .aw-medallion {
    width: 118px; height: 118px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    position: relative; z-index: 1;
    background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.25), rgba(236,164,36,.14) 60%, rgba(2,15,36,.5));
    border: 2px solid rgba(255,218,164,.55);
    box-shadow: 0 10px 34px rgba(0,0,0,.5), 0 0 34px rgba(236,164,36,.35);
    animation: aw-bob 5.5s ease-in-out infinite;
}
@keyframes aw-bob {
    0%, 100% { transform: translateY(0); box-shadow: 0 10px 34px rgba(0,0,0,.5), 0 0 34px rgba(236,164,36,.35); }
    50% { transform: translateY(-9px); box-shadow: 0 20px 44px rgba(0,0,0,.55), 0 0 44px rgba(236,164,36,.5); }
}
.aw-hero .aw-medallion img { max-width: 76px; max-height: 76px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); }

.aw-body { padding: 30px 32px 34px; }
/* SOLID white title — no gradient-clip / transparent-color / filter tricks
   ever again (filter + background-clip:text rasterized to a gray emboss on
   the live app). Plain, bulletproof, readable. */
.aw-title { font-size: 25px; font-weight: 800; margin: 0 0 4px; letter-spacing: -.3px;
    color: #fff !important; -webkit-text-fill-color: #fff !important;
    background: none !important; filter: none !important;
    text-shadow: 0 2px 12px rgba(2,10,26,.55); }
.aw-sub { font-size: 13.5px; color: rgba(255,255,255,.85) !important; -webkit-text-fill-color: rgba(255,255,255,.85); margin: 0 0 22px; }

/* ------------------------------------------------------------- fields */
.aw-label { display: block; font-size: 14px; font-weight: 800; color: var(--a-gold) !important; margin: 0 0 8px; }
.aw-field { margin-bottom: 18px; }
.aw-note { font-size: 12px; line-height: 1.6; color: rgba(233,240,255,.8) !important; margin: 0 0 8px; }
.aw-note[dir="rtl"] { text-align: right; }

/* ------------------------------------------- TEXT VISIBILITY OVERRIDES
   frontend_style.css (loaded globally in <head>) carries
   `::placeholder { color:#373737 !important }` — dark gray on our navy bg made
   every placeholder invisible. This sheet loads later, so same-importance +
   higher specificity wins. Same treatment for input text + autofill. */
/* faint enough to read as a HINT, never as typed text.
   ⚠ -webkit-text-fill-color MUST be re-declared here: the inputs carry
   text-fill-color:#fff (autofill/theme armour) and it INHERITS into the
   placeholder, painting it solid white regardless of the color value —
   that was the "placeholder looks like typed text" bug. */
.aw-stage ::placeholder { color: rgba(233,240,255,.28) !important; -webkit-text-fill-color: rgba(233,240,255,.28) !important; font-size: 14px !important; font-weight: 400 !important; opacity: 1 !important; }
.aw-stage ::-webkit-input-placeholder { color: rgba(233,240,255,.28) !important; -webkit-text-fill-color: rgba(233,240,255,.28) !important; opacity: 1 !important; }
.aw-stage ::-moz-placeholder { color: rgba(233,240,255,.28) !important; opacity: 1 !important; }
/* bootstrap's dark grays (--bs-gray-800 #343a40 etc.) must never surface as
   text on the navy pages — neutralise the vars + force white on form text */
.aw-stage { --bs-gray-dark: #fff; --bs-gray-800: #fff; --bs-body-color: #fff; --bs-heading-color: #fff; }
.aw-stage select, .aw-stage option, .aw-stage textarea { color: #fff; }
.aw-pill input, .aw-pill select { color: #fff !important; -webkit-text-fill-color: #fff; caret-color: var(--a-gold); }
/* the native date-picker glyph is black by default → invisible on navy */
.aw-pill input[type="date"] { color-scheme: dark; }
/* 🔴 §3.134 — the calendar icon rendered near-black on navy.
   A `filter:` chain over the browser's own glyph is a guess: what it starts as
   differs by Chrome version, so hue-rotating it lands somewhere different each
   release — here it produced a dark brown. Replace the GLYPH instead, with our
   own #eca424 SVG, and the colour is then exact by construction. */
.aw-pill input[type="date"]::-webkit-calendar-picker-indicator {
    filter: none;
    opacity: 1;
    cursor: pointer;
    width: 20px; height: 20px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eca424' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='3'/><path d='M8 3v4M16 3v4M3 10h18'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
}
/* ⚠ The PANEL that opens is browser-native UI and cannot be themed from CSS —
   `color-scheme: dark` (set on the input above) is the only lever, and it just
   makes Chrome draw its own dark variant. A panel in MeducateED's colours needs
   a custom picker component; noted in §3.134 as deliberately not built here. */

.aw-pill {
    display: flex; align-items: center; gap: 8px;
    background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
    border: 1px solid var(--a-line); border-radius: 30px;
    padding: 0 6px 0 18px; height: 54px;
    transition: border-color .18s, box-shadow .18s, background .18s;
}
/* §3.150 — the status animation that lives at the end of a pill (success on a
   verified field, error on a rejected one, a face scan while a username is being
   checked). Sized against the 54px pill rather than the art: every one of these
   files draws its ink inside a square canvas, so a fixed square keeps the three
   states the same size as each other, which is the thing the eye notices. */
.aw-pill .aw-stat {
    flex: 0 0 34px; width: 34px; height: 34px;
    margin-inline-end: 8px; pointer-events: none;
}
.aw-pill .aw-stat[data-state="idle"] { opacity: .55; }
.aw-pill:focus-within { border-color: rgba(236,164,36,.6); box-shadow: 0 0 0 3px rgba(236,164,36,.14); }
.aw-pill.is-ok { border-color: rgba(34,197,94,.55); }
.aw-pill.is-err { border-color: rgba(239,68,68,.6); }
.aw-pill input, .aw-pill select {
    flex: 1 1 auto; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent;
    color: #fff; font-size: 15px; font-family: var(--a-font);
}
/* (pill placeholder color governed by the .aw-stage ::placeholder overrides) */
.aw-pill input:-webkit-autofill { -webkit-text-fill-color: #fff; transition: background-color 9999s; }
.aw-pill select { cursor: pointer; -webkit-appearance: none; appearance: none; padding-right: 8px; }
.aw-pill select option { background: #06122c; color: #fff; }
.aw-pill.aw-select::after { content: ""; width: 10px; height: 10px; margin-right: 12px; border-right: 2px solid var(--a-gold); border-bottom: 2px solid var(--a-gold); transform: rotate(45deg) translateY(-2px); pointer-events: none; }
.aw-cc { display: flex; align-items: center; gap: 4px; padding-right: 10px; margin-right: 4px; border-right: 1px solid var(--a-line); color: #fff; font-weight: 700; font-size: 14px; }
.aw-cc img { width: 22px; height: 15px; border-radius: 2px; }

/* custom flag dropdown (nationality) — img flags so it works on Windows too */
.aw-dd { position: relative; }
.aw-dd-toggle { width: 100%; height: 54px; display: flex; align-items: center; gap: 10px; padding: 0 16px;
    border-radius: 30px; border: 1px solid var(--a-line);
    background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
    color: #fff; font-size: 15px; cursor: pointer; font-family: var(--a-font); }
.aw-dd-toggle:focus { outline: none; border-color: rgba(236,164,36,.6); box-shadow: 0 0 0 3px rgba(236,164,36,.14); }
.aw-dd-flag { width: 26px; height: 18px; border-radius: 3px; object-fit: cover; flex: 0 0 auto; }
.aw-dd-label { flex: 1 1 auto; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aw-dd-caret { width: 9px; height: 9px; border-right: 2px solid var(--a-gold); border-bottom: 2px solid var(--a-gold); transform: rotate(45deg) translateY(-2px); flex: 0 0 auto; margin-right: 4px; transition: transform .18s; }
.aw-dd.open .aw-dd-caret { transform: rotate(-135deg); }
.aw-dd-menu { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 20; display: none; flex-direction: column; max-height: 320px;
    background: linear-gradient(160deg, rgba(20,44,96,.98), rgba(6,18,42,.99)); border: 1px solid var(--a-line); border-radius: 16px; overflow: hidden; box-shadow: 0 22px 50px rgba(0,0,0,.55); }
.aw-dd.open .aw-dd-menu { display: flex; }
.aw-dd-search { margin: 10px 10px 6px; height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--a-line); background: rgba(0,0,0,.3); color: #fff; font-size: 14px; font-family: var(--a-font); }
.aw-dd-search:focus { outline: none; border-color: rgba(236,164,36,.6); }
.aw-dd-list { overflow-y: auto; padding: 2px 6px 8px; }
.aw-dd-opt { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 0; background: transparent; color: #e6edfb; font-size: 14px; cursor: pointer; border-radius: 10px; text-align: left; font-family: var(--a-font); }
.aw-dd-opt:hover, .aw-dd-opt.active { background: rgba(236,164,36,.16); color: #fff; }
.aw-dd-opt img { width: 24px; height: 16px; border-radius: 3px; object-fit: cover; flex: 0 0 auto; }
.aw-dd-opt[hidden] { display: none; }
.aw-dd-list::-webkit-scrollbar { width: 8px; }
.aw-dd-list::-webkit-scrollbar-thumb { background: rgba(140,170,235,.3); border-radius: 20px; }

.aw-msg { font-size: 11.5px; margin: 6px 4px 0; min-height: 14px; }
.aw-msg.ok { color: var(--a-ok); }
.aw-msg.err { color: #ffb4b4; }
.aw-signin-link { color: var(--a-gold2); font-weight: 800; text-decoration: underline; cursor: pointer; }

/* password eye + checklist */
.aw-eye { background: none; border: 0; color: rgba(255,255,255,.6); cursor: pointer; padding: 8px 12px; }
.aw-eye:hover { color: #fff; }
.aw-pwlist { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; margin: 10px 4px 0; }
.aw-pwlist li { list-style: none; font-size: 11.5px; color: rgba(255,255,255,.72); display: flex; align-items: center; gap: 6px; transition: color .15s; }
.aw-pwlist li::before { content: "○"; font-size: 12px; }
.aw-pwlist li.ok { color: var(--a-ok); }
.aw-pwlist li.ok::before { content: "✓"; }

/* §3.150 — the "we sent you a code" line and its animation, side by side.
   ⚠ `align-items: center` on the ROW, not a margin on the art: the message is
   one or two lines depending on the server's wording, and a fixed offset puts
   the animation level with the first line in one case and nothing in the other. */
/* ⭐ §3.155 — BASELINE, NOT CENTRE. Mo: "align the lower border of the first
   frame … on the same lower border of the text". The art box is already the
   height of the ink and the ink's bottom already sits on the box's bottom
   (measured: `email-sent` frame 0 ends at 85.2% of its canvas, exactly where the
   union ends) — so the only thing putting the envelope below the line was
   `align-items: center` centring a 56px box against a 20px line of text.
   `flex-end` puts the two lower edges on each other. */
.aw-otprow { display: flex; align-items: flex-end; gap: 12px; }
.aw-otprow .aw-msg { flex: 1 1 auto; }
/* 🔴 SIZED TO THE INK ACROSS EVERY FRAME, NOT TO THE FILE AND NOT TO ONE FRAME
   (§3.145). Measured in the shadow root by seeking 0→100% and taking the UNION:
     otp-code   — 600×600 canvas, ink 367×447 at (134,168) → 61% × 74.5%,
                  centre (52.9%, 65.3%)
     email-sent — 1500×1500 canvas, ink 1274×1270 at (193,8) → 85% × 84.7%,
                  centre (55.3%, 42.9%)
   ⚠ The first attempt measured ONE frame (t≈1.5s) and got 53% × 33% for the
   email, because at that instant the envelope had already flown most of the way
   out — so the box was built around a moment, and two seconds later the row
   showed a yellow sliver. **A moving Lottie's ink is a RANGE; size the box to
   the range.** The host box is the ink's size; the player is scaled up and
   shifted so the ink's centre lands in the middle of that box. */
/* ⚠ re-measured at 5% steps (2026-08-05, Mo: "not positioned properly in relation
   to the text"): email-sent's ink is 91.8% × 84.7% of its canvas with its centre
   at (58.2%, 42.9%) — noticeably RIGHT of centre, which a coarser 10% sample had
   missed. Both arts are sized so the INK is 56px tall, and each host box is the
   ink's own width, so the text sits the same distance from both. */
.aw-otpart { position: relative; flex: 0 0 auto; height: 56px; }
.aw-otpart lottie-player { position: absolute; left: 50%; top: 50%; display: block; }
.aw-otpart[data-otpart="phone"] { width: 46px; }
.aw-otpart[data-otpart="phone"] lottie-player {
    width: 75px; height: 75px; transform: translate(-50%, -50%) translate(-2px, -11px);
}
.aw-otpart[data-otpart="email"] { width: 61px; }
.aw-otpart[data-otpart="email"] lottie-player {
    width: 66px; height: 66px; transform: translate(-50%, -50%) translate(-5px, 5px);
}
/* left-aligned beside its animation: centred text with a picture on one side
   reads as two unrelated things */
.aw-otprow .aw-msg { text-align: start; }

/* §3.150 — the hand that waves from behind the Login button.
   ⚠ `bottom: 100%` is the whole trick and it is why there is a wrapper: the box's
   lower edge lands exactly on the button's upper edge, with no padding to keep in
   step when the button's height changes. `left` is a little past centre because
   Mo asked for it "a bit much to the middle" — the hand reads as coming from
   behind the button rather than balanced on it. */
.aw-btnwrap { position: relative; }
/* ⚠ 160×112 keeps the file's OWN aspect (canvas 1150×802 ≈ 1.43:1). In a square
   box the player letterboxes and centres, which leaves ~20px of empty canvas
   under the drawing — the hand would float above the button with a gap that no
   amount of `bottom` tuning removes, because the gap is inside the player.
   ⭐ And the ink genuinely runs off the bottom of its own canvas (union y 259→1134
   against a 802-tall canvas), which is exactly why this file works here: the arm
   is already cut off, so it reads as coming from behind the button. */
.aw-wave {
    position: absolute; bottom: 100%; left: 52%;
    width: 160px; height: 112px; margin: 0; padding: 0;
    transform: translateX(-50%);
    pointer-events: none; z-index: 5;
}
.aw-wave lottie-player { width: 100%; height: 100%; display: block; }

/* verify button states (word-based) */
.aw-verify {
    flex: 0 0 auto; height: 42px; padding: 0 18px; margin-right: 4px;
    border: 1px solid rgba(236,164,36,.5); border-radius: 24px;
    background: rgba(236,164,36,.14); color: var(--a-gold2); font-weight: 800; font-size: 13.5px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
    transition: all .2s;
}
.aw-verify:hover { background: rgba(236,164,36,.24); }
.aw-verify.is-sending { color: var(--a-gold2); border-color: rgba(236,164,36,.5); }
.aw-verify.is-ok { background: rgba(34,197,94,.2); border-color: var(--a-ok); color: #b7f7cd; cursor: default; }
.aw-verify.is-err { background: rgba(239,68,68,.2); border-color: var(--a-err); color: #ffc2c2; }
.aw-verify .aw-vspin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,218,164,.35); border-top-color: var(--a-gold2); animation: aw-spin .8s linear infinite; }
/* §3.150 — the animation that replaced that circle, and the two signs beside the
   word on a verified / failed button. ⚠ Sized to the 42px button, not to the
   file: these three canvases have different aspect ratios, and a fixed square is
   what keeps the button the same width in all three states.
   ⚠ 20px was too small to read as an animation at all (Mo, 2026-08-05). 30px is
   the largest a 42px pill takes while keeping the word beside it on one line —
   the button grows its own padding rather than the art overflowing it. */
.aw-verify .aw-vlot { flex: 0 0 30px; width: 30px; height: 30px; pointer-events: none; }
.aw-verify .aw-vlot.is-spin { flex-basis: 26px; width: 26px; height: 26px; }
/* 🔴 the word beside the sign must stay LIGHT. `.is-ok`/`.is-err` set a light
   colour on the BUTTON, but the states also change the background to a solid
   tint, and the inherited value was reading as dark against it. State the colour
   on the label itself so neither tint can win. */
.aw-verify.is-ok span { color: #d9ffe8; }
.aw-verify.is-err span { color: #ffdede; }
.aw-verify.is-ok, .aw-verify.is-err { padding: 0 14px; }
@keyframes aw-spin { to { transform: rotate(360deg); } }

/* 6-box OTP (revealed after a code is sent) */
.aw-otp6 { display: none; gap: 8px; margin-top: 12px; justify-content: center; }
.aw-otp6.show { display: flex; }
.aw-otp6 input {
    width: 46px; height: 56px; text-align: center; font-size: 22px; font-weight: 800;
    color: #fff; border-radius: 12px; border: 1px solid var(--a-line);
    background: rgba(0,0,0,.28); font-family: var(--a-font); -moz-appearance: textfield; appearance: textfield;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.aw-otp6 input::-webkit-outer-spin-button, .aw-otp6 input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.aw-otp6 input:focus { outline: none; border-color: rgba(236,164,36,.7); box-shadow: 0 0 0 3px rgba(236,164,36,.16); background: rgba(0,0,0,.4); }
.aw-otp6 input.filled { border-color: rgba(236,164,36,.5); }
@media (max-width: 420px) { .aw-otp6 input { width: 40px; height: 50px; font-size: 19px; } }

/* buttons */
.aw-btn {
    width: 100%; height: 56px; border: 0; border-radius: 30px; cursor: pointer;
    font-size: 17px; font-weight: 800; letter-spacing: .3px;
    background: linear-gradient(120deg, var(--a-gold), #d98a12);
    color: #fff; box-shadow: 0 12px 30px rgba(236,164,36,.34), inset 0 1px 0 rgba(255,255,255,.4);
    transition: transform .12s, box-shadow .2s, opacity .2s, background .18s, color .18s;
}
/* gold buttons: hover = honey bg + gold text (user-mandated swap) */
.aw-btn:not(.aw-ghost):hover { background: #FFDAA4; color: var(--a-gold); transform: translateY(-1px); box-shadow: 0 16px 38px rgba(236,164,36,.42); }
.aw-btn.aw-ghost:hover { transform: translateY(-1px); }
.aw-btn:active { transform: translateY(1px); }
.aw-btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.aw-btn.aw-ghost { background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.04)); color: #fff; border: 1px solid var(--a-line); box-shadow: none; }

.aw-links { text-align: center; margin-top: 18px; font-size: 13.5px; color: rgba(255,255,255,.8); }
.aw-links a { color: var(--a-gold2); font-weight: 700; text-decoration: none; }
.aw-links a:hover { text-decoration: underline; }
.aw-forgot { display: block; text-align: center; margin: 4px 0 16px; color: rgba(255,255,255,.85); font-size: 13.5px; text-decoration: none; }
.aw-forgot:hover { color: var(--a-gold2); }

/* OAuth row */
.aw-oauth { display: flex; gap: 10px; margin: 4px 0 6px; }
.aw-oauth a, .aw-oauth button {
    flex: 1; height: 50px; border-radius: 16px; border: 1px solid var(--a-line);
    background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.04));
    color: #fff; display: flex; align-items: center; justify-content: center; gap: 8px;
    font-weight: 700; font-size: 13.5px; cursor: pointer; text-decoration: none; transition: background .18s, transform .12s;
}
.aw-oauth a:hover, .aw-oauth button:hover { background: rgba(255,255,255,.16); transform: translateY(-1px); }
.aw-oauth svg, .aw-oauth img { width: 20px; height: 20px; }
.aw-or { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: rgba(255,255,255,.65); font-size: 12px; }
.aw-or::before, .aw-or::after { content: ""; flex: 1; height: 1px; background: var(--a-line); }

/* ============================================================ WIZARD */
.aw-steps { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 22px 0 6px; }
.aw-step-dot { display: flex; align-items: center; gap: 8px; }
.aw-step-dot i { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--a-line); font-style: normal; font-weight: 800; font-size: 13px; color: rgba(255,255,255,.6);
    background: rgba(255,255,255,.05); transition: all .3s; }
.aw-step-dot.active i { border-color: var(--a-gold); color: #fff; background: linear-gradient(120deg, var(--a-gold), #d98a12); box-shadow: 0 4px 14px rgba(236,164,36,.4); }
.aw-step-dot.done i { border-color: var(--a-ok); color: #fff; background: rgba(34,197,94,.35); }
.aw-step-bar { width: 34px; height: 2px; background: var(--a-line); border-radius: 2px; }
.aw-step-bar.done { background: var(--a-gold); }

.aw-steplabel { text-align: center; font-size: 12px; color: rgba(255,255,255,.75); margin-bottom: 4px; }

.aw-panes { position: relative; }
.aw-pane { display: none; animation: aw-panein .45s cubic-bezier(.2,.8,.25,1) both; }
.aw-pane.active { display: block; }
@keyframes aw-panein { from { opacity: 0; transform: translateX(24px); } }
.aw-pane.back { animation: aw-panein-b .45s cubic-bezier(.2,.8,.25,1) both; }
@keyframes aw-panein-b { from { opacity: 0; transform: translateX(-24px); } }

.aw-nav { display: flex; gap: 12px; margin-top: 8px; }
.aw-nav .aw-btn { flex: 1; }
.aw-nav .aw-back { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.aw-back svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.2; }

/* ------------------------------------------------- WAVE WIPE + ECG LOADER
   Page/step transition: a navy panel with WAVY leading/trailing edges sweeps
   in from the left, holds full-screen while a gold ECG heartbeat traces (the
   "loading" state until the next page is ready), then sweeps out to the right.
   States (driven by js/auth-wipe.js + the signup wizard):
     .cover  – sweep in and stay (before navigation / while submitting)
     .hold   – already covered, no transition (arrival on the next page)
     .out    – sweep away to the right (reveal the ready page)
     .run    – one full pass (signup step changes)                         */
.aw-wipe {
    position: fixed; top: 0; bottom: 0; left: 0; width: 150vw; z-index: 50;
    display: flex; pointer-events: none;
    transform: translateX(-165vw);
}
.aw-wipe-tail, .aw-wipe-lead {
    flex: 0 0 16vw; height: 100%;
    background-repeat: no-repeat; background-size: 100% 100%;
}
/* trailing edge — fill on the right of the wave curve (+ thin gold crest) */
.aw-wipe-tail { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 800' preserveAspectRatio='none'%3E%3Cpath d='M100,0 H42 C14,60 62,130 34,200 C8,268 60,336 32,404 C6,470 58,538 34,606 C12,672 54,738 38,800 H100 Z' fill='%23041530'/%3E%3Cpath d='M42,0 C14,60 62,130 34,200 C8,268 60,336 32,404 C6,470 58,538 34,606 C12,672 54,738 38,800' fill='none' stroke='%23ECA424' stroke-width='2.5' opacity='.85'/%3E%3C/svg%3E"); }
/* leading edge — fill on the left of the wave curve (+ thin gold crest) */
.aw-wipe-lead { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 800' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H58 C86,60 38,130 66,200 C92,268 40,336 68,404 C94,470 42,538 66,606 C88,672 46,738 62,800 H0 Z' fill='%23041530'/%3E%3Cpath d='M58,0 C86,60 38,130 66,200 C92,268 40,336 68,404 C94,470 42,538 66,606 C88,672 46,738 62,800' fill='none' stroke='%23ECA424' stroke-width='2.5' opacity='.85'/%3E%3C/svg%3E"); }
.aw-wipe-body {
    flex: 1 1 auto; height: 100%; position: relative;
    background: #041530;
    display: flex; align-items: center; justify-content: center;
}
.aw-wipe-body::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(60% 50% at 50% 42%, rgba(40,86,196,.28), transparent 70%),
        radial-gradient(40% 35% at 50% 60%, rgba(236,164,36,.10), transparent 70%);
}
/* ECG heartbeat trace (pathLength=1000 in the markup normalizes the dash math) */
.aw-ecg { width: min(430px, 72vw); position: relative; opacity: 0; transition: opacity .28s ease .22s;
    filter: drop-shadow(0 0 14px rgba(236,164,36,.55)); }
.aw-ecg .aw-ecg-base { stroke: rgba(236,164,36,.16); stroke-width: 2.5; fill: none; }
.aw-ecg .aw-ecg-run {
    stroke: var(--a-gold); stroke-width: 3; fill: none;
    stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 170 830; stroke-dashoffset: 1000;
    animation: aw-ecgrun 1.5s linear infinite;
    animation-play-state: paused;
}
@keyframes aw-ecgrun { to { stroke-dashoffset: 0; } }
/* exact-case wordmark: "Meducate" white + "ED" gold */
.aw-wipe-brand { position: absolute; left: 50%; transform: translateX(-50%); bottom: 12vh;
    font-family: var(--a-font); font-weight: 800; font-size: 17px; letter-spacing: 2px;
    color: #fff; opacity: 0; transition: opacity .3s ease .3s; }
.aw-wipe-brand b { color: var(--a-gold); font-weight: 800; }

.aw-wipe.cover { transform: translateX(-26vw); transition: transform .65s cubic-bezier(.8,0,.2,1); pointer-events: auto; }
.aw-wipe.hold  { transform: translateX(-26vw); transition: none; pointer-events: auto; }
.aw-wipe.out   { transform: translateX(112vw); transition: transform .7s cubic-bezier(.7,0,.3,1); }
.aw-wipe.run   { animation: aw-wavepass 1.25s cubic-bezier(.6,.05,.4,.95) forwards; pointer-events: auto; }
@keyframes aw-wavepass {
    0% { transform: translateX(-165vw); }
    44% { transform: translateX(-26vw); }
    58% { transform: translateX(-26vw); }
    100% { transform: translateX(112vw); }
}
.aw-wipe.cover .aw-ecg, .aw-wipe.hold .aw-ecg, .aw-wipe.run .aw-ecg,
.aw-wipe.cover .aw-wipe-brand, .aw-wipe.hold .aw-wipe-brand, .aw-wipe.run .aw-wipe-brand { opacity: 1; }
.aw-wipe.cover .aw-ecg-run, .aw-wipe.hold .aw-ecg-run, .aw-wipe.run .aw-ecg-run { animation-play-state: running; }

/* ============================================================ terms popup */
.aw-modal { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; padding: 18px;
    background: rgba(2,10,26,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.aw-modal.show { display: flex; animation: aw-fade .25s both; }
@keyframes aw-fade { from { opacity: 0; } }
.aw-modal-card { width: 100%; max-width: 620px; max-height: 86vh; display: flex; flex-direction: column;
    background: linear-gradient(150deg, rgba(20,44,96,.96), rgba(4,16,40,.98)); border: 1px solid var(--a-line);
    border-radius: 22px; box-shadow: 0 30px 80px rgba(0,0,0,.6); overflow: hidden; }
.aw-modal-head { padding: 18px 22px; border-bottom: 1px solid var(--a-line); display: flex; align-items: center; justify-content: space-between; }
.aw-modal-head h3 { margin: 0; font-size: 18px; font-weight: 800; color: var(--a-gold2); }
.aw-modal-tabs { display: flex; gap: 8px; padding: 12px 22px 0; }
.aw-modal-tab { height: 34px; padding: 0 16px; border-radius: 20px; border: 1px solid transparent; background: rgba(255,255,255,.05); color: #c7d3ee; font-weight: 700; font-size: 12.5px; cursor: pointer; }
.aw-modal-tab.on { background: rgba(236,164,36,.18); color: var(--a-gold2); border-color: rgba(236,164,36,.4); }
.aw-modal-body { flex: 1 1 auto; overflow-y: auto; padding: 18px 22px; font-size: 13.5px; line-height: 1.75; color: rgba(255,255,255,.82); }
.aw-modal-body h1, .aw-modal-body h2, .aw-modal-body h3 { color: var(--a-gold2); }
.aw-modal-body a { color: var(--a-gold2); }
.aw-legal-doc { display: none; }
.aw-legal-doc.on { display: block; }
.aw-modal-end { text-align: center; padding: 12px; font-size: 12px; color: rgba(255,255,255,.4); }
.aw-modal-foot { padding: 14px 22px; border-top: 1px solid var(--a-line); }
.aw-modal-hint { font-size: 11.5px; color: rgba(255,255,255,.55); text-align: center; margin: 0 0 10px; }
.aw-modal-hint.ready { color: var(--a-ok); }

/* terms checkbox row */
.aw-terms { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 18px; font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,.72); }
.aw-check { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--a-line); background: rgba(255,255,255,.05);
    display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .18s; margin-top: 1px; }
.aw-check.on { border-color: var(--a-gold); background: rgba(236,164,36,.2); }
.aw-check svg { width: 15px; height: 15px; stroke: var(--a-gold2); stroke-width: 3; fill: none; opacity: 0; transition: opacity .15s; }
.aw-check.on svg { opacity: 1; }
.aw-terms a, .aw-terms .aw-open-terms { color: var(--a-gold2); font-weight: 700; cursor: pointer; text-decoration: underline; }

/* toast */
.aw-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px); z-index: 70;
    padding: 12px 22px; border-radius: 26px; font-size: 13.5px; font-weight: 700; opacity: 0; transition: all .3s;
    background: rgba(5,16,38,.95); border: 1px solid var(--a-line); box-shadow: 0 12px 30px rgba(0,0,0,.5);
    /* never hit-testable — an invisible toast at bottom-center was eating
       clicks meant for the buttons underneath it */
    pointer-events: none; }
.aw-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.aw-toast.ok { color: #b7f7cd; border-color: rgba(34,197,94,.5); }
.aw-toast.err { color: #ffc2c2; border-color: rgba(239,68,68,.5); }

/* ------------------------------------------- phone dial-code dropdown
   compact flag+code picker living INSIDE the phone pill; reuses the .aw-dd
   menu (flags + search) so every country code is selectable */
/* 🔴 §3.134 — the country-code menu opened "in a radically wrong place".
   `.aw-dd` sets `position: relative` so `.aw-dd-menu` (position:absolute) hangs
   under its own toggle. This rule overrode that to `static`, so the menu skipped
   the picker and resolved against the next positioned ancestor — landing under
   the EMAIL field, a whole control away from the button that opened it.
   `static` was presumably chosen so the menu could be wider than the narrow
   "+20" toggle, since `.aw-dd-menu` stretches with `left:0; right:0`. Restore
   the positioning context and solve the width directly instead. */
.aw-ccdd { position: relative; flex: 0 0 auto; }
.aw-ccdd .aw-dd-menu {
    left: 0;
    right: auto;                    /* ⚠ or it collapses to the toggle's width */
    width: min(340px, 78vw);        /* country names need room; small screens cap it */
}
.aw-ccdd .aw-dd-toggle { width: auto; height: 40px; padding: 0 10px 0 6px; gap: 6px;
    border: 0; background: transparent; border-right: 1px solid var(--a-line); border-radius: 0;
    font-weight: 700; font-size: 14px; }
.aw-ccdd .aw-dd-toggle:focus { box-shadow: none; }
.aw-ccdd .aw-dd-flag { width: 24px; height: 16px; }
.aw-ccdd .aw-dd-caret { width: 7px; height: 7px; margin: 0 6px 0 0; }
.aw-pill .aw-dd-menu { top: calc(100% + 10px); max-height: 300px; }
.aw-dd-opt .aw-dd-dial { margin-left: auto; color: var(--a-gold2); font-weight: 700; font-size: 12.5px; }

/* --------------------------------------- WhatsApp fallback panel (phone)
   shown ONLY when the outbound OpenWA send is unavailable: a clear glass
   panel with an "Open WhatsApp" action + animated waiting dots — replaces
   the old raw "Send the code (XXXXXX) …" sentence */
.aw-wafall { display: none; margin-top: 12px; padding: 14px 16px; border-radius: 16px;
    border: 1px dashed rgba(236,164,36,.45); background: rgba(236,164,36,.07); }
.aw-wafall.show { display: block; animation: aw-fade .25s both; }
.aw-wafall p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,.85); }
.aw-wafall .aw-wafall-code { font-weight: 800; color: var(--a-gold2); letter-spacing: 2px; }
.aw-wafall-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px;
    border-radius: 22px; border: 1px solid rgba(37,211,102,.55); background: rgba(37,211,102,.14);
    color: #b7f7cd; font-weight: 800; font-size: 13px; cursor: pointer; text-decoration: none; }
.aw-wafall-btn:hover { background: rgba(37,211,102,.24); color: #d9ffe8; }
.aw-wafall-wait { display: flex; align-items: center; gap: 8px; margin-top: 10px;
    font-size: 12px; color: rgba(255,255,255,.7); }
.aw-wafall-wait i { width: 6px; height: 6px; border-radius: 50%; background: var(--a-gold); font-style: normal;
    animation: aw-dots 1.2s ease-in-out infinite; }
.aw-wafall-wait i:nth-child(2) { animation-delay: .2s; }
.aw-wafall-wait i:nth-child(3) { animation-delay: .4s; }
@keyframes aw-dots { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

/* =========================================================== TEXT SANITY
   FINAL WORD on auth text colors. This file loads LAST, so equal-importance
   rules here beat every theme/bootstrap/inline-head rule. No auth text may
   ever render gray/dark again — whatever the theme ships. */
/* blanket: text-fill always follows the element's own color — kills every
   inherited/theme -webkit-text-fill-color leak in one stroke */
.aw-stage *, .aw-modal *, .aw-wipe *, .aw-toast { -webkit-text-fill-color: currentColor; }
.aw-stage .aw-title { color: #fff !important; -webkit-text-fill-color: #fff !important; background: none !important; }
.aw-stage .aw-sub, .aw-stage .aw-note { -webkit-text-fill-color: currentColor; }
.aw-stage .aw-oauth a, .aw-stage .aw-oauth a:link, .aw-stage .aw-oauth a:visited, .aw-stage .aw-oauth a:hover,
.aw-stage .aw-oauth a span, .aw-stage .aw-oauth button {
    color: #fff !important; -webkit-text-fill-color: #fff !important;
    background-clip: padding-box; -webkit-background-clip: padding-box; }
.aw-stage .aw-links, .aw-stage .aw-or, .aw-stage .aw-steplabel { -webkit-text-fill-color: currentColor; }
.aw-stage .aw-links a, .aw-stage .aw-links a:visited, .aw-stage .aw-signin-link { color: var(--a-gold2) !important; -webkit-text-fill-color: var(--a-gold2) !important; }
.aw-stage .aw-forgot, .aw-stage .aw-forgot:visited { color: rgba(255,255,255,.85) !important; -webkit-text-fill-color: rgba(255,255,255,.85) !important; }
.aw-stage .aw-forgot:hover { color: var(--a-gold2) !important; -webkit-text-fill-color: var(--a-gold2) !important; }
.aw-stage .aw-label { -webkit-text-fill-color: var(--a-gold); }
.aw-stage .aw-btn { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.aw-stage .aw-btn:not(.aw-ghost):hover { color: var(--a-gold) !important; -webkit-text-fill-color: var(--a-gold) !important; }
/* wizard fields & dropdowns: nationality + dial-code pickers, selects, OTP */
.aw-stage .aw-dd-toggle, .aw-stage .aw-dd-toggle .aw-dd-label { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.aw-stage .aw-dd-search { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.aw-stage .aw-dd-opt, .aw-stage .aw-dd-opt span { color: #e6edfb !important; -webkit-text-fill-color: #e6edfb !important; }
.aw-stage .aw-dd-opt:hover, .aw-stage .aw-dd-opt.active,
.aw-stage .aw-dd-opt:hover span, .aw-stage .aw-dd-opt.active span { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.aw-stage .aw-dd-opt .aw-dd-dial { color: var(--a-gold2) !important; -webkit-text-fill-color: var(--a-gold2) !important; }
.aw-stage .aw-pill input, .aw-stage .aw-pill select { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.aw-stage .aw-pill select option { color: #fff !important; background: #06122c !important; }
.aw-stage .aw-otp6 input { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.aw-stage .aw-wafall p { color: rgba(255,255,255,.88) !important; -webkit-text-fill-color: rgba(255,255,255,.88) !important; }
.aw-stage .aw-wafall .aw-wafall-code { color: var(--a-gold2) !important; -webkit-text-fill-color: var(--a-gold2) !important; }
.aw-stage .aw-terms, .aw-stage .aw-terms > span { color: rgba(255,255,255,.85) !important; -webkit-text-fill-color: rgba(255,255,255,.85) !important; }
.aw-modal .aw-modal-body { color: rgba(255,255,255,.85) !important; -webkit-text-fill-color: rgba(255,255,255,.85) !important; }

@media (max-width: 560px) {
    .aw-body { padding: 24px 20px 28px; }
    .aw-pwlist { grid-template-columns: 1fr; }
    .aw-oauth { flex-wrap: wrap; }
    .aw-oauth a, .aw-oauth button { flex: 1 1 40%; }
}

/* ============================================================================
   §3.134 — live OTP feedback
   The boxes are the status display: red the instant a complete code is wrong,
   green when it is accepted, and back to neutral the moment the student edits
   a digit (so the error never outlives the thing it described).
   ⚠ These sit AFTER `.filled` and `:focus` on purpose — a wrong code that the
   student is still focused on must read as wrong, and `.filled` would otherwise
   win by equal specificity + document order.
   ========================================================================== */
.aw-otp6 input.is-err,
.aw-otp6 input.is-err.filled,
.aw-otp6 input.is-err:focus {
    border-color: rgba(255, 107, 107, .85);
    box-shadow: 0 0 0 3px rgba(255, 107, 107, .18);
    background: rgba(120, 20, 20, .22);
}
.aw-otp6 input.is-ok,
.aw-otp6 input.is-ok.filled,
.aw-otp6 input.is-ok:focus {
    border-color: rgba(64, 200, 122, .85);
    box-shadow: 0 0 0 3px rgba(64, 200, 122, .16);
    background: rgba(16, 90, 50, .22);
}

/* attempts left + the resend countdown, under the boxes */
.aw-otphint {
    margin-top: 8px;
    text-align: center;
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(226, 236, 255, .62);
    min-height: 1em;               /* reserve the row so nothing jumps when it fills */
}

/* the Verify/Resend button while a cooldown is counting down: it shows the
   remaining time, so it must read as "waiting", never as "broken" */
.aw-verify.is-wait, button.is-wait {
    opacity: .72;
    cursor: not-allowed;
    font-variant-numeric: tabular-nums;   /* the countdown must not jitter */
    letter-spacing: .2px;
}

/* ============================================================================
   §3.134 — THE TERMS & PRIVACY POPUP
   ========================================================================== */

/* 🔴 The legal text rendered dark-on-dark and was genuinely unreadable.
   MEASURED, not guessed: every <p>/<strong> inside computed to rgb(52,58,64)
   — Bootstrap's grey — because the global stylesheet colours those TAGS for a
   light page. `.aw-modal-body { color: … !important }` could never fix it: an
   inherited colour loses to a rule that targets the element itself, so the
   !important was landing on the one thing that was already right.
   The repair therefore has to reach the DESCENDANTS. */
.aw-modal .aw-legal-doc,
.aw-modal .aw-legal-doc * {
    color: #dbe4f7 !important;
    -webkit-text-fill-color: #dbe4f7 !important;
    background-color: transparent !important;   /* pasted docs carry white blocks */
    border-color: rgba(140, 170, 235, .22) !important;
}
/* …then put the hierarchy back. Higher specificity than the `*` above, so these
   win despite both carrying !important. */
.aw-modal .aw-legal-doc h1, .aw-modal .aw-legal-doc h2,
.aw-modal .aw-legal-doc h3, .aw-modal .aw-legal-doc h4 {
    color: var(--a-gold2) !important; -webkit-text-fill-color: var(--a-gold2) !important;
}
.aw-modal .aw-legal-doc strong, .aw-modal .aw-legal-doc b {
    color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
}
.aw-modal .aw-legal-doc a {
    color: var(--a-gold2) !important; -webkit-text-fill-color: var(--a-gold2) !important;
    text-decoration: underline;
}
.aw-modal .aw-legal-doc hr { border-color: rgba(140, 170, 235, .25) !important; }
.aw-modal .aw-legal-doc table, .aw-modal .aw-legal-doc td, .aw-modal .aw-legal-doc th {
    border-color: rgba(140, 170, 235, .25) !important;
}

/* both documents are always present now — the buttons scroll, they don't swap */
.aw-legal-doc { display: block; }
.aw-legal-doc + .aw-legal-doc { margin-top: 26px; border-top: 1px solid rgba(140,170,235,.25); padding-top: 22px; }

/* the scroller itself: platform-themed, and visible enough to be grabbed */
.aw-modal-body { position: relative; scrollbar-width: thin; scrollbar-color: rgba(236,164,36,.55) rgba(255,255,255,.06); }
.aw-modal-body::-webkit-scrollbar { width: 12px; }
.aw-modal-body::-webkit-scrollbar-track { background: rgba(255,255,255,.05); border-radius: 20px; margin: 6px 0; }
.aw-modal-body::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(236,164,36,.85), rgba(198,131,20,.85));
    border-radius: 20px; border: 3px solid transparent; background-clip: content-box;
}
.aw-modal-body::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #eca424, #c68314); background-clip: content-box; }

/* floating jump-to-end, bottom-right of the scroller.
   ⚠ position:sticky rather than fixed — a `fixed` child of a TRANSFORMED
   ancestor resolves against that ancestor, and the modal card animates in
   (gotcha #162). Sticky inside the scroller has no such trap. */
.aw-jump-end {
    position: sticky; float: right; right: 6px; bottom: 12px;
    width: 42px; height: 42px; border-radius: 50%; z-index: 5;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(236,164,36,.55); color: #ffd98a;
    background: linear-gradient(180deg, rgba(20,44,96,.96), rgba(6,18,42,.96));
    box-shadow: 0 10px 24px rgba(0,0,0,.45); cursor: pointer;
    transition: opacity .18s, transform .18s, background .18s;
}
.aw-jump-end:hover { background: linear-gradient(180deg, rgba(236,164,36,.28), rgba(6,18,42,.96)); transform: translateY(-2px); }
.aw-jump-end.hide { opacity: 0; pointer-events: none; }   /* nothing to jump to at the end */

/* the two doc buttons read as a segmented control, not as tabs that swap pages */
.aw-modal-tab { transition: background .18s, color .18s; }

/* ── the terms row, matched to login's remember-me ──────────────────────────
   Mo: same text size, style and checkbox proportions as the login screen.
   `.aw-remember label` is `font: 800 14px/1.3 var(--a-font)` in gold with a
   20px control; this mirrors it exactly rather than approximating it, so the
   two screens cannot drift apart. */
.aw-terms {
    display: flex; align-items: center; gap: 10px; margin: 2px 0 16px;
    color: var(--a-gold) !important; -webkit-text-fill-color: var(--a-gold);
    font: 800 14px/1.3 var(--a-font) !important;
}
.aw-terms span, .aw-terms label { color: inherit; font: inherit; }
.aw-terms .aw-open-terms {
    color: var(--a-gold2) !important; -webkit-text-fill-color: var(--a-gold2);
    font: inherit !important; text-decoration: underline; cursor: pointer;
}
.aw-terms .aw-check { width: 20px; height: 20px; border-radius: 6px; border-width: 2px; margin-top: 0; }
.aw-terms .aw-check svg { width: 12px; height: 12px; }

/* step-2 selects upgraded to the glass dropdown (§3.134).
   The pill already draws a caret via `.aw-select::after`; the upgraded control
   brings its own, so suppress the pill's or there are two arrows. */
.aw-pill.aw-pill-dd::after { content: none; }
.aw-pill.aw-pill-dd { padding-right: 6px; }
.aw-dd-plain { width: 100%; }
.aw-dd-plain .aw-dd-toggle { background: transparent; border: 0; height: 52px; padding: 0; box-shadow: none; }
.aw-dd-plain .aw-dd-toggle:focus { box-shadow: none; border: 0; }
.aw-dd-plain .aw-dd-menu { left: 0; right: 0; }
.aw-dd-plain .aw-dd-opt { justify-content: flex-start; }

/* ============================================================================
   §3.172 — THE VERIFICATION STEP: WHAT IT SAYS, AND WHERE IT SITS
   Mo, 2026-08-07. Two complaints, both about the same block of the wizard.
   ========================================================================== */

/* ── 1. "loading with 3 dots being written and rewritten in a loop" ──────────
   Three real elements, staggered. NOT an animated `content` string: that is
   unreliable across browsers and, inside an `aria-live` region, a screen reader
   would read the dots out as they changed. */
.aw-dots { display: inline-block; margin-inline-start: 3px; white-space: nowrap; }
.aw-dots i {
    display: inline-block; width: 3px; height: 3px; border-radius: 50%;
    background: currentColor; margin-inline-start: 3px; opacity: .2;
    animation: aw-dot 1.05s ease-in-out infinite;
}
.aw-dots i:nth-child(2) { animation-delay: .17s; }
.aw-dots i:nth-child(3) { animation-delay: .34s; }
@keyframes aw-dot {
    0%, 65%, 100% { opacity: .18; transform: translateY(0); }
    30%           { opacity: 1;   transform: translateY(-2px); }
}
/* the last button of the wizard, while the account is being created */
.aw-btn.is-busy { cursor: progress; opacity: .92; }
.aw-btn.is-busy .aw-dots i { background: currentColor; }
@media (prefers-reduced-motion: reduce) {
    .aw-dots i { animation: none; opacity: .55; }
}

/* ── 2. "a huge gap between the input boxes and the text and animation under
   it … make them directly under the boxes with the same padding between input
   boxes and main input field above" ──────────────────────────────────────────
   The gap was three things stacked, and two of them were invisible:
     · `.aw-otphint` reserved `min-height: 1em` for a countdown that is absent
       most of the time — a blank ~19px line, every time;
     · `.aw-msg` added its own `margin-top: 6px` on top of that;
     · `.aw-otprow` then held a 56px art box aligned to the text baseline.
   The measure Mo named is the gap ABOVE the code boxes — `.aw-otp6`'s
   `margin-top: 12px` — so that is the number used here, once, and the empty
   hint collapses instead of reserving space. ⚠ `:empty` is exact: the hint is
   filled by textContent, so it is genuinely empty until the server says
   otherwise, and it reappears at full height the moment it is not. */
.aw-otphint:empty { display: none; margin: 0; min-height: 0; }
.aw-otphint { margin-top: 12px; }
.aw-otp6.show ~ .aw-otprow { margin-top: 12px; }
.aw-otprow .aw-msg { margin-top: 0; margin-bottom: 0; }
/* with the hint showing, the two lines belong together — the art row follows it
   at reading distance, not at another full field gap */
.aw-otphint:not(:empty) + .aw-otprow { margin-top: 4px; }

/* §3.190 — the channel picker was DELETED with its two radios: one field now,
   and the transport is derived from what was typed. */