
:root{
  --ub-auth-bg: radial-gradient(circle at top left, rgba(30,119,211,.16), transparent 36%), radial-gradient(circle at bottom right, rgba(34,197,94,.16), transparent 32%), linear-gradient(180deg,#f7fbff 0%,#eef4ff 50%,#f8fafc 100%);
  --ub-auth-card: rgba(255,255,255,.88);
  --ub-auth-border: rgba(15,23,42,.08);
  --ub-auth-shadow: 0 30px 80px rgba(15,23,42,.12);
}
html,body{min-height:100%}
body.ub-auth-page{
  margin:0;
  min-height:100vh;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:var(--ub-auth-bg);
  color:#0f172a;
}
.ub-auth-shell{
  min-height:100vh;
  padding:24px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ub-auth-layout{
  width:min(1160px,100%);
  display:grid;
  grid-template-columns:minmax(300px, 1.05fr) minmax(380px, .95fr);
  gap:24px;
  align-items:stretch;
}
.ub-auth-hero,
.ub-auth-card{
  position:relative;
  border:1px solid var(--ub-auth-border);
  border-radius:28px;
  background:var(--ub-auth-card);
  box-shadow:var(--ub-auth-shadow);
  backdrop-filter:blur(16px) saturate(140%);
}
.ub-auth-hero{
  overflow:hidden;
  padding:34px;
  background:
    radial-gradient(circle at top right, rgba(59,130,246,.18), transparent 38%),
    radial-gradient(circle at bottom left, rgba(16,185,129,.18), transparent 32%),
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(241,245,249,.92));
}
.ub-auth-card{padding:26px}
.ub-auth-topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:26px}
.ub-auth-brand{display:flex;align-items:center;gap:12px;font-weight:1000;letter-spacing:.02em}
.ub-auth-brand img{height:28px;width:auto;display:block}
.ub-auth-brand small{display:block;font-size:12px;font-weight:800;color:#64748b;letter-spacing:.08em;text-transform:uppercase}
.ub-auth-kicker{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(30,119,211,.10);color:#1d4ed8;border:1px solid rgba(30,119,211,.15);font-size:12px;font-weight:900;letter-spacing:.04em;text-transform:uppercase}
.ub-auth-title{margin:16px 0 10px;font-size:clamp(32px,4vw,52px);line-height:1.02;font-weight:1000;letter-spacing:-.04em}
.ub-auth-sub{margin:0;max-width:560px;font-size:16px;line-height:1.75;color:#334155;font-weight:600}
.ub-auth-glass{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:26px;
}
.ub-auth-stat,
.ub-auth-point,
.ub-auth-note{
  border:1px solid rgba(15,23,42,.07);
  background:rgba(255,255,255,.72);
  border-radius:22px;
  box-shadow:0 16px 40px rgba(15,23,42,.06);
}
.ub-auth-stat{padding:18px}
.ub-auth-stat strong{display:block;font-size:28px;font-weight:1000;line-height:1;color:#0f172a}
.ub-auth-stat span{display:block;margin-top:8px;font-size:13px;font-weight:800;color:#64748b}
.ub-auth-points{display:grid;gap:12px;margin-top:18px}
.ub-auth-point{padding:16px 18px;display:flex;align-items:flex-start;gap:14px}
.ub-auth-pointIcon{width:40px;height:40px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#eff6ff,#dbeafe);color:#1d4ed8;font-size:20px;flex:0 0 auto}
.ub-auth-point strong{display:block;font-size:15px;font-weight:950;color:#0f172a;margin-bottom:4px}
.ub-auth-point span{display:block;font-size:13px;line-height:1.55;color:#475569;font-weight:600}
.ub-auth-note{padding:18px;margin-top:18px;background:linear-gradient(135deg, rgba(15,23,42,.94), rgba(30,41,59,.96));color:#fff}
.ub-auth-note strong{display:block;font-size:15px;margin-bottom:6px}
.ub-auth-note p{margin:0;font-size:13px;line-height:1.6;color:rgba(255,255,255,.78)}
.ub-auth-card__head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:18px}
.ub-auth-card__eyebrow{font-size:12px;font-weight:900;letter-spacing:.08em;color:#64748b;text-transform:uppercase}
.ub-auth-card__title{margin:4px 0 6px;font-size:32px;line-height:1.05;font-weight:1000;letter-spacing:-.03em}
.ub-auth-card__sub{margin:0;color:#64748b;font-size:14px;line-height:1.6;font-weight:600}
.ub-auth-alert{border-radius:18px;padding:14px 16px;font-size:13px;font-weight:700;line-height:1.55;border:1px solid transparent;margin-bottom:14px}
.ub-auth-alert a{font-weight:900}
.ub-auth-alert--danger{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.18);color:#991b1b}
.ub-auth-alert--success{background:rgba(22,163,74,.10);border-color:rgba(22,163,74,.18);color:#166534}
.ub-auth-alert--warning{background:rgba(245,158,11,.11);border-color:rgba(245,158,11,.2);color:#92400e}
.ub-auth-form{display:grid;gap:14px}
.ub-auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ub-auth-field label{display:block;margin-bottom:8px;font-size:13px;font-weight:900;color:#334155}
.ub-auth-field input{width:100%;height:54px;border-radius:16px;border:1px solid rgba(148,163,184,.35);background:#fff;padding:0 16px;font-size:15px;font-weight:700;color:#0f172a;outline:none;transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease}
.ub-auth-field input::placeholder{color:#94a3b8;font-weight:600}
.ub-auth-field input:focus{border-color:rgba(30,119,211,.55);box-shadow:0 0 0 4px rgba(30,119,211,.12);transform:translateY(-1px)}
.ub-auth-inputWrap{position:relative}
.ub-auth-inputWrap input{padding-right:54px}
.ub-auth-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:1px solid rgba(148,163,184,.24);background:#fff;border-radius:12px;font-size:16px;cursor:pointer;color:#475569}
.ub-auth-meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}
.ub-auth-help{margin-top:7px;font-size:12px;font-weight:700;line-height:1.5;color:#64748b}
.ub-auth-strength{display:flex;align-items:center;gap:10px;margin-top:8px}
.ub-auth-strength__bar{position:relative;flex:1;height:8px;border-radius:999px;background:#e2e8f0;overflow:hidden}
.ub-auth-strength__fill{position:absolute;left:0;top:0;bottom:0;width:22%;background:linear-gradient(90deg,#ef4444,#f59e0b);border-radius:inherit;transition:width .2s ease, background .2s ease}
.ub-auth-strength__label{min-width:78px;font-size:12px;font-weight:900;color:#64748b;text-align:right}
.ub-auth-list{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.ub-auth-list li{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.55;color:#475569;font-weight:700}
.ub-auth-list li::before{content:"✓";display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:999px;background:rgba(22,163,74,.12);color:#15803d;font-size:12px;font-weight:1000;flex:0 0 auto}
.ub-auth-footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;margin-top:6px;padding-top:6px}
.ub-auth-footer a{font-size:14px;font-weight:900;color:#1d4ed8;text-decoration:none}
.ub-auth-footer a:hover{text-decoration:underline}
.ub-auth-cta{height:54px;border-radius:16px;border:0;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;font-size:15px;font-weight:1000;letter-spacing:.01em;cursor:pointer;box-shadow:0 18px 35px rgba(37,99,235,.28)}
.ub-auth-cta:hover{filter:brightness(.98)}
.ub-auth-recaptcha{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.ub-auth-actions{display:flex;flex-wrap:wrap;gap:10px}
.ub-auth-ghost{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 14px;border-radius:14px;border:1px solid rgba(148,163,184,.26);background:rgba(255,255,255,.82);color:#0f172a;text-decoration:none;font-weight:900;box-shadow:0 10px 24px rgba(15,23,42,.05)}
.ub-auth-card__divider{height:1px;background:linear-gradient(90deg, transparent, rgba(148,163,184,.45), transparent);margin:8px 0 2px}
.ub-auth-pillrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.ub-auth-pill{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:999px;background:#fff;border:1px solid rgba(148,163,184,.24);font-size:12px;font-weight:900;color:#334155}
@media (max-width: 980px){
  .ub-auth-layout{grid-template-columns:1fr}
  .ub-auth-hero{padding:28px}
}
@media (max-width: 720px){
  .ub-auth-shell{padding:14px}
  .ub-auth-hero,.ub-auth-card{padding:18px;border-radius:22px}
  .ub-auth-title{font-size:32px}
  .ub-auth-card__title{font-size:28px}
  .ub-auth-topbar,.ub-auth-card__head,.ub-auth-footer,.ub-auth-meta{align-items:flex-start}
  .ub-auth-grid,.ub-auth-glass{grid-template-columns:1fr}
  .ub-auth-field input{height:52px}
  .ub-auth-note{margin-top:14px}
}
