.comp-showcase-grid{grid-template-columns:repeat(2,1fr);gap:18px}.comp-showcase{display:flex;flex-direction:column;background:var(--xa-color-white);border:1px solid var(--xa-color-line);border-radius:var(--xa-radius-lg);overflow:hidden;transition:border-color .15s,box-shadow .15s,transform .15s}.comp-showcase:hover{border-color:var(--xa-color-navy);box-shadow:var(--xa-shadow-md)}.comp-preview{height:148px;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(0deg,#f5f5f799,#f5f5f799),repeating-linear-gradient(45deg,#fff 0 10px,#fafafb 10px 20px);border-bottom:1px solid var(--xa-color-line);overflow:hidden}.comp-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px}.comp-foot-txt{min-width:0}.comp-showcase .comp-name{font-weight:700;font-size:.95rem;color:var(--xa-color-navy);margin-bottom:3px}.comp-showcase .comp-desc{font-size:.74rem;color:var(--xa-color-muted);font-family:var(--xa-font-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.comp-more{flex-shrink:0;font-weight:700;font-size:.82rem;color:var(--xa-color-rose);border:1px solid var(--xa-color-line);border-radius:var(--xa-radius-md);padding:6px 12px;transition:.15s;white-space:nowrap}.comp-showcase:hover .comp-more,.comp-more:hover{background:var(--xa-color-rose);color:#fff;border-color:var(--xa-color-rose)}.pv-statcard{background:#fff;border:1px solid var(--xa-color-line);border-radius:var(--xa-radius-md);box-shadow:var(--xa-shadow-sm);padding:14px 18px;min-width:180px}.pv-sc-label{font-size:.78rem;color:var(--xa-color-muted)}.pv-sc-n{font-size:1.9rem;font-weight:700;color:var(--xa-color-navy);letter-spacing:-.02em;line-height:1.1}.pv-sc-delta{color:var(--xa-color-green);font-weight:700;font-size:.8rem}.pv-badges{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.pv-badge{display:inline-flex;align-items:center;gap:5px;font-size:.76rem;font-weight:700;padding:4px 10px;border-radius:999px;line-height:1.3}.pv-badge i{width:6px;height:6px;border-radius:50%;background:currentColor}.pv-badge.ok{background:var(--xa-color-green-soft);color:#15803d}.pv-badge.warn{background:var(--xa-color-amber-soft);color:#b45309}.pv-badge.feat{background:var(--xa-color-navy);color:#fff}.pv-avatars{display:flex}.pv-av{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;color:#fff;border:2px solid #fff;box-shadow:var(--xa-shadow-sm)}img.pv-av{object-fit:cover}.pv-av+.pv-av{margin-left:-12px}.av-rose{background:var(--xa-color-rose)}.av-navy{background:var(--xa-color-navy)}.av-slate{background:var(--xa-color-slate)}.pv-field{display:flex;flex-direction:column;gap:5px;width:100%;max-width:260px}.pv-label{font-size:.76rem;font-weight:700;color:var(--xa-color-navy)}.pv-input{font-size:.82rem;color:var(--xa-color-ink);background:#fff;border:1px solid #cdd2dd;border-radius:var(--xa-radius-md);padding:8px 11px;box-shadow:var(--xa-ring)}.pv-help{font-size:.72rem;color:var(--xa-color-muted)}.pv-table{width:100%;max-width:260px;border-collapse:collapse;background:#fff;border:1px solid var(--xa-color-line);border-radius:var(--xa-radius-md);overflow:hidden;font-size:.8rem}.pv-table th{background:var(--xa-color-canvas);text-align:left;font-size:.64rem;text-transform:uppercase;letter-spacing:.05em;color:var(--xa-color-muted);font-weight:700;padding:7px 12px}.pv-table td{padding:8px 12px;border-top:1px solid var(--xa-color-line);color:var(--xa-color-ink)}.pv-header{width:100%;max-width:280px;height:46px;background:#fff;border:1px solid var(--xa-color-line);border-radius:var(--xa-radius-md);box-shadow:var(--xa-shadow-sm);display:flex;align-items:center;gap:12px;padding:0 14px}.pv-h-logo{font-weight:700;font-size:.9rem;color:var(--xa-color-navy);letter-spacing:-.01em}.pv-h-logo b{color:var(--xa-color-rose)}.pv-h-nav{display:flex;gap:10px;margin-left:auto}.pv-h-nav i{width:22px;height:5px;border-radius:3px;background:var(--xa-color-line)}.pv-h-cta{width:30px;height:16px;border-radius:5px;background:var(--xa-color-rose)}.pv-sidebar{width:132px;background:var(--xa-color-navy);border-radius:var(--xa-radius-md);padding:12px 10px;display:flex;flex-direction:column;gap:9px}.pv-s-row{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:6px}.pv-s-row b{width:12px;height:12px;border-radius:4px;background:#ffffff59}.pv-s-row i{height:6px;border-radius:3px;background:#ffffff38;flex:1}.pv-s-row.active{background:#d27079e6}.pv-s-row.active b,.pv-s-row.active i{background:#ffffffd9}.pv-shell{width:100%;max-width:280px;height:108px;border:1px solid var(--xa-color-line);border-radius:var(--xa-radius-md);overflow:hidden;box-shadow:var(--xa-shadow-sm);display:flex;flex-direction:column;background:#fff}.pv-shell-top{height:22px;background:var(--xa-color-navy);flex-shrink:0}.pv-shell-body{flex:1;display:flex}.pv-shell-side{width:56px;background:var(--xa-color-slate-soft);border-right:1px solid var(--xa-color-line)}.pv-shell-main{flex:1;background:var(--xa-color-canvas)}.pv-modal-scrim{width:100%;max-width:280px;height:110px;background:#3d496e2e;border-radius:var(--xa-radius-md);display:flex;align-items:center;justify-content:center}.pv-modal{width:170px;background:#fff;border-radius:var(--xa-radius-md);box-shadow:var(--xa-shadow-md);padding:12px 14px}.pv-m-title{width:60%;height:9px;border-radius:3px;background:var(--xa-color-navy);margin-bottom:9px}.pv-m-line{height:6px;border-radius:3px;background:var(--xa-color-line);margin-bottom:6px}.pv-m-line.short{width:70%}.pv-m-btns{display:flex;gap:6px;justify-content:flex-end;margin-top:11px}.pv-m-btns span{width:34px;height:14px;border-radius:4px}.pv-m-btns .ghost{background:var(--xa-color-line)}.pv-m-btns .solid{background:var(--xa-color-rose)}.pv-icons{display:flex;gap:16px;align-items:center}.pv-icons img{display:block}.pv-controls{display:flex;gap:18px;align-items:center}.pv-chk{width:22px;height:22px;border-radius:6px;background:var(--xa-color-rose);display:inline-flex;align-items:center;justify-content:center}.pv-chk i{width:10px;height:6px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}.pv-radio{width:22px;height:22px;border-radius:50%;border:2.5px solid var(--xa-color-rose);position:relative}.pv-radio:after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--xa-color-rose)}.pv-switch{width:40px;height:22px;border-radius:999px;background:var(--xa-color-rose);position:relative}.pv-switch b{position:absolute;top:2px;left:20px;width:18px;height:18px;border-radius:50%;background:#fff}.pv-feedback{display:flex;flex-direction:column;gap:12px;width:100%;max-width:240px}.pv-alert{font-size:.82rem;font-weight:700;color:#15803d;background:var(--xa-color-green-soft);border-left:3px solid var(--xa-color-green);border-radius:6px;padding:8px 12px}.pv-bar{display:block;height:8px;border-radius:999px;background:var(--xa-color-line);overflow:hidden}.pv-bar i{display:block;width:62%;height:100%;background:var(--xa-color-rose);border-radius:999px}.pv-nav-demo{display:flex;gap:4px;border-bottom:2px solid var(--xa-color-line)}.pv-tab{font-size:.82rem;font-weight:700;color:var(--xa-color-muted);padding:6px 12px 9px}.pv-tab.active{color:var(--xa-color-navy);box-shadow:inset 0 -2px 0 var(--xa-color-rose)}@media (max-width: 640px){.comp-showcase-grid{grid-template-columns:1fr!important}.comp-showcase .comp-desc{white-space:normal}}