.tool-main{flex:1;display:flex;flex-direction:column;width:100%;max-width:100%;padding:0;overflow:hidden}.tool-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;padding:1.5rem 2rem;border-bottom:1px solid var(--color-border);background-color:var(--color-surface-raised);flex-shrink:0}.tool-header__title{display:flex;flex-direction:column;gap:.25rem}.tool-title{font-size:1.3rem;font-weight:700;color:var(--color-text-title)}.tool-subtitle{font-size:.85rem;color:var(--color-text-muted)}.totp-workspace{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);min-height:0;overflow:hidden}.totp-col{display:flex;flex-direction:column;overflow-y:auto;min-width:0}.totp-col--input{border-right:1px solid var(--color-border);background-color:var(--color-surface-deep);padding:1.75rem;gap:1.5rem}.totp-col--output{background-color:var(--color-bg)}.input-section{display:flex;flex-direction:column;gap:.5rem}.input-label{font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--color-text-muted)}.secret-input-wrap{display:flex;align-items:stretch;border:1px solid var(--color-border);border-radius:6px;overflow:hidden;background-color:var(--color-surface-input);transition:border-color .15s ease}.secret-input-wrap:focus-within{border-color:var(--color-accent-border);box-shadow:0 0 0 1px var(--color-accent-bg)}.secret-input{flex:1;background:none;border:none;outline:none;padding:.6rem .9rem;color:var(--color-text-primary);font-family:Menlo,Monaco,Consolas,Courier New,monospace;font-size:.88rem;letter-spacing:.05em;caret-color:var(--color-accent);min-width:0}.secret-input::placeholder{color:var(--color-text-dimmer);letter-spacing:0}.secret-toggle{display:flex;align-items:center;justify-content:center;width:38px;flex-shrink:0;background:none;border:none;border-left:1px solid var(--color-border-faint);color:var(--color-sep);font-size:.9rem;cursor:pointer;transition:color .15s ease,background-color .15s ease}.secret-toggle:hover{color:var(--color-accent);background-color:var(--color-surface-raised)}.secret-toggle--active{color:var(--color-accent)}.input-hint{font-size:.75rem;color:var(--color-text-ghost);line-height:1.4;min-height:1.2em}.input-hint--ok{color:var(--color-success)}.input-hint--error{color:var(--color-danger)}.toggle-group{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}.toggle-btn{padding:.3rem .85rem;border-radius:5px;font-size:.8rem;font-weight:500;border:1px solid var(--color-border);background:none;color:var(--color-text-faint);cursor:pointer;transition:color .12s ease,background-color .12s ease,border-color .12s ease;white-space:nowrap}.toggle-btn:hover{color:var(--color-text-secondary);border-color:var(--color-sep)}.toggle-btn--active{background-color:var(--color-accent-bg);color:var(--color-accent);border-color:var(--color-accent-border)}.toggle-btn--active:hover{background-color:var(--color-accent-hover-bg);border-color:var(--color-accent);color:var(--color-accent-hover-text)}.clear-btn{align-self:flex-start;padding:.35rem .85rem;border-radius:5px;font-size:.8rem;font-weight:500;border:1px solid var(--color-border);background:none;color:var(--color-text-faint);cursor:pointer;transition:color .12s ease,border-color .12s ease}.clear-btn:hover{color:var(--color-text-primary);border-color:var(--color-text-ghost)}.output-inner{flex:1;display:flex;flex-direction:column;padding:1.75rem;gap:1.25rem}.output-placeholder{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.85rem;text-align:center;padding:3rem 1.5rem}.output-placeholder__icon{font-size:3rem;line-height:1;opacity:.2}.output-placeholder__text{font-size:.9rem;color:var(--color-sep)}.output-error{display:flex;align-items:flex-start;gap:.65rem;padding:1rem 1.25rem;background-color:var(--color-warning-bg);border:1px solid var(--color-warning-border);border-radius:6px;color:var(--color-warning);font-size:.85rem;line-height:1.5;margin:1.75rem}.output-error__icon{flex-shrink:0;font-size:1rem}.codes-grid{display:flex;align-items:center;gap:2rem;flex-wrap:wrap}.countdown-wrap{position:relative;width:80px;height:80px;flex-shrink:0}.countdown-ring{width:80px;height:80px}.countdown-ring__track{fill:none;stroke:var(--color-border-faint);stroke-width:5}.countdown-ring__fill{fill:none;stroke:var(--color-accent);stroke-width:5;stroke-linecap:round;transition:stroke .3s ease}.countdown-ring__fill--warning{stroke:var(--color-danger)}.countdown-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;gap:1px}.countdown-seconds{font-size:1.45rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--color-text-primary);line-height:1}.countdown-label{font-size:.6rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-ghost)}.code-current-wrap{display:flex;flex-direction:column;gap:.45rem;min-width:0}.code-current-label{font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-ghost)}.code-current{font-family:Menlo,Monaco,Consolas,Courier New,monospace;font-size:2.6rem;font-weight:700;letter-spacing:.12em;font-variant-numeric:tabular-nums;color:var(--color-text-title);line-height:1;white-space:nowrap}.code-meta{font-size:.72rem;color:var(--color-sep);font-family:Menlo,Monaco,Consolas,Courier New,monospace}.copy-btn{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .9rem;border-radius:5px;font-size:.8rem;font-weight:500;cursor:pointer;border:1px solid var(--color-accent-border);background-color:var(--color-accent-bg);color:var(--color-accent);transition:background-color .12s ease,border-color .12s ease,color .12s ease;align-self:flex-start;white-space:nowrap}.copy-btn:hover{background-color:var(--color-accent-hover-bg);border-color:var(--color-accent);color:var(--color-accent-hover-text)}.copy-btn--copied{background-color:var(--color-success-bg);border-color:var(--color-success-border);color:var(--color-success)}.copy-btn--small{padding:.2rem .6rem;font-size:.72rem;background:none;background-color:transparent;border-color:var(--color-border);color:var(--color-text-faint)}.copy-btn--small:hover{background-color:var(--color-border-faint);border-color:var(--color-sep);color:var(--color-text-secondary)}.progress-bar-wrap{height:3px;background-color:var(--color-border-faint);border-radius:2px;overflow:hidden;flex-shrink:0}.progress-bar{height:100%;width:0%;background-color:var(--color-accent);border-radius:2px;transition:background-color .3s ease}.progress-bar--warning{background-color:var(--color-danger)}.adjacent-codes{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.adjacent-code{display:flex;flex-direction:column;gap:.4rem;padding:.85rem 1rem;background-color:var(--color-surface-raised);border:1px solid var(--color-border-subtle);border-radius:7px}.adjacent-code--prev{border-left:3px solid var(--color-border)}.adjacent-code--next{border-left:3px solid var(--color-accent-bg)}.adjacent-code__label{font-size:.68rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--color-sep)}.adjacent-code__value{font-family:Menlo,Monaco,Consolas,Courier New,monospace;font-size:1.4rem;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.1em;color:var(--color-text-muted);line-height:1}.info-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.75rem;padding:.85rem 1rem;background-color:var(--color-surface-deep);border:1px solid var(--color-border-faint);border-radius:7px;margin-top:auto}.info-item{display:flex;flex-direction:column;gap:.2rem}.info-label{font-size:.68rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--color-sep)}.info-value{font-family:Menlo,Monaco,Consolas,Courier New,monospace;font-size:.8rem;color:var(--color-text-faint);font-variant-numeric:tabular-nums}@media(max-width:820px){.totp-workspace{grid-template-columns:1fr;overflow-y:auto}.totp-col--input{border-right:none;border-bottom:1px solid var(--color-border);padding:1.25rem}.output-inner{padding:1.25rem}.code-current{font-size:2rem}.adjacent-codes{grid-template-columns:1fr 1fr}}@media(max-width:480px){.codes-grid{flex-direction:column;align-items:flex-start;gap:1.25rem}.adjacent-codes{grid-template-columns:1fr}}