/* 业务页 Web 组件：详情分区、设置卡片、候选列表、图片网格等 */

.fade { animation: webFade .18s ease; }
@keyframes webFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.section, .settings-card, .settings-hero {
  margin-bottom: 12px;
  border: 1px solid var(--line, #e6ebf2);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.section-head, .settings-card-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 14px; background: #f8fafc; border-bottom: 1px solid #e6ebf2;
}
.section-name, .settings-card-title { font-weight: 700; font-size: 14px; color: #0f172a; }
.section-badge, .settings-card-note { color: #64748b; font-size: 12px; }
.section-body { padding: 12px 14px; }
.settings-hero { padding: 16px 18px; }
.settings-hero h2 { margin: 0 0 6px; font-size: 18px; }
.settings-hero p { margin: 0; color: #64748b; font-size: 13px; line-height: 1.5; }
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
}
.settings-grid-full, .field.settings-grid-full { grid-column: 1 / -1; }
.settings-actions, .settings-page-actions {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 4px 0 14px;
}
.field-label { display: block; margin-bottom: 6px; color: #64748b; font-size: 12px; font-weight: 600; }
.field-hint { display: block; margin-top: 6px; color: #94a3b8; font-size: 12px; line-height: 1.4; }

.data-table { display: grid; gap: 0; }
.data-row {
  display: grid; grid-template-columns: 140px 1fr; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid #f1f5f9;
}
.data-key { color: #64748b; font-size: 12px; }
.data-key-origin { display: block; color: #94a3b8; font-size: 11px; margin-top: 2px; }
.data-value { color: #0f172a; font-size: 13px; word-break: break-word; }
.data-value.is-mono { font-family: ui-monospace, Consolas, monospace; }
.data-value.is-num { font-variant-numeric: tabular-nums; }

.detail-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; }
.detail-cover img, .detail-cover {
  width: 88px; height: 88px; border-radius: 12px; object-fit: cover; background: #f1f5f9; flex: 0 0 auto;
}
.detail-headline { flex: 1; min-width: 0; }
.detail-title, .detail-title-link { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.35; color: #0f172a; text-decoration: none; }
.detail-sub { margin-top: 6px; color: #64748b; font-size: 12px; }
.detail-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.detail-plain-value { padding: 10px 12px; border-radius: 8px; background: #f8fafc; border: 1px solid #e6ebf2; }

.notice {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; border-radius: 10px; background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412;
}
.notice-mark {
  width: 20px; height: 20px; border-radius: 50%; background: #f97316; color: #fff;
  display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: 0 0 auto;
}

.candidate-list { display: grid; gap: 8px; }
.candidate {
  display: flex; gap: 10px; justify-content: space-between; align-items: center;
  padding: 10px 12px; border: 1px solid #e6ebf2; border-radius: 10px; background: #fff;
}
.candidate-label { font-weight: 650; font-size: 13px; }
.candidate-ids { margin-top: 4px; color: #94a3b8; font-size: 12px; }

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
}
.image-cell {
  position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden;
  border: 1px solid #e6ebf2; background: #f8fafc; cursor: grab;
}
.image-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.image-index, .image-primary {
  position: absolute; left: 6px; top: 6px; padding: 2px 6px; border-radius: 999px;
  background: rgba(15,23,42,.72); color: #fff; font-size: 11px;
}
.image-primary { left: auto; right: 6px; background: #0f766e; }
.image-remove {
  position: absolute; right: 6px; bottom: 6px; width: 24px; height: 24px; border: 0; border-radius: 999px;
  background: rgba(220,38,38,.92); color: #fff; cursor: pointer;
}

.editable-field { display: grid; gap: 6px; }
.editable-field-wide { grid-column: 1 / -1; }
.tag {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
}
.tag-mint { background: #ecfdf5; color: #0f766e; }
.tag-amber { background: #fffbeb; color: #b45309; }

.characteristic-table { width: 100%; border-collapse: collapse; }
.characteristic-table td, .characteristic-row {
  padding: 8px 0; border-bottom: 1px solid #f1f5f9; vertical-align: top;
}
.switch-field, .switch {
  display: flex; gap: 10px; align-items: center;
}

/* token box for extension */
.token-box {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 10px 12px; border-radius: 10px; background: #0f172a; color: #e2e8f0;
}
.token-box code {
  flex: 1; min-width: 180px; word-break: break-all; font-size: 12px;
}

/* workbench empty detail fill */
#detailScroll .empty {
  min-height: 360px; display: grid; place-content: center; place-items: center;
}

/* kill desktop glass gradients leftover */
.glass, .settings-card.glass, .settings-hero.glass, .rise {
  background: #fff !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  border: 1px solid #e6ebf2 !important;
}

@media (max-width: 900px) {
  .settings-grid { grid-template-columns: 1fr; }
  .data-row { grid-template-columns: 1fr; gap: 4px; }
  .detail-head { flex-direction: column; }
}