/* ============================================================
   ZYORA — Auth pages
   Login · Register · Forgot · Reset · Verify
   ZYORA colour theme: deep teal for trust, marigold for the one
   thing you want people to notice. Change the look by editing the
   variable values below; nothing else needs to change.
   Fonts: Bricolage Grotesque (headings), Figtree (body),
   JetBrains Mono (codes).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700&family=Figtree:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

.auth-shell {
  /* surfaces */
  --a-bg: #FFFFFF;          /* form panel, inputs   (surface)   */
  --a-bg-2: #F4F7F7;        /* page                             */
  --a-bg-3: #E9F0F0;        /* tabs, soft fills     (surface-2) */
  /* text */
  --a-fg: #0B2A2F;          /* headings, main text  (ink)       */
  --a-fg-2: #3E5A5E;        /* paragraphs           (ink-2)     */
  --a-fg-3: #5F797C;        /* placeholders, notes  (ink-3)     */
  --a-fg-4: #BFD0D0;
  /* lines */
  --a-line: #D6E2E2;
  --a-line-2: #BFD0D0;
  /* main button + links */
  --a-accent: #0B756D;
  --a-accent-h: #095F59;
  --a-accent-fg: #FFFFFF;
  --a-link: #0A6B64;
  /* marigold highlight */
  --a-sun: #F2A33A;
  --a-sun-soft: #FDF0DA;
  --a-sun-ink: #3B2400;
  --a-ring: rgba(11,117,109,.22);   /* focus glow on fields */
  /* states */
  --a-success: #12805C;
  --a-success-bg: #E3F5EE;
  --a-danger: #C62828;
  --a-danger-bg: #FDECEC;
  /* password strength: weak -> strong */
  --a-m1: var(--a-danger);
  --a-m2: var(--a-sun);
  --a-m3: #0E8F86;
  --a-m4: var(--a-success);

  --a-font: 'Figtree', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --a-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --a-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --a-r-sm: 10px;
  --a-r-md: 12px;
  --a-r-lg: 20px;
  --a-shadow: 0 30px 60px -32px rgba(10,47,52,.38);
  --a-ease: cubic-bezier(0.22, 1, 0.36, 1);

  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--a-bg);
  color: var(--a-fg);
  font-family: var(--a-font);
  font-size: 16px;
  line-height: 1.6;
}

html[data-theme="dark"] .auth-shell {
  --a-bg: #0C2428;
  --a-bg-2: #07191C;
  --a-bg-3: #10302F;
  --a-fg: #E9F4F3;
  --a-fg-2: #A9C4C4;
  --a-fg-3: #86A3A4;
  --a-fg-4: #285055;
  --a-line: #1B3D40;
  --a-line-2: #285055;
  --a-accent: #2DD4BF;
  --a-accent-h: #5EEAD4;
  --a-accent-fg: #04252A;
  --a-link: #5EEAD4;
  --a-sun-soft: #3A2B10;
  --a-sun-ink: #FBD99A;
  --a-ring: rgba(45,212,191,.28);
  --a-success: #4ADE9E;
  --a-success-bg: rgba(74,222,158,.12);
  --a-danger: #FF8A8A;
  --a-danger-bg: rgba(255,138,138,.12);
  --a-m3: #2DD4BF;
  --a-shadow: 0 30px 60px -32px rgba(0,0,0,.7);
}

.auth-shell *,
.auth-shell *::before,
.auth-shell *::after { box-sizing: border-box; font-family: inherit; }

/* Headings and wordmark use the display face */
.auth-shell .auth-box h1,
.auth-shell .ab-copy h2,
.auth-shell .ab-word,
.auth-shell .auth-mlogo b { font-family: var(--a-display); }

/* Keyboard focus ring for links and buttons: teal, not orange */
.auth-shell a:focus-visible,
.auth-shell button:focus-visible {
  outline: 2px solid var(--a-accent);
  outline-offset: 2px;
}
/* Text fields: teal border + soft glow, no outline */
.auth-shell .auth-in input:focus-visible,
.auth-shell .auth-box .vl-boxes .vl-box:focus-visible {
  outline: none;
  border-color: var(--a-accent);
  box-shadow: 0 0 0 3px var(--a-ring);
}

/* ══════════ LEFT PANEL — deep teal band (same in light and dark) ══════════ */
.auth-brand {
  --b-ink: #E7F5F3;
  --b-ink-2: #A9CBC9;
  --b-deep: #0A2F34;
  --b-deep-2: #0F4046;
  --b-deep-3: #14505A;
  --b-line: #1D5258;
  --b-ok: #4ADE9E;
  --b-btn: #2DD4BF;
  --b-btn-fg: #04252A;
  --bot-head: #FFFFFF;
  --bot-line: #0B2A2F;
  --bot-ear: #0E8F86;
  --bot-visor: #0A2F34;
  --bot-glow: #5EEAD4;
  --sun: #F2A33A;

  position: relative;
  overflow: hidden;
  padding: 40px 56px 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  background: linear-gradient(160deg, #0C3A40 0%, #082A2F 100%);
  color: var(--b-ink);
}
.auth-brand::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--b-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--b-line) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(70% 60% at 30% 30%, #000 20%, transparent 80%);
  mask-image: radial-gradient(70% 60% at 30% 30%, #000 20%, transparent 80%);
  opacity: 0.45;
  pointer-events: none;
}
.auth-brand > * { position: relative; z-index: 1; }

.ab-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  color: var(--b-ink);
  text-decoration: none;
  border-radius: var(--a-r-sm);
}
.ab-logo svg { width: 38px; height: 38px; display: block; }
.ab-word {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

.ab-copy { max-width: 460px; }
.ab-copy h2 {
  margin: 0 0 14px;
  font-size: clamp(30px, 3.2vw, 44px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--b-ink);
}
.ab-copy p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--b-ink-2);
  max-width: 420px;
}

/* Example bot window */
.ab-win {
  width: 100%;
  max-width: 480px;
  border: 1px solid var(--b-line);
  border-radius: var(--a-r-lg);
  background: var(--b-deep-2);
  box-shadow: 0 30px 60px -32px rgba(0,0,0,.6);
  overflow: hidden;
}
.ab-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  background: var(--b-deep);
  border-bottom: 1px solid var(--b-line);
}
.ab-bar i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--b-line);
}
.ab-bar b {
  margin-left: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--b-ink-2);
}
.ab-body {
  display: grid;
  grid-template-columns: 150px 1fr;
  min-height: 190px;
}
.ab-side {
  padding: 14px;
  border-right: 1px solid var(--b-line);
  background: var(--b-deep);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ab-side small {
  font-size: 12px;
  font-weight: 600;
  color: var(--b-ink-2);
  margin-bottom: 2px;
}
.ab-src {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 8px;
  background: var(--b-deep-2);
  border: 1px solid var(--b-line);
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--b-ink);
  opacity: 0;
  animation: abIn 500ms var(--a-ease) forwards;
}
.ab-src:nth-of-type(2) { animation-delay: .2s; }
.ab-src:nth-of-type(3) { animation-delay: .4s; }
.ab-src:nth-of-type(4) { animation-delay: .6s; }
.ab-src svg {
  flex: none;
  width: 11px; height: 11px;
  color: var(--b-ok);
}
@keyframes abIn { to { opacity: 1; } }

.ab-chat {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: flex-end;
  min-height: 190px;
}
.ab-bub {
  max-width: 90%;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.5;
  opacity: 0;
  animation: abIn 500ms var(--a-ease) forwards;
}
.ab-bub.u {
  align-self: flex-end;
  background: var(--b-btn);
  color: var(--b-btn-fg);
  font-weight: 500;
  border-bottom-right-radius: 4px;
  animation-delay: .9s;
}
.ab-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 100%;
  opacity: 0;
  animation: abIn 500ms var(--a-ease) 1.4s forwards;
}
.ab-row .ab-bub { opacity: 1; animation: none; }
.ab-bub.b {
  background: var(--b-deep-3);
  border: 1px solid var(--b-line);
  color: var(--b-ink);
  border-bottom-left-radius: 4px;
}
.ab-bot { flex: none; width: 42px; height: 42px; display: block; overflow: visible; }

/* Bot face (colours come from the --bot-* variables) */
.bf-stem  { fill: none; stroke: var(--bot-head); stroke-width: 4; stroke-linecap: round; }
.bf-sun   { fill: var(--sun); }
.bf-ear   { fill: var(--bot-ear); }
.bf-head  { fill: var(--bot-head); stroke: var(--bot-line); stroke-width: 4; }
.bf-visor { fill: var(--bot-visor); }
.bf-glow  { fill: var(--bot-glow); }
.bf-smile { fill: none; stroke: var(--bot-glow); stroke-width: 3.5; stroke-linecap: round; }
.bf-cheek { fill: var(--sun); opacity: .8; }
.bf-eyes  { transform-box: fill-box; transform-origin: center; animation: blink 5.6s infinite; }
@keyframes blink {
  0%, 94%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(.08); }
}

.ab-chan {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.ab-chan span {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(74,222,158,.12);
  color: var(--b-ok);
  border: 1px solid rgba(74,222,158,.3);
}

/* ══════════ RIGHT PANEL — form ══════════ */
.auth-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 24px 32px;
  background: var(--a-bg);
}

.auth-back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  margin-left: -8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--a-fg-2);
  text-decoration: none;
  border-radius: var(--a-r-sm);
  transition: color .15s var(--a-ease), background .15s var(--a-ease);
}
.auth-back:hover {
  color: var(--a-fg);
  background: var(--a-bg-3);
}
.auth-back svg { width: 14px; height: 14px; }

.auth-main {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 32px 0;
}
.auth-box {
  width: 100%;
  max-width: 400px;
  animation: authIn 500ms var(--a-ease) both;
}
@keyframes authIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Small logo shown above the form when the left panel is hidden (markup is in includes/auth_brand.php) */
.auth-mlogo {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 18px 24px 0;
  color: var(--a-fg);
  text-decoration: none;
  background: var(--a-bg);
}
.auth-mlogo svg { width: 34px; height: 34px; display: block; }
.auth-mlogo b {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

/* If an older login.php/register.php still prints its own small logo inside the form, hide it: auth_brand.php already provides one */
.auth-box .auth-mlogo { display: none !important; }

/* Tabs */
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: 4px;
  margin-bottom: 32px;
  background: var(--a-bg-3);
  border-radius: var(--a-r-md);
}
.auth-tabs a {
  text-align: center;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--a-fg-2);
  text-decoration: none;
  border-radius: var(--a-r-sm);
  transition: background .15s var(--a-ease), color .15s var(--a-ease);
}
.auth-tabs a:hover { color: var(--a-fg); }
.auth-tabs a.on {
  background: var(--a-bg);
  color: var(--a-fg);
  box-shadow: 0 1px 3px rgba(10,47,52,.14);
}
html[data-theme="dark"] .auth-tabs a.on { background: var(--a-bg-2); }

.auth-box h1 {
  margin: 0 0 8px;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--a-fg);
}
.auth-sub {
  margin: 0 0 28px;
  font-size: 15px;
  color: var(--a-fg-2);
  line-height: 1.55;
}

/* Form fields */
.auth-f { margin-bottom: 16px; }
.auth-f label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--a-fg);
}
.auth-in { position: relative; }
.auth-in > svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--a-fg-3);
  pointer-events: none;
  z-index: 1;
}
.auth-in input {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 14px 0 40px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  color: var(--a-fg);
  background: var(--a-bg);
  border: 1px solid var(--a-line-2);
  border-radius: var(--a-r-md);
  transition: border-color .15s var(--a-ease), box-shadow .15s var(--a-ease);
  -webkit-appearance: none;
  appearance: none;
}
.auth-in input::placeholder { color: var(--a-fg-3); }
.auth-in input:hover { border-color: var(--a-fg-3); }
.auth-in input:focus {
  border-color: var(--a-accent);
}

/* Password reveal */
.auth-eye {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: var(--a-fg-2);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px;
  transition: color .15s var(--a-ease), background .15s var(--a-ease);
}
.auth-eye:hover { color: var(--a-fg); background: var(--a-bg-3); }

/* Password strength meter (JS sets data-s="1..4") */
.auth-meter {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-top: 8px;
}
.auth-meter i {
  height: 4px;
  border-radius: 99px;
  background: var(--a-line-2);
  transition: background .3s var(--a-ease);
}
.auth-meter[data-s="1"] i:nth-child(-n+1) { background: var(--a-m1); }
.auth-meter[data-s="2"] i:nth-child(-n+2) { background: var(--a-m2); }
.auth-meter[data-s="3"] i:nth-child(-n+3) { background: var(--a-m3); }
.auth-meter[data-s="4"] i:nth-child(-n+4) { background: var(--a-m4); }
.auth-hint {
  margin-top: 6px;
  min-height: 18px;
  font-size: 13px;
  color: var(--a-fg-3);
  line-height: 1.4;
}
.auth-hint.ok  { color: var(--a-success); }
.auth-hint.bad { color: var(--a-danger); }

/* Buttons */
.auth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  padding: 0 18px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  border-radius: var(--a-r-md);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s var(--a-ease), border-color .15s var(--a-ease), transform .1s var(--a-ease);
}
.auth-btn:active { transform: scale(.985); }
.auth-btn:disabled { opacity: .55; cursor: not-allowed; }

.auth-btn.pri {
  background: var(--a-accent);
  color: var(--a-accent-fg);
  margin-top: 6px;
}
.auth-btn.pri:hover { background: var(--a-accent-h); }

.auth-btn.ggl {
  background: var(--a-bg);
  color: var(--a-fg);
  border-color: var(--a-line-2);
}
.auth-btn.ggl:hover { background: var(--a-bg-3); border-color: var(--a-fg-3); }
.auth-btn.ggl svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  display: block;
}

/* Continue with Pi Network: same white / dark-surface look as the Google button.
   Selector is stronger than the page's inline .pi-login rules, so no page edit is needed. */
.auth-shell .auth-btn.pi-login {
  background: var(--a-bg) !important;
  color: var(--a-fg) !important;
  border: 1px solid var(--a-line-2) !important;
  border-radius: var(--a-r-md);
  height: 48px;
  min-height: 48px;
  padding: 0 18px;
  margin: 12px 0;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  filter: none;
}
.auth-shell .auth-btn.pi-login:hover { background: var(--a-bg-3) !important; border-color: var(--a-fg-3) !important; filter: none; }
.auth-shell .auth-btn.pi-login:focus-visible { outline: 2px solid var(--a-accent); outline-offset: 2px; }
.auth-shell .auth-btn.pi-login .pi-mark {
  width: 24px; height: 24px; flex: 0 0 24px;
  font-size: 17px; line-height: 1;
  background: var(--a-bg-3);
  color: var(--a-fg);
}
/* To show the official Pi Network logo: save Pi's official logo file as assets/img/pi-logo.svg,
   then uncomment the next 3 lines (the round π placeholder above is replaced by the logo).
.auth-shell .auth-btn.pi-login .pi-mark { background: url('../img/pi-logo.svg') center / contain no-repeat; font-size: 0; }
*/

/* Divider */
.auth-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--a-fg-3);
  font-size: 13px;
  font-weight: 500;
}
.auth-or::before,
.auth-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--a-line);
}

/* Links use the link colour, not the button colour */
.auth-alt {
  margin: 24px 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--a-fg-2);
}
.auth-alt a {
  color: var(--a-link);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: transparent;
  transition: text-decoration-color .15s var(--a-ease);
}
.auth-alt a:hover { text-decoration-color: currentColor; }

.auth-row {
  display: flex;
  justify-content: flex-end;
  margin: -4px 0 18px;
  font-size: 14px;
}
.auth-row a {
  color: var(--a-link);
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
}
.auth-row a:hover { text-decoration: underline; text-underline-offset: 3px; }

.auth-legal {
  margin-top: 20px;
  text-align: center;
  font-size: 13px;
  color: var(--a-fg-3);
  line-height: 1.55;
}
.auth-legal a {
  color: var(--a-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Alerts */
.auth-err {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 20px;
  padding: 12px 14px;
  border-radius: var(--a-r-sm);
  font-size: 14px;
  line-height: 1.5;
  background: var(--a-danger-bg);
  color: var(--a-danger);
  border: 1px solid color-mix(in srgb, var(--a-danger) 25%, transparent);
}
.auth-err svg {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

.auth-ok {
  margin: 0 0 20px;
  padding: 12px 14px;
  border-radius: var(--a-r-sm);
  font-size: 14px;
  line-height: 1.5;
  background: var(--a-success-bg);
  color: var(--a-success);
  border: 1px solid color-mix(in srgb, var(--a-success) 28%, transparent);
}

/* Code input (forgot / verify) */
.auth-code input {
  letter-spacing: 0.35em;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  padding-left: 14px;
  font-family: var(--a-mono);
}
.auth-code input::placeholder {
  letter-spacing: 0.35em;
  font-family: var(--a-mono);
}

/* Email code verification box */
.vl-icon {
  width: 48px;
  height: 48px;
  margin: 0 0 20px;
  display: grid;
  place-items: center;
  border-radius: var(--a-r-md);
  color: var(--a-accent);
  background: var(--a-bg-3);
}
.vl-icon svg { width: 22px; height: 22px; display: block; }

.vl-mail {
  color: var(--a-fg);
  font-weight: 600;
  word-break: break-all;
}

.vl-boxes {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  margin-top: 6px;
}
.auth-box .vl-boxes .vl-box {
  display: block;
  width: 100%;
  min-width: 0;
  height: 52px;
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: var(--a-mono);
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--a-fg);
  background: var(--a-bg);
  border: 1px solid var(--a-line-2);
  border-radius: var(--a-r-sm);
  caret-color: var(--a-accent);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s var(--a-ease);
}
.auth-box .vl-boxes .vl-box:focus {
  border-color: var(--a-accent);
}

.vl-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 14px;
  margin-top: 18px;
}
.vl-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.vl-link {
  border: 0;
  background: none;
  padding: 6px 2px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--a-link);
  cursor: pointer;
  border-radius: 6px;
}
.vl-link:hover:not(:disabled) { text-decoration: underline; }
.vl-link:disabled { color: var(--a-fg-3); cursor: not-allowed; }
.vl-link.vl-muted { color: var(--a-fg-2); font-weight: 500; }
.vl-timer {
  font-size: 13px;
  color: var(--a-fg-3);
  font-variant-numeric: tabular-nums;
}

/* register.php paints the strength bars and the match message with inline colours.
   These rules swap them for theme colours, so register.php needs no change. */
.auth-meter i[style*="217, 45, 32"]  { background: var(--a-m1) !important; }
.auth-meter i[style*="247, 144, 9"]  { background: var(--a-m2) !important; }
.auth-meter i[style*="132, 204, 22"] { background: var(--a-m3) !important; }
.auth-meter i[style*="18, 161, 80"]  { background: var(--a-m4) !important; }
.auth-hint[style*="18, 161, 80"]  { color: var(--a-success) !important; }
.auth-hint[style*="217, 45, 32"]  { color: var(--a-danger) !important; }

/* ══════════ RESPONSIVE ══════════ */
@media (max-width: 960px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .auth-panel { padding: 20px 24px; min-height: 100dvh; }
  .auth-mlogo { display: flex; }
  .auth-panel { padding-top: 8px; }
}
@media (max-width: 480px) {
  .auth-panel { padding: 16px 20px; }
  .auth-box { max-width: 100%; }
  .auth-box h1 { font-size: 28px; }
  .vl-boxes { gap: 6px; }
  .auth-box .vl-boxes .vl-box { height: 46px; font-size: 18px; border-radius: 8px; }
}

/* ══════════ REDUCED MOTION ══════════ */
@media (prefers-reduced-motion: reduce) {
  .auth-shell *, .auth-shell *::before, .auth-shell *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .bf-eyes { animation: none !important; }
  .ab-src, .ab-bub, .ab-row, .auth-box { opacity: 1 !important; transform: none !important; }
}