/* Lucian UX/UI Prompt #019 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#019 */
.u019{position:relative;width:100%;max-width:420px}
.u019-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:16px}
.u019-head b{display:block;font-size:16px;font-weight:760;letter-spacing:-.03em}
.u019-head small{display:block;margin-top:4px;font-size:11px;color:var(--ux-ink-3)}
.u019-cnt{display:flex;align-items:center;gap:8px;font-size:12px;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:7px;min-height:95px}
.u019-chip{display:inline-flex;align-items:center;height:38px;padding:0 14px;border:0;border-radius:999px;background:var(--ux-surface);color:var(--ux-ink-2);font-size:12.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:18px;margin:8px 0 0;font-size:11px;color:var(--ux-ink-3);transition:color .3s var(--ux-ease)}.u019.is-warn .u019-msg{color:var(--ux-danger)}