.login-page { min-height: 100vh; display: flex; flex-direction: column; }
.login-demo-link { color: var(--muted); font-size: 13px; text-decoration: none; transition: color .2s ease; }
.login-demo-link:hover { color: var(--blue-dark); }
.login-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 450px); align-items: center; gap: clamp(42px, 8vw, 120px); flex: 1; padding: 70px 7% 82px; }
.login-intro { max-width: 620px; }
.login-intro h1 { margin: 21px 0 22px; color: var(--ink-strong); font: 800 clamp(42px, 6vw, 70px)/1.04 'Inter', sans-serif; letter-spacing: -.065em; }
.login-intro h1 .highlight { position: relative; z-index: 0; white-space: nowrap; }
.login-intro h1 .highlight::after { position: absolute; z-index: -1; right: -5px; bottom: 5px; left: -3px; height: 16px; border-radius: 10px; background: #f4d794; content: ''; transform: rotate(-1.4deg); }
.login-intro > p { max-width: 530px; margin: 0; color: #737c91; font-size: 17px; line-height: 1.75; }
.login-benefits { display: grid; gap: 14px; margin-top: 35px; color: #59637c; font-size: 13px; }
.login-benefits > div { display: flex; align-items: center; gap: 11px; }
.login-benefit-icon { display: grid; flex: 0 0 27px; place-items: center; width: 27px; height: 27px; border-radius: 9px; background: #e8edfc; color: var(--blue-dark); font-weight: 800; }
.login-benefits > div:nth-child(2) .login-benefit-icon { background: #fff0df; color: #c57443; }
.login-benefits > div:nth-child(3) .login-benefit-icon { background: #e7f2e9; color: #54866b; }
.login-card { width: 100%; padding: 34px; border: 1px solid rgba(55, 67, 105, .1); border-radius: 25px; background: rgba(255, 254, 250, .9); box-shadow: var(--shadow-soft); }
.login-card-heading h2 { margin: 8px 0 7px; color: var(--ink-strong); font: 800 27px/1.2 'Inter', sans-serif; letter-spacing: -.045em; }
.login-card-heading p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.login-eyebrow { color: #6475ad; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.role-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 27px 0 25px; padding: 4px; border-radius: 14px; background: #f0f1f5; }
.role-button { min-height: 43px; padding: 0 10px; border: 0; border-radius: 11px; background: transparent; color: #7d8495; cursor: pointer; font-size: 12px; font-weight: 700; transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.role-button.is-active { background: #fffefa; box-shadow: 0 3px 9px rgba(38, 53, 94, .09); color: var(--blue-dark); }
.login-form { display: grid; gap: 9px; }
.login-form label { margin-top: 5px; color: var(--ink-strong); font-size: 12px; font-weight: 700; }
.login-form label span { color: var(--soft-muted); font-weight: 500; }
.login-form input { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid #e3e4e8; border-radius: 13px; outline: 0; background: #fffefa; color: var(--ink); font: inherit; font-size: 14px; transition: border-color .2s ease, box-shadow .2s ease; }
.login-form input::placeholder { color: #b2b6c1; }
.login-form input:focus { border-color: #7187ca; box-shadow: 0 0 0 3px rgba(113, 135, 202, .15); }
.login-submit { width: 100%; margin-top: 14px; justify-content: space-between; padding-inline: 19px; }
.login-submit:disabled { cursor: wait; opacity: .65; transform: none; }
.login-submit.is-loading { cursor: wait; }
.register-prompt { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 16px; color: #7b8398; font-size: 14px; }
.register-prompt button, .back-login { padding: 0; border: 0; background: none; color: var(--blue); cursor: pointer; font: inherit; font-weight: 700; }
.register-prompt button:hover, .back-login:hover { color: var(--blue-dark); text-decoration: underline; }
.back-login { display: block; margin: 20px auto 0; font-size: 12px; }
.login-message { min-height: 20px; margin: 14px 0 0; color: #bc5a50; font-size: 12px; line-height: 1.5; text-align: center; }
.login-message.is-success { color: var(--green); }
.hidden { display: none !important; }

@media (max-width: 850px) {
  .login-main { grid-template-columns: 1fr; gap: 42px; padding: 52px 0 64px; }
  .login-intro { max-width: 620px; }
  .login-intro h1 { font-size: clamp(40px, 10vw, 58px); }
  .login-card { max-width: 520px; justify-self: center; }
}

@media (max-width: 560px) {
  .login-page .topbar { min-height: 76px; }
  .login-page .brand-copy small { display: none; }
  .login-demo-link { font-size: 11px; }
  .login-main { gap: 32px; padding: 20px 0 40px; }
  .login-card { order: -1; }
  .login-intro h1 { margin-top: 12px; }
  .login-intro h1 { font-size: clamp(34px, 10.5vw, 46px); }
  .login-intro h1 .highlight { white-space: normal; }
  .login-intro > p { font-size: 15px; }
  .login-benefits { margin-top: 27px; }
  .login-card { padding: 24px 20px; border-radius: 20px; }
  .login-form input { font-size: 16px; }
  .site-footer { gap: 14px; flex-wrap: wrap; padding: 17px 0; }
}

.role-button { min-height: 44px; }
.register-prompt button, .back-login { min-height: 44px; }
.login-form label { font-size: 13px; }
.login-message { font-size: 13px; }
.login-message:empty { display: none; }