/* ═══════════════════════════════════════════════════════════════
   MarketCompass — Matt Edition: the login page.

   Loaded ONLY by login.php, and only after style.css: every value here
   is one of style.css's :root tokens, and .login-body layers onto its
   base `body` rule rather than replacing it.

   Split out of style.css when that file passed its 400-line limit. This
   was the natural seam — one page, one prefix, and nothing the dashboard
   has any use for. Rules are verbatim; nothing was restyled in the move.
═══════════════════════════════════════════════════════════════ */

.login-body { display: flex; align-items: center; justify-content: center; overflow: auto; }

.login-panel {
  width: 320px;
  max-width: calc(100vw - 32px);
  padding: 26px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.login-brand { font-size: 17px; font-weight: 600; margin-bottom: 18px; }
.login-tag {
  display: block;
  margin-top: 3px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.login-form { display: flex; flex-direction: column; }
.login-label { margin-bottom: 4px; color: var(--text-secondary); font-size: 11px; }
.login-input {
  margin-bottom: 14px;
  padding: 8px 10px;
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
}
.login-input:focus { outline: none; border-color: var(--accent); }
.login-button {
  padding: 9px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.login-button:hover { background: var(--accent-hover); }

.login-error {
  margin-bottom: 14px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  background: rgba(224, 82, 82, 0.12);
  border: 1px solid rgba(224, 82, 82, 0.4);
  color: var(--red);
  font-size: 12px;
}
.login-note { margin-top: 14px; color: var(--text-muted); font-size: 11px; }