/* Login e primeiro acesso: formulário à esquerda e vitrine com prévia de board à direita. */
.login-page { margin: 0; min-height: 100dvh; background: var(--surface); }
.auth-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: 100dvh; }
.auth-main { display: flex; flex-direction: column; min-width: 0; max-width: none; margin: 0; padding: 28px 48px; background: var(--surface); }
.auth-header, .auth-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.auth-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--foreground); font: 600 18px/1.2 var(--title-font); }
.auth-brand img { width: 36px; height: 36px; object-fit: contain; }
.auth-content { flex: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 400px; margin: 0 auto; padding: 40px 0; }
.auth-content .eyebrow { color: var(--link); font-size: 13px; font-weight: 600; }
.auth-content h1 { margin: 8px 0; font-size: 32px; line-height: 1.2; }
.auth-content section > p { margin: 0; font-size: 15px; }
.auth-footer { color: var(--muted); font-size: 12px; }

/* Formulário */
.login-form { margin-top: 32px; }
.form-field { margin-bottom: 20px; }
.form-field label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 500; }
.form-field input { width: 100%; max-width: none; min-height: 48px; padding: 10px 14px; font-size: 15px; }
.form-field input::placeholder { color: var(--muted); }
.form-field input:focus-visible { border-color: var(--primary); outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent); }
.password-control input { padding-right: 96px; }
.password-toggle { right: 6px; top: 6px; bottom: 6px; border-radius: var(--radius-small); color: var(--link); font-size: 13px; }
.login-submit { width: 100%; min-height: 48px; margin-top: 8px; font-size: 16px; }
.login-help { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border-subtle); text-align: center; font-size: 13px; }
.auth-content .form-errors { margin: 0 0 20px; }

/* Acesso pelo aplicativo: passos de instalação e endereço do servidor para copiar */
.app-steps { margin: 28px 0 0; padding: 0; list-style: none; counter-reset: passo; display: grid; gap: 22px; }
.app-steps li { position: relative; padding-left: 40px; counter-increment: passo; }
.app-steps li::before { content: counter(passo); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 14px; font-weight: 600; }
.app-steps strong { display: block; margin-bottom: 4px; font-size: 15px; }
.app-steps span { display: block; color: var(--muted); font-size: 14px; }
.app-steps .login-submit { margin-top: 12px; }
.copy-field { display: flex; gap: 8px; margin-top: 10px; }
.copy-field input { flex: 1; min-width: 0; min-height: 44px; padding: 8px 12px; font: 14px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; }
.copy-field .button { min-height: 44px; flex-shrink: 0; }
.copy-status { display: block; min-height: 18px; margin-top: 6px; color: var(--link); font-size: 12px; }

/* Vitrine */
.auth-showcase { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 48px; background: linear-gradient(155deg, var(--primary-highlight), var(--platform) 65%); }
.auth-showcase::before, .auth-showcase::after { content: ''; position: absolute; border-radius: 50%; filter: blur(70px); opacity: .35; pointer-events: none; }
.auth-showcase::before { width: 360px; height: 360px; top: -80px; right: -60px; background: #a25ddc; }
.auth-showcase::after { width: 320px; height: 320px; bottom: -90px; left: -40px; background: #00c875; }
.auth-showcase-inner { position: relative; z-index: 1; width: 100%; max-width: 540px; }
.auth-showcase-eyebrow { color: var(--muted); font-size: 13px; font-weight: 600; }
.auth-showcase h2 { margin: 10px 0 14px; color: var(--foreground); font: 500 clamp(28px, 2.6vw, 38px)/1.2 var(--title-font); letter-spacing: -.02em; }
.auth-showcase h2 span { color: var(--link); }
.auth-showcase p { max-width: 440px; margin: 0; font-size: 15px; line-height: 1.6; }

.auth-board { margin-top: 32px; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-medium); box-shadow: var(--shadow-medium); font-size: 13px; }
.auth-board-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.auth-board-top strong { font: 500 17px/1.3 var(--title-font); }
.auth-board-people { display: flex; }
.auth-board-people i { display: grid; place-items: center; width: 26px; height: 26px; margin-left: -6px; border: 2px solid var(--surface); border-radius: 50%; background: var(--primary); color: #fff; font-size: 11px; font-style: normal; font-weight: 600; }
.auth-board-people i:nth-child(2) { background: #e2445c; }
.auth-board-people i:nth-child(3) { background: #00a35c; }
.auth-board-group { display: block; margin-bottom: 8px; color: var(--primary); font-weight: 600; }
.auth-board-grid { display: grid; grid-template-columns: 64px minmax(0, 1fr) 140px 92px; border-left: 6px solid var(--primary); border-radius: var(--radius-small) 0 0 var(--radius-small); }
.auth-board-grid > span { display: flex; align-items: center; min-height: 36px; padding: 0 10px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auth-board-grid > span:nth-child(4n) { border-right: 0; justify-content: flex-end; font-variant-numeric: tabular-nums; }
.auth-board-head { color: var(--muted); border-top: 1px solid var(--border); }
.auth-board-grid > .auth-status { justify-content: center; padding: 0 6px; border-right-color: var(--surface); color: #fff; font-weight: 500; }
.auth-status-done { background: var(--success); }
.auth-status-working { background: var(--warning); }
.auth-board-grid > .auth-status-working { color: #323338; }
.auth-status-waiting { background: #784bd1; }
.auth-status-stuck { background: var(--danger); }
.auth-board-summary { display: flex; gap: 2px; height: 10px; margin-top: 14px; margin-left: auto; width: 50%; }
.auth-board-summary i { flex: 0 1 var(--size); }
.auth-features { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 28px 0 0; padding: 0; list-style: none; color: var(--foreground); font-size: 14px; }
.auth-features li { display: inline-flex; align-items: center; gap: 8px; }
.auth-features .icon { color: var(--link); }

@media (max-width: 1100px) {
  .auth-main { padding: 24px 32px; }
  .auth-showcase { padding: 32px; }
  .auth-board-grid { grid-template-columns: 56px minmax(0, 1fr) 132px 86px; }
}
@media (max-width: 900px) {
  .auth-layout { grid-template-columns: minmax(0, 1fr); }
  .auth-showcase { display: none; }
}
@media (max-width: 600px) {
  .auth-main { padding: 16px; }
  .auth-content { padding: 32px 0; }
  .auth-content h1 { font-size: 26px; }
  .form-field input { font-size: 16px; }
  .auth-footer { justify-content: center; flex-wrap: wrap; gap: 4px 12px; }
}
@media (max-height: 700px) {
  .auth-content { padding: 20px 0; }
  .login-form { margin-top: 20px; }
  .form-field { margin-bottom: 14px; }
  .auth-board { margin-top: 20px; }
  .auth-features { margin-top: 18px; }
}