/* ========== 查询详情 key-value ========== */

.kv-list {

  display: flex;

  flex-direction: column;

  gap: 6px;

  margin-top: 6px;

}

.kv {

  display: flex;

  gap: 12px;

  font-size: 0.86rem;

  line-height: 1.5;

  padding: 6px 0;

  border-bottom: 1px dashed var(--outline-variant);

}

.kv:last-child {

  border-bottom: none;

}

.kv-k {

  color: var(--on-surface-variant);

  flex: 0 0 84px;

}

.kv-v {

  flex: 1;

  color: var(--on-surface);

  word-break: break-word;

}

/* ========== UPLOAD ========== */

.upload-zone {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 8px;

  padding: 32px 20px;

  border: 2px dashed var(--outline);

  border-radius: var(--radius-md);

  text-align: center;

  cursor: pointer;

  transition: all var(--dur-fast) var(--ease);

  color: var(--on-surface-variant);

  margin-bottom: 12px;

}

.upload-zone:hover {

  border-color: var(--primary);

  background: rgba(180, 198, 255, 0.03);

}

.upload-zone .mdi {

  font-size: 2rem;

  color: var(--primary);

}

.upload-preview {

  display: flex;

  gap: 8px;

  flex-wrap: wrap;

  margin-bottom: 12px;

}

.upload-preview img {

  max-width: 120px;

  max-height: 80px;

  border-radius: var(--radius-sm);

  border: 1px solid var(--outline);

}

/* 多图累积预览：缩略图 + 删除按钮 */

.up-thumb {

  position: relative;

  display: inline-block;

}

.up-thumb img {

  max-width: 120px;

  max-height: 80px;

  border-radius: var(--radius-sm);

  border: 1px solid var(--outline);

  display: block;

}

.up-del {

  position: absolute;

  top: -6px;

  right: -6px;

  width: 18px;

  height: 18px;

  line-height: 16px;

  text-align: center;

  border-radius: 50%;

  background: #e5484d;

  color: #fff;

  font-size: 12px;

  cursor: pointer;

  border: 1px solid #fff;

  box-shadow: 0 1px 3px rgba(0,0,0,.3);

}

.up-del:hover {

  background: #c01818;

}

/* OCR 折叠盒：战绩截图识别区，识别完成自动折叠 */

.ocr-box {

  border: 1px solid var(--outline);

  border-radius: var(--radius-md);

  overflow: hidden;

  background: rgba(255, 255, 255, 0.02);

}

.ocr-box-head {

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 10px 14px;

  cursor: pointer;

  user-select: none;

  font-weight: 600;

  font-size: 0.9rem;

  background: rgba(180, 198, 255, 0.04);

}

.ocr-box-head .mdi:first-child {

  color: var(--primary);

}

.ocr-box-head .ocr-chevron {

  margin-left: auto;

  transition: transform var(--dur-fast) var(--ease);

}

.ocr-box.collapsed .ocr-chevron {

  transform: rotate(-90deg);

}

.ocr-box-body {

  padding: 14px;

  border-top: 1px solid var(--outline);

}

.ocr-box.collapsed .ocr-box-body {

  display: none;

}

/* OCR 候选时间按钮：选中反馈 */

.cand-btn.cand-btn-selected {

  background: var(--primary);

  color: #fff;

  border-color: var(--primary);

}

.cand-btn.cand-btn-selected:hover {

  background: var(--primary);

}

.cand-selected-note {

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 0.85rem;

}

/* ========== TABLE ========== */

.data-table {

  width: 100%;

  border-collapse: collapse;

  table-layout: fixed;

  font-size: 0.85rem;

}

.data-table th {

  text-align: left;

  padding: 10px 12px;

  font-weight: 500;

  color: var(--on-surface-variant);

  border-bottom: 1px solid var(--outline-variant);

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}

.data-table td {

  padding: 10px 12px;

  border-bottom: 1px solid var(--outline-variant);

  vertical-align: middle;

  overflow: hidden;

  text-overflow: ellipsis;

}

.data-table tr:hover {

  background: rgba(255, 255, 255, 0.03);

}

/* 账号类型标签与下拉（super 用户管理） */

.role-badge {

  display: inline-block;

  padding: 2px 8px;

  border-radius: 999px;

  font-size: 0.78rem;

  font-weight: 600;

}

.role-user {

  background: var(--surface-variant);

  color: var(--text-secondary);

}

.role-admin {

  background: rgba(245, 158, 11, 0.15);

  color: #f59e0b;

}

.role-super {

  background: rgba(220, 38, 38, 0.15);

  color: #dc2626;

}

.user-role-sel {

  width: auto;

  padding: 4px 8px;

}

.table-wrap {

  overflow-x: auto;

  border-radius: var(--radius-md);

  border: 1px solid var(--outline-variant);

}

/* ========== BADGES ========== */

.badge {

  display: inline-flex;

  align-items: center;

  gap: 4px;

  padding: 2px 10px;

  border-radius: var(--radius-full);

  font-size: 0.75rem;

  font-weight: 500;

}

.badge-success {

  background: var(--success-container);

  color: var(--success);

}

.badge-warning {

  background: var(--tertiary-container);

  color: var(--tertiary);

}

.badge-info {

  background: var(--info-container);

  color: var(--info);

}

.badge-error {

  background: var(--error-container);

  color: var(--error);

}

.badge-neutral {

  background: var(--surface-container-high);

  color: var(--on-surface-variant);

}

.badge-purple {

  background: #2d1b4e;

  color: #d4b5ff;

}

.weight-badge {

  font-family: "Roboto Mono", monospace;

  font-weight: 700;

  font-size: 0.85rem;

}

/* ========== MODAL ========== */

.modal-overlay {

  position: fixed;

  inset: 0;

  background: var(--scrim);

  z-index: 200;

  display: none;

  align-items: center;

  justify-content: center;

  padding: 20px;

  backdrop-filter: blur(4px);

}

.modal-overlay.active {

  display: flex;

  animation: fadeIn var(--dur-mid) var(--ease);

}

.modal {

  background: var(--surface-container);

  border-radius: var(--radius-lg);

  max-width: 560px;

  width: 100%;

  max-height: 85vh;

  overflow-y: auto;

  animation: slideUp var(--dur-mid) var(--ease);

}

@keyframes slideUp {

  from {

    transform: translateY(20px);

    opacity: 0;

  }

  to {

    transform: translateY(0);

    opacity: 1;

  }

}

.modal-header {

  padding: 20px 24px;

  border-bottom: 1px solid var(--outline-variant);

  display: flex;

  align-items: center;

  gap: 12px;

}

.modal-header h3 {

  font-size: 1.1rem;

  font-weight: 500;

}

.modal-body {

  padding: 20px 24px;

}

.modal-footer {

  padding: 16px 24px;

  border-top: 1px solid var(--outline-variant);

  display: flex;

  gap: 8px;

  justify-content: flex-end;

}

/* ========== SNACKBAR ========== */

.snackbar {

  position: fixed;

  bottom: 24px;

  left: 50%;

  transform: translateX(-50%) translateY(80px);

  background: var(--surface-container-highest);

  color: var(--on-surface);

  padding: 12px 20px;

  border-radius: var(--radius-sm);

  font-size: 0.85rem;

  z-index: 300;

  transition:

    transform var(--dur-mid) var(--ease),

    opacity var(--dur-mid) var(--ease);

  opacity: 0;

  display: flex;

  align-items: center;

  gap: 8px;

  box-shadow: var(--elev-3);

  max-width: 90vw;

}

.snackbar.show {

  transform: translateX(-50%) translateY(0);

  opacity: 1;

}

.snackbar .mdi {

  font-size: 1.2rem;

}

.snackbar-success {

  background: var(--success-container);

  color: var(--success);

}

.snackbar-error {

  background: var(--error-container);

  color: var(--error);

}

.snackbar-info {

  background: var(--info-container);

  color: var(--info);

}