@font-face { font-family: 'Acumin Pro'; src: url('/assets/fonts/Acumin-RPro.otf') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Acumin Pro'; src: url('/assets/fonts/Acumin-BdPro.otf') format('opentype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Acumin Pro Wide'; src: url('/assets/fonts/acumin-pro-wide.otf') format('opentype'); font-weight: 400; font-display: swap; }
:root {
  --sans: 'Acumin Pro', system-ui, "Segoe UI", Roboto, sans-serif;
  --wide: 'Acumin Pro Wide', 'Acumin Pro', system-ui, sans-serif;
  --bg: #f7f5fb; --surface: #ffffff; --border: #e8e2f0; --border-2: #d8cfe7;
  --text: #221a30; --text-2: #655d78; --text-3: #a49cb8;
  --accent: #6d4f94; --accent-deep: #5a4274; --accent-wash: #f0ebf7; --error: #b23a48;
  --shadow-2: 0 6px 24px rgba(40, 26, 60, .12);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body {
  font-family: var(--sans); background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 24px 16px;
}
.card {
  width: 100%; max-width: 420px; text-align: center; background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow-2); padding: 34px 32px;
}
.brand { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 26px; }
.brand-logo { height: 30px; width: auto; display: block; }
.brand-sep { width: 1px; height: 26px; background: var(--border-2); }
.brand-label { font-size: 10px; line-height: 1.15; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); text-align: left; }
.title { font-family: var(--wide); font-size: 22px; font-weight: 700; margin: 0 0 10px; }
.text { font-size: 13.5px; color: var(--text-2); margin: 0 0 22px; }
.msg { font-size: 13px; margin: -8px 0 20px; padding: 10px 12px; border-radius: 10px; background: var(--accent-wash); color: var(--accent-deep); }
.msg--error { background: #fbeef0; color: var(--error); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 42px; border-radius: 10px;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 14px; text-decoration: none; transition: background .15s;
}
.btn:hover { background: var(--accent-deep); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }