/* Compact navigation, softly animated graphic links, same native details controls. */
.category-nav{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;padding:12px 22px;background:#fff;box-shadow:0 5px 20px #24262d04;border-color:#ececef}
.category-nav .category{min-width:0;position:relative;flex-basis:auto}
.category-nav .category summary,.category-nav>.dragon-link{min-height:62px;padding:10px 9px;gap:8px;border:1px solid transparent;border-radius:14px;font-size:14px;font-weight:650;line-height:1.3;justify-content:center;background:#f7f8fa;color:#41434b;transition:background .2s,color .2s,border-color .2s,box-shadow .2s}
.category-nav .category summary::after,.category-nav>.dragon-link::after{content:none}
.category-nav .category summary:hover,.category-nav .category[open]>summary,.category-nav>.dragon-link:hover{color:#bf1932;background:#fbecef;border-color:#f1d0d8;box-shadow:0 5px 16px #bf193208}
.category-nav .category .category-icon,.category-nav>.dragon-link>span:first-child{width:31px;height:31px;flex:0 0 31px;border-radius:10px;background:#fff;color:#bf1932;border:0;box-shadow:0 2px 6px #24262d04;transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s}
.category-nav .category .category-icon svg,.category-nav>.dragon-link svg{width:19px;height:19px}
.category-nav .category summary:hover .category-icon,.category-nav .category[open] .category-icon{transform:translateY(-2px) scale(1.06);box-shadow:0 4px 10px #bf193210}
.category-nav .category .chevron{margin-left:2px;color:#a5a5ad;width:11px;flex:0 0 11px}.category-nav .category[open] .chevron{color:#bf1932}
.category-nav .category .category-menu{left:0;right:auto;top:calc(100% + 10px);width:338px;min-width:0;max-height:none;overflow:visible;padding:14px;border:1px solid #eadfe3;border-radius:20px;background:#fff;box-shadow:0 22px 60px #38232b1a,0 3px 12px #38232b06;transform-origin:50% 0}
.category-nav .category:last-of-type .category-menu{left:auto;right:0}
.category-menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.category-nav .category .category-menu-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 2px 12px;margin-bottom:10px;border-bottom:1px solid #f0ecee;color:#24262d}.category-menu-head strong{display:block;font-size:14px;line-height:1.5}.category-menu-head small{display:block;font-size:11px;color:#898a94;font-weight:400;margin-top:2px}
.category-menu-head .category-close{display:flex;align-items:center;gap:4px;min-height:36px;padding:5px 9px;border:0;border-radius:9px;background:#f7f8fa;color:#7d7e87;font-size:11px;cursor:pointer}.category-menu-head .category-close span{font-size:18px;line-height:1}.category-close:hover{color:#bf1932;background:#fbecef}
.category-menu-grid{display:grid;grid-template-columns:1fr;gap:7px;max-height:min(336px,58vh);overflow:auto;overscroll-behavior:contain;padding:1px 3px 3px 1px;scrollbar-width:thin;scrollbar-color:#edccd4 transparent}
.category-nav .category .category-menu-grid>a{display:grid;grid-template-columns:34px minmax(0,1fr) 16px;align-items:center;gap:11px;min-height:57px;padding:9px 12px;margin:0;border:1px solid #f0edf0;border-radius:12px;background:#fafafb;color:#41434b;font-size:14px;font-weight:550;transition:background .18s,border-color .18s,transform .18s,color .18s}
.category-nav .category .category-menu-grid>a::before{content:none}.category-menu-grid img{display:block;width:34px;height:34px;object-fit:contain;transition:transform .2s}.category-menu-grid>a>span:not(.menu-link-arrow){min-width:0;line-height:1.4}.menu-link-arrow{color:#b4adb2;font-size:16px;transition:transform .2s,color .2s}
.category-nav .category .category-menu-grid>a:hover,.category-nav .category .category-menu-grid>a:focus-visible,.category-nav .category .category-menu-grid>a[aria-current]{background:#fff1f4;border-color:#edc3cd;color:#a3152c;transform:translateX(2px)}
.category-menu-grid>a:hover img{transform:scale(1.07)}.category-menu-grid>a:hover .menu-link-arrow{color:#bf1932;transform:translate(2px,-2px)}
.category-nav .category[open] .category-menu{animation:menu-panel-enter .22s cubic-bezier(.2,.8,.2,1) both}.category[open] .category-menu-grid>a{animation:menu-link-enter .24s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--item-order,0)*22ms)}
@keyframes menu-panel-enter{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes menu-link-enter{from{opacity:0;translate:0 7px}to{opacity:1;translate:0 0}}
@media(min-width:801px) and (max-width:1100px){.category-nav{grid-template-columns:repeat(4,minmax(0,1fr))}.category-nav .category:nth-child(4) .category-menu{left:auto;right:0}}
@media(max-width:800px){.category-nav{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:8px 10px}.category-nav .category{position:static}.category-nav .category summary{min-height:48px;padding:6px 4px;font-size:12px;gap:5px;border-radius:11px}.category-nav .category .category-icon{width:25px;height:25px;flex-basis:25px;border-radius:8px}.category-nav .category .category-icon svg{width:16px;height:16px}.category-nav .category .chevron{width:9px;flex-basis:9px;margin-left:0}.category-nav>.dragon-link{grid-column:1/-1;min-height:35px;padding:5px;font-size:12px;border:0;border-radius:10px}.category-nav>.dragon-link>span:first-child{width:23px;height:23px;flex-basis:23px;border-radius:7px}.category-nav>.dragon-link svg{width:15px;height:15px}.category-nav .category .category-menu{position:absolute;left:10px;right:10px;top:calc(100% + 7px);width:auto;min-width:0;padding:12px;border-radius:18px;max-height:none}.category-nav .category .category-menu-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;max-height:max(88px,min(330px,calc(var(--category-space,52vh) - 76px)))}.category-nav .category .category-menu-grid>a{grid-template-columns:28px minmax(0,1fr);gap:7px;min-height:56px;padding:8px 7px;font-size:12px;border-radius:10px}.category-menu-grid img{width:28px;height:28px}.category-menu-grid .menu-link-arrow{display:none}.category-menu-head .category-close{min-height:44px;min-width:56px;justify-content:center}.category-nav .category .category-menu-head{padding-bottom:9px;margin-bottom:9px}.category-menu-open .category-backdrop{background:#24262d32;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.category-nav .category[open] .category-icon{transform:translateY(-1px)}.category-nav .category .category-menu-grid>a:active{transform:scale(.98);background:#f9e1e7}}
@media(max-width:360px){.category-nav .category summary{font-size:11px;gap:3px}.category-nav .category .category-icon{width:22px;height:22px;flex-basis:22px}.category-nav .category .category-menu-grid>a{font-size:11px}}
@media(max-width:800px) and (max-height:500px){.category-nav .category .category-menu{position:fixed;left:12px;right:12px;top:auto;bottom:12px}.category-nav .category .category-menu-grid{max-height:calc(100dvh - 110px)}}
@media(prefers-reduced-motion:reduce){.category-nav .category[open] .category-menu,.category[open] .category-menu-grid>a{animation:none}.category-nav .category summary,.category-nav .category .category-icon,.category-nav .category .chevron,.category-nav .category .category-menu-grid>a,.category-menu-grid img,.menu-link-arrow{transition:none}}
@media(max-width:800px){.category-nav .category:last-of-type .category-menu{left:10px;right:10px;width:auto}}
@media(max-width:800px) and (max-height:500px){.category-nav .category:last-of-type .category-menu{left:12px;right:12px}}
@media(max-width:800px){.category-nav .category .category-menu-grid>a{font-size:13px}}
@media(max-width:360px){.category-nav .category summary{gap:2px;padding-left:2px;padding-right:2px}.category-nav .category .category-menu-grid>a{font-size:12px}}
/* Six requested groups; the separate streak entry lives in desktop service navigation/mobile tabs. */
.category-nav{grid-template-columns:repeat(6,minmax(0,1fr))}
@media(min-width:801px) and (max-width:1100px){.category-nav{grid-template-columns:repeat(3,minmax(0,1fr))}.category-nav .category:nth-child(3) .category-menu{left:auto;right:0}.category-nav .category:nth-child(4) .category-menu{left:0;right:auto}}
@media(max-width:800px){.category-nav{grid-template-columns:repeat(3,minmax(0,1fr))}}
