/* ================================================================
   auth.css — Login page (index.html), rebranded to match the
   official Auraz landing page (landing/DESIGN.md).
   ----------------------------------------------------------------
   Formal palette: red + white; dark mode: black + red. The left
   brand panel is always the dark lockup; the form side follows the
   page theme. Fonts: Cabinet Grotesk / Satoshi / JetBrains Mono.
   Loads AFTER dark.css, which settles TIES on shared class names — but only ties.
   dark.css also carries `[data-theme="dark"] .form-group input`, which out-specifies
   `.auth-box .form-input` whatever the order, so the dark-mode field rule below has to
   out-specify it in turn rather than rely on coming last.

   This file is loaded by index.html and nothing else, so class names
   here are free to change without hunting the rest of the app.
   ================================================================ */

:root{
  color-scheme:light;
  --az-void:#050505;
  --az-obsidian:#0B0E13;
  --az-ink:#08090C;
  --az-bone:#F4F5F7;
  --az-muted:#9BA3AF;
  /* Both call sites (.auth-eyebrow, .auth-panel-foot) are 10px type on the dark panel,
     where #6B7280 measured 4.01:1 — under 4.5:1 with no large-text exemption to fall
     back on. This is 6.1:1 on the same gradient and still clearly the quiet grey. */
  --az-dim:#8A919C;
  --az-red:#C7312E;
  --az-red-deep:#A22323;
  --az-red-soft:#E2574E;
  --az-red-lift:#F08D86;
  --az-hairline:rgba(255,255,255,.10);
  --az-board-line:rgba(255,255,255,.075);
  --az-tile:rgba(255,255,255,.028);
  --az-tile-hi:rgba(255,255,255,.06);
  --az-ease:cubic-bezier(.32,.72,0,1);
  /* form side, light theme (red on white) */
  --a-bg:#FAFAFA;
  --a-text:#16181D;
  --a-sub:#5B6472;
  --a-line:rgba(10,12,16,.14);
  /* A divider only has to be visible; the edge of a CONTROL has to be findable, which
     1.4.11 puts at 3:1 against what it sits on. --a-line composited to ~1.36:1 over the
     white card, so the two text fields were locatable only by their placeholders. The
     fill is tinted off the card as well, so the field reads as a field before its
     border is even looked for. */
  --a-ctl-line:rgba(10,12,16,.45);
  --a-strong:rgba(10,12,16,.32);
  --a-hover:rgba(10,12,16,.035);
  --a-input-bg:#F7F8FA;
  --a-shell:rgba(10,12,16,.045);
  --a-core:#FFFFFF;
  --a-err-bg:rgba(199,49,46,.07);
  --a-err-text:#A22323;
  /* The status strip turns green on success, and the script used a literal #16a34a at
     three call sites — 3.30:1 on the white card, and unreadable once the page is dark.
     One token, per theme, so both states are legible and there is one place to change. */
  --a-ok-text:#15803D;
  --a-fill-solid:#FFFFFF;
  --a-grain:.022;
}
/* The toggle button + localStorage own the theme here, so there is deliberately no
   prefers-color-scheme override — it would silently fight #themeToggle. `color-scheme`
   is set anyway so native scrollbars and autofill chrome follow the chosen theme. */
html[data-theme="dark"]{
  color-scheme:dark;
  --a-bg:var(--az-void);
  --a-text:var(--az-bone);
  --a-sub:var(--az-muted);
  --a-line:var(--az-hairline);
  --a-ctl-line:rgba(255,255,255,.34);
  --a-strong:rgba(255,255,255,.28);
  --a-hover:rgba(255,255,255,.05);
  --a-input-bg:rgba(5,5,5,.4);
  --a-shell:rgba(255,255,255,.03);
  --a-core:rgba(255,255,255,.04);
  --a-err-bg:rgba(199,49,46,.1);
  --a-err-text:#E07069;
  --a-ok-text:#4ADE80;
  --a-fill-solid:#101318;
  --a-grain:.03;
}

body{
  font-family:'Satoshi', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
  background:var(--a-bg);
}

/* Shared grain, used on BOTH halves so the split reads as one surface. */
:root{
  --az-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ── Split layout ───────────────────────────────────────────── */
.auth-root,
.auth-wrap{
  position:relative;
  min-height:100dvh;
  display:grid;
  grid-template-columns:1.05fr .95fr;
}
/* The seam. A single red hairline sitting exactly on the column boundary
   (1.05 / 2.00 = 52.5%) with a wide soft bleed, so the dark half and the form half
   read as one object joined at a lit edge instead of two pages side by side.
   inset-inline-start keeps it on the boundary when dir="rtl" mirrors the columns. */
.auth-wrap::after{
  content:'';position:absolute;top:0;bottom:0;inset-inline-start:52.5%;
  width:1px;pointer-events:none;z-index:2;
  background:linear-gradient(180deg,
    transparent, rgba(199,49,46,.55) 26%, rgba(199,49,46,.55) 74%, transparent);
  box-shadow:0 0 34px 6px rgba(199,49,46,.10);
}

/* ── Left brand panel: always the dark lockup (black + red) ──── */
.auth-panel{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg, var(--az-obsidian) 0%, var(--az-void) 55%, var(--az-ink) 100%);
  display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;
  text-align:start;
  padding:40px clamp(36px,5.4vw,84px) 34px;
}
.auth-mid{
  position:relative;z-index:1;
  flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:38px 0 30px;
}
.auth-panel::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(56% 44% at 78% 14%, rgba(199,49,46,.14), transparent 62%),
    radial-gradient(42% 38% at 8% 92%, rgba(199,49,46,.06), transparent 60%);
}
.auth-panel::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:var(--az-noise);
}
.auth-brandrow{
  position:relative;z-index:1;flex-shrink:0;
  display:flex;align-items:center;gap:12px;
}
.auth-mark{
  width:40px;height:40px;border-radius:11px;flex-shrink:0;overflow:hidden;
  background:#fff;padding:4px;
  display:inline-flex;align-items:center;justify-content:center;
}
.auth-mark img{width:100%;height:100%;object-fit:contain;display:block}
.auth-wordmark{
  font-family:'Cabinet Grotesk', sans-serif;font-weight:800;
  font-size:22px;letter-spacing:-.02em;color:var(--az-bone);
}

.auth-eyebrow{
  position:relative;z-index:1;margin-bottom:16px;
  font-family:'JetBrains Mono', monospace;font-size:10px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--az-dim);
}
.auth-headline{
  position:relative;z-index:1;
  font-family:'Cabinet Grotesk', sans-serif;font-weight:800;
  font-size:clamp(30px,3.1vw,44px);line-height:1.03;letter-spacing:-.032em;
  color:var(--az-bone);max-width:15ch;
}
/* One red mark in the headline, so the brand colour appears in the copy and not
   only in the buttons. */
.auth-hl-accent{position:relative;white-space:nowrap}
.auth-hl-accent::after{
  content:'';position:absolute;inset-inline:0;bottom:.05em;height:.09em;
  border-radius:2px;opacity:.92;
  background:linear-gradient(90deg, var(--az-red), var(--az-red-soft));
}
.auth-panel-sub{
  position:relative;z-index:1;
  color:var(--az-muted);font-size:15px;line-height:1.6;
  margin-top:16px;max-width:38ch;
}

/* ── The module board ─────────────────────────────────────────
   Not a list of cards: ONE bordered board split by 1px hairlines. Each <li> paints
   its own plate and the grid `gap` lets the board colour through, so the modules
   read as cells of one instrument. Two columns take six modules as a clean 3x2. */
.auth-features{
  list-style:none;padding:0;margin:28px 0 0;
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  background:var(--az-board-line);
  border:1px solid var(--az-board-line);
  border-radius:16px;
  overflow:hidden;
}
.auth-features li{
  display:flex;flex-wrap:wrap;align-items:flex-start;gap:11px;
  padding:14px 15px 15px;
  background:var(--az-tile);
  transition:background .3s var(--az-ease);
}
/* A trailing odd module would leave a hole in a two-column board, so it takes the
   whole row instead. Six modules ship today, so this matches nothing and the board is a
   clean 3x2; add or remove one and the odd cell spans the row with no edit here. */
.auth-features li:last-child:nth-child(odd){grid-column:1 / -1}

.auth-feat-ico{
  flex:0 0 auto;width:32px;height:32px;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(199,49,46,.13);
  border:1px solid rgba(199,49,46,.30);
  color:var(--az-red-soft);
  transition:background .3s var(--az-ease), border-color .3s var(--az-ease), color .3s var(--az-ease);
}
.auth-feat-ico svg{width:17px;height:17px;display:block}
.auth-feat-txt{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 140px}
.auth-features li b{
  font-family:'Cabinet Grotesk', sans-serif;font-weight:700;
  font-size:13px;line-height:1.25;letter-spacing:-.005em;color:var(--az-bone);
}
.auth-feat-txt > span{color:var(--az-muted);font-size:11.5px;line-height:1.5}

/* Tolerate the older flat shape `<li><b>…</b><span>…</span></li>`: without a
   .auth-feat-txt wrapper the two children would sit side by side, so force them onto
   their own rows. A cell added that way still lines up — it just has no icon chip. */
.auth-features li > b{flex:1 1 100%}
.auth-features li > span:not(.auth-feat-ico):not(.auth-feat-txt){
  flex:1 1 100%;color:var(--az-muted);font-size:11.5px;line-height:1.5;
}

@media (hover:hover){
  .auth-features li:hover{background:var(--az-tile-hi)}
  .auth-features li:hover .auth-feat-ico{
    background:rgba(199,49,46,.22);border-color:rgba(199,49,46,.5);color:var(--az-red-lift);
  }
}

.auth-panel-foot{
  position:relative;z-index:1;margin-top:26px;
  display:inline-flex;align-items:center;gap:9px;
  font-family:'JetBrains Mono', monospace;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--az-dim);
}
.auth-panel-foot::before{
  content:'';width:5px;height:5px;border-radius:50%;flex:0 0 auto;
  background:var(--az-red);box-shadow:0 0 0 3px rgba(199,49,46,.16);
  animation:azPulse 2.8s var(--az-ease) infinite;
}
@keyframes azPulse{
  0%,100%{box-shadow:0 0 0 3px rgba(199,49,46,.16)}
  50%    {box-shadow:0 0 0 6px rgba(199,49,46,.04)}
}

/* legacy hooks kept harmless */
.auth-logo{display:none}

/* ── Right form panel: follows the theme ───────────────────── */
.auth-form-wrap{
  position:relative;
  background:var(--a-bg);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:48px clamp(24px,4vw,48px);
  transition:background .3s var(--az-ease);
}
/* Same grain as the panel, at a lower opacity — the texture is what makes both
   halves feel like one printed surface. */
.auth-form-wrap::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  opacity:var(--a-grain);background-image:var(--az-noise);
}
.auth-box{
  position:relative;z-index:1;
  width:100%;max-width:440px;
  background:var(--a-shell);
  border:1px solid var(--a-line);
  border-radius:1.5rem;
  padding:6px;
  box-shadow:0 30px 70px -40px rgba(0,0,0,.35);
}
/* Echo of the seam on the card's top edge, so the sheet belongs to the stage. */
.auth-box::before{
  content:'';position:absolute;inset-inline:24%;top:-1px;height:1px;
  background:linear-gradient(90deg, transparent, var(--az-red), transparent);
  opacity:.7;
}
.auth-box-core{
  background:var(--a-core);
  border-radius:calc(1.5rem - .375rem);
  padding:28px 26px;
}
html[data-theme="dark"] .auth-box-core{
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.028));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.12);
}

.lang-row{display:flex;gap:6px;justify-content:flex-end;margin-bottom:20px}
/* 44px is the pointer-target floor (WCAG 2.5.8 / the iOS and Android guidance); at 38
   these were two 12px words a thumb had to aim at. */
.lang-btn{
  min-height:44px;padding:5px 16px;border-radius:999px;
  border:1px solid var(--a-line);background:transparent;
  font-family:inherit;font-size:12px;font-weight:700;color:var(--a-sub);
  cursor:pointer;transition:border-color .25s var(--az-ease), color .25s var(--az-ease);
}
.lang-btn:hover{color:var(--a-text)}
.lang-btn.active{border-color:var(--az-red);color:var(--az-red)}
html[data-theme="dark"] .lang-btn.active{color:var(--az-red-soft);border-color:rgba(199,49,46,.55)}

.auth-title{
  font-family:'Cabinet Grotesk', sans-serif;font-weight:800;
  font-size:27px;letter-spacing:-.03em;color:var(--a-text);
  margin-bottom:5px;
}
.auth-sub{font-size:13.5px;color:var(--a-sub);margin-bottom:22px}

/* ── Status strip ─────────────────────────────────────────────
   One element serves errors AND confirmations. boot() writes the state as an inline
   `color` (green on success, cleared on failure), so the plate, the rule and the dot
   are all mixed from currentColor and follow it without a second class. Kept as
   display:block — the script toggles style.display='block' directly. */
.auth-error{
  display:none;position:relative;
  margin:0 0 16px;padding:11px 14px;padding-inline-start:34px;
  border-radius:10px;
  font-size:12.5px;font-weight:600;line-height:1.5;
  color:var(--a-err-text);
  background:var(--a-err-bg);
  border:1px solid rgba(199,49,46,.34);
  border-inline-start:3px solid var(--az-red);
}
@supports (background: color-mix(in srgb, red 10%, transparent)){
  .auth-error{
    background:color-mix(in srgb, currentColor 10%, transparent);
    border-color:color-mix(in srgb, currentColor 34%, transparent);
    border-inline-start-color:currentColor;
  }
}
.auth-error::before{
  content:'';position:absolute;inset-inline-start:15px;top:1.05em;
  width:7px;height:7px;border-radius:50%;background:currentColor;
}
.auth-error.show{display:block}

/* TEMP launch-gate notice — themed rather than hardcoded light, so it stays legible
   when the page is in dark mode. */
.auth-closed{
  padding:16px 18px;border:1px solid var(--a-line);border-radius:14px;
  background:var(--a-shell);color:var(--a-sub);
  font-size:14px;line-height:1.65;
}
.auth-closed b{
  display:block;margin-bottom:4px;color:var(--a-text);
  font-family:'Cabinet Grotesk', sans-serif;font-weight:800;font-size:15px;
}
.auth-closed .ar{display:block;margin-top:6px;direction:rtl;text-align:right;opacity:.8}

.form-group{margin-bottom:15px}
.auth-box .form-label{
  display:block;font-size:12.5px;font-weight:700;color:var(--a-text);
  text-transform:none;letter-spacing:0;margin-bottom:6px;
}
.auth-box .form-input{
  width:100%;min-height:46px;padding:12px 14px;
  font-family:inherit;font-size:14.5px;color:var(--a-text);
  background:var(--a-input-bg);
  border:1.5px solid var(--a-ctl-line);border-radius:11px;
  outline:none;
  transition:border-color .2s var(--az-ease), box-shadow .2s var(--az-ease);
}
/* dark.css:67-69 is `[data-theme="dark"] .form-group input` — (0,2,1), which beats
   `.auth-box .form-input` (0,2,0) however late this file loads, so dark mode painted
   GitHub's #0D1117 / #E6EDF3 into the brand card. Out-specify it rather than reorder
   the stylesheets, which would cost every other rule here its win. */
html[data-theme="dark"] .auth-box .form-input{
  background:var(--a-input-bg);color:var(--a-text);border-color:var(--a-ctl-line);
}
.auth-box .form-input::placeholder{color:var(--a-sub);opacity:.6}
.auth-box .form-input:hover{border-color:var(--a-strong)}
.auth-box .form-input:focus{
  border-color:var(--az-red);
  box-shadow:0 0 0 3px rgba(199,49,46,.18);
}
/* Chrome autofill: repaint its pale-blue fill in brand surface colors */
.auth-box .form-input:-webkit-autofill,
.auth-box .form-input:-webkit-autofill:hover,
.auth-box .form-input:-webkit-autofill:focus,
.auth-box .form-input:-webkit-autofill:active{
  -webkit-box-shadow:0 0 0 1000px var(--a-fill-solid) inset;
  -webkit-text-fill-color:var(--a-text);
  caret-color:var(--a-text);
  /* Outlast the fill so the pale colour never flashes in before being covered. */
  transition:background-color 100000s ease-in-out 0s;
}
/* The standard selector, for Firefox. Its own block on purpose: a browser that does
   not recognise :autofill discards the entire rule it appears in, which would take
   the -webkit- version above down with it. */
.auth-box .form-input:autofill{
  box-shadow:0 0 0 1000px var(--a-fill-solid) inset;
  -webkit-text-fill-color:var(--a-text);
  caret-color:var(--a-text);
}

.pw-eye{
  position:absolute;inset-inline-end:7px;bottom:3px;
  width:40px;height:40px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;cursor:pointer;padding:0;
  color:var(--a-sub);
  transition:color .2s var(--az-ease);
}
.pw-eye:hover{color:var(--a-text)}
.pw-eye svg{width:18px;height:18px;display:block}

/* A paused sign-in button keeps its place in the tab order (aria-disabled, not
   `disabled`) so a screen-reader user is told WHY rather than finding it gone. */
.btn-auth.is-paused{opacity:.55;cursor:not-allowed;box-shadow:none}

/* The negative top margin absorbs the link's own padding, so the row occupies the
   same 29px it always did while the target inside it grows to a thumb's worth. */
.auth-forgot-row{text-align:end;margin:-12px 0 6px}
.auth-forgot-row a{
  display:inline-block;padding:8px 4px;
  font-size:12.5px;font-weight:600;color:var(--a-sub);text-decoration:none;
  transition:color .2s var(--az-ease);
}
.auth-forgot-row a:hover{color:var(--az-red)}
html[data-theme="dark"] .auth-forgot-row a:hover{color:var(--az-red-soft)}

/* PRIMARY action — the only glowing element on the page. */
.btn-auth{
  width:100%;min-height:48px;padding:13px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--az-red);color:#fff;
  border:none;border-radius:999px;
  font-family:inherit;font-size:15px;font-weight:700;letter-spacing:-.005em;
  cursor:pointer;margin-top:4px;
  box-shadow:0 12px 28px -14px rgba(199,49,46,.9),
             inset 0 1px 0 0 rgba(255,255,255,.14);
  transition:background .25s var(--az-ease), transform .25s var(--az-ease), box-shadow .25s var(--az-ease);
}
.btn-auth:hover{background:var(--az-red-deep);box-shadow:0 16px 34px -14px rgba(199,49,46,1), inset 0 1px 0 0 rgba(255,255,255,.14)}
.btn-auth:active{transform:scale(.985)}
.btn-auth:disabled{opacity:.6;cursor:not-allowed;box-shadow:none}

/* SECONDARY path, below the primary and deliberately quieter. */
.auth-or{
  display:flex;align-items:center;gap:12px;
  margin:18px 0 14px;
  font-family:'JetBrains Mono', monospace;font-size:10px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--a-sub);
}
.auth-or::before,.auth-or::after{content:'';flex:1;height:1px;background:var(--a-line)}
.btn-google{
  width:100%;min-height:46px;padding:11px 14px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:transparent;color:var(--a-text);
  border:1px solid var(--a-line);border-radius:999px;
  font-family:inherit;font-size:14px;font-weight:600;
  cursor:pointer;
  transition:border-color .25s var(--az-ease), background .25s var(--az-ease);
}
.btn-google:hover{border-color:var(--a-strong);background:var(--a-hover)}
.btn-google svg{flex:0 0 auto}
/* Stable loading state: the spinner is absolutely positioned so the label text never
   reflows — the icon no longer jumps when the button is busy. */
#btnGoogle{position:relative}
#btnGoogle.loading{opacity:.72;pointer-events:none}
#btnGoogle.loading::after{
  content:"";position:absolute;inset-inline-end:14px;top:50%;
  width:15px;height:15px;margin-top:-8px;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  animation:aurazspin .7s linear infinite;
}
@keyframes aurazspin{to{transform:rotate(360deg)}}

/* No opacity. --a-sub is already the quiet grey, and knocking it back to .85 took
   10.5px type to 4.25:1 — the fade was doing nothing the colour was not. */
.auth-hint{
  margin-top:18px;text-align:center;
  font-family:'JetBrains Mono', monospace;
  font-size:10.5px;color:var(--a-sub);letter-spacing:.06em;
}
.auth-hint strong{font-weight:500;color:var(--a-text)}
.auth-links{
  margin-top:18px;display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-size:12.5px;font-weight:600;
}
.auth-links a{color:var(--a-sub);text-decoration:none;transition:color .2s var(--az-ease)}
.auth-links a:hover{color:var(--a-text)}
.auth-links a#startFreeLink{color:var(--az-red);font-weight:700}
html[data-theme="dark"] .auth-links a#startFreeLink{color:var(--az-red-soft)}
.auth-links a#startFreeLink:hover{color:var(--az-red-deep)}
html[data-theme="dark"] .auth-links a#startFreeLink:hover{color:var(--az-red-lift)}
/* Same reason as .auth-hint above: at .7 this 11px line measured under 3:1. */
.auth-footer{margin-top:20px;text-align:center;font-size:11px;color:var(--a-sub)}

/* theme toggle (fixed, top corner) */
.auth-theme-btn{
  position:fixed;top:16px;inset-inline-end:16px;z-index:100;
  width:40px;height:40px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:var(--a-bg);border:1px solid var(--a-line);color:var(--a-text);
  cursor:pointer;font-size:16px;
  transition:border-color .25s var(--az-ease);
}
.auth-theme-btn:hover{border-color:var(--az-red)}

/* ── Responsive ─────────────────────────────────────────────── */

/* Narrow desktop / small laptop: the board drops to one column before the cells
   start hyphenating. */
@media (max-width:1080px){
  .auth-features{grid-template-columns:minmax(0,1fr)}
}

/* Tablet and below: one column. The panel is NOT hidden — it moves below the form,
   so the form is immediately reachable and the modules still make the case. */
@media (max-width:900px){
  .auth-root,.auth-wrap{grid-template-columns:1fr;min-height:0}
  .auth-wrap::after{display:none}
  .auth-form-wrap{order:1;min-height:100dvh;padding:56px 22px 40px}
  .auth-panel{
    order:2;padding:34px 22px 30px;
    border-top:1px solid rgba(199,49,46,.35);
  }
  .auth-mid{padding:26px 0 20px}
  .auth-headline{font-size:28px;max-width:22ch}
  .auth-panel-sub{font-size:14px;margin-top:12px}
  .auth-features{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:22px}
  .auth-features li{padding:12px 13px}
  /* Titles alone stay scannable at this width; the one-liners would double the
     panel's height on a phone for copy the user has already been sold on above. */
  .auth-feat-txt > span,
  .auth-features li > span:not(.auth-feat-ico):not(.auth-feat-txt){display:none}
  .auth-feat-txt{justify-content:center;min-height:32px}
}

@media (max-width:560px){
  .auth-form-wrap{padding:64px 16px 32px}
  .auth-box{border-radius:20px;padding:5px}
  .auth-box-core{padding:22px 18px}
  /* 16px is the threshold below which iOS zooms the page on focus. */
  .auth-box .form-input{font-size:16px;min-height:48px}
  .auth-features{grid-template-columns:minmax(0,1fr)}
  .auth-links{flex-direction:column;align-items:stretch;text-align:center;gap:10px}
  .auth-headline{font-size:25px}
}

@media (prefers-reduced-motion: reduce){
  .auth-features li,.auth-feat-ico,.lang-btn,.btn-auth,.btn-google,
  .auth-box .form-input,.auth-links a,.auth-forgot-row a,.pw-eye,
  .auth-theme-btn,.auth-form-wrap{transition:none}
  .auth-panel-foot::before{animation:none}
  #btnGoogle.loading::after{animation:none;border-right-color:currentColor;opacity:.5}
  .btn-auth:active{transform:none}
}