/* 图片隐私脱敏器样式 —— 基于 --exif-stripper-* 变量体系，沿用站点暗色适配 */
#exif-stripper-app {
  --exif-stripper-radius: 10px;
  --exif-stripper-border: var(--color-border-secondary, #e2e8f0);
  --exif-stripper-bg: var(--color-bg, #ffffff);
  --exif-stripper-fg: var(--color-text, #1a202c);
  --exif-stripper-muted: var(--color-text-secondary, #718096);
  --exif-stripper-accent: #2563eb;
  --exif-stripper-ok: #15803d;
  --exif-stripper-err: #dc2626;
  --exif-stripper-warn: #b45309;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 860px;
  margin: 24px auto 48px;
  font-size: 14px;
  color: var(--exif-stripper-fg);
}
html[mode=dark] #exif-stripper-app {
  --exif-stripper-border: #334155;
  --exif-stripper-bg: #0f172a;
  --exif-stripper-fg: #e2e8f0;
  --exif-stripper-muted: #94a3b8;
  --exif-stripper-accent: #60a5fa;
  --exif-stripper-ok: #34d399;
  --exif-stripper-err: #f87171;
  --exif-stripper-warn: #fbbf24;
}

#exif-stripper-app * { box-sizing: border-box; }

#exif-stripper-app .exif-stripper-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 46px 16px;
  border: 2px dashed var(--exif-stripper-border);
  border-radius: var(--exif-stripper-radius);
  background: var(--exif-stripper-bg);
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, background .15s;
}
#exif-stripper-app .exif-stripper-drop:hover,
#exif-stripper-app .exif-stripper-drop:focus-visible,
#exif-stripper-app .exif-stripper-drop.exif-stripper-drop-active {
  border-color: var(--exif-stripper-accent);
  background: rgba(37, 99, 235, .06);
}
#exif-stripper-app .exif-stripper-drop i { font-size: 26px; color: var(--exif-stripper-accent); }
#exif-stripper-app .exif-stripper-drop-title { margin: 0; font-size: 15px; }
#exif-stripper-app .exif-stripper-drop-sub { margin: 0; font-size: 12.5px; color: var(--exif-stripper-muted); }

#exif-stripper-app .exif-stripper-info {
  padding: 10px 14px;
  border: 1px solid var(--exif-stripper-border);
  border-radius: var(--exif-stripper-radius);
  background: var(--exif-stripper-bg);
  font-size: 13px;
  word-break: break-all;
}
#exif-stripper-app .exif-stripper-info[hidden] { display: none; }

#exif-stripper-app .exif-stripper-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
#exif-stripper-app .exif-stripper-actions[hidden] { display: none; }

#exif-stripper-app .exif-stripper-btn {
  padding: 7px 14px;
  font-size: 13px;
  color: var(--exif-stripper-fg);
  background: transparent;
  border: 1px solid var(--exif-stripper-border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
#exif-stripper-app .exif-stripper-btn:hover { border-color: var(--exif-stripper-accent); color: var(--exif-stripper-accent); }
#exif-stripper-app .exif-stripper-btn:disabled { opacity: .45; cursor: not-allowed; }
#exif-stripper-app .exif-stripper-btn-primary {
  background: var(--exif-stripper-accent);
  border-color: var(--exif-stripper-accent);
  color: #fff;
}
#exif-stripper-app .exif-stripper-btn-primary:hover { opacity: .88; color: #fff; }

#exif-stripper-app .exif-stripper-status {
  font-size: 12px;
  color: var(--exif-stripper-muted);
  padding: 0 2px;
}
#exif-stripper-app .exif-stripper-status.exif-stripper-status-err {
  color: var(--exif-stripper-err);
  font-weight: 600;
}
#exif-stripper-app .exif-stripper-status[aria-hidden="true"] { display: none; }

#exif-stripper-app .exif-stripper-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 12px 14px;
  border: 1px solid var(--exif-stripper-border);
  border-left: 3px solid var(--exif-stripper-ok);
  border-radius: var(--exif-stripper-radius);
  background: var(--exif-stripper-bg);
  font-size: 13.5px;
}
#exif-stripper-app .exif-stripper-stats[hidden] { display: none; }
#exif-stripper-app .exif-stripper-stat b { color: var(--exif-stripper-ok); font-weight: 600; }
#exif-stripper-app .exif-stripper-stat span { color: var(--exif-stripper-muted); }

#exif-stripper-app .exif-stripper-sec h3 { margin: 18px 0 10px; font-size: 15px; }
#exif-stripper-app .exif-stripper-sec[hidden] { display: none; }

#exif-stripper-app .exif-stripper-table-wrap {
  overflow: auto;
  max-height: 420px;
  border: 1px solid var(--exif-stripper-border);
  border-radius: var(--exif-stripper-radius);
}
#exif-stripper-app .exif-stripper-table { width: 100%; border-collapse: collapse; font-size: 13px; }
#exif-stripper-app .exif-stripper-table th,
#exif-stripper-app .exif-stripper-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--exif-stripper-border);
  vertical-align: top;
}
#exif-stripper-app .exif-stripper-table th {
  position: sticky;
  top: 0;
  background: var(--exif-stripper-bg);
  color: var(--exif-stripper-muted);
  font-weight: 600;
  z-index: 1;
}
#exif-stripper-app .exif-stripper-table tr:last-child td { border-bottom: none; }
#exif-stripper-app .exif-stripper-td-group { white-space: nowrap; color: var(--exif-stripper-muted); }
#exif-stripper-app .exif-stripper-td-group.exif-stripper-td-gps { color: var(--exif-stripper-warn); }
#exif-stripper-app .exif-stripper-td-group.exif-stripper-td-exif { color: var(--exif-stripper-accent); }
#exif-stripper-app .exif-stripper-td-val { word-break: break-word; }

@media (max-width: 640px) {
  #exif-stripper-app { margin: 16px auto 32px; }
}