.totp-generator{width:100%;padding:var(--s5);background-color:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow);gap:var(--s4);flex-direction:column;margin:0 auto;display:flex}.totp-generator input[type=text]{font-family:var(--font-mono);letter-spacing:.04em}.totp-generator .totp-error{color:var(--danger);font-size:.8rem}.totp-generator .totp-settings{gap:var(--s3);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}@media (max-width:560px){.totp-generator .totp-settings{grid-template-columns:1fr}}.totp-generator .totp-code{font-family:var(--font-mono);letter-spacing:.14em;font-variant-numeric:tabular-nums;color:var(--accent);margin:0;font-size:clamp(2.1rem,9vw,3rem);font-weight:700}.totp-generator .totp-bar{height:6px;margin-top:var(--s2);background-color:var(--surface-inset);border-radius:999px;overflow:hidden}.totp-generator .totp-bar span{background-color:var(--accent);height:100%;transition:width .9s linear;display:block}.totp-generator .totp-window h2{font-size:.9rem;font-weight:600}.totp-generator .totp-window ul{margin:var(--s2) 0 var(--s2);gap:var(--s2);flex-direction:column;padding:0;list-style:none;display:flex}.totp-generator .totp-window li{justify-content:space-between;align-items:baseline;gap:var(--s3);padding:var(--s2) var(--s3);background-color:var(--surface-inset);border:1px solid var(--border);border-radius:var(--r-sm);display:flex}.totp-generator .totp-window li.now{border-color:var(--accent)}.totp-generator .totp-window-code{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:.1em;font-size:1.05rem;font-weight:600}.totp-generator .totp-window-when{color:var(--muted);text-align:right;font-size:.78rem}.totp-generator .totp-verdict{min-height:1.2em;font-size:.85rem;line-height:1.5}.totp-generator .totp-verdict.match{color:var(--success);font-weight:600}.totp-generator .totp-verdict.no-match,.totp-generator .totp-verdict.malformed{color:var(--danger)}.totp-generator .totp-verdict.drifted{color:var(--text-2);font-weight:500}.totp-generator code{background-color:var(--surface-inset);font-family:var(--font-mono);border-radius:3px;padding:1px 4px;font-size:.85em}