.hang-card-filter{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(66px,1fr);gap:2px;margin-left:auto;padding:3px;border:1px solid #dce3e8;border-radius:12px;background:#f3f6f8;white-space:nowrap}
.hang-card-filter button{min-height:34px;border:0;border-radius:8px;background:transparent;color:#526273;font-family:inherit;font-size:13px;font-weight:600;line-height:1.2;cursor:pointer}
.hang-card-filter button[aria-pressed="true"]{background:#fff;color:#183d53;box-shadow:0 1px 4px rgba(25,56,76,.12)}
.hang-card-filter button:focus-visible{outline:2px solid #d59a4a;outline-offset:2px}
.hang-card-filter-empty{grid-column:1/-1;text-align:center;color:#657583;padding:32px 12px}
.hang-card-filter-hidden{display:none!important}
@media(max-width:600px){.hang-card-filter{grid-auto-columns:minmax(56px,1fr)}.hang-card-filter button{min-height:36px}}

body :is(.reading-panel-head,.listening-panel-head,.speaking-panel-head,.writing-panel-head).hang-card-filter-header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 16px}
body .hang-card-filter-header :is(h1,h2){grid-column:1;grid-row:1;min-width:0;margin:0}
body .hang-card-filter-header .hang-card-filter{grid-column:2;grid-row:1}
body .hang-card-filter-header p{grid-column:1/-1;grid-row:2;margin:0;text-align:left}
@media(max-width:600px){body :is(.reading-panel-head,.listening-panel-head,.speaking-panel-head,.writing-panel-head).hang-card-filter-header{grid-template-columns:minmax(0,1fr) auto;gap:8px}body .hang-card-filter-header :is(h1,h2){font-size:20px}.hang-card-filter{margin-left:0}}

body .hang-card-filter-header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 16px}
body .hang-card-filter-header :is(h1,h2){grid-column:1;grid-row:1;min-width:0;margin-right:auto}

body .hang-card-filter-header p[hidden]{display:none}