/* Auth pages — MediaNet house style (matches tmp/login.html reference). */
.auth-body {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper);
  color: var(--ink);
  padding: 24px;
}
.auth-card {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  box-shadow: var(--mn-shadow);
  width: min(400px, 100%);
  padding: 34px 36px 28px;
}
.logo-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-block-end: 26px; }
.logo-wrap .logo-svg svg { height: 30px; }
.auth-title { font-size: 19px; font-weight: 700; text-align: center; margin-block-end: 4px; }
.auth-sub { text-align: center; color: var(--muted); font-size: 13.5px; margin-block-end: 22px; }

.field { margin-block-end: 15px; }
.field label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-block-end: 5px; }
.auth-card input[type=email], .auth-card input[type=password], .auth-card input[type=text] {
  width: 100%; padding: 10px 13px; border: 1px solid var(--line); border-radius: 9px;
  font: inherit; font-size: 14px; background: var(--panel); color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.auth-card input:focus { outline: none; border-color: var(--petrol); box-shadow: 0 0 0 3px var(--petrol-tint); }
.field-error { color: var(--petrol-deep); font-size: 12px; margin-block-start: 4px; }

.row { display: flex; justify-content: space-between; align-items: center; margin: 2px 0 20px; }
.check { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); cursor: pointer; }
.check input { accent-color: var(--petrol); }
.auth-card a { color: var(--petrol); text-decoration: none; font-size: 13px; }
.auth-card a:hover { color: var(--petrol-deep); text-decoration: underline; }

.auth-card .btn {
  width: 100%; padding: 11px; border: none; border-radius: 9px; background: var(--petrol); color: #fff;
  font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; transition: background .15s;
}
.auth-card .btn:hover { background: var(--petrol-deep); }
.auth-card .btn:focus-visible { outline: 3px solid var(--petrol-tint); outline-offset: 2px; }

.error { background: var(--petrol-tint); color: var(--petrol-deep); font-size: 13px; border-radius: 9px; padding: 9px 12px; margin-block-end: 15px; }
.foot { margin-block-start: 22px; text-align: center; font-size: 12px; color: var(--faint); }

.auth-langs { position: fixed; inset-block-start: 16px; inset-inline-end: 18px; display: flex; gap: 5px;
  background: var(--panel); border: 1px solid var(--line-soft); border-radius: 20px; padding: 3px; box-shadow: var(--mn-shadow); }
.auth-langs .lang { border: none; background: none; border-radius: 16px; padding: 4px 11px; font: inherit; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; }
.auth-langs .lang.on { background: var(--petrol); color: #fff; }

/* 2FA setup page reuses .auth-card */
.totp-qr { display: grid; place-items: center; margin-block: 1rem; }
.totp-secret { text-align: center; font-size: .85rem; color: var(--muted); }
.totp-secret code { background: var(--mn-surface-2); padding: .15rem .4rem; border-radius: 6px; }