/* ── 全局素材库：管理页 + 浮层小窗 ─────────── */
    .library-view .sv-spacer { flex: 1; }
    .library-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 14px;
      margin-top: 6px;
    }
    .library-empty {
      grid-column: 1 / -1;
      padding: 40px 10px;
      text-align: center;
      color: var(--fg-muted);
      font-size: var(--fs-14);
      border: 1px dashed var(--border);
      border-radius: 12px;
      background: var(--panel);
    }
    .lib-card {
      position: relative;
      display: flex;
      flex-direction: column;
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
    }
    .lib-card:hover {
      border-color: var(--border-strong);
      transform: translateY(-1px);
      box-shadow: var(--shadow-sm);
    }
    .lib-thumb {
      position: relative;
      aspect-ratio: 4 / 3;
      background: var(--bg-soft);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    .lib-thumb.clickable {
      cursor: zoom-in;
    }
    .lib-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .lib-thumb .lt-ext {
      font-size: var(--fs-11);
      font-weight: 700;
      color: var(--fg-muted);
      letter-spacing: 0.5px;
      padding: 6px 10px;
      border-radius: 6px;
      background: var(--panel);
      border: 1px solid var(--border);
    }
    .lib-thumb .lt-play {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(0,0,0,0.55);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: var(--fs-16);
      pointer-events: none;
    }
    .lib-kind-badge {
      position: absolute;
      top: 6px;
      left: 6px;
      padding: 2px 7px;
      border-radius: 5px;
      font-size: var(--fs-10);
      font-weight: 600;
      letter-spacing: 0.4px;
      text-transform: uppercase;
      background: rgba(0,0,0,0.55);
      color: #fff;
    }
    .lib-meta {
      padding: 8px 10px 10px;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .lib-name {
      font-size: var(--fs-13);
      color: var(--fg);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .lib-sub {
      font-size: var(--fs-11);
      color: var(--fg-muted);
    }
    .lib-actions {
      display: flex;
      gap: 6px;
      padding: 0 10px 10px;
    }
    .lib-actions button {
      flex: 1;
      padding: 6px 8px;
      font-size: var(--fs-12);
      border-radius: 7px;
      border: 1px solid var(--border);
      background: var(--bg);
      color: var(--fg);
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s;
    }
    .lib-actions button.icon-only {
      flex: 0 0 38px;
      padding: 6px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .lib-actions button.icon-only .ico,
    .lib-actions button.icon-only .ico svg {
      width: 16px;
      height: 16px;
    }
    .lib-actions button:hover {
      background: var(--bg-soft);
      border-color: var(--border-strong);
    }
    .lib-actions button.danger {
      color: #dc2626;
    }
    .lib-actions button.danger:hover {
      background: color-mix(in srgb, #dc2626 12%, transparent);
      border-color: color-mix(in srgb, #dc2626 40%, var(--border));
    }
    [data-theme="dark"] .lib-actions button.danger:hover {
      background: color-mix(in srgb, #f87171 14%, transparent);
      border-color: color-mix(in srgb, #f87171 40%, var(--border));
      color: #fca5a5;
    }
    /* 把"上传"按钮做成一张占位卡，和素材卡混排；只在管理页 / 小窗头部都复用 */
    .lib-upload-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      aspect-ratio: 4 / 3;
      border: 1.5px dashed var(--border-strong);
      border-radius: 12px;
      background: var(--panel);
      color: var(--fg-dim);
      font-size: var(--fs-13);
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
    }
    .lib-upload-card:hover {
      background: var(--bg-soft);
      border-color: var(--brand-deep, var(--fg));
      color: var(--fg);
    }
    .lib-upload-card .luc-plus {
      font-size: var(--fs-28);
      line-height: 1;
      font-weight: 300;
    }
    .lib-upload-card.uploading {
      opacity: 0.7;
      cursor: progress;
    }

    /* ── 素材标签 chips (卡片上) ───────────────────── */
    .lib-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      padding: 0 10px 8px;
      min-height: 24px;
    }
    .lib-tags:empty {
      padding: 0;
      min-height: 0;
    }
    .lib-tag {
      font-size: var(--fs-11);
      line-height: 1;
      padding: 3px 7px;
      border-radius: 999px;
      background: var(--bg-soft);
      color: var(--fg-soft);
      border: 1px solid var(--border);
      letter-spacing: var(--ls-normal);
      font-weight: var(--fw-medium);
      white-space: nowrap;
    }
    .lib-tag.ai::before {
      content: "AI·";
      color: var(--brand-deep);
      font-weight: var(--fw-semibold);
      margin-right: 1px;
      opacity: 0.7;
    }
    .lib-tag-more {
      font-size: var(--fs-11);
      color: var(--fg-dim);
      padding: 3px 4px;
    }

    /* 「打标」按钮 */
    .lib-actions button.tag-btn {
      color: var(--brand-deep);
    }
    .lib-actions button.tag-btn:hover {
      background: var(--accent-soft);
      border-color: var(--border-strong);
    }

    /* ── 标签筛选栏（素材库管理页顶部） ───────────── */
    .lib-filter-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 0 6px;
      border-bottom: 1px solid var(--divider);
      margin-bottom: 16px;
      flex-wrap: wrap;
    }
    .lib-filter-bar .lfb-label {
      font-size: var(--fs-11);
      color: var(--fg-dim);
      font-weight: var(--fw-semibold);
      letter-spacing: var(--ls-uppercase);
      text-transform: uppercase;
      padding-right: 4px;
    }
    .lib-filter-bar .lfb-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      flex: 1;
    }
    .lib-filter-chip {
      font-family: inherit;
      font-size: var(--fs-12);
      padding: 4px 10px;
      border-radius: 999px;
      background: var(--panel);
      color: var(--fg-soft);
      border: 1px solid var(--border);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: all 0.12s;
      white-space: nowrap;
    }
    .lib-filter-chip:hover {
      border-color: var(--border-strong);
      color: var(--fg);
    }
    .lib-filter-chip.active {
      background: var(--ink);
      color: var(--panel);
      border-color: var(--ink);
    }
    [data-theme="dark"] .lib-filter-chip.active { color: #101014; }
    .lib-filter-chip .lfc-count {
      font-size: var(--fs-10);
      opacity: 0.7;
      font-variant-numeric: tabular-nums;
    }
    .lib-filter-chip.untagged {
      border-style: dashed;
      color: var(--fg-dim);
    }
    .lib-filter-chip.clear {
      border: none;
      background: transparent;
      color: var(--fg-dim);
      padding: 4px 8px;
    }
    .lib-filter-chip.clear:hover { color: var(--fg); background: var(--bg-soft); }

    /* ── 打标弹窗 ──────────────────────── */
    .tag-modal {
      max-width: 480px;
      width: 100%;
      height: auto;
      max-height: min(620px, 88vh);
    }
    .tag-modal .tm-body {
      padding: 16px 22px 18px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .tag-modal .tm-preview {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px;
      background: var(--bg-soft);
      border-radius: 10px;
      border: 1px solid var(--border);
    }
    .tag-modal .tm-preview img {
      width: 64px;
      height: 64px;
      object-fit: cover;
      border-radius: 8px;
      flex-shrink: 0;
      background: var(--panel);
    }
    .tag-modal .tm-preview .tm-meta {
      flex: 1;
      min-width: 0;
    }
    .tag-modal .tm-preview .tm-name {
      font-size: var(--fs-13);
      font-weight: var(--fw-semibold);
      color: var(--fg);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .tag-modal .tm-preview .tm-sub {
      font-size: var(--fs-11);
      color: var(--fg-dim);
      margin-top: 2px;
    }
    .tag-modal .tm-section-label {
      font-size: var(--fs-11);
      font-weight: var(--fw-semibold);
      letter-spacing: var(--ls-uppercase);
      text-transform: uppercase;
      color: var(--fg-dim);
    }
    .tag-modal .tm-tag-editor {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding: 8px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--bg);
      min-height: 56px;
      align-content: flex-start;
    }
    .tag-modal .tm-tag-editor:focus-within {
      border-color: var(--brand-deep);
      box-shadow: 0 0 0 3px var(--accent-soft);
    }
    .tag-modal .tm-tag {
      font-size: var(--fs-12);
      padding: 3px 4px 3px 9px;
      border-radius: 999px;
      background: var(--panel);
      color: var(--fg);
      border: 1px solid var(--border);
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .tag-modal .tm-tag.ai {
      background: var(--accent-soft);
      border-color: transparent;
      color: var(--brand-deep);
    }
    .tag-modal .tm-tag-x {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: none;
      background: transparent;
      color: var(--fg-dim);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: var(--fs-13);
      line-height: 1;
    }
    .tag-modal .tm-tag-x:hover {
      background: var(--bg-soft);
      color: var(--err);
    }
    .tag-modal .tm-tag-input {
      flex: 1;
      min-width: 100px;
      border: none;
      outline: none;
      background: transparent;
      color: var(--fg);
      font-family: inherit;
      font-size: var(--fs-13);
      padding: 4px 6px;
    }
    .tag-modal .tm-suggest {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
    }
    .tag-modal .tm-suggest .tm-sugg {
      font-size: var(--fs-11);
      padding: 3px 8px;
      border-radius: 999px;
      background: transparent;
      border: 1px dashed var(--border-strong);
      color: var(--fg-dim);
      cursor: pointer;
    }
    .tag-modal .tm-suggest .tm-sugg:hover {
      background: var(--bg-soft);
      color: var(--fg);
      border-style: solid;
    }
    .tag-modal textarea.tm-desc {
      width: 100%;
      min-height: 72px;
      max-height: 180px;
      padding: 10px 12px;
      border: 1px solid var(--border);
      border-radius: 10px;
      font-family: inherit;
      font-size: var(--fs-13);
      line-height: var(--lh-base);
      color: var(--fg);
      background: var(--bg);
      resize: vertical;
      outline: none;
    }
    .tag-modal textarea.tm-desc:focus {
      border-color: var(--brand-deep);
      box-shadow: 0 0 0 3px var(--accent-soft);
    }
    .tag-modal .tm-hint {
      font-size: var(--fs-11);
      color: var(--fg-dim);
    }

    /* Skill 复制按钮 - 弱调按钮 */
    .skill-copy-btn {
      font-family: inherit;
      font-size: var(--fs-12);
      font-weight: var(--fw-medium);
      padding: 6px 12px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--panel);
      color: var(--fg-soft);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: all 0.15s;
    }
    .skill-copy-btn:hover {
      border-color: var(--brand-deep);
      color: var(--brand-deep);
      background: var(--accent-soft);
    }
    .skill-copy-btn .sc-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--mint-deep);
    }
    .skill-copy-btn.copied { color: var(--ok); border-color: var(--ok); }

    /* 浮层小窗 picker：挂在 .composer 右下方的按钮上方 */
    .library-popover {
      position: absolute;
      right: 8px;
      bottom: calc(100% + 10px);
      z-index: 60;
      width: min(560px, calc(100vw - 24px));
      max-height: min(520px, calc(100vh - 160px));
      display: flex;
      flex-direction: column;
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 14px;
      box-shadow: var(--shadow-md);
      overflow: hidden;
      animation: fade-in 0.15s ease;
    }
    .lp-head {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-bottom: 1px solid var(--border);
      background: var(--bg);
    }
    .lp-head .src-tabs { flex: 1; }
    .lp-head .lp-close {
      width: 28px;
      height: 28px;
      border: none;
      background: transparent;
      color: var(--fg-muted);
      border-radius: 8px;
      cursor: pointer;
      font-size: var(--fs-18);
      line-height: 1;
    }
    .lp-head .lp-close:hover { background: var(--bg-soft); color: var(--fg); }
    .lp-body {
      flex: 1;
      overflow-y: auto;
      padding: 12px;
    }
    .lp-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
      gap: 10px;
    }
    .lp-item {
      position: relative;
      aspect-ratio: 1 / 1;
      border-radius: 10px;
      border: 1px solid var(--border);
      overflow: hidden;
      background: var(--bg-soft);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: border-color 0.15s, transform 0.15s;
    }
    .lp-item:hover {
      border-color: var(--border-strong);
      transform: scale(1.02);
    }
    .lp-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .lp-item .lt-play {
      position: absolute; left: 50%; top: 50%;
      transform: translate(-50%, -50%);
      width: 28px; height: 28px; border-radius: 50%;
      background: rgba(0,0,0,0.55); color: #fff;
      display: flex; align-items: center; justify-content: center;
      font-size: var(--fs-12); pointer-events: none;
    }
    .lp-item .lp-name {
      position: absolute;
      left: 0; right: 0; bottom: 0;
      padding: 4px 6px;
      font-size: var(--fs-11);
      color: #fff;
      background: linear-gradient(to top, rgba(0,0,0,0.72), rgba(0,0,0,0));
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .lp-item.lib-upload-card {
      aspect-ratio: 1 / 1;
      font-size: var(--fs-12);
    }
    .lp-item.lib-upload-card .luc-plus { font-size: var(--fs-22); }
    .lp-empty {
      grid-column: 1 / -1;
      padding: 24px 10px;
      text-align: center;
      color: var(--fg-muted);
      font-size: var(--fs-13);
    }

    /* composer-actions 里素材库触发按钮：和 uploadBtn 同一行 */
    .icon-btn.library-trigger.active,
    .icon-btn.products-trigger.active {
      background: var(--bg-soft);
      color: var(--fg);
    }

    /* 商品库 picker 浮层：复用 .library-popover 容器，只改内部网格/卡片 */
    .products-popover .lp-body { padding: 10px; }
    .pp-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 10px;
    }
    .pp-card {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--bg-soft);
      cursor: pointer;
      transition: border-color 0.15s, transform 0.15s;
      min-width: 0;
    }
    .pp-card:hover {
      border-color: var(--border-strong);
      transform: translateY(-1px);
    }
    .pp-card .pp-thumb {
      width: 48px; height: 48px;
      border-radius: 8px;
      overflow: hidden;
      flex: 0 0 48px;
      background: var(--bg);
      display: flex; align-items: center; justify-content: center;
      color: var(--fg-muted);
      font-size: var(--fs-20);
    }
    .pp-card .pp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .pp-card .pp-meta { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
    .pp-card .pp-name {
      font-size: var(--fs-13);
      color: var(--fg);
      font-weight: 500;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .pp-card .pp-sub {
      font-size: var(--fs-12);
      color: var(--fg-muted);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    @media (max-width: 720px) {
      .library-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
      .library-popover { width: calc(100vw - 16px); max-height: calc(100vh - 120px); }
      .lp-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
      .pp-grid { grid-template-columns: 1fr; }
    }