/* Compact category cards inspired by the supplied hover demonstration. */
#categories.category-section .section-heading{margin-bottom:8px;min-height:30px}
#categories.category-section{scroll-margin-top:18px}
#categories.category-section .category-navigation-row{justify-content:flex-end}
#categories.category-section .category-navigation-row:has(.category-strip-nav[hidden]){display:none}
#categories.category-section .category-grid{display:grid;grid-template-columns:196px minmax(0,1fr);gap:22px;padding:4px 0 10px;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
#categories.category-section .category-card{--category-tone:#a76b36;--category-tint:#f7e9d8;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0;min-height:104px;padding:12px 8px 10px;border:1px solid #eee2d5;border-radius:14px;background:#fffdf9;text-align:center;box-shadow:0 2px 6px #694a3210;transform:none;transition:transform .26s cubic-bezier(.2,.8,.2,1),box-shadow .26s,border-color .26s,background .26s}
#categories.category-section .category-card[data-category="女装"]{--category-tone:#8961c9;--category-tint:#eee5fa}
#categories.category-section .category-card[data-category="家居"]{--category-tone:#b27737;--category-tint:#fbecd8}
#categories.category-section .category-card[data-category="数码"]{--category-tone:#597ac5;--category-tint:#e7ecfc}
#categories.category-section .category-card[data-category="户外"]{--category-tone:#488f83;--category-tint:#e0f2ed}
#categories.category-section .category-card[data-category="宠物"]{--category-tone:#b96073;--category-tint:#f8e4e9}
#categories.category-section .category-icon{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;margin:0 0 7px;border-radius:50%;background:var(--category-tint);color:var(--category-tone);box-shadow:none;transform:none;transition:color .24s,background .24s,transform .3s cubic-bezier(.2,.8,.2,1)}
#categories.category-section .category-icon svg{display:block;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#categories.category-section .category-card strong{font-size:14px;line-height:1.4;color:#322a26}
#categories.category-section .category-card small{font-size:11px;line-height:1.4;margin-top:2px;color:#928172}
#categories.category-section .category-card.category-active{background:#fffaf2;border-color:#d8b68f;box-shadow:0 3px 10px #94623916}
#categories.category-section .category-card.category-active .category-icon{background:var(--category-tone);color:#fff}
#categories.category-section .category-card:focus-visible{outline:2px solid var(--category-tone);outline-offset:3px}
@media(hover:hover) and (pointer:fine){
 #categories.category-section button.category-card:hover{transform:translateY(-3px);background:#fffefc;border-color:#e4d5c4;box-shadow:0 9px 20px #694a321a}
 #categories.category-section button.category-card:hover .category-icon{background:var(--category-tone);color:#fff;transform:scale(1.07)}
}
#categories.category-section .category-intro,#categories.category-section .category-intro:hover{cursor:default;transform:none;background:#fffaf2;border-color:#e3c9ac;box-shadow:0 2px 6px #694a3210;transition:none}
#categories.category-section .category-intro .category-icon{background:var(--category-tone);color:#fff;transform:none}
#categories.category-section .category-intro h2{margin:0;color:#322a26;font-size:16px;line-height:1.4}
#categories .category-strip-nav{display:flex;gap:6px;align-items:center}
#categories .category-strip-nav[hidden]{display:none}
#categories .category-strip-nav button{display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid #ddc8b1;border-radius:50%;background:#fffaf2;color:#8d6748;cursor:pointer}
#categories .category-strip-nav button:disabled{opacity:.35;cursor:default}
#categories .category-strip-nav button:focus-visible{outline:2px solid #a76b36;outline-offset:2px}
#categories .category-strip-nav svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:760px){
 #categories.category-section .category-grid{grid-template-columns:minmax(0,1fr);gap:9px;padding:4px 0 10px}
 #categories.category-section .category-grid::-webkit-scrollbar{display:none}
 #categories.category-section .category-card{flex:0 0 104px;min-height:100px;padding:10px 6px;border-radius:12px;scroll-snap-align:start}
 #categories.category-section .category-card strong{font-size:13px}
 #categories.category-section .category-icon{width:32px;height:32px;flex-basis:32px}
}
/* The left control and both panels retain a fixed height during the handover. */
#categories .category-mode-control{position:relative;height:104px;padding:8px 9px;border:1px solid #ddc4a8;border-radius:14px;background:linear-gradient(130deg,#fffaf1,#f0e1ce);box-shadow:inset 0 1px #fff9;min-width:0}
#categories .category-mode-tabs{display:grid;grid-template-rows:repeat(2,minmax(0,1fr));height:100%;gap:6px}
#categories .category-mode-tabs button{position:relative;display:flex;align-items:center;justify-content:center;gap:9px;min-height:38px;padding:6px 20px;border:1px solid transparent;border-radius:7px;background:transparent;color:#88725e;font-size:16px;line-height:1.4;text-align:center;transition:background .22s,color .22s,box-shadow .22s}
#categories .category-mode-tabs button[aria-selected="true"]{background:#86603f;color:#fffaf3;box-shadow:0 3px 8px #694a3224;border-color:#785335}
#categories .category-mode-tabs button:not([aria-selected="true"]):hover{background:#e9d9c3;color:#67492f}
#categories .category-mode-tabs svg{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#categories .category-mode-arrow{position:absolute;right:9px;font-size:18px;line-height:1;opacity:.55}
#categories .category-mode-foot{position:absolute;right:2px;bottom:-23px;display:flex;justify-content:flex-end;align-items:center;gap:4px;min-width:0}
#categories .category-mode-foot:has(.category-strip-nav[hidden]){display:none}
#categories .commerce-skills-entry{display:flex;align-items:center;gap:7px;min-height:27px;padding:3px 8px;border:0;border-radius:6px;background:transparent;color:#946637;font-size:12px;white-space:nowrap;cursor:pointer}
#categories .commerce-skills-entry svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;flex-shrink:0}
#categories .commerce-skills-entry>span:last-child{font-size:11px;opacity:.65}
#categories .commerce-skills-entry:hover{background:#e9d9c3;color:#67492f}
#categories .commerce-skills-entry:focus-visible{outline:2px solid #a76b36;outline-offset:2px}
#categories .category-panel-stage{height:104px;min-width:0;position:relative}
#categories .category-panel-stage.is-switching{overflow:hidden;border-radius:14px}
#categories .category-panel{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;height:104px;min-width:0;transform-origin:left center}
#categories .category-panel[hidden]{display:none}
#categories .category-panel>*{min-width:0}
#categories .category-metric{display:flex;flex-direction:column;justify-content:space-between;min-width:0;height:104px;padding:13px 15px 12px;border:1px solid #e4d3bf;border-radius:14px;background:linear-gradient(140deg,#fffdf8,#f6eddf);color:#624a36;text-align:left;box-shadow:0 2px 6px #694a320a;transition:background .2s,border-color .2s,transform .25s}
#categories .category-metric-label{display:flex;align-items:center;gap:7px;font-size:13px;color:#826c58;white-space:nowrap}
#categories .category-metric-label svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
#categories .category-metric-label>span{margin-left:auto;font-size:11px;opacity:.5}
#categories .category-metric strong{font-size:26px;line-height:1.15;color:#503825;font-variant-numeric:tabular-nums}
#categories .category-metric small{font-size:10px;line-height:1.5;color:#9a8672;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#categories .category-metric[data-overview-metric="completed"] strong{color:#537366}
#categories .category-metric[data-overview-metric="attention"][data-has-value="true"] strong{color:#b05f3b}
#categories .category-metric[aria-disabled="true"]{cursor:default}
#categories :is(.category-metric,.category-mode-tabs button):focus-visible{outline:2px solid #a76b36;outline-offset:3px}
@media(hover:hover) and (pointer:fine){#categories .category-metric:not([aria-disabled="true"]):hover{transform:translateY(-2px);background:#fffcf6;border-color:#bd9871}}
#categories .category-strip-nav{flex-shrink:0;gap:5px}
#categories .category-strip-nav button{width:22px;height:22px}
#categories .category-strip-nav svg{width:12px;height:12px}
#categories .category-mode-status{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(min-width:761px) and (max-width:1199px){
 #categories.category-section .category-grid{grid-template-columns:178px minmax(0,1fr);gap:16px}
 #categories .category-panel{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
 #categories .category-panel>*{flex:0 0 calc((100% - 36px)/4);scroll-snap-align:start}
 #categories .category-metric{padding:12px 10px}
 #categories .category-metric-label{font-size:12px;gap:5px}
 #categories .category-mode-foot{margin-top:3px}
}
@media(min-width:761px) and (max-width:959px){
 #categories.category-section .category-grid{grid-template-columns:164px minmax(0,1fr);gap:14px}
 #categories .category-panel{gap:11px}
 #categories .category-panel>*{flex-basis:calc((100% - 22px)/3)}
}
@media(max-width:760px){
 #categories .category-mode-control{height:auto;min-height:48px;padding:6px;display:grid;gap:3px;border-radius:11px}
 #categories .category-mode-tabs{display:flex;flex:1;min-width:0;gap:4px}
 #categories .category-mode-tabs button{flex:1;justify-content:center;gap:7px;min-height:38px;padding:6px 7px;font-size:16px;white-space:nowrap}
 #categories .category-mode-arrow{display:none}
 #categories .category-mode-foot{display:none}
 #categories .category-panel-stage,#categories .category-panel{height:100px}
 #categories .category-panel{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain}
 #categories .category-metric{height:100px;flex:0 0 136px;padding:12px;border-radius:12px;scroll-snap-align:start}
}
#categories .category-panel::-webkit-scrollbar{display:none}
@media(prefers-reduced-motion:reduce){#categories .category-metric,#categories .category-mode-tabs button{transition:none;transform:none!important}}
@media(prefers-reduced-motion:reduce){
 #categories.category-section .category-card,#categories.category-section .category-icon{transition:none;transform:none!important}
}

.category-drawer{width:min(860px,calc(100vw - 28px));max-height:82vh;border:1px solid #e5dfd2;border-radius:20px;padding:0;background:#fffdf8;color:#40382e;box-shadow:0 24px 90px #4d392540}.category-drawer::backdrop{background:#2a211775;backdrop-filter:blur(4px)}.category-drawer-head{display:flex;justify-content:space-between;align-items:start;padding:20px 24px;border-bottom:1px solid #ece5d9}.category-drawer-head small{letter-spacing:.12em;color:#9b8b74}.category-drawer-head h2{margin:4px 0 0;font-size:24px}.category-drawer-head button{border:0;background:transparent;font-size:24px;color:#806b52;cursor:pointer}.category-drawer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:22px}.category-drawer-grid .category-card{min-height:130px;width:100%;border:1px solid #eadfce;border-radius:14px;background:#fff;cursor:pointer;box-shadow:0 5px 20px #4d392510}.category-drawer-grid .category-card:hover{transform:translateY(-2px);border-color:#b98a5f}@media(max-width:640px){.category-drawer-grid{grid-template-columns:1fr 1fr;padding:14px;gap:9px}.category-drawer-grid .category-card{min-height:112px}}