:root{--xcat-bg:#fff;--xcat-border:#e5e7eb;--xcat-shadow:0 1px 8px rgba(0,0,0,.04);--xcat-pill-bg:#f3f4f6;--xcat-pill-text:#111827;--xcat-pill-border:#e5e7eb;--xcat-active-bg:#111827;--xcat-active-text:#fff;--xcat-active-border:#111827;--xcat-sub-pill-bg:#f3f4f6;--xcat-sub-pill-text:#111827;--xcat-sub-pill-border:#e5e7eb}
#xcatbar-wrap{position:sticky;z-index:999;background:var(--xcat-bg);border-bottom:1px solid var(--xcat-border);box-shadow:var(--xcat-shadow);min-height:48px}
#xcatbar-wrap .x-cat-main-bar,#xcatbar-wrap .x-cat-sub-bar{overflow-anchor:none;-webkit-overflow-scrolling:touch;padding:10px 10px;overflow-x:auto}
#xcatbar-wrap .x-cat-main-bar{display:flex;align-items:center;gap:8px;scrollbar-width:thin;scrollbar-color:var(--xcat-border) transparent}
#xcatbar-wrap .x-cat-main-bar::-webkit-scrollbar{height:6px}
#xcatbar-wrap .x-cat-main-bar::-webkit-scrollbar-thumb{background:var(--xcat-border);border-radius:999px}
#xcatbar-wrap .x-cat-pill{padding:7px 14px;line-height:1;border-radius:999px;white-space:nowrap;user-select:none;cursor:pointer;background:var(--xcat-pill-bg);color:var(--xcat-pill-text);border:1px solid var(--xcat-pill-border);font:600 12px/1 inherit;transition:background .15s,color .15s,border-color .15s,transform .05s}
#xcatbar-wrap .x-cat-pill:hover{background:#e9eaec}
#xcatbar-wrap .x-cat-pill:active{transform:translateY(1px)}
#xcatbar-wrap .x-cat-pill:focus-visible{outline:2px solid #6366f1;outline-offset:2px}
#xcatbar-wrap .x-cat-pill.active{background:var(--xcat-active-bg);color:var(--xcat-active-text);border-color:var(--xcat-active-border)}
#xcatbar-wrap .x-cat-sub-bar{display:none;background:var(--xcat-bg);border-top:2px solid var(--xcat-border)}
#xcatbar-wrap .x-cat-sub-bar.show{display:block!important}
#xcatbar-wrap .x-cat-sub-inner{display:flex;align-items:center;gap:8px;min-height:36px}
#xcatbar-wrap .x-cat-sub-link{padding:6px 12px;line-height:1;border-radius:999px;white-space:nowrap;text-decoration:none;background:var(--xcat-sub-pill-bg);color:var(--xcat-sub-pill-text);border:1px solid var(--xcat-sub-pill-border);font:500 11px/1 inherit;transition:background .15s,color .15s,border-color .15s}
#xcatbar-wrap .x-cat-sub-link:hover,#xcatbar-wrap .x-cat-sub-link.active{background:var(--xcat-active-bg);color:var(--xcat-active-text);border-color:var(--xcat-active-border)}
@media (max-width:480px){#xcatbar-wrap .x-cat-pill{font-size:11px;padding:7px 12px}#xcatbar-wrap .x-cat-sub-link{font-size:10px;padding:6px 10px}}