/* Lucian UX/UI Prompt #026 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#026 */

.u026{position:relative;width:350px;height:250px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.u026-ic{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;color:#fff;background:var(--primary);box-shadow:var(--shadow-panel);transition:background .5s var(--ux-ease)}
.u026-ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.u026.is-ok .u026-ic{background:var(--success)}
.u026-t{margin:16px 0 0;font-size:18px;font-weight:760;letter-spacing:-.03em}
.u026-s{margin:6px 0 20px;font-size:13.5px;color:var(--ux-ink-3)}
.u026-s b{color:var(--ux-ink-2);font-weight:650}
.u026-row{position:relative;display:flex;gap:8px}
.u026-row i.sep{width:10px;align-self:center;height:2px;border-radius:2px;background:var(--ux-line-2)}
.u026-c{position:relative;width:46px;height:58px;border-radius:14px;background:var(--ux-surface);box-shadow:inset 0 0 0 1.5px var(--ux-line-2);display:grid;place-items:center;overflow:hidden;
  font-size:26px;font-weight:760;font-variant-numeric:tabular-nums;transition:box-shadow .25s var(--ux-ease),background-color .4s var(--ux-ease),color .4s,transform .45s var(--ux-spring)}
.u026-c span{display:block;animation:u026-in .4s var(--ux-spring)}
@keyframes u026-in{from{transform:translateY(70%);opacity:0}}
.u026-c.cur{box-shadow:inset 0 0 0 2px var(--ux-accent),0 0 0 4px var(--ux-accent-soft)}
.u026-c.cur::after{content:"";position:absolute;left:50%;top:16px;bottom:16px;width:2px;margin-left:-1px;border-radius:1px;background:var(--ux-accent);animation:u026-blink 1s steps(1) infinite}
.u026-c.cur.has::after{display:none}
@keyframes u026-blink{50%{opacity:0}}
.u026.is-check .u026-c{animation:u026-wave .5s var(--ux-ease);animation-delay:calc(var(--i) * 60ms)}
@keyframes u026-wave{40%{transform:translateY(-8px)}}
.u026.is-ok .u026-c{background:color-mix(in srgb,var(--ux-mint) 14%,var(--ux-surface));box-shadow:inset 0 0 0 2px var(--ux-mint);color:var(--ux-mint);transition-delay:calc(var(--i) * 50ms)}
.u026.is-bad .u026-row{animation:u026-shake .45s var(--ux-ease)}
.u026.is-bad .u026-c{box-shadow:inset 0 0 0 2px var(--ux-danger);color:var(--ux-danger)}
@keyframes u026-shake{20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
.u026-real{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;font-size:16px;cursor:text;caret-color:transparent;color:transparent;background:transparent}
.u026-msg{height:20px;margin:16px 0 0;font-size:13.5px;font-weight:650;color:var(--ux-ink-3);transition:color .3s var(--ux-ease)}
.u026.is-ok .u026-msg{color:var(--ux-mint)}
.u026.is-bad .u026-msg{color:var(--ux-danger)}
.u026-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.u026-real:focus-visible{outline:none}

.otp-panel{align-items:center!important;min-width:0;height:auto!important}.otp-panel .u026{--ux-ink-3:var(--secondary);--ux-ink-2:var(--text);--ux-accent-soft:var(--interaction-hover);--ux-line-2:var(--field-border);--ux-mint:var(--success);--ux-danger:var(--danger);max-width:100%;font-family:inherit;flex-shrink:0}.otp-panel .u026-row{width:100%;max-width:334px}.otp-panel .u026-c{flex:1;min-width:0;max-width:46px}.otp-panel .u026-row i.sep{flex-shrink:0}.otp-panel .u026-msg{height:auto;min-height:20px;text-align:center;line-height:1.5}.otp-panel .u026-s{line-height:1.5;text-align:center}.otp-panel .otp-submit{width:100%;max-width:350px;flex-shrink:0}.otp-panel .otp-help{max-width:350px;font-size:13px;line-height:1.6;color:var(--secondary)}.otp-panel .otp-resend{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-field);color:var(--primary);padding:10px 16px;line-height:20px;min-height:40px}.otp-panel .otp-resend:disabled{opacity:.55;cursor:not-allowed}.otp-panel>a{font-size:13px;line-height:1.6;color:var(--primary)}.otp-panel .u026-real:focus-visible{outline:none}.otp-panel .u026:focus-within .u026-row{border-radius:14px}.otp-panel .u026-real:disabled{cursor:not-allowed}@media(prefers-reduced-motion:reduce){.u026 *,.u026 *::after{animation:none!important;transition:none!important}}