.search{position:relative;display:block}
.search svg{position:absolute;left:14px;top:50%;width:16px;height:16px;transform:translateY(-50%);color:var(--muted)}
.search input{width:100%;height:44px;border-radius:12px;border:1px solid var(--line-2);background:var(--bg-2);color:var(--text);padding:0 14px 0 40px;font:500 14px var(--f-b)}
.search input:focus{outline:none;border-color:var(--p)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line-2);white-space:nowrap}
.chip svg{width:12px;height:12px}
.chip.g{color:var(--win);background:rgba(61,220,151,.1);border-color:rgba(61,220,151,.3)}
.chip.y{color:var(--amber);background:rgba(244,183,64,.1);border-color:rgba(244,183,64,.3)}
.chip.r{color:var(--lose);background:rgba(255,92,116,.1);border-color:rgba(255,92,116,.3)}
.chip.v{color:var(--violet);background:rgba(157,123,255,.1);border-color:rgba(157,123,255,.3)}
.chip.b{color:var(--sky);background:var(--p-soft);border-color:rgba(47,123,255,.35)}
.seg{display:inline-flex;gap:2px;padding:4px;border-radius:12px;background:var(--bg-2);border:1px solid var(--line);max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg button{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:8px 14px;border-radius:9px;color:var(--muted);font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap;transition:color .2s,background .25s}
.seg button:hover{color:var(--text)}
.seg button.on{color:#fff;background:var(--p)}
.bar{height:6px;border-radius:3px;background:rgba(255,255,255,.07);overflow:hidden}
.bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--p),var(--sky));transform-origin:left;animation:grow 1.1s var(--ease) both}
@keyframes grow{from{transform:scaleX(0)}}
.bar.g i{background:linear-gradient(90deg,#24b878,var(--win))}
.bar.y i{background:linear-gradient(90deg,#e0962a,var(--amber))}
.inp{width:100%;min-width:0;height:44px;border-radius:11px;border:1px solid var(--line-2);background:var(--bg-2);color:var(--text);padding:0 13px;font:600 14px var(--f-b);transition:border-color .2s}
.inp:focus{outline:none;border-color:var(--p)}
textarea.inp{height:110px;padding:11px 13px;resize:none;line-height:1.5;font-weight:500}
select.inp{appearance:none;padding-right:36px;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.fl{display:grid;gap:6px}
.fl>span{font-size:12px;font-weight:700;color:var(--muted)}
.fl b{color:var(--text)}
.sbtn{height:38px;padding:0 14px;border-radius:10px;border:0;background:var(--p);color:#fff;font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:background .2s,transform .15s}
.sbtn:hover{background:var(--p-hi)}
.sbtn:active{transform:scale(.96)}
.sbtn.ghost{background:rgba(255,255,255,.05);border:1px solid var(--line-2)}
.sbtn.ghost:hover{background:rgba(255,255,255,.1)}
.sbtn.red{background:rgba(255,92,116,.14);color:var(--lose)}
.sbtn.red:hover{background:rgba(255,92,116,.24)}
.sbtn.green{background:rgba(61,220,151,.14);color:var(--win)}
.sbtn:disabled{opacity:.45;cursor:not-allowed}
.sbtn svg{width:15px;height:15px}