/* packaging-refine.css — 设计案例列表页排版整理 (2026-10-23). Remove the <link id="qm-packaging-refine-css"> to revert. */
html:not(#qmT):not(#qmP) body.qm-case-index{--pk-ink:#171a20;--pk-mute:#5c5e62;--pk-line:#E2E3E3}

/* Filter bar: stays in the flow — sticky it covered ~1/4 of the screen over the cards */
html:not(#qmT):not(#qmP) body.qm-case-index .cc-console{position:static!important;background:#fff!important;border-radius:12px;padding:24px 28px!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;gap:16px 20px!important;margin-bottom:56px!important}

/* Results heading */
html:not(#qmT):not(#qmP) body.qm-case-index .cc-summary{margin-bottom:32px!important;align-items:flex-end!important}
html:not(#qmT):not(#qmP) body.qm-case-index .cc-summary h2{font-size:clamp(28px,2.6vw,40px)!important;line-height:1.2!important;font-weight:500!important}

/* Case grid: even gutters, framed cards, label above title */
html:not(#qmT):not(#qmP) body.qm-case-index .cc-grid{gap:24px!important;align-items:stretch!important}
html:not(#qmT):not(#qmP) body.qm-case-index .cc-card>a{display:flex!important;flex-direction:column;height:100%}
html:not(#qmT):not(#qmP) body.qm-case-index .cc-card-body{flex:1}
html:not(#qmT):not(#qmP) body.qm-case-index .cc-card{border-radius:12px!important;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease}
html:not(#qmT):not(#qmP) body.qm-case-index .cc-card:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(23,26,32,.1)}
html:not(#qmT):not(#qmP) body.qm-case-index .cc-media{aspect-ratio:4/3;height:auto!important;overflow:hidden}
html:not(#qmT):not(#qmP) body.qm-case-index .cc-media img{width:100%!important;height:100%!important;object-fit:cover;transition:transform .6s ease}
html:not(#qmT):not(#qmP) body.qm-case-index .cc-card:hover .cc-media img{transform:scale(1.03)}
html:not(#qmT):not(#qmP) body.qm-case-index .cc-card-body{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:6px!important;padding:20px 24px 24px!important}
html:not(#qmT):not(#qmP) body.qm-case-index .cc-primary{margin:0!important;font-size:13px!important;letter-spacing:.06em;color:var(--pk-mute)!important}
html:not(#qmT):not(#qmP) body.qm-case-index .cc-card h3{margin:0!important;font-size:20px!important;line-height:1.4!important;font-weight:500!important;color:var(--pk-ink)!important;width:auto!important}

/* Load more + closing band */
html:not(#qmT):not(#qmP) body.qm-case-index .cc-browser{padding-bottom:112px!important}

@media (max-width:921px){
  html:not(#qmT):not(#qmP) body.qm-case-index .cc-console{padding:20px!important;margin-bottom:40px!important}
}
@media (max-width:767px){
  html:not(#qmT):not(#qmP) body.qm-case-index .cc-grid{gap:16px!important}
  html:not(#qmT):not(#qmP) body.qm-case-index .cc-card-body{padding:16px 18px 20px!important}
  html:not(#qmT):not(#qmP) body.qm-case-index .cc-card h3{font-size:18px!important}
  html:not(#qmT):not(#qmP) body.qm-case-index .cc-browser{padding-bottom:72px!important}
}