/* ================================================================
   Страницы авторизации (login/register/recover и пр.).
   Подключается через views/templates/fx-auth.ejs.
   Темы — те же 7, что на лендинге и в ЛК (ключ localStorage 'fx-theme').
   ================================================================ */

:root{
  --bg:#0A0714;
  --surface:#150E2B;
  --surface-2:#1D1442;
  --border:#2A1F52;
  --border-strong:#4C3B96;
  --primary:#8B5CF6;
  --primary-deep:#6D28D9;
  --fuchsia:#D946EF;
  --accent:#D8B4FE;
  --text:#F4F1FF;
  --text-muted:#BCB0E6;
  --text-dim:#7E70B0;
  --success:#34D399;
  --danger:#F87171;
  --grad:linear-gradient(96deg,#A78BFA 0%,#8B5CF6 50%,#D946EF 125%);
  --grad-btn:linear-gradient(120deg,#6D28D9 0%,#8B5CF6 60%,#C026D3 145%);
  --glow:0 0 60px -12px rgba(var(--primary-rgb),.55);
  --font:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --display:'Unbounded','IBM Plex Sans',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  /* Производные токены — тема = переопределение набора в [data-theme] ниже */
  --primary-rgb:139,92,246;
  --fuchsia-rgb:217,70,239;
  --grid-rgb:167,139,250;
  --tint-rgb:42,31,82;
  --bg-rgb:10,7,20;
  --card-c1:#171030;
  --card-c2:#110B24;
  --orb2:#C026D3;
  color-scheme:dark;
}

/* ===== Темы ===== */
[data-theme="sapphire"]{
  --bg:#060B16;--surface:#0D172B;--surface-2:#142242;
  --border:#1F2E52;--border-strong:#3B5A96;
  --primary:#3B82F6;--primary-deep:#1D4ED8;--fuchsia:#22D3EE;--accent:#93C5FD;
  --text:#F1F6FF;--text-muted:#B0C4E6;--text-dim:#7086B0;
  --grad:linear-gradient(96deg,#60A5FA 0%,#3B82F6 50%,#22D3EE 125%);
  --grad-btn:linear-gradient(120deg,#1D4ED8 0%,#3B82F6 60%,#22D3EE 145%);
  --primary-rgb:59,130,246;--fuchsia-rgb:34,211,238;
  --grid-rgb:96,165,250;--tint-rgb:31,46,82;--bg-rgb:6,11,22;
  --card-c1:#101A30;--card-c2:#0A1220;
  --orb2:#22D3EE;
}
[data-theme="emerald"]{
  --bg:#06110C;--surface:#0D2117;--surface-2:#123024;
  --border:#1C4030;--border-strong:#2F7A57;
  --primary:#10B981;--primary-deep:#047857;--fuchsia:#2DD4BF;--accent:#6EE7B7;
  --text:#F0FBF6;--text-muted:#A8D8C2;--text-dim:#5F8F78;
  --grad:linear-gradient(96deg,#34D399 0%,#10B981 50%,#2DD4BF 125%);
  --grad-btn:linear-gradient(120deg,#047857 0%,#10B981 60%,#2DD4BF 145%);
  --primary-rgb:16,185,129;--fuchsia-rgb:45,212,191;
  --grid-rgb:52,211,153;--tint-rgb:28,64,48;--bg-rgb:6,17,12;
  --card-c1:#0E2A1D;--card-c2:#0A1A12;
  --orb2:#2DD4BF;
}
[data-theme="ruby"]{
  --bg:#140708;--surface:#2A0E13;--surface-2:#3E1420;
  --border:#4A1C26;--border-strong:#963B4E;
  --primary:#E11D48;--primary-deep:#9F1239;--fuchsia:#F59E0B;--accent:#FDA4AF;
  --text:#FFF1F2;--text-muted:#E6B0B8;--text-dim:#B07E86;
  --grad:linear-gradient(96deg,#FB7185 0%,#E11D48 50%,#F59E0B 125%);
  --grad-btn:linear-gradient(120deg,#9F1239 0%,#E11D48 60%,#F59E0B 145%);
  --primary-rgb:225,29,72;--fuchsia-rgb:245,158,11;
  --grid-rgb:251,113,133;--tint-rgb:74,28,38;--bg-rgb:20,7,8;
  --card-c1:#301017;--card-c2:#200B0E;
  --orb2:#F59E0B;
}
[data-theme="amber"]{
  --bg:#120C04;--surface:#241A0B;--surface-2:#3A2A12;
  --border:#4A3618;--border-strong:#96742F;
  --primary:#F59E0B;--primary-deep:#B45309;--fuchsia:#F97316;--accent:#FDE68A;
  --text:#FFFBF0;--text-muted:#E6D8B0;--text-dim:#B09E70;
  --grad:linear-gradient(96deg,#FCD34D 0%,#F59E0B 50%,#F97316 125%);
  --grad-btn:linear-gradient(120deg,#B45309 0%,#F59E0B 60%,#F97316 145%);
  --primary-rgb:245,158,11;--fuchsia-rgb:249,115,22;
  --grid-rgb:252,211,77;--tint-rgb:74,54,24;--bg-rgb:18,12,4;
  --card-c1:#2A1F0E;--card-c2:#1C1408;
  --orb2:#F97316;
}
[data-theme="graphite"]{
  --bg:#060607;--surface:#101014;--surface-2:#17171E;
  --border:#232330;--border-strong:#3E3E52;
  --text:#F5F5F7;--text-muted:#B4B4C2;--text-dim:#767686;
  --tint-rgb:35,35,48;--bg-rgb:5,5,7;
  --card-c1:#121218;--card-c2:#0C0C10;
}
[data-theme="light"]{
  --bg:#FAF9FF;--surface:#FFFFFF;--surface-2:#ECE7F9;
  --border:#E4DEF5;--border-strong:#C9BCEE;
  --accent:#7C3AED;
  --text:#17102E;--text-muted:#4A3F6E;--text-dim:#7E74A3;
  --success:#059669;
  --grad:linear-gradient(96deg,#7C3AED 0%,#8B5CF6 50%,#D946EF 125%);
  --glow:0 0 44px -12px rgba(var(--primary-rgb),.3);
  --grid-rgb:139,92,246;--tint-rgb:201,188,238;--bg-rgb:250,249,255;
  --card-c1:#FFFFFF;--card-c2:#F3F0FB;
  color-scheme:light;
}
[data-theme="light"] .orb-1{opacity:.18}
[data-theme="light"] .orb-2{opacity:.1}
[data-theme="light"] .logo-mark{box-shadow:0 0 24px -4px rgba(var(--primary-rgb),.4)}
[data-theme="light"] .forgot:hover,
[data-theme="light"] .alt-action a:hover{color:var(--primary-deep)}
[data-theme="light"] .fx-modal{background:rgba(23,16,46,.45)}

*{margin:0;padding:0;box-sizing:border-box}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ===== Background ===== */
.orb{position:fixed;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0}
.orb-1{width:560px;height:560px;background:var(--primary-deep);top:-220px;right:-120px;opacity:.4;animation:drift 14s ease-in-out infinite alternate}
.orb-2{width:420px;height:420px;background:var(--orb2);bottom:-260px;left:-140px;opacity:.18;animation:drift 18s ease-in-out infinite alternate-reverse}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(-50px,40px)}}
.grid-bg{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(var(--grid-rgb),.07) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--grid-rgb),.07) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 90% 80% at 50% 0%,#000 25%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 0%,#000 25%,transparent 78%);
}

/* ===== Layout ===== */
.page{
  position:relative;z-index:1;
  min-height:100vh;
  display:flex;flex-direction:column;
}
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:26px 40px;
}
.logo{display:flex;align-items:center;gap:11px;font-weight:700;font-size:20px;letter-spacing:-.02em}
.logo-mark{
  width:36px;height:36px;border-radius:10px;flex:none;
  background:var(--grad-btn);
  display:grid;place-items:center;
  font-weight:700;font-size:17px;color:#fff;
  box-shadow:0 0 24px -4px rgba(var(--primary-rgb),.7);
}
.logo span em{font-style:normal;color:var(--accent)}
.back-link{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14.5px;font-weight:500;color:var(--text-muted);
  transition:color .2s;
}
.back-link:hover{color:var(--text)}
.back-link svg{width:16px;height:16px;stroke:currentColor;flex:none}

.auth-main{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:32px 24px 64px;
}
.auth-shell{
  width:100%;max-width:480px;
  border-radius:26px;padding:1px;
  background:linear-gradient(160deg,rgba(var(--grid-rgb),.5),rgba(var(--fuchsia-rgb),.22) 40%,rgba(var(--tint-rgb),.6));
  box-shadow:var(--glow);
}
.auth-inner{
  border-radius:25px;overflow:hidden;
  background:linear-gradient(165deg,var(--card-c1) 0%,var(--card-c2) 100%);
}

/* ===== Form panel ===== */
.form-panel{padding:48px 44px}
.form-icon{
  width:56px;height:56px;border-radius:16px;
  background:rgba(var(--primary-rgb),.16);
  border:1px solid var(--border-strong);
  display:grid;place-items:center;
  margin-bottom:24px;
}
.form-icon svg{width:26px;height:26px;stroke:var(--accent)}
.form-panel h1{
  font-family:var(--display);
  font-size:clamp(1.5rem,2.6vw,1.9rem);
  font-weight:700;letter-spacing:-.01em;
  margin-bottom:10px;
}
.form-sub{font-size:15px;color:var(--text-muted);font-weight:300;margin-bottom:34px}
.field{margin-bottom:20px}
.field label{
  display:block;font-size:13.5px;font-weight:600;
  color:var(--text-muted);margin-bottom:8px;letter-spacing:.02em;
}
.field .hint{font-size:12.5px;color:var(--text-dim);margin-top:7px}
.field-row{display:flex;gap:14px}
.field-row .field{flex:1;min-width:0}
.control{position:relative}
.control input{
  width:100%;
  font:inherit;font-size:15px;color:var(--text);
  background:var(--surface);
  border:1px solid var(--border-strong);
  border-radius:12px;
  padding:14px 16px;
  transition:border-color .2s,box-shadow .2s;
}
.control input::placeholder{color:var(--text-dim)}
.control input:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(var(--primary-rgb),.25);
}
.control input.has-toggle{padding-right:52px}
.toggle-pass{
  position:absolute;top:50%;right:8px;transform:translateY(-50%);
  background:none;border:none;padding:8px;border-radius:8px;
  color:var(--text-dim);transition:color .2s;
  display:grid;place-items:center;
}
.toggle-pass:hover{color:var(--accent)}
.toggle-pass svg{width:19px;height:19px;stroke:currentColor}
.form-row{
  display:flex;align-items:center;justify-content:flex-end;
  gap:16px;flex-wrap:wrap;
  margin:6px 0 28px;
}
.forgot{font-size:14px;font-weight:500;color:var(--accent);transition:color .2s}
.forgot:hover{color:#fff}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  width:100%;
  padding:15px 28px;border-radius:13px;border:1px solid transparent;
  font-weight:600;font-size:15.5px;letter-spacing:.01em;
  transition:box-shadow .25s,transform .15s;
  cursor:pointer;
}
.btn-primary{
  background:var(--grad-btn);color:#fff;
  box-shadow:0 8px 32px -8px rgba(var(--primary-rgb),.6);
}
.btn-primary:hover{box-shadow:0 10px 44px -6px rgba(var(--fuchsia-rgb),.5);transform:translateY(-1px)}
.btn.is-loading{pointer-events:none;opacity:.8}
.btn.is-loading::after{
  content:"";width:17px;height:17px;flex:none;
  border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;
  border-radius:50%;
  animation:fx-spin .7s linear infinite;
}
@keyframes fx-spin{to{transform:rotate(360deg)}}
.divider{
  display:flex;align-items:center;gap:14px;
  margin:28px 0;
  font-size:12.5px;color:var(--text-dim);letter-spacing:.06em;text-transform:uppercase;
}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--border)}
.alt-action{
  text-align:center;font-size:14.5px;color:var(--text-muted);
}
.alt-action a{color:var(--accent);font-weight:600;transition:color .2s}
.alt-action a:hover{color:#fff}

.page-foot{
  text-align:center;padding:0 24px 28px;
  font-size:13px;color:var(--text-dim);
  position:relative;z-index:1;
}
.page-foot a{color:var(--text-muted);transition:color .2s}
.page-foot a:hover{color:var(--text)}

/* ===== Alert modal ===== */
.fx-modal{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:rgba(var(--bg-rgb),.72);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.fx-modal[hidden]{display:none}
.fx-modal-card{
  width:100%;max-width:400px;
  background:linear-gradient(165deg,var(--card-c1) 0%,var(--card-c2) 100%);
  border:1px solid var(--border-strong);
  border-radius:18px;
  padding:28px 26px 24px;
  box-shadow:var(--glow);
}
.fx-modal-card h3{
  font-family:var(--display);
  font-size:17px;font-weight:600;
  margin-bottom:10px;
}
.fx-modal-body{font-size:14.5px;color:var(--text-muted);margin-bottom:22px}
.fx-modal-card .btn{padding:12px 24px}

/* ===== Страницы ошибок (views/errors/*) ===== */
.err-card{text-align:center;padding:56px 44px}
.err-code{
  font-family:var(--display);
  font-size:clamp(4rem,14vw,6.5rem);font-weight:700;line-height:1.1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 30px rgba(var(--primary-rgb),.45));
}
.err-card h1{font-family:var(--display);font-size:clamp(1.15rem,2.4vw,1.45rem);font-weight:600;margin:16px 0 10px}
.err-card p{font-size:15px;color:var(--text-muted);margin-bottom:30px}
[data-theme="light"] .err-code{filter:drop-shadow(0 0 22px rgba(var(--primary-rgb),.25))}

/* ===== Responsive ===== */
@media (max-width:480px){
  .topbar{padding:20px 22px}
  .form-panel{padding:38px 26px}
  .err-card{padding:44px 26px}
  .back-link span{display:none}
  .field-row{display:block}
}