/* Read-only collection and mutation catalog panels for the customized farm console. */
.collections-ui-panel { display: none; margin-top: 14px; border: 1px solid var(--farm-border, rgba(94, 112, 128, .24)); border-radius: 14px; padding: 16px; color: var(--farm-text, #172b4d); background: var(--farm-surface, #fff); box-shadow: 0 8px 24px rgba(15, 23, 42, .06); }
.collections-ui-active > .nc-console-header, .collections-ui-active > .nc-console-stats { display: none !important; }
.collections-ui-active > .nc-console-body > :not(.collections-ui-panel) { display: none !important; }
.collections-ui-active .collections-ui-panel { display: block; }
.collections-ui-tab { white-space: nowrap; }
.collections-ui-tab.nc-console-tab-active { color: var(--farm-accent, #2864e8); border-color: var(--farm-accent, #2864e8); background: var(--farm-accent-soft, rgba(40, 100, 232, .1)); }
.collections-ui-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.collections-ui-heading h2 { margin: 0; color: var(--farm-text, #172b4d); font-size: 20px; font-weight: 700; }
.collections-ui-heading p { margin: 4px 0 0; color: var(--farm-muted, #64748b); font-size: 12px; }
.collections-ui-back, .collections-ui-refresh { min-height: 34px; padding: 6px 12px; border: 1px solid var(--farm-border, rgba(94,112,128,.24)); border-radius: 8px; color: var(--farm-text, #172b4d); background: var(--farm-surface-elevated, #fff); cursor: pointer; }
.collections-ui-back:hover, .collections-ui-refresh:hover { border-color: var(--farm-accent, #2864e8); color: var(--farm-accent, #2864e8); }
.collections-ui-back:disabled, .collections-ui-refresh:disabled { opacity: .55; cursor: wait; }
.collections-ui-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-bottom: 14px; }
.collections-ui-summary > div { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--farm-border-subtle, rgba(94,112,128,.16)); border-radius: 10px; background: var(--farm-bg-subtle, #eef1f7); }
.collections-ui-summary small { color: var(--farm-muted, #64748b); font-size: 11px; }
.collections-ui-summary strong { color: var(--farm-text, #172b4d); font-size: 20px; font-variant-numeric: tabular-nums; }
.collections-ui-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.collections-ui-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.collections-ui-filter { padding: 6px 9px; border: 1px solid var(--farm-border, rgba(94,112,128,.24)); border-radius: 999px; color: var(--farm-muted, #64748b); background: transparent; font-size: 11px; cursor: pointer; }
.collections-ui-filter.is-active { border-color: var(--farm-accent, #2864e8); color: var(--farm-accent, #2864e8); background: var(--farm-accent-soft, rgba(40,100,232,.1)); }
.collections-ui-filter span { margin-left: 3px; font-variant-numeric: tabular-nums; }
.collections-ui-search { flex: 1 1 180px; min-width: 130px; max-width: 300px; height: 34px; padding: 6px 10px; border: 1px solid var(--farm-border, rgba(94,112,128,.24)); border-radius: 8px; color: var(--farm-text, #172b4d); background: var(--farm-surface, #fff); font-size: 12px; outline: none; }
.collections-ui-search:focus { border-color: var(--farm-accent, #2864e8); box-shadow: 0 0 0 2px var(--farm-accent-soft, rgba(40,100,232,.12)); }
.collections-ui-series { margin: 12px 0; padding: 12px; border: 1px solid var(--farm-border-subtle, rgba(94,112,128,.16)); border-radius: 10px; background: var(--farm-surface-elevated, #fff); }
.collections-ui-series > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.collections-ui-series h3 { margin: 0; color: var(--farm-text, #172b4d); font-size: 15px; font-weight: 700; }
.collections-ui-series p { margin: 3px 0 0; color: var(--farm-muted, #64748b); font-size: 11px; }
.collections-ui-series > header > span { flex: none; color: var(--farm-accent, #2864e8); font-size: 12px; }
.collections-ui-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(118px,1fr)); gap: 8px; }
.collections-ui-item { position: relative; min-width: 0; padding: 10px 7px; border: 1px solid var(--farm-border-subtle, rgba(94,112,128,.16)); border-radius: 9px; background: var(--farm-bg-subtle, #f4f6fb); text-align: center; }
.collections-ui-item.is-active { border-color: color-mix(in srgb, var(--farm-accent, #2864e8) 48%, transparent); }
.collections-ui-image { display: grid; width: 58px; height: 58px; margin: 0 auto 6px; place-items: center; border-radius: 10px; color: var(--farm-muted, #64748b); background: var(--farm-surface, #fff); font-size: 24px; }
.collections-ui-image img { width: 82%; height: 82%; object-fit: contain; }
.collections-ui-item strong { display: block; overflow: hidden; color: var(--farm-text, #172b4d); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.collections-ui-item small { display: block; margin-top: 3px; color: var(--farm-muted, #64748b); font-size: 10px; }
.collections-ui-item em { display: inline-block; margin-top: 5px; padding: 1px 6px; border-radius: 999px; color: var(--farm-accent, #2864e8); background: var(--farm-accent-soft, rgba(40,100,232,.1)); font-size: 9px; font-style: normal; }
.collections-ui-rules, .collections-ui-items { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.collections-ui-rules > span, .collections-ui-items > span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid var(--farm-border-subtle, rgba(94,112,128,.16)); border-radius: 7px; color: var(--farm-muted, #64748b); background: var(--farm-bg-subtle, #f4f6fb); font-size: 10px; }
.collections-ui-items img { width: 22px; height: 22px; object-fit: contain; }
.collections-ui-state, .collections-ui-error { padding: 26px 12px; color: var(--farm-muted, #64748b); text-align: center; font-size: 13px; }
.collections-ui-error { color: #b42318; }

/* 珍藏室 */
.collections-ui-room { margin: 0 0 14px; padding: 12px; border: 1px solid var(--farm-border-subtle, rgba(94,112,128,.16)); border-radius: 10px; background: var(--farm-bg-subtle, #eef1f7); }
.collections-ui-room > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.collections-ui-room h3 { margin: 0; color: var(--farm-text, #172b4d); font-size: 15px; font-weight: 700; }
.collections-ui-room > header > span { flex: none; color: var(--farm-accent, #2864e8); font-size: 11px; font-variant-numeric: tabular-nums; }
.collections-ui-room-grid { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 1.6fr); gap: 10px; align-items: stretch; }
.collections-ui-room-showcase { display: flex; align-items: center; padding: 12px; border: 1px solid color-mix(in srgb, var(--farm-accent, #2864e8) 36%, transparent); border-radius: 10px; background: var(--farm-surface, #fff); }
.collections-ui-room-display { display: flex; align-items: center; gap: 12px; min-width: 0; }
.collections-ui-room-display .collections-ui-image { width: 64px; height: 64px; margin: 0; flex: none; border: 1px dashed var(--farm-border, rgba(94,112,128,.24)); }
.collections-ui-room-display strong { display: block; overflow: hidden; color: var(--farm-text, #172b4d); font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.collections-ui-room-display small { display: block; margin-top: 3px; color: var(--farm-muted, #64748b); font-size: 11px; }
.collections-ui-room-display em { display: inline-block; margin-top: 5px; padding: 1px 6px; border-radius: 999px; color: #b42318; background: rgba(180, 35, 24, .08); font-size: 9px; font-style: normal; }
.collections-ui-room-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; color: var(--farm-muted, #64748b); font-size: 26px; }
.collections-ui-room-empty p { margin: 0; font-size: 11px; }
.collections-ui-pedestals { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.collections-ui-pedestal { position: relative; min-width: 0; margin: 0; padding: 9px 6px; border: 1px solid var(--farm-border-subtle, rgba(94,112,128,.16)); border-radius: 9px; background: var(--farm-surface, #fff); text-align: center; }
.collections-ui-pedestal .collections-ui-image { width: 52px; height: 52px; font-size: 20px; }
.collections-ui-pedestal figcaption { overflow: hidden; color: var(--farm-text, #172b4d); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.collections-ui-pedestal em, .collections-ui-pedestal > span { display: inline-block; margin-top: 4px; padding: 1px 6px; border-radius: 999px; font-size: 9px; font-style: normal; }
.collections-ui-pedestal.is-owned { border-color: color-mix(in srgb, var(--farm-accent, #2864e8) 48%, transparent); }
.collections-ui-pedestal em { color: var(--farm-accent, #2864e8); background: var(--farm-accent-soft, rgba(40,100,232,.1)); }
.collections-ui-pedestal > span { color: var(--farm-muted, #64748b); background: var(--farm-bg-subtle, #f4f6fb); }
.collections-ui-pedestal:not(.is-owned) .collections-ui-image img { filter: grayscale(1); opacity: .45; }

@media (max-width: 640px) {
  .collections-ui-panel { padding: 12px; }
  .collections-ui-summary > div { padding: 9px; }
  .collections-ui-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .collections-ui-heading { align-items: center; }
  .collections-ui-heading h2 { font-size: 18px; }
  .collections-ui-tools { align-items: stretch; }
  .collections-ui-filters { width: 100%; }
  .collections-ui-search { max-width: none; }
  .collections-ui-room-grid { grid-template-columns: minmax(0, 1fr); }
  .collections-ui-pedestals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* r5：详情弹窗 / 评分里程碑 / 操作反馈 */
.collections-ui-item[data-detail-item] { cursor: pointer; }
.collections-ui-item[data-detail-item]:hover { border-color: color-mix(in srgb, var(--farm-accent, #2864e8) 40%, transparent); }
.collections-ui-toast { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; padding: 8px 12px; border-radius: 8px; font-size: 12px; }
.collections-ui-toast.is-ok { color: #067647; background: rgba(6, 148, 96, .1); }
.collections-ui-toast.is-error { color: #b42318; background: rgba(180, 35, 24, .08); }
.collections-ui-toast button { border: 0; background: none; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; }
.collections-ui-milestones { margin: 0 0 14px; padding: 12px; border: 1px solid var(--farm-border-subtle, rgba(94,112,128,.16)); border-radius: 10px; background: var(--farm-bg-subtle, #eef1f7); }
.collections-ui-milestones > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.collections-ui-milestones h3 { margin: 0; color: var(--farm-text, #172b4d); font-size: 15px; font-weight: 700; }
.collections-ui-milestones > header > span { flex: none; color: var(--farm-muted, #64748b); font-size: 11px; }
.collections-ui-milestones ul { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.collections-ui-milestone { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--farm-border-subtle, rgba(94,112,128,.16)); border-radius: 9px; background: var(--farm-surface, #fff); }
.collections-ui-milestone-score { display: flex; flex-direction: column; align-items: center; flex: none; min-width: 64px; }
.collections-ui-milestone-score b { color: var(--farm-text, #172b4d); font-size: 14px; font-variant-numeric: tabular-nums; }
.collections-ui-milestone-score small { color: var(--farm-muted, #64748b); font-size: 10px; }
.collections-ui-milestone-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.collections-ui-milestone-body > strong { color: var(--farm-muted, #64748b); font-size: 11px; }
.collections-ui-milestone.is-reached { border-color: color-mix(in srgb, var(--farm-accent, #2864e8) 40%, transparent); }
.collections-ui-milestone.is-reached .collections-ui-milestone-body > strong { color: var(--farm-accent, #2864e8); }
.collections-ui-milestone.is-claimed { opacity: .6; }
.collections-ui-milestone-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.collections-ui-milestone-tags > span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border: 1px solid var(--farm-border-subtle, rgba(94,112,128,.16)); border-radius: 7px; color: var(--farm-muted, #64748b); background: var(--farm-bg-subtle, #f4f6fb); font-size: 10px; }
.collections-ui-milestone-tags img { width: 18px; height: 18px; object-fit: contain; }
.collections-ui-claim { flex: none; min-height: 30px; padding: 4px 12px; border: 0; border-radius: 7px; color: #fff; background: var(--farm-accent, #2864e8); cursor: pointer; font-size: 12px; }
.collections-ui-claim:disabled { opacity: .55; cursor: wait; }
.collections-ui-overlay { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(15, 23, 42, .45); backdrop-filter: blur(2px); }
.collections-ui-modal { display: flex; flex-direction: column; width: min(440px, 100%); max-height: 86vh; overflow: auto; border: 1px solid var(--farm-border, rgba(94,112,128,.24)); border-radius: 14px; background: var(--farm-surface, #fff); box-shadow: 0 18px 48px rgba(15, 23, 42, .22); }
.collections-ui-modal-sm { width: min(360px, 100%); }
.collections-ui-modal > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 14px 16px 10px; }
.collections-ui-modal-series { color: var(--farm-accent, #2864e8); font-size: 11px; }
.collections-ui-modal h3 { margin: 2px 0 0; color: var(--farm-text, #172b4d); font-size: 18px; font-weight: 700; }
.collections-ui-modal > header p { margin: 4px 0 0; color: var(--farm-muted, #64748b); font-size: 12px; }
.collections-ui-modal-close { border: 0; background: none; color: var(--farm-muted, #64748b); cursor: pointer; font-size: 22px; line-height: 1; }
.collections-ui-modal-body { display: flex; flex-direction: column; gap: 12px; padding: 4px 16px 12px; }
.collections-ui-modal-hero { display: flex; align-items: center; gap: 14px; }
.collections-ui-modal-hero .collections-ui-image { width: 84px; height: 84px; margin: 0; flex: none; }
.collections-ui-modal-hero p { margin: 0; color: var(--farm-muted, #64748b); font-size: 12px; line-height: 1.5; }
.collections-ui-modal-block > strong { display: block; margin-bottom: 6px; color: var(--farm-text, #172b4d); font-size: 12px; }
.collections-ui-modal-requirements { margin: 0; padding-left: 18px; color: var(--farm-muted, #64748b); font-size: 11px; line-height: 1.7; }
.collections-ui-modal-warn { padding: 7px 10px; border-radius: 8px; color: #b42318; background: rgba(180, 35, 24, .08); font-size: 11px; }
.collections-ui-modal-costs { color: var(--farm-muted, #64748b); font-size: 12px; }
.collections-ui-modal > footer { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px 14px; }
.collections-ui-modal-btn { min-height: 34px; padding: 6px 14px; border: 1px solid var(--farm-border, rgba(94,112,128,.24)); border-radius: 8px; color: var(--farm-text, #172b4d); background: var(--farm-surface-elevated, #fff); cursor: pointer; font-size: 12px; }
.collections-ui-modal-btn-primary { border-color: var(--farm-accent, #2864e8); color: #fff; background: var(--farm-accent, #2864e8); }
.collections-ui-modal-btn:disabled { opacity: .55; cursor: wait; }
@media (max-width: 640px) { .collections-ui-modal-hero { flex-direction: column; align-items: flex-start; } .collections-ui-milestone { flex-wrap: wrap; } }

/* r6：藏品图自动适配白色四方圆角框 */
.collections-ui-grid .collections-ui-image { width: 100%; max-width: 124px; height: auto; aspect-ratio: 1; }
.collections-ui-image img { width: 100%; height: 100%; object-fit: contain; border-radius: 9px; }

/* r6b：心愿角标（服务端 wished 字段，只读展示） */
.collections-ui-item em.collections-ui-wish { color: #b15c00; background: rgba(255,158,44,.14); margin-left: 4px; }