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

.u001{--g1:rgba(255,255,255,.66);--g2:rgba(255,255,255,.16);--g3:rgba(255,255,255,.4);--hi:rgba(255,255,255,.95);--rim:rgba(255,255,255,.65);--drop:rgba(70,48,160,.42);--blob:.55;
  position:relative;width:340px;height:240px;display:grid;place-items:center;isolation:isolate}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .u001{--g1:rgba(255,255,255,.2);--g2:rgba(255,255,255,.03);--g3:rgba(255,255,255,.1);--hi:rgba(255,255,255,.5);--rim:rgba(255,255,255,.16);--drop:rgba(0,0,0,.75);--blob:.5}}
:root[data-theme="dark"] .u001{--g1:rgba(255,255,255,.2);--g2:rgba(255,255,255,.03);--g3:rgba(255,255,255,.1);--hi:rgba(255,255,255,.5);--rim:rgba(255,255,255,.16);--drop:rgba(0,0,0,.75);--blob:.5}
.u001-blobs{position:absolute;inset:0;z-index:-1;pointer-events:none}
.u001-blobs i{position:absolute;border-radius:50%;filter:blur(30px);opacity:var(--blob);animation:u001-drift 12s ease-in-out infinite alternate}
.u001-blobs i:nth-child(1){left:30px;top:44px;width:150px;height:130px;background:#8B6CFF}
.u001-blobs i:nth-child(2){right:24px;bottom:34px;width:160px;height:118px;background:#33B6FF;animation-delay:-4s}
.u001-blobs i:nth-child(3){left:150px;top:36px;width:92px;height:92px;background:#3BE0B0;opacity:calc(var(--blob) * .7);animation-delay:-8s}
@keyframes u001-drift{from{transform:translate3d(-10px,-6px,0) scale(1)}to{transform:translate3d(12px,8px,0) scale(1.12)}}
.u001-mag{transition:translate .8s var(--ux-spring)}
.u001-float{animation:u001-float 6s ease-in-out infinite}
@keyframes u001-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.u001-btn{position:relative;display:block;width:252px;height:78px;padding:0;border:0;border-radius:999px;overflow:hidden;isolation:isolate;color:var(--ux-ink);
  background:linear-gradient(150deg,var(--g1),var(--g2) 55%,var(--g3));
  -webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);
  box-shadow:inset 0 1.5px 0 var(--hi),inset 0 -12px 20px -14px var(--hi),inset 0 0 0 1px var(--rim),0 26px 44px -22px var(--drop),0 3px 8px -4px var(--drop);
  transition:width .7s var(--ux-ease),transform .55s var(--ux-spring),box-shadow .6s var(--ux-ease)}
.u001-btn::before{content:"";position:absolute;left:9%;right:9%;top:7%;height:42%;border-radius:999px;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0))}
.u001-btn::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s var(--ux-ease);background:radial-gradient(130px 70px at var(--mx,50%) var(--my,0%),rgba(255,255,255,.4),transparent 70%)}
.u001-btn:hover::after{opacity:1}
.u001-btn:active{transform:scale(1.03,.92)}
.u001-btn:focus-visible{outline:2px solid var(--ux-accent);outline-offset:6px}
.u001-sheen{position:absolute;top:-40%;bottom:-40%;left:0;width:38%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45) 50%,transparent);transform:translateX(-150%) skewX(-12deg);transition:transform 1.1s var(--ux-ease)}
.u001-btn:hover .u001-sheen{transform:translateX(300%) skewX(-12deg)}
.u001-txt,.u001-done{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;font-size:18px;font-weight:680;letter-spacing:-.025em;white-space:nowrap;transition:opacity .35s var(--ux-ease),transform .55s var(--ux-ease),filter .4s var(--ux-ease)}
.u001-done{opacity:0;transform:translateY(14px);filter:blur(4px)}
.u001-done b{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--ux-mint);color:#fff;box-shadow:0 0 0 6px color-mix(in srgb,var(--ux-mint) 22%,transparent)}
.u001-done svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.u001-done path{stroke-dasharray:18;stroke-dashoffset:18;transition:stroke-dashoffset .5s var(--ux-ease) .3s}
.u001-spin{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;opacity:0;transform:scale(.5);transition:opacity .35s var(--ux-ease),transform .6s var(--ux-spring)}
.u001-spin svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;animation:u001-rot 1s linear infinite}
.u001-spin circle{stroke-dasharray:1 56;animation:u001-arc 1.4s ease-in-out infinite}
@keyframes u001-rot{to{transform:rotate(360deg)}}
@keyframes u001-arc{0%,100%{stroke-dasharray:1 56}50%{stroke-dasharray:38 19}}
.u001[data-state="load"] .u001-btn{width:78px;cursor:progress}
.u001[data-state="load"] .u001-txt{opacity:0;transform:translateY(-14px);filter:blur(5px)}
.u001[data-state="load"] .u001-spin{opacity:1;transform:none}
.u001[data-state="ok"] .u001-btn{transition-timing-function:var(--ux-spring);box-shadow:inset 0 1.5px 0 var(--hi),inset 0 0 0 1px var(--rim),0 26px 44px -22px var(--drop),0 0 52px -8px color-mix(in srgb,var(--ux-mint) 70%,transparent)}
.u001[data-state="ok"] .u001-txt{opacity:0;transform:translateY(-14px);filter:blur(5px)}
.u001[data-state="ok"] .u001-done{opacity:1;transform:none;filter:none}
.u001[data-state="ok"] .u001-done path{stroke-dashoffset:0}
.u001-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

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

.u019{position:relative;width:340px}
.u019-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:16px}
.u019-head b{display:block;font-size:19px;font-weight:760;letter-spacing:-.03em}
.u019-head small{display:block;margin-top:4px;font-size:13px;color:var(--ux-ink-3)}
.u019-cnt{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--ux-ink-2);font-variant-numeric:tabular-nums;transition:color .3s var(--ux-ease)}
.u019-dots{display:flex;gap:3px}
.u019-dots i{width:7px;height:7px;border-radius:50%;background:var(--ux-line-2);transition:background-color .3s var(--ux-ease),transform .4s var(--ux-spring)}
.u019-dots i.on{background:var(--ux-accent);transform:scale(1.15)}
.u019.is-warn .u019-cnt{color:var(--ux-danger);animation:u019-flash .5s var(--ux-ease)}
@keyframes u019-flash{30%{transform:scale(1.08)}}
.u019-list{display:flex;flex-wrap:wrap;align-content:center;gap:8px;height:200px}
.u019-chip{display:inline-flex;align-items:center;height:42px;padding:0 16px;border:0;border-radius:999px;background:var(--ux-surface);color:var(--ux-ink-2);font-size:14.5px;font-weight:640;
  box-shadow:inset 0 0 0 1px var(--ux-line-2);transition:background-color .35s var(--ux-ease),color .3s var(--ux-ease),box-shadow .3s var(--ux-ease),padding .45s var(--ux-spring),transform .4s var(--ux-spring)}
.u019-chip:hover{color:var(--ux-ink);box-shadow:inset 0 0 0 1px var(--ux-ink-3)}
.u019-chip:active{transform:scale(.94)}
.u019-chip:focus-visible{outline:2px solid var(--ux-accent);outline-offset:3px}
.u019-chip i{display:grid;place-items:center;width:0;height:18px;margin-right:0;overflow:hidden;opacity:0;transition:width .45s var(--ux-spring),margin .45s var(--ux-spring),opacity .25s var(--ux-ease)}
.u019-chip svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.u019-chip[aria-pressed="true"]{background:var(--ux-ink);color:var(--ux-page);box-shadow:0 10px 18px -12px var(--ux-shadow-strong);padding-left:12px}
.u019-chip[aria-pressed="true"] i{width:18px;margin-right:6px;opacity:1}
.u019-chip.is-no{animation:u019-no .4s var(--ux-ease)}
@keyframes u019-no{20%{transform:translateX(-5px)}45%{transform:translateX(4px)}70%{transform:translateX(-2px)}}
.u019-msg{height:20px;margin:14px 0 0;font-size:13px;color:var(--ux-ink-3);transition:color .3s var(--ux-ease)}
.u019.is-warn .u019-msg{color:var(--ux-danger)}

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

.u031{position:relative;width:340px;height:436px;padding:22px 20px;border-radius:28px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line),0 30px 60px -36px var(--ux-shadow-strong)}
.u031-h{margin:0 2px 18px;font-size:19px;font-weight:760;letter-spacing:-.03em}
.u031-f{position:relative;margin-bottom:14px}
.u031-lab{display:block;margin:0 2px 7px;font-size:12.5px;font-weight:700;color:var(--ux-ink-3)}
.u031-btn{display:flex;align-items:center;gap:12px;width:100%;height:56px;padding:0 14px;border:0;border-radius:16px;background:var(--ux-surface-2);color:var(--ux-ink);text-align:left;
  box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .25s var(--ux-ease),background-color .25s}
.u031-btn:hover{box-shadow:inset 0 0 0 1.5px var(--ux-line-2)}
.u031-btn:focus-visible,.u031.is-open .u031-btn[aria-expanded="true"]{outline:0;background:var(--ux-surface);box-shadow:inset 0 0 0 2px var(--ux-accent),0 0 0 5px var(--ux-accent-soft)}
.u031-flag{width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;font-size:10.5px;font-weight:800;letter-spacing:.02em;color:#fff;background:var(--c)}
.u031-v{flex:1;min-width:0}
.u031-v b{display:block;font-size:15.5px;font-weight:680}
.u031-v small{display:block;font-size:12px;color:var(--ux-ink-3)}
.u031-car{width:18px;height:18px;fill:none;stroke:var(--ux-ink-3);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s var(--ux-spring)}
.u031-btn[aria-expanded="true"] .u031-car{transform:rotate(180deg)}
.u031-list{position:absolute;z-index:5;left:0;right:0;top:calc(100% + 8px);margin:0;padding:6px;list-style:none;border-radius:18px;background:var(--ux-surface);
  box-shadow:0 0 0 1px var(--ux-line-2),0 28px 56px -24px var(--ux-shadow-strong);transform-origin:50% 0;outline:none;
  opacity:0;transform:translateY(-6px) scaleY(.92);visibility:hidden;transition:opacity .2s var(--ux-ease),transform .4s var(--ux-spring),visibility 0s .4s}
.u031-list.is-open{opacity:1;transform:none;visibility:visible;transition:opacity .2s var(--ux-ease),transform .45s var(--ux-spring)}
.u031-hl{position:absolute;left:6px;right:6px;top:6px;height:46px;border-radius:12px;background:var(--ux-surface-2);transform:translateY(calc(var(--i,0) * 46px));transition:transform .35s var(--ux-spring);pointer-events:none}
.u031-o{position:relative;display:flex;align-items:center;gap:12px;height:46px;padding:0 10px;border-radius:12px;cursor:pointer;font-size:14.5px;font-weight:620}
.u031-o .u031-flag{width:26px;height:26px;border-radius:8px;font-size:9.5px}
.u031-o small{margin-left:4px;font-size:12px;font-weight:500;color:var(--ux-ink-3)}
.u031-ck{margin-left:auto;width:18px;height:18px;fill:none;stroke:var(--ux-accent);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.4);transition:opacity .2s,transform .4s var(--ux-spring)}
.u031-o[aria-selected="true"] .u031-ck{opacity:1;transform:none}
.u031-save{position:absolute;left:20px;right:20px;bottom:20px;height:50px;border:0;border-radius:15px;background:var(--ux-ink);color:var(--ux-page);font-size:15px;font-weight:700;transition:transform .35s var(--ux-spring)}
.u031-save:active{transform:scale(.97)}
.u031-save:focus-visible{outline:2px solid var(--ux-accent);outline-offset:2px}

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

.u039{position:relative;width:340px;height:380px}
.u039-tabs{position:relative;display:flex;padding:5px;border-radius:999px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line)}
.u039-pill{position:absolute;left:0;top:5px;bottom:5px;width:var(--w,80px);border-radius:999px;background:var(--ux-ink);transform:translateX(var(--x,5px));box-shadow:0 8px 16px -10px var(--ux-shadow-strong);transition:transform .5s var(--ux-spring),width .5s var(--ux-spring)}
.u039-tab{position:relative;flex:1;height:42px;border:0;padding:0;border-radius:999px;background:none;font-size:14px;font-weight:680;color:var(--ux-ink-2);white-space:nowrap;transition:color .35s var(--ux-ease)}
.u039-tab[aria-selected="true"]{color:var(--ux-page)}
.u039-tab:focus-visible{outline:2px solid var(--ux-accent);outline-offset:2px}
.u039-panel{position:relative;height:312px;margin-top:14px;overflow:hidden;border-radius:22px}
.u039-list{position:absolute;inset:0;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.u039-row{display:flex;align-items:center;gap:12px;padding:10px;border-radius:18px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line);transition:transform .55s var(--ux-spring),opacity .35s var(--ux-ease)}
.u039-art{position:relative;width:52px;height:52px;flex:none;border-radius:14px;background:var(--g);overflow:hidden}
.u039-art::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.45),transparent 55%)}
.u039-row b{display:block;font-size:15px;font-weight:700;letter-spacing:-.02em}
.u039-row small{display:block;margin-top:3px;font-size:12.5px;color:var(--ux-ink-3)}
.u039-row em{margin-left:auto;font-style:normal;font-size:12.5px;font-weight:650;color:var(--ux-ink-3);font-variant-numeric:tabular-nums}
.u039-badge{margin-left:6px;padding:2px 6px;border-radius:6px;font-size:10.5px;font-weight:800;background:var(--ux-accent-soft);color:var(--ux-accent);vertical-align:2px}

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

.u070{position:relative;width:350px;height:370px}
.u070-btns{display:flex;flex-wrap:wrap;gap:6px}
.u070-btns button{height:38px;padding:0 14px;border:0;border-radius:999px;display:inline-flex;align-items:center;gap:6px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line);font-size:13px;font-weight:720;color:var(--ux-ink);transition:transform .3s var(--ux-spring),box-shadow .3s}
.u070-btns button:hover{box-shadow:0 0 0 1px var(--ux-line-2),0 8px 16px -10px var(--ux-shadow-strong)}
.u070-btns button:active{transform:scale(.94)}
.u070-btns button:focus-visible{outline:2px solid var(--ux-accent);outline-offset:2px}
.u070-btns i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.u070-zone{position:absolute;left:0;right:0;bottom:0;height:300px;outline:none}
.u070-t{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px;min-height:68px;padding:12px 12px 12px 14px;border-radius:20px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line),0 16px 30px -18px var(--ux-shadow-strong);transform-origin:50% 100%;transform:translate(var(--dx,0px),var(--y,0px)) scale(var(--s,1));opacity:var(--o,1);transition:transform .5s var(--ux-spring),opacity .35s;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.u070-t.drag{transition:none}
.u070-t.enter{transform:translateY(90px) scale(.9);opacity:0}
.u070-t.leave{transform:translate(var(--dx,0px),var(--y,0px)) scale(var(--s,1));opacity:0;pointer-events:none}
.u070-t.leave.side{transform:translate(calc(var(--dir,1) * 420px),var(--y,0px)) rotate(calc(var(--dir,1) * 8deg))}
.u070-t>*{transition:opacity .25s}
.u070-t.back>*{opacity:0}
.u070-ic{width:36px;height:36px;flex:none;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 15%,transparent);color:var(--c)}
.u070-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.u070-ic i{width:18px;height:18px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:u070-spin .7s linear infinite}
@keyframes u070-spin{to{transform:rotate(360deg)}}
.u070-tx{flex:1;min-width:0}
.u070-tx b{display:block;font-size:14px;font-weight:780;letter-spacing:-.02em}
.u070-tx small{display:block;margin-top:2px;font-size:12.5px;font-weight:600;color:var(--ux-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u070-act{height:32px;padding:0 11px;border:0;border-radius:10px;background:var(--ux-surface-2);font-size:12.5px;font-weight:750;color:var(--ux-ink)}
.u070-x{width:30px;height:30px;flex:none;border:0;padding:0;border-radius:50%;display:grid;place-items:center;background:none;color:var(--ux-ink-3)}
.u070-x:hover{background:var(--ux-surface-2);color:var(--ux-ink)}
.u070-x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.u070-act:focus-visible,.u070-x:focus-visible{outline:2px solid var(--ux-accent);outline-offset:1px}
.u070-bar{position:absolute;left:16px;right:16px;bottom:0;height:2px;border-radius:2px;background:var(--c);opacity:.5;transform-origin:0 50%;transform:scaleX(var(--left,1))}
.u070-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.u070-empty{position:absolute;left:0;right:0;bottom:24px;text-align:center;font-size:13px;font-weight:650;color:var(--ux-ink-3);transition:opacity .3s}