/* Axion Radar — login page (index.php), loaded after the shared auth.css. */

/* Short viewports (small phones, landscape, or keyboard open) — shrink everything
   so the card fits in one screen instead of forcing a scroll. */
@media (max-height: 700px) {
    body { padding: 10px; align-items: flex-start; }
    .login-container { padding: 20px; margin-top: 8px; }
    .logo-main { max-width: 130px; margin-bottom: 6px; }
    .logo-sub { max-width: 70px; margin-bottom: 12px; }
    .shield-icon { font-size: 24px; margin-bottom: 6px; }
    .totp-hint { margin-bottom: 12px; }
}
/* Restated from auth.css on purpose: in the original single file this rule came after the
   short-viewport block above and overrode its .shield-icon shrink, so the icon never actually
   shrank. Kept that way so splitting out auth.css changes nothing visible; delete this line to
   let the icon shrink on short screens as the block intends. */
.shield-icon { font-size: 36px; margin-bottom: 12px; }

.label-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }

.label-row label { margin-bottom: 0; }

.forgot-link { font-size: 12px; color: var(--accent); text-decoration: none; text-transform: none; letter-spacing: normal; font-weight: 600; }

.forgot-link:hover { text-decoration: underline; }

.totp-input {
    font-size: 28px !important; letter-spacing: 8px; text-align: center;
    font-family: monospace; padding: 16px !important;
}

.totp-hint {
    font-size: 13px; color: var(--text-dim); margin-bottom: 20px; line-height: 1.5;
}