.auth-topnav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:22px var(--gutter)}
.auth-back{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12px;letter-spacing:.03em;text-transform:uppercase;color:var(--text-3);transition:color .3s var(--ease)}
.auth-back:hover{color:var(--text-1)}
.auth-brand{text-transform:uppercase;display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;letter-spacing:.14em;color:var(--text-1)}
.auth-brand svg{width:16px;height:16px;color:var(--cyan)}

.auth-wrap{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:120px 20px 60px;
  background:radial-gradient(120% 90% at 50% -10%,rgba(79,209,232,.12),transparent 55%)}
.auth-card{width:100%;max-width:400px;padding:clamp(28px,4vw,38px);border-radius:20px;
  background:color-mix(in srgb,var(--ink-850) 78%,transparent);border:1px solid var(--line);backdrop-filter:blur(24px) saturate(130%);
  opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.auth-card.in{opacity:1;transform:none}
.auth-title{margin:0 0 8px}
.auth-sub{margin:0 0 24px;font-size:13.5px;color:var(--text-3)}

.rq-form{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
.rq-field{display:flex;flex-direction:column;gap:6px}
.rq-field label{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-4)}
.rq-field input{padding:12px 14px;border-radius:10px;background:var(--ink-800);border:1px solid var(--line);
  color:var(--text-1);font-family:var(--display);font-size:13.5px;outline:0;transition:border-color .3s var(--ease)}
.rq-field input:focus{border-color:rgba(79,209,232,.4);box-shadow:0 0 0 3px color-mix(in srgb,var(--cyan) 14%,transparent)}
.rq-field input::placeholder{color:var(--text-4)}
.rq-field.is-invalid input{border-color:rgba(240,133,122,.5)}
.rq-error{margin:0;font-family:var(--mono);font-size:11px;color:var(--coral)}
.rq-error[hidden]{display:none}

.auth-submit{width:100%;justify-content:center}

.auth-divider{display:flex;align-items:center;gap:12px;margin:18px 0;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-4)}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--line)}

.auth-demo{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;padding:13px 20px;border-radius:999px;cursor:pointer;
  font-family:var(--mono);font-size:12px;letter-spacing:.02em;text-transform:uppercase;color:var(--text-1);
  background:transparent;border:1px solid rgba(110,231,183,.32);transition:background .3s var(--ease),border-color .3s var(--ease)}
.auth-demo:hover{background:rgba(110,231,183,.08);border-color:rgba(110,231,183,.55)}
.auth-demo-dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green)}
.auth-demo-hint{margin:12px 0 0;font-family:var(--mono);font-size:10.5px;line-height:1.6;text-align:center;color:var(--text-4)}

/* right to left: the back arrow points the way back, inputs for Latin data stay LTR */
[dir="rtl"] .auth-back svg{transform:scaleX(-1)}
.auth-topnav{justify-content:flex-start;gap:16px}
.auth-topnav .auth-back{margin-inline-end:auto}
.auth-topnav .locale-slot{order:3}
html[lang="ar"] .auth-back,html[lang="ar"] .auth-demo,html[lang="ar"] .rq-field label,html[lang="ar"] .auth-demo-hint,html[lang="ar"] .auth-divider span{font-family:var(--display);font-size:13.5px;letter-spacing:0;text-transform:none}

/* Light theme: the card is white glass on the pale ground, lifted by one soft shadow, and the demo
   pill keeps a green that holds contrast on white. */
:root[data-theme="light"] .auth-wrap{background:radial-gradient(120% 90% at 50% -10%,rgba(11,134,160,.1),transparent 55%)}
:root[data-theme="light"] .auth-card{box-shadow:0 1px 2px rgba(15,23,42,.05),0 30px 70px -30px rgba(15,23,42,.3)}
:root[data-theme="light"] .auth-demo{border-color:rgba(12,143,96,.4)}
:root[data-theme="light"] .auth-demo:hover{background:rgba(12,143,96,.07);border-color:rgba(12,143,96,.6)}
:root[data-theme="light"] .auth-demo-dot{box-shadow:none}

/* Keyboard navigation focus rings (app.css is not loaded on this page) */
:where(button,a[href],[tabindex]:not([tabindex="-1"])):focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:7px}