/* Astryven sign-in page: the moving field behind the page (the "A" gathers on the left on wide screens), a glass card
   for the form, and the same day and night looks as the website (theme-init.js, theme-switch.js). Loads after
   theme.css and account.css; every form control and id stays as before (app-login.js is unchanged). */
@font-face{font-family:'Bricolage Grotesque';src:url('/assets/fonts/bricolage-grotesque-latin-opsz-normal.woff2') format('woff2-variations'),url('/assets/fonts/bricolage-grotesque-latin-opsz-normal.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}

/* ---------- tokens ---------- */
html{background:#F5F7FA}
html[data-theme="dark"]{background:#050A1C;color-scheme:dark}
body.auth-page{
  background:transparent;
  --hd:#0A1330; --ink:#0A1330; --tx:#17213D; --tx-2:#475370; --tx-3:#5E6985;
  --line:#DCE3EC; --line-2:#E9EEF4; --bg-2:rgba(10,19,48,.06); --surface:rgba(255,255,255,.82); --hover:rgba(10,19,48,.05);
  --blue:#2F5BFF; --blue-2:#1F46DB; --acc-rgb:47,91,255;
  --btn:#0A1330; --btn-2:#22305E; --btn-tx:#FFFFFF;
  --gl:rgba(255,255,255,.6); --gl-line:rgba(10,19,48,.1); --gl-hi:inset 0 1px 0 rgba(255,255,255,.8); --gl-blur:saturate(1.5) blur(18px);
  --glass:rgba(255,255,255,.72); --shadow:0 18px 50px rgba(10,19,48,.12);
  --display:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;
}
html[data-theme="dark"] body.auth-page{
  --hd:#FFFFFF; --ink:#FFFFFF; --tx:#D9E0F0; --tx-2:#A9B4D0; --tx-3:#8A96B4;
  --line:rgba(255,255,255,.14); --line-2:rgba(255,255,255,.08); --bg-2:rgba(255,255,255,.06); --surface:rgba(5,10,28,.55); --hover:rgba(255,255,255,.07);
  --blue:#8FA8FF; --blue-2:#B3C4FF; --acc-rgb:143,168,255;
  --btn:#FFFFFF; --btn-2:#E3E9F6; --btn-tx:#0A1330;
  --gl:rgba(17,27,62,.48); --gl-line:rgba(255,255,255,.12); --gl-hi:inset 0 1px 0 rgba(255,255,255,.07); --gl-blur:saturate(1.3) blur(18px);
  --glass:rgba(13,21,48,.62); --shadow:0 18px 50px rgba(0,0,0,.45);
  --bad:#FF8A80; --mint:#3BD6A8;
}
#field{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none}

/* ---------- layout ---------- */
.auth2{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);grid-template-rows:auto 1fr auto;
  grid-template-areas:"top top" "art main" "intro main";column-gap:clamp(24px,4vw,64px);padding:0 clamp(18px,4vw,56px) 72px;max-width:1440px;margin:0 auto}
.a2-top{grid-area:top;display:flex;align-items:center;gap:14px;min-height:72px}
.a2-top .brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--hd)}
.a2-top .brand svg{width:26px;height:26px}
.a2-top .brand b{font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:.2em}
html[data-theme="dark"] .a2-top .brand svg g{stroke:#fff}
.a2-back{margin-left:auto;font-size:14.5px;font-weight:600;color:var(--tx-2);text-decoration:none;padding:8px 12px;border-radius:999px}
.a2-back:hover{color:var(--hd);background:var(--hover)}
.a2-art{grid-area:art;min-height:clamp(240px,34vh,360px)}
.a2-intro{grid-area:intro;display:flex;flex-direction:column;gap:18px;padding-bottom:12px}
.a2-kicker{font-size:14px;font-weight:700;color:#D9431F}
html[data-theme="dark"] .a2-kicker{color:#FF7A5C}
.a2-intro h1{font-family:var(--display);font-weight:800;font-size:clamp(34px,3.6vw,52px);line-height:1.02;letter-spacing:-.035em;color:var(--hd);max-width:15ch}
.a2-prods{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:640px}
.a2-prods li{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:14px;background:var(--gl);border:1px solid var(--gl-line);box-shadow:var(--gl-hi);-webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur)}
.a2-prods b{display:flex;align-items:center;gap:8px;font-family:var(--display);font-size:15.5px;color:var(--hd)}
.a2-prods b i{width:8px;height:8px;border-radius:50%;flex:none}
.a2-prods span{font-size:13.5px;color:var(--tx-2);line-height:1.45}
.a2-intro .fine{max-width:640px;color:var(--tx-3)}
.a2-intro .fine a{color:var(--hd);font-weight:600}
.a2-main{grid-area:main;display:flex;align-items:center;justify-content:center;padding:12px 0 24px}

/* ---------- the glass card ---------- */
.auth-page .box-auth{width:100%;max-width:440px;gap:18px;padding:clamp(22px,3vw,34px);border-radius:22px;background:var(--gl);border:1px solid var(--gl-line);
  box-shadow:var(--gl-hi),var(--shadow);-webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur)}
.auth-page .box-auth > .brand{display:none!important}
.auth-page .box-auth h1{font-family:var(--display);font-weight:800;font-size:clamp(28px,2.6vw,34px);letter-spacing:-.03em;color:var(--hd)}
.auth-page .seg{background:var(--bg-2)}
.auth-page .seg button[aria-selected="true"]{background:var(--btn);color:var(--btn-tx);box-shadow:none}
.auth-page .field input{background:var(--surface);border-color:var(--line);color:var(--ink)}
.auth-page .field input::placeholder{color:var(--tx-3)}
.auth-page .btn:not(.ghost){background:var(--btn);border-color:var(--btn);color:var(--btn-tx);border-radius:12px;min-height:48px}
.auth-page .btn:not(.ghost):hover{background:var(--btn-2);border-color:var(--btn-2);box-shadow:0 10px 28px rgba(10,19,48,.18)}
.auth-page .btn.ghost{background:transparent;color:var(--hd);border-color:var(--line);border-radius:12px}
.auth-page .note{background:var(--gl);border-color:var(--gl-line)}
.auth-page .linkbtn{color:var(--blue)}
.auth-page a{color:var(--blue)}
.auth-page .fine{color:var(--tx-3)}

/* ---------- day and night switch (same as the website) ---------- */
.theme-switch{position:fixed;left:14px;bottom:14px;z-index:60;display:flex;gap:2px;padding:3px;border-radius:999px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:var(--shadow)}
.theme-switch button{display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:999px;background:transparent;color:var(--tx-2);cursor:pointer;padding:0}
.theme-switch button svg{width:17px;height:17px}
.theme-switch button:hover{color:var(--hd);background:var(--hover)}
.theme-switch button[aria-pressed="true"]{background:var(--hd);color:var(--btn-tx)}
html[data-theme="dark"] .theme-switch button[aria-pressed="true"]{color:#050A1C}

/* on this page the switch sits in the top bar, so it never covers the text */
.a2-top .theme-switch{position:static;box-shadow:none;margin-left:4px}

/* ---------- phones and narrow windows ---------- */
@media (max-width:900px){
  .auth2{grid-template-columns:1fr;grid-template-areas:"top" "main" "intro";padding:0 16px 84px}
  .a2-art{display:none}
  .a2-main{padding:4px 0 26px}
  .a2-intro h1{font-size:clamp(28px,7vw,36px)}
  .a2-prods{grid-template-columns:1fr}
  .a2-back{white-space:nowrap;font-size:13.5px;padding:6px 8px}
}
@media (max-width:400px){.a2-top .brand b{letter-spacing:.14em;font-size:14px}}
@media (max-width:640px){.theme-switch:not(.a2-top .theme-switch){left:10px;bottom:10px}.theme-switch button{width:36px;height:36px}.theme-switch:not(.open) button[aria-pressed="false"]{display:none}}
@media (prefers-reduced-transparency:reduce){.auth-page .box-auth,.a2-prods li{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none}}