*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, "Microsoft JhengHei", sans-serif;
  background: #f5f5f0;
  color: #1a1a1a;
  min-height: 100vh;
}

header {
  background: #1a3f73;
  color: #fff;
  padding: 20px 32px;
}
header h1 { font-size: 20px; font-weight: 600; }
header .subtitle { font-size: 13px; opacity: 0.75; margin-top: 4px; }

main { max-width: 800px; margin: 32px auto; padding: 0 16px; }

/* Upload */
.upload-area {
  background: #fff;
  border: 1.5px dashed #aaa;
  border-radius: 12px;
  padding: 48px 32px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.upload-area.drag-over { border-color: #1a3f73; background: #eef3fb; }
.upload-icon { font-size: 40px; margin-bottom: 12px; }
.upload-label { font-size: 16px; font-weight: 500; margin-bottom: 6px; }
.upload-hint { font-size: 13px; color: #666; margin-bottom: 20px; }
.btn-upload {
  background: #1a3f73; color: #fff;
  border: none; border-radius: 8px;
  padding: 10px 28px; font-size: 14px; cursor: pointer;
}
.btn-upload:hover { background: #15325e; }

/* Progress */
.progress-bar {
  background: #e0e0e0; border-radius: 99px; height: 8px; margin-bottom: 10px;
}
.progress-fill {
  background: #1a3f73; height: 100%; border-radius: 99px;
  width: 0%; transition: width .4s;
}
.progress-label { font-size: 14px; color: #555; text-align: center; }

/* Result */
.result-header {
  background: #fff; border-radius: 12px;
  border: 1px solid #e0e0e0;
  padding: 16px 20px;
  margin-bottom: 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.school-name { font-size: 17px; font-weight: 600; }
.badges { display: flex; gap: 8px; }
.badge {
  font-size: 12px; font-weight: 500;
  padding: 3px 12px; border-radius: 20px;
}
.badge-pass { background: #eaf7ee; color: #1a6e38; }
.badge-fail { background: #fdecea; color: #9b1c1c; }
.badge-warn { background: #fff8e1; color: #7c5800; }

.doc-card {
  background: #fff; border-radius: 12px;
  border: 1px solid #e0e0e0;
  margin-bottom: 16px; overflow: hidden;
}
.doc-card-header {
  background: #f8f8f6; padding: 12px 20px;
  border-bottom: 1px solid #e8e8e8;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 14px; font-weight: 500;
}
.check-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 20px; border-bottom: 1px solid #f0f0f0;
  font-size: 13px;
}
.check-row:last-child { border-bottom: none; }
.check-icon { flex-shrink: 0; width: 18px; text-align: center; }
.check-field { color: #555; width: 130px; flex-shrink: 0; }
.check-detail { color: #1a1a1a; flex: 1; line-height: 1.5; }
.check-detail.fail { color: #9b1c1c; }
.check-detail.warn { color: #7c5800; }

.note { font-size: 12px; color: #999; margin-top: 32px; text-align: center; }
.hidden { display: none !important; }