@import url('/tracking-brand/fonts.css');

body {
  background: #0a0a0a;
  color: #fff;
  font-family: 'Nata Sans', Inter, sans-serif;
  color-scheme: dark;
  padding: 24px;
}
.card {
  background: #151515;
  border: 1px solid #292929;
  border-radius: 12px;
  max-width: 420px;
  width: 100%;
  padding: 40px;
  box-shadow: 0 20px 60px #0006;
}
.tracking-login-brand {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-bottom: 32px;
}
.tracking-login-brand img { width: 60px; height: 58px; object-fit: contain; }
.tracking-login-brand span { color: #f7c900; font-size: 11px; font-weight: 700; letter-spacing: 3px; }
h1 {
  font-family: Francy, 'Nata Sans', sans-serif;
  color: #fff;
  font-size: 34px;
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: 12px;
}
p.sub { color: #a3a3a3; font-size: 14px; line-height: 1.6; }
input { background: #0a0a0a; color: #fff; border-color: #414141; font-family: inherit; }
input:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid #f7c900; outline-offset: 3px; }
button { color: #000; background: #f7c900; border-radius: 8px; font-family: inherit; font-weight: 700; text-transform: uppercase; }
button:hover { background: #ffdc3d; }
a { color: #f7c900; }
.err { color: #fca5a5; }
.msg { color: #f7c900; }
@media (max-width: 480px) { .card { padding: 28px; } h1 { font-size: 30px; } }