/* Login page - brand aligned (dark, gradient) */
:root {
  --color-primary: #4318ff;
  --color-primary-2: #9f7aea;
  --color-bg: #0f1535;
  --color-surface: rgba(6,11,40,.94);
  --color-surface-2: rgba(10,14,35,.55);
  --color-text: #e9ecef;
  --color-muted: #b8c1d9;
  --color-error: #e31a1a;
  --radius: 14px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  color: var(--color-text);
  background: radial-gradient(60% 60% at 70% 10%, rgba(67,24,255,.25), transparent 60%),
              linear-gradient(180deg, #0b1130 0%, #0a0e23 100%);
  display: grid;
  align-items: center;
  padding: 24px 16px;
}

.container { width: min(440px, 94%); margin: 0 auto; }

.brand { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 10px; color: var(--color-text); text-decoration: none; }
.brand-logo { width: 36px; height: 36px; }
.brand-name { font-weight: 700; letter-spacing: .3px; }

.title { text-align: center; margin: 0 0 6px; font-size: 22px; }
.subtitle { text-align: center; margin: 0 0 18px; color: var(--color-muted); font-weight: 500; }

.card { background: linear-gradient(310deg, var(--color-surface), var(--color-surface-2)); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius); box-shadow: 0 20px 40px rgba(0,0,0,.35); padding: 18px; }

.error-box { background: rgba(227,26,26,.12); border: 1px solid rgba(227,26,26,.45); color: #ffd6d6; padding: 10px 12px; border-radius: 10px; margin-bottom: 12px; text-align: center; font-weight: 600; }

.form-group { margin-bottom: 14px; }
.label { display: block; margin-bottom: 6px; font-weight: 600; color: var(--color-muted); }
.input { width: 100%; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); color: var(--color-text); outline: none; }
.row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.toggle { appearance: none; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: var(--color-text); padding: 8px 10px; border-radius: 10px; cursor: pointer; }

.btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 12px; padding: 12px 16px; text-decoration: none; font-weight: 700; cursor: pointer; }
.btn-primary { background: linear-gradient(310deg, var(--color-primary), var(--color-primary-2)); color: #fff; box-shadow: 0 12px 28px rgba(67,24,255,.25); }
.btn-primary:hover { filter: brightness(1.03); }

.meta { margin-top: 12px; display: flex; justify-content: space-between; align-items: center; color: var(--color-muted); font-size: 13px; }
.link { color: var(--color-text); text-decoration: none; opacity: .9; }
.link:hover { opacity: 1; }

.foot { margin-top: 16px; text-align: center; color: var(--color-muted); font-size: 12px; }