.login-shell {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
  width: 100%;
}
@media (min-width: 1024px) {
  .login-shell { grid-template-columns: 1.05fr 1fr; }
}

.login-art {
  display: none;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--primary), var(--purple));
}
@media (min-width: 1024px) {
  .login-art { display: flex; flex-direction: column; justify-content: space-between; padding: 48px; color: #fff; }
}
.login-art__brand { display: flex; align-items: center; gap: 12px; }
.login-art__mark {
  display: grid; place-items: center; height: 44px; width: 44px; border-radius: var(--radius-xl);
  background: rgba(255,255,255,.12); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.2);
  font-weight: 700; font-size: 18px;
}
.login-art__brand-name { font-size: 14px; font-weight: 600; }
.login-art__brand-sub { font-size: 12px; color: rgba(255,255,255,.7); }
.login-art__badge {
  display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.1); padding: 6px 14px; font-size: 12px; font-weight: 500; backdrop-filter: blur(6px); margin-bottom: 20px;
}
.login-art h1 { max-width: 420px; font-size: 34px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.login-art p { max-width: 420px; margin-top: 12px; font-size: 14px; color: rgba(255,255,255,.85); }
.login-art__foot { font-size: 12px; color: rgba(255,255,255,.6); }

.login-form-side { display: flex; align-items: center; justify-content: center; padding: 32px; }
.login-form-wrap { width: 100%; max-width: 380px; }
.login-form-wrap .mobile-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 32px; }
@media (min-width: 1024px) { .login-form-wrap .mobile-brand { display: none; } }
.login-form-wrap .mark-sm { display: grid; place-items: center; height: 36px; width: 36px; border-radius: var(--radius-lg); background: var(--primary); color: #fff; font-weight: 700; }

.login-form-wrap h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.login-form-wrap .subtitle { margin-top: 4px; margin-bottom: 28px; font-size: 13px; color: var(--muted-foreground); }

.role-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 20px; }
.role-toggle label {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 10px; font-size: 13px; font-weight: 600;
  color: var(--muted-foreground); cursor: pointer; transition: all .15s;
}
.role-toggle input { display: none; }
.role-toggle input:checked + label { border-color: var(--primary); background: color-mix(in oklch, var(--primary) 8%, transparent); color: var(--primary); }

.field { margin-bottom: 16px; }
.field label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; }
.field label .req { color: var(--destructive); margin-left: 2px; }
.input-wrap { position: relative; }
.input-wrap svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); height: 16px; width: 16px; color: var(--muted-foreground); pointer-events: none; }
.input-wrap input {
  height: 42px; width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--border);
  background: var(--card); padding: 0 12px 0 38px; font-size: 13px; color: var(--foreground);
}
.input-wrap input:focus-visible { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 25%, transparent); }
.input-wrap .toggle-pw { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: 0; background: none; padding: 4px; color: var(--muted-foreground); }
.field-error { margin-top: 6px; font-size: 11px; color: var(--destructive); display: none; }
.field.has-error .input-wrap input { border-color: var(--destructive); }
.field.has-error .field-error { display: block; }

.form-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; font-size: 12px; }
.form-row label { display: flex; align-items: center; gap: 6px; color: var(--muted-foreground); }

.btn-submit {
  width: 100%; height: 42px; border-radius: var(--radius-lg); border: 0;
  background: var(--primary); color: var(--primary-foreground); font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow-glass); display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-submit:hover { background: color-mix(in oklch, var(--primary) 90%, black); }
.btn-submit:disabled { opacity: .7; cursor: not-allowed; }

.alert-banner {
  display: flex; align-items: flex-start; gap: 10px; border-radius: var(--radius-lg); border: 1px solid;
  padding: 12px 14px; font-size: 13px; margin-bottom: 20px;
}
.alert-banner svg { height: 16px; width: 16px; flex-shrink: 0; margin-top: 1px; }
.alert-error { background: color-mix(in oklch, var(--destructive) 8%, transparent); border-color: color-mix(in oklch, var(--destructive) 25%, transparent); color: var(--destructive); }

.demo-hint { margin-top: 24px; border-radius: var(--radius-lg); border: 1px dashed var(--border); padding: 12px 14px; font-size: 11px; color: var(--muted-foreground); }
.demo-hint b { color: var(--foreground); }