.groups{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-md);margin:var(--space-lg) 0 0}
.group{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2xs);padding:var(--space-lg);border:1px solid var(--c-line);border-radius:var(--radius-card);background:var(--c-bg);color:var(--c-text-1);font:inherit;text-align:left;cursor:pointer;transition:border-color var(--dur-micro) var(--ease-out),background-color var(--dur-micro) var(--ease-out),transform var(--dur-micro) var(--ease-out)}
.group:hover{border-color:var(--c-line-strong);background:var(--c-raised);transform:translateY(-2px)}
.group:focus-visible,.sub:focus-visible{outline:2px solid var(--c-focus);outline-offset:2px}
.group[aria-pressed=true]{border-color:var(--c-brand);background:var(--c-raised);color:var(--c-text-0);box-shadow:0 0 0 1px var(--c-brand) inset}
.group__icon{font-size:34px;line-height:1.1;margin-bottom:var(--space-xs)}
.group__name{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--weight-medium);color:var(--c-text-0)}
.group__desc{font-size:var(--text-sm);color:var(--c-text-2)}
.group__count{position:absolute;top:var(--space-md);right:var(--space-md);min-width:26px;height:26px;padding:0 8px;border-radius:var(--radius-pill);background:var(--c-muted-bg);color:var(--c-text-1);font-size:var(--text-xs);display:flex;align-items:center;justify-content:center}
.group[aria-pressed=true] .group__count{background:var(--c-brand);color:var(--c-on-brand);font-weight:var(--weight-medium)}
.subs-panel{margin-top:var(--space-md);padding:var(--space-lg);border:1px solid var(--c-line);border-radius:var(--radius-card);background:var(--c-deep)}
.subs-panel .section-title{margin-top:0}
.subs-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md)}
.subs{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-sm)}
.sub{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:var(--space-sm);align-items:center;padding:var(--space-md);min-height:76px;border:1px solid var(--c-line);border-radius:var(--radius-inner);background:var(--c-bg);color:var(--c-text-0);font:inherit;text-align:left;text-decoration:none;cursor:pointer;transition:border-color var(--dur-micro) var(--ease-out),background-color var(--dur-micro) var(--ease-out)}
.sub:hover{border-color:var(--c-brand);background:var(--c-raised)}
.sub__icon{grid-row:1/3;font-size:26px;width:44px;height:44px;border-radius:var(--radius-inner);background:var(--c-muted-bg);display:flex;align-items:center;justify-content:center}
.sub__name{font-size:var(--text-md);font-weight:var(--weight-medium);line-height:1.3}
.sub__meta{font-size:var(--text-xs);color:var(--c-brand-hi)}
.sub--soon{opacity:.6;cursor:default}
.sub--soon:hover{border-color:var(--c-line);background:var(--c-bg)}
.sub--soon .sub__meta{color:var(--c-text-3)}
@media (max-width:899.98px){.groups{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:479.98px){.groups{gap:var(--space-sm)}.group{padding:var(--space-md)}.group__icon{font-size:28px;margin-bottom:0}.group__name{font-size:var(--text-lg)}.group__desc{font-size:var(--text-xs)}.subs-panel{padding:var(--space-md)}.subs{grid-template-columns:minmax(0,1fr)}.sub{min-height:64px;padding:var(--space-sm)}}
@media (prefers-reduced-motion:reduce){.group,.sub{transition:none}.group:hover{transform:none}}