/* Authenticator layout; all assets are served locally. */
.auth-hero { max-width: 850px; margin: 1.4rem 0 2rem; }
.auth-badge { display: inline-block; color: #166534; background: #dcfce7; border: 1px solid #bbf7d0; border-radius: 20px; padding: .2rem .7rem; font-size: .78rem; font-weight: 650; }
.auth-hero h1 { font-size: clamp(1.8rem, 4vw, 2.65rem); letter-spacing: -.035em; margin: .55rem 0; }
.auth-hero > p { color: var(--light-text); }
.auth-hero .auth-memory { margin-top: 1rem; padding-inline-start: 1rem; border-inline-start: 3px solid #f59e0b; font-size: .9rem; color: #854d0e; }
.auth-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 1.75rem; align-items: start; }
.auth-main .tool-section { padding: 1.6rem; }
.auth-main h2 { font-size: 1.25rem; margin-bottom: 1rem; }
.auth-main h3 { font-size: 1rem; margin-bottom: .7rem; }
.auth-main label { display: block; font-size: .87rem; font-weight: 600; margin: .85rem 0 .4rem; }
.auth-main input:not([type=file]), .auth-main select { width: 100%; min-width: 0; padding: .7rem .8rem; border: 1px solid var(--border-color); border-radius: 8px; background: #fff; color: var(--text-color); font: inherit; }
.auth-main input:focus, .auth-main select:focus, .auth-main button:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
.auth-main input[type=file] { display: block; max-width: 100%; font-size: .85rem; margin: .5rem 0 1rem; }
.auth-main button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .65rem .95rem; border-radius: 8px; font: inherit; font-size: .88rem; font-weight: 600; line-height: 1.4; cursor: pointer; white-space: normal; background: var(--primary-color); border: 1px solid transparent; color: #fff; box-shadow: none; }
.auth-main button:hover { background: var(--primary-hover); }
.auth-main button.btn-outline { background: #fff; border-color: var(--border-color); color: var(--light-text); }
.auth-main button.btn-outline:hover { color: var(--primary-hover); border-color: var(--primary-color); }
.auth-main button:disabled { opacity: .5; cursor: not-allowed; }
.auth-secret-row { display: flex; gap: .5rem; }
.auth-secret-row input { flex: 1; }
.auth-secret-row button { flex: 0 0 auto; max-width: 42%; }
.auth-help { color: var(--light-text); font-size: .8rem; margin-top: .65rem; }
.auth-settings { border-top: 1px solid var(--border-color); margin-top: 1.2rem; padding-top: .85rem; }
.auth-main summary { cursor: pointer; font-size: .92rem; font-weight: 600; }
.auth-settings-grid { display: grid; grid-template-columns: 1.1fr .65fr 1fr; gap: .65rem; }
#auth-add { margin-top: 1.1rem; width: 100%; }
.auth-import { border-top: 1px solid var(--border-color); margin-top: 1.5rem; padding-top: 1.25rem; }
.auth-main .auth-file { border: 1px dashed #cbd5e1; border-radius: 8px; padding: .75rem; background: var(--surface-muted); }
.auth-file input { margin-bottom: 0 !important; }
#auth-camera-panel { margin-top: 1rem; }
#auth-video { display: block; width: 100%; max-height: 300px; background: #0f172a; border-radius: 8px; margin-bottom: .6rem; }
.auth-section-heading, .auth-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.auth-section-heading h2, .auth-card-heading h3 { margin: 0; }
.auth-results { min-width: 0; padding: .4rem 0; }
.auth-clock-line { color: var(--light-text); font-size: .8rem; margin-top: .65rem; display: flex; gap: .6rem; }
#auth-status, #auth-backup-status { min-height: 1.7em; margin: .65rem 0; font-size: .88rem; color: #166534; overflow-wrap: anywhere; }
.auth-error, #auth-status.auth-error, #auth-backup-status.auth-error { color: #b91c1c; }
#auth-empty { text-align: center; padding: 3rem 1.4rem; border: 1px dashed #cbd5e1; border-radius: 14px; background: rgba(255,255,255,.6); color: var(--light-text); }
#auth-empty > span { display: block; font: 2.6rem var(--font-mono); letter-spacing: .12em; color: #cbd5e1; margin-bottom: 1rem; }
#auth-empty p { font-size: .9rem; }
#auth-accounts { display: grid; gap: 1rem; }
.auth-account { min-width: 0; padding: 1.3rem; background: #fff; border: 1px solid var(--border-color); border-radius: 14px; box-shadow: var(--box-shadow); }
.auth-account-name { overflow-wrap: anywhere; font-weight: 650; }
.auth-main .auth-remove { font-size: .75rem; padding: .3rem .55rem; flex-shrink: 0; }
.auth-parameters { color: var(--light-text); font: .75rem var(--font-mono); text-align: start; margin-top: .35rem; }
.auth-code-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: 1rem 0; }
.auth-code { font-family: var(--font-mono); font-size: clamp(1.8rem, 3.8vw, 2.5rem); font-weight: 750; letter-spacing: .06em; color: var(--text-color); unicode-bidi: isolate; }
.auth-account progress { display: block; width: 100%; height: 5px; appearance: none; border: none; background: #e2e8f0; border-radius: 10px; overflow: hidden; }
.auth-account progress::-webkit-progress-bar { background: #e2e8f0; }
.auth-account progress::-webkit-progress-value { background: #22c55e; border-radius: 10px; }
.auth-account progress::-moz-progress-bar { background: #22c55e; }
.auth-expiring progress::-webkit-progress-value { background: #f59e0b; }
.auth-expiring progress::-moz-progress-bar { background: #f59e0b; }
.auth-countdown { margin-top: .45rem; font-size: .75rem; color: var(--light-text); }
.auth-backup > p { font-size: .9rem; color: var(--light-text); }
.auth-backup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 1.4rem; }
.auth-backup-grid button { margin-top: 1rem; }
.auth-guide details { border-top: 1px solid var(--border-color); padding: 1rem 0; }
.auth-guide details:last-child { padding-bottom: 0; }
.auth-guide p { padding-top: .7rem; font-size: .9rem; color: var(--light-text); }
@media (max-width: 800px) {
    .auth-layout, .auth-backup-grid { grid-template-columns: minmax(0, 1fr); }
    .auth-layout { gap: 0; }
    .auth-results { margin-bottom: 1.7rem; }
    .auth-backup-grid { gap: 1.5rem; }
    .auth-backup-grid > div + div { padding-top: 1.5rem; border-top: 1px solid var(--border-color); }
}
@media (max-width: 420px) {
    .auth-main { padding-inline: .85rem; }
    .auth-main .tool-section { padding: 1.1rem; }
    .auth-account { padding: 1rem; }
    .auth-code { font-size: 1.85rem; letter-spacing: .025em; }
}

.auth-download { display: block; margin-top: .7rem; color: var(--primary-hover); font-size: .9rem; }