/* QuizVidya Tournament Auth — refined split brand panel + parent sign-in/create funnel.
   Matches the main-site auth language (main_auth.css); all icons are inline SVG (no emoji/tofu).
   Poppins throughout for full consistency with the main QV login page. */
:root{
  --ink:#1f3450; --ink-2:#4a5d78; --muted:#74849a; --line:#e2e8f1; --line-2:#edf1f7;
  --brand:#2f5fa6; --brand-2:#254c88; --brand-ink:#254c88;
  --field:#fcfdff; --field-line:#dbe3ee;
  --ok-fg:#1c7d46;
  --r-card:16px; --r-ctl:12px;
  --font:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --display:'Fredoka','Poppins',sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
.ta-body{font-family:var(--font);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-tap-highlight-color:transparent}
.ta-body svg{display:block}
[hidden]{display:none!important}

/* Desktop: pin the split to the viewport so the page itself never scrolls and the two halves are
   height-independent (the brand can't shift when the form's height changes login↔signup). */
.ta-split{display:grid;grid-template-columns:1.02fr 1.15fr;height:100vh;height:100dvh;overflow:hidden}

/* ── Brand panel (desktop) ─────────────────────────────────────────────────── */
/* Predominantly DARK, immersive vertical identity: deep indigo top → rich brand violet mid →
   deep immersive bottom, layered with radial lighting for depth. White promo text throughout;
   strong contrast against the white form panel. */
.ta-brand{position:relative;overflow:hidden;color:#fff;padding:46px 60px;display:flex;flex-direction:column;justify-content:space-between;height:100%;
  background:
    /* No separate top-left light — the corner atmosphere & the soft lift the dark logo needs now
       come from the hexagonal planes (.ta-hex-tl-*), so the whole panel is one hexagonal-depth
       field. These remaining radials only add right-side & bottom depth. */
    /* refined coral atmosphere warms the lower-right (integrates with the hexagons, connects to the
       student-coral identity) — restrained so the deep academic blue stays dominant. */
    radial-gradient(66% 52% at 84% 82%, rgba(232,110,108,.32), transparent 62%),
    radial-gradient(58% 44% at 99% 16%, rgba(80,132,206,.30), transparent 60%),
    radial-gradient(85% 58% at 6% 110%, rgba(10,24,48,.5), transparent 60%),
    linear-gradient(176deg,
      #1c4682 0%, #173a68 26%, #1f4f8b 48%, #142f57 74%, #0d1d3a 100%)}
/* ambient light sources — a lit highlight drifting (top-left) + a deep glow (bottom-right), at
   different speeds so the light feels alive rather than looping. */
.ta-brand::before,.ta-brand::after{content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.ta-brand::before{width:560px;height:560px;top:-230px;left:-160px;filter:blur(66px);opacity:.5;
  background:radial-gradient(circle,rgba(120,165,225,.5),transparent 68%);animation:taGlowB 34s ease-in-out infinite alternate}
.ta-brand::after{width:470px;height:470px;bottom:-175px;right:-120px;filter:blur(62px);opacity:.5;
  background:radial-gradient(circle,rgba(228,124,112,.3),transparent 66%);animation:taGlow 26s ease-in-out infinite alternate}
.ta-brand>*{position:relative;z-index:1}
/* decorative geometry — floating translucent hexagonal "glass planes" in the right/edge quiet
   zones, layered for depth. Positions are static (attribute transforms on the outer <g>); each
   plane animates on its OWN timescale (see keyframes) so nothing moves in lockstep. */
.ta-brand-deco{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ta-brand-deco svg{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Top-left hexagonal planes — same flat-top hexagon shape as the SVG geometry, oversized and mostly
   off the corner so they read as the hex system extending into the top-left. The near plane's soft
   fill is what lets the dark logo stay readable (no separate light blob). Very slow, offset drift. */
.ta-hex-tl{position:absolute;z-index:0;pointer-events:none;display:block;
  clip-path:polygon(0% 50%,25% 0%,75% 0%,100% 50%,75% 100%,25% 100%)}
.ta-hex-tl-far{top:-244px;left:-216px;width:648px;height:561px;filter:blur(2.5px);
  background:linear-gradient(126deg,rgba(115,160,220,.2),rgba(95,140,205,.05) 56%,transparent 80%);
  border:1px solid rgba(255,255,255,.055);
  animation:taHexTLspin 120s linear infinite}
.ta-hex-tl-near{top:-182px;left:-136px;width:462px;height:400px;
  background:radial-gradient(118% 114% at 58% 66%,rgba(198,220,248,.55),rgba(120,165,225,.15) 42%,rgba(95,140,205,.04) 68%,transparent 90%);
  border:1px solid rgba(255,255,255,.055);
  animation:taHexTLa 46s ease-in-out infinite alternate}
/* Three depth layers create a "depth of field": BACKGROUND (large, blurred, faint, slow) sits
   far behind; MIDGROUND (large translucent glass planes with a soft glow); FOREGROUND (a small,
   sharp, bright-edged hex that reads as "closest"). */
.ta-hex-bg{fill:url(#taHexGlassFaint);stroke:rgba(255,255,255,.10);stroke-width:2;stroke-linejoin:round}
.ta-hex-glass{fill:url(#taHexGlass);stroke:rgba(255,255,255,.24);stroke-width:1.5;stroke-linejoin:round;
  filter:drop-shadow(0 8px 26px rgba(90,150,220,.4))}
.ta-hex-line{fill:url(#taHexGlassFaint);stroke:rgba(255,255,255,.28);stroke-width:1.5;stroke-linejoin:round}
.ta-hex-fg{fill:url(#taHexGlass);stroke:rgba(255,255,255,.46);stroke-width:1.6;stroke-linejoin:round;
  filter:drop-shadow(0 0 18px rgba(150,190,240,.55))}
/* background plane */
.ta-hx-blur{filter:blur(4px)}
.ta-hxbg-float{animation:taHexFloat3 58s ease-in-out infinite alternate}
.ta-hxbg-fade{opacity:.26;animation:taHexBreathe2 26s ease-in-out infinite}
/* midground glass plane (right edge) — a touch more travel so movement is noticeable */
.ta-hx1-float{animation:taHexFloat 40s ease-in-out infinite alternate}
.ta-hx1-rot{transform-box:fill-box;transform-origin:center;animation:taSpin 100s linear infinite}
/* midground outline (lower-right) */
.ta-hx2{opacity:.8;animation:taHexBreathe 18s ease-in-out infinite}
/* foreground sharp hex (upper-right) — most visible movement + gentle brightness breathe */
.ta-hxF-float{animation:taHexFloatF 30s ease-in-out infinite alternate}
.ta-hxF-rot{transform-box:fill-box;transform-origin:center;animation:taSpin 120s linear infinite reverse}
.ta-hxF-fade{animation:taHexBreatheF 8s ease-in-out infinite}
/* Brand lockup — QuizVidya logo + product kicker. Original brand treatment: dark "Quiz" + coral
   "Vidya" (matches the app navbar), made readable by the localized light source behind it. */
.ta-brand-lockup{display:flex;flex-direction:column;align-items:flex-start;gap:13px;margin-bottom:0}
.ta-logo{display:inline-block;font-family:'Fredoka One',cursive;font-weight:400;font-size:1.5rem;letter-spacing:normal;color:#1a1a1a;text-decoration:none;transition:opacity .15s}
.ta-logo:hover{opacity:1}
.ta-logo span{color:#e86e6c}
.ta-eyebrow{display:inline-flex;align-items:center;gap:9px;text-transform:uppercase;letter-spacing:.15em;font-size:.78rem;font-weight:600;color:#d8e5f4;margin:0}
.ta-eyebrow svg{width:17px;height:17px}
/* Hero — heading + description + feature list. */
.ta-brand-hero{max-width:468px}
.ta-headline{font-family:var(--font);font-weight:700;font-size:clamp(2rem,.5rem + 2.6vw,3rem);line-height:1.08;letter-spacing:-.02em;margin:0 0 18px;text-wrap:balance}
.ta-tag{font-size:1.12rem;line-height:1.6;color:#e9f2fc;margin:0 0 clamp(20px,3vh,34px);max-width:430px;font-weight:400}
.ta-features{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:18px}
.ta-features li{display:flex;gap:15px;align-items:flex-start}
.ta-fi{flex:0 0 auto;width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.15);display:grid;place-items:center}
.ta-fi svg{width:22px;height:22px;color:#fff}
.ta-ft{display:flex;flex-direction:column;padding-top:1px}
.ta-ft b{font-weight:600;font-size:1.05rem;margin-bottom:3px;letter-spacing:-.01em}
.ta-ft small{color:#cbdaee;font-size:.92rem;line-height:1.5}
/* Trust statement — subtle, pinned to the bottom-left of the panel (secondary to the hero). */
.ta-brand-foot{margin-top:clamp(24px,3.6vh,44px);display:inline-flex;align-items:flex-start;gap:9px;font-size:.85rem;color:#cbdaee;line-height:1.45}
.ta-brand-foot svg{width:16px;height:16px;flex:0 0 auto;margin-top:1px;opacity:.9}

/* ── Form side ─────────────────────────────────────────────────────────────── */
/* The form column fills the viewport-pinned cell and scrolls INTERNALLY if the content ever exceeds
   the available height, so the PAGE never grows and the brand never moves. Two EQUAL flex spacers
   vertically CENTRE the whole content group (how-to card + form + security footer) — it self-centres
   to its own height (login is taller because of the how-to card; signup taller still), giving
   balanced top/bottom space. When the group is taller than the column both spacers collapse to 0, so
   the top stays reachable and the column scrolls gracefully (no clipping, no outer scrollbar). */
.ta-formside{display:flex;flex-direction:column;align-items:center;height:100%;overflow-y:auto;padding:24px 32px;
  background:radial-gradient(120% 90% at 100% 0%,#eef4fc 0%,transparent 55%),#fcfdff}
.ta-formside::before,.ta-formside::after{content:"";width:0;pointer-events:none;flex:1 1 0}
.ta-formwrap{width:100%;max-width:400px;flex:0 0 auto}
.ta-card{width:100%;animation:taRise .5s cubic-bezier(.2,.8,.2,1) both}
.ta-mobilebrand{display:none}
.ta-foot{display:flex;align-items:center;justify-content:center;gap:7px;text-align:center;font-size:.82rem;color:var(--muted);margin:26px 0 0;line-height:1.5;max-width:40ch;margin-left:auto;margin-right:auto}
.ta-foot svg{width:15px;height:15px;flex:0 0 auto}

/* how-joining-works explainer */
.ta-howto{background:linear-gradient(135deg,#eef4fc,#e4edfa);border:1px solid #cbdcf3;border-radius:14px;padding:16px 18px;margin-bottom:22px}
.ta-howto-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;background:none;border:0;padding:0;margin:0;font-family:var(--font);text-align:left;color:inherit;cursor:default;
  -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.ta-howto-h{margin:0;font-size:.86rem;font-weight:600;color:var(--brand-ink);letter-spacing:-.01em}
.ta-howto-toggle .ta-howto-chev{display:none;width:19px;height:19px;flex:0 0 auto;color:var(--brand-ink);transition:transform .32s cubic-bezier(.4,0,.2,1)}
/* collapsible region — grid 0fr↔1fr animates the natural height smoothly (no fixed max-height) */
.ta-howto-steps{display:grid;grid-template-rows:1fr;transition:grid-template-rows .34s cubic-bezier(.4,0,.2,1)}
.ta-howto-inner{overflow:hidden;min-height:0}
.ta-howto-list{list-style:none;margin:0;padding:13px 0 2px;display:flex;flex-direction:column;gap:11px}
/* li is flex ONLY for the [badge][text] pair — the step text lives in .ta-howto-tx so it flows as
   normal inline text (otherwise text nodes become separate flex items and wrap into a jumble). */
.ta-howto-list li{display:flex;align-items:flex-start;gap:11px;font-size:.88rem;line-height:1.4;color:var(--ink-2)}
.ta-howto-tx{flex:1 1 auto;min-width:0}
.ta-howto-list i{flex:none;width:22px;height:22px;border-radius:50%;font-style:normal;font-weight:700;font-size:.72rem;margin-top:1px;
  color:#fff;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#2f5fa6,#254c88);box-shadow:0 2px 5px rgba(30,66,128,.24)}
.ta-howto-list b{color:var(--ink);font-weight:600}
.ta-howto-note{color:var(--muted)}

/* segmented toggle */
.ta-tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;background:#e9f0fa;border-radius:13px;padding:5px;margin-bottom:22px}
.ta-tab{position:relative;z-index:1;border:0;background:transparent;padding:11px 8px;border-radius:9px;
  font:600 .94rem var(--font);color:var(--muted);cursor:pointer;transition:color .2s}
.ta-tab[aria-selected="true"]{color:var(--ink)}
.ta-tab-ind{position:absolute;z-index:0;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);
  background:#fff;border-radius:9px;box-shadow:0 2px 8px rgba(31,45,61,.12);transition:transform .24s cubic-bezier(.4,0,.2,1)}
.ta-tabs.is-signup .ta-tab-ind{transform:translateX(100%)}

/* form primitives */
.ta-form{display:block}
.ta-formtitle{font-family:var(--font);font-weight:700;font-size:1.6rem;letter-spacing:-.02em;margin:0 0 6px}
.ta-lead{color:var(--ink-2);font-size:.96rem;margin:0 0 20px;line-height:1.5}
.ta-label{display:block;font-size:.9rem;font-weight:600;color:var(--ink);margin:16px 0 7px}
.ta-form .ta-formtitle+.ta-label{margin-top:4px}
.ta-labelrow{display:flex;align-items:baseline;justify-content:space-between;margin-top:16px}
.ta-labelrow .ta-label{margin:0 0 7px}
.ta-input{width:100%;height:50px;border:1.5px solid var(--field-line);border-radius:var(--r-ctl);background:var(--field);
  padding:0 14px;font:500 .98rem var(--font);color:var(--ink);transition:border-color .16s,box-shadow .16s,background .16s}
.ta-input::placeholder{color:#9aa7b8;font-weight:400}
.ta-input:focus{outline:none;border-color:var(--brand);background:#fff;box-shadow:0 0 0 4px rgba(47,95,166,.2)}
/* Browser autofill (Chrome/Edge/Safari): keep the field visually identical — no yellow/blue wash.
   Inset box-shadow paints the field bg; the 9999s transition defers the UA repaint; focus keeps ring. */
.ta-input:-webkit-autofill,.ta-input:-webkit-autofill:hover{
  -webkit-text-fill-color:var(--ink);caret-color:var(--ink);
  -webkit-box-shadow:0 0 0 100px var(--field) inset;box-shadow:0 0 0 100px var(--field) inset;
  transition:background-color 9999s ease-out 0s}
.ta-input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 100px #fff inset,0 0 0 4px rgba(47,95,166,.2);
  box-shadow:0 0 0 100px #fff inset,0 0 0 4px rgba(47,95,166,.2)}
.ta-code{letter-spacing:.35em;text-align:center;font-weight:600}
.ta-pw{position:relative}
.ta-pw .ta-input{padding-right:46px}
.ta-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;background:none;color:#8794a6;cursor:pointer;border-radius:8px;display:grid;place-items:center;transition:color .15s,background .15s}
.ta-eye:hover{color:var(--ink-2);background:#eef4fb}
.ta-eye svg{width:19px;height:19px}
.ta-eye .ta-eye-off{display:none}
.ta-eye.is-on .ta-eye-open{display:none}
.ta-eye.is-on .ta-eye-off{display:block}

.ta-rules-help{margin:12px 0 0}
.ta-rules-lead{margin:0 0 7px;font-size:.83rem;font-weight:600;color:var(--ink,#1f2d3a)}
.ta-rules{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px}
.ta-field-err{margin:7px 0 0;font-size:.82rem;line-height:1.45;color:#c0392b;overflow-wrap:anywhere}
.ta-field-err[hidden]{display:none}
.ta-rules li{display:flex;align-items:center;gap:9px;font-size:.83rem;color:var(--muted);transition:color .2s}
.ta-dot{width:7px;height:7px;border-radius:50%;background:#cad3df;flex:none;transition:background .2s,transform .2s}
.ta-rules li.met{color:var(--ok-fg)}
.ta-rules li.met .ta-dot{background:#2fae66;transform:scale(1.15)}

.ta-btn{position:relative;overflow:hidden;width:100%;height:52px;margin-top:22px;border:0;border-radius:var(--r-ctl);cursor:pointer;
  font:600 1rem var(--font);color:#fff;background:linear-gradient(135deg,#2f5fa6 0%,#254c88 100%);
  box-shadow:0 6px 18px rgba(30,66,128,.26);transition:transform .16s ease,box-shadow .2s ease,filter .2s ease}
/* hover sheen sweep (::before — ::after is reserved for the loading spinner) */
.ta-btn::before{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;transform:skewX(-20deg);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);transition:left .6s ease}
.ta-btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(30,66,128,.34);filter:brightness(1.04)}
.ta-btn:hover::before{left:135%}
.ta-btn:active{transform:translateY(0) scale(.988)}
.ta-btn.is-loading::before{display:none}
.ta-btn.is-loading{color:transparent!important;pointer-events:none}
.ta-btn.is-loading::after{content:"";position:absolute;top:50%;left:50%;width:19px;height:19px;margin:-10px 0 0 -10px;
  border:2.5px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:ta-spin .6s linear infinite}
@keyframes ta-spin{to{transform:rotate(360deg)}}

.ta-link{background:none;border:0;padding:0;color:var(--brand);font:600 .9rem var(--font);cursor:pointer;text-decoration:none;transition:color .15s ease}
.ta-link:hover{color:#254c88;text-decoration:none}
.ta-forgot{font-weight:500}
.ta-muted{color:var(--ink-2)}
.ta-switch{text-align:center;margin:20px 0 0;font-size:.92rem;color:var(--ink-2)}
.ta-switch .ta-link{font-size:.92rem}
.ta-inline-actions{display:flex;align-items:center;justify-content:space-between;margin-top:18px;flex-wrap:wrap;gap:12px}
.ta-inline-actions.ta-center{justify-content:center}
.ta-inline-form{margin:0}

.ta-alert-slot:empty{display:none}
.ta-alert{padding:11px 14px;border-radius:11px;font-size:.9rem;margin-bottom:18px;line-height:1.45}
.ta-alert-err{background:#fdeceb;border:1px solid #f6cfcb;color:#c0392b}
.ta-alert-ok{background:#eaf7ef;border:1px solid #c6e9d3;color:#1c7d46}
/* a refusal that belongs to no one field: under the pressed button (auth_ui.js sayAt) */
.ma-btn-err{margin:10px 0 0;padding:10px 13px;border-radius:11px;background:#fdeceb;color:#c0392b;
  border:1px solid #f6cfcb;font-size:.88rem;line-height:1.45;overflow-wrap:anywhere}
.ma-btn-err .ma-link{color:inherit;font-weight:600;text-decoration:underline}

@keyframes taRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* ambient background motion — all slow, GPU-friendly (transform/opacity only), deliberately
   staggered durations so the geometry drifts organically (no synchronized/lockstep movement). */
@keyframes taGlow{from{transform:translate3d(0,0,0)}to{transform:translate3d(-34px,26px,0)}}
@keyframes taGlowB{from{transform:translate3d(0,0,0)}to{transform:translate3d(30px,-18px,0)}}
@keyframes taSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes taHexFloat{from{transform:translate3d(0,0,0)}to{transform:translate3d(-18px,-32px,0)}}   /* midground */
@keyframes taHexFloatF{from{transform:translate3d(0,0,0)}to{transform:translate3d(16px,-28px,0)}}   /* foreground (most noticeable) */
@keyframes taHexFloat3{from{transform:translate3d(0,0,0)}to{transform:translate3d(10px,-14px,0)}}    /* background (subtlest) */
@keyframes taHexBreathe{0%,100%{opacity:.62}50%{opacity:.96}}
@keyframes taHexBreathe2{0%,100%{opacity:.22}50%{opacity:.4}}
@keyframes taHexBreatheF{0%,100%{opacity:.72}50%{opacity:1}}
@keyframes taHexTLa{from{transform:translate3d(0,0,0)}to{transform:translate3d(13px,10px,0)}}
@keyframes taHexTLspin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* ── Single-column (≤900): tablet + mobile. Breakpoint matches the QV main auth so both products
   switch to the form-first layout at the SAME width — the two-column brand+form holds cleanly down
   to ~900px (verified), and below it the compact gradient header takes over. ─────────────────── */
@media (max-width:900px){
  .ta-split{grid-template-columns:1fr;height:auto;overflow:visible;min-height:100vh;min-height:100dvh}
  .ta-brand{display:none}
  .ta-formside{padding:0;align-items:stretch;height:auto;overflow:visible;min-height:100vh;min-height:100dvh;background:#fcfdff}
  /* single column has a top header band → disable the desktop centring spacers and top-anchor the form
     directly under it (stable position; the page scrolls naturally, which is keyboard-friendly). */
  .ta-formside::before,.ta-formside::after{display:none}
  /* Center the form in the space below the header so tall single-column screens (e.g. tablets) are
     balanced instead of leaving a big void at the bottom. On short screens the auto margins collapse
     and the page scrolls naturally, so mobile is unaffected. */
  .ta-formwrap{max-width:452px;width:100%;margin:0 auto;padding:clamp(18px,3vh,32px) 0 34px}
  /* Mobile header: compact light lavender band so the original dark "Quiz" + coral "Vidya" logo
     reads crisply (a light pool would wash out the adjacent pill). Brand-ink pill + tagline, one
     faint hexagon accent to echo the desktop geometry. Flows calmly into the light form. */
  .ta-mobilebrand{display:flex;flex-direction:column;gap:9px;
    position:relative;overflow:hidden;padding:20px 20px 21px;
    background:linear-gradient(180deg,#eef4fc 0%,#dae7f8 56%,#c2daf5 100%);border-bottom:1px solid #cddfef}
  .ta-mobilebrand::after{content:"";position:absolute;width:150px;height:136px;top:-42px;right:-32px;pointer-events:none;opacity:.75;
    background:linear-gradient(180deg,rgba(47,95,166,.15),rgba(47,95,166,0));
    clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
  .ta-mobilebrand-row{display:flex;align-items:center;gap:10px 11px;flex-wrap:wrap;position:relative;z-index:1}
  .ta-mobilebrand .ta-logo{font-size:1.2rem;line-height:1.1;margin:0;color:#1a1a1a}
  .ta-mobilebrand .ta-logo span{color:#e86e6c}
  .ta-mchip{display:inline-flex;align-items:center;gap:6px;
    background:rgba(47,95,166,.12);border:1px solid rgba(30,66,128,.2);border-radius:999px;
    padding:5px 10px;font-size:.64rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--brand-ink);white-space:nowrap}
  .ta-mchip svg{width:12px;height:12px;flex:0 0 auto}
  .ta-mtag{position:relative;z-index:1;margin:0;font-size:.88rem;line-height:1.45;font-weight:500;color:#2f5fa6;max-width:40ch}
  .ta-card{padding:26px 22px 32px}
  /* Collapsible "How joining works" — collapsed by default so the form is visible at a glance. */
  .ta-howto-toggle{cursor:pointer}
  .ta-howto-toggle:active{opacity:.72}
  .ta-howto-toggle .ta-howto-chev{display:block}
  .ta-howto-steps{grid-template-rows:0fr}
  .ta-howto-inner{opacity:0;transition:opacity .26s ease}
  .ta-howto.is-open .ta-howto-steps{grid-template-rows:1fr}
  .ta-howto.is-open .ta-howto-inner{opacity:1}
  .ta-howto.is-open .ta-howto-chev{transform:rotate(180deg)}
}
@media (max-width:380px){ .ta-card{padding:22px 16px 30px} .ta-formtitle{font-size:1.36rem} }
/* Narrowest phones (≤340, e.g. 1st-gen iPhone SE): drop the pill's trophy so the logo + label still
   fit on a single uniform row rather than wrapping. */
@media (max-width:340px){ .ta-mobilebrand .ta-mchip svg{display:none} }

/* ── a11y / motion ─────────────────────────────────────────────────────────── */
.ta-tab:focus-visible,.ta-link:focus-visible,.ta-eye:focus-visible,.ta-btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .ta-body *{animation:none!important}
  /* pseudo-elements aren't matched by * — kill the ambient glow/sheen explicitly. The static
     gradient + rings remain, so the design stays complete without motion. */
  .ta-brand::before,.ta-brand::after,.ta-btn::before{animation:none!important}
  .ta-tab-ind,.ta-btn,.ta-link,.ta-howto-steps,.ta-howto-chev,.ta-howto-inner{transition:none!important}
}

/* ===== V19 IAC organic colour-field hero (ported from design lab 20260820-134040) ===== */
/* ============ ORGANIC BACKGROUND OVERRIDE ============ */
/* hide the geometric hexagon SVG + neutralise the clip-path corner planes */
.ma-brand-deco svg,.ta-brand-deco svg{display:none!important}
.ma-brand-deco,.ta-brand-deco{overflow:hidden}
.ma-hex-tl-far,.ma-hex-tl-near,.ta-hex-tl-far,.ta-hex-tl-near{clip-path:none!important;border:0!important;filter:none!important}
/* readability veil — dedicated top-of-deco layer keeping the LEFT headline/logo zone calm on every frame */
.ma-brand::after,.ta-brand::after{position:absolute!important;inset:0!important;top:0!important;left:0!important;right:auto!important;bottom:auto!important;width:auto!important;height:auto!important;border-radius:0!important;filter:none!important;opacity:1!important;transform:none!important;animation:none!important;background:linear-gradient(100deg,rgba(8,22,46,.62) 0%,rgba(8,22,46,.26) 30%,transparent 52%)!important;z-index:0}
@media (prefers-reduced-motion:reduce){
  .ma-brand-deco::before,.ma-brand-deco::after,.ta-brand-deco::before,.ta-brand-deco::after,
  .ma-brand::before,.ta-brand::before,.ma-hex-tl-far,.ma-hex-tl-near,.ta-hex-tl-far,.ta-hex-tl-near{animation:none!important}
}

/* V19 — IAC Organic Colour Fields: deep slate-blue base + one bold coral field sweeping in from the
   right via a broad organic curve (QuizVidya-original path, routed clear of the headline), with a
   darker-coral depth layer and a lighter-coral top-right cap. Very slow ambient drift. */
.ma-brand,.ta-brand{background:linear-gradient(162deg,#3c5c8a 0%,#324e79 48%,#274066 100%)!important}
.ma-hex-tl-near,.ta-hex-tl-near{display:none!important}
.ma-hex-tl-far,.ta-hex-tl-far{inset:auto!important;top:-3%!important;left:-3%!important;right:auto!important;bottom:auto!important;width:106%!important;height:106%!important;clip-path:none!important;filter:none!important;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20680%20960%27%20preserveAspectRatio%3D%27xMidYMid%20slice%27%3E%3Cpath%20d%3D%27M680%20-20%20L296%20-20%20C566%20210%20560%20560%20452%20980%20L700%20980%20Z%27%20fill%3D%27%23e86e6c%27%2F%3E%3Cpath%20d%3D%27M680%20980%20L452%20980%20C532%20824%20624%20866%20700%20800%20L700%20980%20Z%27%20fill%3D%27%23d95d59%27%20opacity%3D%270.55%27%2F%3E%3Cpath%20d%3D%27M680%20-20%20L520%20-20%20C612%2096%20604%20214%20700%20300%20L700%20-20%20Z%27%20fill%3D%27%23f0837e%27%20opacity%3D%270.5%27%2F%3E%3C%2Fsvg%3E") no-repeat center center!important;background-size:cover!important;animation:iacdrift 36s ease-in-out infinite alternate!important;will-change:transform}
.ma-brand::before,.ta-brand::before{width:72%!important;height:60%!important;top:-14%!important;left:-16%!important;filter:blur(52px)!important;opacity:.42!important;background:radial-gradient(circle,rgba(120,162,222,.24),transparent 66%)!important;animation:none!important}
.ma-brand-deco::before,.ta-brand-deco::before{content:"";position:absolute;left:-14%;bottom:-16%;width:52%;height:46%;pointer-events:none;background:radial-gradient(70% 100% at 22% 100%,rgba(70,120,190,.30),transparent 66%);animation:iacdrift2 44s ease-in-out infinite alternate}
@keyframes iacdrift{from{transform:translate3d(0,0,0) scale(1.02)}to{transform:translate3d(2.4%,1.4%,0) scale(1.05)}}
@keyframes iacdrift2{from{transform:translate3d(0,0,0)}to{transform:translate3d(3%,-2%,0)}}


/* ── QuizVidya × IAC co-brand lockup — tournament auth (matches main auth) ─────────── */
.ta-logo-row{display:flex;align-items:center;gap:16px;position:relative;z-index:1}
.ta-lockup-sep{width:1px;height:33px;background:rgba(255,255,255,.30);flex:0 0 auto}
.ta-iac{display:inline-flex;align-items:center;background:#fff;border-radius:10px;padding:7px 12px;
  box-shadow:0 3px 12px rgba(12,26,50,.16);flex:0 0 auto}
.ta-iac-img{height:38px;width:auto;aspect-ratio:4668/1192;display:block}
@media (min-width:901px){ .ta-logo{font-size:1.85rem} }
@media (max-width:900px){
  .ta-mobilebrand .ta-logo-row{gap:11px}
  .ta-mobilebrand .ta-lockup-sep{height:22px;background:rgba(47,95,166,.28)}
  .ta-mobilebrand .ta-iac{padding:5px 9px;box-shadow:0 2px 9px rgba(31,64,110,.18)}
  .ta-mobilebrand .ta-iac-img{height:24px}
}

/* Auth UI refinement 2026-08-30: even corner inset (#1) + larger logos (#3) */
@media (min-width:901px){
  .ta-brand{padding:60px 60px}
  .ta-logo{font-size:2rem}
  .ta-logo-row{gap:17px}
  .ta-lockup-sep{height:36px}
  .ta-iac{padding:8px 13px}
  .ta-iac-img{height:42px}
}

/* Minimal fix for the 1366x768 clip: on short viewports only, trim the vertical padding (bumped to
   60px by the corner-inset change) and gently reduce the headline so the reassurance never clips.
   Desktops >=850px tall are untouched — the reverted hero composition is unchanged there. */
@media (max-height:849px){
  .ta-brand{padding-top:46px;padding-bottom:42px}
  .ta-headline{font-size:clamp(1.9rem,4.4vh,2.6rem)}
}

/* ===== One brand panel on every auth page (owner 2026-09-22) =====
   templates/auth/_brand_panel.html renders the same eyebrow / headline / tag / six-feature grid
   here as on /account/signup; these values are main_auth.css's (.ma-brand:32, .ma-brand-body:77,
   .ma-eyebrow:78, .ma-headline:80, .ma-tag:81, .ma-features:82-87, .ma-brand-foot:88,
   .ma-features-grid:383-388) so the two asides measure the same. Kept here rather than loading
   main_auth.css on these pages: that sheet styles a different form. */
.ta-brand{padding:48px 58px;justify-content:flex-start}
.ta-brand-lockup{margin-bottom:0}
.ta-brand-hero{margin-top:auto;margin-bottom:auto;max-width:465px}
@media (min-width:901px){ .ta-brand{padding:58px 58px} .ta-brand-hero{margin-top:clamp(34px,5vh,52px);margin-bottom:auto} }
.ta-eyebrow{font-size:.77rem;color:#dceaf8;margin:0 0 24px}
.ta-headline{font-size:3.05rem;line-height:1.06;letter-spacing:-.025em;margin:0 0 20px}
.ta-tag{font-size:1.17rem;line-height:1.62;margin:0 0 40px;max-width:450px}
.ta-features{gap:22px}
.ta-features li{gap:16px}
.ta-fi{width:47px;height:47px;border-radius:13px}
.ta-fi svg{width:23px;height:23px}
.ta-ft{padding-top:0;display:block}
.ta-ft small{display:inline}
.ta-iac{border-radius:9px}
.ta-ft b{display:block;font-size:1.07rem}
.ta-ft small{color:#d8e5f4;font-size:.93rem}
.ta-features-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 22px}
.ta-features-grid li{gap:12px}
.ta-features-grid .ta-fi{width:40px;height:40px;border-radius:11px}
.ta-features-grid .ta-fi svg{width:20px;height:20px}
.ta-features-grid .ta-ft b{font-size:.95rem}
.ta-features-grid .ta-ft small{font-size:.84rem}
.ta-brand-foot{margin-top:40px;align-items:center;font-size:.88rem;color:#d0deef;line-height:normal}
.ta-brand-foot svg{margin-top:0;opacity:1}
@media (max-height:849px){ .ta-headline{font-size:3.05rem} }
/* the phone band measures as main_auth.css's (.ma-mobilebrand:253, .ma-mtag:261, .ma-logo:259) */
@media (max-width:900px){
  .ta-mobilebrand{display:block;padding:26px 24px 26px;gap:normal}
  .ta-mobilebrand::after{right:-30px}
  .ta-mobilebrand .ta-logo{font-size:1.25rem;line-height:normal;position:relative;z-index:1}
  .ta-mtag{margin:9px 0 0;font-size:.92rem;line-height:1.5;max-width:300px}
}