:root {
  --auth-accent: #2563eb;
  --auth-accent-dark: #1d4ed8;
  --auth-accent-soft: #eff6ff;
  --auth-accent-rgb: 37, 99, 235;
  --auth-ink: #0f2742;
  --auth-muted: #64748b;
  --auth-line: rgba(148, 163, 184, .28);
  --auth-page: #f1f5f9;
  --auth-danger: #be123c;
  --auth-danger-bg: #fff1f2;
  --auth-danger-line: #fecdd3;
}

.theme-blue { --auth-accent:#2563eb; --auth-accent-dark:#1d4ed8; --auth-accent-soft:#eff6ff; --auth-accent-rgb:37,99,235; }
.theme-emerald { --auth-accent:#059669; --auth-accent-dark:#047857; --auth-accent-soft:#ecfdf5; --auth-accent-rgb:5,150,105; }
.theme-rose { --auth-accent:#e11d48; --auth-accent-dark:#be123c; --auth-accent-soft:#fff1f2; --auth-accent-rgb:225,29,72; }
.theme-indigo { --auth-accent:#6366f1; --auth-accent-dark:#4f46e5; --auth-accent-soft:#eef2ff; --auth-accent-rgb:99,102,241; }
.theme-cyan { --auth-accent:#0891b2; --auth-accent-dark:#0e7490; --auth-accent-soft:#ecfeff; --auth-accent-rgb:8,145,178; }

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--auth-page); }
html, body { margin: 0; min-height: 100%; }
body.imsp-auth {
  min-height: 100vh;
  padding: clamp(14px, 3vw, 34px);
  display: grid;
  place-items: center;
  overflow-x: hidden;
  color: var(--auth-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 7% 8%, rgba(var(--auth-accent-rgb), .10), transparent 28rem),
    radial-gradient(circle at 94% 92%, rgba(14, 165, 233, .08), transparent 30rem),
    linear-gradient(135deg, #f8fafc 0%, #eff6ff 50%, #f8fafc 100%);
}

.auth-layout {
  width: min(1180px, 100%);
  min-height: 670px;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
  overflow: hidden;
  border: 1px solid var(--auth-line);
  border-radius: 32px;
  background: #fff;
  box-shadow: 0 30px 90px rgba(15, 39, 66, .15);
}

.auth-brand-panel {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: clamp(34px, 5vw, 62px);
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255,255,255,.92), rgba(255,255,255,.72)),
    linear-gradient(145deg, var(--auth-accent-soft), rgba(var(--auth-accent-rgb), .20));
}
.auth-brand-panel::before,
.auth-brand-panel::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 999px;
  background: rgba(var(--auth-accent-rgb), .10);
  filter: blur(1px);
}
.auth-brand-panel::before { width: 310px; height: 310px; top: -130px; right: -115px; }
.auth-brand-panel::after { width: 240px; height: 240px; bottom: -105px; left: -90px; }

.auth-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.auth-logo {
  width: 60px;
  height: 60px;
  flex: 0 0 60px;
  display: grid;
  place-items: center;
  padding: 7px;
  border: 1px solid rgba(var(--auth-accent-rgb), .18);
  border-radius: 19px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 12px 30px rgba(15,39,66,.10);
}
.auth-logo img { display:block; width:100%; height:100%; object-fit:contain; }
.auth-brand-copy strong { display:block; font-size:16px; line-height:1.25; letter-spacing:-.01em; }
.auth-brand-copy span { display:block; margin-top:4px; color:var(--auth-muted); font-size:12px; line-height:1.45; }

.auth-intro { max-width: 600px; margin: 50px 0 36px; }
.auth-category {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  color: var(--auth-accent-dark);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.auth-category::before {
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--auth-accent);
  box-shadow:0 0 0 6px rgba(var(--auth-accent-rgb),.10);
}
.auth-intro h1 {
  margin: 0;
  max-width: 570px;
  color: #0f2742;
  font-size: clamp(36px, 4.7vw, 58px);
  line-height: 1.03;
  letter-spacing: -.045em;
}
.auth-intro p {
  margin: 20px 0 0;
  max-width: 550px;
  color: #52677d;
  font-size: 15px;
  line-height: 1.72;
}

.auth-feature-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:auto;
}
.auth-feature {
  min-width:0;
  padding:16px;
  border:1px solid rgba(var(--auth-accent-rgb),.14);
  border-radius:18px;
  background:rgba(255,255,255,.82);
  box-shadow:0 10px 24px rgba(15,39,66,.06);
  backdrop-filter: blur(12px);
}
.auth-feature-icon {
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  margin-bottom:12px;
  border-radius:13px;
  color:var(--auth-accent-dark);
  background:var(--auth-accent-soft);
  font-size:18px;
}
.auth-feature strong { display:block; color:#172f49; font-size:13px; line-height:1.3; }
.auth-feature span { display:block; margin-top:5px; color:#718096; font-size:11px; line-height:1.45; }

.auth-form-panel {
  display:grid;
  align-items:center;
  min-width:0;
  padding:clamp(34px,5vw,68px);
  background:#fff;
}
.auth-form-wrap { width:100%; max-width:450px; margin:0 auto; }
.auth-form-header { margin-bottom:28px; }
.auth-form-tag {
  margin-bottom:10px;
  color:var(--auth-accent);
  font-size:11px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.auth-form-header h2 { margin:0; color:#102a43; font-size:clamp(29px,3vw,38px); line-height:1.12; letter-spacing:-.03em; }
.auth-form-header p { margin:10px 0 0; color:var(--auth-muted); font-size:14px; line-height:1.58; }

.auth-alert {
  margin:0 0 18px;
  padding:13px 15px;
  border:1px solid var(--auth-danger-line);
  border-radius:14px;
  color:var(--auth-danger);
  background:var(--auth-danger-bg);
  font-size:13px;
  font-weight:700;
  line-height:1.45;
}
.auth-alert.info { color:#075985; border-color:#bae6fd; background:#f0f9ff; }
.imsp-auth .alert { margin:0 0 18px; padding:13px 15px; border:1px solid var(--auth-danger-line); border-radius:14px; color:var(--auth-danger); background:var(--auth-danger-bg); font-size:13px; font-weight:700; line-height:1.45; text-align:left!important; }
.imsp-auth .alert-danger { color:var(--auth-danger); border-color:var(--auth-danger-line); background:var(--auth-danger-bg); }

.auth-form { width:100%; }
.auth-field { margin-bottom:17px; }
.auth-field label { display:block; margin-bottom:8px; color:#334155; font-size:13px; font-weight:800; }
.auth-input-wrap { position:relative; }
.auth-input-icon {
  position:absolute;
  top:50%;
  left:15px;
  width:19px;
  height:19px;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  color:#7b8da0;
  pointer-events:none;
}
.auth-input-icon svg { width:100%; height:100%; display:block; }
.auth-input {
  width:100%;
  min-height:52px;
  padding:0 48px 0 46px;
  border:1px solid #d4dee9;
  border-radius:14px;
  outline:none;
  color:#172b4d;
  background:#f8fafc;
  font:inherit;
  font-size:15px;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.auth-input.no-toggle { padding-right:15px; }
.auth-input::placeholder { color:#9aa9b8; }
.auth-input:focus {
  border-color:var(--auth-accent);
  background:#fff;
  box-shadow:0 0 0 4px rgba(var(--auth-accent-rgb),.11);
}
.auth-password-toggle {
  position:absolute;
  top:50%;
  right:8px;
  width:38px;
  height:38px;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  border:0;
  border-radius:11px;
  color:#66788d;
  background:transparent;
  cursor:pointer;
}
.auth-password-toggle:hover,.auth-password-toggle:focus-visible { color:var(--auth-accent); background:var(--auth-accent-soft); outline:none; }
.auth-password-toggle svg { width:19px; height:19px; }
.auth-password-toggle .eye-off { display:none; }
.auth-password-toggle[aria-pressed="true"] .eye-open { display:none; }
.auth-password-toggle[aria-pressed="true"] .eye-off { display:block; }

.auth-submit {
  width:100%;
  min-height:52px;
  margin-top:4px;
  border:0;
  border-radius:14px;
  color:#fff;
  background:linear-gradient(135deg,var(--auth-accent),var(--auth-accent-dark));
  font:inherit;
  font-size:15px;
  font-weight:850;
  cursor:pointer;
  box-shadow:0 12px 25px rgba(var(--auth-accent-rgb),.20);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.auth-submit:hover { transform:translateY(-2px); box-shadow:0 17px 34px rgba(var(--auth-accent-rgb),.28); filter:saturate(1.08); }
.auth-submit:active { transform:translateY(0); }
.auth-submit:focus-visible { outline:3px solid rgba(var(--auth-accent-rgb),.22); outline-offset:3px; }

.auth-back {
  width:100%;
  min-height:48px;
  margin-top:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #dbe5ef;
  border-radius:14px;
  color:#52677d;
  background:#fff;
  text-decoration:none;
  font-size:13px;
  font-weight:800;
  transition:border-color .18s ease,color .18s ease,background .18s ease;
}
.auth-back:hover { border-color:rgba(var(--auth-accent-rgb),.35); color:var(--auth-accent-dark); background:var(--auth-accent-soft); }
.auth-security {
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:20px;
  padding:15px 0 0;
  border-top:1px solid #edf1f5;
  color:#718096;
  font-size:12px;
  line-height:1.55;
}
.auth-security-icon {
  width:30px;
  height:30px;
  flex:0 0 30px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:var(--auth-accent-soft);
}
.auth-credit { margin:17px 0 0; color:#94a3b8; font-size:10.5px; line-height:1.55; text-align:center; }

@media (max-width: 900px) {
  body.imsp-auth { padding:14px; }
  .auth-layout { max-width:680px; min-height:0; grid-template-columns:1fr; border-radius:26px; }
  .auth-brand-panel { padding:30px; }
  .auth-intro { margin:34px 0 26px; }
  .auth-intro h1 { font-size:39px; }
  .auth-feature-grid { gap:9px; }
  .auth-feature { padding:13px; }
  .auth-form-panel { padding:38px 30px 44px; }
}

@media (max-width: 620px) {
  body.imsp-auth { padding:0; place-items:stretch; background:#fff; }
  .auth-layout { width:100%; min-height:100vh; border:0; border-radius:0; box-shadow:none; }
  .auth-brand-panel { padding:24px 20px 26px; }
  .auth-logo { width:50px; height:50px; flex-basis:50px; border-radius:15px; }
  .auth-brand-copy strong { font-size:14px; }
  .auth-brand-copy span { font-size:11px; }
  .auth-intro { margin:28px 0 22px; }
  .auth-category { margin-bottom:12px; }
  .auth-intro h1 { font-size:32px; }
  .auth-intro p { margin-top:13px; font-size:13px; line-height:1.58; }
  .auth-feature-grid { grid-template-columns:1fr; }
  .auth-feature { display:grid; grid-template-columns:40px 1fr; column-gap:11px; align-items:center; padding:10px 12px; }
  .auth-feature-icon { grid-row:1/3; margin:0; }
  .auth-feature span { margin-top:2px; }
  .auth-form-panel { padding:32px 20px 38px; }
  .auth-form-header { margin-bottom:24px; }
  .auth-form-header h2 { font-size:29px; }
  .auth-input,.auth-submit,.auth-back { font-size:16px; }
}

@media (max-width: 380px) {
  .auth-brand-panel,.auth-form-panel { padding-left:16px; padding-right:16px; }
  .auth-intro h1 { font-size:29px; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; }
}