.container { max-width: 880px; margin: 0 auto; padding: 16px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Microsoft Yahei", sans-serif; }
.header { text-align: center; margin-bottom: 12px; }
.header h1 { margin: 8px 0; font-size: 22px; }
.desc { color: #666; font-size: 14px; }
.card { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 12px; margin: 12px 0; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.uploader { display: flex; gap: 8px; align-items: center; }
#fileInput { flex: 1; }
#analyzeBtn { padding: 8px 12px; border-radius: 8px; border: 1px solid #ddd; background: #0ea5e9; color: #fff; cursor: pointer; }
#analyzeBtn[disabled] { opacity: .5; cursor: not-allowed; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; margin-top: 10px; }
.thumb { position: relative; }
.thumb img { width: 100%; height: 90px; object-fit: cover; border-radius: 8px; border: 1px solid #eee; }
.thumb .badge { position: absolute; top: 4px; left: 4px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; padding: 2px 6px; border-radius: 999px; }
.tips { color: #666; font-size: 12px; margin-top: 6px; }
textarea { width: 100%; min-height: 160px; padding: 8px; font-size: 14px; border-radius: 8px; border: 1px solid #ddd; }
.row { margin-top: 8px; display: flex; align-items: center; gap: 8px; }
.result { white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Mono", monospace; background: #fafafa; border: 1px solid #eee; border-radius: 8px; padding: 10px; min-height: 120px; }
.footer { text-align: center; color: #666; font-size: 12px; margin: 24px 0; }
@media (prefers-color-scheme: dark) {
  body { background: #0b0b0b; color: #e5e5e5; }
  .card { background: #121212; border-color: #1f1f1f; }
  .desc, .tips, .footer { color: #9ca3af; }
  .result { background: #0f151a; border-color: #1f2a32; }
}