mzh-service-filter { display: contents; }
.mzh-service-filter { position:fixed; margin:0; padding:0; border:0; max-width:none; max-height:none; overflow:hidden; background:var(--picker-scrim); border-radius:var(--radius-3xl); color:var(--color-text-primary); font-family:var(--typography-family-base); }
.mzh-service-filter::backdrop { background:transparent; }
.mzh-service-filter__panel { position:absolute; bottom:0; width:100%; height:min(var(--service-filter-height), calc(100% - var(--service-filter-top-clearance))); display:flex; flex-direction:column; background:var(--color-bg-primary); border-radius:var(--radius-panel-detail) var(--radius-panel-detail) 0 0; overflow:hidden; }
.mzh-service-filter header { position:relative; display:flex; align-items:center; justify-content:center; min-height:var(--picker-header-height); flex:none; padding:0 var(--spacing-xl); }
.mzh-service-filter h2 { margin:0; font-size:var(--typography-subtitle-font-size); line-height:var(--typography-subtitle-line-height); font-weight:var(--typography-weight-medium); }
.mzh-service-filter__close { position:absolute; right:var(--spacing-sm); top:50%; transform:translateY(-50%); width:var(--control-height-md); height:var(--control-height-md); padding:var(--spacing-md); border:0; background:none; color:var(--color-text-primary); cursor:pointer; }
.mzh-service-filter__close svg { display:block; width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.mzh-service-filter__body { flex:1; min-height:0; display:flex; }
.mzh-service-filter__nav { flex:0 0 var(--service-filter-nav-width); background:var(--color-bg-secondary); overflow-y:auto; overscroll-behavior:contain; }
.mzh-service-filter__nav button { display:block; width:100%; min-height:var(--picker-header-height); border:0; padding:var(--spacing-md) var(--spacing-sm); font:inherit; font-size:var(--typography-body-font-size); font-weight:var(--typography-weight-regular); color:var(--color-text-secondary); background:transparent; cursor:pointer; }
.mzh-service-filter__nav button[aria-current=true] { color:var(--color-text-brand); background:var(--color-bg-primary); font-weight:var(--typography-weight-regular); }
.mzh-service-filter__content { flex:1; min-width:0; overflow-y:auto; overscroll-behavior:contain; padding:0 var(--spacing-lg); scrollbar-width:none; }
.mzh-service-filter__content::-webkit-scrollbar { display:none; }
.mzh-service-filter__content section { padding:var(--spacing-lg) 0 var(--spacing-lg); }
.mzh-service-filter__content section:last-child { min-height:100%; }
.mzh-service-filter h3 { margin:0 0 var(--spacing-md); font-size:var(--typography-body-font-size); line-height:var(--typography-body-line-height); font-weight:var(--typography-weight-medium); }
.mzh-service-filter__tags { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--spacing-sm); }
.mzh-service-filter .mzh-filter-tag { font-size:var(--typography-body-font-size); font-weight:var(--typography-weight-regular); min-height:var(--control-height-md); justify-content:center; padding:var(--spacing-sm); white-space:normal; background:var(--color-bg-secondary); color:var(--color-text-primary); border-radius:var(--radius-md); }
.mzh-service-filter .mzh-filter-tag--active { background:var(--filter-tag-bg-active); color:var(--filter-tag-fg-active); }
.mzh-service-filter footer { display:flex; gap:var(--spacing-md); padding:var(--spacing-lg) var(--spacing-lg) max(var(--spacing-xl), env(safe-area-inset-bottom)); flex:none; }
.mzh-service-filter footer mzh-button { flex:1; width:auto; min-width:0; font-size:var(--typography-subtitle-font-size); }
.mzh-service-filter footer mzh-button[data-clear] { font-weight:var(--typography-weight-regular); }
.mzh-service-filter button:focus-visible { outline:var(--border-width-default) solid var(--color-text-brand); outline-offset:calc(0px - var(--border-width-default)); }

/* 首页分类弹窗（Figma 2170:4392）；底部筛选仅由案例列表显式启用。 */
.mzh-service-filter--category { background:var(--booking-dialog-scrim); }
.mzh-service-filter--category[open] { display:grid; place-items:center; }
.mzh-service-filter--category .mzh-service-filter__panel { position:relative; bottom:auto; width:var(--service-filter-category-width); max-width:calc(100% - var(--spacing-2xl) - var(--spacing-2xl)); height:auto; max-height:calc(100% - var(--spacing-2xl) - var(--spacing-2xl)); padding:var(--spacing-lg) var(--spacing-2xl) var(--spacing-xl); border-radius:var(--radius-md); }
.mzh-service-filter--category header { position:static; min-height:var(--typography-subtitle-line-height); padding:0; margin-bottom:var(--spacing-md); }
.mzh-service-filter--category .mzh-service-filter__close { top:0; right:0; transform:none; padding:0; height:var(--control-height-md); display:grid; place-items:center; }
.mzh-service-filter--category .mzh-service-filter__close img { display:block; }
.mzh-service-filter--category .mzh-service-filter__content { padding:0; }
.mzh-service-filter--category .mzh-service-filter__content section { padding:0; min-height:0; }
.mzh-service-filter--category h3 { display:none; }
.mzh-service-filter--category .mzh-filter-tag { height:var(--control-height-md); color:var(--color-text-primary); }
.mzh-service-filter--category .mzh-filter-tag:has(.mzh-service-filter__tag-icon) { justify-content:center; align-items:center; gap:var(--spacing-xs); padding:0 var(--spacing-inline-compact); white-space:nowrap; }
.mzh-service-filter--category .mzh-filter-tag:active { background:var(--service-filter-category-pressed-bg); }
.mzh-service-filter__tag-icon { display:block; flex:none; width:var(--service-filter-category-icon-size); height:var(--service-filter-category-icon-size); }