:root,
[data-theme="dark"] {
  --nx-primary: #6366f1;
  --nx-primary-hover: #5558e6;
  --nx-primary-soft: rgba(99, 102, 241, .13);
  --nx-accent: #22d3ee;
  --nx-success: #22c55e;
  --nx-bg: #0b1020;
  --nx-surface: #11182a;
  --nx-surface-2: #172036;
  --nx-text: #eef2ff;
  --nx-text-2: #cbd5e1;
  --nx-muted: #8895aa;
  --nx-border: #28334a;
  --nx-border-soft: rgba(148, 163, 184, .13);
  --nx-input: #0e1527;
  --nx-shadow: 0 14px 38px rgba(0, 0, 0, .24);
  --nx-ring: rgba(99, 102, 241, .22);
  --nx-radius: 12px;
}

[data-theme="light"] {
  --nx-primary: #4f46e5;
  --nx-primary-hover: #4338ca;
  --nx-primary-soft: #eef2ff;
  --nx-accent: #0891b2;
  --nx-success: #16a34a;
  --nx-bg: #f3f6fb;
  --nx-surface: #fff;
  --nx-surface-2: #f8fafc;
  --nx-text: #172033;
  --nx-text-2: #334155;
  --nx-muted: #64748b;
  --nx-border: #dbe2ec;
  --nx-border-soft: rgba(15, 23, 42, .07);
  --nx-input: #fff;
  --nx-shadow: 0 14px 38px rgba(15, 23, 42, .09);
  --nx-ring: rgba(79, 70, 229, .17);
}

* { box-sizing: border-box; }
html { background: var(--nx-bg); color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--nx-bg);
  color: var(--nx-text);
  font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  font-size: 14px;
}

.auth-shell {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: clamp(20px, 4vw, 40px) clamp(16px, 3vw, 32px) 20px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--nx-primary) 18%, transparent), transparent 42%),
    radial-gradient(circle at 12% 88%, color-mix(in srgb, var(--nx-accent) 12%, transparent), transparent 36%),
    var(--nx-bg);
}

.auth-frame {
  width: min(1080px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .9fr);
  gap: 20px;
}

.panel-card {
  border: 1px solid var(--nx-border-soft);
  border-radius: var(--nx-radius);
  background: var(--nx-surface);
  box-shadow: var(--nx-shadow);
}

.auth-intro {
  padding: 34px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--nx-primary) 16%, transparent), transparent 42%),
    var(--nx-surface);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.auth-mark {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--nx-accent), var(--nx-primary));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--nx-primary) 35%, transparent);
}

.auth-brand strong { display: block; font-size: 1.05rem; line-height: 1.1; }
.auth-brand small { color: var(--nx-muted); font-size: .75rem; }
.eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--nx-primary);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.auth-intro h1 {
  margin: 0 0 12px;
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  line-height: 1.25;
  font-weight: 700;
}
.auth-lead {
  margin: 0 0 22px;
  max-width: 48ch;
  color: var(--nx-muted);
  font-size: .92rem;
  line-height: 1.7;
}
.auth-capability-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.auth-capability {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid var(--nx-border-soft);
  border-radius: 8px;
  background: color-mix(in srgb, var(--nx-bg) 55%, transparent);
}
.auth-capability i { color: var(--nx-primary); font-size: 1.1rem; }
.auth-capability strong { display: block; font-size: .82rem; }
.auth-capability small { color: var(--nx-muted); font-size: .72rem; }

.auth-panel { padding: 32px 28px; }
.login-form { display: grid; gap: 10px; }
.login-form h1 { margin: 0; font-size: 1.3rem; }
.form-hint { margin: -2px 0 10px; color: var(--nx-muted); font-size: .8rem; }
.login-form label {
  margin-top: 4px;
  color: var(--nx-text-2);
  font-size: .78rem;
  font-weight: 650;
}
.login-form input {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--nx-border);
  border-radius: 10px;
  background: var(--nx-input);
  color: var(--nx-text);
  outline: none;
}
.login-form input:focus {
  border-color: var(--nx-primary);
  box-shadow: 0 0 0 3px var(--nx-ring);
}
.btn-primary {
  margin-top: 8px;
  min-height: 42px;
  border: 0;
  border-radius: 10px;
  background: var(--nx-primary);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--nx-primary) 28%, transparent);
}
.btn-primary:hover { background: var(--nx-primary-hover); }
.login-error {
  padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, #ef4444 12%, transparent);
  color: #ef4444;
  font-size: .8rem;
}
.login-foot {
  margin: 18px 0 0;
  color: var(--nx-muted);
  font-size: .72rem;
  text-align: center;
}

@media (max-width: 860px) {
  .auth-frame { grid-template-columns: 1fr; }
  .auth-capability-grid { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------- */
/* Modern B2B redesign overrides                                              */
/* -------------------------------------------------------------------------- */

:root,
[data-theme="dark"] {
  --nx-primary: #7c87ff;
  --nx-primary-hover: #6d79ff;
  --nx-primary-soft: rgba(124, 135, 255, .16);
  --nx-accent: #58d6ff;
  --nx-success: #34d399;
  --nx-bg: #08111f;
  --nx-surface: rgba(12, 19, 35, .88);
  --nx-surface-2: rgba(18, 27, 48, .92);
  --nx-text: #f5f7ff;
  --nx-text-2: #d2daf0;
  --nx-muted: #91a0bf;
  --nx-border: rgba(120, 140, 180, .22);
  --nx-border-soft: rgba(148, 163, 184, .14);
  --nx-input: rgba(10, 17, 31, .82);
  --nx-shadow: 0 28px 72px rgba(0, 0, 0, .3);
  --nx-ring: rgba(124, 135, 255, .22);
  --nx-radius: 18px;
}

[data-theme="light"] {
  --nx-primary: #5865f2;
  --nx-primary-hover: #4c58df;
  --nx-primary-soft: rgba(88, 101, 242, .1);
  --nx-accent: #0891b2;
  --nx-success: #16a34a;
  --nx-bg: #f4f7fb;
  --nx-surface: rgba(255, 255, 255, .88);
  --nx-surface-2: rgba(255, 255, 255, .96);
  --nx-text: #111c31;
  --nx-text-2: #334155;
  --nx-muted: #6b7a93;
  --nx-border: rgba(148, 163, 184, .28);
  --nx-border-soft: rgba(15, 23, 42, .08);
  --nx-input: rgba(250, 252, 255, .96);
  --nx-shadow: 0 22px 60px rgba(15, 23, 42, .12);
  --nx-ring: rgba(88, 101, 242, .14);
}

html {
  background:
    radial-gradient(circle at 12% 16%, color-mix(in srgb, var(--nx-primary) 18%, transparent), transparent 26%),
    radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--nx-accent) 12%, transparent), transparent 24%),
    linear-gradient(180deg, color-mix(in srgb, var(--nx-bg) 94%, #000) 0%, var(--nx-bg) 100%);
}

body {
  background: transparent;
  color: var(--nx-text);
}

.auth-shell {
  padding: clamp(22px, 4vw, 42px);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--nx-primary) 16%, transparent), transparent 34%),
    radial-gradient(circle at left 18% bottom 12%, color-mix(in srgb, var(--nx-accent) 10%, transparent), transparent 28%),
    transparent;
}

.auth-frame {
  width: min(1180px, 100%);
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
  gap: 24px;
}

.panel-card {
  border: 1px solid var(--nx-border);
  border-radius: 28px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--nx-surface) 94%, transparent), color-mix(in srgb, var(--nx-surface-2) 96%, transparent));
  box-shadow: var(--nx-shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.auth-intro,
.auth-panel {
  position: relative;
  overflow: hidden;
}

.auth-intro {
  padding: 42px;
}

.auth-intro::after,
.auth-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 28%);
  pointer-events: none;
}

.auth-brand {
  gap: 14px;
  margin-bottom: 26px;
}

.auth-mark {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--nx-accent) 0%, var(--nx-primary) 68%, #8b6fff 100%);
  box-shadow: 0 18px 34px color-mix(in srgb, var(--nx-primary) 28%, transparent);
}

.auth-brand strong {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -.04em;
}

.auth-brand small {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.eyebrow {
  margin-bottom: 12px;
  font-size: .66rem;
  letter-spacing: .18em;
}

.auth-intro h1 {
  max-width: 11ch;
  margin: 0 0 14px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.08;
  font-weight: 820;
  letter-spacing: -.05em;
}

.auth-lead {
  margin: 0 0 28px;
  max-width: 56ch;
  font-size: .95rem;
  line-height: 1.8;
}

.auth-capability-grid {
  gap: 14px;
}

.auth-capability {
  padding: 16px 16px 15px;
  border: 1px solid var(--nx-border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--nx-surface-2) 86%, transparent);
}

.auth-capability i {
  font-size: 1.2rem;
}

.auth-capability strong {
  font-size: .86rem;
}

.auth-capability small {
  margin-top: 2px;
  font-size: .74rem;
  line-height: 1.55;
}

.auth-points {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.auth-points li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--nx-text-2);
  font-size: .82rem;
  line-height: 1.55;
}

.auth-points i {
  color: var(--nx-success);
  margin-top: 2px;
}

.auth-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 36px 32px;
}

.login-form {
  gap: 12px;
}

.login-form .eyebrow {
  margin-bottom: 8px;
}

.login-form h1 {
  font-size: 1.55rem;
  letter-spacing: -.03em;
}

.form-hint {
  margin: 0 0 12px;
  font-size: .84rem;
  line-height: 1.6;
}

.auth-demo-tip {
  margin: 0 0 8px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--nx-accent) 35%, var(--nx-border));
  background: color-mix(in srgb, var(--nx-accent) 12%, transparent);
  color: var(--nx-text-2);
  font-size: .84rem;
  line-height: 1.55;
}

.auth-demo-tip-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  color: var(--nx-accent);
  font-weight: 650;
  font-size: .82rem;
}

.auth-demo-tip p {
  margin: 0 0 6px;
}

.auth-demo-tip .mb-0 {
  margin-bottom: 0;
}

.auth-demo-tip code {
  padding: 1px 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--nx-bg) 55%, transparent);
  color: var(--nx-text);
  font-size: .8rem;
}

.login-form label {
  margin-top: 6px;
  font-size: .78rem;
  letter-spacing: .03em;
}

.login-form input {
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--nx-border);
  border-radius: 14px;
  background: var(--nx-input);
  transition: border-color .18s, box-shadow .18s, transform .18s;
}

.login-form input:focus {
  transform: translateY(-1px);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  min-height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--nx-primary) 0%, color-mix(in srgb, var(--nx-primary) 70%, #8b5cf6) 100%);
  box-shadow: 0 16px 30px color-mix(in srgb, var(--nx-primary) 24%, transparent);
  transition: transform .18s, box-shadow .18s, background .18s;
}

.btn-primary:hover {
  transform: translateY(-1px);
}

.login-error {
  border: 1px solid color-mix(in srgb, #ef4444 26%, var(--nx-border));
  border-radius: 14px;
}

.login-foot {
  margin: 22px 0 0;
  font-size: .74rem;
  line-height: 1.7;
}

.app-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px 16px;
  color: var(--nx-muted);
  font-size: .72rem;
  line-height: 1.4;
}

.app-footer a {
  color: var(--nx-muted);
  text-decoration: none;
}

.app-footer a:hover {
  color: var(--nx-text);
  text-decoration: underline;
}

.auth-footer {
  flex: 0 0 auto;
  margin-top: 4px;
}

@media (max-width: 860px) {
  .auth-frame {
    grid-template-columns: 1fr;
  }

  .auth-intro,
  .auth-panel {
    padding: 24px;
  }

  .auth-intro h1 {
    max-width: none;
    font-size: clamp(1.8rem, 9vw, 2.4rem);
  }

  .auth-capability-grid {
    grid-template-columns: 1fr;
  }
}