/* Product-first library controls. Scope ends at the filter section. */
.library-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 30%); align-items: stretch; margin-bottom: 18px; border: 1px solid #e4e5dc; border-radius: 11px; background: #fffefa; }
.library-overview > .product-first-filters { margin: 0; border: 0; border-radius: 0; background: transparent; padding: 20px 24px 0; }
.library-overview > .products-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border: 0; border-left: 1px solid #e4e5dc; border-radius: 0; background: transparent; }
.library-overview .product-stat { display: flex; flex-direction: column; justify-content: center; padding: 18px; border-right: 0; }
.library-overview .product-stat:nth-child(odd) { border-right: 1px solid #e4e5dc; }
.library-overview .product-stat:nth-child(-n+2) { border-bottom: 1px solid #e4e5dc; }
.library-overview .product-stat span { font-size: 11px; color: #657066; }
.library-overview .product-stat strong { margin: 8px 0 6px; font-size: 27px; }
.library-overview .product-stat small { color: #657066; font-size: 10px; line-height: 1.5; }
.library-overview .product-first-filters .toolbar-copy { flex: 0 0 auto; width: auto; min-width: 0; }
.library-overview .library-filter-heading { justify-content: flex-start; gap: 20px; }
.library-overview .library-product-picker { width: 100%; }
.library-overview .library-browse-controls { justify-content: flex-start; gap: 6px 26px; }
.library-overview .library-secondary-filters { gap: 16px; }
.product-first-filters {
  --filter-ink: #243a33;
  --filter-muted: #657066;
  --filter-line: #dce2d7;
  font-family: "Microsoft YaHei", sans-serif;
  padding: 22px 24px 0;
  position: relative;
}
.product-first-filters [hidden] { display: none !important; }
.product-first-filters .library-filter-heading { margin-bottom: 18px; }
.product-first-filters .toolbar-copy { flex: 1; }
.product-first-filters .toolbar-copy h2 { font-size: 18px; }
.product-first-filters #library-updated { font-size: 11px; color: var(--filter-muted); }
.product-first-filters .library-filter-heading > .text-button { font-size: 12px; color: var(--filter-muted); padding: 8px 0; }
.product-first-filters summary { list-style: none; cursor: pointer; }
.product-first-filters summary::-webkit-details-marker { display: none; }
.product-first-filters svg { width: 20px; height: 20px; flex: 0 0 auto; }
.product-first-filters .filter-chevron { width: 16px; height: 16px; }
.product-first-filters details[open] > summary .filter-chevron { transform: rotate(180deg); }
.product-first-filters :is(summary, button, input, select):focus-visible { outline: 2px solid #44694c; outline-offset: 3px; }
.product-first-filters ::selection { background: #dfead8; color: #243a33; }
.product-first-filters input { caret-color: #234338; }
.product-first-filters .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.library-product-picker { position: relative; width: min(100%, 680px); }
.library-product-picker > summary { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 15px; border: 1px solid #b6c4b0; border-radius: 7px; color: var(--filter-ink); background: #fff; font-size: 14px; }
.library-product-picker > summary:hover { border-color: #68835e; }
.library-product-picker .picker-hint { margin-left: auto; font-size: 11px; color: var(--filter-muted); }
.library-product-panel { position: absolute; z-index: 35; top: calc(100% + 6px); left: 0; width: 100%; padding: 16px; background: #fffefa; border: 1px solid #bac8b3; border-radius: 8px; box-shadow: 0 14px 32px #243a331c; }
.library-product-search { display: block; }
.library-product-search input { display: block; width: 100%; min-width: 0; height: 40px; padding: 8px 12px; border: 1px solid var(--filter-line); border-radius: 5px; background: #fff; color: var(--filter-ink); font: 13px "Microsoft YaHei", sans-serif; }
.product-first-filters input::placeholder { color: #657066; }
.picker-panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; color: var(--filter-muted); font-size: 12px; }
.picker-panel-heading .text-button { font-size: 12px; color: #234338; }
.product-first-filters #library-product-tags { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 5px; max-height: 280px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #a6b59b #f5f6f0; }
.product-first-filters #library-product-tags .filter-tag { display: flex; justify-content: space-between; gap: 6px; min-height: 40px; padding: 8px 10px; border-color: transparent; border-radius: 4px; background: transparent; color: var(--filter-ink); text-align: left; font-size: 12px; }
.product-first-filters #library-product-tags .filter-tag span { overflow-wrap: anywhere; }
.product-first-filters #library-product-tags .filter-tag small { color: var(--filter-muted); opacity: 1; font-size: 11px; font-variant-numeric: tabular-nums; }
.product-first-filters #library-product-tags .filter-tag:hover { background: #f0f4eb; }
.product-first-filters #library-product-tags .filter-tag.is-selected { background: #e8efdf; border-color: #9aaa84; color: #234338; }
.library-selected-products { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.library-selected-products button { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 30px; padding: 5px 9px; border: 1px solid #bccbad; border-radius: 4px; background: #edf3e7; color: #29462c; font: 12px "Microsoft YaHei", sans-serif; cursor: pointer; text-align: left; }
.library-selected-products button span { overflow-wrap: anywhere; }
.library-selected-products svg { width: 14px; height: 14px; }
.picker-cascade { display: grid; grid-template-columns: 122px minmax(0, 1fr); gap: 14px; }
.product-first-filters #library-category-tags { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 3px; max-height: 320px; overflow-y: auto; padding-right: 12px; border-right: 1px solid var(--filter-line); scrollbar-width: thin; scrollbar-color: #a6b59b #f5f6f0; }
.product-first-filters #library-category-tags .filter-tag { flex: 0 0 auto; min-height: 35px; padding: 8px 10px; border: 0; border-radius: 4px; background: transparent; color: var(--filter-muted); font-size: 12px; }
.product-first-filters #library-category-tags .filter-tag small { display: none; }
.product-first-filters #library-category-tags .filter-tag.is-selected { color: #234338; background: #edf2e7; font-weight: 600; }
.product-first-filters #library-category-tags .filter-tag:hover { background: #f1f4ec; color: #234338; }
.product-first-filters .picker-cascade #library-product-tags { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 320px; }
.picker-products { min-width: 0; }
.library-browse-controls { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px 24px; margin-top: 18px; border-top: 1px solid #e8ece2; }
.library-sort-tabs { display: flex; gap: 24px; align-items: stretch; }
.library-sort-tabs button { position: relative; padding: 15px 0; min-height: 48px; border: 0; background: transparent; color: var(--filter-muted); font: 13px "Microsoft YaHei", sans-serif; cursor: pointer; }
.library-sort-tabs button[aria-pressed="true"] { color: #234338; font-weight: 600; }
.library-sort-tabs button[aria-pressed="true"]::after { content: ""; position: absolute; height: 2px; background: #345a3b; bottom: 0; left: 0; right: 0; }
.library-secondary-filters { display: flex; align-items: center; gap: 20px; }
.library-secondary-filters details { position: relative; }
.library-secondary-filters summary { display: flex; align-items: center; gap: 5px; min-height: 44px; color: var(--filter-muted); font-size: 12px; }
.library-date-panel, .library-more-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 36; width: max-content; max-width: calc(100vw - 36px); padding: 18px; border: 1px solid #bac8b3; border-radius: 8px; background: #fffefa; box-shadow: 0 14px 32px #243a331c; }
.library-date-panel .library-range { align-items: end; gap: 10px; }
.library-date-panel label { display: grid; gap: 8px; color: var(--filter-muted); font-size: 12px; }
.library-date-panel .range-dash { padding-bottom: 10px; color: var(--filter-muted); }
.library-date-panel input, .library-more-panel select { min-width: 0; height: 38px; padding: 6px 8px; border: 1px solid var(--filter-line); border-radius: 4px; background: #fff; color: var(--filter-ink); font: 12px "Microsoft YaHei", sans-serif; }
.library-date-panel .text-button { display: block; margin-top: 12px; color: #234338; font-size: 12px; }
.library-more-panel { width: 330px; }
.library-more-panel .library-sort-label { justify-content: space-between; font-size: 12px; color: var(--filter-muted); }
.library-more-panel .material-tags-row { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--filter-line); }
.library-more-panel .filter-row-label { display: block; padding: 0; font-size: 12px; color: var(--filter-muted); }
.library-more-panel .tag-tools { margin: 8px 0 12px; }
.library-more-panel .tag-tools input { font-size: 12px; color: var(--filter-ink); }
.product-first-filters > .range-error { display: block; padding: 10px 0 16px; color: #99472e; font-size: 12px; }
@media (max-width: 760px) {
  .product-first-filters { padding: 16px 16px 0; }
  .product-first-filters .library-filter-heading { gap: 12px; }
  .product-first-filters .library-filter-heading .toolbar-copy { min-width: 0; }
  .picker-cascade { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .product-first-filters #library-category-tags { flex-direction: row; overflow-x: auto; overflow-y: hidden; max-height: none; padding: 0 0 8px; border-right: 0; border-bottom: 1px solid var(--filter-line); }
  .product-first-filters #library-category-tags .filter-tag { padding: 8px; white-space: nowrap; }
  .library-product-panel { position: static; margin-top: 8px; box-shadow: none; }
  .product-first-filters .picker-cascade #library-product-tags { grid-template-columns: minmax(0, 1fr); }
  .library-browse-controls { gap: 0; }
  .library-sort-tabs { width: 100%; gap: 28px; }
  .library-secondary-filters { width: 100%; justify-content: space-between; gap: 12px; border-top: 1px solid #e8ece2; }
  .library-secondary-filters details { position: static; }
  .library-secondary-filters { position: relative; }
  .library-date-panel, .library-more-panel { top: calc(100% + 4px); left: 0; right: auto; width: 100%; max-width: 100%; padding: 14px; }
  .library-date-panel .library-range { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; }
  .library-date-panel input { width: 100%; }
  .library-product-picker > summary { gap: 9px; padding: 0 11px; }
  .library-product-picker .picker-hint { font-size: 10px; white-space: nowrap; }
}
@media (max-width: 900px) {
  .library-overview { grid-template-columns: minmax(0, 1fr); }
  .library-overview > .products-stats { border-left: 0; border-top: 1px solid #e4e5dc; }
  .library-overview > .product-first-filters { padding: 16px 16px 0; }
  .library-overview .product-stat { padding: 14px 16px; }
  .library-overview .product-stat strong { font-size: 25px; }
}
@media (pointer: coarse) {
  .product-first-filters :is(button, summary) { min-height: 44px; }
  .product-first-filters :is(input, select) { font-size: 16px; }
}