.pc { font-family: 'Roboto', system-ui, sans-serif; color: #383B41; }
.pc svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.pc-btn { display: inline-flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 8px; font-size: 12px; font-weight: 500; line-height: 20px; white-space: nowrap; filter: drop-shadow(0 1px .5px rgb(0 0 0 / .05)); }
.pc-btn.normal { background: #fff; box-shadow: inset 0 0 0 1px #D9DCEB; color: #383B41; }
.pc-btn.accent { background: #1D4ED8; color: #fff; }
.pc-btn.normal.hover { background: #F0F3F5; }
.pc-btn.accent.hover { background: #1A45C2; }
.pc-btn.disabled { opacity: .45; }
.pc-tabs { display: inline-flex; gap: 6px; padding: 6px; border-radius: 8px; background: #F5F5F5; }
.pc-tab { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 6px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; line-height: 20px; white-space: nowrap; background: #fff; color: #383B41; filter: drop-shadow(0 1px .5px rgb(0 0 0 / .05)); }
.pc-tab.selected { background: #383B41; color: #fff; }
.pc-tab.hover { background: #F0F3F5; }
.pc-step { position: relative; display: block; width: 210px; height: 74px; padding: 12px 34px 0 22px; background: #D9DCEB; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%); }
.pc-step::before { content: ""; position: absolute; inset: 1px 1px 1px 1px; background: #F5F5F5; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%); }
.pc-step.active::before { background: #fff; }
.pc-step > * { position: relative; }
.pc-step b { display: block; font-size: 15px; font-weight: 500; line-height: 20px; }
.pc-step small { display: block; font-size: 12px; font-weight: 500; line-height: 20px; }
.pc-step i { position: absolute; left: 22px; right: 44px; bottom: 9px; height: 2px; border-radius: 1px; }
.pc-tag { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; line-height: 20px; white-space: nowrap; }
.pc-sort { display: inline-flex; align-items: center; gap: 12px; height: 40px; padding: 8px 12px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px #D9DCEB; font-size: 12px; font-weight: 500; line-height: 20px; white-space: nowrap; filter: drop-shadow(0 1px .5px rgb(0 0 0 / .05)); }
.pc-sort.hover { background: #F3F3F3; box-shadow: inset 0 0 0 1px #D7D7D7; }
.pc-sort.active { background: #383B41; box-shadow: inset 0 0 0 1px #383B41; color: #fff; }
.pc-sort em { display: inline-flex; align-items: center; gap: 6px; padding: 0 2px; font-style: normal; font-weight: 700; color: rgb(56 59 65 / .6); }
.pc-sort.active em { color: #fff; }