/* -------------------------------------------------
   "Back to Login" corner link -- made to match the one on
   register.ejs / forgot.ejs exactly. totp-recreate.ejs loads
   login.css before this file, so this rule (same specificity,
   later in source order) wins the cascade without touching
   login.css itself.
   ------------------------------------------------- */
/* -------------------------------------------------
   "Back to Login" corner link -- made to match the one on
   register.ejs / forgot.ejs exactly. totp-recreate.ejs loads
   login.css before this file. A plain .back-to-login-corner
   class selector wasn't enough to win -- login.css evidently
   has a more specific descendant rule (e.g. ".login-container
   a") styling links generally, which beats a single class on
   specificity even when it loads first. Scoping to the actual
   container + tag, with !important as a hard guarantee, closes
   that gap without touching login.css itself.
   ------------------------------------------------- */
.login-container a.back-to-login-corner,
a.back-to-login-corner {
    position: absolute !important;
    top: 0.75rem !important;
    left: 0.9375rem !important;
    background-color: #a52a53 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 0.3rem 0.6rem !important;
    border-radius: 0.25rem !important;
    font-size: 0.75rem !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color 0.3s;
}

.login-container a.back-to-login-corner:hover,
a.back-to-login-corner:hover {
    background-color: #841f41 !important;
}

/* Only the recreate page combines login-container + totp-container --
   scoped this way so totp-setup/verify (plain .totp-container, no back
   link) keep their existing spacing untouched. */
.login-container.totp-container {
    padding-top: 2.25rem;
}

.totp-container {
    position: relative; /* Anchor for the corner "Back to Login" link */
    background-color: #2e3b4e;
    padding: 1.25rem;
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.1);
    width: 90%;
    max-width: 25rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.totp-qr-wrapper {
    display: flex;
    justify-content: center; /* explicit horizontal centering, independent of parent flex settings */
    width: 100%;
}

.totp-qr {
    background: #cfe5ff;
    padding: 0.75rem;
    border-radius: 0.5rem;
    margin: 1rem 0;
    width: 12.5rem; /* 200px */
    height: 12.5rem;
}

.totp-digit-container {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 0.5rem 0;
}

.totp-digit-input {
    width: 2.5rem;
    height: 3rem;
    text-align: center;
    font-family: monospace;
    font-size: 1.5rem;
    color: #cfe5ff;
    background: #1f2a38;
    border: 1px solid #3b4e6e;
    border-radius: 0.375rem;
    outline: none;
    box-sizing: border-box;
    -moz-appearance: textfield;
}

.totp-digit-input:focus {
    border-color: #cfe5ff;
    box-shadow: 0 0 0 0.125rem rgba(207, 229, 255, 0.35);
}

.totp-digit-input::-webkit-outer-spin-button,
.totp-digit-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

@media (max-width: 25rem) {
    .totp-digit-input {
        width: 2.1rem;
        height: 2.6rem;
        font-size: 1.25rem;
    }
    .totp-digit-container {
        gap: 0.35rem;
    }
}

.totp-secret {
    font-family: monospace;
    font-size: 0.9rem;
    color: #cfe5ff;
    background: #1f2a38;
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
    word-break: break-all;
    margin-bottom: 1rem;
}

.totp-hint {
    color: #9fb3c8;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}