/* Lucian UX/UI Prompt #064 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#064 */
.u064{position:relative;width:340px;height:470px;border-radius:30px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line),0 30px 60px -36px var(--ux-shadow-strong);overflow:hidden}
.u064-art{position:absolute;left:50%;top:40px;width:180px;height:150px;margin-left:-90px;transition:transform .7s cubic-bezier(.5,-.3,.6,1),opacity .5s}
.u064.fly .u064-art{transform:translate(170px,-160px) rotate(18deg) scale(.4);opacity:0}
.u064.sent .u064-art{transform:none;opacity:1;transition:transform .7s var(--ux-spring),opacity .4s}
.u064-env{position:absolute;left:10px;right:10px;bottom:0;height:104px;perspective:400px}
.u064-clip{position:absolute;left:0;right:0;top:-90px;bottom:0;overflow:hidden;border-radius:0 0 12px 12px}
.u064-back{position:absolute;left:0;right:0;bottom:0;height:104px;border-radius:12px;background:var(--env-back)}
.u064-letter{position:absolute;left:16px;right:16px;bottom:30px;height:118px;border-radius:8px;background:var(--env-letter);box-shadow:0 4px 14px var(--env-shadow);padding:14px;transition:transform .6s var(--ux-ease)}
.u064-letter i{display:block;height:7px;margin-bottom:8px;border-radius:4px;background:var(--env-line)}
.u064-letter i:first-child{width:46%;background:var(--env-accent)}
.u064-letter i:nth-child(3){width:70%}
.u064-front{position:absolute;inset:0;border-radius:12px;background:linear-gradient(160deg,var(--env-front-top),var(--env-front-bottom));clip-path:polygon(0 0,50% 58%,100% 0,100% 100%,0 100%)}
.u064-flap{position:absolute;left:0;right:0;top:0;height:64px;transform-origin:50% 0;transform:rotateX(180deg);transition:transform .5s var(--ux-ease)}
.u064-flap::before{content:"";position:absolute;inset:0;background:var(--env-flap);clip-path:polygon(0 0,100% 0,50% 100%);border-radius:12px 12px 0 0}
.u064.sealed .u064-letter{transform:translateY(70px)}
.u064.sealed .u064-flap{transform:none;transition-delay:.45s}
.u064-badge{position:absolute;right:-6px;top:-10px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--ux-mint);color:var(--ux-accent-ink);box-shadow:0 0 0 4px var(--ux-surface);transform:scale(0);transition:transform .5s var(--ux-spring) .3s}
.u064-badge svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.u064.sent .u064-badge{transform:none}
.u064-pane{position:absolute;left:0;right:0;bottom:0;top:208px;padding:0 26px 24px;display:flex;flex-direction:column;text-align:center;transition:transform .55s var(--ux-ease),opacity .35s}
.u064-pane :is(h1,h2){margin:0;font-size:22px;font-weight:850;letter-spacing:-.045em}
.u064-pane p{margin:6px 0 18px;font-size:13.5px;line-height:1.55;color:var(--ux-ink-3)}
.u064-pane p b{color:var(--ux-ink)}
.u064-ask{}
.u064-done{transform:translateY(30px);opacity:0;pointer-events:none}
.u064.sent .u064-ask{transform:translateY(-20px);opacity:0;pointer-events:none}
.u064.sent .u064-done{transform:none;opacity:1;pointer-events:auto;transition-delay:.15s}
.u064-box{display:flex;align-items:center;height:52px;padding:0 16px;border-radius:15px;background:var(--ux-surface-2);box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .25s,background-color .25s}
.u064-box:focus-within{background:var(--ux-surface);box-shadow:inset 0 0 0 1.5px var(--ux-accent),0 0 0 4px var(--ux-accent-soft)}
.u064-box.bad{box-shadow:inset 0 0 0 1.5px var(--ux-danger)}
.u064-box input{flex:1;min-width:0;height:100%;border:0;padding:0;background:none;font-size:15px;font-weight:600;color:var(--ux-ink);outline:none;text-align:left}
.u064-box input:focus-visible{outline:none}
.u064-b{height:52px;margin-top:10px;border:0;border-radius:16px;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--ux-ink);color:var(--ux-page);font-size:15px;font-weight:760;transition:transform .3s var(--ux-spring),opacity .3s}
.u064-b:active{transform:scale(.97)}
.u064-b:focus-visible,.u064-link:focus-visible{outline:2px solid var(--ux-accent);outline-offset:3px}
.u064-b.ghost{background:var(--ux-surface-2);color:var(--ux-ink)}
.u064-b[aria-disabled="true"]{opacity:.55}
.u064-ring{width:20px;height:20px;transform:rotate(-90deg)}
.u064-ring circle{fill:none;stroke-width:2.5}
.u064-ring .t{stroke:var(--ux-line-2)}
.u064-ring .p{stroke:var(--ux-accent);stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--p,0) * 100);stroke-linecap:round}
.u064-link{align-self:center;margin-top:12px;border:0;padding:4px;background:none;font-size:13px;font-weight:700;color:var(--ux-ink-3);text-decoration:underline;text-underline-offset:3px}

.forgot-panel{height:auto!important;min-width:0;align-items:center!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
.forgot-panel .u064{max-width:100%;flex-shrink:0;font-family:inherit;--ux-surface:var(--page);--ux-surface-2:var(--button-surface);--ux-line:var(--border);--ux-line-2:var(--field-border);--ux-ink:var(--text);--ux-ink-3:var(--secondary);--ux-mint:var(--success);--ux-accent:var(--primary);--ux-accent-ink:#081b3e;--ux-accent-soft:var(--interaction-hover);--ux-page:#fff;--env-back:#9cc4ff;--env-letter:#f5f8fc;--env-line:#dce9fa;--env-accent:#2a69dc;--env-front-top:#4e94f3;--env-front-bottom:#2a69dc;--env-flap:#6ca8f8;--env-shadow:rgba(8,27,62,.2)}
.forgot-panel .u064-b{background:var(--primary);color:#fff;cursor:pointer;flex-shrink:0}
.forgot-panel .u064-b.ghost{background:var(--button-surface);color:var(--text)}
.forgot-panel .u064-b:disabled{opacity:.55;cursor:not-allowed}
.forgot-panel .u064-pane :is(h1,h2){line-height:1.25;color:var(--text)}
.forgot-panel .u064-box input{font-family:inherit;color:var(--text);line-height:normal}
.forgot-panel .u064-box input::placeholder{color:var(--secondary);opacity:1}
.forgot-panel .u064-link{color:var(--secondary);font-family:inherit;line-height:20px;min-height:28px;cursor:pointer}
.forgot-panel .u064-status{margin:14px 0 0;min-height:42px;width:340px;max-width:100%;color:var(--secondary);font-size:13px;line-height:21px;text-align:center}
.forgot-panel .u064-status.error{color:var(--danger)}
.forgot-panel .forgot-login{font-size:13px;line-height:24px;color:var(--secondary);text-align:center}
@media(prefers-reduced-motion:reduce){.u064 *,.u064 *::before{animation:none!important;transition:none!important}.u064.fly .u064-art{transform:none}}