:root{
  --p:#9b4dca;--ph:#7c3aed;--c:#5bc0de;--o:#e67e22;
  --ok:#10b981;--danger:#ef4444;--warn:#f59e0b;
  --r:18px;--rsm:12px;--rxs:8px;
}
html[data-theme="dark"]{
  --bg:#0d1117;--bg2:#161b22;
  --glass:rgba(255,255,255,0.06);--gs:rgba(255,255,255,0.10);--gb:rgba(255,255,255,0.10);
  --cb:rgba(22,27,34,0.92);--tx:#e6edf3;--mu:#8b949e;
  --gp:rgba(155,77,202,0.20);--gc:rgba(91,192,222,0.13);--inp:rgba(255,255,255,0.04);
}
html[data-theme="light"]{
  --bg:#e8edf4;--bg2:#dde3ec;
  --glass:rgba(255,255,255,0.68);--gs:rgba(255,255,255,0.90);--gb:rgba(0,0,0,0.09);
  --cb:rgba(255,255,255,0.86);--tx:#0f172a;--mu:#64748b;
  --gp:rgba(155,77,202,0.10);--gc:rgba(91,192,222,0.08);--inp:rgba(0,0,0,0.03);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:14px;line-height:1.5;color:var(--tx);background:var(--bg);min-height:100vh;-webkit-font-smoothing:antialiased;position:relative;overflow-x:hidden;}

.bgfx{position:fixed;inset:0;pointer-events:none;z-index:0;}
.bgfx::before{content:'';position:absolute;width:900px;height:700px;top:-250px;left:-200px;background:radial-gradient(circle,var(--gp) 0%,transparent 65%);}
.bgfx::after{content:'';position:absolute;width:700px;height:600px;bottom:-150px;right:-150px;background:radial-gradient(circle,var(--gc) 0%,transparent 65%);}
.bg-grid{position:fixed;inset:0;background-image:linear-gradient(rgba(155,77,202,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(155,77,202,0.03) 1px,transparent 1px);background-size:48px 48px;pointer-events:none;z-index:0;}

.auth-shell{position:relative;z-index:1;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;}
.auth-card{width:100%;max-width:404px;background:var(--cb);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border:1px solid var(--gb);border-radius:var(--r);padding:34px 30px 26px;box-shadow:0 24px 60px rgba(0,0,0,.28);position:relative;}

.auth-brand{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:20px;}
.auth-logo{width:52px;height:52px;border-radius:15px;background:linear-gradient(135deg,var(--p),var(--c));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:20px;box-shadow:0 0 22px rgba(155,77,202,.5);overflow:hidden;}
.auth-logo img{width:100%;height:100%;object-fit:cover;}
.auth-title{font-size:13px;font-weight:700;color:var(--mu);letter-spacing:.2px;margin-top:10px;}

.scr-title{font-size:22px;font-weight:800;letter-spacing:-.4px;text-align:center;}
.scr-sub{color:var(--mu);font-size:13px;margin-top:4px;text-align:center;margin-bottom:20px;}
.scr-title + .auth-error, .scr-title + .auth-success{margin-top:18px;}
.scr-sub{margin-bottom:18px;}

.fg{margin-bottom:14px;}
.fg-2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.fl{display:block;font-size:12px;font-weight:600;color:var(--mu);margin-bottom:6px;letter-spacing:.2px;}
.fi{width:100%;padding:11px 13px;border-radius:var(--rsm);border:1px solid var(--gb);background:var(--inp);color:var(--tx);font-size:14px;outline:none;transition:.15s;font-family:inherit;}
.fi:focus{border-color:var(--p);box-shadow:0 0 0 3px var(--gp);}
.fi::placeholder{color:var(--mu);}
select.fi{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b949e' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;}

.btn{width:100%;padding:12px;border-radius:var(--rsm);border:1px solid var(--p);background:var(--p);color:#fff;font-size:14px;font-weight:700;cursor:pointer;transition:.15s;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:2px;}
.btn:hover{background:var(--ph);border-color:var(--ph);box-shadow:0 6px 18px rgba(155,77,202,.35);}
.btn:disabled{opacity:.6;cursor:not-allowed;}
.btn i{font-size:17px;}
.btn-2{background:var(--glass);color:var(--tx);border:1px solid var(--gb);margin-bottom:10px;}
.btn-2:hover{background:var(--gs);border-color:var(--p);box-shadow:none;}

.oauth-row{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.oauth-row .oauth-btn:only-child{grid-column:1 / -1;}
.oauth-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;border-radius:var(--rsm);border:1px solid var(--gb);background:var(--glass);color:var(--tx);font-size:13px;font-weight:600;cursor:pointer;transition:.15s;font-family:inherit;}
.oauth-btn:hover{border-color:var(--p);background:var(--gs);}
.oauth-btn i{font-size:18px;}
.i-google{color:#ea4335;}.i-github{color:var(--tx);}.i-passkey{color:var(--c);}

.divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--mu);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--gb);}

.altrow{display:flex;gap:9px;margin-top:12px;}
.altrow .oauth-btn{flex:1;}

.links{margin-top:18px;text-align:center;display:flex;flex-direction:column;gap:9px;font-size:13px;color:var(--mu);}
.links a{color:var(--p);text-decoration:none;font-weight:600;cursor:pointer;}
.links a:hover{text-decoration:underline;}

.auth-error,.auth-success{padding:11px 13px;border-radius:var(--rsm);font-size:13px;margin-bottom:14px;display:none;align-items:flex-start;gap:9px;line-height:1.4;}
.auth-error.show,.auth-success.show{display:flex;}
.auth-error{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3);color:#fca5a5;}
.auth-success{background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.3);color:#6ee7b7;}
.auth-error i,.auth-success i{font-size:17px;flex-shrink:0;margin-top:1px;}

.captcha-box{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.captcha-svg{background:#fff;border-radius:8px;padding:4px;display:inline-flex;}
.icon-btn{padding:8px 10px;border-radius:var(--rsm);border:1px solid var(--gb);background:var(--glass);color:var(--tx);cursor:pointer;display:flex;align-items:center;}
.icon-btn:hover{border-color:var(--p);}
.icon-btn i{font-size:16px;}

.pk-hero{display:flex;justify-content:center;padding:6px 0 12px;}
.pk-ring{width:80px;height:80px;border-radius:50%;background:radial-gradient(circle,var(--gc),transparent 70%);display:flex;align-items:center;justify-content:center;}
.pk-ring i{font-size:40px;color:var(--c);}

.auth-loader{display:flex;justify-content:center;padding:26px 0;}
.auth-spin{width:42px;height:42px;border:3px solid var(--gb);border-top-color:var(--p);border-radius:50%;animation:auth-sp .8s linear infinite;}
@keyframes auth-sp{to{transform:rotate(360deg)}}

.auth-footer{margin-top:20px;display:flex;justify-content:center;}
.auth-theme-toggle{width:38px;height:38px;border-radius:50%;border:1px solid var(--gb);background:var(--glass);color:var(--mu);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s;}
.auth-theme-toggle:hover{border-color:var(--p);color:var(--p);}
.auth-theme-toggle i{font-size:18px;}

@media(max-width:480px){
  .auth-shell{padding:0;align-items:stretch;}
  .auth-card{max-width:100%;min-height:100vh;border-radius:0;border:none;display:flex;flex-direction:column;justify-content:center;padding:32px 22px;box-shadow:none;}
  .fg-2{grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce){
  .auth-spin{animation:none;}
  *{transition:none!important;}
}

/* inline SVG icons (replaces Tabler webfont) */
.ti{display:inline-block;vertical-align:-0.15em;flex-shrink:0;}
.btn .ti,.oauth-btn .ti{width:17px;height:17px;}

/* smooth entrance + no layout jump */
.auth-card{animation:auth-fade-in .38s ease both;}
@keyframes auth-fade-in{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:translateY(0);}
}
.auth-screen{animation:auth-screen-in .28s ease both;}
@keyframes auth-screen-in{
  from{opacity:0;}
  to{opacity:1;}
}
@media(prefers-reduced-motion:reduce){
  .auth-card,.auth-screen{animation:none;}
}

/* smooth text swap when locale dictionary loads */
[data-t]{transition:opacity .2s ease;}
[data-t].t-swapping{opacity:0;}