/* login.css — Stravia Admin login page */
:root {
  --bg:     #0a0a0a;
  --bg-1:   #111110;
  --line:   rgba(245,245,240,0.08);
  --line-2: rgba(245,245,240,0.14);
  --fg:     #f5f5f0;
  --fg-2:   rgba(245,245,240,0.72);
  --fg-3:   rgba(245,245,240,0.48);
  --accent: #ff6a3d;
  --bad:    #ff5b5b;
  --sans:   "Inter", system-ui, sans-serif;
  --display:"Fraunces", "Times New Roman", serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); color: var(--fg); }
body {
  font-family: var(--sans); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: grid; place-items: center; min-height: 100vh;
}

.wrap { width: 100%; max-width: 380px; padding: 24px; }

.card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 36px 32px;
}

.logo-wrap { margin-bottom: 28px; }
.logo { height: 28px; mix-blend-mode: screen; }
.logo-text {
  font-family: var(--display); font-weight: 300;
  font-size: 22px; letter-spacing: -0.02em;
}

h1 {
  font-family: var(--display); font-weight: 300;
  font-size: 26px; letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.sub { margin: 0 0 8px; color: var(--fg-3); font-size: 13px; }

.back-link {
  display: inline-block; margin-bottom: 24px;
  font-size: 12px; color: var(--fg-3);
  text-decoration: none; transition: color 160ms ease;
}
.back-link:hover { color: var(--fg); }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.field label { font-size: 12px; color: var(--fg-3); letter-spacing: 0.04em; }
.field input {
  background: var(--bg); border: 1px solid var(--line-2);
  border-radius: 8px; padding: 11px 13px;
  color: var(--fg); font: inherit; outline: 0;
  transition: border-color 160ms ease;
}
.field input:focus { border-color: var(--accent); }

.error {
  font-size: 12px; color: var(--bad);
  min-height: 18px; margin-bottom: 8px;
}

.btn {
  width: 100%; padding: 11px 16px;
  background: var(--accent); color: #1a0a05;
  border: none; border-radius: 8px;
  font: 500 14px/1 var(--sans);
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background 160ms ease;
  margin-top: 4px;
}
.btn:hover:not(:disabled) { background: #ff7d54; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

.spinner {
  width: 14px; height: 14px;
  border: 2px solid rgba(26,10,5,0.3);
  border-top-color: #1a0a05;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }