.sotp-art{position:relative;width:240px;height:160px;margin:0 auto 16px;max-width:100%}.sotp-art>img:first-child{display:block;width:240px;height:160px;max-width:100%}.sotp-art>.sotp-logo{position:absolute;width:56px;height:56px;left:92px;top:32px;object-fit:contain}
.sotp-heading{font:700 24px/1.25 system-ui,sans-serif;text-align:center;color:var(--ink,#14213d);margin:8px 0 12px}.sotp-lead{font:400 14px/1.5 system-ui,sans-serif;color:var(--ink-soft,#667694);text-align:center;margin:0 0 24px}
.sotp-label{display:block;font:600 13px/1.4 system-ui,sans-serif;color:var(--ink-soft,#667694);margin-bottom:8px}.sotp-control{position:relative;width:100%;max-width:360px;margin:0 auto}.sotp-cells{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;pointer-events:none}.sotp-cell{box-sizing:border-box;aspect-ratio:1;display:flex;align-items:center;justify-content:center;border:1px solid var(--line,#dce4f4);border-radius:10px;background:var(--bg,#fff);color:var(--ink,#14213d);font:600 24px/1 ui-monospace,monospace}.sotp-cell[data-active=true]{position:relative;border:2px solid #5984ff;box-shadow:0 0 0 2px #5984ff14;animation:sotp-glow 1.8s ease-in-out infinite}.sotp-cell[data-active=true]:empty::after{content:"";width:2px;height:22px;border-radius:1px;background:#5984ff;animation:sotp-caret 1.8s ease-in-out infinite}
@keyframes sotp-glow{0%,100%{box-shadow:0 0 0 2px #5984ff10}50%{box-shadow:0 0 0 3px #5984ff30}}@keyframes sotp-caret{0%,100%{opacity:.3}50%{opacity:1}}
.sotp-control:has(input:disabled) .sotp-cell,.sotp-control:has(input:disabled) .sotp-cell::after{animation:none}.sotp-control:has(input:disabled) .sotp-cell::after{display:none}
@media(prefers-reduced-motion:reduce){.sotp-cell[data-active=true],.sotp-cell[data-active=true]:empty::after{animation:none}}
.sotp-control>input.sotp-input{position:absolute;inset:0;width:100%;height:100%;min-width:0;margin:0;padding:0;border:0!important;background:transparent!important;color:transparent!important;caret-color:transparent;box-shadow:none!important;outline:none!important;font-size:24px;letter-spacing:0;border-radius:10px}.sotp-input::selection{background:transparent}.sotp-hint{font:400 12px/1.4 system-ui,sans-serif;color:var(--ink-soft,#667694);margin:10px 0}.sotp-switch{display:block;border:0;background:transparent;color:var(--accent,#0042ff);font:500 13px/1.4 system-ui,sans-serif;padding:10px 0;margin:2px 0 14px;cursor:pointer;text-decoration:none}.sotp-switch:focus-visible{outline:2px solid var(--accent,#0042ff);outline-offset:3px;border-radius:6px}.sotp-recovery .sotp-cells{display:none}.sotp-recovery>input.sotp-input{position:relative;height:52px;padding:0 14px;border:1px solid var(--line,#dce4f4)!important;background:var(--bg,#fff)!important;color:var(--ink,#14213d)!important;caret-color:auto;font:400 16px/1.5 ui-monospace,monospace;box-sizing:border-box}.sotp-recovery>input.sotp-input:focus{border-color:var(--accent,#0042ff)!important}.sotp-recovery>input.sotp-input::selection{background:Highlight;color:HighlightText}
.sotp-dialog{box-sizing:border-box;width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);border:1px solid var(--line,#dce4f4);border-radius:24px;background:var(--bg,#fff);color:var(--ink,#14213d);padding:28px;box-shadow:0 24px 80px #10204c26;overflow:auto}.sotp-dialog::backdrop{background:#14213d70;backdrop-filter:blur(5px)}.sotp-dialog button[type=submit]{display:block;width:100%;min-height:48px;border:0;border-radius:10px;background:#0042ff;color:white;font:600 15px system-ui;cursor:pointer}.sotp-dialog button:disabled{opacity:.55;cursor:default}.sotp-error{color:#b22b38;font:400 13px/1.5 system-ui}.sotp-dialog .sotp-cancel{display:block;margin:16px auto 0;padding:8px 16px;border:0;background:transparent;color:var(--ink-soft,#667694);font:500 14px system-ui;cursor:pointer}
@media(prefers-color-scheme:dark){.sotp-dialog{--bg:#14203a;--ink:#edf2ff;--ink-soft:#b1bfdc;--line:#3d4e70;--accent:#87a8ff}}