/* Scoped to the 2FA page, matching the Twitch/Kick instruction cards. */
.totp-generator{--totp-accent:#16823e;--totp-accent-strong:#116732;--totp-soft:#edf9f0;--totp-accent-line:#c7e9d0;--totp-warning:#9a5700;--totp-warning-soft:#fff7e6;--totp-error:#b42318;color:var(--text);padding:28px 0 72px}
.totp-generator [hidden]{display:none!important}
.totp-shell{width:min(1160px,calc(100% - 40px));margin:0 auto}
.totp-topline{display:flex;align-items:center;justify-content:space-between;gap:12px}
.totp-back{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--muted);font-size:13px;font-weight:600}
.totp-back:hover{color:var(--primary)}
.totp-hero{margin:18px 0 28px;max-width:760px}
.totp-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--totp-accent-line);border-radius:9px;background:var(--totp-soft);color:var(--totp-accent-strong);font-size:12px;font-weight:700}
.totp-hero h1{margin:12px 0 10px;font-size:clamp(28px,3.5vw,40px);font-weight:700;line-height:1.18;letter-spacing:-.04em}
.totp-hero p{margin:0;max-width:690px;color:var(--muted);font-size:14px;line-height:1.65}
.totp-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
.totp-main,.totp-sidebar{display:grid;gap:24px;min-width:0}
.totp-sidebar{gap:16px}
.totp-card{border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:var(--shadow-sm)}
.totp-workspace{padding:28px}
.totp-section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px;min-height:32px}
.totp-section-heading>div{display:flex;align-items:center;gap:10px;min-width:0}
.totp-section-heading h2{margin:0;font-size:18px;font-weight:700;line-height:1.4;letter-spacing:-.02em}
.totp-step-number{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border:1px solid var(--line);border-radius:9px;background:var(--surface-soft);color:var(--muted);font-size:11px;font-weight:700}
.totp-clear{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;flex-shrink:0;color:var(--muted);font-size:12px;font-weight:600}
.totp-clear:hover{color:var(--primary)}
.totp-label{display:block;margin:0 0 8px;font-size:12px;font-weight:700}
.totp-input-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
.totp-input-wrap{position:relative;min-width:0}
.totp-input{box-sizing:border-box;width:100%;height:50px;padding:0 52px 0 14px;border:1px solid var(--line-strong);border-radius:11px;background:var(--surface);color:var(--text);font-size:14px;line-height:1.5;font-family:inherit;box-shadow:none}
.totp-input::placeholder{color:var(--muted);font-family:inherit;font-size:12px;opacity:1}
.totp-input:focus{outline:3px solid rgba(37,99,235,.15);outline-offset:0;border-color:#2563eb}
.totp-input[aria-invalid="true"]{border-color:var(--totp-error)}
.totp-reveal{position:absolute;top:3px;right:3px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:9px;background:transparent;color:var(--muted);cursor:pointer;font-size:16px}
.totp-reveal:hover{color:var(--text);background:var(--surface-soft)}
.totp-input-help{margin:10px 0 0;color:var(--muted);font-size:12px;line-height:1.7}
.totp-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;box-sizing:border-box;padding:0 16px;border:1px solid transparent;border-radius:11px;font:inherit;font-size:13px;font-weight:700;line-height:1.4;text-align:center;cursor:pointer;transition:background .18s ease,border-color .18s ease}
.totp-button-primary{color:#fff;background:#2563eb;border-color:#2563eb}
.totp-button-primary:hover{background:#1d4ed8;border-color:#1d4ed8}
.totp-button-secondary{color:var(--text);background:var(--surface);border-color:var(--line-strong)}
.totp-button-secondary:hover{background:var(--surface-soft);border-color:var(--totp-accent-line)}
.totp-button:disabled{cursor:default;opacity:.6}
.totp-generate{min-height:50px}
.totp-error{display:flex;align-items:flex-start;margin:12px 0 0;padding:12px 14px;border:1px solid currentColor;border-radius:10px;color:var(--totp-error);background:var(--surface-soft);font-size:13px;line-height:1.65}
.totp-result{margin-top:26px;padding-top:26px;border-top:1px solid var(--line)}
.totp-result-heading{margin-bottom:16px}
.totp-status{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;padding:5px 8px;border:1px solid var(--totp-accent-line);border-radius:7px;color:var(--totp-accent-strong);background:var(--totp-soft);font-size:10px;font-weight:700;line-height:1.4}
.totp-status-dot{width:5px;height:5px;flex:0 0 5px;border-radius:50%;background:currentColor}
.totp-code-surface{padding:24px;border:1px solid var(--totp-accent-line);border-radius:15px;background:var(--totp-soft);text-align:center}
.totp-code-label{display:block;color:var(--totp-accent-strong);font-size:11px;font-weight:600;line-height:1.5}
.totp-code{display:block;margin:14px 0 18px;color:var(--text);font-size:clamp(38px,4.5vw,58px);font-weight:600;line-height:1.2;letter-spacing:.04em;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
.totp-empty-message{margin:0;color:var(--muted);font-size:12px;line-height:1.7}
.totp-timer{max-width:330px;margin:0 auto}
.totp-timer-copy{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px;color:var(--totp-accent-strong);font-size:12px;line-height:1.5}
.totp-timer-copy strong{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.totp-progress{display:block;appearance:none;width:100%;height:5px;border:0;border-radius:3px;overflow:hidden;background:var(--totp-accent-line);color:var(--totp-accent)}
.totp-progress::-webkit-progress-bar{background:var(--totp-accent-line);border-radius:3px}
.totp-progress::-webkit-progress-value{background:var(--totp-accent);border-radius:3px}
.totp-progress::-moz-progress-bar{background:var(--totp-accent);border-radius:3px}
.totp-copy,.totp-retry{width:100%;margin-top:14px}
.totp-copy[data-copied="true"]{background:var(--totp-accent-strong);border-color:var(--totp-accent-strong)}
.totp-result-note{margin:12px 0 0;color:var(--muted);font-size:12px;line-height:1.7;text-align:center}
.totp-feedback{min-height:20px;margin:6px 0 0;color:var(--totp-accent-strong);font-size:12px;line-height:1.65;text-align:center;overflow-wrap:anywhere}
.totp-feedback[data-error="true"]{color:var(--totp-error)}
.totp-noscript{margin:12px 0 0;color:var(--muted);font-size:12px;line-height:1.7}
.totp-result[data-state="empty"] .totp-code-surface{border-color:var(--line);border-style:dashed;background:var(--surface-soft)}
.totp-result[data-state="empty"] .totp-code,.totp-result[data-state="empty"] .totp-code-label{color:var(--muted)}
.totp-result[data-state="expired"] .totp-code-surface,.totp-result[data-state="loading"] .totp-code-surface{background:var(--surface-soft);border-color:var(--line)}
.totp-result[data-state="expired"] .totp-status,.totp-result[data-state="loading"] .totp-status{color:var(--muted);background:var(--surface-soft);border-color:var(--line)}
.totp-result[data-expiring="true"] .totp-timer-copy{color:var(--totp-warning)}
.totp-result[data-expiring="true"] .totp-progress{color:var(--totp-warning);background:var(--totp-warning-soft)}
.totp-result[data-expiring="true"] .totp-progress::-webkit-progress-value{background:var(--totp-warning)}
.totp-result[data-expiring="true"] .totp-progress::-moz-progress-bar{background:var(--totp-warning)}
.totp-howto{padding:24px}
.totp-eyebrow{display:block;color:var(--totp-accent-strong);font-size:10px;font-weight:700;letter-spacing:.065em;text-transform:uppercase;line-height:1.6}
.totp-howto h2,.totp-faq h2{margin:7px 0 0;font-size:21px;font-weight:700;line-height:1.4;letter-spacing:-.03em}
.totp-steps{display:grid;gap:21px;margin:24px 0;padding:0;list-style:none}
.totp-steps li{display:flex;align-items:flex-start;gap:12px}
.totp-steps li>span{display:grid;place-items:center;width:28px;height:28px;flex:0 0 28px;border:1px solid var(--totp-accent-line);border-radius:9px;background:var(--totp-soft);color:var(--totp-accent-strong);font-size:11px;font-weight:700}
.totp-steps h3{margin:2px 0 5px;font-size:13px;font-weight:700;line-height:1.4}
.totp-steps p{margin:0;color:var(--muted);font-size:12px;line-height:1.75}
.totp-sidebar .totp-button{width:100%;font-size:12px}
.totp-help{padding:22px;background:var(--surface-soft)}
.totp-help-icon{display:grid;place-items:center;width:36px;height:36px;margin-bottom:12px;border:1px solid var(--line);border-radius:11px;color:var(--primary);background:var(--surface);font-size:16px}
.totp-help h2{margin:0 0 8px;font-size:17px;font-weight:700;letter-spacing:-.02em;line-height:1.5}
.totp-help p{margin:0 0 16px;color:var(--muted);font-size:12px;line-height:1.75}
.totp-faq{padding:24px 28px;scroll-margin-top:96px}
.totp-faq h2{margin-bottom:16px}
.totp-faq details{border-top:1px solid var(--line)}
.totp-faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:14px 0;box-sizing:border-box;list-style:none;font-size:14px;font-weight:600;line-height:1.6;cursor:pointer}
.totp-faq summary::-webkit-details-marker{display:none}
.totp-faq summary i{flex:0 0 auto;color:var(--muted);font-size:11px;transition:transform .18s ease}
.totp-faq details[open] summary i{transform:rotate(45deg)}
.totp-faq details p{margin:0;padding:0 24px 16px 0;color:var(--muted);font-size:13px;line-height:1.8}
.totp-faq a{color:var(--primary);text-decoration:underline;text-underline-offset:3px}
.totp-generator :is(a,button,summary):focus-visible{outline:3px solid var(--totp-accent);outline-offset:3px}
html[data-theme="dark"] .totp-generator{--totp-accent:#4ade80;--totp-accent-strong:#86efac;--totp-soft:#13271e;--totp-accent-line:#284a36;--totp-warning:#fbbf24;--totp-warning-soft:#342916;--totp-error:#fca5a5}
html[data-theme="dark"] .totp-copy[data-copied="true"]{color:#101828}
/* The shared desktop shell uses 90% zoom; keep controls at least 44px on screen. */
@media(min-width:981px){.totp-reveal{width:50px;height:50px}.totp-input{height:56px;padding-right:58px}.totp-generate{min-height:56px}.totp-button,.totp-clear{min-height:50px}}
@media(max-width:1080px){.totp-layout{grid-template-columns:minmax(0,1fr) 280px;gap:18px}.totp-workspace{padding:22px}.totp-howto,.totp-help{padding:20px}.totp-section-heading h2{font-size:16px}.totp-input-row{grid-template-columns:1fr}}
@media(max-width:800px){.totp-generator{padding:16px 0 40px}.totp-shell{width:min(660px,calc(100% - 28px))}.totp-badge{display:none}.totp-hero{margin:8px 0 20px}.totp-hero h1{margin:0 0 9px;font-size:30px}.totp-hero p{font-size:13px}.totp-layout{grid-template-columns:1fr;gap:18px}.totp-main{gap:18px}.totp-sidebar{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:14px}.totp-howto h2{font-size:18px}.totp-input-row{grid-template-columns:minmax(0,1fr) auto}.totp-input{font-size:16px}.totp-faq{scroll-margin-top:82px}.totp-code{font-size:54px}}
@media(max-width:480px){.totp-shell{width:calc(100% - 22px)}.totp-back{font-size:11px;gap:6px}.totp-hero h1{font-size:27px}.totp-hero p{font-size:12px}.totp-workspace{padding:18px;border-radius:17px}.totp-section-heading{margin-bottom:16px;gap:8px}.totp-section-heading>div{gap:8px}.totp-section-heading h2{font-size:15px}.totp-step-number{width:26px;height:26px;flex-basis:26px;border-radius:8px;font-size:10px}.totp-clear{font-size:11px;gap:5px}.totp-input-row{grid-template-columns:1fr}.totp-input-help{font-size:11px}.totp-result{margin-top:22px;padding-top:22px}.totp-status{font-size:9px;padding:5px 6px}.totp-result-heading{gap:6px}.totp-code-surface{padding:22px 18px;border-radius:13px}.totp-code{font-size:48px;margin-top:12px;margin-bottom:16px}.totp-timer-copy{font-size:11px}.totp-result-note,.totp-empty-message{font-size:11px}.totp-sidebar{grid-template-columns:1fr}.totp-howto,.totp-help,.totp-faq{padding:18px;border-radius:17px}.totp-steps{gap:16px;margin:20px 0}.totp-howto h2{font-size:20px}.totp-faq summary{font-size:13px;min-height:58px}.totp-faq h2{font-size:20px}.totp-help-icon{float:left;margin:0 12px 0 0}.totp-help .totp-button{width:auto;padding:0 12px}.totp-help p{margin-bottom:14px}}
@media(max-width:360px){.totp-workspace{padding:16px}.totp-section-heading h2{font-size:14px}.totp-clear{font-size:10px}.totp-code{font-size:42px}.totp-hero h1{font-size:25px}.totp-result-heading h2{font-size:14px}}
@media(prefers-reduced-motion:reduce){.totp-generator *{transition:none!important;scroll-behavior:auto!important}}